From f9e2534d5f065e29e7c6445ce2d48d780de6362d Mon Sep 17 00:00:00 2001
From: clara <clara@lazynet.works>
Date: Sun, 26 Apr 2026 21:48:35 +0200
Subject: [PATCH] fix: use correct EOF escaping to preserve template literals
 in JS

---
 public/index.html | 71 ++++++++++++++---------------------------------
 1 file changed, 21 insertions(+), 50 deletions(-)
diff --git a/public/index.html b/public/index.html
index 93e9078..95e8d88 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <title>RoggioApp - API Dashboard</title>
-  <!-- Vue 3 Global via cdnjs (als Backup zu unpkg) -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.global.prod.min.js"></script>
   <script src="https://cdn.tailwindcss.com"></script>
 </head>
@@ -17,17 +16,13 @@
     </div>
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-      
-      <!-- UNITS SECTION -->
       <div class="bg-white p-6 rounded-lg shadow">
         <h2 class="text-2xl font-bold mb-4">Units (Räume/Objekte)</h2>
-        
         <form @submit.prevent="createUnit" class="mb-4 flex gap-2">
-          <input v-model="newUnit.name" placeholder="Name (z.B. Appartement 1)" class="border p-2 rounded flex-1" required>
+          <input v-model="newUnit.name" placeholder="Name" class="border p-2 rounded flex-1" required>
           <input v-model="newUnit.traits" placeholder="Traits (JSON)" class="border p-2 rounded flex-1">
           <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Neu</button>
         </form>
-
         <ul class="space-y-2">
           <li v-for="unit in units" :key="unit.id" class="border p-4 rounded flex flex-col gap-2 bg-gray-50">
             <div class="flex justify-between items-center">
@@ -40,10 +35,8 @@
         </ul>
       </div>
 
-      <!-- EVENTS SECTION -->
       <div class="bg-white p-6 rounded-lg shadow">
         <h2 class="text-2xl font-bold mb-4">Events (Buchungen/Aufgaben)</h2>
-        
         <form @submit.prevent="createEvent" class="mb-4 flex flex-col gap-2">
           <select v-model="newEvent.unitId" class="border p-2 rounded" required>
             <option disabled value="">Unit auswählen...</option>
@@ -54,7 +47,6 @@
             <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Neu</button>
           </div>
         </form>
-
         <ul class="space-y-2">
           <li v-for="event in events" :key="event.id" class="border p-4 rounded flex justify-between items-center bg-gray-50">
             <div>
@@ -65,79 +57,58 @@
           </li>
         </ul>
       </div>
-
     </div>
   </div>
 
   <script>
     document.addEventListener("DOMContentLoaded", () => {
-      if (typeof Vue === "undefined") {
-         document.body.innerHTML += "<div style='color:red; padding:20px;'>CRITICAL: Vue library failed to load from CDN! AdBlocker/DNS issue?</div>";
-         return;
-      }
       try {
         const { createApp } = Vue;
-
         createApp({
           data() {
             return {
-              units: [],
-              events: [],
-              newUnit: { name: '', traits: '{"is_rentable": true}' },
-              newEvent: { unitId: '', type: 'booking' },
+              units: [], events: [],
+              newUnit: { name: "", traits: "{}" },
+              newEvent: { unitId: "", type: "booking" },
               errorMsg: null
             }
           },
           methods: {
             async fetchUnits() {
-              try {
-                const res = await fetch('/api/units');
-                if (!res.ok) throw new Error("API Fehler beim Laden der Units");
-                const data = await res.json();
-                this.units = data.map(u => ({ ...u, traitsRaw: JSON.stringify(u.traits || {}, null, 2) }));
-              } catch(e) {
-                this.errorMsg = e.message;
-              }
+              const res = await fetch("/api/units");
+              const data = await res.json();
+              this.units = data.map(u => ({ ...u, traitsRaw: JSON.stringify(u.traits || {}, null, 2) }));
             },
             async fetchEvents() {
-              try {
-                const res = await fetch('/api/events');
-                if (!res.ok) throw new Error("API Fehler beim Laden der Events");
-                this.events = await res.json();
-              } catch(e) {
-                this.errorMsg = e.message;
-              }
+              const res = await fetch("/api/events");
+              this.events = await res.json();
             },
             getUnitName(id) {
               const u = this.units.find(u => u.id === id);
               return u ? u.name : id;
             },
             async createUnit() {
-              try {
-                const body = { name: this.newUnit.name, traits: JSON.parse(this.newUnit.traits || '{}') };
-                await fetch('/api/units', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(body) });
-                this.newUnit.name = '';
-                this.fetchUnits();
-              } catch(e) { alert("Fehler: " + e.message); }
+              const body = { name: this.newUnit.name, traits: JSON.parse(this.newUnit.traits || "{}") };
+              await fetch("/api/units", { method: "POST", headers: {"Content-Type":"application/json"}, body: JSON.stringify(body) });
+              this.newUnit.name = "";
+              this.fetchUnits();
             },
             async updateUnit(unit) {
-              try {
-                const body = { name: unit.name, traits: JSON.parse(unit.traitsRaw) };
-                await fetch(\`/api/units/\${unit.id}\`, { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify(body) });
-                alert("Gespeichert!");
-              } catch(e) { alert("Invalid JSON: " + e.message); }
+              const body = { name: unit.name, traits: JSON.parse(unit.traitsRaw) };
+              await fetch(`/api/units/${unit.id}`, { method: "PUT", headers: {"Content-Type":"application/json"}, body: JSON.stringify(body) });
+              alert("Gespeichert!");
             },
             async deleteUnit(id) {
-              await fetch(\`/api/units/\${id}\`, { method: 'DELETE' });
+              await fetch(`/api/units/${id}`, { method: "DELETE" });
               this.fetchUnits();
             },
             async createEvent() {
               const body = { unitId: this.newEvent.unitId, type: this.newEvent.type, traits: {} };
-              await fetch('/api/events', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(body) });
+              await fetch("/api/events", { method: "POST", headers: {"Content-Type":"application/json"}, body: JSON.stringify(body) });
               this.fetchEvents();
             },
             async deleteEvent(id) {
-              await fetch(\`/api/events/\${id}\`, { method: 'DELETE' });
+              await fetch(`/api/events/${id}`, { method: "DELETE" });
               this.fetchEvents();
             }
           },
@@ -145,9 +116,9 @@
             this.fetchUnits();
             this.fetchEvents();
           }
-        }).mount('#app')
+        }).mount("#app")
       } catch (err) {
-        document.body.innerHTML += "<div style='color:red; padding: 20px;'>Kritischer Fehler beim Starten von Vue: " + err.message + "</div>";
+        document.body.innerHTML += "<div style=\"color:red; padding:20px;\">Error: " + err.message + "</div>";
       }
     });
   </script>
