scaffold festival drink tracker (pnpm workspace, Fastify + SQLite, Preact tablet UI, admin)

client/src/tablet/App.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'preact/hooks';
+import type { Bar, BarConfig } from '@wutzcalc/shared';
+import { api } from '../api';
+import { BarPicker } from './BarPicker';
+import { Sale } from './Sale';
+
+const STORAGE_KEY = 'wutz.bar_id';
+
+export function App() {
+  const [bars, setBars] = useState<Bar[] | null>(null);
+  const [barId, setBarId] = useState<number | null>(() => {
+    const v = localStorage.getItem(STORAGE_KEY);
+    return v ? Number(v) : null;
+  });
+  const [config, setConfig] = useState<BarConfig | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (barId == null) {
+      api.bars().then(setBars).catch(e => setError(String(e)));
+    }
+  }, [barId]);
+
+  useEffect(() => {
+    if (barId == null) return;
+    setConfig(null);
+    api.config(barId).then(setConfig).catch(e => setError(String(e)));
+  }, [barId]);
+
+  function pick(id: number) {
+    localStorage.setItem(STORAGE_KEY, String(id));
+    setBarId(id);
+  }
+
+  function changeBar() {
+    localStorage.removeItem(STORAGE_KEY);
+    setBarId(null);
+    setConfig(null);
+  }
+
+  if (error) return <div class="bar-picker"><h1>Fehler</h1><p>{error}</p><button onClick={() => location.reload()}>Neu laden</button></div>;
+  if (barId == null) return <BarPicker bars={bars} onPick={pick} />;
+  if (!config) return <div class="bar-picker"><p>Lade…</p></div>;
+  return <Sale config={config} onChangeBar={changeBar} />;
+}