Dienstplan funktionierend in index test eingefügt mit verbesserung des styles

dienstplan/dienstplan.csv

@@ -1,4 +1,9 @@
 datum,tag,zeit,ort,art,beschreibung
-2026-01-02,Fr,19:00,Stadt Wehlen,Theorie,Arbeitsschutz
+2026-03-23,Mo,19:00,SW/Pö,Gemeinsamer Dienst,Atemschutznotfalltraining
-2026-01-10,Sa,16:30,SW/Pö,Fest,Weihnachtsbaumverbrennen
+2026-04-06,Mo,19:00,Stadt Wehlen,Praxis,Leitern und Knoten
-2026-01-12,Mo,19:00,SW/Pö,Gemeinsamer Dienst,Maschinisten-Dienst
+2026-04-20,Mo,19:00,SW/Pö,Gemeinsamer Dienst,Fahrzeugkunde & Beladung
+2026-04-30,Do,18:00,Stadt Wehlen,Fest,Absicherung Maifeuer
+2026-05-04,Mo,19:00,Stadt Wehlen,Ausbildung,Gefahren an der Einsatzstelle
+2026-05-18,Mo,19:00,SW/Pö,Gemeinsamer Dienst,Löschangriff nass
+2026-11-11,Mi,17:00,Stadt Wehlen,Fest,Absicherung Martinsumzug
+2026-12-14,Mo,18:30,SW/Pö,Feier,Weihnachtsfeier

dienstplan/dienstplan.js

@@ -1,48 +1,46 @@
-fetch("dienstplan/dienstplan.csv")
+const csvPfad = "dienstplan/dienstplan.csv";
+
+fetch(csvPfad)
   .then(res => res.text())
   .then(text => {
-    const lines = text.trim().split("\n").slice(1);
+    const today = new Date().setHours(0, 0, 0, 0);
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
 
-    const dienste = lines
+    const termine = text.trim().split(/\r?\n/).slice(1).map(line => {
-      .map(line => {
+      const [d, tag, zeit, ort, art, beschr] = line.split(line.includes(";") ? ";" : ",");
-        const [datum, tag, zeit, ort, art, beschreibung] = line.split(",");
+      const [y, m, day] = d.trim().split("-");
-        return {
+      return { 
-          datum: new Date(datum),
+        datum: new Date(y, m - 1, day), 
-          tag,
+        tag: tag.trim(), 
-          zeit,
+        zeit: zeit.trim(), 
-          ort,
+        ort: ort.trim(), 
-          art,
+        art: art.trim(), 
-          beschreibung
+        beschr: beschr.trim() 
-        };
+      };
-      })
+    })
-      .filter(d => d.datum >= today)
+    .filter(t => t.datum >= today)
-      .sort((a, b) => a.datum - b.datum);
+    .sort((a, b) => a.datum - b.datum);
 
-    const box = document.getElementById("nextDienst");
+    const render = (id, filterFn) => {
+      const el = document.getElementById(id);
+      if (!el) return;
+      const t = termine.find(filterFn);
 
-    if (!dienste.length) {
+      if (t) {
-      box.innerHTML = "<p>Kein weiterer Dienst geplant.</p>";
+        // Formatiert das Datum zu "23.03.2026"
-      return;
+        const dFormat = t.datum.toLocaleDateString("de-DE");
-    }
         
-    const d = dienste[0];
+        el.innerHTML = `
+          <p class="mb-3"><strong>${dFormat} | ${t.zeit} Uhr</strong></p>
+          <p class="mb-1"><strong>${t.art}</strong></p>
+          <p class="small text-secondary mb-0">${t.beschr} (${t.ort})</p>
+        `;
+      } else {
+        el.innerHTML = "<p class='small text-muted'>Keine weiteren Termine geplant</p>";
+      }
+    };
+
+    render("nextDienst", t => !/fest|feier/i.test(t.art));
+    render("nextEvent", t => /fest|feier/i.test(t.art));
 
-    box.innerHTML = `
-      <p>
-        <strong>${d.datum.toLocaleDateString("de-DE")}</strong><br>
-        ${d.tag}, ${d.zeit} Uhr
-      </p>
-      <p>
-        <strong>${d.art}</strong><br>
-        ${d.beschreibung}<br>
-        <small class="text-muted">${d.ort}</small>
-      </p>
-    `;
   })
-  .catch(err => {
+  .catch(err => console.error("Fehler beim Laden:", err));
-    document.getElementById("nextDienst").innerHTML =
-      "<p class='text-danger'>Dienstplan konnte nicht geladen werden.</p>";
-    console.error(err);
-  });

index_test.html

@@ -89,25 +89,21 @@
 
       <div class="col-lg-3 col-md-4 order-2 order-lg-1">
         <div class="sticky-sidebar">
+          
           <div class="info-box">
             <h3 class="h5 fw-bold text-danger">Nächster Dienst</h3>
             <div id="nextDienst">
-              <p class="mb-1"><strong>2.1.2026</strong></p>
+              <p class="small text-muted">Lade nächsten Dienst...</p>
-              <p class="mb-3 text-muted">Fr, 18:00 Uhr</p>
-              <p class="mb-0"><strong>Theorie</strong></p>
-              <p class="small text-secondary">Arbeitsschutz</p>
             </div>
           </div>
 
           <div class="info-box">
             <h3 class="h5 fw-bold text-danger">Veranstaltung</h3>
-            <p class="mb-0">
+            <div id="nextEvent">
-              <strong>Sonnenwendfeier</strong><br>
+              <p class="small text-muted">Lade nächste Veranstaltung...</p>
-              Datum: Sa, 21.06.<br>
+            </div>
-              Beginn: ab 11:00 Uhr<br>
-              Wo: Elbwiesen
-            </p>
           </div>
+
         </div>
       </div>