improved panic restart

src/init/hardware.rs

@@ -4,6 +4,7 @@ use embassy_executor::Spawner;
 use embassy_net::Stack;
 use embassy_time::{Duration, Timer};
 use esp_hal::Blocking;
+use esp_hal::delay::Delay;
 use esp_hal::gpio::Input;
 use esp_hal::i2c::master::Config;
 use esp_hal::peripherals::{
@@ -12,6 +13,7 @@ use esp_hal::peripherals::{
 };
 use esp_hal::rmt::{ConstChannelAccess, Rmt};
 use esp_hal::spi::master::{Config as Spi_config, Spi};
+use esp_hal::system::software_reset;
 use esp_hal::time::Rate;
 use esp_hal::timer::timg::TimerGroup;
 use esp_hal::{
@@ -54,9 +56,10 @@ static SD_DET: Mutex<RefCell<Option<Input>>> = Mutex::new(RefCell::new(None));
 
 #[panic_handler]
 fn panic(info: &core::panic::PanicInfo) -> ! {
-    loop {
-        error!("PANIC: {info}");
-    }
+    let delay = Delay::new();
+    error!("PANIC: {info}");
+    delay.delay(esp_hal::time::Duration::from_secs(30));
+    software_reset()
 }
 
 esp_bootloader_esp_idf::esp_app_desc!();

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"
-    download="anwesenheit.csv"
+    onclick={() => {
+      exportModal.open();
+    }}
   >
-    Download CSV
-  </a>
+    Export CSV
+  </button>
 
   <div class="pt-3 pb-2">
     <LastId
@@ -42,15 +49,32 @@
     />
   </div>
   <div>
-    <IDTable bind:this={idTable} onEdit={(id,firstName,lastName)=>{
-      addModal.open(id,firstName,lastName);
-    }}/>
+    {#if mapping}
+      <IDTable
+        data={mapping}
+        onEdit={(id, firstName, lastName) => {
+          addModal.open(id, firstName, lastName);
+        }}
+      />
+    {/if}
   </div>
 
   <AddIDModal
     bind:this={addModal}
-    onSubmitted={() => {
-      idTable.reloadData();
+    onSubmitted={async () => {
+      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 { fetchMapping, type IDMap } from "./IDMapping";
-  let data: IDMap | undefined = $state();
+  import { type IDMap } from "./IDMapping";
 
   let {
     onEdit,
-  }: { onEdit?: (id: string, firstName: string, lastName: string) => void } =
-    $props();
-
-  export async function reloadData() {
-    data = await fetchMapping();
-  }
+    data,
+  }: {
+    onEdit?: (id: string, firstName: string, lastName: string) => void;
+    data: IDMap;
+  } = $props();
 
   let rows = $derived(
     data
@@ -44,69 +41,61 @@
     if (sortKey !== key) return "";
     return sortDirection === "asc" ? "▲" : "▼";
   }
-
-  onMount(async () => {
-    await reloadData();
-  });
 </script>
 
-{#if data == null}
-  Loading...
-{:else}
-  <div class="bg-indigo-500 py-2 rounded-2xl overflow-x-auto">
-    <table class="px-10">
-      <thead>
-        <tr>
-          <th
-            class="text-left pr-5 pl-2 cursor-pointer select-none"
-            onclick={() => {
-              handleSortClick("id");
-            }}
-          >
-            ID
-            <span class="indicator">{indicator("id")}</span>
-          </th>
-          <th
-            class="text-left pr-5 cursor-pointer select-none"
-            onclick={() => {
-              handleSortClick("last");
-            }}
-          >
-            Nachname
-            <span class="indicator">{indicator("last")}</span>
-          </th>
-          <th
-            class="text-left pr-5 cursor-pointer select-none"
-            onclick={() => {
-              handleSortClick("first");
-            }}
-            >Vorname
+<div class="bg-indigo-500 py-2 rounded-2xl overflow-x-auto">
+  <table class="px-10">
+    <thead>
+      <tr>
+        <th
+          class="text-left pr-5 pl-2 cursor-pointer select-none"
+          onclick={() => {
+            handleSortClick("id");
+          }}
+        >
+          ID
+          <span class="indicator">{indicator("id")}</span>
+        </th>
+        <th
+          class="text-left pr-5 cursor-pointer select-none"
+          onclick={() => {
+            handleSortClick("last");
+          }}
+        >
+          Nachname
+          <span class="indicator">{indicator("last")}</span>
+        </th>
+        <th
+          class="text-left pr-5 cursor-pointer select-none"
+          onclick={() => {
+            handleSortClick("first");
+          }}
+          >Vorname
 
-            <span class="indicator">{indicator("first")}</span>
-          </th>
-          <th> </th>
+          <span class="indicator">{indicator("first")}</span>
+        </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>
-      <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>
-        {/each}
-      </tbody>
-    </table>
-  </div>
-{/if}
+      {/each}
+    </tbody>
+  </table>
+</div>
 
 <style lang="css" scoped>
   @reference "../app.css";

web/src/lib/csv.ts

@@ -1,10 +1,9 @@
 interface CSVOptions {
-  delimiter?: string;             // default: ","
-  includeHeader?: boolean;        // default: true for object input, false for array-of-arrays unless headers provided
-  headerOrder?: string[];         // explicit ordering for columns that should come first
-  eol?: string;                   // default: "\r\n"
-  includeBOM?: boolean;           // default: false (useful for Excel)
-  nullString?: string;            // default: "" (how to render null/undefined)
+  delimiter?: string;
+  headerOrder?: string[];
+  eol?: string;
+  includeBOM?: boolean;
+  nullString?: string;
 }
 
 type RowObject = Record<string, any>;
@@ -13,7 +12,6 @@ type InputRows = RowObject[];
 export function generateCSVString(input: InputRows, opts: CSVOptions = {}): string {
   const {
     delimiter = ",",
-    includeHeader,
     headerOrder,
     eol = "\r\n",
     includeBOM = false,
@@ -29,7 +27,7 @@ export function generateCSVString(input: InputRows, opts: CSVOptions = {}): stri
   const escapeCell = (raw: any): string => {
     if (raw === null || raw === undefined) return nullString;
 
-    let s = defaultStringify(raw);
+    let s = stringify(raw);
 
     // Replace quotes 
     if (s.includes('"')) s = s.replace(/"/g, '""');
@@ -38,7 +36,7 @@ export function generateCSVString(input: InputRows, opts: CSVOptions = {}): stri
   };
 
   // Transform the value of a cell into a string
-  function defaultStringify(v: any): string {
+  function stringify(v: any): string {
     if (v === null || v === undefined) return nullString;
     if (v instanceof Date) return v.toLocaleDateString();
     if (typeof v === "boolean") return v ? "X" : "";
@@ -79,10 +77,9 @@ export function generateCSVString(input: InputRows, opts: CSVOptions = {}): stri
     finalHeaders = first.concat(rest);
   }
 
-  const shouldIncludeHeader = typeof includeHeader === "boolean" ? includeHeader : finalHeaders.length > 0;
   const rowsOut: string[] = [];
 
-  if (shouldIncludeHeader && finalHeaders.length) {
+  if (finalHeaders.length > 0) {
     rowsOut.push(finalHeaders.map(h => escapeCell(h)).join(delimiter));
   }
 

web/src/lib/downloadBlob.ts

@@ -0,0 +1,8 @@
+export function downloadBlob(filename: string, content: string, mimeType = "text/plain") {
+  const blob = new Blob([content], { type: mimeType });
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(blob);
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(a.href);
+}