From f4ef04dbf7ef38e6b0cc045a9837e98e26f31bec Mon Sep 17 00:00:00 2001
From: Frank Agerholm <frank@agerholm.de>
Date: Sun, 25 Jan 2026 17:08:25 +0100
Subject: [PATCH] frontend: Server Page added

---
 frontend/app/pages/servers/index.vue | 110 +++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 frontend/app/pages/servers/index.vue

diff --git a/frontend/app/pages/servers/index.vue b/frontend/app/pages/servers/index.vue
new file mode 100644
index 0000000..d35ff61
--- /dev/null
+++ b/frontend/app/pages/servers/index.vue
@@ -0,0 +1,110 @@
+<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>