110 lines
3.5 KiB
Vue
110 lines
3.5 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="naechsteTermine.length > 0" class="space-y-2 mb-6">
|
|
<div
|
|
v-for="(termin, index) in naechsteTermine"
|
|
:key="index"
|
|
class="bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-colors"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-3">
|
|
<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>
|
|
<p class="text-sm text-gray-600">{{ termin.beschreibung }}</p>
|
|
</div>
|
|
</div>
|
|
<span :class="[
|
|
'px-2 py-1 text-xs font-medium rounded-full',
|
|
termin.kategorie === 'Turnier' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800'
|
|
]">
|
|
{{ termin.kategorie }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="text-center py-8 bg-gray-50 rounded-lg">
|
|
<Calendar :size="32" class="text-gray-400 mx-auto mb-2" />
|
|
<p class="text-gray-600 text-sm">Keine kommenden Termine</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { Calendar } from 'lucide-vue-next'
|
|
|
|
const termine = ref([])
|
|
|
|
const naechsteTermine = computed(() => {
|
|
const heute = new Date()
|
|
|
|
const kommende = termine.value
|
|
.filter(t => {
|
|
// 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)
|
|
}
|
|
return terminDatum >= heute
|
|
})
|
|
.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
|
|
})
|
|
|
|
return kommende
|
|
})
|
|
|
|
const formatDay = (dateString) => {
|
|
const date = new Date(dateString)
|
|
return date.getDate()
|
|
}
|
|
|
|
const formatMonth = (dateString) => {
|
|
const date = new Date(dateString)
|
|
const monate = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
|
|
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')
|
|
termine.value = response.termine || []
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Termine:', error)
|
|
termine.value = []
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadTermine()
|
|
})
|
|
</script>
|
|
|