fixed changed /api/mapping structure in frontend

web/src/lib/IDMapping.ts

@@ -1,7 +1,3 @@
-export interface IDMapping {
-  id_map: IDMap
-}
-
 export interface IDMap {
   [name: string]: Name
 }
@@ -11,6 +7,23 @@ export interface Name {
   last: string,
 }
 
+function stupidSerdeFix(pairs: [string, Name][]): IDMap {
+  const map: IDMap = {};
+  for (const [key, value] of pairs) {
+    map[key] = value;
+  }
+
+  return map;
+}
+
+export async function fetchMapping(): Promise<IDMap> {
+  let res = await fetch("/api/mapping");
+
+  let data = await res.json();
+
+  return stupidSerdeFix(data);
+}
+
 export async function addMapping(id: string, firstName: string, lastName: string) {
   let req = await fetch("/api/mapping", {
     method: "POST",

web/src/lib/IDTable.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import type { IDMapping } from "./IDMapping";
+  import { fetchMapping, type IDMap } from "./IDMapping";
-  let data: IDMapping | undefined = $state();
+  let data: IDMap | undefined = $state();
 
-  let { onEdit }: { onEdit?: (string,string,string) => void } = $props();
+  let {
+    onEdit,
+  }: { onEdit?: (id: string, firstName: string, lastName: string) => void } =
+    $props();
 
   export async function reloadData() {
-    let res = await fetch("/api/mapping");
+    data = await fetchMapping();
-
-    data = await res.json();
   }
 
   let rows = $derived(
     data
-      ? Object.entries(data.id_map).map(([id, value]) => ({
+      ? Object.entries(data).map(([id, value]) => ({
           id,
           ...value,
         }))
@@ -47,7 +48,6 @@
   onMount(async () => {
     await reloadData();
   });
-
 </script>
 
 {#if data == null}
@@ -84,8 +84,7 @@
 
             <span class="indicator">{indicator("first")}</span>
           </th>
-          <th>
+          <th> </th>
-          </th>
         </tr>
       </thead>
       <tbody>
@@ -94,9 +93,14 @@
             <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={()=>{
+            <td class="pr-5"
-              onEdit && onEdit(row.id,row.first,row.last);
+              ><button
-            }} class="cursor-pointer">🔧</button></td>
+                onclick={() => {
+                  onEdit && onEdit(row.id, row.first, row.last);
+                }}
+                class="cursor-pointer">🔧</button
+              ></td
+            >
           </tr>
         {/each}
       </tbody>
@@ -106,7 +110,6 @@
 
 <style lang="css" scoped>
   @reference "../app.css";
-
   .indicator {
     @apply ml-1 w-4 inline-block;
   }