sev/RoggioApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace unpkg vue with cdnjs and convert braces to v-text to prevent flash of unstyled content
Deploy API / deploy (push) Failing after 24s
Details

Browse Source
This commit is contained in:
clara
2026-04-26 21:42:59 +02:00
parent 56733c6483
commit b3d30e4b9f
1 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+18 -14
View File
@@ -3,17 +3,17 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>RoggioApp - API Dashboard</title> <title>RoggioApp - API Dashboard</title>
<!-- Lade Vue 3 Global Build (kein Modul-Zwang) --> <!-- Vue 3 Global via cdnjs (als Backup zu unpkg) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <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> <script src="https://cdn.tailwindcss.com"></script>
</head> </head>
<body class="bg-gray-100 text-gray-800"> <body class="bg-gray-100 text-gray-800">
<div id="app" class="container mx-auto p-8"> <div id="app" class="container mx-auto p-8">
<h1 class="text-4xl font-bold mb-8 text-indigo-600">RoggioApp Dashboard</h1> <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"> <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> <strong class="font-bold">Fehler! </strong>
<span class="block sm:inline">{{ error }}</span> <span class="block sm:inline" v-text="errorMsg"></span>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
@@ -31,7 +31,7 @@
<ul class="space-y-2"> <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"> <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"> <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> <button @click="deleteUnit(unit.id)" class="text-red-500 hover:underline">Löschen</button>
</div> </div>
<textarea v-model="unit.traitsRaw" class="w-full border p-2 text-sm font-mono rounded" rows="3"></textarea> <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"> <form @submit.prevent="createEvent" class="mb-4 flex flex-col gap-2">
<select v-model="newEvent.unitId" class="border p-2 rounded" required> <select v-model="newEvent.unitId" class="border p-2 rounded" required>
<option disabled value="">Unit auswählen...</option> <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> </select>
<div class="flex gap-2"> <div class="flex gap-2">
<input v-model="newEvent.type" placeholder="Type (z.B. booking)" class="border p-2 rounded flex-1" required> <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"> <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"> <li v-for="event in events" :key="event.id" class="border p-4 rounded flex justify-between items-center bg-gray-50">
<div> <div>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-bold">{{ event.type }}</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: {{ getUnitName(event.unitId) }}</span> <span class="ml-2 text-sm text-gray-600">Unit: <span v-text="getUnitName(event.unitId)"></span></span>
</div> </div>
<button @click="deleteEvent(event.id)" class="text-red-500 hover:underline text-sm">Löschen</button> <button @click="deleteEvent(event.id)" class="text-red-500 hover:underline text-sm">Löschen</button>
</li> </li>
@@ -71,8 +71,12 @@
<script> <script>
document.addEventListener("DOMContentLoaded", () => { 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 { try {
const { createApp } = Vue const { createApp } = Vue;
createApp({ createApp({
data() { data() {
@@ -81,7 +85,7 @@
events: [], events: [],
newUnit: { name: '', traits: '{"is_rentable": true}' }, newUnit: { name: '', traits: '{"is_rentable": true}' },
newEvent: { unitId: '', type: 'booking' }, newEvent: { unitId: '', type: 'booking' },
error: null errorMsg: null
} }
}, },
methods: { methods: {
@@ -92,7 +96,7 @@
const data = await res.json(); const data = await res.json();
this.units = data.map(u => ({ ...u, traitsRaw: JSON.stringify(u.traits || {}, null, 2) })); this.units = data.map(u => ({ ...u, traitsRaw: JSON.stringify(u.traits || {}, null, 2) }));
} catch(e) { } catch(e) {
this.error = e.message; this.errorMsg = e.message;
} }
}, },
async fetchEvents() { async fetchEvents() {
@@ -101,7 +105,7 @@
if (!res.ok) throw new Error("API Fehler beim Laden der Events"); if (!res.ok) throw new Error("API Fehler beim Laden der Events");
this.events = await res.json(); this.events = await res.json();
} catch(e) { } catch(e) {
this.error = e.message; this.errorMsg = e.message;
} }
}, },
getUnitName(id) { getUnitName(id) {