1160 lines
47 KiB
TypeScript
1160 lines
47 KiB
TypeScript
import { useSignal } from '@preact/signals';
|
|
import { useEffect } from 'preact/hooks';
|
|
|
|
import { Calendar, CalendarEvent } from '/lib/types.ts';
|
|
import { baseUrl, capitalizeWord, getDaysForWeek, getWeeksForMonth } from '/lib/utils.ts';
|
|
// import { RequestBody as GetRequestBody, ResponseBody as GetResponseBody } from '/routes/api/contacts/get.tsx';
|
|
// import { RequestBody as AddRequestBody, ResponseBody as AddResponseBody } from '/routes/api/contacts/add.tsx';
|
|
// import { RequestBody as DeleteRequestBody, ResponseBody as DeleteResponseBody } from '/routes/api/contacts/delete.tsx';
|
|
// import { RequestBody as ImportRequestBody, ResponseBody as ImportResponseBody } from '/routes/api/contacts/import.tsx';
|
|
|
|
interface MainCalendarProps {
|
|
initialCalendars: Pick<Calendar, 'id' | 'name' | 'color' | 'is_visible'>[];
|
|
initialCalendarEvents: CalendarEvent[];
|
|
view: 'day' | 'week' | 'month';
|
|
startDate: string;
|
|
}
|
|
|
|
export default function MainCalendar({ initialCalendars, initialCalendarEvents, view, startDate }: MainCalendarProps) {
|
|
const isAdding = useSignal<boolean>(false);
|
|
const isDeleting = useSignal<boolean>(false);
|
|
const isExporting = useSignal<boolean>(false);
|
|
const isImporting = useSignal<boolean>(false);
|
|
const isSearching = useSignal<boolean>(false);
|
|
const calendars = useSignal<Pick<Calendar, 'id' | 'name' | 'color' | 'is_visible'>[]>(initialCalendars);
|
|
const isViewOptionsDropdownOpen = useSignal<boolean>(false);
|
|
const isImportExportOptionsDropdownOpen = useSignal<boolean>(false);
|
|
const calendarEvents = useSignal<CalendarEvent[]>(initialCalendarEvents);
|
|
const searchTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
|
|
const openEvent = useSignal<CalendarEvent | null>(null);
|
|
|
|
const dateFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long' });
|
|
const hourFormat = new Intl.DateTimeFormat('en-GB', { hour12: false, hour: '2-digit', minute: '2-digit' });
|
|
const dayFormat = new Intl.DateTimeFormat('en-GB', {
|
|
weekday: 'long',
|
|
day: 'numeric',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
});
|
|
const weekDayFormat = new Intl.DateTimeFormat('en-GB', { weekday: 'short' });
|
|
const allDayEventDateFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long', day: 'numeric' });
|
|
const today = new Date().toISOString().substring(0, 10);
|
|
|
|
function onClickAddEvent() {
|
|
if (isAdding.value) {
|
|
return;
|
|
}
|
|
|
|
const title = (prompt(`What's the **title** for the new event?`) || '').trim();
|
|
|
|
if (!title) {
|
|
alert('A title is required for a new event!');
|
|
return;
|
|
}
|
|
|
|
const startDate =
|
|
(prompt(`What's the **start date** for the new event (YYYY-MM-DD)?`, new Date().toISOString().substring(0, 10)) ||
|
|
'').trim();
|
|
const startHour =
|
|
(prompt(`What's the **start hour** for the new event (HH:mm)?`, new Date().toISOString().substring(11, 5)) || '')
|
|
.trim();
|
|
|
|
if (!startDate || !startHour) {
|
|
alert('A start date and hour are required for a new event!');
|
|
return;
|
|
}
|
|
|
|
isAdding.value = true;
|
|
|
|
// try {
|
|
// const requestBody: AddRequestBody = { title, startDate, startHour };
|
|
// const response = await fetch(`/api/calendar/add-event`, {
|
|
// method: 'POST',
|
|
// body: JSON.stringify(requestBody),
|
|
// });
|
|
// const result = await response.json() as AddResponseBody;
|
|
|
|
// if (!result.success) {
|
|
// throw new Error('Failed to add contact!');
|
|
// }
|
|
|
|
// contacts.value = [...result.contacts];
|
|
// } catch (error) {
|
|
// console.error(error);
|
|
// }
|
|
|
|
isAdding.value = false;
|
|
}
|
|
|
|
function toggleImportExportOptionsDropdown() {
|
|
isImportExportOptionsDropdownOpen.value = !isImportExportOptionsDropdownOpen.value;
|
|
}
|
|
|
|
function toggleViewOptionsDropdown() {
|
|
isViewOptionsDropdownOpen.value = !isViewOptionsDropdownOpen.value;
|
|
}
|
|
|
|
function onClickDeleteEvent(calendarEventId: string) {
|
|
if (confirm('Are you sure you want to delete this event?')) {
|
|
if (isDeleting.value) {
|
|
return;
|
|
}
|
|
|
|
isDeleting.value = true;
|
|
|
|
// try {
|
|
// const requestBody: DeleteRequestBody = { calendarEventId, view, startDay };
|
|
// const response = await fetch(`/api/calendar/delete-event`, {
|
|
// method: 'POST',
|
|
// body: JSON.stringify(requestBody),
|
|
// });
|
|
// const result = await response.json() as DeleteResponseBody;
|
|
|
|
// if (!result.success) {
|
|
// throw new Error('Failed to delete event!');
|
|
// }
|
|
|
|
// contacts.value = [...result.contacts];
|
|
// } catch (error) {
|
|
// console.error(error);
|
|
// }
|
|
|
|
isDeleting.value = false;
|
|
|
|
openEvent.value = null;
|
|
}
|
|
}
|
|
|
|
function onClickChangeStartDate(changeTo: 'previous' | 'next' | 'today') {
|
|
const previousDay = new Date(new Date(startDate).setUTCDate(new Date(startDate).getUTCDate() - 1)).toISOString()
|
|
.substring(0, 10);
|
|
const nextDay = new Date(new Date(startDate).setUTCDate(new Date(startDate).getUTCDate() + 1)).toISOString()
|
|
.substring(0, 10);
|
|
const previousWeek = new Date(new Date(startDate).setUTCDate(new Date(startDate).getUTCDate() - 7)).toISOString()
|
|
.substring(0, 10);
|
|
const nextWeek = new Date(new Date(startDate).setUTCDate(new Date(startDate).getUTCDate() + 7)).toISOString()
|
|
.substring(0, 10);
|
|
const previousMonth = new Date(new Date(startDate).setUTCMonth(new Date(startDate).getUTCMonth() - 1)).toISOString()
|
|
.substring(0, 10);
|
|
const nextMonth = new Date(new Date(startDate).setUTCMonth(new Date(startDate).getUTCMonth() + 1)).toISOString()
|
|
.substring(0, 10);
|
|
|
|
if (changeTo === 'today') {
|
|
if (today === startDate) {
|
|
return;
|
|
}
|
|
|
|
window.location.href = `/calendar?view=${view}&startDate=${today}`;
|
|
return;
|
|
}
|
|
|
|
if (changeTo === 'previous') {
|
|
let newStartDate = previousMonth;
|
|
|
|
if (view === 'day') {
|
|
newStartDate = previousDay;
|
|
} else if (view === 'week') {
|
|
newStartDate = previousWeek;
|
|
}
|
|
|
|
if (newStartDate === startDate) {
|
|
return;
|
|
}
|
|
|
|
window.location.href = `/calendar?view=${view}&startDate=${newStartDate}`;
|
|
return;
|
|
}
|
|
|
|
let newStartDate = nextMonth;
|
|
|
|
if (view === 'day') {
|
|
newStartDate = nextDay;
|
|
} else if (view === 'week') {
|
|
newStartDate = nextWeek;
|
|
}
|
|
|
|
if (newStartDate === startDate) {
|
|
return;
|
|
}
|
|
|
|
window.location.href = `/calendar?view=${view}&startDate=${newStartDate}`;
|
|
}
|
|
|
|
function onClickChangeView(newView: MainCalendarProps['view']) {
|
|
if (view === newView) {
|
|
isViewOptionsDropdownOpen.value = false;
|
|
return;
|
|
}
|
|
|
|
window.location.href = `/calendar?view=${newView}&startDate=${startDate}`;
|
|
}
|
|
|
|
function onClickImportICS() {
|
|
isImportExportOptionsDropdownOpen.value = false;
|
|
|
|
if (isImporting.value) {
|
|
return;
|
|
}
|
|
|
|
const fileInput = document.createElement('input');
|
|
fileInput.type = 'file';
|
|
fileInput.click();
|
|
|
|
fileInput.onchange = (event) => {
|
|
const files = (event.target as HTMLInputElement)?.files!;
|
|
const file = files[0];
|
|
|
|
if (!file) {
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (fileRead) => {
|
|
const importFileContents = fileRead.target?.result;
|
|
|
|
if (!importFileContents || isImporting.value) {
|
|
return;
|
|
}
|
|
|
|
isImporting.value = true;
|
|
|
|
// try {
|
|
// const partialContacts = parseVCardFromTextContents(importFileContents!.toString());
|
|
|
|
// const requestBody: ImportRequestBody = { partialContacts, page };
|
|
// const response = await fetch(`/api/calendar/import`, {
|
|
// method: 'POST',
|
|
// body: JSON.stringify(requestBody),
|
|
// });
|
|
// const result = await response.json() as ImportResponseBody;
|
|
|
|
// if (!result.success) {
|
|
// throw new Error('Failed to import contact!');
|
|
// }
|
|
|
|
// contacts.value = [...result.contacts];
|
|
// } catch (error) {
|
|
// console.error(error);
|
|
// }
|
|
|
|
isImporting.value = false;
|
|
};
|
|
|
|
reader.readAsText(file, 'UTF-8');
|
|
};
|
|
}
|
|
|
|
function onClickExportICS() {
|
|
isImportExportOptionsDropdownOpen.value = false;
|
|
|
|
if (isExporting.value) {
|
|
return;
|
|
}
|
|
|
|
isExporting.value = true;
|
|
|
|
// const fileName = ['calendars-', new Date().toISOString().substring(0, 19).replace(/:/g, '-'), '.ics']
|
|
// .join('');
|
|
|
|
// try {
|
|
// const requestBody: GetRequestBody = {};
|
|
// const response = await fetch(`/api/calendar/get`, {
|
|
// method: 'POST',
|
|
// body: JSON.stringify(requestBody),
|
|
// });
|
|
// const result = await response.json() as GetResponseBody;
|
|
|
|
// if (!result.success) {
|
|
// throw new Error('Failed to get contact!');
|
|
// }
|
|
|
|
// const exportContents = formatContactToVCard([...result.contacts]);
|
|
|
|
// // Add content-type
|
|
// const vCardContent = ['data:text/vcard; charset=utf-8,', encodeURIComponent(exportContents)].join('');
|
|
|
|
// // Download the file
|
|
// const data = vCardContent;
|
|
// const link = document.createElement('a');
|
|
// link.setAttribute('href', data);
|
|
// link.setAttribute('download', fileName);
|
|
// link.click();
|
|
// link.remove();
|
|
// } catch (error) {
|
|
// console.error(error);
|
|
// }
|
|
|
|
isExporting.value = false;
|
|
}
|
|
|
|
function searchEvents(searchTerms: string) {
|
|
if (searchTimeout.value) {
|
|
clearTimeout(searchTimeout.value);
|
|
}
|
|
|
|
searchTimeout.value = setTimeout(async () => {
|
|
isSearching.value = true;
|
|
|
|
// TODO: Remove this
|
|
await new Promise((resolve) => setTimeout(() => resolve(true), 1000));
|
|
|
|
// try {
|
|
// const requestBody: RequestBody = { search: searchTerms };
|
|
// const response = await fetch(`/api/calendar/search-events`, {
|
|
// method: 'POST',
|
|
// body: JSON.stringify(requestBody),
|
|
// });
|
|
// const result = await response.json() as ResponseBody;
|
|
|
|
// if (!result.success) {
|
|
// throw new Error('Failed to search events!');
|
|
// }
|
|
// } catch (error) {
|
|
// console.error(error);
|
|
// }
|
|
|
|
isSearching.value = false;
|
|
}, 500);
|
|
}
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (searchTimeout.value) {
|
|
clearTimeout(searchTimeout.value);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
const visibleCalendars = calendars.value.filter((calendar) => calendar.is_visible);
|
|
|
|
const weeks = view === 'month' ? getWeeksForMonth(new Date(startDate)) : [];
|
|
|
|
const hours: { date: Date; isCurrentHour: boolean }[] = view === 'day'
|
|
? Array.from({ length: 24 }).map((_, index) => {
|
|
const hourNumber = index;
|
|
|
|
const date = new Date(startDate);
|
|
date.setHours(hourNumber);
|
|
|
|
const shortIsoDate = date.toISOString().substring(0, 10);
|
|
|
|
const isCurrentHour = shortIsoDate === today && new Date().getHours() === hourNumber;
|
|
|
|
return {
|
|
date,
|
|
isCurrentHour,
|
|
};
|
|
})
|
|
: [];
|
|
|
|
const allDayEvents: CalendarEvent[] = view === 'day'
|
|
? calendarEvents.value.filter((calendarEvent) => {
|
|
if (!calendarEvent.is_all_day) {
|
|
return false;
|
|
}
|
|
|
|
const startDayDate = new Date(startDate);
|
|
const endDayDate = new Date(startDate);
|
|
endDayDate.setHours(23);
|
|
endDayDate.setMinutes(59);
|
|
endDayDate.setSeconds(59);
|
|
endDayDate.setMilliseconds(999);
|
|
|
|
const eventStartDate = new Date(calendarEvent.start_date);
|
|
const eventEndDate = new Date(calendarEvent.end_date);
|
|
|
|
// Event starts and ends on this day
|
|
if (eventStartDate >= startDayDate && eventEndDate <= endDayDate) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts before and ends after this day
|
|
if (eventStartDate <= startDayDate && eventEndDate >= endDayDate) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts on and ends after this day
|
|
if (
|
|
eventStartDate >= startDayDate && eventStartDate <= endDayDate && eventEndDate >= endDayDate
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts before and ends on this day
|
|
if (
|
|
eventStartDate <= startDayDate && eventEndDate >= startDayDate && eventEndDate <= endDayDate
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
})
|
|
: [];
|
|
|
|
const days = view === 'week' ? getDaysForWeek(new Date(startDate)) : [];
|
|
|
|
return (
|
|
<>
|
|
<section class='flex flex-row items-center justify-between mb-4'>
|
|
<section class='relative inline-block text-left mr-2'>
|
|
<section class='flex flex-row items-center justify-start'>
|
|
<a href='/calendars' class='mr-4 whitespace-nowrap'>Manage calendars</a>
|
|
<input
|
|
class='input-field w-72 mr-2'
|
|
type='search'
|
|
name='search'
|
|
placeholder='Search events...'
|
|
onInput={(event) => searchEvents(event.currentTarget.value)}
|
|
/>
|
|
{isSearching.value ? <img src='/images/loading.svg' class='white mr-2' width={18} height={18} /> : null}
|
|
</section>
|
|
</section>
|
|
|
|
<section class='flex items-center justify-end'>
|
|
<h3 class='text-base font-semibold text-white whitespace-nowrap mr-2'>
|
|
<time datetime={startDate}>{dateFormat.format(new Date(startDate))}</time>
|
|
</h3>
|
|
<section class='ml-2 relative flex items-center rounded-md bg-slate-700 shadow-sm md:items-stretch'>
|
|
<button
|
|
type='button'
|
|
class='flex h-9 w-12 items-center justify-center rounded-l-md text-white hover:bg-slate-600 focus:relative'
|
|
onClick={() => onClickChangeStartDate('previous')}
|
|
>
|
|
<span class='sr-only'>Previous {view}</span>
|
|
<svg class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor' aria-hidden='true'>
|
|
<path
|
|
fill-rule='evenodd'
|
|
d='M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z'
|
|
clip-rule='evenodd'
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
type='button'
|
|
class='px-3.5 text-sm font-semibold text-white hover:bg-slate-600 focus:relative'
|
|
onClick={() => onClickChangeStartDate('today')}
|
|
>
|
|
Today
|
|
</button>
|
|
<button
|
|
type='button'
|
|
class='flex h-9 w-12 items-center justify-center rounded-r-md text-white hover:bg-slate-600 pl-1 focus:relative'
|
|
onClick={() => onClickChangeStartDate('next')}
|
|
>
|
|
<span class='sr-only'>Next {view}</span>
|
|
<svg class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor' aria-hidden='true'>
|
|
<path
|
|
fill-rule='evenodd'
|
|
d='M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z'
|
|
clip-rule='evenodd'
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</section>
|
|
<section class='relative inline-block text-left ml-2'>
|
|
<div>
|
|
<button
|
|
type='button'
|
|
class='inline-flex w-full justify-center gap-x-1.5 rounded-md bg-slate-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-600'
|
|
id='view-button'
|
|
aria-expanded='true'
|
|
aria-haspopup='true'
|
|
onClick={() => toggleViewOptionsDropdown()}
|
|
>
|
|
{capitalizeWord(view)}
|
|
<svg class='-mr-1 h-5 w-5 text-white' viewBox='0 0 20 20' fill='currentColor' aria-hidden='true'>
|
|
<path
|
|
fill-rule='evenodd'
|
|
d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'
|
|
clip-rule='evenodd'
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
|
|
!isViewOptionsDropdownOpen.value ? 'hidden' : ''
|
|
}`}
|
|
role='menu'
|
|
aria-orientation='vertical'
|
|
aria-labelledby='view-button'
|
|
tabindex={-1}
|
|
>
|
|
<div class='py-1'>
|
|
<button
|
|
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600 ${
|
|
view === 'day' ? 'font-semibold' : ''
|
|
}`}
|
|
onClick={() => onClickChangeView('day')}
|
|
>
|
|
Day
|
|
</button>
|
|
<button
|
|
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600 ${
|
|
view === 'week' ? 'font-semibold' : ''
|
|
}`}
|
|
onClick={() => onClickChangeView('week')}
|
|
>
|
|
Week
|
|
</button>
|
|
<button
|
|
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600 ${
|
|
view === 'month' ? 'font-semibold' : ''
|
|
}`}
|
|
onClick={() => onClickChangeView('month')}
|
|
>
|
|
Month
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class='relative inline-block text-left ml-2'>
|
|
<div>
|
|
<button
|
|
type='button'
|
|
class='inline-flex w-full justify-center gap-x-1.5 rounded-md bg-slate-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-600'
|
|
id='import-export-button'
|
|
aria-expanded='true'
|
|
aria-haspopup='true'
|
|
onClick={() => toggleImportExportOptionsDropdown()}
|
|
>
|
|
ICS
|
|
<svg class='-mr-1 h-5 w-5 text-slate-400' viewBox='0 0 20 20' fill='currentColor' aria-hidden='true'>
|
|
<path
|
|
fill-rule='evenodd'
|
|
d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'
|
|
clip-rule='evenodd'
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
|
|
!isImportExportOptionsDropdownOpen.value ? 'hidden' : ''
|
|
}`}
|
|
role='menu'
|
|
aria-orientation='vertical'
|
|
aria-labelledby='import-export-button'
|
|
tabindex={-1}
|
|
>
|
|
<div class='py-1'>
|
|
<button
|
|
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
|
|
onClick={() => onClickImportICS()}
|
|
>
|
|
Import ICS
|
|
</button>
|
|
<button
|
|
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
|
|
onClick={() => onClickExportICS()}
|
|
>
|
|
Export ICS
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<button
|
|
class='inline-block justify-center gap-x-1.5 rounded-md bg-[#51A4FB] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-400 ml-2'
|
|
type='button'
|
|
title='Add new event'
|
|
onClick={() => onClickAddEvent()}
|
|
>
|
|
<img
|
|
src='/images/add.svg'
|
|
alt='Add new event'
|
|
class={`white ${isAdding.value ? 'animate-spin' : ''}`}
|
|
width={20}
|
|
height={20}
|
|
/>
|
|
</button>
|
|
</section>
|
|
</section>
|
|
|
|
<section class='mx-auto max-w-7xl my-8'>
|
|
{view === 'day'
|
|
? (
|
|
<section class='shadow-md flex flex-auto flex-col rounded-md'>
|
|
<section class='border-b border-slate-500 bg-slate-700 text-center text-base font-semibold text-white flex-none rounded-t-md'>
|
|
<div class='flex justify-center bg-gray-900 py-2 rounded-t-md'>
|
|
<span>{dayFormat.format(new Date(startDate))}</span>
|
|
</div>
|
|
</section>
|
|
<section class='flex bg-slate-500 text-sm text-white flex-auto rounded-b-md'>
|
|
<section class='w-full rounded-b-md'>
|
|
{allDayEvents.length > 0
|
|
? (
|
|
<section
|
|
class={`relative bg-slate-700 min-h-16 px-3 py-2 text-slate-100 border-b border-b-slate-600`}
|
|
>
|
|
<time datetime={new Date(startDate).toISOString().substring(0, 10)}>
|
|
All-day
|
|
</time>
|
|
<ol class='mt-2'>
|
|
{allDayEvents.map((calendarEvent) => (
|
|
<li class='mb-1'>
|
|
<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'
|
|
}`}
|
|
onClick={() => openEvent.value = calendarEvent}
|
|
>
|
|
<p class='flex-auto truncate font-medium text-white'>
|
|
{calendarEvent.title}
|
|
</p>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</section>
|
|
)
|
|
: null}
|
|
{hours.map((hour, hourIndex) => {
|
|
const shortIsoDate = hour.date.toISOString().substring(0, 10);
|
|
|
|
const startHourDate = new Date(shortIsoDate);
|
|
startHourDate.setHours(hour.date.getHours());
|
|
const endHourDate = new Date(shortIsoDate);
|
|
endHourDate.setHours(hour.date.getHours());
|
|
endHourDate.setMinutes(59);
|
|
endHourDate.setSeconds(59);
|
|
endHourDate.setMilliseconds(999);
|
|
|
|
const isLastHour = hourIndex === 23;
|
|
|
|
const hourEvents = calendarEvents.value.filter((calendarEvent) => {
|
|
if (calendarEvent.is_all_day) {
|
|
return false;
|
|
}
|
|
|
|
const eventStartDate = new Date(calendarEvent.start_date);
|
|
const eventEndDate = new Date(calendarEvent.end_date);
|
|
eventEndDate.setSeconds(eventEndDate.getSeconds() - 1); // Take one second back so events don't bleed into the next hour
|
|
|
|
// Event starts and ends on this hour
|
|
if (eventStartDate >= startHourDate && eventEndDate <= endHourDate) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts before and ends after this hour
|
|
if (eventStartDate <= startHourDate && eventEndDate >= endHourDate) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts on and ends after this hour
|
|
if (
|
|
eventStartDate >= startHourDate && eventStartDate <= endHourDate && eventEndDate >= endHourDate
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts before and ends on this hour
|
|
if (
|
|
eventStartDate <= startHourDate && eventEndDate >= startHourDate && eventEndDate <= endHourDate
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
return (
|
|
<section
|
|
class={`relative ${hour.isCurrentHour ? 'bg-slate-600' : 'bg-slate-700'} ${
|
|
hourIndex <= 6 ? 'min-h-8' : 'min-h-16'
|
|
} px-3 py-2 ${hour.isCurrentHour ? '' : 'text-slate-100'} ${
|
|
isLastHour ? 'rounded-b-md' : ''
|
|
} border-b border-b-slate-600`}
|
|
>
|
|
<time datetime={startHourDate.toISOString()}>
|
|
{hourFormat.format(startHourDate)}
|
|
</time>
|
|
{hourEvents.length > 0
|
|
? (
|
|
<ol class='mt-2'>
|
|
{hourEvents.map((hourEvent) => (
|
|
<li class='mb-1'>
|
|
<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'
|
|
}`}
|
|
onClick={() => openEvent.value = hourEvent}
|
|
>
|
|
<time
|
|
datetime={new Date(hourEvent.start_date).toISOString()}
|
|
class='mr-2 flex-none text-slate-100 block'
|
|
>
|
|
{hourFormat.format(new Date(hourEvent.start_date))}
|
|
</time>
|
|
<p class='flex-auto truncate font-medium text-white'>
|
|
{hourEvent.title}
|
|
</p>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
)
|
|
: null}
|
|
</section>
|
|
);
|
|
})}
|
|
</section>
|
|
</section>
|
|
</section>
|
|
)
|
|
: null}
|
|
{view === 'week'
|
|
? (
|
|
<section class='shadow-md flex flex-auto flex-col rounded-md'>
|
|
<section class='w-full grid gap-px grid-flow-col rounded-md text-white text-xs bg-slate-600 calendar-week-view-days'>
|
|
{days.map((day, dayIndex) => {
|
|
const allDayEvents: CalendarEvent[] = calendarEvents.value.filter((calendarEvent) => {
|
|
if (!calendarEvent.is_all_day) {
|
|
return false;
|
|
}
|
|
|
|
const startDayDate = new Date(day.date);
|
|
const endDayDate = new Date(day.date);
|
|
endDayDate.setHours(23);
|
|
endDayDate.setMinutes(59);
|
|
endDayDate.setSeconds(59);
|
|
endDayDate.setMilliseconds(999);
|
|
|
|
const eventStartDate = new Date(calendarEvent.start_date);
|
|
const eventEndDate = new Date(calendarEvent.end_date);
|
|
|
|
// Event starts and ends on this day
|
|
if (eventStartDate >= startDayDate && eventEndDate <= endDayDate) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts before and ends after this day
|
|
if (eventStartDate <= startDayDate && eventEndDate >= endDayDate) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts on and ends after this day
|
|
if (
|
|
eventStartDate >= startDayDate && eventStartDate <= endDayDate && eventEndDate >= endDayDate
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts before and ends on this day
|
|
if (
|
|
eventStartDate <= startDayDate && eventEndDate >= startDayDate && eventEndDate <= endDayDate
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
const isFirstDay = dayIndex === 0;
|
|
const isLastDay = dayIndex === 6;
|
|
const isToday = new Date(day.date).toISOString().substring(0, 10) === today;
|
|
|
|
return (
|
|
<>
|
|
<section
|
|
class={`flex justify-center ${isToday ? 'bg-[#51A4FB]' : 'bg-gray-900'} py-2 ${
|
|
isFirstDay ? 'rounded-tl-md' : ''
|
|
} ${isLastDay ? 'rounded-tr-md' : ''} text-center text-xs font-semibold text-white`}
|
|
>
|
|
<span>{weekDayFormat.format(day.date)}</span>
|
|
</section>
|
|
<section
|
|
class={`relative bg-slate-700 min-h-8 px-3 py-2 text-slate-100`}
|
|
>
|
|
<time datetime={new Date(startDate).toISOString().substring(0, 10)}>
|
|
All-day
|
|
</time>
|
|
{allDayEvents.length > 0
|
|
? (
|
|
<ol class='mt-2'>
|
|
{allDayEvents.map((calendarEvent) => (
|
|
<li class='mb-1'>
|
|
<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'
|
|
}`}
|
|
onClick={() => openEvent.value = calendarEvent}
|
|
>
|
|
<p class='flex-auto truncate font-medium text-white'>
|
|
{calendarEvent.title}
|
|
</p>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
)
|
|
: null}
|
|
</section>
|
|
{day.hours.map((hour, hourIndex) => {
|
|
const shortIsoDate = hour.date.toISOString().substring(0, 10);
|
|
|
|
const startHourDate = new Date(shortIsoDate);
|
|
startHourDate.setHours(hour.date.getHours());
|
|
const endHourDate = new Date(shortIsoDate);
|
|
endHourDate.setHours(hour.date.getHours());
|
|
endHourDate.setMinutes(59);
|
|
endHourDate.setSeconds(59);
|
|
endHourDate.setMilliseconds(999);
|
|
|
|
const isLastHourOfFirstDay = hourIndex === 23 && dayIndex === 0;
|
|
const isLastHourOfLastDay = hourIndex === 23 && dayIndex === 6;
|
|
|
|
const hourEvents = calendarEvents.value.filter((calendarEvent) => {
|
|
if (calendarEvent.is_all_day) {
|
|
return false;
|
|
}
|
|
|
|
const eventStartDate = new Date(calendarEvent.start_date);
|
|
const eventEndDate = new Date(calendarEvent.end_date);
|
|
eventEndDate.setSeconds(eventEndDate.getSeconds() - 1); // Take one second back so events don't bleed into the next hour
|
|
|
|
// Event starts and ends on this hour
|
|
if (eventStartDate >= startHourDate && eventEndDate <= endHourDate) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts before and ends after this hour
|
|
if (eventStartDate <= startHourDate && eventEndDate >= endHourDate) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts on and ends after this hour
|
|
if (
|
|
eventStartDate >= startHourDate && eventStartDate <= endHourDate &&
|
|
eventEndDate >= endHourDate
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts before and ends on this hour
|
|
if (
|
|
eventStartDate <= startHourDate && eventEndDate >= startHourDate &&
|
|
eventEndDate <= endHourDate
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
return (
|
|
<section
|
|
class={`relative ${
|
|
hour.isCurrentHour ? 'bg-slate-600' : 'bg-slate-700'
|
|
} min-h-8 px-3 py-2 ${hour.isCurrentHour ? '' : 'text-slate-100'} ${
|
|
isLastHourOfFirstDay ? 'rounded-bl-md' : ''
|
|
} ${isLastHourOfLastDay ? 'rounded-br-md' : ''}`}
|
|
>
|
|
<time datetime={startHourDate.toISOString()}>
|
|
{hourFormat.format(startHourDate)}
|
|
</time>
|
|
{hourEvents.length > 0
|
|
? (
|
|
<ol class='mt-2'>
|
|
{hourEvents.map((hourEvent) => (
|
|
<li class='mb-1'>
|
|
<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'
|
|
}`}
|
|
onClick={() => openEvent.value = hourEvent}
|
|
>
|
|
<time
|
|
datetime={new Date(hourEvent.start_date).toISOString()}
|
|
class='mr-2 flex-none text-slate-100 block'
|
|
>
|
|
{hourFormat.format(new Date(hourEvent.start_date))}
|
|
</time>
|
|
<p class='flex-auto truncate font-medium text-white'>
|
|
{hourEvent.title}
|
|
</p>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
)
|
|
: null}
|
|
</section>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
})}
|
|
</section>
|
|
</section>
|
|
)
|
|
: null}
|
|
{view === 'month'
|
|
? (
|
|
<section class='shadow-md flex flex-auto flex-col rounded-md'>
|
|
<section class='grid grid-cols-7 gap-px border-b border-slate-500 bg-slate-700 text-center text-xs font-semibold text-white flex-none rounded-t-md'>
|
|
<div class='flex justify-center bg-gray-900 py-2 rounded-tl-md'>
|
|
<span>Mon</span>
|
|
</div>
|
|
<div class='flex justify-center bg-gray-900 py-2'>
|
|
<span>Tue</span>
|
|
</div>
|
|
<div class='flex justify-center bg-gray-900 py-2'>
|
|
<span>Wed</span>
|
|
</div>
|
|
<div class='flex justify-center bg-gray-900 py-2'>
|
|
<span>Thu</span>
|
|
</div>
|
|
<div class='flex justify-center bg-gray-900 py-2'>
|
|
<span>Fri</span>
|
|
</div>
|
|
<div class='flex justify-center bg-gray-900 py-2'>
|
|
<span>Sat</span>
|
|
</div>
|
|
<div class='flex justify-center bg-gray-900 py-2 rounded-tr-md'>
|
|
<span>Sun</span>
|
|
</div>
|
|
</section>
|
|
<section class='flex bg-slate-500 text-xs text-white flex-auto rounded-b-md'>
|
|
<section class='w-full grid grid-cols-7 grid-rows-5 gap-px rounded-b-md'>
|
|
{weeks.map((week, weekIndex) =>
|
|
week.map((day, dayIndex) => {
|
|
const shortIsoDate = day.date.toISOString().substring(0, 10);
|
|
|
|
const startDayDate = new Date(shortIsoDate);
|
|
const endDayDate = new Date(shortIsoDate);
|
|
endDayDate.setHours(23);
|
|
endDayDate.setMinutes(59);
|
|
endDayDate.setSeconds(59);
|
|
endDayDate.setMilliseconds(999);
|
|
|
|
const isBottomLeftDay = weekIndex === weeks.length - 1 && dayIndex === 0;
|
|
const isBottomRightDay = weekIndex === weeks.length - 1 && dayIndex === week.length - 1;
|
|
|
|
const isToday = today === shortIsoDate;
|
|
|
|
const dayEvents = calendarEvents.value.filter((calendarEvent) => {
|
|
const eventStartDate = new Date(calendarEvent.start_date);
|
|
const eventEndDate = new Date(calendarEvent.end_date);
|
|
|
|
// Event starts and ends on this day
|
|
if (eventStartDate >= startDayDate && eventEndDate <= endDayDate) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts before and ends after this day
|
|
if (eventStartDate <= startDayDate && eventEndDate >= endDayDate) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts on and ends after this day
|
|
if (
|
|
eventStartDate >= startDayDate && eventStartDate <= endDayDate && eventEndDate >= endDayDate
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
// Event starts before and ends on this day
|
|
if (
|
|
eventStartDate <= startDayDate && eventEndDate >= startDayDate && eventEndDate <= endDayDate
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
return (
|
|
<section
|
|
class={`relative ${day.isSameMonth ? 'bg-slate-600' : 'bg-slate-700'} min-h-16 px-3 py-2 ${
|
|
day.isSameMonth ? '' : 'text-slate-100'
|
|
} ${isBottomLeftDay ? 'rounded-bl-md' : ''} ${isBottomRightDay ? 'rounded-br-md' : ''}`}
|
|
>
|
|
<time
|
|
datetime={shortIsoDate}
|
|
class={`${
|
|
isToday
|
|
? 'flex h-6 w-6 items-center justify-center rounded-full bg-[#51A4FB] font-semibold'
|
|
: ''
|
|
}`}
|
|
>
|
|
{day.date.getDate()}
|
|
</time>
|
|
{dayEvents.length > 0
|
|
? (
|
|
<ol class='mt-2'>
|
|
{[...dayEvents].slice(0, 2).map((dayEvent) => (
|
|
<li class='mb-1'>
|
|
<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'
|
|
}`}
|
|
onClick={() => openEvent.value = dayEvent}
|
|
>
|
|
<time
|
|
datetime={new Date(dayEvent.start_date).toISOString()}
|
|
class='mr-2 flex-none text-slate-100 block'
|
|
>
|
|
{hourFormat.format(new Date(dayEvent.start_date))}
|
|
</time>
|
|
<p class='flex-auto truncate font-medium text-white'>
|
|
{dayEvent.title}
|
|
</p>
|
|
</a>
|
|
</li>
|
|
))}
|
|
{dayEvents.length > 2
|
|
? (
|
|
<li class='mb-1'>
|
|
<a
|
|
href={`/calendar/view=day&startDate=${shortIsoDate}`}
|
|
class='flex bg-gray-700 px-2 py-1 rounded-md hover:no-underline hover:opacity-60'
|
|
target='_blank'
|
|
>
|
|
<p class='flex-auto truncate font-medium text-white'>
|
|
...{dayEvents.length - 2} more event{dayEvents.length - 2 === 1 ? '' : 's'}
|
|
</p>
|
|
</a>
|
|
</li>
|
|
)
|
|
: null}
|
|
</ol>
|
|
)
|
|
: null}
|
|
</section>
|
|
);
|
|
})
|
|
)}
|
|
</section>
|
|
</section>
|
|
</section>
|
|
)
|
|
: null}
|
|
|
|
<span
|
|
class={`flex justify-end items-center text-sm mt-1 mx-2 text-slate-100`}
|
|
>
|
|
{isDeleting.value
|
|
? (
|
|
<>
|
|
<img src='/images/loading.svg' class='white mr-2' width={18} height={18} />Deleting...
|
|
</>
|
|
)
|
|
: null}
|
|
{isExporting.value
|
|
? (
|
|
<>
|
|
<img src='/images/loading.svg' class='white mr-2' width={18} height={18} />Exporting...
|
|
</>
|
|
)
|
|
: null}
|
|
{isImporting.value
|
|
? (
|
|
<>
|
|
<img src='/images/loading.svg' class='white mr-2' width={18} height={18} />Importing...
|
|
</>
|
|
)
|
|
: null}
|
|
{!isDeleting.value && !isExporting.value && !isImporting.value ? <> </> : null}
|
|
</span>
|
|
</section>
|
|
|
|
<section class='flex flex-row items-center justify-start my-12'>
|
|
<span class='font-semibold'>CalDAV URLs:</span>{' '}
|
|
<code class='bg-slate-600 mx-2 px-2 py-1 rounded-md'>{baseUrl}/dav/principals/</code>{' '}
|
|
<code class='bg-slate-600 mx-2 px-2 py-1 rounded-md'>{baseUrl}/dav/calendars/</code>
|
|
</section>
|
|
|
|
<section
|
|
class={`fixed ${openEvent.value ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
|
|
>
|
|
</section>
|
|
|
|
<section
|
|
class={`fixed ${
|
|
openEvent.value ? 'block' : 'hidden'
|
|
} z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 bg-slate-600 text-white rounded-md px-8 py-6 drop-shadow-lg`}
|
|
>
|
|
<h1 class='text-2xl font-semibold my-5'>{openEvent.value?.title || ''}</h1>
|
|
<header class='py-5 border-t border-b border-slate-500 font-semibold flex justify-between'>
|
|
<span>
|
|
{openEvent.value?.start_date ? allDayEventDateFormat.format(new Date(openEvent.value.start_date)) : ''}
|
|
</span>
|
|
{openEvent.value?.is_all_day ? <span>All-day</span> : (
|
|
<span>
|
|
{openEvent.value?.start_date ? hourFormat.format(new Date(openEvent.value.start_date)) : ''} -{' '}
|
|
{openEvent.value?.end_date ? hourFormat.format(new Date(openEvent.value.end_date)) : ''}
|
|
</span>
|
|
)}
|
|
</header>
|
|
<section class='py-5 my-0 border-b border-slate-500'>
|
|
<p>TODO: calendar, recurrence</p>
|
|
</section>
|
|
{openEvent.value?.extra.description
|
|
? (
|
|
<section class='py-5 my-0 border-b border-slate-500'>
|
|
<p>{openEvent.value.extra.description}</p>
|
|
</section>
|
|
)
|
|
: null}
|
|
{openEvent.value?.extra.url
|
|
? (
|
|
<section class='py-5 my-0 border-b border-slate-500'>
|
|
<a href={openEvent.value.extra.url} target='_blank' rel='noopener noreferrer'>
|
|
{openEvent.value.extra.url}
|
|
</a>
|
|
</section>
|
|
)
|
|
: null}
|
|
{openEvent.value?.extra.location
|
|
? (
|
|
<section class='py-5 my-0 border-b border-slate-500'>
|
|
<a
|
|
href={`https://maps.google.com/maps?q=${encodeURIComponent(openEvent.value.extra.location)}`}
|
|
target='_blank'
|
|
rel='noopener noreferrer'
|
|
>
|
|
{openEvent.value.extra.location}
|
|
</a>
|
|
</section>
|
|
)
|
|
: null}
|
|
<section class='py-5 my-0 border-b border-slate-500'>
|
|
<p>TODO: reminders</p>
|
|
</section>
|
|
<footer class='flex justify-between'>
|
|
<button
|
|
class='px-5 py-2 bg-slate-600 hover:bg-red-600 text-white cursor-pointer rounded-md'
|
|
onClick={() => onClickDeleteEvent(openEvent.value?.id || '')}
|
|
>
|
|
Delete
|
|
</button>
|
|
<a
|
|
href={`/calendar/events/${openEvent.value?.id}`}
|
|
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
|
|
>
|
|
Edit
|
|
</a>
|
|
<button
|
|
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
|
|
onClick={() => openEvent.value = null}
|
|
>
|
|
Close
|
|
</button>
|
|
</footer>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|