feat(new tools): iCal Generator/Merger/Parser

iCal file generator, merger and parser

src/tools/ical-generator/ical-generator.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import slugify from '@sindresorhus/slugify';
+import ical, { ICalCalendarMethod } from 'ical-generator';
+import { Base64 } from 'js-base64';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+
+interface Event {
+  startend: [number, number]
+  summary?: string
+  description?: string
+  location?: string
+  url?: string
+}
+
+const events = ref<Array<Event>>([{
+  startend: [Date.now(), Date.now()],
+  summary: 'An event',
+}]);
+function deleteEvent(index: number) {
+  if (events.value.length === 1) {
+    return;
+  }
+  events.value.splice(index, 1);
+}
+function addEvent() {
+  const now = Date.now();
+  events.value.push({
+    startend: [now, now + 3600 * 1000],
+    summary: 'An event',
+  });
+}
+
+const output = computed(() => {
+  try {
+    const calendar = ical({ name: events.value[0]?.summary || 'unamed' });
+
+    // A method is required for outlook to display event as an invitation
+    calendar.method(ICalCalendarMethod.REQUEST);
+
+    for (const event of events.value) {
+      calendar.createEvent({
+        start: new Date(event.startend[0]).toUTCString(),
+        end: new Date(event.startend[0]).toUTCString(),
+        summary: event.summary,
+        description: event.description,
+        location: event.location,
+        url: event.url,
+      });
+    }
+
+    return { ical: calendar.toString() };
+  }
+  catch (e: any) {
+    return { error: e.toString() };
+  }
+});
+const outputBase64 = computed(() => Base64.encode(output.value?.ical || ''));
+const customOutputFileName = ref('');
+const outputFileName = computed(() => {
+  if (customOutputFileName.value) {
+    return customOutputFileName.value;
+  }
+
+  return slugify(events.value[0]?.summary || 'unamed');
+});
+const { download } = useDownloadFileFromBase64(
+  {
+    source: outputBase64,
+    filename: outputFileName,
+    extension: 'ics',
+  });
+</script>
+
+<template>
+  <div>
+    <div mb-2 flex items-baseline gap-2>
+      <c-input-text
+        v-model:value="outputFileName"
+        placeholder="Generated if empty"
+        label="Output filename:"
+        label-position="left"
+        mb-2
+      />
+      <c-button v-if="output.ical" @click="download">
+        Download ICS
+      </c-button>
+    </div>
+
+    <c-alert v-if="output.error" mb-2>
+      {{ output.error }}
+    </c-alert>
+
+    <c-card v-for="(event, index) in events" :key="index" mb-2>
+      <n-form-item label="Title:" label-placement="left">
+        <n-input v-model:value="event.summary" :allow-input="(value:string) => !!value" />
+      </n-form-item>
+      <n-form-item label="Dates and hours:" label-placement="left">
+        <n-date-picker v-model:value="event.startend" type="datetimerange" />
+      </n-form-item>
+      <c-input-text
+        v-model:value="event.description"
+        label="Description"
+        placeholder="Put a description here"
+        multiline
+        rows="2"
+        mb-2
+      />
+      <c-input-text
+        v-model:value="event.url"
+        label="Url:"
+        label-position="left"
+        placeholder="Put an url here"
+        mb-2
+      />
+      <div flex justify-center>
+        <c-button @click="deleteEvent(index)">
+          Delete
+        </c-button>
+      </div>
+    </c-card>
+    <div mt-2 flex justify-center>
+      <c-button @click="addEvent">
+        Add Event
+      </c-button>
+    </div>
+  </div>
+</template>

src/tools/ical-generator/index.ts

