149 lines
3.4 KiB
Vue
149 lines
3.4 KiB
Vue
<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>
|