Add CMS termine editor for admin and vorstand

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

View File

@@ -6,122 +6,87 @@
</h1>
<div class="w-24 h-1 bg-primary-600 mb-8" />
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h2 class="text-2xl font-display font-bold text-gray-900 mb-4">
Willkommen im CMS, {{ user?.name }}!
</h2>
<p class="text-gray-600">
Hier können Sie Inhalte der Website verwalten.
</p>
</div>
<!-- CMS Modules -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
<Calendar :size="24" class="text-primary-600" />
</div>
<h3 class="text-lg font-semibold text-gray-900">Termine verwalten</h3>
</div>
<p class="text-gray-600 text-sm mb-4">
Termine hinzufügen, bearbeiten und löschen
</p>
<button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
Öffnen
</button>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
<Newspaper :size="24" class="text-primary-600" />
</div>
<h3 class="text-lg font-semibold text-gray-900">Interne News</h3>
</div>
<p class="text-gray-600 text-sm mb-4">
News für Mitglieder erstellen und verwalten
</p>
<button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
Öffnen
</button>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
<FileText :size="24" class="text-primary-600" />
</div>
<h3 class="text-lg font-semibold text-gray-900">Spielpläne</h3>
</div>
<p class="text-gray-600 text-sm mb-4">
Spielpläne hochladen und verwalten
</p>
<button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
Öffnen
</button>
</div>
<!-- Interne News -->
<NuxtLink
to="/cms/benutzer"
class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-shadow block"
to="/mitgliederbereich/news"
class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
>
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
<Users :size="24" class="text-primary-600" />
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center group-hover:bg-blue-600 transition-colors">
<Newspaper :size="24" class="text-blue-600 group-hover:text-white" />
</div>
<h3 class="text-lg font-semibold text-gray-900">Benutzerverwaltung</h3>
<h2 class="ml-4 text-xl font-semibold text-gray-900">Interne News</h2>
</div>
<p class="text-gray-600 text-sm mb-4">
Registrierungen freischalten und Rollen verwalten
<p class="text-gray-600">
News für Mitglieder erstellen und verwalten
</p>
<span class="text-sm text-primary-600 hover:text-primary-700 font-medium">
Öffnen
</span>
</NuxtLink>
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<!-- Termine -->
<NuxtLink
to="/cms/termine"
class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
>
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
<Image :size="24" class="text-primary-600" />
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-600 transition-colors">
<Calendar :size="24" class="text-green-600 group-hover:text-white" />
</div>
<h3 class="text-lg font-semibold text-gray-900">Galerie</h3>
<h2 class="ml-4 text-xl font-semibold text-gray-900">Termine</h2>
</div>
<p class="text-gray-600 text-sm mb-4">
Bilder hochladen und verwalten
<p class="text-gray-600">
Vereinstermine erstellen und verwalten
</p>
<button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
Öffnen
</button>
</div>
</NuxtLink>
<!-- Mitglieder -->
<NuxtLink
to="/mitgliederbereich/mitglieder"
class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
>
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center group-hover:bg-purple-600 transition-colors">
<Users :size="24" class="text-purple-600 group-hover:text-white" />
</div>
<h2 class="ml-4 text-xl font-semibold text-gray-900">Mitglieder</h2>
</div>
<p class="text-gray-600">
Mitgliederliste bearbeiten
</p>
</NuxtLink>
<!-- Benutzerverwaltung (nur für Admin) -->
<NuxtLink
v-if="authStore.role === 'admin'"
to="/cms/benutzer"
class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
>
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center group-hover:bg-yellow-600 transition-colors">
<UserCog :size="24" class="text-yellow-600 group-hover:text-white" />
</div>
<h2 class="ml-4 text-xl font-semibold text-gray-900">Benutzerverwaltung</h2>
</div>
<p class="text-gray-600">
Benutzer freischalten und verwalten
</p>
</NuxtLink>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Calendar, Newspaper, FileText, Users, Image } from 'lucide-vue-next'
import { Newspaper, Calendar, Users, UserCog } from 'lucide-vue-next'
const user = ref(null)
onMounted(async () => {
try {
const response = await $fetch('/api/auth/status')
if (response.isLoggedIn) {
user.value = response.user
}
} catch (error) {
console.error('Fehler beim Laden der Benutzerdaten:', error)
}
})
const authStore = useAuthStore()
definePageMeta({
middleware: 'auth'
middleware: 'auth',
layout: 'default'
})
useHead({
title: 'CMS - Harheimer TC',
})
</script>