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

fix: add DOMContentLoaded wrapper and error handling to vue init
Deploy API / deploy (push) Failing after 13s
Details

Browse Source
This commit is contained in:
clara
2026-04-26 21:34:40 +02:00
parent 4bb31fe82a
commit 56733c6483
1 changed files with 79 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+79 -56
View File
@@ -3,6 +3,7 @@
<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) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
</head> </head>
@@ -10,6 +11,11 @@
<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">
<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"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- UNITS SECTION --> <!-- UNITS SECTION -->
@@ -64,65 +70,82 @@
</div> </div>
<script> <script>
const { createApp } = Vue document.addEventListener("DOMContentLoaded", () => {
try {
const { createApp } = Vue
createApp({ createApp({
data() { data() {
return { return {
units: [], units: [],
events: [], events: [],
newUnit: { name: '', traits: '{"is_rentable": true}' }, newUnit: { name: '', traits: '{"is_rentable": true}' },
newEvent: { unitId: '', type: 'booking' } newEvent: { unitId: '', type: 'booking' },
} error: null
}, }
methods: { },
async fetchUnits() { methods: {
const res = await fetch('/api/units'); async fetchUnits() {
const data = await res.json(); try {
this.units = data.map(u => ({ ...u, traitsRaw: JSON.stringify(u.traits, null, 2) })); const res = await fetch('/api/units');
}, if (!res.ok) throw new Error("API Fehler beim Laden der Units");
async fetchEvents() { const data = await res.json();
const res = await fetch('/api/events'); this.units = data.map(u => ({ ...u, traitsRaw: JSON.stringify(u.traits || {}, null, 2) }));
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 fetchEvents() {
}, try {
async createUnit() { const res = await fetch('/api/events');
try { if (!res.ok) throw new Error("API Fehler beim Laden der Events");
const body = { name: this.newUnit.name, traits: JSON.parse(this.newUnit.traits || '{}') }; this.events = await res.json();
await fetch('/api/units', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(body) }); } catch(e) {
this.newUnit.name = ''; 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(); this.fetchUnits();
} catch(e) { alert("Invalid JSON in Traits"); } this.fetchEvents();
}, }
async updateUnit(unit) { }).mount('#app')
try { } catch (err) {
const body = { name: unit.name, traits: JSON.parse(unit.traitsRaw) }; document.body.innerHTML += "<div style='color:red; padding: 20px;\>Kritischer Fehler beim Starten von Vue: " + err.message + "</div>";
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();
} }
}).mount('#app') });
</script> </script>
</body> </body>
</html> </html>