reptil1990/SDSStundenerfassung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BROKEN

Browse Source
This commit is contained in:
Carsten Graf
2026-01-26 17:58:12 +01:00
parent dfbc7d8bbc
commit ca48cdf78f
9 changed files with 971 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
public/css/style.css
View File

@@ -73,6 +73,19 @@ body {
transition: background-color 0.3s;
}
.btn:disabled,
.btn[disabled] {
background-color: #95a5a6;
color: #ecf0f1;
cursor: not-allowed;
opacity: 0.6;
}
.btn:disabled:hover,
.btn[disabled]:hover {
background-color: #95a5a6;
}
.btn-primary {
background-color: #3498db;
color: white;
@@ -100,6 +113,19 @@ body {
background-color: #229954;
}
.btn-success:disabled,
.btn-success[disabled] {
background-color: #95a5a6;
color: #ecf0f1;
cursor: not-allowed;
opacity: 0.6;
}
.btn-success:disabled:hover,
.btn-success[disabled]:hover {
background-color: #95a5a6;
}
.btn-danger {
background-color: #e74c3c;
color: white;
@@ -322,6 +348,10 @@ body {
border-left-color: #27ae60;
}
.stat-card.stat-planned {
border-left-color: #f39c12;
}
.stat-label {
font-size: 12px;
color: #666;

262
public/js/dashboard.js
View File

@@ -36,6 +36,28 @@ async function loadUserStats() {
if (totalVacationEl) {
totalVacationEl.textContent = (stats.urlaubstage || 0).toFixed(1);
}
// Verplante Urlaubstage anzeigen
const plannedVacationEl = document.getElementById('plannedVacation');
if (plannedVacationEl) {
plannedVacationEl.textContent = (stats.plannedVacationDays || 0).toFixed(1);
}
// Kalenderwochen anzeigen
const plannedWeeksEl = document.getElementById('plannedWeeks');
if (plannedWeeksEl) {
if (stats.plannedWeeks && stats.plannedWeeks.length > 0) {
const weeksHTML = stats.plannedWeeks.map(w => {
const daysText = w.days === 1 ? '1 Tag' : `${w.days.toFixed(1)} Tage`;
return `${w.year} KW${String(w.week).padStart(2, '0')} (${daysText})`;
}).join('<br>');
plannedWeeksEl.innerHTML = weeksHTML;
plannedWeeksEl.style.display = 'block';
} else {
plannedWeeksEl.textContent = '';
plannedWeeksEl.style.display = 'none';
}
}
} catch (error) {
console.error('Fehler beim Laden der Statistiken:', error);
// Fehlerbehandlung: Zeige "-" oder "Fehler"
@@ -45,6 +67,13 @@ async function loadUserStats() {
if (remainingVacationEl) remainingVacationEl.textContent = '-';
const totalVacationEl = document.getElementById('totalVacation');
if (totalVacationEl) totalVacationEl.textContent = '-';
const plannedVacationEl = document.getElementById('plannedVacation');
if (plannedVacationEl) plannedVacationEl.textContent = '-';
const plannedWeeksEl = document.getElementById('plannedWeeks');
if (plannedWeeksEl) {
plannedWeeksEl.textContent = '';
plannedWeeksEl.style.display = 'none';
}
}
}
@@ -55,11 +84,27 @@ document.addEventListener('DOMContentLoaded', async function() {
const response = await fetch('/api/user/last-week');
const data = await response.json();
if (data.last_week_start) {
currentWeekStart = data.last_week_start;
// Prüfe ob last_week_start wirklich ein Montag ist
if (isMonday(data.last_week_start)) {
currentWeekStart = data.last_week_start;
} else {
// Korrigiere zu Montag falls nicht
console.warn('last_week_start war kein Montag, korrigiere:', data.last_week_start);
currentWeekStart = getMonday(data.last_week_start);
// Speichere die korrigierte Woche
saveLastWeek();
}
}
} catch (error) {
console.warn('Konnte letzte Woche nicht vom Server laden:', error);
}
// Stelle sicher, dass currentWeekStart immer ein Montag ist
if (currentWeekStart && !isMonday(currentWeekStart)) {
console.warn('currentWeekStart war kein Montag, korrigiere:', currentWeekStart);
currentWeekStart = getMonday(currentWeekStart);
saveLastWeek();
}
// Ping-IP laden
loadPingIP();
@@ -70,17 +115,23 @@ document.addEventListener('DOMContentLoaded', async function() {
loadWeek();
document.getElementById('prevWeek').addEventListener('click', function() {
const date = new Date(currentWeekStart);
// Parse als lokales Datum
const parts = currentWeekStart.split('-');
const date = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
date.setDate(date.getDate() - 7);
currentWeekStart = formatDate(date);
// Stelle sicher, dass es ein Montag ist
currentWeekStart = getMonday(date);
saveLastWeek();
loadWeek();
});
document.getElementById('nextWeek').addEventListener('click', function() {
const date = new Date(currentWeekStart);
// Parse als lokales Datum
const parts = currentWeekStart.split('-');
const date = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
date.setDate(date.getDate() + 7);
currentWeekStart = formatDate(date);
// Stelle sicher, dass es ein Montag ist
currentWeekStart = getMonday(date);
saveLastWeek();
loadWeek();
});
@@ -140,13 +191,36 @@ async function saveLastWeek() {
}
}
// Montag der aktuellen Woche ermitteln
// Prüft ob ein Datum ein Montag ist (1 = Montag)
function isMonday(dateStr) {
const d = new Date(dateStr + 'T00:00:00'); // Lokale Zeit verwenden, nicht UTC
return d.getDay() === 1;
}
// Montag der aktuellen Woche ermitteln (robust gegen Zeitzonenprobleme)
function getMonday(date) {
const d = new Date(date);
const day = d.getDay();
const diff = d.getDate() - day + (day === 0 ? -6 : 1);
d.setDate(diff);
return formatDate(d);
// Wenn date bereits ein String ist (YYYY-MM-DD), parsen wir es als lokales Datum
let d;
if (typeof date === 'string') {
// Parse als lokales Datum, nicht UTC
const parts = date.split('-');
d = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
} else {
d = new Date(date);
}
// Stelle sicher, dass wir mit lokaler Zeit arbeiten
const day = d.getDay(); // 0 = Sonntag, 1 = Montag, ..., 6 = Samstag
// Berechne Differenz zum Montag: Montag = 1, also diff = 1 - day
// Aber: Sonntag = 0, also für Sonntag: diff = 1 - 0 = 1, aber wir wollen -6 Tage zurück
const diff = day === 0 ? -6 : 1 - day;
d.setDate(d.getDate() + diff);
// Format als YYYY-MM-DD in lokaler Zeit
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const dayOfMonth = String(d.getDate()).padStart(2, '0');
return `${year}-${month}-${dayOfMonth}`;
}
// Kalenderwoche berechnen (ISO 8601 - Woche beginnt Montag)
@@ -277,7 +351,12 @@ function renderWeek() {
// Prüfen ob Werktag (Montag-Freitag, i < 5) ausgefüllt ist
// Bei ganztägigem Urlaub oder Krank gilt der Tag als ausgefüllt
if (i < 5 && vacationType !== 'full' && !sickStatus && (!startTime || !endTime || startTime.trim() === '' || endTime.trim() === '')) {
// Bei 8 Überstunden (ganzer Tag) gilt der Tag auch als ausgefüllt
const overtimeValue = overtimeTaken ? parseFloat(overtimeTaken) : 0;
const fullDayHours = userWochenstunden ? (userWochenstunden / 5) : 8;
const isFullDayOvertime = overtimeValue > 0 && Math.abs(overtimeValue - fullDayHours) < 0.01;
if (i < 5 && vacationType !== 'full' && !sickStatus && !isFullDayOvertime && (!startTime || !endTime || startTime.trim() === '' || endTime.trim() === '')) {
allWeekdaysFilled = false;
}
@@ -524,6 +603,8 @@ function updateOvertimeDisplay() {
// Gesamtstunden berechnen - direkt aus DOM-Elementen lesen für Echtzeit-Aktualisierung
let totalHours = 0;
let vacationHours = 0;
const fullDayHours = userWochenstunden ? (userWochenstunden / 5) : 8;
let fullDayOvertimeDays = 0; // Anzahl Tage mit 8 Überstunden (wie im Backend)
const startDateObj = new Date(startDate);
for (let i = 0; i < 7; i++) {
const date = new Date(startDateObj);
@@ -536,6 +617,16 @@ function updateOvertimeDisplay() {
const sickCheckbox = document.querySelector(`input[data-date="${dateStr}"][data-field="sick_status"]`);
const sickStatus = sickCheckbox ? sickCheckbox.checked : (currentEntries[dateStr]?.sick_status || false);
// Prüfe ob 8 Überstunden (ganzer Tag) eingetragen sind
const overtimeInput = document.querySelector(`input[data-date="${dateStr}"][data-field="overtime_taken_hours"]`);
const overtimeValue = overtimeInput ? parseFloat(overtimeInput.value) || 0 : (currentEntries[dateStr]?.overtime_taken_hours ? parseFloat(currentEntries[dateStr].overtime_taken_hours) : 0);
const isFullDayOvertime = overtimeValue > 0 && Math.abs(overtimeValue - fullDayHours) < 0.01;
// Zähle volle Überstundentage (wie im Backend)
if (isFullDayOvertime) {
fullDayOvertimeDays++;
}
// Wenn Urlaub oder Krank, zähle nur diese Stunden (nicht zusätzlich Arbeitsstunden)
if (vacationType === 'full') {
vacationHours += 8; // Ganzer Tag Urlaub = 8 Stunden
@@ -550,37 +641,43 @@ function updateOvertimeDisplay() {
const endTime = endInput ? endInput.value : '';
const breakMinutes = parseInt(breakInput ? breakInput.value : 0) || 0;
if (startTime && endTime) {
if (startTime && endTime && !isFullDayOvertime) {
const start = new Date(`2000-01-01T${startTime}`);
const end = new Date(`2000-01-01T${endTime}`);
const diffMs = end - start;
const hours = (diffMs / (1000 * 60 * 60)) - (breakMinutes / 60);
totalHours += hours;
} else if (currentEntries[dateStr]?.total_hours) {
} else if (currentEntries[dateStr]?.total_hours && !isFullDayOvertime) {
// Fallback auf gespeicherte Werte
totalHours += parseFloat(currentEntries[dateStr].total_hours) || 0;
}
} else if (sickStatus) {
totalHours += 8; // Krank = 8 Stunden
} else {
// Berechne Stunden direkt aus Start-/Endzeit und Pause
const startInput = document.querySelector(`input[data-date="${dateStr}"][data-field="start_time"]`);
const endInput = document.querySelector(`input[data-date="${dateStr}"][data-field="end_time"]`);
const breakInput = document.querySelector(`input[data-date="${dateStr}"][data-field="break_minutes"]`);
const startTime = startInput ? startInput.value : '';
const endTime = endInput ? endInput.value : '';
const breakMinutes = parseInt(breakInput ? breakInput.value : 0) || 0;
if (startTime && endTime) {
const start = new Date(`2000-01-01T${startTime}`);
const end = new Date(`2000-01-01T${endTime}`);
const diffMs = end - start;
const hours = (diffMs / (1000 * 60 * 60)) - (breakMinutes / 60);
totalHours += hours;
} else if (currentEntries[dateStr]?.total_hours) {
// Fallback auf gespeicherte Werte
totalHours += parseFloat(currentEntries[dateStr].total_hours) || 0;
// Wenn 8 Überstunden (ganzer Tag) eingetragen sind, zählt der Tag als 0 Stunden
if (isFullDayOvertime) {
// Tag zählt als 0 Stunden (Überstunden werden separat abgezogen)
// totalHours bleibt unverändert (0 Stunden für diesen Tag)
} else {
// Berechne Stunden direkt aus Start-/Endzeit und Pause
const startInput = document.querySelector(`input[data-date="${dateStr}"][data-field="start_time"]`);
const endInput = document.querySelector(`input[data-date="${dateStr}"][data-field="end_time"]`);
const breakInput = document.querySelector(`input[data-date="${dateStr}"][data-field="break_minutes"]`);
const startTime = startInput ? startInput.value : '';
const endTime = endInput ? endInput.value : '';
const breakMinutes = parseInt(breakInput ? breakInput.value : 0) || 0;
if (startTime && endTime) {
const start = new Date(`2000-01-01T${startTime}`);
const end = new Date(`2000-01-01T${endTime}`);
const diffMs = end - start;
const hours = (diffMs / (1000 * 60 * 60)) - (breakMinutes / 60);
totalHours += hours;
} else if (currentEntries[dateStr]?.total_hours) {
// Fallback auf gespeicherte Werte
totalHours += parseFloat(currentEntries[dateStr].total_hours) || 0;
}
}
}
}
@@ -601,9 +698,15 @@ function updateOvertimeDisplay() {
}
}
// Überstunden = (Tatsächliche Stunden + Urlaubsstunden) - Sollstunden
// Überstunden berechnen (wie im Backend: mit adjustedSollStunden)
// Wenn 8 Überstunden genommen wurden, zählen diese Tage als 0 Stunden
// Die negativen Stunden (wegen 0 statt Sollstunden) werden durch die verbrauchten Überstunden ausgeglichen
// Daher: adjustedSollStunden = sollStunden - (fullDayOvertimeDays * fullDayHours)
// So werden die Tage mit 8 Überstunden nicht zu negativen Überstunden führen
const totalHoursWithVacation = totalHours + vacationHours;
const overtimeHours = totalHoursWithVacation - sollStunden;
const adjustedSollStunden = sollStunden - (fullDayOvertimeDays * fullDayHours);
// overtimeHours = Überstunden diese Woche (wie im Backend berechnet)
const overtimeHours = totalHoursWithVacation - adjustedSollStunden;
// Überstunden-Anzeige aktualisieren
const overtimeSummaryItem = document.getElementById('overtimeSummaryItem');
@@ -828,6 +931,11 @@ async function saveEntry(input) {
// Überstunden-Anzeige aktualisieren (bei jeder Änderung)
updateOvertimeDisplay();
// Wenn vacation_type geändert wurde, Statistiken aktualisieren (für verplante Tage)
if (input.dataset.field === 'vacation_type') {
loadUserStats();
}
// Submit-Button Status prüfen (nach jedem Speichern)
checkWeekComplete();
@@ -873,6 +981,18 @@ function checkWeekComplete() {
continue; // Tag ist ausgefüllt (ganzer Tag Urlaub oder Krank)
}
// Prüfe ob 8 Überstunden eingetragen sind (dann ist der Tag auch ausgefüllt)
const overtimeInput = document.querySelector(`input[data-date="${dateStr}"][data-field="overtime_taken_hours"]`);
const overtimeValue = overtimeInput ? parseFloat(overtimeInput.value) || 0 : (entry.overtime_taken_hours ? parseFloat(entry.overtime_taken_hours) : 0);
// Berechne fullDayHours (normalerweise 8 Stunden)
const fullDayHours = userWochenstunden ? (userWochenstunden / 5) : 8;
// Wenn 8 Überstunden (ganzer Tag) eingetragen sind, ist der Tag ausgefüllt
if (overtimeValue > 0 && Math.abs(overtimeValue - fullDayHours) < 0.01) {
continue; // Tag ist ausgefüllt (8 Überstunden = ganzer Tag)
}
// Prüfe IMMER direkt die Input-Felder im DOM (das ist die zuverlässigste Quelle)
// Auch bei manueller Eingabe werden die Werte hier erkannt
const startInput = document.querySelector(`input[data-date="${dateStr}"][data-field="start_time"]`);
@@ -883,15 +1003,18 @@ function checkWeekComplete() {
const endTime = endInput ? (endInput.value || '').trim() : '';
// Debug-Ausgabe - zeigt auch den tatsächlichen Wert im Input-Feld
console.log(`Tag ${i + 1} (${dateStr}): Start="${startTime || 'LEER'}", Ende="${endTime || 'LEER'}", Urlaub="${vacationValue || 'KEIN'}"`, {
console.log(`Tag ${i + 1} (${dateStr}): Start="${startTime || 'LEER'}", Ende="${endTime || 'LEER'}", Urlaub="${vacationValue || 'KEIN'}", Überstunden="${overtimeValue}"`, {
startInputExists: !!startInput,
endInputExists: !!endInput,
startInputValue: startInput ? startInput.value : 'N/A',
endInputValue: endInput ? endInput.value : 'N/A',
vacationValue: vacationValue
vacationValue: vacationValue,
overtimeValue: overtimeValue,
fullDayHours: fullDayHours
});
// Bei halbem Tag Urlaub oder keinem Urlaub müssen Start- und Endzeit vorhanden sein
// (außer wenn 8 Überstunden eingetragen sind, dann sind Start/Ende nicht nötig)
if (!startTime || !endTime || startTime === '' || endTime === '') {
allWeekdaysFilled = false;
missingFields.push(formatDateDE(dateStr));
@@ -979,6 +1102,16 @@ async function submitWeek() {
continue; // Tag ist ausgefüllt (ganzer Tag Urlaub oder Krank)
}
// Prüfe ob 8 Überstunden eingetragen sind (dann ist der Tag auch ausgefüllt, Start/Ende nicht nötig)
const overtimeInput = document.querySelector(`input[data-date="${dateStr}"][data-field="overtime_taken_hours"]`);
const overtimeValue = overtimeInput ? parseFloat(overtimeInput.value) || 0 : (entry.overtime_taken_hours ? parseFloat(entry.overtime_taken_hours) : 0);
const fullDayHours = userWochenstunden ? (userWochenstunden / 5) : 8;
// Wenn 8 Überstunden (ganzer Tag) eingetragen sind, ist der Tag ausgefüllt
if (overtimeValue > 0 && Math.abs(overtimeValue - fullDayHours) < 0.01) {
continue; // Tag ist ausgefüllt (8 Überstunden = ganzer Tag)
}
// Prüfe IMMER direkt die Input-Felder im DOM - auch bei manueller Eingabe
const startInput = document.querySelector(`input[data-date="${dateStr}"][data-field="start_time"]`);
const endInput = document.querySelector(`input[data-date="${dateStr}"][data-field="end_time"]`);
@@ -988,13 +1121,15 @@ async function submitWeek() {
const endTime = endInput ? (endInput.value || '').trim() : '';
// Debug-Ausgabe mit detaillierten Informationen
console.log(`Tag ${i + 1} (${dateStr}): Start="${startTime || 'LEER'}", Ende="${endTime || 'LEER'}", Urlaub="${vacationValue || 'KEIN'}"`, {
console.log(`Tag ${i + 1} (${dateStr}): Start="${startTime || 'LEER'}", Ende="${endTime || 'LEER'}", Urlaub="${vacationValue || 'KEIN'}", Überstunden="${overtimeValue}"`, {
startInputExists: !!startInput,
endInputExists: !!endInput,
startInputValue: startInput ? `"${startInput.value}"` : 'N/A',
endInputValue: endInput ? `"${endInput.value}"` : 'N/A',
startInputType: startInput ? typeof startInput.value : 'N/A',
vacationValue: vacationValue
vacationValue: vacationValue,
overtimeValue: overtimeValue,
fullDayHours: fullDayHours
});
const missing = [];
@@ -1294,6 +1429,57 @@ async function loadPingIP() {
}
}
// Client-IP ermitteln und eintragen (global für onclick)
window.detectClientIP = async function() {
const pingIpInput = document.getElementById('pingIpInput');
const detectButton = document.querySelector('button[onclick*="detectClientIP"]');
if (!pingIpInput) {
return;
}
// Button-Status während des Ladens
if (detectButton) {
const originalText = detectButton.textContent;
detectButton.textContent = 'Ermittle...';
detectButton.disabled = true;
try {
const response = await fetch('/api/user/client-ip');
if (!response.ok) {
throw new Error('Fehler beim Abrufen der IP-Adresse');
}
const data = await response.json();
if (data.client_ip && data.client_ip !== 'unknown') {
// IP in das Eingabefeld eintragen
pingIpInput.value = data.client_ip;
// Erfolgs-Feedback
detectButton.textContent = 'IP ermittelt!';
detectButton.style.backgroundColor = '#27ae60';
setTimeout(() => {
detectButton.textContent = originalText;
detectButton.style.backgroundColor = '#3498db';
detectButton.disabled = false;
}, 2000);
} else {
alert('IP-Adresse konnte nicht ermittelt werden.');
detectButton.textContent = originalText;
detectButton.disabled = false;
}
} catch (error) {
console.error('Fehler beim Ermitteln der Client-IP:', error);
alert('Fehler beim Ermitteln der IP-Adresse');
if (detectButton) {
detectButton.textContent = originalText;
detectButton.disabled = false;
}
}
}
};
// Ping-IP speichern (global für onclick)
window.savePingIP = async function() {
const pingIpInput = document.getElementById('pingIpInput');