Feature: Termine-Anzeige auf der Startseite

- Neue CSV-Datei backend/data/termine.csv für Termine-Speicherung
- Backend-Controller und Router für /api/termine Endpoint
- TermineWidget Component zur Anzeige von bevorstehenden Terminen
- Integration in LoggedInView (Startseite für eingeloggte User)
- Zeigt Datum, Titel, Beschreibung, Ort und Uhrzeit an
- Sortiert nach Datum, filtert automatisch vergangene Termine

backend/app.js

@@ -16,6 +16,7 @@ import match3Router from './routers/match3Router.js';
 import taxiRouter from './routers/taxiRouter.js';
 import taxiMapRouter from './routers/taxiMapRouter.js';
 import taxiHighscoreRouter from './routers/taxiHighscoreRouter.js';
+import termineRouter from './routers/termineRouter.js';
 import cors from 'cors';
 import './jobs/sessionCleanup.js';
 
@@ -52,6 +53,7 @@ app.use('/api/forum', forumRouter);
 app.use('/api/falukant', falukantRouter);
 app.use('/api/friendships', friendshipRouter);
 app.use('/api/blog', blogRouter);
+app.use('/api/termine', termineRouter);
 
 // Serve frontend SPA for non-API routes to support history mode clean URLs
 const frontendDir = path.join(__dirname, '../frontend');

backend/controllers/termineController.js

@@ -0,0 +1,43 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+class TermineController {
+    async getTermine(req, res) {
+        try {
+            const csvPath = path.join(__dirname, '../data/termine.csv');
+            const csvContent = fs.readFileSync(csvPath, 'utf-8');
+            
+            const lines = csvContent.trim().split('\n');
+            const headers = lines[0].split(',');
+            
+            const termine = lines.slice(1).map(line => {
+                const values = line.split(',');
+                const termin = {};
+                headers.forEach((header, index) => {
+                    termin[header] = values[index] || '';
+                });
+                return termin;
+            });
+            
+            // Sortiere nach Datum
+            termine.sort((a, b) => new Date(a.datum) - new Date(b.datum));
+            
+            // Filtere nur zukünftige Termine
+            const heute = new Date();
+            heute.setHours(0, 0, 0, 0);
+            const zukuenftigeTermine = termine.filter(t => new Date(t.datum) >= heute);
+            
+            res.status(200).json(zukuenftigeTermine);
+        } catch (error) {
+            console.error('Error reading termine.csv:', error);
+            res.status(500).json({ error: 'Could not load termine' });
+        }
+    }
+}
+
+export default new TermineController();
+

backend/data/termine.csv

@@ -0,0 +1,7 @@
+datum,titel,beschreibung,ort,uhrzeit
+2025-10-07,Vereinsmeisterschaften 2025 Doppel,Die Vereinsmeisterschaften 2025 im Doppel finden im Rahmen des Erwachsenentrainings statt.,,,
+2026-01-17,Vereinsmeisterschaften 2025 Einzel,Die Vereinsmeisterschaften 2025 im Einzel finden in der Schulturnhalle statt. Bitte vormerken!,,10:00
+2025-12-18,Weihnachtsfeier 2025,Die Weihnachtsfeier 2025 findet im Gasthaus „Zum Einhorn" in FFM-Bonames statt. Beginn 19:00 Uhr (bitte vormerken),Gasthaus „Zum Einhorn" FFM-Bonames,19:00
+2025-09-14,VR-Cup,Zwei VR-Cups am 14.09.2025 (jeweils 12 und 16 Uhr),,12:00 und 16:00
+2025-10-19,VR-Cup,Zwei VR-Cups am 19.10.2025 (jeweils 12 und 16 Uhr),,12:00 und 16:00
+

backend/routers/termineRouter.js

@@ -0,0 +1,9 @@
+import express from 'express';
+import termineController from '../controllers/termineController.js';
+
+const router = express.Router();
+
+router.get('/', termineController.getTermine);
+
+export default router;
+