@@ -0,0 +1,12 @@
+import { CalendarEvent } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'ICAL Generator',
+  path: '/ical-generator',
+  description: 'Generate ICAL/ICS file from event infos',
+  keywords: ['ical', 'calendar', 'event', 'generator'],
+  component: () => import('./ical-generator.vue'),
+  icon: CalendarEvent,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/ical-merger/ical-merger.service.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import { mergeIcals } from './ical-merger.service';
+
+describe('ical-merger', () => {
+  describe('mergeIcals', () => {
+    it('merge correctly', () => {
+      expect(mergeIcals([
+`BEGIN:VCALENDAR
+PRODID:-//xyz Corp//NONSGML PDA Calendar Version 1.0//EN
+VERSION:2.0
+BEGIN:VEVENT
+DTSTAMP:19960704T120000Z
+UID:uid1@example.com
+ORGANIZER:mailto:jsmith@example.com
+DTSTART:19960918T143000Z
+DTEND:19960920T220000Z
+STATUS:CONFIRMED
+CATEGORIES:CONFERENCE
+SUMMARY:Networld+Interop Conference
+DESCRIPTION:Networld+Interop Conference
+  and Exhibit\\nAtlanta World Congress Center\\n
+ Atlanta\\, Georgia
+END:VEVENT
+END:VCALENDAR`,
+ `BEGIN:VCALENDAR
+METHOD:xyz
+VERSION:2.0
+PRODID:-//ABC Corporation//NONSGML My Product//EN
+BEGIN:VEVENT
+DTSTAMP:19970324T120000Z
+SEQUENCE:0
+UID:uid3@example.com
+ORGANIZER:mailto:jdoe@example.com
+ATTENDEE;RSVP=TRUE:mailto:jsmith@example.com
+DTSTART:19970324T123000Z
+DTEND:19970324T210000Z
+CATEGORIES:MEETING,PROJECT
+CLASS:PUBLIC
+SUMMARY:Calendaring Interoperability Planning Meeting
+DESCRIPTION:Discuss how we can test c&s interoperability\\n
+ using iCalendar and other IETF standards.
+LOCATION:LDB Lobby
+ATTACH;FMTTYPE=application/postscript:ftp://example.com/pub/
+ conf/bkgrnd.ps
+END:VEVENT
+END:VCALENDAR`,
+      ])).to.eq(
+`BEGIN:VCALENDAR
+PRODID:it-tools-ical-merger
+VERSION:1.0
+BEGIN:VEVENT
+DTSTAMP:19960704T120000Z
+UID:uid1@example.com
+ORGANIZER:mailto:jsmith@example.com
+DTSTART:19960918T143000Z
+DTEND:19960920T220000Z
+STATUS:CONFIRMED
+CATEGORIES:CONFERENCE
+SUMMARY:Networld+Interop Conference
+DESCRIPTION:Networld+Interop Conference and Exhibit\\nAtlanta World Congress
+  Center\\nAtlanta\\, Georgia
+END:VEVENT
+BEGIN:VEVENT
+DTSTAMP:19970324T120000Z
+SEQUENCE:0
+UID:uid3@example.com
+ORGANIZER:mailto:jdoe@example.com
+ATTENDEE;RSVP=TRUE:mailto:jsmith@example.com
+DTSTART:19970324T123000Z
+DTEND:19970324T210000Z
+CATEGORIES:MEETING,PROJECT
+CLASS:PUBLIC
+SUMMARY:Calendaring Interoperability Planning Meeting
+DESCRIPTION:Discuss how we can test c&s interoperability\\nusing iCalendar a
+ nd other IETF standards.
+LOCATION:LDB Lobby
+ATTACH;FMTTYPE=application/postscript:ftp://example.com/pub/conf/bkgrnd.ps
+END:VEVENT
+END:VCALENDAR`.replace(/\n/g, '\r\n'));
+    });
+  });
+});

src/tools/ical-merger/ical-merger.service.ts

@@ -0,0 +1,45 @@
+import ICAL from 'ical.js';
+
+export function mergeIcals(inputs: Array<string>, options: {
+  calname?: string
+  timezone?: string
+  caldesc?: string
+} = {}) {
+  let calendar;
+  for (const input of inputs) {
+    try {
+      const jcal = ICAL.parse(input);
+      const cal = new ICAL.Component(jcal);
+
+      if (!calendar) {
+        calendar = cal;
+        calendar.updatePropertyWithValue('prodid', 'it-tools-ical-merger');
+        calendar.updatePropertyWithValue('version', '1.0');
+
+        if (options.calname) {
+          calendar.updatePropertyWithValue('x-wr-calname', options.calname);
+        }
+        if (options.timezone) {
+          calendar.updatePropertyWithValue('x-wr-timezone', options.timezone);
+        }
+        if (options.caldesc) {
+          calendar.updatePropertyWithValue('x-wr-caldesc', options.caldesc);
+        }
+      }
+      else {
+        for (const vevent of cal.getAllSubcomponents('vevent')) {
+          calendar.addSubcomponent(vevent);
+        }
+      }
+    }
+    catch (e) {
+      throw new Error(`Failed to merge: ${e}\n\nWith input: ${input}`);
+    }
+  }
+
+  if (!calendar) {
+    throw new Error('No icals parsed successfully');
+  }
+
+  return calendar.toString();
+}

