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

Update Hero component to dynamically display years since founding; enhance TermineVorschau component with improved date and time formatting, and add Uhrzeit column in the CMS for better event management. Refactor API to handle new fields and improve data handling in CSV exports.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-11-05 10:36:58 +01:00
parent 21044c6c34
commit 36400304a4
16 changed files with 913 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/Hero.vue
View File

@@ -20,7 +20,7 @@
</h1>
<p class="text-xl sm:text-2xl text-gray-700 mb-8 max-w-3xl mx-auto animate-fade-in-delay-1">
Tradition trifft Moderne - Ihr Tischtennisverein in Frankfurt-Harheim seit über 45 Jahren
Tradition trifft Moderne - Ihr Tischtennisverein in Frankfurt-Harheim seit {{ yearsSinceFounding }} Jahren
</p>
</div>
@@ -29,6 +29,8 @@
</template>
<script setup>
const foundingYear = 1954
const yearsSinceFounding = new Date().getFullYear() - foundingYear
</script>
<style scoped>

38
components/TermineVorschau.vue
View File

@@ -8,9 +8,16 @@
>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-primary-600 rounded-lg flex flex-col items-center justify-center text-white text-xs font-bold">
<span>{{ formatDay(termin.datum) }}</span>
<span>{{ formatMonth(termin.datum) }}</span>
<div class="w-16 h-16 bg-primary-600 rounded-lg flex flex-col items-center justify-center text-white text-[10px] font-bold leading-tight py-1.5 px-1.5">
<span class="text-lg leading-none">{{ formatDay(termin.datum) }}</span>
<span class="leading-none mt-0.5">{{ formatMonth(termin.datum) }}</span>
<span class="text-[10px] leading-none opacity-95 mt-0.5">{{ formatYear(termin.datum) }}</span>
<span
v-if="termin.uhrzeit"
class="text-[10px] leading-none mt-1 px-2 py-0.5 rounded-md bg-white/40 ring-1 ring-white/50 backdrop-blur-[1.5px] whitespace-nowrap"
>
{{ formatOnlyTime(termin.uhrzeit) }} Uhr
</span>
</div>
<div>
<h3 class="font-semibold text-gray-900">{{ termin.titel }}</h3>
@@ -46,12 +53,23 @@ const naechsteTermine = computed(() => {
const kommende = termine.value
.filter(t => {
const terminDatum = new Date(t.datum)
// Datum + optionale Uhrzeit kombinieren
let terminDatum
if (t.uhrzeit && /^\d{2}:\d{2}$/.test(t.uhrzeit)) {
const iso = `${t.datum}T${t.uhrzeit}:00`
terminDatum = new Date(iso)
} else {
terminDatum = new Date(t.datum)
}
const istKommend = terminDatum >= heute
console.log(`Termin ${t.titel} (${t.datum}): ${istKommend ? 'KOMMEND' : 'VERSTRICHEN'}`)
return istKommend
})
.sort((a, b) => new Date(a.datum) - new Date(b.datum))
.sort((a, b) => {
const da = new Date(`${a.datum}${a.uhrzeit ? 'T' + a.uhrzeit + ':00' : ''}`)
const db = new Date(`${b.datum}${b.uhrzeit ? 'T' + b.uhrzeit + ':00' : ''}`)
return da - db
})
console.log('Kommende Termine:', kommende)
return kommende
@@ -68,6 +86,16 @@ const formatMonth = (dateString) => {
return monate[date.getMonth()]
}
const formatOnlyTime = (uhrzeit) => {
if (!uhrzeit) return ''
return /^\d{2}:\d{2}$/.test(uhrzeit) ? uhrzeit : ''
}
const formatYear = (dateString) => {
const date = new Date(dateString)
return date.getFullYear()
}
const loadTermine = async () => {
try {
const response = await $fetch('/api/termine')