Show transparency in calendar view

Also separate utils.ts file which was getting too big, and add a POST test
This commit is contained in:
Bruno Bernardino
2024-03-29 20:37:47 +00:00
parent 0b4b741d79
commit 6b3dc4f256
44 changed files with 983 additions and 975 deletions

View File

@@ -1,8 +1,9 @@
import { Calendar, CalendarEvent } from '/lib/types.ts';
import { getCalendarEventColor } from '/lib/utils/calendar.ts';
interface CalendarViewDayProps {
startDate: Date;
visibleCalendars: Pick<Calendar, 'id' | 'name' | 'color'>[];
visibleCalendars: Pick<Calendar, 'id' | 'name' | 'color' | 'extra'>[];
calendarEvents: CalendarEvent[];
onClickAddEvent: (startDate?: Date, isAllDay?: boolean) => void;
onClickOpenEvent: (calendarEvent: CalendarEvent) => void;
@@ -107,8 +108,7 @@ export default function CalendarViewDay(
<a
href='javascript:void(0);'
class={`flex px-2 py-2 rounded-md hover:no-underline hover:opacity-60 ${
visibleCalendars.find((calendar) => calendar.id === calendarEvent.calendar_id)
?.color || 'bg-gray-700'
getCalendarEventColor(calendarEvent, visibleCalendars)
}`}
onClick={() => onClickOpenEvent(calendarEvent)}
>
@@ -195,8 +195,7 @@ export default function CalendarViewDay(
<a
href='javascript:void(0);'
class={`flex px-2 py-2 rounded-md hover:no-underline hover:opacity-60 ${
visibleCalendars.find((calendar) => calendar.id === hourEvent.calendar_id)
?.color || 'bg-gray-700'
getCalendarEventColor(hourEvent, visibleCalendars)
}`}
onClick={() => onClickOpenEvent(hourEvent)}
>

View File

@@ -1,9 +1,9 @@
import { Calendar, CalendarEvent } from '/lib/types.ts';
import { getWeeksForMonth } from '/lib/utils.ts';
import { getCalendarEventColor, getWeeksForMonth } from '/lib/utils/calendar.ts';
interface CalendarViewWeekProps {
startDate: Date;
visibleCalendars: Pick<Calendar, 'id' | 'name' | 'color'>[];
visibleCalendars: Pick<Calendar, 'id' | 'name' | 'color' | 'extra'>[];
calendarEvents: CalendarEvent[];
onClickAddEvent: (startDate?: Date, isAllDay?: boolean) => void;
onClickOpenEvent: (calendarEvent: CalendarEvent) => void;
@@ -116,8 +116,7 @@ export default function CalendarViewWeek(
<a
href='javascript:void(0);'
class={`flex px-2 py-1 rounded-md hover:no-underline hover:opacity-60 ${
visibleCalendars.find((calendar) => calendar.id === dayEvent.calendar_id)
?.color || 'bg-gray-700'
getCalendarEventColor(dayEvent, visibleCalendars)
}`}
onClick={() => onClickOpenEvent(dayEvent)}
>

View File

@@ -1,9 +1,9 @@
import { Calendar, CalendarEvent } from '/lib/types.ts';
import { getDaysForWeek } from '/lib/utils.ts';
import { getCalendarEventColor, getDaysForWeek } from '/lib/utils/calendar.ts';
interface CalendarViewWeekProps {
startDate: Date;
visibleCalendars: Pick<Calendar, 'id' | 'name' | 'color'>[];
visibleCalendars: Pick<Calendar, 'id' | 'name' | 'color' | 'extra'>[];
calendarEvents: CalendarEvent[];
onClickAddEvent: (startDate?: Date, isAllDay?: boolean) => void;
onClickOpenEvent: (calendarEvent: CalendarEvent) => void;
@@ -97,8 +97,7 @@ export default function CalendarViewWeek(
<a
href='javascript:void(0);'
class={`flex px-2 py-2 rounded-md hover:no-underline hover:opacity-60 ${
visibleCalendars.find((calendar) => calendar.id === calendarEvent.calendar_id)
?.color || 'bg-gray-700'
getCalendarEventColor(calendarEvent, visibleCalendars)
}`}
onClick={() => onClickOpenEvent(calendarEvent)}
>
@@ -186,8 +185,7 @@ export default function CalendarViewWeek(
<a
href='javascript:void(0);'
class={`flex px-2 py-2 rounded-md hover:no-underline hover:opacity-60 ${
visibleCalendars.find((calendar) => calendar.id === hourEvent.calendar_id)
?.color || 'bg-gray-700'
getCalendarEventColor(hourEvent, visibleCalendars)
}`}
onClick={() => onClickOpenEvent(hourEvent)}
>

View File

@@ -1,12 +1,8 @@
import { useSignal } from '@preact/signals';
import { Calendar, CalendarEvent } from '/lib/types.ts';
import {
baseUrl,
capitalizeWord,
formatCalendarEventsToVCalendar,
parseVCalendarFromTextContents,
} from '/lib/utils.ts';
import { baseUrl, capitalizeWord } from '/lib/utils/misc.ts';
import { formatCalendarEventsToVCalendar, parseVCalendarFromTextContents } from '/lib/utils/calendar.ts';
import { RequestBody as GetRequestBody, ResponseBody as GetResponseBody } from '/routes/api/calendar/get-events.tsx';
import { RequestBody as AddRequestBody, ResponseBody as AddResponseBody } from '/routes/api/calendar/add-event.tsx';
import {
@@ -23,7 +19,7 @@ import SearchEvents from './SearchEvents.tsx';
import ImportEventsModal from './ImportEventsModal.tsx';
interface MainCalendarProps {
initialCalendars: Pick<Calendar, 'id' | 'name' | 'color' | 'is_visible'>[];
initialCalendars: Pick<Calendar, 'id' | 'name' | 'color' | 'is_visible' | 'extra'>[];
initialCalendarEvents: CalendarEvent[];
view: 'day' | 'week' | 'month';
startDate: string;
@@ -34,7 +30,7 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
const isDeleting = useSignal<boolean>(false);
const isExporting = useSignal<boolean>(false);
const isImporting = useSignal<boolean>(false);
const calendars = useSignal<Pick<Calendar, 'id' | 'name' | 'color' | 'is_visible'>[]>(initialCalendars);
const calendars = useSignal<Pick<Calendar, 'id' | 'name' | 'color' | 'is_visible' | 'extra'>[]>(initialCalendars);
const isViewOptionsDropdownOpen = useSignal<boolean>(false);
const isImportExportOptionsDropdownOpen = useSignal<boolean>(false);
const calendarEvents = useSignal<CalendarEvent[]>(initialCalendarEvents);