287 lines
9.4 KiB
Vue
287 lines
9.4 KiB
Vue
<template>
|
|
<div class="min-h-full py-16 bg-gray-50">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-2">
|
|
Termine verwalten
|
|
</h1>
|
|
<div class="w-24 h-1 bg-primary-600 mb-4" />
|
|
</div>
|
|
<button
|
|
@click="openAddModal"
|
|
class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
|
|
>
|
|
<Plus :size="20" class="mr-2" />
|
|
Termin hinzufügen
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="isLoading" class="flex items-center justify-center py-12">
|
|
<Loader2 :size="40" class="animate-spin text-primary-600" />
|
|
</div>
|
|
|
|
<!-- Termine Table -->
|
|
<div v-else class="bg-white rounded-xl shadow-lg overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Datum</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Titel</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Beschreibung</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</th>
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<tr v-for="termin in termine" :key="termin.id" class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
|
|
{{ formatDate(termin.datum) }}
|
|
</td>
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-900">
|
|
{{ termin.titel }}
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-600">
|
|
{{ termin.beschreibung || '-' }}
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<span
|
|
:class="{
|
|
'bg-blue-100 text-blue-800': termin.kategorie === 'Training',
|
|
'bg-green-100 text-green-800': termin.kategorie === 'Punktspiel',
|
|
'bg-purple-100 text-purple-800': termin.kategorie === 'Turnier',
|
|
'bg-yellow-100 text-yellow-800': termin.kategorie === 'Veranstaltung',
|
|
'bg-gray-100 text-gray-800': termin.kategorie === 'Sonstiges'
|
|
}"
|
|
class="px-2 py-1 text-xs font-medium rounded-full"
|
|
>
|
|
{{ termin.kategorie }}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
|
|
<button
|
|
@click="confirmDelete(termin)"
|
|
class="text-red-600 hover:text-red-900"
|
|
title="Löschen"
|
|
>
|
|
<Trash2 :size="18" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div v-if="termine.length === 0" class="text-center py-12 text-gray-500">
|
|
Keine Termine vorhanden.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Modal -->
|
|
<div
|
|
v-if="showModal"
|
|
class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"
|
|
@click.self="closeModal"
|
|
>
|
|
<div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full p-8">
|
|
<h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
|
|
Termin hinzufügen
|
|
</h2>
|
|
|
|
<form @submit.prevent="saveTermin" class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Datum *</label>
|
|
<input
|
|
v-model="formData.datum"
|
|
type="date"
|
|
required
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
:disabled="isSaving"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Kategorie *</label>
|
|
<select
|
|
v-model="formData.kategorie"
|
|
required
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
:disabled="isSaving"
|
|
>
|
|
<option value="Training">Training</option>
|
|
<option value="Punktspiel">Punktspiel</option>
|
|
<option value="Turnier">Turnier</option>
|
|
<option value="Veranstaltung">Veranstaltung</option>
|
|
<option value="Sonstiges">Sonstiges</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Titel *</label>
|
|
<input
|
|
v-model="formData.titel"
|
|
type="text"
|
|
required
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
:disabled="isSaving"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
|
|
<textarea
|
|
v-model="formData.beschreibung"
|
|
rows="3"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
:disabled="isSaving"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="errorMessage" class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm">
|
|
<AlertCircle :size="20" class="mr-2" />
|
|
{{ errorMessage }}
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-4 pt-4">
|
|
<button
|
|
type="button"
|
|
@click="closeModal"
|
|
class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
|
:disabled="isSaving"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors flex items-center"
|
|
:disabled="isSaving"
|
|
>
|
|
<Loader2 v-if="isSaving" :size="20" class="animate-spin mr-2" />
|
|
<span>{{ isSaving ? 'Speichert...' : 'Speichern' }}</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { Calendar, Plus, Trash2, Loader2, AlertCircle } from 'lucide-vue-next'
|
|
|
|
const authStore = useAuthStore()
|
|
|
|
const isLoading = ref(true)
|
|
const isSaving = ref(false)
|
|
const termine = ref([])
|
|
const showModal = ref(false)
|
|
const errorMessage = ref('')
|
|
|
|
const formData = ref({
|
|
datum: '',
|
|
titel: '',
|
|
beschreibung: '',
|
|
kategorie: 'Sonstiges'
|
|
})
|
|
|
|
const loadTermine = async () => {
|
|
isLoading.value = true
|
|
try {
|
|
const response = await $fetch('/api/termine-manage')
|
|
termine.value = response.termine
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Termine:', error)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
const openAddModal = () => {
|
|
formData.value = {
|
|
datum: '',
|
|
titel: '',
|
|
beschreibung: '',
|
|
kategorie: 'Sonstiges'
|
|
}
|
|
showModal.value = true
|
|
errorMessage.value = ''
|
|
}
|
|
|
|
const closeModal = () => {
|
|
showModal.value = false
|
|
errorMessage.value = ''
|
|
}
|
|
|
|
const saveTermin = async () => {
|
|
isSaving.value = true
|
|
errorMessage.value = ''
|
|
|
|
try {
|
|
await $fetch('/api/termine-manage', {
|
|
method: 'POST',
|
|
body: formData.value
|
|
})
|
|
|
|
closeModal()
|
|
await loadTermine()
|
|
} catch (error) {
|
|
errorMessage.value = error.data?.message || 'Fehler beim Speichern des Termins.'
|
|
} finally {
|
|
isSaving.value = false
|
|
}
|
|
}
|
|
|
|
const confirmDelete = async (termin) => {
|
|
if (!confirm(`Möchten Sie den Termin "${termin.titel}" wirklich löschen?`)) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
const params = new URLSearchParams({
|
|
datum: termin.datum,
|
|
titel: termin.titel,
|
|
beschreibung: termin.beschreibung || '',
|
|
kategorie: termin.kategorie || 'Sonstiges'
|
|
})
|
|
|
|
await $fetch(`/api/termine-manage?${params.toString()}`, {
|
|
method: 'DELETE'
|
|
})
|
|
|
|
await loadTermine()
|
|
} catch (error) {
|
|
alert('Fehler beim Löschen des Termins.')
|
|
}
|
|
}
|
|
|
|
const formatDate = (dateString) => {
|
|
if (!dateString) return ''
|
|
const date = new Date(dateString)
|
|
return date.toLocaleDateString('de-DE', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit'
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadTermine()
|
|
})
|
|
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
layout: 'default'
|
|
})
|
|
|
|
useHead({
|
|
title: 'Termine verwalten - Harheimer TC',
|
|
})
|
|
</script>
|
|
|