Initial Commit
This commit is contained in:
DOMINIK SCHRADER
506
js/app.js
Normal file
506
js/app.js
Normal file
@@ -0,0 +1,506 @@
|
||||
// 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();
|
||||
});
|
||||
Reference in New Issue
Block a user