88 lines
3.9 KiB
PHP
88 lines
3.9 KiB
PHP
<div class="arbeitsberichte-wrapper">
|
|
<div id="overtimeCard"
|
|
style="background: rgba(150,150,150,0.05); padding: 25px; border-radius: 10px; margin-bottom: 25px; border: 1px solid rgba(150,150,150,0.2); border-left: 6px solid #007bff;">
|
|
|
|
<div style="margin-bottom: 20px;">
|
|
<span style="color: #888; font-size: 0.8rem; font-weight: bold; text-transform: uppercase;">Aktueller
|
|
Stand</span>
|
|
<h2 id="standAnzeige" style="margin: 5px 0 0 0; font-size: 2rem;">Lädt...</h2>
|
|
</div>
|
|
|
|
<form id="overtimeForm" style="display: none; gap: 15px; flex-wrap: wrap; align-items: flex-end;">
|
|
<div style="display: flex; flex-direction: column; gap: 5px;">
|
|
<label style="font-size: 0.85rem; font-weight: 600; color: inherit;">Datum</label>
|
|
<input type="date" id="ot-date" required
|
|
style="padding: 8px; border: 1px solid rgba(150,150,150,0.3); border-radius: 4px; background: rgba(150,150,150,0.1); color: inherit;">
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 5px;">
|
|
<label style="font-size: 0.85rem; font-weight: 600; color: inherit;">Minuten</label>
|
|
<input type="number" id="ot-minutes" placeholder="480" required
|
|
style="width: 100px; padding: 8px; border: 1px solid rgba(150,150,150,0.3); border-radius: 4px; background: rgba(150,150,150,0.1); color: inherit;">
|
|
</div>
|
|
<div class="form-group">
|
|
<label style="font-size: 0.85rem; font-weight: 600; color: inherit;">Grund</label>
|
|
<select id="ot-reason" required>
|
|
<option value="">Bitte wählen</option>
|
|
<option value="Abbau">Abbau</option>
|
|
<option value="Aufbau">Aufbau</option>
|
|
<option value="Anderes">Anderes</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit"
|
|
style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; font-weight: bold; cursor: pointer;">
|
|
Eintrag speichern
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/AjaxMethods.js"></script>
|
|
<script src="/js/AjaxRenderTables.js"></script>
|
|
<script src="/js/ajaxApi/ZeiterfassungAjaxMethods.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const standAnzeige = document.getElementById('standAnzeige');
|
|
const overtimeForm = document.getElementById('overtimeForm');
|
|
|
|
function formatStand(gesamtMinuten) {
|
|
const stunden = Math.trunc(gesamtMinuten / 60);
|
|
const minuten = Math.abs(gesamtMinuten % 60);
|
|
return `${stunden}h ${minuten}min`;
|
|
}
|
|
|
|
async function ladeStand() {
|
|
try {
|
|
const data = await getOvertimeStats();
|
|
|
|
standAnzeige.textContent = formatStand(data.gesamtMinuten);
|
|
standAnzeige.style.color = data.gesamtMinuten >= 0 ? '#28a745' : '#dc3545';
|
|
|
|
overtimeForm.style.display = data.istBerechtigt ? 'flex' : 'none';
|
|
|
|
} catch (err) {
|
|
standAnzeige.textContent = 'Fehler beim Laden';
|
|
console.error(err.message);
|
|
}
|
|
}
|
|
|
|
overtimeForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const datum = document.getElementById('ot-date').value;
|
|
const minuten = document.getElementById('ot-minutes').value;
|
|
const grund = document.getElementById('ot-reason').value;
|
|
|
|
try {
|
|
await addOvertimeEntry(datum, minuten, grund);
|
|
e.target.reset();
|
|
document.getElementById('ot-date').value = new Date().toISOString().slice(0, 10);
|
|
await ladeStand();
|
|
} catch (err) {
|
|
alert('Fehler beim Speichern: ' + err.message);
|
|
}
|
|
});
|
|
|
|
document.getElementById('ot-date').value = new Date().toISOString().slice(0, 10);
|
|
ladeStand();
|
|
});
|
|
</script> |