frontend/src/components/TermineWidget.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="termine-widget">
+    <h2>📅 Termine</h2>
+    <div v-if="loading" class="loading">Lade Termine...</div>
+    <div v-else-if="error" class="error">{{ error }}</div>
+    <div v-else-if="termine.length === 0" class="no-termine">
+      Keine bevorstehenden Termine
+    </div>
+    <div v-else class="termine-list">
+      <div v-for="termin in termine" :key="termin.datum + termin.titel" class="termin-item">
+        <div class="termin-datum">
+          {{ formatDatum(termin.datum) }}
+        </div>
+        <div class="termin-details">
+          <h3>{{ termin.titel }}</h3>
+          <p>{{ termin.beschreibung }}</p>
+          <div v-if="termin.ort" class="termin-ort">
+            📍 {{ termin.ort }}
+          </div>
+          <div v-if="termin.uhrzeit" class="termin-uhrzeit">
+            🕒 {{ termin.uhrzeit }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import apiClient from '@/utils/axios.js';
+
+export default {
+  name: 'TermineWidget',
+  data() {
+    return {
+      termine: [],
+      loading: true,
+      error: null
+    };
+  },
+  async mounted() {
+    await this.loadTermine();
+  },
+  methods: {
+    async loadTermine() {
+      try {
+        this.loading = true;
+        this.error = null;
+        const response = await apiClient.get('/api/termine');
+        this.termine = response.data;
+      } catch (error) {
+        console.error('Error loading termine:', error);
+        this.error = 'Termine konnten nicht geladen werden';
+      } finally {
+        this.loading = false;
+      }
+    },
+    formatDatum(dateStr) {
+      if (!dateStr) return '';
+      const date = new Date(dateStr);
+      const options = { 
+        weekday: 'long', 
+        year: 'numeric', 
+        month: 'long', 
+        day: 'numeric' 
+      };
+      return date.toLocaleDateString('de-DE', options);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.termine-widget {
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  padding: 20px;
+  margin: 20px 0;
+}
+
+.termine-widget h2 {
+  margin: 0 0 15px 0;
+  color: #333;
+  font-size: 1.5em;
+}
+
+.loading,
+.error,
+.no-termine {
+  text-align: center;
+  padding: 20px;
+  color: #666;
+}
+
+.error {
+  color: #dc3545;
+}
+
+.termine-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.termin-item {
+  display: flex;
+  gap: 15px;
+  background: white;
+  border-left: 4px solid #007bff;
+  padding: 15px;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.termin-datum {
+  flex-shrink: 0;
+  text-align: center;
+  padding: 10px;
+  background: #007bff;
+  color: white;
+  border-radius: 4px;
+  min-width: 120px;
+  font-weight: bold;
+  font-size: 0.9em;
+}
+
+.termin-details {
+  flex: 1;
+}
+
+.termin-details h3 {
+  margin: 0 0 8px 0;
+  color: #333;
+  font-size: 1.1em;
+}
+
+.termin-details p {
+  margin: 0 0 8px 0;
+  color: #666;
+  line-height: 1.5;
+}
+
+.termin-ort,
+.termin-uhrzeit {
+  font-size: 0.9em;
+  color: #666;
+  margin-top: 5px;
+}
+</style>
+

frontend/src/views/home/LoggedInView.vue

@@ -1,17 +1,25 @@
 <template>
-    <div>
+    <div class="home-logged-in">
-        <h1>Welcome to Home (Logged In)</h1>
+        <h1>Willkommen zurück!</h1>
-        <p>Here are your exclusive features.</p>
+        <p>Schön, dass du wieder da bist.</p>
-        <button @click="handleLogout">Logout</button>
+        
+        <TermineWidget />
+        
+        <div class="actions">
+            <button @click="handleLogout" class="logout-btn">Logout</button>
+        </div>
     </div>
 </template>
 
 <script>
 import { mapActions } from 'vuex';
-
+import TermineWidget from '@/components/TermineWidget.vue';
 
 export default {
     name: 'HomeLoggedInView',
+    components: {
+        TermineWidget
+    },
     methods: {
         ...mapActions(['logout']),
         handleLogout() {
@@ -22,4 +30,38 @@ export default {
 </script>
 
 <style scoped>
+.home-logged-in {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.home-logged-in h1 {
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.home-logged-in p {
+    color: #666;
+    margin-bottom: 20px;
+}
+
+.actions {
+    margin-top: 30px;
+    text-align: center;
+}
+
+.logout-btn {
+    background: #dc3545;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+}
+
+.logout-btn:hover {
+    background: #c82333;
+}
 </style>