src/tools/ical-merger/ical-merger.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { mergeIcals } from './ical-merger.service';
+
+const fileInputs = ref<Array<File>>([]);
+const mergedOutput = ref('');
+const calendarName = ref('');
+const calendarDescription = ref('');
+const errors = ref('');
+
+function onUploads(files: Array<File>) {
+  fileInputs.value = [...fileInputs.value, ...files];
+}
+function deleteFile(index: number) {
+  fileInputs.value.splice(index, 1);
+}
+async function mergeFiles() {
+  const fileBuffers: Array<string> = [];
+  for (const file of fileInputs.value) {
+    fileBuffers.push(await readFileAsString(file));
+  }
+  errors.value = '';
+  mergedOutput.value = '';
+  try {
+    mergedOutput.value = mergeIcals(fileBuffers);
+  }
+  catch (e: any) {
+    errors.value = e.toString();
+  }
+}
+
+function readFileAsString(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onload = () => {
+      resolve(fr.result as string || '');
+    };
+    fr.onerror = reject;
+    fr.readAsText(file);
+  });
+}
+</script>
+
+<template>
+  <div>
+    <c-file-upload
+      title="Drag and drop iCal file here, or click to select a file"
+      multiple
+      mb-2
+      @files-upload="onUploads"
+    />
+
+    <n-form-item label="Title:" label-placement="left">
+      <n-input v-model:value="calendarName" placeholder="Please input merge calendar title..." />
+    </n-form-item>
+
+    <n-form-item label="Description:">
+      <n-input v-model:value="calendarDescription" placeholder="Please input merged calendar description..." />
+    </n-form-item>
+
+    <ul>
+      <li v-for="(file, index) in fileInputs" :key="index" mb-1>
+        <n-button mr-2 @click="deleteFile(index)">
+          Delete
+        </n-button>
+        File to merge: {{ file.name }}
+      </li>
+    </ul>
+
+    <div flex justify-center>
+      <n-button @click="mergeFiles">
+        Merge iCal files
+      </n-button>
+    </div>
+
+    <n-divider />
+
+    <c-alert v-if="errors" mb-2>
+      {{ errors }}
+    </c-alert>
+
+    <textarea-copyable
+      v-if="mergedOutput"
+      v-model:value="mergedOutput"
+      download-file-name="merge.ics"
+      download-button-text="Download merged iCal"
+      label="Merged ICAL"
+      mb-2
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>

src/tools/ical-merger/index.ts

@@ -0,0 +1,12 @@
+import { CalendarPlus } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'iCal Merger',
+  path: '/ical-merger',
+  description: 'Merge many iCal file to a single',
+  keywords: ['ical', 'ics', 'merger'],
+  component: () => import('./ical-merger.vue'),
+  icon: CalendarPlus,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/ical-parser/ical-parser.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import ICAL from 'ical.js';
+
+const inputType = ref<'file' | 'content'>('file');
+const icalContent = ref('');
+const fileInput = ref() as Ref<File | null>;
+const icalInfosRaw = computedAsync(async () => {
+  const file = fileInput.value;
+  const content = icalContent.value;
+  try {
+    if (inputType.value === 'file' && file) {
+      const jcal = ICAL.parse(await readFileAsString(file));
+      return new ICAL.Component(jcal);
+    }
+    else {
+      const jcal = ICAL.parse(content);
+      return new ICAL.Component(jcal);
+    }
+  }
+  catch (e: any) {
+    return {
+      error: e.toString(),
+    };
+  }
+});
+
+async function onUpload(file: File) {
+  if (file) {
+    fileInput.value = file;
+  }
+}
+
+watch(icalContent, (_, newValue) => {
+  if (newValue !== '') {
+    fileInput.value = null;
+  }
+});
+
+function readFileAsString(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onload = () => {
+      resolve(fr.result as string || '');
+    };
+    fr.onerror = reject;
+    fr.readAsText(file);
+  });
+}
+</script>
+
+<template>
+  <div>
+    <n-radio-group v-model:value="inputType" name="radiogroup" mb-2 flex justify-center>
+      <n-space>
+        <n-radio
+          value="file"
+          label="File"
+        />
+        <n-radio
+          value="content"
+          label="Content"
+        />
+      </n-space>
+    </n-radio-group>
+
+    <c-file-upload
+      v-if="inputType === 'file'"
+      title="Drag and drop iCal file here, or click to select a file"
+      @file-upload="onUpload"
+    />
+
+    <c-input-text
+      v-if="inputType === 'content'"
+      v-model:value="icalContent"
+      label="iCal Content"
+      placeholder="Paste your iCal content here"
+      multiline
+      mb-2
+    />
+
+    <n-divider />
+
+    <textarea-copyable
+      label="Parsed iCal"
+      mb-2
+      :value="JSON.stringify(icalInfosRaw, null, 2)"
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>

src/tools/ical-parser/index.ts

@@ -0,0 +1,12 @@
+import { CalendarEvent } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'ICAL File Parser',
+  path: '/ical-parser',
+  description: 'Parse ICAL/ICS file to event display',
+  keywords: ['ical', 'ics', 'calendar', 'parser'],
+  component: () => import('./ical-parser.vue'),
+  icon: CalendarEvent,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as icalMerger } from './ical-merger';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -12,6 +13,8 @@ import { tool as jsonToXml } from './json-to-xml';
 import { tool as regexTester } from './regex-tester';
 import { tool as regexMemo } from './regex-memo';
 import { tool as markdownToHtml } from './markdown-to-html';
+import { tool as icalParser } from './ical-parser';
+import { tool as icalGenerator } from './ical-generator';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -184,6 +187,9 @@ export const toolsByCategory: ToolCategory[] = [
       textDiff,
       numeronymGenerator,
       asciiTextDrawer,
+      icalGenerator,
+      icalParser,
+      icalMerger,
     ],
   },
   {