feat: generate and download ics calendar

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "pinia": "^3.0.3",
+    "ts-ics": "^2.4.0",
     "vue": "^3.5.22"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       pinia:
         specifier: ^3.0.3
         version: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+      ts-ics:
+        specifier: ^2.4.0
+        version: 2.4.0
       vue:
         specifier: ^3.5.22
         version: 3.5.22(typescript@5.9.3)
@@ -802,6 +805,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
   '@tsconfig/node22@22.0.2':
     resolution: {integrity: sha512-Kmwj4u8sDRDrMYRoN9FDEcXD8UpBSaPQQ24Gz+Gamqfm7xxn+GBR7ge/Z7pK8OXNGyUzbSwJj+TH6B+DS/epyA==}
 
@@ -2046,6 +2052,9 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-ics@2.4.0:
+    resolution: {integrity: sha512-Tguo+7W/swxTw8/Fxv4zPBqiHw/i1ohg0aCWeY50miwdwFGC7TCWcOUuqaeag5EdnaX57zn1qrqERsc4A+4j1A==}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -2886,6 +2895,8 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.52.5':
     optional: true
 
+  '@standard-schema/spec@1.0.0': {}
+
   '@tsconfig/node22@22.0.2': {}
 
   '@tybys/wasm-util@0.10.1':
@@ -4197,6 +4208,10 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  ts-ics@2.4.0:
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+
   tslib@2.8.1:
     optional: true
 

src/App.vue

@@ -1,88 +1,28 @@
 <script setup lang="ts">
 import AppCounter from "@/components/AppCounter.vue";
-import { ref } from "vue";
+import { extractData } from "@/utils/data";
+import { generateIcsCalendar } from "ts-ics";
 
