simple display for id mappings in frontend

web/index.html

@@ -23,6 +23,18 @@
     Download CSV
   </a>
   </div>
+  <div class="pt-6">
+    <h2 class="ID" >ID mapping</h2>
+
+    <table id="mappingTable">
+      <tr>
+        <th>ID</th>
+        <th>Nachname</th>
+        <th>Vorname</th>
+      </tr>
+
+    </table>
+  </div>
 </body>
 
 </html>

web/src/idMapping.ts

@@ -0,0 +1,45 @@
+export interface IdMapping {
+  id_map: IDMap
+}
+
+export interface IDMap {
+  [name: string]: Name
+}
+
+export interface Name {
+  first: string,
+  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",
+    headers: {
+      "Content-type": "application/json; charset=UTF-8"
+    },
+    body: JSON.stringify({
+      id,
+      name: {
+        first: firstName,
+        lastName: lastName,
+      },
+    })
+  });
+
+  if (req.status != 200){
+    console.error(await req.text())
+  }
+}

web/src/main.ts

@@ -1,2 +1,26 @@
 import './style.css'
+import { IDMap, Name, requestMappings } from './idMapping'
+
+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);
+  })
+})
 

web/src/style.css

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