Add config system for training, trainer, membership and impressum with CMS editor

This commit is contained in:
Torsten Schulz (local)
2025-10-21 16:44:31 +02:00
parent 2b4db04ea1
commit d5a181e0c8
96 changed files with 1140 additions and 4600 deletions

View File

@@ -7,18 +7,18 @@
<div class="w-24 h-1 bg-primary-600 mb-8" />
<!-- Trainingsort -->
<div class="bg-white rounded-xl shadow-lg p-8 mb-12">
<div v-if="config" class="bg-white rounded-xl shadow-lg p-8 mb-12">
<div class="flex items-start space-x-4 mb-6">
<MapPin :size="32" class="text-primary-600 flex-shrink-0" />
<div>
<h2 class="text-2xl font-display font-bold text-gray-900 mb-4">Trainingsort</h2>
<h3 class="text-lg font-semibold text-gray-900 mb-2">
Sporthalle der Grundschule Harheim
{{ config.training.ort.name }}
</h3>
<p class="text-gray-700 mb-1">In den Schafgärten 25</p>
<p class="text-gray-700 mb-4">60437 Frankfurt/Main</p>
<p class="text-gray-700 mb-1">{{ config.training.ort.strasse }}</p>
<p class="text-gray-700 mb-4">{{ config.training.ort.plz }} {{ config.training.ort.ort }}</p>
<a
href="https://www.google.com/maps/search/?api=1&query=In+den+Schafgärten+25+60437+Frankfurt"
:href="`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(config.training.ort.strasse + ' ' + config.training.ort.plz + ' ' + config.training.ort.ort)}`"
target="_blank"
class="inline-flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors text-sm"
>
@@ -34,36 +34,28 @@
Trainingszeiten
</h2>
<div class="grid gap-6 mb-12">
<div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-primary-600">
<div v-if="config" class="grid gap-6 mb-12">
<div
v-for="(zeiten, gruppe) in groupedZeiten"
:key="gruppe"
class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-primary-600"
>
<div class="flex items-start justify-between">
<div>
<h3 class="text-xl font-display font-bold text-gray-900 mb-2">Damen und Herren</h3>
<h3 class="text-xl font-display font-bold text-gray-900 mb-2">{{ gruppe }}</h3>
<div class="space-y-2">
<p class="text-lg font-semibold text-primary-600">
Dienstag: 19:30 - 22:30 Uhr
</p>
<p class="text-lg font-semibold text-primary-600">
Donnerstag: 19:30 - 22:30 Uhr
<p
v-for="zeit in zeiten"
:key="zeit.id"
class="text-lg font-semibold text-primary-600"
>
{{ zeit.tag }}: {{ zeit.von }} - {{ zeit.bis }} Uhr
</p>
</div>
</div>
<Clock :size="32" class="text-primary-600" />
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-primary-600">
<div class="flex items-start justify-between">
<div>
<h3 class="text-xl font-display font-bold text-gray-900 mb-2">Schüler/Jugend</h3>
<p class="text-gray-600 mb-2">Ab 6 Jahre</p>
<p class="text-lg font-semibold text-primary-600">
Dienstag: 17:30 - 19:30 Uhr
</p>
</div>
<Clock :size="32" class="text-primary-600" />
</div>
</div>
</div>
<div class="mt-12 bg-primary-50 p-8 rounded-xl border border-primary-100">
@@ -93,8 +85,38 @@
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { Clock, MapPin } from 'lucide-vue-next'
const config = ref(null)
const loadConfig = async () => {
try {
const response = await $fetch('/api/config')
config.value = response.config
} catch (error) {
console.error('Fehler beim Laden der Config:', error)
}
}
// Group training times by group
const groupedZeiten = computed(() => {
if (!config.value?.training?.zeiten) return {}
const groups = {}
config.value.training.zeiten.forEach(zeit => {
if (!groups[zeit.gruppe]) {
groups[zeit.gruppe] = []
}
groups[zeit.gruppe].push(zeit)
})
return groups
})
onMounted(() => {
loadConfig()
})
useHead({
title: 'Trainingszeiten - Harheimer TC',
})

View File

@@ -10,32 +10,17 @@
Erfahrene und qualifizierte Trainer für alle Leistungsstufen
</p>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-xl shadow-lg">
<h3 class="text-2xl font-display font-bold text-gray-900 mb-2">C-Trainer</h3>
<p class="text-gray-600 mb-4">Torsten Schulz</p>
<div v-if="config" class="grid md:grid-cols-3 gap-8">
<div
v-for="trainer in config.trainer"
:key="trainer.id"
class="bg-white p-8 rounded-xl shadow-lg"
>
<h3 class="text-2xl font-display font-bold text-gray-900 mb-2">{{ trainer.lizenz }}</h3>
<p class="text-gray-600 mb-4">{{ trainer.name }}</p>
<p class="text-sm text-gray-500">
Lizenz: C-Trainer<br />
Schwerpunkt: Nachwuchsförderung<br />
Erwachsenen bei Wunsch zur Verfügung
</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-lg">
<h3 class="text-2xl font-display font-bold text-gray-900 mb-2">Kindertrainer</h3>
<p class="text-gray-600 mb-4">Thomas Steinbrech</p>
<p class="text-sm text-gray-500">
Lizenz: Kindertrainer<br />
Schwerpunkt: Nachwuchsförderung
</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-lg">
<h3 class="text-2xl font-display font-bold text-gray-900 mb-2">Assistenztrainerin</h3>
<p class="text-gray-600 mb-4">Magda Schwallbach</p>
<p class="text-sm text-gray-500">
Lizenz: Assistenztrainerin<br />
Schwerpunkt: Unterstützung & Betreuung
Lizenz: {{ trainer.lizenz }}<br />
Schwerpunkt: {{ trainer.schwerpunkt }}<span v-if="trainer.zusatz"><br />{{ trainer.zusatz }}</span>
</p>
</div>
</div>
@@ -45,6 +30,23 @@
</template>
<script setup>
import { ref, onMounted } from 'vue'
const config = ref(null)
const loadConfig = async () => {
try {
const response = await $fetch('/api/config')
config.value = response.config
} catch (error) {
console.error('Fehler beim Laden der Config:', error)
}
}
onMounted(() => {
loadConfig()
})
useHead({
title: 'Trainer - Harheimer TC',
})