From b3d30e4b9f879c2ed069a8eb46a0f523345af73e Mon Sep 17 00:00:00 2001
From: clara <clara@lazynet.works>
Date: Sun, 26 Apr 2026 21:42:59 +0200
Subject: [PATCH] fix: replace unpkg vue with cdnjs and convert braces to
 v-text to prevent flash of unstyled content

---
 public/index.html | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)
diff --git a/public/index.html b/public/index.html
index 0d368cf..e3291f2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,17 +3,17 @@
 <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>
+  <!-- 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>
 <body class="bg-gray-100 text-gray-800">
   <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 v-if="errorMsg" 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" v-text="errorMsg"></span>
     </div>
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
@@ -31,7 +31,7 @@
         <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">
-              <strong>{{ unit.name }}</strong>
+              <strong v-text="unit.name"></strong>
               <button @click="deleteUnit(unit.id)" class="text-red-500 hover:underline">Löschen</button>
             </div>
             <textarea v-model="unit.traitsRaw" class="w-full border p-2 text-sm font-mono rounded" rows="3"></textarea>
@@ -47,7 +47,7 @@
         <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>
-            <option v-for="u in units" :value="u.id">{{ u.name }}</option>
+            <option v-for="u in units" :value="u.id" v-text="u.name"></option>
           </select>
           <div class="flex gap-2">
             <input v-model="newEvent.type" placeholder="Type (z.B. booking)" class="border p-2 rounded flex-1" required>
@@ -58,8 +58,8 @@
         <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>
-              <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-bold">{{ event.type }}</span>
-              <span class="ml-2 text-sm text-gray-600">Unit: {{ getUnitName(event.unitId) }}</span>
+              <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-bold" v-text="event.type"></span>
+              <span class="ml-2 text-sm text-gray-600">Unit: <span v-text="getUnitName(event.unitId)"></span></span>
             </div>
             <button @click="deleteEvent(event.id)" class="text-red-500 hover:underline text-sm">Löschen</button>
           </li>
@@ -71,8 +71,12 @@
 
   <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
+        const { createApp } = Vue;
 
         createApp({
           data() {
@@ -81,7 +85,7 @@
               events: [],
               newUnit: { name: '', traits: '{"is_rentable": true}' },
               newEvent: { unitId: '', type: 'booking' },
-              error: null
+              errorMsg: null
             }
           },
           methods: {
@@ -92,7 +96,7 @@
                 const data = await res.json();
                 this.units = data.map(u => ({ ...u, traitsRaw: JSON.stringify(u.traits || {}, null, 2) }));
               } catch(e) {
-                this.error = e.message;
+                this.errorMsg = e.message;
               }
             },
             async fetchEvents() {
@@ -101,7 +105,7 @@
                 if (!res.ok) throw new Error("API Fehler beim Laden der Events");
                 this.events = await res.json();
               } catch(e) {
-                this.error = e.message;
+                this.errorMsg = e.message;
               }
             },
             getUnitName(id) {
