frontend: Workload pages

frontend/app/pages/workentries/create.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+
+definePageMeta({
+  requiresAuth: true
+})
+
+import { ref, onMounted } from "vue"
+import { isUnauthorized } from "~/utils/auth"
+
+const { apiFetch } = useApi()
+
+const servers = ref([])
+const loading = ref(false)
+const error = ref("")
+const createdEntry = ref(null)
+
+const form = ref({
+  title: "",
+  description: "",
+  duration_minutes: null,
+  server_ids: []
+})
+
+async function loadServers() {
+  try {
+    const result = await apiFetch("/servers")
+    if (isUnauthorized(result)) {
+      return result
+    }
+    servers.value = result
+  } catch (e: any) {
+    error.value = e.message
+  }
+}
+
+async function createEntry() {
+  try {
+    const entry = await apiFetch("/work-entries", {
+      method: "POST",
+      body: form.value
+    })
+    if (isUnauthorized(entry)) {
+      return entry
+    }
+    createdEntry.value = entry
+
+    // Formular zurücksetzen
+    form.value = {
+      title: "",
+      description: "",
+      duration_minutes: null,
+      server_ids: []
+    }
+  } catch (e: any) {
+    error.value = e.message
+  }
+}
+
+function resetForm() {
+  createdEntry.value = null
+}
+
+onMounted(async () => {
+    if (isUnauthorized(await loadServers())) return
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <h1 class="text-3xl font-bold">Neuen Worklog-Eintrag erstellen</h1>
+
+    <div v-if="error" class="text-red-600">{{ error }}</div>
+
+    <!-- Anzeige des erstellten Eintrags -->
+    <div v-if="createdEntry" class="p-4 bg-green-50 border border-green-300 rounded">
+      <h2 class="text-xl font-semibold mb-2">Eintrag erstellt</h2>
+
+      <p><strong>Titel:</strong> {{ createdEntry.title }}</p>
+      <p><strong>Beschreibung:</strong> {{ createdEntry.description || "—" }}</p>
+      <p><strong>Dauer:</strong> {{ createdEntry.duration_minutes || "—" }}</p>
+
+      <p class="mt-2">
+        <strong>Server:</strong>
+        <span
+          v-for="s in createdEntry.servers"
+          :key="s.id"
+          class="inline-block bg-gray-200 px-2 py-1 rounded mr-1"
+        >
+          {{ s.hostname }}
+        </span>
+      </p>
+
+      <button
+        @click="resetForm"
+        class="mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+      >
+        Weiteren Eintrag erstellen
+      </button>
+    </div>
+
+    <!-- Formular -->
+    <div v-else class="p-4 bg-white shadow rounded space-y-4">
+      <input
+        v-model="form.title"
+        type="text"
+        placeholder="Titel"
+        class="border p-2 rounded w-full"
+      />
+
+      <textarea
+        v-model="form.description"
+        placeholder="Beschreibung (optional)"
+        class="border p-2 rounded w-full"
+      />
+
+      <input
+        v-model.number="form.duration_minutes"
+        type="number"
+        placeholder="Dauer in Minuten (optional)"
+        class="border p-2 rounded w-full"
+      />
+
+      <div>
+        <label class="font-semibold">Server auswählen</label>
+        <div class="flex flex-col gap-1 mt-1">
+          <label
+            v-for="server in servers"
+            :key="server.id"
+            class="flex items-center gap-2"
+          >
+            <input
+              type="checkbox"
+              :value="server.id"
+              v-model="form.server_ids"
+            />
+            {{ server.hostname }}
+          </label>
+        </div>
+      </div>
+
+      <button
+        @click="createEntry"
+        class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700"
+      >
+        Speichern
+      </button>
+    </div>
+  </div>
+</template>