admin: add and rename bars

client/src/admin/Admin.tsx

@@ -194,6 +194,7 @@ function Drinks() {
 function Bars() {
   const [bars, setBars] = useState<BarRow[]>([]);
   const [drinks, setDrinks] = useState<Drink[]>([]);
+  const [newName, setNewName] = useState('');
 
   function reload() {
     fetch('/admin/api/bars').then(j).then(setBars);
@@ -202,11 +203,28 @@ function Bars() {
   useEffect(reload, []);
 
   async function patch(id: number, body: Partial<BarRow>) {
-    await fetch(`/admin/api/bars/${id}`, {
+    const res = await fetch(`/admin/api/bars/${id}`, {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(body),
     });
+    if (!res.ok) alert(`Fehler: ${await res.text()}`);
+    reload();
+  }
+
+  async function addBar() {
+    const name = newName.trim();
+    if (!name) return;
+    const res = await fetch('/admin/api/bars', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, pfand_cents: 200 }),
+    });
+    if (!res.ok) {
+      alert(`Fehler: ${await res.text()}`);
+      return;
+    }
+    setNewName('');
     reload();
   }
 
@@ -216,7 +234,13 @@ function Bars() {
       {bars.map(b => (
         <div key={b.id} style="margin-bottom:16px; padding:8px; border:1px solid #333; border-radius:6px">
           <div class="row">
-            <strong>{b.name}</strong>
+            <label>
+              Name
+              <input
+                value={b.name}
+                onChange={(e: any) => patch(b.id, { name: e.currentTarget.value } as any)}
+              />
+            </label>
             <label>
               Pfand €
               <input
@@ -251,6 +275,14 @@ function Bars() {
           </div>
         </div>
       ))}
+      <div class="row">
+        <input
+          placeholder="Neue Bar"
+          value={newName}
+          onInput={(e: any) => setNewName(e.currentTarget.value)}
+        />
+        <button onClick={addBar}>Bar hinzufügen</button>
+      </div>
     </>
   );
 }