feat: generate and download ics calendar

2025-11-05 15:40:22 +01:00
parent 273c420b4e
commit 9fd07ee0f8
4 changed files with 160 additions and 86 deletions
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
  },
  "dependencies": {
    "pinia": "^3.0.3",
+    "ts-ics": "^2.4.0",
    "vue": "^3.5.22"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/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

--- a/src/App.vue
+++ b/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 = {
-  day: number;
-  start: { hours: number; minutes: number };
-  end: { hours: number; minutes: number };
-};
+const downloadCalendar = async () => {
+  const calendar = await extractData();
+  if (!calendar) {
+    // TODO: report error
+    return;
+  }

-const data = ref<{
-  events: WorkEvent[];
-  month: number;
-  year: number;
-}>();
+  const icsContent = generateIcsCalendar(calendar.data);

-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({
-      active: true,
-      currentWindow: true,
-    });
-    if (!tab?.id) {
-      console.error("No active tab found");
-      return null;
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = calendar.name;
+    link.click();
+  } finally {
+    URL.revokeObjectURL(url);
  }
-
-    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>
-    </div>
-
-    <div>
-      {{ JSON.stringify(data) }}
+      <button @click="downloadCalendar">Download calendar</button>
    </div>

    <hr />
--- a/src/utils/data.ts
+++ b/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;
+  }
+}