506 lines
16 KiB
JavaScript
506 lines
16 KiB
JavaScript
// Hauptanwendung
|
|
class SportAnmeldungApp {
|
|
constructor() {
|
|
this.kurse = [];
|
|
this.betriebe = [];
|
|
this.user = null;
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
this.setupThemeToggle();
|
|
this.setupNavigation();
|
|
this.setupTabs();
|
|
this.setupLoginHandlers();
|
|
this.setupLogoutHandler();
|
|
|
|
await this.checkAuthAndToggleUI();
|
|
|
|
await this.loadInitialData();
|
|
this.setupFormHandlers();
|
|
}
|
|
|
|
setupThemeToggle() {
|
|
const toggle = document.getElementById('theme-toggle');
|
|
const icon = toggle.querySelector('.theme-icon');
|
|
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
icon.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
|
|
toggle.setAttribute('aria-pressed', savedTheme === 'dark' ? 'true' : 'false');
|
|
|
|
toggle.addEventListener('click', () => {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
icon.textContent = newTheme === 'dark' ? '☀️' : '🌙';
|
|
toggle.setAttribute('aria-pressed', newTheme === 'dark' ? 'true' : 'false');
|
|
});
|
|
}
|
|
|
|
setupNavigation() {
|
|
const navButtons = document.querySelectorAll('.nav-btn');
|
|
navButtons.forEach((btn) => {
|
|
btn.addEventListener('click', (e) => {
|
|
const view = e.target.dataset.view;
|
|
this.switchView(view);
|
|
});
|
|
});
|
|
}
|
|
|
|
switchView(viewName) {
|
|
document.querySelectorAll('.view').forEach((v) => v.classList.remove('active'));
|
|
document.querySelectorAll('.nav-btn').forEach((b) => b.classList.remove('active'));
|
|
|
|
const view = document.getElementById(`${viewName}-view`);
|
|
if (view) view.classList.add('active');
|
|
document.querySelector(`[data-view="${viewName}"]`)?.classList.add('active');
|
|
|
|
if (viewName === 'berichte') {
|
|
this.loadBerichte();
|
|
} else if (viewName === 'rechnungen') {
|
|
this.loadRechnungsOptionen();
|
|
}
|
|
}
|
|
|
|
setupTabs() {
|
|
const tabButtons = document.querySelectorAll('.tab-btn');
|
|
tabButtons.forEach((btn) => {
|
|
btn.addEventListener('click', (e) => {
|
|
const tab = e.target.dataset.tab;
|
|
this.switchTab(tab);
|
|
});
|
|
});
|
|
}
|
|
|
|
switchTab(tabName) {
|
|
document.querySelectorAll('.tab-content').forEach((t) => t.classList.remove('active'));
|
|
document.querySelectorAll('.tab-btn').forEach((b) => b.classList.remove('active'));
|
|
|
|
document.getElementById(`${tabName}-tab`).classList.add('active');
|
|
document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
|
|
}
|
|
|
|
async checkAuthAndToggleUI() {
|
|
try {
|
|
const me = await API.me();
|
|
this.user = me.authenticated ? me.user : null;
|
|
|
|
const isAdmin = !!this.user && this.user.role === 'admin';
|
|
document.querySelectorAll('.admin-only').forEach((el) => {
|
|
el.classList.toggle('hidden', !isAdmin);
|
|
});
|
|
|
|
document.getElementById('logout-btn').classList.toggle('hidden', !this.user);
|
|
document.getElementById('login-tab-btn').classList.toggle('hidden', !!this.user);
|
|
|
|
// Wenn aktuell Berichte/Rechnungen aktiv sind, aber nicht admin → auf Anmeldung umschalten
|
|
const activeView = document.querySelector('.view.active')?.id || '';
|
|
if (!isAdmin && (activeView === 'berichte-view' || activeView === 'rechnungen-view')) {
|
|
this.switchView('login');
|
|
}
|
|
} catch (e) {
|
|
this.user = null;
|
|
document.querySelectorAll('.admin-only').forEach((el) => el.classList.add('hidden'));
|
|
document.getElementById('logout-btn').classList.add('hidden');
|
|
document.getElementById('login-tab-btn').classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
async loadInitialData() {
|
|
try {
|
|
this.kurse = await API.getKurse();
|
|
this.betriebe = await API.getBetriebe();
|
|
this.renderKurse();
|
|
this.renderBetriebe();
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Daten:', error);
|
|
alert('Fehler beim Laden der Daten. Bitte überprüfen Sie die API-Verbindung.');
|
|
}
|
|
}
|
|
|
|
renderKurse() {
|
|
const container = document.getElementById('kurse-container');
|
|
container.innerHTML = this.kurse
|
|
.map(
|
|
(kurs) => `
|
|
<div class="kurs-card ${!kurs.verfuegbar ? 'voll' : ''}" data-kurs-id="${kurs.id}" ${
|
|
!kurs.verfuegbar ? 'aria-disabled="true" style="pointer-events:none;opacity:0.6"' : ''
|
|
}>
|
|
<label>
|
|
<input type="checkbox" name="kurse" value="${kurs.id}" ${
|
|
!kurs.verfuegbar ? 'disabled' : ''
|
|
}>
|
|
<strong>${kurs.name}</strong>
|
|
</label>
|
|
<div class="kurs-info">
|
|
<p>${kurs.beschreibung ?? ''}</p>
|
|
<p><strong>Gebühr:</strong> ${kurs.gebuehr}€</p>
|
|
<p><strong>Verfügbar:</strong> ${kurs.freie_plaetze} von ${
|
|
kurs.max_teilnehmer
|
|
} Plätzen</p>
|
|
${
|
|
!kurs.verfuegbar
|
|
? '<p style="color: var(--danger);"><strong>Kurs ist voll!</strong></p>'
|
|
: ''
|
|
}
|
|
</div>
|
|
</div>
|
|
`
|
|
)
|
|
.join('');
|
|
|
|
document.querySelectorAll('.kurs-card').forEach((card) => {
|
|
const checkbox = card.querySelector('input[type="checkbox"]');
|
|
if (checkbox && !checkbox.disabled) {
|
|
card.addEventListener('click', (e) => {
|
|
if (e.target.tagName !== 'INPUT') {
|
|
checkbox.checked = !checkbox.checked;
|
|
card.classList.toggle('selected', checkbox.checked);
|
|
}
|
|
});
|
|
checkbox.addEventListener('change', () => {
|
|
card.classList.toggle('selected', checkbox.checked);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
renderBetriebe() {
|
|
const select = document.getElementById('betrieb');
|
|
const rechnungSelect = document.getElementById('rechnung-betrieb');
|
|
|
|
const options = this.betriebe
|
|
.map((betrieb) => `<option value="${betrieb.id}">${betrieb.name}</option>`)
|
|
.join('');
|
|
|
|
select.innerHTML = '<option value="">Bitte wählen...</option>' + options;
|
|
rechnungSelect.innerHTML = '<option value="">Bitte wählen...</option>' + options;
|
|
}
|
|
|
|
setupFormHandlers() {
|
|
const form = document.getElementById('anmelde-form');
|
|
form.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
this.handleAnmeldung();
|
|
});
|
|
|
|
const rechnungBtn = document.getElementById('rechnung-erstellen');
|
|
rechnungBtn.addEventListener('click', () => {
|
|
this.handleRechnungErstellen();
|
|
});
|
|
|
|
document.getElementById('neu-anmelden')?.addEventListener('click', () => {
|
|
document.getElementById('erfolg-meldung').classList.add('hidden');
|
|
form.reset();
|
|
document.querySelectorAll('.kurs-card').forEach((c) => c.classList.remove('selected'));
|
|
});
|
|
|
|
document.getElementById('zur-uebersicht')?.addEventListener('click', () => {
|
|
this.switchView('berichte');
|
|
});
|
|
}
|
|
|
|
setupLoginHandlers() {
|
|
const form = document.getElementById('login-form');
|
|
if (!form) return;
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const email = document.getElementById('login-email').value.trim();
|
|
const password = document.getElementById('login-password').value;
|
|
const err = document.getElementById('login-error');
|
|
err.textContent = '';
|
|
try {
|
|
await API.login(email, password);
|
|
await this.checkAuthAndToggleUI();
|
|
this.switchView('berichte');
|
|
} catch (ex) {
|
|
err.textContent = ex.message || 'Login fehlgeschlagen';
|
|
}
|
|
});
|
|
}
|
|
|
|
setupLogoutHandler() {
|
|
const btn = document.getElementById('logout-btn');
|
|
btn.addEventListener('click', async () => {
|
|
try {
|
|
await API.logout();
|
|
this.user = null;
|
|
await this.checkAuthAndToggleUI();
|
|
this.switchView('anmeldung');
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
});
|
|
}
|
|
|
|
async handleAnmeldung() {
|
|
const form = document.getElementById('anmelde-form');
|
|
const formData = new FormData(form);
|
|
|
|
const selectedKurse = Array.from(document.querySelectorAll('input[name="kurse"]:checked')).map(
|
|
(cb) => parseInt(cb.value, 10)
|
|
);
|
|
|
|
if (selectedKurse.length === 0) {
|
|
this.showFehler('Bitte wählen Sie mindestens eine Sportart aus.');
|
|
return;
|
|
}
|
|
|
|
const data = {
|
|
vorname: formData.get('vorname'),
|
|
nachname: formData.get('nachname'),
|
|
email: formData.get('email'),
|
|
geburtsdatum: formData.get('geburtsdatum') || null,
|
|
betrieb_id: parseInt(formData.get('betrieb'), 10),
|
|
kurs_ids: selectedKurse,
|
|
};
|
|
|
|
try {
|
|
const response = await API.anmelden(data);
|
|
this.showErfolg(response);
|
|
form.reset();
|
|
document.querySelectorAll('.kurs-card').forEach((c) => c.classList.remove('selected'));
|
|
await this.loadInitialData();
|
|
} catch (error) {
|
|
this.showFehler(error.message);
|
|
}
|
|
}
|
|
|
|
showErfolg(response) {
|
|
const meldung = document.getElementById('erfolg-meldung');
|
|
const text = document.getElementById('erfolg-text');
|
|
text.innerHTML = `
|
|
Vielen Dank für Ihre Anmeldung!<br><br>
|
|
<strong>Angemeldete Kurse:</strong><br>
|
|
${response.angemeldete_kurse.map((k) => `• ${k}`).join('<br>')}
|
|
`;
|
|
meldung.classList.remove('hidden');
|
|
document.getElementById('fehler-meldung').classList.add('hidden');
|
|
meldung.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
setTimeout(() => {
|
|
meldung.classList.add('hidden');
|
|
}, 8000);
|
|
}
|
|
|
|
showFehler(message) {
|
|
const meldung = document.getElementById('fehler-meldung');
|
|
const text = document.getElementById('fehler-text');
|
|
text.textContent = message;
|
|
meldung.classList.remove('hidden');
|
|
document.getElementById('erfolg-meldung').classList.add('hidden');
|
|
meldung.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
}
|
|
|
|
async loadBerichte() {
|
|
await this.loadBerichtBetrieb();
|
|
await this.loadBerichtKurs();
|
|
}
|
|
|
|
async loadBerichtBetrieb() {
|
|
try {
|
|
const bericht = await API.getBerichtBetrieb();
|
|
const container = document.getElementById('betrieb-bericht');
|
|
|
|
container.innerHTML = `
|
|
<table class="bericht-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Betrieb</th>
|
|
<th>Anzahl Schüler</th>
|
|
<th>Anmeldungen</th>
|
|
<th>Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${bericht
|
|
.map(
|
|
(b) => `
|
|
<tr>
|
|
<td>
|
|
<strong>${b.betrieb_name}</strong><br>
|
|
<small>${b.adresse}</small>
|
|
</td>
|
|
<td>${b.anzahl_schueler}</td>
|
|
<td>${b.anzahl_anmeldungen}</td>
|
|
<td>
|
|
${
|
|
b.schueler.length > 0
|
|
? `
|
|
<ul class="detail-liste">
|
|
${b.schueler
|
|
.map((s) => `<li>${s.vorname} ${s.nachname} - ${s.angemeldete_kurse}</li>`)
|
|
.join('')}
|
|
</ul>
|
|
`
|
|
: 'Keine Anmeldungen'
|
|
}
|
|
</td>
|
|
</tr>
|
|
`
|
|
)
|
|
.join('')}
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden des Berichts:', error);
|
|
document.getElementById('betrieb-bericht').innerHTML =
|
|
'<div class="meldung fehler">Fehler beim Laden der Berichte</div>';
|
|
if (error.message.includes('Nicht angemeldet') || error.message.includes('Zugriff')) {
|
|
this.switchView('login');
|
|
}
|
|
}
|
|
}
|
|
|
|
async loadBerichtKurs() {
|
|
try {
|
|
const bericht = await API.getBerichtKurs();
|
|
const container = document.getElementById('kurs-bericht');
|
|
|
|
container.innerHTML = `
|
|
<table class="bericht-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Kurs</th>
|
|
<th>Teilnehmer</th>
|
|
<th>Auslastung</th>
|
|
<th>Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${bericht
|
|
.map(
|
|
(k) => `
|
|
<tr>
|
|
<td><strong>${k.kurs_name}</strong></td>
|
|
<td>${k.anzahl_teilnehmer} / ${k.max_teilnehmer}</td>
|
|
<td>
|
|
<div style="background: var(--border); border-radius: 10px; overflow: hidden;">
|
|
<div style="width: ${k.auslastung_prozent}%; background: var(--primary); padding: 5px; color: white; text-align: center; min-width: 20px;">
|
|
${k.auslastung_prozent}%
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
${
|
|
k.teilnehmer.length > 0
|
|
? `
|
|
<ul class="detail-liste">
|
|
${k.teilnehmer
|
|
.map((t) => `<li>${t.vorname} ${t.nachname} (${t.betrieb_name})</li>`)
|
|
.join('')}
|
|
</ul>
|
|
`
|
|
: 'Keine Anmeldungen'
|
|
}
|
|
</td>
|
|
</tr>
|
|
`
|
|
)
|
|
.join('')}
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden des Berichts:', error);
|
|
document.getElementById('kurs-bericht').innerHTML =
|
|
'<div class="meldung fehler">Fehler beim Laden der Berichte</div>';
|
|
if (error.message.includes('Nicht angemeldet') || error.message.includes('Zugriff')) {
|
|
this.switchView('login');
|
|
}
|
|
}
|
|
}
|
|
|
|
async loadRechnungsOptionen() {
|
|
// Betriebe werden bereits geladen
|
|
}
|
|
|
|
async handleRechnungErstellen() {
|
|
const betriebId = document.getElementById('rechnung-betrieb').value;
|
|
if (!betriebId) {
|
|
alert('Bitte wählen Sie einen Betrieb aus.');
|
|
return;
|
|
}
|
|
try {
|
|
const rechnung = await API.getRechnung(betriebId);
|
|
this.renderRechnung(rechnung);
|
|
} catch (error) {
|
|
console.error('Fehler beim Erstellen der Rechnung:', error);
|
|
alert('Fehler beim Erstellen der Rechnung: ' + error.message);
|
|
if (error.message.includes('Nicht angemeldet') || error.message.includes('Zugriff')) {
|
|
this.switchView('login');
|
|
}
|
|
}
|
|
}
|
|
|
|
renderRechnung(rechnung) {
|
|
const container = document.getElementById('rechnung-container');
|
|
container.innerHTML = `
|
|
<div class="rechnung">
|
|
<div class="rechnung-header">
|
|
<div>
|
|
<h3>RECHNUNG</h3>
|
|
<p><strong>Rechnungsnummer:</strong> ${rechnung.rechnungsnummer}</p>
|
|
<p><strong>Datum:</strong> ${new Date(rechnung.datum).toLocaleDateString('de-DE')}</p>
|
|
</div>
|
|
<div>
|
|
<h4>Schulverwaltung</h4>
|
|
<p>Musterstraße 123</p>
|
|
<p>12345 Musterstadt</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4>Rechnungsempfänger:</h4>
|
|
<p><strong>${rechnung.betrieb.name}</strong></p>
|
|
<p>${rechnung.betrieb.adresse}</p>
|
|
<p>${rechnung.betrieb.email}</p>
|
|
</div>
|
|
|
|
<h4 style="margin-top: 30px;">Kursanmeldungen:</h4>
|
|
<table class="rechnung-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Kurs</th>
|
|
<th>Anzahl Teilnehmer</th>
|
|
<th>Gebühr pro Teilnehmer</th>
|
|
<th>Gesamt</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${rechnung.zusammenfassung
|
|
.map(
|
|
(z) => `
|
|
<tr>
|
|
<td>${z.kurs_name}</td>
|
|
<td>${z.anzahl_teilnehmer}</td>
|
|
<td>${z.gebuehr}€</td>
|
|
<td>${z.gesamt_kurs}€</td>
|
|
</tr>
|
|
`
|
|
)
|
|
.join('')}
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="rechnung-summe">
|
|
<div>Netto: ${rechnung.netto.toFixed(2)}€</div>
|
|
<div>MwSt. (${rechnung.mwst_satz}%): ${rechnung.mwst_betrag.toFixed(2)}€</div>
|
|
<div class="gesamt">Gesamt: ${rechnung.gesamtsumme.toFixed(2)}€</div>
|
|
</div>
|
|
|
|
<p style="margin-top: 30px; font-size: 0.9em; color: var(--text-secondary);">
|
|
Bitte überweisen Sie den Betrag innerhalb von 14 Tagen unter Angabe der Rechnungsnummer.
|
|
</p>
|
|
|
|
<button class="btn-primary" onclick="window.print()" style="margin-top: 20px;">Rechnung drucken</button>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
new SportAnmeldungApp();
|
|
}); |