enabled download of exported csv

web/src/App.svelte

@@ -3,15 +3,21 @@
   import IDTable from "./lib/IDTable.svelte";
   import LastId from "./lib/LastID.svelte";
   import AddIDModal from "./lib/AddIDModal.svelte";
+  import ExportModal from "./lib/ExportModal.svelte";
+  import { generateCSVFile } from "./lib/exporting";
+  import { fetchMapping, type IDMap } from "./lib/IDMapping";
+  import { downloadBlob } from "./lib/downloadBlob";
 
   let lastID: string = $state("");
+  let mapping: IDMap | null = $state(null);
 
   let addModal: AddIDModal;
-  let idTable: IDTable;
+  let exportModal: ExportModal;
+
+  onMount(async () => {
+    mapping = await fetchMapping();
 
-  onMount(() => {
     let sse = new EventSource("/api/idevent");
-
     sse.onmessage = (e) => {
       lastID = e.data;
     };
@@ -25,13 +31,14 @@
     <h1 class="text-3xl sm:text-4xl font-bold text-gray-800">Anwesenheit</h1>
   </div>
 
-  <a
+  <button
     class="px-6 py-3 text-lg font-semibold text-white bg-indigo-600 rounded-2xl shadow-md hover:bg-indigo-700 transition"
-    href="/api/csv"
+    onclick={() => {
-    download="anwesenheit.csv"
+      exportModal.open();
+    }}
   >
-    Download CSV
+    Export CSV
-  </a>
+  </button>
 
   <div class="pt-3 pb-2">
     <LastId
@@ -42,15 +49,32 @@
     />
   </div>
   <div>
-    <IDTable bind:this={idTable} onEdit={(id,firstName,lastName)=>{
+    {#if mapping}
-      addModal.open(id,firstName,lastName);
+      <IDTable
-    }}/>
+        data={mapping}
+        onEdit={(id, firstName, lastName) => {
+          addModal.open(id, firstName, lastName);
+        }}
+      />
+    {/if}
   </div>
 
   <AddIDModal
     bind:this={addModal}
-    onSubmitted={() => {
+    onSubmitted={async () => {
-      idTable.reloadData();
+      mapping = await fetchMapping();
+    }}
+  />
+
+  <ExportModal
+    bind:this={exportModal}
+    onSubmitted={async (from, to) => {
+      if (!mapping) {
+        return;
+      }
+      let csvFile = await generateCSVFile(from, to, mapping);
+
+      downloadBlob("export.csv",csvFile,"text/csv");
     }}
   />
 </main>

web/src/lib/IDTable.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { type IDMap } from "./IDMapping";
-  import { fetchMapping, type IDMap } from "./IDMapping";
-  let data: IDMap | undefined = $state();
 
   let {
     onEdit,
-  }: { onEdit?: (id: string, firstName: string, lastName: string) => void } =
+    data,
-    $props();
+  }: {
-
+    onEdit?: (id: string, firstName: string, lastName: string) => void;
-  export async function reloadData() {
+    data: IDMap;
-    data = await fetchMapping();
+  } = $props();
-  }
 
   let rows = $derived(
     data
@@ -44,69 +41,61 @@
     if (sortKey !== key) return "";
     return sortDirection === "asc" ? "▲" : "▼";
   }
-
-  onMount(async () => {
-    await reloadData();
-  });
 </script>
 
-{#if data == null}
+<div class="bg-indigo-500 py-2 rounded-2xl overflow-x-auto">
-  Loading...
+  <table class="px-10">
-{:else}
+    <thead>
-  <div class="bg-indigo-500 py-2 rounded-2xl overflow-x-auto">
+      <tr>
-    <table class="px-10">
+        <th
-      <thead>
+          class="text-left pr-5 pl-2 cursor-pointer select-none"
-        <tr>
+          onclick={() => {
-          <th
+            handleSortClick("id");
-            class="text-left pr-5 pl-2 cursor-pointer select-none"
+          }}
-            onclick={() => {
+        >
-              handleSortClick("id");
+          ID
-            }}
+          <span class="indicator">{indicator("id")}</span>
-          >
+        </th>
-            ID
+        <th
-            <span class="indicator">{indicator("id")}</span>
+          class="text-left pr-5 cursor-pointer select-none"
-          </th>
+          onclick={() => {
-          <th
+            handleSortClick("last");
-            class="text-left pr-5 cursor-pointer select-none"
+          }}
-            onclick={() => {
+        >
-              handleSortClick("last");
+          Nachname
-            }}
+          <span class="indicator">{indicator("last")}</span>
-          >
+        </th>
-            Nachname
+        <th
-            <span class="indicator">{indicator("last")}</span>
+          class="text-left pr-5 cursor-pointer select-none"
-          </th>
+          onclick={() => {
-          <th
+            handleSortClick("first");
-            class="text-left pr-5 cursor-pointer select-none"
+          }}
-            onclick={() => {
+          >Vorname
-              handleSortClick("first");
-            }}
-            >Vorname
 
-            <span class="indicator">{indicator("first")}</span>
+          <span class="indicator">{indicator("first")}</span>
-          </th>
+        </th>
-          <th> </th>
+        <th> </th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each rowsSorted as row}
+        <tr class="even:bg-indigo-600">
+          <td class="whitespace-nowrap pr-5 pl-2 py-1">{row.id}</td>
+          <td class="whitespace-nowrap pr-5">{row.last}</td>
+          <td class="whitespace-nowrap pr-5">{row.first}</td>
+          <td class="pr-5"
+            ><button
+              onclick={() => {
+                onEdit && onEdit(row.id, row.first, row.last);
+              }}
+              class="cursor-pointer">🔧</button
+            ></td
+          >
         </tr>
-      </thead>
+      {/each}
-      <tbody>
+    </tbody>
-        {#each rowsSorted as row}
+  </table>
-          <tr class="even:bg-indigo-600">
+</div>
-            <td class="whitespace-nowrap pr-5 pl-2 py-1">{row.id}</td>
-            <td class="whitespace-nowrap pr-5">{row.last}</td>
-            <td class="whitespace-nowrap pr-5">{row.first}</td>
-            <td class="pr-5"
-              ><button
-                onclick={() => {
-                  onEdit && onEdit(row.id, row.first, row.last);
-                }}
-                class="cursor-pointer">🔧</button
-              ></td
-            >
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  </div>
-{/if}
 
 <style lang="css" scoped>
   @reference "../app.css";