sirtimbly/bewcloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Import Calendar Events

Browse Source
This commit is contained in:
Bruno Bernardino
2024-03-29 15:51:45 +00:00
parent a788456751
commit 0b4b741d79
7 changed files with 266 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/calendar/CalendarViewWeek.tsx
View File

@@ -15,7 +15,7 @@ export default function CalendarViewWeek(
const today = new Date().toISOString().substring(0, 10);
const hourFormat = new Intl.DateTimeFormat('en-GB', { hour12: false, hour: '2-digit', minute: '2-digit' });
const weekDayFormat = new Intl.DateTimeFormat('en-GB', { weekday: 'short' });
const weekDayFormat = new Intl.DateTimeFormat('en-GB', { weekday: 'short', day: 'numeric', month: '2-digit' });
const days = getDaysForWeek(new Date(startDate));

81
components/calendar/ImportEventsModal.tsx Normal file
View File

@@ -0,0 +1,81 @@
import { useSignal } from '@preact/signals';
import { useEffect } from 'preact/hooks';
import { Calendar } from '/lib/types.ts';
interface ImportEventsModalProps {
isOpen: boolean;
calendars: Pick<Calendar, 'id' | 'name' | 'color'>[];
onClickImport: (calendarId: string) => void;
onClose: () => void;
}
export default function ImportEventsModal(
{ isOpen, calendars, onClickImport, onClose }: ImportEventsModalProps,
) {
const newCalendarId = useSignal<string | null>(null);
useEffect(() => {
if (!isOpen) {
newCalendarId.value = null;
} else {
newCalendarId.value = calendars[0]!.id;
}
}, [isOpen]);
return (
<>
<section
class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
>
</section>
<section
class={`fixed ${
newCalendarId.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'>Import Events</h1>
<section class='py-5 my-2 border-y border-slate-500'>
<fieldset class='block mb-2'>
<label class='text-slate-300 block pb-1' for='event_calendar'>Calendar</label>
<section class='flex items-center justify-between'>
<select
class='input-field mr-2'
name='event_calendar'
id='event_calendar'
value={newCalendarId.value || ''}
onChange={(event) => {
newCalendarId.value = event.currentTarget.value;
}}
>
{calendars.map((calendar) => <option value={calendar.id}>{calendar.name}</option>)}
</select>
<span
class={`w-5 h-5 block ${
calendars.find((calendar) => calendar.id === newCalendarId.value)?.color
} rounded-full`}
title={calendars.find((calendar) => calendar.id === newCalendarId.value)?.color}
>
</span>
</section>
</fieldset>
</section>
<footer class='flex justify-between'>
<button
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
onClick={() => onClickImport(newCalendarId.value!)}
>
Choose File
</button>
<button
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
onClick={() => onClose()}
>
Close
</button>
</footer>
</section>
</>
);
}

68
components/calendar/MainCalendar.tsx
View File

@@ -1,20 +1,26 @@
import { useSignal } from '@preact/signals';
import { Calendar, CalendarEvent } from '/lib/types.ts';
import { baseUrl, capitalizeWord, formatCalendarEventsToVCalendar } from '/lib/utils.ts';
import {
baseUrl,
capitalizeWord,
formatCalendarEventsToVCalendar,
parseVCalendarFromTextContents,
} from '/lib/utils.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 {
RequestBody as DeleteRequestBody,
ResponseBody as DeleteResponseBody,
} from '/routes/api/calendar/delete-event.tsx';
// import { RequestBody as ImportRequestBody, ResponseBody as ImportResponseBody } from '/routes/api/calendar/import-events.tsx';
import { RequestBody as ImportRequestBody, ResponseBody as ImportResponseBody } from '/routes/api/calendar/import.tsx';
import CalendarViewDay from './CalendarViewDay.tsx';
import CalendarViewWeek from './CalendarViewWeek.tsx';
import CalendarViewMonth from './CalendarViewMonth.tsx';
import AddEventModal, { NewCalendarEvent } from './AddEventModal.tsx';
import ViewEventModal from './ViewEventModal.tsx';
import SearchEvents from './SearchEvents.tsx';
import ImportEventsModal from './ImportEventsModal.tsx';
interface MainCalendarProps {
initialCalendars: Pick<Calendar, 'id' | 'name' | 'color' | 'is_visible'>[];
@@ -38,6 +44,9 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
const newEventModal = useSignal<{ isOpen: boolean; initialStartDate?: Date; initiallyAllDay?: boolean }>({
isOpen: false,
});
const openImportModal = useSignal<
{ isOpen: boolean }
>({ isOpen: false });
const dateFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long' });
const today = new Date().toISOString().substring(0, 10);
@@ -247,6 +256,11 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
}
function onClickImportICS() {
openImportModal.value = { isOpen: true };
isImportExportOptionsDropdownOpen.value = false;
}
function onClickChooseImportCalendar(calendarId: string) {
isImportExportOptionsDropdownOpen.value = false;
if (isImporting.value) {
@@ -266,7 +280,7 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
}
const reader = new FileReader();
reader.onload = (fileRead) => {
reader.onload = async (fileRead) => {
const importFileContents = fileRead.target?.result;
if (!importFileContents || isImporting.value) {
@@ -275,24 +289,33 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
isImporting.value = true;
// try {
// const partialContacts = parseVCardFromTextContents(importFileContents!.toString());
openImportModal.value = { isOpen: false };
// 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;
try {
const partialCalendarEvents = parseVCalendarFromTextContents(importFileContents!.toString());
// if (!result.success) {
// throw new Error('Failed to import contact!');
// }
const requestBody: ImportRequestBody = {
partialCalendarEvents,
calendarIds: visibleCalendars.map((calendar) => calendar.id),
calendarView: view,
calendarStartDate: startDate,
calendarId,
};
// contacts.value = [...result.contacts];
// } catch (error) {
// console.error(error);
// }
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 file!');
}
calendarEvents.value = [...result.newCalendarEvents];
} catch (error) {
console.error(error);
}
isImporting.value = false;
};
@@ -601,6 +624,15 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
onClickDelete={onClickDeleteEvent}
onClose={onCloseOpenEvent}
/>
<ImportEventsModal
isOpen={openImportModal.value.isOpen}
calendars={calendars.value}
onClickImport={onClickChooseImportCalendar}
onClose={() => {
openImportModal.value = { isOpen: false };
}}
/>
</>
);
}

2
fresh.gen.ts
View File

@@ -12,6 +12,7 @@ import * as $api_calendar_add from './routes/api/calendar/add.tsx';
import * as $api_calendar_delete_event from './routes/api/calendar/delete-event.tsx';
import * as $api_calendar_delete from './routes/api/calendar/delete.tsx';
import * as $api_calendar_get_events from './routes/api/calendar/get-events.tsx';
import * as $api_calendar_import from './routes/api/calendar/import.tsx';
import * as $api_calendar_search_events from './routes/api/calendar/search-events.tsx';
import * as $api_calendar_update from './routes/api/calendar/update.tsx';
import * as $api_contacts_add from './routes/api/contacts/add.tsx';
@@ -72,6 +73,7 @@ const manifest = {
'./routes/api/calendar/delete-event.tsx': $api_calendar_delete_event,
'./routes/api/calendar/delete.tsx': $api_calendar_delete,
'./routes/api/calendar/get-events.tsx': $api_calendar_get_events,
'./routes/api/calendar/import.tsx': $api_calendar_import,
'./routes/api/calendar/search-events.tsx': $api_calendar_search_events,
'./routes/api/calendar/update.tsx': $api_calendar_update,
'./routes/api/contacts/add.tsx': $api_contacts_add,

4
lib/data/calendar.ts
View File

@@ -189,7 +189,7 @@ export async function createCalendarEvent(
const status: CalendarEvent['status'] = 'scheduled';
const newCalendar = (await db.query<Calendar>(
const newCalendarEvent = (await db.query<CalendarEvent>(
sql`INSERT INTO "bewcloud_calendar_events" (
"user_id",
"calendar_id",
@@ -217,7 +217,7 @@ export async function createCalendarEvent(
await updateCalendarRevision(calendar);
return newCalendar;
return newCalendarEvent;
}
export async function updateCalendarEvent(calendarEvent: CalendarEvent, oldCalendarId?: string) {

42
lib/utils.ts
View File

@@ -657,7 +657,7 @@ export function formatCalendarEventsToVCalendar(
): string {
const vCalendarText = calendarEvents.map((calendarEvent) =>
`BEGIN:VEVENT
DTSTAMP:${new Date(calendarEvent.start_date).toISOString().substring(0, 19).replaceAll('-', '').replaceAll(':', '')}
DTSTAMP:${new Date(calendarEvent.created_at).toISOString().substring(0, 19).replaceAll('-', '').replaceAll(':', '')}
DTSTART:${new Date(calendarEvent.start_date).toISOString().substring(0, 19).replaceAll('-', '').replaceAll(':', '')}
DTEND:${new Date(calendarEvent.end_date).toISOString().substring(0, 19).replaceAll('-', '').replaceAll(':', '')}
ORGANIZER;CN=:MAILTO:${calendarEvent.extra.organizer_email}
@@ -698,7 +698,7 @@ export function parseVCalendarFromTextContents(text: string): Partial<CalendarEv
}
// Finish contact
if (line.startsWith('END:VCARD')) {
if (line.startsWith('END:VEVENT')) {
partialCalendarEvents.push(partialCalendarEvent);
continue;
}
@@ -747,6 +747,44 @@ export function parseVCalendarFromTextContents(text: string): Partial<CalendarEv
continue;
}
if (line.startsWith('DTSTART')) {
const startDateInfo = line.split(':')[1] || '';
const [dateInfo, hourInfo] = startDateInfo.split('T');
const year = dateInfo.substring(0, 4);
const month = dateInfo.substring(4, 6);
const day = dateInfo.substring(6, 8);
const hours = hourInfo.substring(0, 2);
const minutes = hourInfo.substring(2, 4);
const seconds = hourInfo.substring(4, 6);
const startDate = new Date(`${year}-${month}-${day}T${hours}:${minutes}:${seconds}.000Z`);
partialCalendarEvent.start_date = startDate;
continue;
}
if (line.startsWith('DTEND')) {
const endDateInfo = line.split(':')[1] || '';
const [dateInfo, hourInfo] = endDateInfo.split('T');
const year = dateInfo.substring(0, 4);
const month = dateInfo.substring(4, 6);
const day = dateInfo.substring(6, 8);
const hours = hourInfo.substring(0, 2);
const minutes = hourInfo.substring(2, 4);
const seconds = hourInfo.substring(4, 6);
const endDate = new Date(`${year}-${month}-${day}T${hours}:${minutes}:${seconds}.000Z`);
partialCalendarEvent.end_date = endDate;
continue;
}
}
return partialCalendarEvents;

90
routes/api/calendar/import.tsx Normal file
View File

@@ -0,0 +1,90 @@
import { Handlers } from 'fresh/server.ts';
import { CalendarEvent, FreshContextState } from '/lib/types.ts';
import { concurrentPromises } from '/lib/utils.ts';
import { createCalendarEvent, getCalendar, getCalendarEvents, updateCalendarEvent } from '/lib/data/calendar.ts';
interface Data {}
export interface RequestBody {
calendarIds: string[];
calendarView: 'day' | 'week' | 'month';
calendarStartDate: string;
partialCalendarEvents: Partial<CalendarEvent>[];
calendarId: string;
}
export interface ResponseBody {
success: boolean;
newCalendarEvents: CalendarEvent[];
}
export const handler: Handlers<Data, FreshContextState> = {
async POST(request, context) {
if (!context.state.user) {
return new Response('Unauthorized', { status: 401 });
}
const requestBody = await request.clone().json() as RequestBody;
if (
!requestBody.calendarId || !requestBody.calendarIds || !requestBody.partialCalendarEvents ||
!requestBody.calendarView || !requestBody.calendarStartDate
) {
return new Response('Bad Request', { status: 400 });
}
const calendar = await getCalendar(requestBody.calendarId, context.state.user.id);
if (!calendar) {
return new Response('Not Found', { status: 404 });
}
if (requestBody.partialCalendarEvents.length === 0) {
return new Response('Not found', { status: 404 });
}
await concurrentPromises(
requestBody.partialCalendarEvents.map((partialCalendarEvent) => async () => {
if (partialCalendarEvent.title && partialCalendarEvent.start_date && partialCalendarEvent.end_date) {
const calendarEvent = await createCalendarEvent(
context.state.user!.id,
requestBody.calendarId,
partialCalendarEvent.title,
new Date(partialCalendarEvent.start_date),
new Date(partialCalendarEvent.end_date),
partialCalendarEvent.is_all_day,
);
const parsedExtra = JSON.stringify(partialCalendarEvent.extra || {});
if (parsedExtra !== '{}') {
calendarEvent.extra = partialCalendarEvent.extra!;
await updateCalendarEvent(calendarEvent);
}
}
}),
5,
);
const dateRange = { start: new Date(requestBody.calendarStartDate), end: new Date(requestBody.calendarStartDate) };
if (requestBody.calendarView === 'day') {
dateRange.start.setDate(dateRange.start.getDate() - 1);
dateRange.end.setDate(dateRange.end.getDate() + 1);
} else if (requestBody.calendarView === 'week') {
dateRange.start.setDate(dateRange.start.getDate() - 7);
dateRange.end.setDate(dateRange.end.getDate() + 7);
} else {
dateRange.start.setDate(dateRange.start.getDate() - 7);
dateRange.end.setDate(dateRange.end.getDate() + 31);
}
const newCalendarEvents = await getCalendarEvents(context.state.user.id, requestBody.calendarIds, dateRange);
const responseBody: ResponseBody = { success: true, newCalendarEvents };
return new Response(JSON.stringify(responseBody));
},
};