152 lines
6.4 KiB
HTML
152 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<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>
|
|
<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>
|
|
|
|
<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.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">
|
|
<strong>{{ 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>
|
|
<button @click="updateUnit(unit)" class="bg-green-500 text-white px-2 py-1 rounded text-sm self-end hover:bg-green-600">Speichern</button>
|
|
</li>
|
|
</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>
|
|
<option v-for="u in units" :value="u.id">{{ 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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
<button @click="deleteEvent(event.id)" class="text-red-500 hover:underline text-sm">Löschen</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
try {
|
|
const { createApp } = Vue
|
|
|
|
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();
|
|
this.fetchEvents();
|
|
}
|
|
}).mount('#app')
|
|
} catch (err) {
|
|
document.body.innerHTML += "<div style='color:red; padding: 20px;\>Kritischer Fehler beim Starten von Vue: " + err.message + "</div>";
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|