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.

2025-11-05 10:36:58 +01:00
parent 21044c6c34
commit 36400304a4
16 changed files with 913 additions and 292 deletions
--- a/components/Hero.vue
+++ b/components/Hero.vue
@@ -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>
--- a/components/TermineVorschau.vue
+++ b/components/TermineVorschau.vue
@@ -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')
--- a/pages/cms/einstellungen.vue
+++ b/pages/cms/einstellungen.vue
@@ -536,23 +536,43 @@ const saveConfig = async () => {
    })

    successMessage.value = 'Konfiguration erfolgreich gespeichert!'
+    try { window.showSuccessModal && window.showSuccessModal('Erfolg', 'Konfiguration erfolgreich gespeichert!') } catch (e) {}
    setTimeout(() => {
      successMessage.value = ''
    }, 3000)
  } catch (error) {
    errorMessage.value = error.data?.message || 'Fehler beim Speichern der Konfiguration.'
+    try { window.showErrorModal && window.showErrorModal('Fehler', errorMessage.value) } catch (e) {}
  } finally {
    isSaving.value = false
  }
 }

 const addTrainingTime = () => {
+  // Finde die höchste vorhandene Gruppennummer
+  let maxGruppeNummer = 0
+  config.value.training.zeiten.forEach(zeit => {
+    if (zeit.gruppe) {
+      // Prüfe, ob das gruppe-Feld eine Nummer enthält (z.B. "Gruppe 1", "1", "Gruppe 3")
+      const match = zeit.gruppe.match(/(\d+)/)
+      if (match) {
+        const nummer = parseInt(match[1], 10)
+        if (nummer > maxGruppeNummer) {
+          maxGruppeNummer = nummer
+        }
+      }
+    }
+  })
+  
+  // Setze die nächste Gruppennummer
+  const naechsteGruppeNummer = maxGruppeNummer + 1
+  
  config.value.training.zeiten.push({
    id: Date.now().toString(),
    tag: 'Montag',
    von: '19:00',
    bis: '22:00',
-    gruppe: ''
+    gruppe: `Gruppe ${naechsteGruppeNummer}`
  })
 }

