switched to svelte 5

front gets a bit to complex to do in vanilla

web/src/App.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import IDTable from "./lib/IDTable.svelte";
+</script>
+
+<main
+  class="bg-gradient-to-br from-blue-100 to-indigo-200 min-h-screen flex flex-col items-center justify-start py-10"
+>
+  <div class="text-center space-y-6 mb-10">
+    <h1 class="text-3xl sm:text-4xl font-bold text-gray-800">Anwesenheit</h1>
+  </div>
+
+  <a
+    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"
+    download="anwesenheit.csv"
+  >
+    Download CSV
+  </a>
+
+  <div class="py-3">
+    <IDTable />
+  </div>
+</main>

web/src/app.css

@@ -1,4 +1,2 @@
 @import "tailwindcss";
 
-#mappingTable{
-}

web/src/lib/IDMapping.ts

@@ -1,4 +1,4 @@
-export interface IdMapping {
+export interface IDMapping {
   id_map: IDMap
 }
 
@@ -11,19 +11,6 @@ export interface Name {
   last: string,
 }
 
-export async function requestMappings(): Promise<IdMapping> {
-  let req = await fetch("/api/mapping");
-
-  if (req.status != 200) {
-    console.error(await req.text());
-    return { id_map: {} };
-  }
-
-  let mappings: IdMapping = await req.json();
-
-  return mappings;
-}
-
 export async function addMapping(id: string, firstName: string, lastName: string) {
   let req = await fetch("/api/mapping", {
     method: "POST",
@@ -39,7 +26,7 @@ export async function addMapping(id: string, firstName: string, lastName: string
     })
   });
 
-  if (req.status != 200){
+  if (req.status != 200) {
     console.error(await req.text())
   }
 }

web/src/lib/IDTable.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { IDMapping } from "./IDMapping";
+  let data: IDMapping | undefined = $state();
+
+  let rows = $derived(
+    data
+      ? Object.entries(data.id_map).map(([id, value]) => ({
+          id,
+          ...value,
+        }))
+      : [],
+  );
+
+  onMount(async () => {
+    let res = await fetch("/api/mapping");
+
+    data = await res.json();
+  });
+</script>
+
+{#if data == null}
+  Loading
+{:else}
+  <div class="bg-indigo-500 p-2 rounded-2xl overflow-x-auto">
+    <table>
+      <thead>
+        <tr>
+          <th class="text-left pr-5">ID</th>
+          <th class="text-left pr-5">Nachname</th>
+          <th class="text-left pr-5">Vorname</th>
+        </tr>
+      </thead>
+      <tbody class="">
+        {#each rows as row}
+          <tr class="even:bg-indigo-600">
+            <td class="whitespace-nowrap pr-5">{row.id}</td>
+            <td class="whitespace-nowrap pr-5">{row.last}</td>
+            <td class="whitespace-nowrap pr-5">{row.first}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{/if}

web/src/main.ts

@@ -1,26 +1,9 @@
-import './style.css'
-import { IDMap, Name, requestMappings } from './idMapping'
+import { mount } from "svelte"
+import "./app.css"
+import App from "./App.svelte"
 
-function createTableRow(a: string, b: string, c: string): HTMLTableRowElement {
-  const tr = document.createElement('tr');
-  [a, b, c].forEach(value => {
-    const td = document.createElement('td');
-    td.textContent = value;
-    tr.appendChild(td);
-  });
-  return tr;
-}
-
-function orderByFirstName(obj: IDMap): { id: string, name: Name }[] {
-  return Object.entries(obj)
-    .sort(([, a], [, b]) => a.first.localeCompare(b.first))
-    .map(([id, { first, last }]) => ({ id, name: { first, last } }));
-}
-
-requestMappings().then(r => {
-  orderByFirstName(r.id_map).forEach(e => {
-    let row = createTableRow(e.id, e.name.last, e.name.first);
-    document.querySelector("#mappingTable")?.appendChild(row);
-  })
+const app = mount(App, {
+  target: document.getElementById('app')!,
 })
 
+export default app

web/src/vite-env.d.ts

@@ -1 +1,2 @@
+/// <reference types="svelte" />
 /// <reference types="vite/client" />