-type WorkEvent = {
+const downloadCalendar = async () => {
-  day: number;
+  const calendar = await extractData();
-  start: { hours: number; minutes: number };
+  if (!calendar) {
-  end: { hours: number; minutes: number };
+    // TODO: report error
-};
+    return;
+  }
 
-const data = ref<{
+  const icsContent = generateIcsCalendar(calendar.data);
-  events: WorkEvent[];
-  month: number;
-  year: number;
-}>();
 
-async function extractData() {
+  const blob = new Blob([icsContent], { type: "text/calendar;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
   try {
-    const [tab] = await chrome.tabs.query({
+    const link = document.createElement("a");
-      active: true,
+    link.href = url;
-      currentWindow: true,
+    link.download = calendar.name;
-    });
+    link.click();
-    if (!tab?.id) {
+  } finally {
-      console.error("No active tab found");
+    URL.revokeObjectURL(url);
-      return null;
   }
-
+};
-    const urlMatch = tab.url?.match(/\/(\d{2})-(\d{4})$/);
-    if (!urlMatch) {
-      console.error("Could not extract month and year from URL");
-      return null;
-    }
-
-    const [eventsQuery] = await chrome.scripting.executeScript({
-      target: { tabId: tab.id },
-      func: () => {
-        const trs = document.querySelectorAll("#clearfix-individuel table tr");
-
-        const events: WorkEvent[] = [];
-
-        for (const tr of trs) {
-          const tds = tr.querySelectorAll("td");
-
-          const dateText = tds[0]?.textContent?.trim() ?? "";
-          const dateMatch = dateText.match(/^[A-Z][a-z]{2}\s+(\d{2})$/);
-          if (!dateMatch) continue;
-
-          const workText = tds[1]?.textContent?.trim() ?? "";
-          const hoursMatch = workText.match(/^(\d+):(\d+) - (\d+):(\d+)$/);
-          if (!hoursMatch) continue;
-
-          events.push({
-            day: parseInt(dateMatch[1]!),
-            start: {
-              hours: parseInt(hoursMatch[1]!),
-              minutes: parseInt(hoursMatch[2]!),
-            },
-            end: {
-              hours: parseInt(hoursMatch[3]!),
-              minutes: parseInt(hoursMatch[4]!),
-            },
-          });
-        }
-
-        return events;
-      },
-    });
-    if (!eventsQuery?.result) return null;
-
-    data.value = {
-      year: parseInt(urlMatch[2]!),
-      month: parseInt(urlMatch[1]!),
-      events: eventsQuery.result,
-    };
-
-    return {
-      year: parseInt(urlMatch[2]!),
-      month: parseInt(urlMatch[1]!),
-      events: eventsQuery.result,
-    };
-  } catch (error) {
-    console.error("Error getting elements data:", error);
-    return null;
-  }
-}
 </script>
 
 <template>
@@ -90,11 +30,7 @@ async function extractData() {
     <h1>Gestime APHP Export</h1>
 
     <div class="query-section">
-      <button @click="extractData">Extract</button>
+      <button @click="downloadCalendar">Download calendar</button>
-    </div>
-
-    <div>
-      {{ JSON.stringify(data) }}
     </div>
 
     <hr />

src/utils/data.ts

@@ -0,0 +1,122 @@
+import type { IcsCalendar, IcsEvent } from "ts-ics";
+
+type WorkEvent = {
+  day: number;
+  start: { hours: number; minutes: number };
+  end: { hours: number; minutes: number };
+};
+
+const makeIcsEvent = (
+  data: {
+    year: number;
+    month: number;
+  } & WorkEvent,
+): IcsEvent => ({
+  uid: `${data.year}-${data.month}-${data.day}-work@gestime-aphp-export`,
+  summary: "Travail",
+  stamp: { date: new Date() },
+  start: {
+    // - 1 because Date takes month index, e.g 0-11
+    date: new Date(
+      data.year,
+      data.month - 1,
+      data.day,
+      data.start.hours,
+      data.start.minutes,
+    ),
+  },
+  duration: {
+    hours: Math.floor(
+      (data.end.hours * 60 +
+        data.end.minutes -
+        (data.start.hours * 60 + data.start.minutes)) /
+        60,
+    ),
+    minutes:
+      (data.end.hours * 60 +
+        data.end.minutes -
+        (data.start.hours * 60 + data.start.minutes)) %
+      60,
+  },
+  location: "Hôpital Pitié-Salpêtrière",
+});
+
+const makeIcsCalendar = (events: IcsEvent[]): IcsCalendar => ({
+  version: "2.0",
+  prodId: "-//pihkaal//Gestime APHP Export//FR",
+  events,
+});
+
+export async function extractData(): Promise<{
+  name: string;
+  data: IcsCalendar;
+} | null> {
+  try {
+    const [tab] = await chrome.tabs.query({
+      active: true,
+      currentWindow: true,
+    });
+    if (!tab?.id) {
+      console.error("No active tab found");
+      return null;
+    }
+
+    const urlMatch = tab.url?.match(/\/(\d{2})-(\d{4})$/);
+    if (!urlMatch) {
+      console.error("Could not extract month and year from URL");
+      return null;
+    }
+    const year = parseInt(urlMatch[2]!);
+    const month = parseInt(urlMatch[1]!);
+
+    const [eventsQuery] = await chrome.scripting.executeScript({
+      target: { tabId: tab.id },
+      func: () => {
+        const trs = document.querySelectorAll("#clearfix-individuel table tr");
+
+        const events: WorkEvent[] = [];
+
+        // [Sam 01, RH]
+        // [Dim 02, 7:00 - 19:00]
+        for (const tr of trs) {
+          const tds = tr.querySelectorAll("td");
+
+          const dateText = tds[0]?.textContent?.trim() ?? "";
+          const dateMatch = dateText.match(/^[A-Z][a-z]{2}\s+(\d{2})$/);
+          if (!dateMatch) continue;
+
+          const workText = tds[1]?.textContent?.trim() ?? "";
+          const hoursMatch = workText.match(/^(\d+):(\d+) - (\d+):(\d+)$/);
+          if (!hoursMatch) continue;
+
+          events.push({
+            day: parseInt(dateMatch[1]!),
+            start: {
+              hours: parseInt(hoursMatch[1]!),
+              minutes: parseInt(hoursMatch[2]!),
+            },
+            end: {
+              hours: parseInt(hoursMatch[3]!),
+              minutes: parseInt(hoursMatch[4]!),
+            },
+          });
+        }
+
+        return events;
+      },
+    });
+    if (!eventsQuery?.result) return null;
+
+    return {
+      name: `gestime-${urlMatch[1]}-${urlMatch[2]}.ics`,
+      data: makeIcsCalendar(
+        eventsQuery.result.map((event) =>
+          makeIcsEvent({ year, month, ...event }),
+        ),
+      ),
+    };
+  } catch (error) {
+    console.error("Error getting elements data:", error);
+    return null;
+  }
+}