| Nächste Überarbeitung | Vorhergehende Überarbeitung |
| fortbildungsplattform:start [01/06/2026 19:47] – angelegt TillNiels.Gades@bbz-rd-eck.de | fortbildungsplattform:start [01/06/2026 20:16] (aktuell) – TillNiels.Gades@bbz-rd-eck.de |
|---|
| </div> | </div> |
| </html> | </html> |
| |
| <script> | |
| (function () { | |
| const listeEl = document.getElementById('fb-liste'); | |
| const sucheEl = document.getElementById('fb-suche'); | |
| const katEl = document.getElementById('fb-kategorie'); | |
| const sortEl = document.getElementById('fb-sort'); | |
| const resetEl = document.getElementById('fb-reset'); | |
| const source = listeEl.getAttribute('data-fb-source'); | |
| |
| let alleFortbildungen = []; | |
| |
| function escapeHtml(s) { | |
| if (s == null) return ''; | |
| return String(s) | |
| .replace(/&/g, '&') | |
| .replace(/</g, '<') | |
| .replace(/>/g, '>') | |
| .replace(/"/g, '"') | |
| .replace(/'/g, '''); | |
| } | |
| |
| function formatDatum(iso) { | |
| if (!iso) return ''; | |
| const d = new Date(iso); | |
| if (isNaN(d.getTime())) return iso; | |
| return d.toLocaleDateString('de-DE', { weekday: 'short', year: 'numeric', month: 'long', day: '2-digit' }); | |
| } | |
| |
| function render() { | |
| const suche = (sucheEl.value || '').toLowerCase().trim(); | |
| const kat = katEl.value; | |
| let liste = alleFortbildungen.filter(fb => { | |
| if (kat && fb.kategorie !== kat) return false; | |
| if (suche) { | |
| const hay = (fb.titel + ' ' + (fb.beschreibung || '') + ' ' + (fb.referent || '')).toLowerCase(); | |
| if (!hay.includes(suche)) return false; | |
| } | |
| return true; | |
| }); | |
| |
| const sortKey = sortEl.value; | |
| liste.sort((a, b) => { | |
| if (sortKey === 'titel_asc') return (a.titel || '').localeCompare(b.titel || '', 'de'); | |
| if (sortKey === 'plaetze_desc') return (b.freie_plaetze | 0) - (a.freie_plaetze | 0); | |
| if (sortKey === 'datum_desc') return (b.datum || '').localeCompare(a.datum || ''); | |
| return (a.datum || '').localeCompare(b.datum || ''); | |
| }); | |
| |
| if (liste.length === 0) { | |
| listeEl.innerHTML = '<div style="background: #fff9e6; border-left: 5px solid #ffc107; padding: 1.25rem; border-radius: 6px;"><strong>Keine Fortbildungen gefunden.</strong><br>Versuchen Sie eine andere Suche oder schauen Sie später wieder vorbei.</div>'; | |
| return; | |
| } | |
| |
| const html = liste.map(fb => { | |
| const ausgebucht = (fb.freie_plaetze | 0) <= 0; | |
| const statusFarbe = ausgebucht ? '#E42927' : '#28a745'; | |
| const statusText = ausgebucht ? 'Ausgebucht' : (fb.freie_plaetze | 0) + ' Plätze frei'; | |
| const anmeldeLink = ausgebucht | |
| ? '<span style="background: #adb5bd; color: white; padding: 0.5rem 1rem; border-radius: 6px; display: inline-block; font-size: 0.9rem;">Nicht verfügbar</span>' | |
| : '<a class="fb-anmelden" data-id="' + escapeHtml(fb.id) + '" href="/doku.php?id=fortbildungsplattform:anmeldung_fortbildung&fortbildung_id=' + encodeURIComponent(fb.id) + '" style="background: #3974B9; color: white !important; padding: 0.5rem 1.1rem; border-radius: 6px; text-decoration: none !important; font-weight: 600; display: inline-block;">Jetzt anmelden →</a>'; | |
| |
| return '' | |
| + '<div class="fb-card" style="background: white; border: 2px solid #e9ecef; border-radius: 12px; padding: 1.25rem 1.5rem; margin: 1rem 0; transition: all 0.25s ease; border-left: 6px solid #3974B9;" onmouseover="this.style.borderLeftColor=\'#E42927\'; this.style.boxShadow=\'0 6px 18px rgba(57,116,185,0.12)\';" onmouseout="this.style.borderLeftColor=\'#3974B9\'; this.style.boxShadow=\'none\';">' | |
| + '<div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 1rem;">' | |
| + '<div style="flex: 1 1 360px;">' | |
| + '<div style="margin-bottom: 0.4rem;"><span style="background: #e8f1fa; color: #3974B9; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600;">' + escapeHtml(fb.kategorie || 'Allgemein') + '</span></div>' | |
| + '<h3 style="margin: 0.25rem 0 0.5rem !important; border: none !important; padding: 0 !important; color: #2c3e50 !important; font-size: 1.35rem !important;">' + escapeHtml(fb.titel) + '</h3>' | |
| + '<div style="color: #6c757d; font-size: 0.95rem; line-height: 1.5;">' | |
| + '<div>📅 <strong>' + escapeHtml(formatDatum(fb.datum)) + '</strong>' | |
| + (fb.uhrzeit ? ' · 🕒 ' + escapeHtml(fb.uhrzeit) + ' Uhr' : '') | |
| + (fb.ort ? ' · 📍 ' + escapeHtml(fb.ort) : '') | |
| + '</div>' | |
| + (fb.referent ? '<div>👤 ' + escapeHtml(fb.referent) + '</div>' : '') | |
| + (fb.dauer ? '<div>⏱ ' + escapeHtml(fb.dauer) + '</div>' : '') | |
| + '</div>' | |
| + '</div>' | |
| + '<div style="text-align: right; min-width: 160px;">' | |
| + '<div style="background: ' + statusFarbe + '; color: white; padding: 0.35rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; display: inline-block; margin-bottom: 0.75rem;">' + statusText + '</div><br>' | |
| + anmeldeLink | |
| + '</div>' | |
| + '</div>' | |
| + '</div>'; | |
| }).join(''); | |
| |
| listeEl.innerHTML = html; | |
| } | |
| |
| function fuelleKategorien() { | |
| const kats = Array.from(new Set(alleFortbildungen.map(fb => fb.kategorie).filter(Boolean))).sort((a, b) => a.localeCompare(b, 'de')); | |
| katEl.innerHTML = '<option value="">Alle</option>' + kats.map(k => '<option value="' + escapeHtml(k) + '">' + escapeHtml(k) + '</option>').join(''); | |
| } | |
| |
| fetch(source, { headers: { 'Accept': 'application/json' } }) | |
| .then(r => r.json()) | |
| .then(data => { | |
| alleFortbildungen = Array.isArray(data) ? data : []; | |
| fuelleKategorien(); | |
| render(); | |
| }) | |
| .catch(err => { | |
| listeEl.innerHTML = '<div style="background: #fdeaea; border-left: 5px solid #E42927; padding: 1.25rem; border-radius: 6px;">⚠️ Fortbildungen konnten nicht geladen werden. Bitte versuchen Sie es später erneut.</div>'; | |
| console.error('Fortbildung-Load-Fehler:', err); | |
| }); | |
| |
| [sucheEl, katEl, sortEl].forEach(el => el.addEventListener('input', render)); | |
| resetEl.addEventListener('click', function () { | |
| sucheEl.value = ''; | |
| katEl.value = ''; | |
| sortEl.value = 'datum_asc'; | |
| render(); | |
| }); | |
| })(); | |
| </script> | |
| |
| ===== Eigene Fortbildung erstellen ===== | ===== Eigene Fortbildung erstellen ===== |
| fieldset "Grunddaten" | fieldset "Grunddaten" |
| |
| textbox "Titel" "Kurzbezeichnung der Fortbildung" | textbox "Titel" "=Kurzbezeichnung der Fortbildung" |
| textarea "Beschreibung" "Inhalte, Lernziele, Zielgruppe" | textarea "Beschreibung" "=Inhalte, Lernziele, Zielgruppe" |
| select "Kategorie" " | | select "Kategorie" " | |
| Pädagogik / Didaktik | | Pädagogik / Didaktik | |
| |
| date "Datum" | date "Datum" |
| textbox "Uhrzeit" "z.B. 14:00 – 17:00 Uhr" | textbox "Uhrzeit" "=z.B. 14:00 – 17:00 Uhr" |
| textbox "Dauer" "z.B. 3 Zeitstunden, 4 Unterrichtseinheiten" | textbox "Dauer" "=z.B. 3 Zeitstunden, 4 Unterrichtseinheiten" |
| textbox "Ort" "z.B. Raum A204, BBZ Rendsburg" | textbox "Ort" "=z.B. Raum A204, BBZ Rendsburg" |
| textbox "Referent / Referentin" | textbox "Referent / Referentin" |
| |
| fieldset "Kapazität & Anmeldung" | fieldset "Kapazität & Anmeldung" |
| |
| number "Maximale Teilnehmerzahl" "20" | number "Maximale Teilnehmerzahl" "=20" |
| textbox "Anmeldeschluss" "z.B. 7 Tage vor Beginn" | textbox "Anmeldeschluss" "=z.B. 7 Tage vor Beginn" |
| select "Sichtbarkeit" " | | select "Sichtbarkeit" " | |
| Öffentlich (alle Lehrkräfte) | | Öffentlich (alle Lehrkräfte) | |
| Nur intern (Login erforderlich)" | Nur intern (Login erforderlich)" |
| |
| textarea "Zusätzliche Hinweise" "z.B. Material mitbringen, Voraussetzungen, Catering" | textarea "Zusätzliche Hinweise" "=z.B. Material mitbringen, Voraussetzungen, Catering" |
| |
| submit "Fortbildung veröffentlichen" | submit "Fortbildung veröffentlichen" |