207 lines
8.8 KiB
PHP
207 lines
8.8 KiB
PHP
<div id="statusMsg" class="status-msg" style="display:none;"></div>
|
|
|
|
<div class="form-container">
|
|
<h3>📅 Neuen Termin vergeben</h3>
|
|
<form id="addTerminForm" class="vergabe-form">
|
|
<div class="vergabe-grid">
|
|
<div class="form-group">
|
|
<label for="datum">Start-Datum *</label>
|
|
<input type="date" id="datum" name="datum" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="zeit">Uhrzeit *</label>
|
|
<input type="time" id="zeit" name="zeit" required
|
|
style="width:100%; padding:10px; border-radius:5px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--input-text);">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="name">Name / Zweck *</label>
|
|
<input type="text" id="name" name="name" placeholder="z.B. Kundentermin" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="notiz">Notiz (Optional)</label>
|
|
<input type="text" id="notiz" name="notiz" placeholder="Details zum Termin...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="wiederholung">Wiederholung</label>
|
|
<select id="wiederholung" name="wiederholung"
|
|
style="width:100%; padding:10px; border-radius:5px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--input-text);">
|
|
<option value="none">Keine Wiederholung</option>
|
|
<option value="daily">Täglich</option>
|
|
<option value="weekly">Wöchentlich</option>
|
|
<option value="monthly">Monatlich</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="enddatum-group" style="display: none;">
|
|
<label for="enddatum">Wiederholen bis *</label>
|
|
<input type="date" id="enddatum" name="enddatum">
|
|
</div>
|
|
<button type="submit" class="btn-submit-vergabe">Speichern</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="form-container">
|
|
<h3>📋 Aktuelle Terminbelegungen</h3>
|
|
<div class="table-container">
|
|
<div id="termineTableWrapper">Lade Daten...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/AjaxMethods.js"></script>
|
|
<script src="/js/AjaxRenderTables.js"></script>
|
|
<script src="/js/ajaxApi/TermineAjaxMethods.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const statusMsg = document.getElementById('statusMsg');
|
|
const tableWrapper = document.getElementById('termineTableWrapper');
|
|
|
|
const intervallNamen = {
|
|
daily: 'Täglich',
|
|
weekly: 'Wöchentlich',
|
|
monthly: 'Monatlich'
|
|
};
|
|
|
|
function zeigeStatus(text, istFehler = false) {
|
|
statusMsg.textContent = text;
|
|
statusMsg.style.display = 'block';
|
|
statusMsg.style.background = istFehler ? '#f8d7da' : '';
|
|
statusMsg.style.color = istFehler ? '#721c24' : '';
|
|
setTimeout(() => {
|
|
statusMsg.style.display = 'none';
|
|
}, 4000);
|
|
}
|
|
|
|
function formatDatum(iso) {
|
|
const d = new Date(iso);
|
|
return d.toLocaleDateString('de-DE');
|
|
}
|
|
|
|
function formatZeit(zeit) {
|
|
return zeit?.slice(0, 5) ?? '';
|
|
}
|
|
|
|
function renderTermine(termine) {
|
|
if (!termine || termine.length === 0) {
|
|
tableWrapper.innerHTML = `
|
|
<table class="db-table mobile-responsive-table">
|
|
<thead><tr><th>Datum / Turnus</th><th>Uhrzeit</th><th>Termin / Name</th><th>Notiz</th><th>Eingetragen von</th><th>Aktion</th></tr></thead>
|
|
<tbody><tr><td colspan="6" style="text-align:center; padding:20px;">Keine Termine eingetragen.</td></tr></tbody>
|
|
</table>`;
|
|
return;
|
|
}
|
|
|
|
let html = `
|
|
<table class="db-table mobile-responsive-table">
|
|
<thead>
|
|
<tr><th>Datum / Turnus</th><th>Uhrzeit</th><th>Termin / Name</th><th>Notiz</th><th>Eingetragen von</th><th>Aktion</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
`;
|
|
|
|
for (const t of termine) {
|
|
const istSerie = !!t.SERIEN_ID;
|
|
html += `
|
|
<tr>
|
|
<td data-label="Datum:">
|
|
<strong>${escapeHtml(formatDatum(t.DATUM))}</strong>
|
|
${istSerie ? `<br><small style="color:#007bff; font-style:italic;">(${escapeHtml(intervallNamen[t.INTERVALL] ?? '')} bis ${escapeHtml(formatDatum(t.SERIEN_ENDE))})</small>` : ''}
|
|
</td>
|
|
<td data-label="Uhrzeit:">${escapeHtml(formatZeit(t.ZEIT))}</td>
|
|
<td data-label="Termin / Name:">
|
|
<strong>${escapeHtml(t.NAME)}</strong>
|
|
${istSerie ? `<span style="font-size:0.8em; background:#e1f5fe; color:#0288d1; padding:2px 6px; border-radius:10px; margin-left:5px;">Wiederholend</span>` : ''}
|
|
</td>
|
|
<td data-label="Notiz:">${escapeHtml(t.NOTIZ || '-')}</td>
|
|
<td data-label="Von:"><span class="badge">${escapeHtml(t.ERSTELLT_VON)}</span></td>
|
|
<td data-label="Aktion:">
|
|
${istSerie
|
|
? `<button type="button" class="btn-delete btn-delete-serie" data-serien-id="${escapeHtml(t.SERIEN_ID)}" style="background-color:#d32f2f;">löschen</button>`
|
|
: `<button type="button" class="btn-delete btn-delete-einzeln" data-id="${escapeHtml(t.ID)}">Löschen</button>`
|
|
}
|
|
</td>
|
|
</tr>`;
|
|
}
|
|
|
|
html += `</tbody></table>`;
|
|
tableWrapper.innerHTML = html;
|
|
|
|
tableWrapper.querySelectorAll('.btn-delete-einzeln').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
if (!confirm('Möchtest du diesen Termin wirklich löschen?')) return;
|
|
try {
|
|
const data = await deleteTermin(btn.dataset.id);
|
|
zeigeStatus(data.message);
|
|
await ladeTermine();
|
|
} catch (err) {
|
|
zeigeStatus('Fehler: ' + err.message, true);
|
|
}
|
|
});
|
|
});
|
|
|
|
tableWrapper.querySelectorAll('.btn-delete-serie').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
if (!confirm('Möchtest du die GESAMTE Terminserie löschen?')) return;
|
|
try {
|
|
const data = await deleteTerminSerie(btn.dataset.serienId);
|
|
zeigeStatus(data.message);
|
|
await ladeTermine();
|
|
} catch (err) {
|
|
zeigeStatus('Fehler: ' + err.message, true);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
async function ladeTermine() {
|
|
try {
|
|
const data = await getTermine();
|
|
renderTermine(data.entries);
|
|
} catch (err) {
|
|
tableWrapper.innerHTML = `<p>❌ ${escapeHtml(err.message)}</p>`;
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------------
|
|
// Wiederholung: Enddatum-Feld ein-/ausblenden
|
|
// -----------------------------------------------------------
|
|
document.getElementById('wiederholung').addEventListener('change', function() {
|
|
const enddatumGroup = document.getElementById('enddatum-group');
|
|
const enddatumInput = document.getElementById('enddatum');
|
|
|
|
if (this.value !== 'none') {
|
|
enddatumGroup.style.display = 'block';
|
|
enddatumInput.required = true;
|
|
} else {
|
|
enddatumGroup.style.display = 'none';
|
|
enddatumInput.required = false;
|
|
enddatumInput.value = '';
|
|
}
|
|
});
|
|
|
|
// -----------------------------------------------------------
|
|
// Formular absenden
|
|
// -----------------------------------------------------------
|
|
document.getElementById('addTerminForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const datum = document.getElementById('datum').value;
|
|
const zeit = document.getElementById('zeit').value;
|
|
const name = document.getElementById('name').value.trim();
|
|
const notiz = document.getElementById('notiz').value.trim();
|
|
const wiederholung = document.getElementById('wiederholung').value;
|
|
const enddatum = document.getElementById('enddatum').value;
|
|
|
|
try {
|
|
const data = await addTermin(datum, zeit, name, notiz, wiederholung, enddatum);
|
|
zeigeStatus(data.message);
|
|
e.target.reset();
|
|
document.getElementById('enddatum-group').style.display = 'none';
|
|
await ladeTermine();
|
|
} catch (err) {
|
|
zeigeStatus('Fehler: ' + err.message, true);
|
|
}
|
|
});
|
|
|
|
ladeTermine();
|
|
});
|
|
</script> |