From 56733c64830deba8440a9eee92f8b38c85eb01e3 Mon Sep 17 00:00:00 2001
From: clara <clara@lazynet.works>
Date: Sun, 26 Apr 2026 21:34:40 +0200
Subject: [PATCH] fix: add DOMContentLoaded wrapper and error handling to vue
 init

---
 public/index.html | 135 +++++++++++++++++++++++++++-------------------
 1 file changed, 79 insertions(+), 56 deletions(-)
diff --git a/public/index.html b/public/index.html
index cbefc3d..0d368cf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>RoggioApp - API Dashboard</title>
+  <!-- Lade Vue 3 Global Build (kein Modul-Zwang) -->
   <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
   <script src="https://cdn.tailwindcss.com"></script>
 </head>
@@ -10,6 +11,11 @@
   <div id="app" class="container mx-auto p-8">
     <h1 class="text-4xl font-bold mb-8 text-indigo-600">RoggioApp Dashboard</h1>
 
+    <div v-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
+      <strong class="font-bold">Fehler!</strong>
+      <span class="block sm:inline">{{ error }}</span>
+    </div>
+
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
       
       <!-- UNITS SECTION -->
@@ -64,65 +70,82 @@
   </div>
 
   <script>
-    const { createApp } = Vue
+    document.addEventListener("DOMContentLoaded", () => {
+      try {
+        const { createApp } = Vue
 
-    createApp({
-      data() {
-        return {
-          units: [],
-          events: [],
-          newUnit: { name: '', traits: '{"is_rentable": true}' },
-          newEvent: { unitId: '', type: 'booking' }
-        }
-      },
-      methods: {
-        async fetchUnits() {
-          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() {
-          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 = '';
+        createApp({
+          data() {
+            return {
+              units: [],
+              events: [],
+              newUnit: { name: '', traits: '{"is_rentable": true}' },
+              newEvent: { unitId: '', type: 'booking' },
+              error: 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.error = e.message;
+              }
+            },
+            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.error = e.message;
+              }
+            },
+            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); }
+            },
+            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); }
+            },
+            async deleteUnit(id) {
+              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) });
+              this.fetchEvents();
+            },
+            async deleteEvent(id) {
+              await fetch(\`/api/events/\${id}\`, { method: 'DELETE' });
+              this.fetchEvents();
+            }
+          },
+          mounted() {
             this.fetchUnits();
-          } catch(e) { alert("Invalid JSON in Traits"); }
-        },
-        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"); }
-        },
-        async deleteUnit(id) {
-          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) });
-          this.fetchEvents();
-        },
-        async deleteEvent(id) {
-          await fetch(\`/api/events/\${id}\`, { method: 'DELETE' });
-          this.fetchEvents();
-        }
-      },
-      mounted() {
-        this.fetchUnits();
-        this.fetchEvents();
+            this.fetchEvents();
+          }
+        }).mount('#app')
+      } catch (err) {
+        document.body.innerHTML += "<div style='color:red; padding: 20px;\>Kritischer Fehler beim Starten von Vue: " + err.message + "</div>";
       }
-    }).mount('#app')
+    });
   </script>
 </body>
 </html>
