torsten/harheimertc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add CMS termine editor for admin and vorstand

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-21 15:57:42 +02:00
parent 201de0a278
commit 1cbfbaf754
15 changed files with 779 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
pages/cms/termine.vue Normal file
View File

@@ -0,0 +1,286 @@
<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>