110 lines
2.6 KiB
Vue
110 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue"
|
|
|
|
const { apiFetch } = useApi()
|
|
|
|
const servers = ref([])
|
|
const newServer = ref({
|
|
hostname: "",
|
|
description: ""
|
|
})
|
|
|
|
const loading = ref(false)
|
|
const error = ref("")
|
|
|
|
async function loadServers() {
|
|
loading.value = true
|
|
try {
|
|
servers.value = await apiFetch("/servers")
|
|
} catch (e: any) {
|
|
error.value = e.message
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function createServer() {
|
|
if (!newServer.value.hostname.trim()) return
|
|
|
|
try {
|
|
const server = await apiFetch("/servers", {
|
|
method: "POST",
|
|
body: {
|
|
hostname: newServer.value.hostname,
|
|
description: newServer.value.description
|
|
}
|
|
})
|
|
|
|
servers.value.push(server)
|
|
newServer.value = { hostname: "", description: "" }
|
|
} catch (e: any) {
|
|
error.value = e.message
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadServers()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6">
|
|
<h1 class="text-3xl font-bold">Server Verwaltung</h1>
|
|
|
|
<!-- Neues Server-Formular -->
|
|
<div class="p-4 bg-white shadow rounded space-y-4">
|
|
<h2 class="text-xl font-semibold">Neuen Server anlegen</h2>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<input
|
|
v-model="newServer.hostname"
|
|
type="text"
|
|
placeholder="Server Name"
|
|
class="border p-2 rounded"
|
|
/>
|
|
|
|
<textarea
|
|
v-model="newServer.description"
|
|
placeholder="Beschreibung (optional)"
|
|
class="border p-2 rounded"
|
|
/>
|
|
|
|
<button
|
|
@click="createServer"
|
|
class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 self-start"
|
|
>
|
|
Speichern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Server-Liste -->
|
|
<div class="p-4 bg-white shadow rounded">
|
|
<h2 class="text-xl font-semibold mb-4">Server Liste</h2>
|
|
|
|
<div v-if="loading">Lade Server…</div>
|
|
<div v-if="error" class="text-red-600">{{ error }}</div>
|
|
|
|
<table class="w-full border-collapse">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="text-left p-2">ID</th>
|
|
<th class="text-left p-2">Name</th>
|
|
<th class="text-left p-2">Beschreibung</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="server in servers"
|
|
:key="server.id"
|
|
class="border-b hover:bg-gray-50"
|
|
>
|
|
<td class="p-2">{{ server.id }}</td>
|
|
<td class="p-2">{{ server.hostname }}</td>
|
|
<td class="p-2">{{ server.description }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|