--- a/pages/cms/geschichte.vue
+++ b/pages/cms/geschichte.vue
@@ -87,7 +87,12 @@ async function save() {
  const html = editor.value?.innerHTML || ''
  const current = await $fetch('/api/config')
  const updated = { ...current, seiten: { ...(current.seiten || {}), geschichte: html } }
+  try {
    await $fetch('/api/config', { method: 'PUT', body: updated })
+    try { window.showSuccessModal && window.showSuccessModal('Erfolg', 'Inhalt erfolgreich gespeichert!') } catch (e) {}
+  } catch (error) {
+    try { window.showErrorModal && window.showErrorModal('Fehler', error?.data?.message || 'Speichern fehlgeschlagen') } catch (e) {}
+  }
 }

 function format(cmd) {
--- a/pages/cms/termine.vue
+++ b/pages/cms/termine.vue
@@ -29,6 +29,7 @@
            <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">Uhrzeit</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>
@@ -36,10 +37,13 @@
              </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">
+              <tr v-for="termin in termine" :key="`${termin.datum}-${termin.uhrzeit || ''}-${termin.titel}`" 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 whitespace-nowrap text-sm text-gray-900">
+                  {{ termin.uhrzeit || '-' }}
+                </td>
                <td class="px-4 py-3 text-sm font-medium text-gray-900">
                  {{ termin.titel }}
                </td>
@@ -60,7 +64,14 @@
                    {{ termin.kategorie }}
                  </span>
                </td>
-                <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
+                <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium space-x-3">
+                  <button
+                    @click="openEditModal(termin)"
+                    class="text-gray-600 hover:text-gray-900"
+                    title="Bearbeiten"
+                  >
+                    <Pencil :size="18" />
+                  </button>
                  <button
                    @click="confirmDelete(termin)"
                    class="text-red-600 hover:text-red-900"
@@ -87,11 +98,11 @@
      >
        <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
+            {{ isEditing ? 'Termin bearbeiten' : 'Termin hinzufügen' }}
          </h2>

          <form @submit.prevent="saveTermin" class="space-y-4">
-            <div class="grid grid-cols-2 gap-4">
+            <div class="grid grid-cols-3 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Datum *</label>
                <input
@@ -102,6 +113,15 @@
                  :disabled="isSaving"
                />
              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">Uhrzeit</label>
+                <input
+                  v-model="formData.uhrzeit"
+                  type="time"
+                  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>
@@ -173,7 +193,7 @@

 <script setup>
 import { ref, onMounted } from 'vue'
-import { Calendar, Plus, Trash2, Loader2, AlertCircle } from 'lucide-vue-next'
+import { Calendar, Plus, Trash2, Loader2, AlertCircle, Pencil } from 'lucide-vue-next'

 const authStore = useAuthStore()

@@ -182,6 +202,8 @@ const isSaving = ref(false)
 const termine = ref([])
 const showModal = ref(false)
 const errorMessage = ref('')
+const isEditing = ref(false)
+const originalTermin = ref(null)

 const formData = ref({
  datum: '',
@@ -207,15 +229,20 @@ const openAddModal = () => {
    datum: '',
    titel: '',
    beschreibung: '',
-    kategorie: 'Sonstiges'
+  kategorie: 'Sonstiges',
+  uhrzeit: ''
  }
  showModal.value = true
  errorMessage.value = ''
+  isEditing.value = false
+  originalTermin.value = null
 }

 const closeModal = () => {
  showModal.value = false
  errorMessage.value = ''
+  isEditing.value = false
+  originalTermin.value = null
 }

 const saveTermin = async () => {
@@ -223,6 +250,17 @@ const saveTermin = async () => {
  errorMessage.value = ''

  try {
+    if (isEditing.value && originalTermin.value) {
+      const params = new URLSearchParams({
+        datum: originalTermin.value.datum,
+        uhrzeit: originalTermin.value.uhrzeit || '',
+        titel: originalTermin.value.titel,
+        beschreibung: originalTermin.value.beschreibung || '',
+        kategorie: originalTermin.value.kategorie || 'Sonstiges'
+      })
+      await $fetch(`/api/termine-manage?${params.toString()}`, { method: 'DELETE' })
+    }
+
    await $fetch('/api/termine-manage', {
      method: 'POST',
      body: formData.value
@@ -237,11 +275,26 @@ const saveTermin = async () => {
  }
 }

+const openEditModal = (termin) => {
+  formData.value = {
+    datum: termin.datum || '',
+    uhrzeit: termin.uhrzeit || '',
+    titel: termin.titel || '',
+    beschreibung: termin.beschreibung || '',
+    kategorie: termin.kategorie || 'Sonstiges'
+  }
+  originalTermin.value = { ...termin }
+  isEditing.value = true
+  showModal.value = true
+  errorMessage.value = ''
+}
+
 const confirmDelete = async (termin) => {
  window.showConfirmModal('Termin löschen', `Möchten Sie den Termin "${termin.titel}" wirklich löschen?`, async () => {
    try {
      const params = new URLSearchParams({
        datum: termin.datum,
+        uhrzeit: termin.uhrzeit || '',
        titel: termin.titel,
        beschreibung: termin.beschreibung || '',
        kategorie: termin.kategorie || 'Sonstiges'
--- a/pages/cms/tt-regeln.vue
+++ b/pages/cms/tt-regeln.vue
@@ -105,7 +105,12 @@ async function save() {
  const html = editor.value?.innerHTML || ''
  const current = await $fetch('/api/config')
  const updated = { ...current, seiten: { ...(current.seiten || {}), ttRegeln: html } }
+  try {
    await $fetch('/api/config', { method: 'PUT', body: updated })
+    try { window.showSuccessModal && window.showSuccessModal('Erfolg', 'Regeln erfolgreich gespeichert!') } catch (e) {}
+  } catch (error) {
+    try { window.showErrorModal && window.showErrorModal('Fehler', error?.data?.message || 'Speichern fehlgeschlagen') } catch (e) {}
+  }
 }

 function format(cmd) {
--- a/pages/cms/ueber-uns.vue
+++ b/pages/cms/ueber-uns.vue
@@ -67,7 +67,12 @@ async function save() {
  const html = editor.value?.innerHTML || ''
  const current = await $fetch('/api/config')
  const updated = { ...current, seiten: { ...(current.seiten || {}), ueberUns: html } }
+  try {
    await $fetch('/api/config', { method: 'PUT', body: updated })
+    try { window.showSuccessModal && window.showSuccessModal('Erfolg', 'Inhalt erfolgreich gespeichert!') } catch (e) {}
+  } catch (error) {
+    try { window.showErrorModal && window.showErrorModal('Fehler', error?.data?.message || 'Speichern fehlgeschlagen') } catch (e) {}
+  }
 }

 function format(cmd) {
--- a/public/data/termine.csv
+++ b/public/data/termine.csv
@@ -1,2 +1,2 @@
-"datum","titel","beschreibung","kategorie"
-"2025-12-18","Weihnachtsfeier 2025 im Gasthaus Zum Einhorn in Frankfurt - Bonames","","Veranstaltung"
+"datum","uhrzeit","titel","beschreibung","kategorie"
+"2025-12-18","19:00","Weihnachtsfeier 2025 im Gasthaus Zum Einhorn in Frankfurt - Bonames","","Veranstaltung"
--- a/server/api/membership/generate-pdf.post.js
+++ b/server/api/membership/generate-pdf.post.js
--- a/server/api/termine-manage.delete.js
+++ b/server/api/termine-manage.delete.js
@@ -32,7 +32,7 @@ export default defineEventHandler(async (event) => {
    }

    const query = getQuery(event)
-    const { datum, titel, beschreibung, kategorie } = query
+    const { datum, uhrzeit, titel, beschreibung, kategorie } = query

    if (!datum || !titel) {
      throw createError({
@@ -43,6 +43,7 @@ export default defineEventHandler(async (event) => {

    await deleteTermin({
      datum,
+      uhrzeit: uhrzeit || '',
      titel,
      beschreibung: beschreibung || '',
      kategorie: kategorie || 'Sonstiges'
--- a/server/api/termine-manage.post.js
+++ b/server/api/termine-manage.post.js
@@ -32,7 +32,7 @@ export default defineEventHandler(async (event) => {
    }

    const body = await readBody(event)
-    const { datum, titel, beschreibung, kategorie } = body
+    const { datum, uhrzeit, titel, beschreibung, kategorie } = body

    if (!datum || !titel) {
      throw createError({
@@ -43,6 +43,7 @@ export default defineEventHandler(async (event) => {

    await saveTermin({
      datum,
+      uhrzeit: uhrzeit || '',
      titel,
      beschreibung: beschreibung || '',
      kategorie: kategorie || 'Sonstiges'
--- a/server/api/termine.get.js
+++ b/server/api/termine.get.js
@@ -43,9 +43,10 @@ export default defineEventHandler(async (event) => {
      if (values.length >= 4) {
        termine.push({
          datum: values[0],
-          titel: values[1],
-          beschreibung: values[2],
-          kategorie: values[3]
+          uhrzeit: values[1] || '',
+          titel: values[2] || '',
+          beschreibung: values[3] || '',
+          kategorie: values[4] || 'Sonstiges'
        })
      }
    }
--- a/server/data/config.json
+++ b/server/data/config.json
@@ -98,7 +98,7 @@
      "strasse": "Reginastr. 46",
      "plz": "60437",
      "ort": "Frankfurt",
-      "telefon": "069 509637",
+      "telefon": "06101 122",
      "email": "j.dichmann@gmx.de"
    },
    "stellvertreter": {
--- a/server/data/sessions.json
+++ b/server/data/sessions.json
@@ -110,5 +110,12 @@
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEiLCJlbWFpbCI6ImFkbWluQGhhcmhlaW1lcnRjLmRlIiwicm9sZSI6ImFkbWluIiwiaWF0IjoxNzYxMjI1NDI3LCJleHAiOjE3NjE4MzAyMjd9.MANlBkbOU95y-6yd51m0-hoa941A0uHutVwzl481k9I",
    "createdAt": "2025-10-23T13:17:07.206Z",
    "expiresAt": "2025-10-30T13:17:07.206Z"
+  },
+  {
+    "id": "1762333423617",
+    "userId": "1",
+    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEiLCJlbWFpbCI6ImFkbWluQGhhcmhlaW1lcnRjLmRlIiwicm9sZSI6ImFkbWluIiwiaWF0IjoxNzYyMzMzNDIzLCJleHAiOjE3NjI5MzgyMjN9.V-L5ethO0VFSOPT2qbsQF2zQYQZSlese1rL5sIFaHbY",
+    "createdAt": "2025-11-05T09:03:43.617Z",
+    "expiresAt": "2025-11-12T09:03:43.617Z"
  }
 ]
--- a/server/data/users.json
+++ b/server/data/users.json
@@ -8,6 +8,6 @@
    "phone": "",
    "active": true,
    "created": "2025-10-21T00:00:00.000Z",
-    "lastLogin": "2025-10-23T13:17:07.206Z"
+    "lastLogin": "2025-11-05T09:03:43.617Z"
  }
 ]
--- a/server/utils/termine.js
+++ b/server/utils/termine.js
@@ -50,9 +50,10 @@ export async function readTermine() {
        termine.push({
          id: randomUUID(), // Generate ID on-the-fly for editing
          datum: values[0],
-          titel: values[1],
-          beschreibung: values[2],
-          kategorie: values[3]
+          uhrzeit: values[1] || '',
+          titel: values[2] || '',
+          beschreibung: values[3] || '',
+          kategorie: values[4] || 'Sonstiges'
        })
      }
    }
@@ -70,21 +71,23 @@ export async function readTermine() {
 // Write array of objects to CSV
 export async function writeTermine(termine) {
  try {
-    let csv = '"datum","titel","beschreibung","kategorie"\n'
+    let csv = '"datum","uhrzeit","titel","beschreibung","kategorie"\n'
    
    for (const termin of termine) {
      const datum = termin.datum || ''
+      const uhrzeit = termin.uhrzeit || ''
      const titel = termin.titel || ''
      const beschreibung = termin.beschreibung || ''
      const kategorie = termin.kategorie || ''
      
      // Escape quotes in values
      const escapedDatum = datum.replace(/"/g, '""')
+      const escapedUhrzeit = uhrzeit.replace(/"/g, '""')
      const escapedTitel = titel.replace(/"/g, '""')
      const escapedBeschreibung = beschreibung.replace(/"/g, '""')
      const escapedKategorie = kategorie.replace(/"/g, '""')
      
-      csv += `"${escapedDatum}","${escapedTitel}","${escapedBeschreibung}","${escapedKategorie}"\n`
+      csv += `"${escapedDatum}","${escapedUhrzeit}","${escapedTitel}","${escapedBeschreibung}","${escapedKategorie}"\n`
    }
    
    await fs.writeFile(TERMINE_FILE, csv, 'utf-8')
@@ -102,6 +105,7 @@ export async function saveTermin(terminData) {
  // Always add as new (CSV doesn't have persistent IDs)
  const newTermin = {
    datum: terminData.datum,
+    uhrzeit: terminData.uhrzeit || '',
    titel: terminData.titel,
    beschreibung: terminData.beschreibung || '',
    kategorie: terminData.kategorie || 'Sonstiges'
@@ -122,6 +126,7 @@ export async function deleteTermin(terminData) {
  
  termine = termine.filter(t => 
    !(t.datum === terminData.datum && 
+      (t.uhrzeit || '') === (terminData.uhrzeit || '') &&
      t.titel === terminData.titel &&
      t.beschreibung === terminData.beschreibung &&
      t.kategorie === terminData.kategorie)