2300 lines
96 KiB
JavaScript
2300 lines
96 KiB
JavaScript
// Dashboard JavaScript
|
||
|
||
let currentWeekStart = getMonday(new Date());
|
||
let currentEntries = {};
|
||
let currentHolidayDates = new Set(); // Feiertage der aktuellen Woche (YYYY-MM-DD)
|
||
let userWochenstunden = 0; // Wochenstunden des Users
|
||
let userArbeitstage = 5; // Arbeitstage pro Woche des Users (Standard: 5)
|
||
let weekendPercentages = { saturday: 100, sunday: 100 }; // Wochenend-Prozentsätze (100% = normal)
|
||
let defaultBreakMinutes = 30; // Standard-Pausenzeit des Mitarbeiters (Vorbelegung)
|
||
let latestSubmittedTimesheetId = null; // ID der neuesten eingereichten Version
|
||
|
||
// Wochenend-Prozentsätze laden
|
||
async function loadWeekendPercentages() {
|
||
try {
|
||
const response = await fetch('/api/user/weekend-percentages');
|
||
if (!response.ok) {
|
||
throw new Error('Fehler beim Laden der Wochenend-Prozentsätze');
|
||
}
|
||
const data = await response.json();
|
||
weekendPercentages.saturday = data.saturday_percentage || 100;
|
||
weekendPercentages.sunday = data.sunday_percentage || 100;
|
||
} catch (error) {
|
||
console.error('Fehler beim Laden der Wochenend-Prozentsätze:', error);
|
||
// Standardwerte verwenden
|
||
weekendPercentages.saturday = 100;
|
||
weekendPercentages.sunday = 100;
|
||
}
|
||
}
|
||
|
||
// Hilfsfunktion: Prüft ob ein Datum ein Wochenendtag ist und gibt den Prozentsatz zurück
|
||
function getWeekendPercentage(date) {
|
||
const day = date.getDay();
|
||
if (day === 6) { // Samstag
|
||
return weekendPercentages.saturday;
|
||
} else if (day === 0) { // Sonntag
|
||
return weekendPercentages.sunday;
|
||
}
|
||
return 100; // Kein Wochenende = 100% (normal)
|
||
}
|
||
|
||
// Statistiken laden
|
||
async function loadUserStats() {
|
||
try {
|
||
const response = await fetch('/api/user/stats');
|
||
if (!response.ok) {
|
||
throw new Error('Fehler beim Laden der Statistiken');
|
||
}
|
||
const stats = await response.json();
|
||
|
||
// Überstunden anzeigen
|
||
const currentOvertimeEl = document.getElementById('currentOvertime');
|
||
if (currentOvertimeEl) {
|
||
const overtime = stats.currentOvertime || 0;
|
||
currentOvertimeEl.textContent = (overtime >= 0 ? '+' : '') + formatHoursMin(overtime);
|
||
currentOvertimeEl.style.color = overtime >= 0 ? '#27ae60' : '#e74c3c';
|
||
// Auch die Border-Farbe des Cards anpassen
|
||
const overtimeCard = currentOvertimeEl.closest('.stat-card');
|
||
if (overtimeCard) {
|
||
overtimeCard.style.borderLeftColor = overtime >= 0 ? '#27ae60' : '#e74c3c';
|
||
}
|
||
}
|
||
|
||
// Urlaubstage anzeigen
|
||
const remainingVacationEl = document.getElementById('remainingVacation');
|
||
if (remainingVacationEl) {
|
||
remainingVacationEl.textContent = (stats.remainingVacation || 0).toFixed(1);
|
||
}
|
||
|
||
const totalVacationEl = document.getElementById('totalVacation');
|
||
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"
|
||
const currentOvertimeEl = document.getElementById('currentOvertime');
|
||
if (currentOvertimeEl) currentOvertimeEl.textContent = '-';
|
||
const remainingVacationEl = document.getElementById('remainingVacation');
|
||
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';
|
||
}
|
||
}
|
||
}
|
||
|
||
// Beim Laden der Seite
|
||
document.addEventListener('DOMContentLoaded', async function() {
|
||
// Letzte Woche vom Server laden
|
||
try {
|
||
const response = await fetch('/api/user/last-week');
|
||
const data = await response.json();
|
||
if (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();
|
||
|
||
// Wochenend-Prozentsätze laden
|
||
loadWeekendPercentages();
|
||
|
||
// Statistiken laden
|
||
loadUserStats();
|
||
|
||
loadWeek();
|
||
|
||
document.getElementById('prevWeek').addEventListener('click', function() {
|
||
// 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);
|
||
// Stelle sicher, dass es ein Montag ist
|
||
currentWeekStart = getMonday(date);
|
||
saveLastWeek();
|
||
loadWeek();
|
||
});
|
||
|
||
document.getElementById('nextWeek').addEventListener('click', function() {
|
||
// 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);
|
||
// Stelle sicher, dass es ein Montag ist
|
||
currentWeekStart = getMonday(date);
|
||
saveLastWeek();
|
||
loadWeek();
|
||
});
|
||
|
||
function showGoToWeekError(msg) {
|
||
const el = document.getElementById('goToWeekError');
|
||
if (el) { el.textContent = msg; el.style.display = 'inline'; }
|
||
}
|
||
function clearGoToWeekError() {
|
||
const el = document.getElementById('goToWeekError');
|
||
if (el) { el.textContent = ''; el.style.display = 'none'; }
|
||
}
|
||
function goToWeek() {
|
||
clearGoToWeekError();
|
||
const input = document.getElementById('goToWeekInput');
|
||
if (!input) return;
|
||
const raw = (input.value || '').trim();
|
||
if (!raw) {
|
||
showGoToWeekError('Bitte KW eingeben (z. B. 12 oder 2025 12).');
|
||
return;
|
||
}
|
||
let year = null;
|
||
let week = null;
|
||
const parts = raw.split(/[\s\/]+/).filter(Boolean).map(p => parseInt(p, 10));
|
||
if (parts.length === 1 && !isNaN(parts[0])) {
|
||
week = parts[0];
|
||
year = currentWeekStart ? parseInt(currentWeekStart.split('-')[0], 10) : new Date().getFullYear();
|
||
} else if (parts.length === 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
|
||
if (parts[0] >= 1000) {
|
||
year = parts[0];
|
||
week = parts[1];
|
||
} else {
|
||
week = parts[0];
|
||
year = parts[1];
|
||
}
|
||
}
|
||
if (year == null || week == null || week < 1 || week > 53 || year < 2000 || year > 2100) {
|
||
showGoToWeekError('Ungültige Eingabe. KW 1–53, Jahr 2000–2100 (z. B. 12 oder 2025 12).');
|
||
return;
|
||
}
|
||
currentWeekStart = getWeekStartFromYearAndWeek(year, week);
|
||
saveLastWeek();
|
||
loadWeek();
|
||
}
|
||
|
||
const goToWeekBtn = document.getElementById('goToWeekBtn');
|
||
if (goToWeekBtn) goToWeekBtn.addEventListener('click', goToWeek);
|
||
const goToWeekInput = document.getElementById('goToWeekInput');
|
||
if (goToWeekInput) {
|
||
goToWeekInput.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Enter') { e.preventDefault(); goToWeek(); }
|
||
});
|
||
}
|
||
|
||
// Event-Listener für Submit-Button - mit Event-Delegation für bessere Zuverlässigkeit
|
||
document.addEventListener('click', function(e) {
|
||
if (e.target && e.target.id === 'submitWeek') {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const submitButton = e.target;
|
||
console.log('Submit-Button wurde geklickt!');
|
||
console.log('Button disabled?', submitButton.disabled);
|
||
console.log('Button element:', submitButton);
|
||
|
||
if (!submitButton.disabled) {
|
||
submitWeek();
|
||
} else {
|
||
console.warn('Submit-Button ist deaktiviert!');
|
||
const tooltip = submitButton.title || 'Bitte füllen Sie alle Werktage aus.';
|
||
alert(tooltip);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Zusätzlicher direkter Event-Listener als Fallback
|
||
const submitButton = document.getElementById('submitWeek');
|
||
if (submitButton) {
|
||
submitButton.onclick = function(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
console.log('Submit-Button onclick wurde ausgelöst!');
|
||
if (!this.disabled) {
|
||
submitWeek();
|
||
}
|
||
return false;
|
||
};
|
||
console.log('Submit-Button Event-Listener gesetzt');
|
||
} else {
|
||
console.error('Submit-Button nicht gefunden beim Initialisieren!');
|
||
}
|
||
|
||
// Event-Listener für PDF-Button
|
||
const viewPdfButton = document.getElementById('viewPdfBtn');
|
||
if (viewPdfButton) {
|
||
viewPdfButton.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
if (!this.disabled && latestSubmittedTimesheetId) {
|
||
// Öffne PDF in neuem Tab
|
||
window.open(`/api/timesheet/pdf/${latestSubmittedTimesheetId}?inline=true`, '_blank');
|
||
}
|
||
});
|
||
console.log('PDF-Button Event-Listener gesetzt');
|
||
} else {
|
||
console.error('PDF-Button nicht gefunden beim Initialisieren!');
|
||
}
|
||
});
|
||
|
||
// Letzte Woche auf dem Server speichern
|
||
async function saveLastWeek() {
|
||
try {
|
||
await fetch('/api/user/last-week', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
week_start: currentWeekStart
|
||
})
|
||
});
|
||
} catch (error) {
|
||
console.warn('Konnte letzte Woche nicht auf dem Server speichern:', error);
|
||
}
|
||
}
|
||
|
||
// 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) {
|
||
// 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)
|
||
function getCalendarWeek(dateStr) {
|
||
const date = new Date(dateStr);
|
||
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
|
||
const dayNum = d.getUTCDay() || 7;
|
||
d.setUTCDate(d.getUTCDate() + 4 - dayNum);
|
||
const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
|
||
const weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
|
||
return weekNo;
|
||
}
|
||
|
||
// Montag (week_start) aus Jahr und Kalenderwoche (ISO 8601)
|
||
function getWeekStartFromYearAndWeek(year, weekNumber) {
|
||
const jan4 = new Date(Date.UTC(year, 0, 4));
|
||
const jan4Day = jan4.getUTCDay() || 7;
|
||
const daysToMonday = jan4Day === 1 ? 0 : 1 - jan4Day;
|
||
const firstMonday = new Date(Date.UTC(year, 0, 4 + daysToMonday));
|
||
const weekMonday = new Date(firstMonday);
|
||
weekMonday.setUTCDate(firstMonday.getUTCDate() + (weekNumber - 1) * 7);
|
||
const y = weekMonday.getUTCFullYear();
|
||
const m = String(weekMonday.getUTCMonth() + 1).padStart(2, '0');
|
||
const d = String(weekMonday.getUTCDate()).padStart(2, '0');
|
||
return `${y}-${m}-${d}`;
|
||
}
|
||
|
||
// Datum formatieren (YYYY-MM-DD)
|
||
function formatDate(date) {
|
||
const d = new Date(date);
|
||
return d.toISOString().split('T')[0];
|
||
}
|
||
|
||
// Datum formatieren (DD.MM.YYYY)
|
||
function formatDateDE(dateStr) {
|
||
const d = new Date(dateStr);
|
||
return d.toLocaleDateString('de-DE');
|
||
}
|
||
|
||
// Wochentag ermitteln
|
||
function getWeekday(dateStr) {
|
||
const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
|
||
const d = new Date(dateStr);
|
||
return days[d.getDay()];
|
||
}
|
||
|
||
// Hilfsfunktion: Berechnet die Stunden pro Tag (Wochenarbeitszeit / Arbeitstage)
|
||
function getFullDayHours() {
|
||
return userWochenstunden && userArbeitstage ? (userWochenstunden / userArbeitstage) : 8;
|
||
}
|
||
|
||
// Woche laden
|
||
async function loadWeek() {
|
||
try {
|
||
// User-Daten laden (Wochenstunden, Arbeitstage, Standard-Pausenzeit)
|
||
try {
|
||
const userResponse = await fetch('/api/user/data');
|
||
const userData = await userResponse.json();
|
||
userWochenstunden = userData.wochenstunden || 0;
|
||
userArbeitstage = userData.arbeitstage || 5;
|
||
defaultBreakMinutes = userData.default_break_minutes ?? 30;
|
||
} catch (error) {
|
||
console.warn('Konnte User-Daten nicht laden:', error);
|
||
userWochenstunden = 0;
|
||
userArbeitstage = 5;
|
||
defaultBreakMinutes = 30;
|
||
}
|
||
|
||
const parts = currentWeekStart.split('-');
|
||
const weekEndDate = new Date(parseInt(parts[0], 10), parseInt(parts[1], 10) - 1, parseInt(parts[2], 10) + 6);
|
||
const weekEnd = weekEndDate.getFullYear() + '-' + String(weekEndDate.getMonth() + 1).padStart(2, '0') + '-' + String(weekEndDate.getDate()).padStart(2, '0');
|
||
const [entriesResponse, holidaysResponse, latestSubmittedResponse] = await Promise.all([
|
||
fetch(`/api/timesheet/week/${currentWeekStart}`),
|
||
fetch(`/api/timesheet/holidays?week_start=${currentWeekStart}&week_end=${weekEnd}`),
|
||
fetch(`/api/timesheet/latest-submitted/${currentWeekStart}`)
|
||
]);
|
||
const entries = await entriesResponse.json();
|
||
const holidaysData = await holidaysResponse.json();
|
||
const latestSubmittedData = await latestSubmittedResponse.json();
|
||
currentHolidayDates = new Set(holidaysData.dates || []);
|
||
|
||
// Speichere die neueste eingereichte Timesheet-ID
|
||
latestSubmittedTimesheetId = latestSubmittedData.timesheetId || null;
|
||
|
||
// Entries in Object umwandeln für schnellen Zugriff
|
||
currentEntries = {};
|
||
let weekIsSubmitted = false;
|
||
|
||
entries.forEach(entry => {
|
||
currentEntries[entry.date] = entry;
|
||
// Prüfe ob die Woche bereits eingereicht wurde
|
||
if (entry.week_submitted) {
|
||
weekIsSubmitted = true;
|
||
}
|
||
});
|
||
|
||
// Speichere den Status ob die Woche bereits eingereicht wurde
|
||
currentEntries._weekSubmitted = weekIsSubmitted;
|
||
// Speichere ob bereits eine Version existiert (für Grund-Validierung)
|
||
if (entries.length > 0) {
|
||
currentEntries._hasExistingVersion = entries[0].has_existing_version || false;
|
||
currentEntries._latestVersion = entries[0].latest_version || 0;
|
||
}
|
||
|
||
renderWeek();
|
||
} catch (error) {
|
||
console.error('Fehler beim Laden der Woche:', error);
|
||
alert('Fehler beim Laden der Daten');
|
||
}
|
||
}
|
||
|
||
// Woche rendern
|
||
function renderWeek() {
|
||
const startDate = new Date(currentWeekStart);
|
||
const endDate = new Date(startDate);
|
||
endDate.setDate(endDate.getDate() + 6);
|
||
|
||
const calendarWeek = getCalendarWeek(currentWeekStart);
|
||
const submittedText = currentEntries._weekSubmitted === true
|
||
? `<br><span style="color: #28a745;">(bereits Abgegeben)</span>`
|
||
: '';
|
||
document.getElementById('weekTitle').innerHTML =
|
||
`Kalenderwoche ${calendarWeek}<br>${formatDateDE(currentWeekStart)} - ${formatDateDE(formatDate(endDate))}${submittedText}`;
|
||
|
||
let html = `
|
||
<div class="timesheet-grid">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Tag</th>
|
||
<th>Datum</th>
|
||
<th>Start</th>
|
||
<th>Ende</th>
|
||
<th>Pause (Min)</th>
|
||
<th>Stunden</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
`;
|
||
|
||
let totalHours = 0;
|
||
let allWeekdaysFilled = true;
|
||
|
||
// Hilfsfunktion zum Rendern eines einzelnen Tages
|
||
function renderDay(i) {
|
||
const date = new Date(startDate);
|
||
date.setDate(date.getDate() + i);
|
||
const dateStr = formatDate(date);
|
||
const entry = currentEntries[dateStr] || {};
|
||
|
||
const startTime = entry.start_time || '';
|
||
const endTime = entry.end_time || '';
|
||
const breakMinutes = (entry.break_minutes != null && entry.break_minutes !== '') ? entry.break_minutes : defaultBreakMinutes;
|
||
const hours = entry.total_hours || 0;
|
||
const overtimeTaken = entry.overtime_taken_hours || '';
|
||
const vacationType = entry.vacation_type || '';
|
||
const sickStatus = entry.sick_status || false;
|
||
const isHoliday = currentHolidayDates.has(dateStr);
|
||
const weekendTravel = entry.weekend_travel || false;
|
||
const appliedWeekendPercentage = entry.applied_weekend_percentage;
|
||
const isWeekend = (i >= 5); // Samstag (5) oder Sonntag (6)
|
||
|
||
// Tätigkeiten laden
|
||
const activities = [
|
||
{ desc: entry.activity1_desc || '', hours: entry.activity1_hours || 0, projectNumber: entry.activity1_project_number || '' },
|
||
{ desc: entry.activity2_desc || '', hours: entry.activity2_hours || 0, projectNumber: entry.activity2_project_number || '' },
|
||
{ desc: entry.activity3_desc || '', hours: entry.activity3_hours || 0, projectNumber: entry.activity3_project_number || '' },
|
||
{ desc: entry.activity4_desc || '', hours: entry.activity4_hours || 0, projectNumber: entry.activity4_project_number || '' },
|
||
{ desc: entry.activity5_desc || '', hours: entry.activity5_hours || 0, projectNumber: entry.activity5_project_number || '' }
|
||
];
|
||
|
||
// Prüfen ob Werktag (Montag-Freitag, i < 5) ausgefüllt ist
|
||
// Bei Feiertag, ganztägigem Urlaub oder Krank gilt der Tag als ausgefüllt
|
||
// Bei 8 Überstunden (ganzer Tag) gilt der Tag auch als ausgefüllt
|
||
const overtimeValue = overtimeTaken ? parseFloat(overtimeTaken) : 0;
|
||
const fullDayHours = getFullDayHours();
|
||
const isFullDayOvertime = overtimeValue > 0 && Math.abs(overtimeValue - fullDayHours) < 0.01;
|
||
|
||
if (i < 5 && !isHoliday && vacationType !== 'full' && !sickStatus && !isFullDayOvertime && (!startTime || !endTime || startTime.trim() === '' || endTime.trim() === '')) {
|
||
allWeekdaysFilled = false;
|
||
}
|
||
|
||
// Stunden zur Summe hinzufügen
|
||
// Bei ganztägigem Urlaub oder Krank sollten es bereits 8 Stunden sein (vom Backend gesetzt)
|
||
// Feiertag Werktag: 8h Basis + gearbeitete Stunden (jede gearbeitete Stunde = Überstunde)
|
||
// Feiertag am Wochenende: keine Tagesarbeitsstunden, nur gearbeitete Stunden (z. B. Reise)
|
||
// Bei halbem Tag Urlaub werden die Urlaubsstunden später in der Überstunden-Berechnung hinzugezählt
|
||
// Wochenend-Prozentsätze: Nur auf tatsächlich gearbeitete Stunden anwenden (nicht auf Urlaub, Krankheit, Feiertage)
|
||
let hoursToAdd = 0;
|
||
if (isHoliday) {
|
||
if (isWeekend) {
|
||
hoursToAdd = hours || 0; // Feiertag am Wochenende: keine Tagesarbeitsstunden
|
||
} else {
|
||
hoursToAdd = fullDayHours + (hours || 0); // (Wochenarbeitszeit / Arbeitstage) Feiertag + gearbeitete Stunden (= Überstunden)
|
||
}
|
||
} else {
|
||
hoursToAdd = hours || 0;
|
||
// Wochenend-Prozentsatz anwenden (nur wenn weekend_travel aktiviert UND es ist ein Wochenendtag)
|
||
if (isWeekend && weekendTravel && hours > 0 && vacationType !== 'full' && !sickStatus && !isFullDayOvertime) {
|
||
// Verwende gespeicherten Prozentsatz falls vorhanden, sonst aktuellen
|
||
let weekendPercentage = 100;
|
||
if (appliedWeekendPercentage !== null && appliedWeekendPercentage !== undefined) {
|
||
weekendPercentage = appliedWeekendPercentage;
|
||
} else {
|
||
weekendPercentage = getWeekendPercentage(date);
|
||
}
|
||
if (weekendPercentage >= 100) {
|
||
hoursToAdd = hours * (weekendPercentage / 100);
|
||
}
|
||
}
|
||
}
|
||
totalHours += hoursToAdd;
|
||
|
||
// Bearbeitung ist immer möglich, auch nach Abschicken
|
||
// Bei ganztägigem Urlaub oder Krank werden Zeitfelder deaktiviert; Feiertag: Anzeige, Zeitfelder optional (Überstunden)
|
||
const isFullDayVacation = vacationType === 'full';
|
||
const isHalfDayVacation = vacationType === 'half';
|
||
const isSick = sickStatus === true || sickStatus === 1;
|
||
const timeFieldsDisabled = (isFullDayVacation || isSick) ? 'disabled' : '';
|
||
const disabled = '';
|
||
const holidayLabel = isHoliday ? ' <span style="color: #6f42c1;">(Feiertag)</span>' : '';
|
||
|
||
// Stunden-Anzeige für halben Tag Urlaub berechnen
|
||
let hoursDisplay = '';
|
||
if (isFullDayVacation) {
|
||
hoursDisplay = formatHoursMin(fullDayHours) + ' (Urlaub)';
|
||
} else if (isHalfDayVacation) {
|
||
const halfHours = fullDayHours / 2;
|
||
const workHours = hours || 0; // Das sind die gearbeiteten Stunden (ohne Urlaub)
|
||
const totalHours = halfHours + workHours;
|
||
if (workHours > 0.01) {
|
||
hoursDisplay = formatHoursMin(totalHours) + ' (' + formatHoursMin(halfHours) + ' Urlaub + ' + formatHoursMin(workHours) + ')';
|
||
} else {
|
||
hoursDisplay = formatHoursMin(halfHours) + ' (Urlaub)';
|
||
}
|
||
} else if (isSick) {
|
||
hoursDisplay = formatHoursMin(fullDayHours) + ' (Krank)';
|
||
} else if (isHoliday && isWeekend) {
|
||
// Feiertag am Wochenende: keine Tagesarbeitsstunden
|
||
hoursDisplay = formatHoursMin(hours || 0) + ' (Feiertag)';
|
||
} else if (isHoliday && !hours) {
|
||
hoursDisplay = formatHoursMin(fullDayHours) + ' (Feiertag)';
|
||
} else if (isHoliday && hours) {
|
||
hoursDisplay = formatHoursMin(fullDayHours) + ' + ' + formatHoursMin(hours) + ' (Überst.)';
|
||
} else {
|
||
hoursDisplay = formatHoursMin(hours);
|
||
}
|
||
|
||
const requiredBreak = (startTime && endTime) ? calculateRequiredBreakMinutes(startTime, endTime) : null;
|
||
const isBreakBelowLegal = requiredBreak !== null && breakMinutes < requiredBreak;
|
||
const breakClass = isBreakBelowLegal ? 'break-below-legal' : '';
|
||
const breakTitle = isBreakBelowLegal ? ' title="Die Pausenzeit liegt unterhalb der gesetzlichen Vorgabe."' : '';
|
||
|
||
return `
|
||
<tr>
|
||
<td><strong>${getWeekday(dateStr)}</strong></td>
|
||
<td>${formatDateDE(dateStr)}${isFullDayVacation ? ' <span style="color: #28a745;">(Urlaub - ganzer Tag)</span>' : ''}${isSick ? ' <span style="color: #e74c3c;">(Krank)</span>' : ''}${holidayLabel}</td>
|
||
<td>
|
||
<input type="time" id="start_time_${dateStr}" name="start_time_${dateStr}" value="${startTime}"
|
||
data-date="${dateStr}" data-field="start_time"
|
||
step="60"
|
||
${timeFieldsDisabled} ${disabled} oninput="saveEntry(this)" onchange="saveEntry(this)" onblur="saveEntry(this); checkWeekComplete();">
|
||
</td>
|
||
<td>
|
||
<input type="time" id="end_time_${dateStr}" name="end_time_${dateStr}" value="${endTime}"
|
||
data-date="${dateStr}" data-field="end_time"
|
||
step="60"
|
||
${timeFieldsDisabled} ${disabled} oninput="saveEntry(this)" onchange="saveEntry(this)" onblur="saveEntry(this); checkWeekComplete();">
|
||
</td>
|
||
<td>
|
||
<input type="number" id="break_minutes_${dateStr}" name="break_minutes_${dateStr}" value="${breakMinutes}" min="0" step="15" class="${breakClass}"${breakTitle}
|
||
data-date="${dateStr}" data-field="break_minutes"
|
||
${timeFieldsDisabled} ${disabled} oninput="saveEntry(this)" onchange="saveEntry(this)">
|
||
</td>
|
||
<td><strong id="hours_${dateStr}">${hoursDisplay}</strong></td>
|
||
</tr>
|
||
<tr class="activities-row">
|
||
<td colspan="6" class="activities-cell">
|
||
<div class="activities-form">
|
||
<div class="activities-header"><strong>Tätigkeiten:</strong></div>
|
||
${activities.map((activity, idx) => `
|
||
<div class="activity-row">
|
||
<div class="activity-desc">
|
||
<input type="text"
|
||
data-date="${dateStr}"
|
||
data-field="activity${idx + 1}_desc"
|
||
value="${activity.desc || ''}"
|
||
placeholder="Tätigkeit ${idx + 1}"
|
||
${timeFieldsDisabled} ${disabled}
|
||
onblur="saveEntry(this)"
|
||
class="activity-input">
|
||
</div>
|
||
<div class="activity-project">
|
||
<input type="text"
|
||
data-date="${dateStr}"
|
||
data-field="activity${idx + 1}_project_number"
|
||
value="${activity.projectNumber || ''}"
|
||
placeholder="Projektnummer"
|
||
${timeFieldsDisabled} ${disabled}
|
||
onblur="saveEntry(this)"
|
||
class="activity-project-input">
|
||
</div>
|
||
<div class="activity-hours">
|
||
<input type="number"
|
||
data-date="${dateStr}"
|
||
data-field="activity${idx + 1}_hours"
|
||
value="${activity.hours > 0 ? activity.hours.toFixed(2) : ''}"
|
||
min="0"
|
||
step="0.25"
|
||
placeholder="0.00"
|
||
${timeFieldsDisabled} ${disabled}
|
||
onblur="saveEntry(this)"
|
||
oninput="updateOvertimeDisplay();"
|
||
onchange="updateOvertimeDisplay();"
|
||
class="activity-hours-input">
|
||
<span class="activity-hours-label">h</span>
|
||
</div>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
<div class="overtime-vacation-controls" style="margin-top: 15px; display: flex; gap: 15px; align-items: center;">
|
||
<div class="overtime-control">
|
||
<button type="button" class="btn btn-secondary btn-sm" onclick="toggleOvertimeInput('${dateStr}')" style="margin-right: 5px;">
|
||
Überstunden
|
||
</button>
|
||
<div id="overtime-input-${dateStr}" style="display: ${overtimeTaken ? 'inline-block' : 'none'};">
|
||
<input type="number"
|
||
data-date="${dateStr}"
|
||
data-field="overtime_taken_hours"
|
||
value="${overtimeTaken}"
|
||
min="0"
|
||
step="0.25"
|
||
placeholder="0.00"
|
||
${disabled}
|
||
onblur="handleOvertimeChange('${dateStr}', this.value); saveEntry(this);"
|
||
oninput="updateOvertimeDisplay();"
|
||
onchange="handleOvertimeChange('${dateStr}', this.value); updateOvertimeDisplay();"
|
||
style="width: 80px; margin-left: 5px;"
|
||
class="overtime-input">
|
||
<span>h</span>
|
||
</div>
|
||
</div>
|
||
<div class="vacation-control">
|
||
<button type="button" class="btn btn-secondary btn-sm" onclick="toggleVacationSelect('${dateStr}')" style="margin-right: 5px;">
|
||
Urlaub
|
||
</button>
|
||
<div id="vacation-select-${dateStr}" style="display: ${vacationType ? 'inline-block' : 'none'};">
|
||
<select data-date="${dateStr}"
|
||
data-field="vacation_type"
|
||
${disabled}
|
||
onchange="saveEntry(this); updateOvertimeDisplay();"
|
||
oninput="updateOvertimeDisplay();"
|
||
style="margin-left: 5px;"
|
||
class="vacation-select">
|
||
<option value="">--</option>
|
||
<option value="half" ${vacationType === 'half' ? 'selected' : ''}>Halber Tag</option>
|
||
<option value="full" ${vacationType === 'full' ? 'selected' : ''}>Ganzer Tag</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="sick-control">
|
||
<button type="button" class="btn btn-secondary btn-sm" onclick="toggleSickStatus('${dateStr}')" style="margin-right: 5px; ${sickStatus ? 'background-color: #e74c3c; color: white;' : ''}">
|
||
Krank
|
||
</button>
|
||
</div>
|
||
${isWeekend ? `
|
||
<div class="travel-control">
|
||
<button type="button" class="btn btn-secondary btn-sm" onclick="toggleWeekendTravel('${dateStr}')" style="margin-right: 5px; ${weekendTravel ? 'background-color: #28a745; color: white;' : ''}">
|
||
Reise
|
||
</button>
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
`;
|
||
}
|
||
|
||
// Werktage (Montag bis Freitag) rendern
|
||
for (let i = 0; i < 5; i++) {
|
||
html += renderDay(i);
|
||
}
|
||
|
||
// Wochenende (Samstag und Sonntag) in zusammenklappbarer Sektion
|
||
html += `
|
||
<tr>
|
||
<td colspan="6" style="padding: 0; border: none;">
|
||
<div class="weekend-section" style="margin-top: 10px;">
|
||
<div class="collapsible-header" onclick="toggleWeekendSection()" style="cursor: pointer; padding: 12px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
|
||
<h4 style="margin: 0; font-size: 14px; font-weight: 600;">Wochenende</h4>
|
||
<span id="weekendToggleIcon" style="font-size: 16px; transition: transform 0.3s;">▼</span>
|
||
</div>
|
||
<div id="weekendContent" style="display: none; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff;">
|
||
<table style="width: 100%; border-collapse: collapse;">
|
||
<tbody>
|
||
`;
|
||
|
||
// Samstag und Sonntag rendern
|
||
for (let i = 5; i < 7; i++) {
|
||
html += renderDay(i);
|
||
}
|
||
|
||
html += `
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
`;
|
||
|
||
html += `
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById('timesheetTable').innerHTML = html;
|
||
document.getElementById('totalHours').textContent = formatHoursMin(totalHours);
|
||
|
||
// Überstunden-Berechnung (startDate und endDate sind bereits oben deklariert)
|
||
|
||
// Anzahl Werktage berechnen (Montag-Freitag)
|
||
let workdays = 0;
|
||
for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
|
||
const day = d.getDay();
|
||
if (day >= 1 && day <= 5) { // Montag bis Freitag
|
||
workdays++;
|
||
}
|
||
}
|
||
|
||
// Sollstunden berechnen
|
||
// Die Sollstunden für eine Woche sind immer die Wochenstunden, unabhängig von den Arbeitstagen
|
||
// Die Arbeitstage pro Woche bestimmen nur die Stunden pro Tag (für Urlaub/Krank), nicht die Wochenstunden
|
||
const sollStunden = userWochenstunden || 0;
|
||
|
||
// Urlaubsstunden berechnen (Urlaub zählt als normale Arbeitszeit)
|
||
let vacationHours = 0;
|
||
const fullDayHours = getFullDayHours();
|
||
Object.values(currentEntries).forEach(e => {
|
||
if (e.vacation_type === 'full') {
|
||
vacationHours += fullDayHours; // Ganzer Tag = (Wochenarbeitszeit / Arbeitstage) Stunden
|
||
} else if (e.vacation_type === 'half') {
|
||
vacationHours += fullDayHours / 2; // Halber Tag = (Wochenarbeitszeit / Arbeitstage) / 2 Stunden
|
||
}
|
||
});
|
||
|
||
// Überstunden berechnen
|
||
let overtimeTaken = 0;
|
||
Object.values(currentEntries).forEach(e => {
|
||
if (e.overtime_taken_hours) {
|
||
overtimeTaken += parseFloat(e.overtime_taken_hours) || 0;
|
||
}
|
||
});
|
||
|
||
// Überstunden-Berechnung aufrufen
|
||
updateOvertimeDisplay();
|
||
|
||
// Nach dem Rendern die vollständige Validierung durchführen
|
||
// Dies prüft auch direkt die Input-Felder im DOM
|
||
checkWeekComplete();
|
||
}
|
||
|
||
// Überstunden-Anzeige aktualisieren (wird bei jeder Änderung aufgerufen)
|
||
function updateOvertimeDisplay() {
|
||
const startDate = new Date(currentWeekStart);
|
||
const endDate = new Date(startDate);
|
||
endDate.setDate(endDate.getDate() + 6);
|
||
|
||
// Anzahl Werktage berechnen (Montag-Freitag)
|
||
let workdays = 0;
|
||
for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
|
||
const day = d.getDay();
|
||
if (day >= 1 && day <= 5) { // Montag bis Freitag
|
||
workdays++;
|
||
}
|
||
}
|
||
|
||
// Sollstunden berechnen
|
||
// Die Sollstunden für eine Woche sind immer die Wochenstunden, unabhängig von den Arbeitstagen
|
||
// Die Arbeitstage pro Woche bestimmen nur die Stunden pro Tag (für Urlaub/Krank), nicht die Wochenstunden
|
||
const sollStunden = userWochenstunden || 0;
|
||
|
||
// Gesamtstunden berechnen - direkt aus DOM-Elementen lesen für Echtzeit-Aktualisierung
|
||
let totalHours = 0;
|
||
let vacationHours = 0;
|
||
const fullDayHours = getFullDayHours(); // Verwende die Hilfsfunktion statt manueller Berechnung
|
||
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);
|
||
date.setDate(date.getDate() + i);
|
||
const dateStr = formatDate(date);
|
||
|
||
// Prüfe Urlaub-Status und Krank-Status
|
||
const vacationSelect = document.querySelector(`select[data-date="${dateStr}"][data-field="vacation_type"]`);
|
||
const vacationType = vacationSelect ? vacationSelect.value : (currentEntries[dateStr]?.vacation_type || '');
|
||
// Für sick_status: Wert aus currentEntries lesen (da keine Checkbox mehr vorhanden)
|
||
const sickStatus = 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 += fullDayHours; // Ganzer Tag Urlaub = (Wochenarbeitszeit / Arbeitstage) Stunden
|
||
} else if (vacationType === 'half') {
|
||
vacationHours += fullDayHours / 2; // Halber Tag Urlaub = (Wochenarbeitszeit / Arbeitstage) / 2 Stunden
|
||
// Bei halbem Tag Urlaub können noch Arbeitsstunden vorhanden sein
|
||
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 && !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);
|
||
// Wochenend-Prozentsatz anwenden (nur wenn weekend_travel aktiviert UND es ist ein Wochenendtag)
|
||
const dayOfWeek = date.getDay();
|
||
const isWeekend = (dayOfWeek === 6 || dayOfWeek === 0);
|
||
// Für weekend_travel: Wert aus currentEntries lesen (da keine Checkbox mehr vorhanden)
|
||
const weekendTravel = currentEntries[dateStr]?.weekend_travel || false;
|
||
let adjustedHours = hours;
|
||
if (isWeekend && weekendTravel && hours > 0 && vacationType !== 'full' && !sickStatus && !isFullDayOvertime) {
|
||
// Verwende gespeicherten Prozentsatz falls vorhanden, sonst aktuellen
|
||
let weekendPercentage = 100;
|
||
const entry = currentEntries[dateStr] || {};
|
||
if (entry.applied_weekend_percentage !== null && entry.applied_weekend_percentage !== undefined) {
|
||
weekendPercentage = entry.applied_weekend_percentage;
|
||
} else {
|
||
weekendPercentage = getWeekendPercentage(date);
|
||
}
|
||
if (weekendPercentage >= 100) {
|
||
adjustedHours = hours * (weekendPercentage / 100);
|
||
}
|
||
}
|
||
totalHours += adjustedHours;
|
||
} else if (currentEntries[dateStr]?.total_hours && !isFullDayOvertime) {
|
||
// Fallback auf gespeicherte Werte
|
||
let hours = parseFloat(currentEntries[dateStr].total_hours) || 0;
|
||
// Wochenend-Prozentsatz anwenden (nur wenn weekend_travel aktiviert UND es ist ein Wochenendtag)
|
||
const dayOfWeek = date.getDay();
|
||
const isWeekend = (dayOfWeek === 6 || dayOfWeek === 0);
|
||
// Für weekend_travel: Wert aus currentEntries lesen (da keine Checkbox mehr vorhanden)
|
||
const weekendTravel = currentEntries[dateStr]?.weekend_travel || false;
|
||
if (isWeekend && weekendTravel && hours > 0 && vacationType !== 'full' && !sickStatus) {
|
||
// Verwende gespeicherten Prozentsatz falls vorhanden, sonst aktuellen
|
||
const entry = currentEntries[dateStr] || {};
|
||
let weekendPercentage = 100;
|
||
if (entry.applied_weekend_percentage !== null && entry.applied_weekend_percentage !== undefined) {
|
||
weekendPercentage = entry.applied_weekend_percentage;
|
||
} else {
|
||
weekendPercentage = getWeekendPercentage(date);
|
||
}
|
||
if (weekendPercentage >= 100) {
|
||
hours = hours * (weekendPercentage / 100);
|
||
}
|
||
}
|
||
totalHours += hours;
|
||
}
|
||
} else if (sickStatus) {
|
||
totalHours += fullDayHours; // Krank = (Wochenarbeitszeit / Arbeitstage) Stunden
|
||
} else if (currentHolidayDates.has(dateStr)) {
|
||
// Feiertag: Werktag = Basis + gearbeitete Stunden; Wochenende = nur gearbeitete Stunden (keine Tagesarbeitsstunden)
|
||
const dayOfWeek = date.getDay();
|
||
const isWeekendHoliday = (dayOfWeek === 6 || dayOfWeek === 0);
|
||
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 startTime = startInput ? startInput.value : '';
|
||
const endTime = endInput ? endInput.value : '';
|
||
let worked = 0;
|
||
if (startTime && endTime) {
|
||
const breakInput = document.querySelector(`input[data-date="${dateStr}"][data-field="break_minutes"]`);
|
||
const breakMinutes = parseInt(breakInput ? breakInput.value : 0) || 0;
|
||
const start = new Date(`2000-01-01T${startTime}`);
|
||
const end = new Date(`2000-01-01T${endTime}`);
|
||
worked = (end - start) / (1000 * 60 * 60) - (breakMinutes / 60);
|
||
} else if (currentEntries[dateStr]?.total_hours) {
|
||
worked = parseFloat(currentEntries[dateStr].total_hours) || 0;
|
||
}
|
||
if (isWeekendHoliday) {
|
||
totalHours += worked; // Feiertag am Wochenende: keine Tagesarbeitsstunden
|
||
} else {
|
||
totalHours += fullDayHours + worked; // (Wochenarbeitszeit / Arbeitstage) Feiertag + gearbeitete Stunden (= Überstunden)
|
||
}
|
||
} else {
|
||
// 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);
|
||
// Wochenend-Prozentsatz anwenden (nur wenn weekend_travel aktiviert UND es ist ein Wochenendtag)
|
||
const dayOfWeek = date.getDay();
|
||
const isWeekend = (dayOfWeek === 6 || dayOfWeek === 0);
|
||
const travelCheckbox = document.querySelector(`input[data-date="${dateStr}"][data-field="weekend_travel"]`);
|
||
const weekendTravel = travelCheckbox ? travelCheckbox.checked : (currentEntries[dateStr]?.weekend_travel || false);
|
||
let adjustedHours = hours;
|
||
if (isWeekend && weekendTravel && hours > 0 && !isFullDayOvertime) {
|
||
// Verwende gespeicherten Prozentsatz falls vorhanden, sonst aktuellen
|
||
const entry = currentEntries[dateStr] || {};
|
||
let weekendPercentage = 100;
|
||
if (entry.applied_weekend_percentage !== null && entry.applied_weekend_percentage !== undefined) {
|
||
weekendPercentage = entry.applied_weekend_percentage;
|
||
} else {
|
||
weekendPercentage = getWeekendPercentage(date);
|
||
}
|
||
if (weekendPercentage >= 100) {
|
||
adjustedHours = hours * (weekendPercentage / 100);
|
||
}
|
||
}
|
||
totalHours += adjustedHours;
|
||
} else if (currentEntries[dateStr]?.total_hours) {
|
||
// Fallback auf gespeicherte Werte
|
||
let hours = parseFloat(currentEntries[dateStr].total_hours) || 0;
|
||
// Wochenend-Prozentsatz anwenden (nur wenn weekend_travel aktiviert UND es ist ein Wochenendtag)
|
||
const dayOfWeek = date.getDay();
|
||
const isWeekend = (dayOfWeek === 6 || dayOfWeek === 0);
|
||
const travelCheckbox = document.querySelector(`input[data-date="${dateStr}"][data-field="weekend_travel"]`);
|
||
const weekendTravel = travelCheckbox ? travelCheckbox.checked : (currentEntries[dateStr]?.weekend_travel || false);
|
||
if (isWeekend && weekendTravel && hours > 0 && !isFullDayOvertime) {
|
||
// Verwende gespeicherten Prozentsatz falls vorhanden, sonst aktuellen
|
||
const entry = currentEntries[dateStr] || {};
|
||
let weekendPercentage = 100;
|
||
if (entry.applied_weekend_percentage !== null && entry.applied_weekend_percentage !== undefined) {
|
||
weekendPercentage = entry.applied_weekend_percentage;
|
||
} else {
|
||
weekendPercentage = getWeekendPercentage(date);
|
||
}
|
||
if (weekendPercentage >= 100) {
|
||
hours = hours * (weekendPercentage / 100);
|
||
}
|
||
}
|
||
totalHours += hours;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Genommene Überstunden berechnen - direkt aus DOM lesen
|
||
let overtimeTaken = 0;
|
||
const startDateObj3 = new Date(startDate);
|
||
for (let i = 0; i < 7; i++) {
|
||
const date = new Date(startDateObj3);
|
||
date.setDate(date.getDate() + i);
|
||
const dateStr = formatDate(date);
|
||
|
||
const overtimeInput = document.querySelector(`input[data-date="${dateStr}"][data-field="overtime_taken_hours"]`);
|
||
if (overtimeInput && overtimeInput.value) {
|
||
overtimeTaken += parseFloat(overtimeInput.value) || 0;
|
||
} else if (currentEntries[dateStr]?.overtime_taken_hours) {
|
||
overtimeTaken += parseFloat(currentEntries[dateStr].overtime_taken_hours) || 0;
|
||
}
|
||
}
|
||
|
||
// Überstunden berechnen (wie im Backend: mit adjustedSollStunden)
|
||
// totalHours enthält bereits Feiertagsstunden (8h oder gearbeitete Stunden) aus dem Feiertag-Zweig oben
|
||
const totalHoursWithVacation = totalHours + vacationHours;
|
||
const adjustedSollStunden = sollStunden - (fullDayOvertimeDays * fullDayHours);
|
||
// overtimeHours = Überstunden diese Woche (wie im Backend berechnet)
|
||
// Genommene Überstunden werden abgezogen, um die Netto-Überstunden zu erhalten
|
||
const overtimeHours = totalHoursWithVacation - adjustedSollStunden - overtimeTaken;
|
||
|
||
// Überstunden-Anzeige aktualisieren
|
||
const overtimeSummaryItem = document.getElementById('overtimeSummaryItem');
|
||
const overtimeHoursSpan = document.getElementById('overtimeHours');
|
||
if (overtimeSummaryItem && overtimeHoursSpan) {
|
||
overtimeSummaryItem.style.display = 'block';
|
||
const sign = overtimeHours >= 0 ? '+' : '';
|
||
overtimeHoursSpan.textContent = (sign === '+' ? '+' : '') + formatHoursMin(overtimeHours);
|
||
overtimeHoursSpan.style.color = overtimeHours >= 0 ? '#27ae60' : '#e74c3c';
|
||
}
|
||
|
||
// Gesamtstunden-Anzeige aktualisieren
|
||
const totalHoursElement = document.getElementById('totalHours');
|
||
if (totalHoursElement) {
|
||
totalHoursElement.textContent = formatHoursMin(totalHoursWithVacation);
|
||
}
|
||
}
|
||
|
||
// Überstunden-Änderung verarbeiten
|
||
function handleOvertimeChange(dateStr, overtimeHours) {
|
||
if (!userWochenstunden || userWochenstunden <= 0) {
|
||
console.warn('Wochenstunden nicht verfügbar, kann Überstunden-Logik nicht anwenden');
|
||
return;
|
||
}
|
||
|
||
const fullDayHours = getFullDayHours();
|
||
const overtimeValue = parseFloat(overtimeHours) || 0;
|
||
|
||
// Entferne "Überstunden" aus Activity-Feldern falls vorhanden
|
||
// (Überstunden werden nur im PDF angezeigt, nicht als Tätigkeit)
|
||
for (let i = 1; i <= 5; i++) {
|
||
const descInput = document.querySelector(`input[data-date="${dateStr}"][data-field="activity${i}_desc"]`);
|
||
const hoursInput = document.querySelector(`input[data-date="${dateStr}"][data-field="activity${i}_hours"]`);
|
||
|
||
if (descInput && descInput.value && descInput.value.trim().toLowerCase() === 'überstunden') {
|
||
descInput.value = '';
|
||
saveEntry(descInput);
|
||
if (hoursInput) {
|
||
hoursInput.value = '';
|
||
saveEntry(hoursInput);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Prüfe ob ganzer Tag Überstunden
|
||
if (overtimeValue > 0 && Math.abs(overtimeValue - fullDayHours) < 0.01) {
|
||
// Ganzer Tag Überstunden - leere Start- und End-Zeit
|
||
const startInput = document.querySelector(`input[data-date="${dateStr}"][data-field="start_time"]`);
|
||
const endInput = document.querySelector(`input[data-date="${dateStr}"][data-field="end_time"]`);
|
||
|
||
if (startInput) {
|
||
startInput.value = '';
|
||
saveEntry(startInput);
|
||
}
|
||
|
||
if (endInput) {
|
||
endInput.value = '';
|
||
saveEntry(endInput);
|
||
}
|
||
}
|
||
// Bei weniger als ganzer Tag oder keine Überstunden: keine weiteren Aktionen
|
||
// Überstunden werden nur im PDF als Information angezeigt
|
||
}
|
||
|
||
// Berechnet die gesetzlich erforderliche Mindestpause basierend auf der Arbeitszeit
|
||
function calculateRequiredBreakMinutes(startTime, endTime) {
|
||
if (!startTime || !endTime) return null;
|
||
|
||
// Berechne Arbeitszeit in Stunden
|
||
const [startHours, startMinutes] = startTime.split(':').map(Number);
|
||
const [endHours, endMinutes] = endTime.split(':').map(Number);
|
||
const startTotalMinutes = startHours * 60 + startMinutes;
|
||
const endTotalMinutes = endHours * 60 + endMinutes;
|
||
const workMinutes = endTotalMinutes - startTotalMinutes;
|
||
const workHours = workMinutes / 60;
|
||
|
||
// Gesetzliche Mindestpause bestimmen
|
||
if (workHours > 9) {
|
||
return 45; // Mehr als 9 Stunden: 45 Minuten
|
||
} else if (workHours >= 6) {
|
||
return 30; // 6 bis 9 Stunden: 30 Minuten
|
||
}
|
||
return 0; // Weniger als 6 Stunden: keine gesetzliche Pause erforderlich
|
||
}
|
||
|
||
// Aktualisiert die visuelle Kennzeichnung (nur rot + Tooltip wenn unter gesetzlicher Mindestpause)
|
||
function updateBreakCompliance(dateStr) {
|
||
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"]`);
|
||
if (!breakInput) return;
|
||
breakInput.classList.remove('break-below-legal');
|
||
breakInput.removeAttribute('title');
|
||
const startTime = startInput && startInput.value ? startInput.value.trim() : '';
|
||
const endTime = endInput && endInput.value ? endInput.value.trim() : '';
|
||
if (!startTime || !endTime) return;
|
||
const required = calculateRequiredBreakMinutes(startTime, endTime);
|
||
if (required === null) return;
|
||
const breakVal = breakInput.value ? (parseInt(breakInput.value, 10) || 0) : 0;
|
||
if (breakVal < required) {
|
||
breakInput.classList.add('break-below-legal');
|
||
breakInput.setAttribute('title', 'Die Pausenzeit liegt unterhalb der gesetzlichen Vorgabe.');
|
||
}
|
||
}
|
||
|
||
// Eintrag speichern
|
||
async function saveEntry(input) {
|
||
const date = input.dataset.date;
|
||
const field = input.dataset.field;
|
||
const value = input.value;
|
||
|
||
// Entferne Fehlermarkierung wenn Feld ausgefüllt wird
|
||
if (input.classList.contains('missing-field')) {
|
||
input.classList.remove('missing-field');
|
||
input.style.borderColor = '';
|
||
input.style.backgroundColor = '';
|
||
}
|
||
|
||
// Aktualisiere currentEntries
|
||
if (!currentEntries[date]) {
|
||
currentEntries[date] = { date };
|
||
}
|
||
|
||
currentEntries[date][field] = value;
|
||
|
||
// Lese alle aktuellen Werte direkt aus dem DOM, nicht nur aus currentEntries
|
||
// Das stellt sicher, dass auch Werte gespeichert werden, die noch nicht in currentEntries sind
|
||
// WICHTIG: Wenn das aktuelle Input-Element das Feld ist, das wir suchen, verwende direkt dessen Wert
|
||
const startInput = document.querySelector(`input[data-date="${date}"][data-field="start_time"]`);
|
||
const endInput = document.querySelector(`input[data-date="${date}"][data-field="end_time"]`);
|
||
const breakInput = document.querySelector(`input[data-date="${date}"][data-field="break_minutes"]`);
|
||
const notesInput = document.querySelector(`textarea[data-date="${date}"][data-field="notes"]`);
|
||
const vacationSelect = document.querySelector(`select[data-date="${date}"][data-field="vacation_type"]`);
|
||
const overtimeInput = document.querySelector(`input[data-date="${date}"][data-field="overtime_taken_hours"]`);
|
||
const sickCheckbox = document.querySelector(`input[data-date="${date}"][data-field="sick_status"]`);
|
||
|
||
// Wenn das aktuelle Input-Element das gesuchte Feld ist, verwende dessen Wert direkt
|
||
// Das stellt sicher, dass der Wert auch bei oninput/onchange sofort verfügbar ist
|
||
const actualStartTime = (input.dataset.field === 'start_time' && input.value) ? input.value :
|
||
(startInput && startInput.value && startInput.value.trim() !== '') ? startInput.value :
|
||
(currentEntries[date].start_time || null);
|
||
const actualEndTime = (input.dataset.field === 'end_time' && input.value) ? input.value :
|
||
(endInput && endInput.value && endInput.value.trim() !== '') ? endInput.value :
|
||
(currentEntries[date].end_time || null);
|
||
|
||
// Aktuelle Werte aus DOM lesen (falls vorhanden), sonst aus currentEntries
|
||
// Wichtig: Leere Strings werden zu null konvertiert, aber ein Wert sollte vorhanden sein
|
||
const start_time = actualStartTime;
|
||
const end_time = actualEndTime;
|
||
let break_minutes = breakInput && breakInput.value ? (parseInt(breakInput.value) || 0) : (parseInt(currentEntries[date].break_minutes) || 0);
|
||
|
||
const notes = notesInput ? (notesInput.value || '') : (currentEntries[date].notes || '');
|
||
const vacation_type = vacationSelect && vacationSelect.value ? vacationSelect.value : (currentEntries[date].vacation_type || null);
|
||
const overtime_taken_hours = overtimeInput && overtimeInput.value ? overtimeInput.value : (currentEntries[date].overtime_taken_hours || null);
|
||
// Für sick_status und weekend_travel: Wert aus currentEntries lesen (da keine Checkboxen mehr vorhanden)
|
||
const sick_status = (input.dataset.field === 'sick_status') ? (value === 'true' || value === true || value === '1' || value === 1) : (currentEntries[date].sick_status || false);
|
||
const weekend_travel = (input.dataset.field === 'weekend_travel') ? (value === 'true' || value === true || value === '1' || value === 1) : (currentEntries[date].weekend_travel || false);
|
||
|
||
// Activity-Felder aus DOM lesen
|
||
const activities = [];
|
||
for (let i = 1; i <= 5; i++) {
|
||
const descInput = document.querySelector(`input[data-date="${date}"][data-field="activity${i}_desc"]`);
|
||
const hoursInput = document.querySelector(`input[data-date="${date}"][data-field="activity${i}_hours"]`);
|
||
const projectInput = document.querySelector(`input[data-date="${date}"][data-field="activity${i}_project_number"]`);
|
||
|
||
activities.push({
|
||
desc: descInput ? (descInput.value || null) : (currentEntries[date][`activity${i}_desc`] || null),
|
||
hours: hoursInput ? (parseFloat(hoursInput.value) || 0) : (parseFloat(currentEntries[date][`activity${i}_hours`]) || 0),
|
||
projectNumber: projectInput ? (projectInput.value || null) : (currentEntries[date][`activity${i}_project_number`] || null)
|
||
});
|
||
}
|
||
|
||
// Aktualisiere currentEntries mit den DOM-Werten
|
||
currentEntries[date].start_time = start_time;
|
||
currentEntries[date].end_time = end_time;
|
||
currentEntries[date].break_minutes = break_minutes;
|
||
currentEntries[date].notes = notes;
|
||
currentEntries[date].vacation_type = vacation_type;
|
||
currentEntries[date].overtime_taken_hours = overtime_taken_hours;
|
||
currentEntries[date].sick_status = sick_status;
|
||
currentEntries[date].weekend_travel = weekend_travel;
|
||
for (let i = 1; i <= 5; i++) {
|
||
currentEntries[date][`activity${i}_desc`] = activities[i-1].desc;
|
||
currentEntries[date][`activity${i}_hours`] = activities[i-1].hours;
|
||
currentEntries[date][`activity${i}_project_number`] = activities[i-1].projectNumber;
|
||
}
|
||
|
||
// SOFORTIGE DOM-UPDATES wenn vacation_type geändert wurde
|
||
if (input.dataset.field === 'vacation_type') {
|
||
const isFullDayVacation = vacation_type === 'full';
|
||
const isHalfDayVacation = vacation_type === 'half';
|
||
const fullDayHours = getFullDayHours();
|
||
const entry = currentEntries[date];
|
||
const isHoliday = currentHolidayDates.has(date);
|
||
const isSick = entry.sick_status || false;
|
||
const hours = entry.total_hours || 0;
|
||
|
||
// 1. Datum-Zelle: "(Urlaub - ganzer Tag)" in grün hinzufügen/entfernen
|
||
// Suche die Datum-Zelle über verschiedene Wege
|
||
let dateCell = null;
|
||
|
||
// Versuche zuerst über das Select-Element selbst
|
||
if (input.tagName === 'SELECT' && input.dataset.date === date) {
|
||
const selectRow = input.closest('tr');
|
||
if (selectRow) {
|
||
// Das Select ist in der activities-row, suche die vorherige Zeile
|
||
const prevRow = selectRow.previousElementSibling;
|
||
if (prevRow) {
|
||
dateCell = prevRow.querySelector('td:nth-child(2)');
|
||
}
|
||
}
|
||
}
|
||
|
||
// Fallback: Suche über start_time Input
|
||
if (!dateCell) {
|
||
const startInput = document.querySelector(`input[data-date="${date}"][data-field="start_time"]`);
|
||
if (startInput) {
|
||
const row = startInput.closest('tr');
|
||
if (row) {
|
||
dateCell = row.querySelector('td:nth-child(2)'); // Zweite Spalte ist das Datum
|
||
}
|
||
}
|
||
}
|
||
|
||
// Fallback: Suche direkt über alle Tabellenzeilen
|
||
if (!dateCell) {
|
||
const allRows = document.querySelectorAll('#timesheetTable tr, table tr');
|
||
for (let row of allRows) {
|
||
const testInput = row.querySelector(`input[data-date="${date}"][data-field="start_time"]`);
|
||
if (testInput) {
|
||
dateCell = row.querySelector('td:nth-child(2)');
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (dateCell) {
|
||
let dateText = dateCell.innerHTML;
|
||
const vacationSpan = '<span style="color: #28a745;">(Urlaub - ganzer Tag)</span>';
|
||
|
||
if (isFullDayVacation) {
|
||
// Entferne zuerst alle Urlaub-Spans falls vorhanden (mit verschiedenen möglichen Formaten)
|
||
dateText = dateText.replace(/\s*<span[^>]*>\(Urlaub - ganzer Tag\)<\/span>/gi, '');
|
||
// Entferne auch "(Krank)" falls vorhanden
|
||
dateText = dateText.replace(/\s*<span[^>]*>\(Krank\)<\/span>/gi, '');
|
||
// Füge "(Urlaub - ganzer Tag)" hinzu, wenn noch nicht vorhanden
|
||
if (!dateText.includes('(Urlaub - ganzer Tag)')) {
|
||
dateText += ' ' + vacationSpan;
|
||
}
|
||
dateCell.innerHTML = dateText;
|
||
} else {
|
||
// Entferne "(Urlaub - ganzer Tag)" Span (mit verschiedenen möglichen Formaten)
|
||
dateText = dateText.replace(/\s*<span[^>]*>\(Urlaub - ganzer Tag\)<\/span>/gi, '');
|
||
dateCell.innerHTML = dateText;
|
||
}
|
||
}
|
||
|
||
// 2. Stunden-Anzeige sofort aktualisieren
|
||
const hoursElement = document.getElementById(`hours_${date}`);
|
||
if (hoursElement) {
|
||
if (isFullDayVacation) {
|
||
// Ganzer Tag Urlaub: Zeige fullDayHours mit "(Urlaub)" Label
|
||
hoursElement.textContent = formatHoursMin(fullDayHours) + ' (Urlaub)';
|
||
currentEntries[date].total_hours = fullDayHours;
|
||
} else if (isHalfDayVacation) {
|
||
// Halber Tag Urlaub: Berechne Stunden aus Start/Ende falls vorhanden
|
||
const startInput = document.querySelector(`input[data-date="${date}"][data-field="start_time"]`);
|
||
const endInput = document.querySelector(`input[data-date="${date}"][data-field="end_time"]`);
|
||
const breakInput = document.querySelector(`input[data-date="${date}"][data-field="break_minutes"]`);
|
||
|
||
const halfHours = fullDayHours / 2;
|
||
let workHours = 0;
|
||
|
||
if (startInput && endInput && startInput.value && endInput.value) {
|
||
const start = new Date(`2000-01-01T${startInput.value}`);
|
||
const end = new Date(`2000-01-01T${endInput.value}`);
|
||
const diffMs = end - start;
|
||
const breakMinutes = parseInt(breakInput ? breakInput.value : 0) || 0;
|
||
workHours = (diffMs / (1000 * 60 * 60)) - (breakMinutes / 60);
|
||
}
|
||
|
||
const totalHours = halfHours + workHours;
|
||
if (workHours > 0) {
|
||
hoursElement.textContent = formatHoursMin(totalHours) + ' (' + formatHoursMin(halfHours) + ' Urlaub + ' + formatHoursMin(workHours) + ')';
|
||
} else {
|
||
hoursElement.textContent = formatHoursMin(halfHours) + ' (Urlaub)';
|
||
}
|
||
currentEntries[date].total_hours = totalHours;
|
||
} else {
|
||
// Zurück zu normaler Anzeige basierend auf anderen Status
|
||
const d = new Date(date);
|
||
const isWeekendHoliday = isHoliday && (d.getDay() === 6 || d.getDay() === 0);
|
||
if (isSick) {
|
||
hoursElement.textContent = formatHoursMin(fullDayHours) + ' (Krank)';
|
||
} else if (isWeekendHoliday) {
|
||
hoursElement.textContent = formatHoursMin(hours || 0) + ' (Feiertag)';
|
||
} else if (isHoliday && !hours) {
|
||
hoursElement.textContent = formatHoursMin(fullDayHours) + ' (Feiertag)';
|
||
} else if (isHoliday && hours) {
|
||
hoursElement.textContent = formatHoursMin(fullDayHours) + ' + ' + formatHoursMin(hours) + ' (Überst.)';
|
||
} else {
|
||
hoursElement.textContent = formatHoursMin(hours);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 3. Tätigkeiten-Felder sofort deaktivieren/aktivieren (nur bei ganztägigem Urlaub)
|
||
const activityInputs = document.querySelectorAll(`input[data-date="${date}"][data-field^="activity"]`);
|
||
activityInputs.forEach(input => {
|
||
if (isFullDayVacation) {
|
||
input.disabled = true;
|
||
} else {
|
||
// Nur aktivieren wenn nicht krank
|
||
input.disabled = isSick;
|
||
}
|
||
});
|
||
|
||
// 4. Zeitfelder sofort deaktivieren/aktivieren (nur bei ganztägigem Urlaub)
|
||
const timeInputs = document.querySelectorAll(`input[data-date="${date}"][data-field="start_time"], input[data-date="${date}"][data-field="end_time"], input[data-date="${date}"][data-field="break_minutes"]`);
|
||
timeInputs.forEach(input => {
|
||
if (isFullDayVacation) {
|
||
input.disabled = true;
|
||
} else {
|
||
// Nur aktivieren wenn nicht krank
|
||
input.disabled = isSick;
|
||
}
|
||
});
|
||
|
||
// 5. Bei ganztägigem Urlaub: Setze "Urlaub" als erste Tätigkeit und leere andere
|
||
if (isFullDayVacation) {
|
||
const descInput = document.querySelector(`input[data-date="${date}"][data-field="activity1_desc"]`);
|
||
const hoursInput = document.querySelector(`input[data-date="${date}"][data-field="activity1_hours"]`);
|
||
|
||
if (descInput) {
|
||
descInput.value = 'Urlaub';
|
||
currentEntries[date].activity1_desc = 'Urlaub';
|
||
}
|
||
if (hoursInput) {
|
||
hoursInput.value = fullDayHours.toFixed(2);
|
||
currentEntries[date].activity1_hours = fullDayHours;
|
||
}
|
||
|
||
// Leere andere Tätigkeiten
|
||
for (let i = 2; i <= 5; i++) {
|
||
const descInput = document.querySelector(`input[data-date="${date}"][data-field="activity${i}_desc"]`);
|
||
const hoursInput = document.querySelector(`input[data-date="${date}"][data-field="activity${i}_hours"]`);
|
||
const projectInput = document.querySelector(`input[data-date="${date}"][data-field="activity${i}_project_number"]`);
|
||
|
||
if (descInput) {
|
||
descInput.value = '';
|
||
currentEntries[date][`activity${i}_desc`] = null;
|
||
}
|
||
if (hoursInput) {
|
||
hoursInput.value = '';
|
||
currentEntries[date][`activity${i}_hours`] = 0;
|
||
}
|
||
if (projectInput) {
|
||
projectInput.value = '';
|
||
currentEntries[date][`activity${i}_project_number`] = null;
|
||
}
|
||
}
|
||
} else {
|
||
// Bei Abwahl von Urlaub (nicht full): Alle Tätigkeitsfelder leeren
|
||
for (let i = 1; i <= 5; i++) {
|
||
const descInput = document.querySelector(`input[data-date="${date}"][data-field="activity${i}_desc"]`);
|
||
const hoursInput = document.querySelector(`input[data-date="${date}"][data-field="activity${i}_hours"]`);
|
||
const projectInput = document.querySelector(`input[data-date="${date}"][data-field="activity${i}_project_number"]`);
|
||
|
||
if (descInput) {
|
||
descInput.value = '';
|
||
currentEntries[date][`activity${i}_desc`] = null;
|
||
}
|
||
if (hoursInput) {
|
||
hoursInput.value = '';
|
||
currentEntries[date][`activity${i}_hours`] = 0;
|
||
}
|
||
if (projectInput) {
|
||
projectInput.value = '';
|
||
currentEntries[date][`activity${i}_project_number`] = null;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const entry = currentEntries[date];
|
||
|
||
|
||
try {
|
||
const response = await fetch('/api/timesheet/save', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
date: date,
|
||
start_time: start_time,
|
||
end_time: end_time,
|
||
break_minutes: break_minutes,
|
||
notes: notes,
|
||
activity1_desc: activities[0].desc,
|
||
activity1_hours: activities[0].hours,
|
||
activity1_project_number: activities[0].projectNumber,
|
||
activity2_desc: activities[1].desc,
|
||
activity2_hours: activities[1].hours,
|
||
activity2_project_number: activities[1].projectNumber,
|
||
activity3_desc: activities[2].desc,
|
||
activity3_hours: activities[2].hours,
|
||
activity3_project_number: activities[2].projectNumber,
|
||
activity4_desc: activities[3].desc,
|
||
activity4_hours: activities[3].hours,
|
||
activity4_project_number: activities[3].projectNumber,
|
||
activity5_desc: activities[4].desc,
|
||
activity5_hours: activities[4].hours,
|
||
activity5_project_number: activities[4].projectNumber,
|
||
overtime_taken_hours: overtime_taken_hours,
|
||
vacation_type: vacation_type,
|
||
sick_status: sick_status,
|
||
weekend_travel: weekend_travel
|
||
})
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
// Aktualisiere Stunden-Anzeige
|
||
const hoursElement = document.getElementById(`hours_${date}`);
|
||
if (hoursElement && result.total_hours !== undefined) {
|
||
// Prüfe ob Urlaub oder Krank aktiv ist, um das richtige Label anzuzeigen
|
||
const entry = currentEntries[date] || {};
|
||
const vacationType = entry.vacation_type || '';
|
||
const isSick = entry.sick_status || false;
|
||
const isHoliday = currentHolidayDates.has(date);
|
||
const isFullDayVacation = vacationType === 'full';
|
||
const isHalfDayVacation = vacationType === 'half';
|
||
const fullDayHours = getFullDayHours();
|
||
|
||
let hoursText = formatHoursMin(result.total_hours);
|
||
|
||
if (isFullDayVacation) {
|
||
hoursText = formatHoursMin(fullDayHours) + ' (Urlaub)';
|
||
} else if (isHalfDayVacation) {
|
||
// Bei halbem Tag Urlaub: result.total_hours enthält nur die gearbeiteten Stunden
|
||
// Die Urlaubsstunden müssen addiert werden
|
||
const halfHours = fullDayHours / 2;
|
||
const workHours = result.total_hours || 0; // Das sind die gearbeiteten Stunden
|
||
const totalHours = halfHours + workHours; // Gesamt = Urlaub + gearbeitet
|
||
|
||
if (workHours > 0.01) {
|
||
hoursText = formatHoursMin(totalHours) + ' (' + formatHoursMin(halfHours) + ' Urlaub + ' + formatHoursMin(workHours) + ')';
|
||
} else {
|
||
hoursText = formatHoursMin(halfHours) + ' (Urlaub)';
|
||
}
|
||
|
||
// Aktualisiere currentEntries mit den Gesamtstunden
|
||
currentEntries[date].total_hours = totalHours;
|
||
} else if (isSick) {
|
||
hoursText = formatHoursMin(fullDayHours) + ' (Krank)';
|
||
} else if (isHoliday) {
|
||
const d = new Date(date);
|
||
const isWeekendHoliday = (d.getDay() === 6 || d.getDay() === 0);
|
||
if (isWeekendHoliday) {
|
||
hoursText = formatHoursMin(result.total_hours || 0) + ' (Feiertag)';
|
||
} else if (result.total_hours <= fullDayHours) {
|
||
hoursText = formatHoursMin(fullDayHours) + ' (Feiertag)';
|
||
} else {
|
||
const overtime = result.total_hours - fullDayHours;
|
||
hoursText = formatHoursMin(fullDayHours) + ' + ' + formatHoursMin(overtime) + ' (Überst.)';
|
||
}
|
||
}
|
||
|
||
hoursElement.textContent = hoursText;
|
||
// total_hours wurde bereits für halben Tag Urlaub gesetzt, sonst verwende result.total_hours
|
||
if (!isHalfDayVacation) {
|
||
currentEntries[date].total_hours = result.total_hours;
|
||
}
|
||
}
|
||
|
||
// Gesamtstunden neu berechnen
|
||
let totalHours = 0;
|
||
Object.values(currentEntries).forEach(e => {
|
||
totalHours += e.total_hours || 0;
|
||
});
|
||
document.getElementById('totalHours').textContent = formatHoursMin(totalHours);
|
||
|
||
// Ü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();
|
||
|
||
if (field === 'start_time' || field === 'end_time' || field === 'break_minutes') {
|
||
updateBreakCompliance(date);
|
||
}
|
||
|
||
// Visuelles Feedback
|
||
input.style.backgroundColor = '#d4edda';
|
||
setTimeout(() => {
|
||
input.style.backgroundColor = '';
|
||
}, 500);
|
||
|
||
// Statistiken aktualisieren (nur wenn es sich um eingereichte Wochen handelt)
|
||
// Wir aktualisieren die Statistiken nicht bei jedem Speichern, da sie nur für eingereichte Wochen relevant sind
|
||
// Die Statistiken werden beim Laden der Seite und nach dem Abschicken aktualisiert
|
||
}
|
||
} catch (error) {
|
||
console.error('Fehler beim Speichern:', error);
|
||
alert('Fehler beim Speichern');
|
||
}
|
||
}
|
||
|
||
// Prüfen ob alle Werktage der Woche ausgefüllt sind
|
||
function checkWeekComplete() {
|
||
const startDate = new Date(currentWeekStart);
|
||
let allWeekdaysFilled = true;
|
||
const missingFields = [];
|
||
|
||
// Prüfe nur so viele Tage wie Arbeitstage pro Woche festgelegt sind
|
||
// Samstag und Sonntag sind optional
|
||
const requiredDays = userArbeitstage || 5; // Fallback auf 5 wenn nicht gesetzt
|
||
for (let i = 0; i < requiredDays; i++) {
|
||
const date = new Date(startDate);
|
||
date.setDate(date.getDate() + i);
|
||
const dateStr = formatDate(date);
|
||
|
||
// Prüfe ob Feiertag
|
||
const isHoliday = currentHolidayDates.has(dateStr);
|
||
|
||
// Prüfe Urlaub-Status und Krank-Status
|
||
const entry = currentEntries[dateStr] || {};
|
||
const vacationType = entry.vacation_type;
|
||
const vacationSelect = document.querySelector(`select[data-date="${dateStr}"][data-field="vacation_type"]`);
|
||
const vacationValue = vacationSelect ? vacationSelect.value : (vacationType || '');
|
||
const sickCheckbox = document.querySelector(`input[data-date="${dateStr}"][data-field="sick_status"]`);
|
||
const sickStatus = sickCheckbox ? sickCheckbox.checked : (entry.sick_status || false);
|
||
|
||
// Wenn Feiertag, ganzer Tag Urlaub oder Krank, dann ist der Tag als ausgefüllt zu betrachten
|
||
if (isHoliday || vacationValue === 'full' || sickStatus) {
|
||
continue; // Tag ist ausgefüllt (Feiertag, 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 = getFullDayHours();
|
||
|
||
// Wenn Überstunden (ganzer Tag) eingetragen sind, ist der Tag ausgefüllt
|
||
if (overtimeValue > 0 && Math.abs(overtimeValue - fullDayHours) < 0.01) {
|
||
continue; // Tag ist ausgefüllt (Ü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"]`);
|
||
const endInput = document.querySelector(`input[data-date="${dateStr}"][data-field="end_time"]`);
|
||
|
||
// Hole die Werte direkt aus den Input-Feldern
|
||
const startTime = startInput ? (startInput.value || '').trim() : '';
|
||
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'}", Überstunden="${overtimeValue}"`, {
|
||
startInputExists: !!startInput,
|
||
endInputExists: !!endInput,
|
||
startInputValue: startInput ? startInput.value : 'N/A',
|
||
endInputValue: endInput ? endInput.value : 'N/A',
|
||
vacationValue: vacationValue,
|
||
overtimeValue: overtimeValue,
|
||
fullDayHours: fullDayHours
|
||
});
|
||
|
||
// Wenn Überstunden > fullDayHours, dann müssen Start/Ende vorhanden sein
|
||
if (overtimeValue > fullDayHours) {
|
||
if (!startTime || !endTime || startTime === '' || endTime === '') {
|
||
allWeekdaysFilled = false;
|
||
missingFields.push(formatDateDE(dateStr) + ' (bei Überstunden > ' + formatHoursMin(fullDayHours) + ' müssen Start/Ende vorhanden sein)');
|
||
continue; // Weiter zum nächsten Tag
|
||
}
|
||
}
|
||
|
||
// Bei halbem Tag Urlaub oder keinem Urlaub müssen Start- und Endzeit vorhanden sein
|
||
// (außer wenn Überstunden = fullDayHours eingetragen sind, dann sind Start/Ende nicht nötig)
|
||
if (!startTime || !endTime || startTime === '' || endTime === '') {
|
||
allWeekdaysFilled = false;
|
||
missingFields.push(formatDateDE(dateStr));
|
||
}
|
||
}
|
||
|
||
// Prüfe ob die Woche bereits eingereicht wurde (für Anzeige, aber Button bleibt aktiv für neue Versionen)
|
||
const weekIsSubmitted = currentEntries._weekSubmitted === true;
|
||
const submitButton = document.getElementById('submitWeek');
|
||
if (submitButton) {
|
||
// Button nur deaktivieren wenn nicht alle Felder ausgefüllt sind
|
||
// Resubmission ist erlaubt, da Versionierung unterstützt wird
|
||
submitButton.disabled = !allWeekdaysFilled;
|
||
|
||
if (!allWeekdaysFilled) {
|
||
const requiredDaysText = requiredDays === 1 ? '1 Tag' : `${requiredDays} Tage`;
|
||
submitButton.title = `Bitte füllen Sie alle ${requiredDaysText} (Start- und Endzeit) aus. Wochenende ist optional. Fehlend: ${missingFields.join(', ')}`;
|
||
} else if (weekIsSubmitted) {
|
||
submitButton.title = 'Diese Woche wurde bereits eingereicht. Beim erneuten Abschicken wird eine neue Version erstellt.';
|
||
} else {
|
||
submitButton.title = '';
|
||
}
|
||
|
||
console.log(`Submit-Button Status: disabled=${submitButton.disabled}, allWeekdaysFilled=${allWeekdaysFilled}, weekIsSubmitted=${weekIsSubmitted}`);
|
||
}
|
||
|
||
// PDF-Button Status aktualisieren
|
||
const viewPdfButton = document.getElementById('viewPdfBtn');
|
||
if (viewPdfButton) {
|
||
// Button aktivieren wenn eine eingereichte Version existiert
|
||
viewPdfButton.disabled = !latestSubmittedTimesheetId;
|
||
if (latestSubmittedTimesheetId) {
|
||
viewPdfButton.title = 'Letzte eingereichte Version anzeigen';
|
||
} else {
|
||
viewPdfButton.title = 'Keine eingereichte Version verfügbar';
|
||
}
|
||
}
|
||
}
|
||
|
||
// Globaler Handler für onclick-Attribut (im HTML)
|
||
window.submitWeekHandler = function(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
console.log('submitWeekHandler wurde aufgerufen');
|
||
const submitButton = document.getElementById('submitWeek');
|
||
|
||
// Auch wenn der Button disabled ist, versuchen wir zu prüfen was fehlt
|
||
if (submitButton) {
|
||
if (!submitButton.disabled) {
|
||
submitWeek();
|
||
} else {
|
||
// Button ist disabled - zeige was fehlt
|
||
console.warn('Button ist disabled - zeige fehlende Felder');
|
||
// Rufe submitWeek auf, um die Validierung durchzuführen (wird wegen fehlender Felder abgebrochen)
|
||
submitWeek();
|
||
}
|
||
} else {
|
||
console.error('Button nicht gefunden');
|
||
alert('Fehler: Button nicht gefunden');
|
||
}
|
||
return false;
|
||
};
|
||
|
||
// Woche abschicken
|
||
async function submitWeek() {
|
||
console.log('submitWeek() wurde aufgerufen');
|
||
const startDate = new Date(currentWeekStart);
|
||
const endDate = new Date(startDate);
|
||
endDate.setDate(endDate.getDate() + 6);
|
||
|
||
console.log('Prüfe Validierung für Woche:', currentWeekStart);
|
||
|
||
// Frontend-Validierung: Prüfen ob so viele Tage ausgefüllt sind wie Arbeitstage pro Woche festgelegt sind
|
||
let missingFields = [];
|
||
let firstMissingInput = null;
|
||
|
||
// Entferne vorherige Fehlermarkierungen
|
||
document.querySelectorAll('.missing-field').forEach(el => {
|
||
el.classList.remove('missing-field');
|
||
el.style.borderColor = '';
|
||
el.style.backgroundColor = '';
|
||
});
|
||
|
||
const requiredDays = userArbeitstage || 5; // Fallback auf 5 wenn nicht gesetzt
|
||
for (let i = 0; i < requiredDays; i++) {
|
||
const date = new Date(startDate);
|
||
date.setDate(date.getDate() + i);
|
||
const dateStr = formatDate(date);
|
||
const weekday = getWeekday(dateStr);
|
||
const dateDisplay = formatDateDE(dateStr);
|
||
|
||
// Prüfe ob Feiertag
|
||
const isHoliday = currentHolidayDates.has(dateStr);
|
||
|
||
// Prüfe Urlaub-Status und Krank-Status
|
||
const entry = currentEntries[dateStr] || {};
|
||
const vacationSelect = document.querySelector(`select[data-date="${dateStr}"][data-field="vacation_type"]`);
|
||
const vacationValue = vacationSelect ? vacationSelect.value : (entry.vacation_type || '');
|
||
const sickCheckbox = document.querySelector(`input[data-date="${dateStr}"][data-field="sick_status"]`);
|
||
const sickStatus = sickCheckbox ? sickCheckbox.checked : (entry.sick_status || false);
|
||
|
||
// Wenn Feiertag, ganzer Tag Urlaub oder Krank, dann ist der Tag als ausgefüllt zu betrachten
|
||
if (isHoliday || vacationValue === 'full' || sickStatus) {
|
||
continue; // Tag ist ausgefüllt (Feiertag, 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 = getFullDayHours();
|
||
|
||
// 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"]`);
|
||
|
||
// Hole die Werte direkt aus den Input-Feldern (nicht aus currentEntries!)
|
||
const startTime = startInput ? (startInput.value || '').trim() : '';
|
||
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'}", Ü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,
|
||
overtimeValue: overtimeValue,
|
||
fullDayHours: fullDayHours
|
||
});
|
||
|
||
const missing = [];
|
||
if (!startTime || startTime === '') {
|
||
missing.push('Startzeit');
|
||
if (startInput) {
|
||
startInput.classList.add('missing-field');
|
||
startInput.style.borderColor = '#dc3545';
|
||
startInput.style.backgroundColor = '#fff5f5';
|
||
if (!firstMissingInput) firstMissingInput = startInput;
|
||
}
|
||
}
|
||
|
||
if (!endTime || endTime === '') {
|
||
missing.push('Endzeit');
|
||
if (endInput) {
|
||
endInput.classList.add('missing-field');
|
||
endInput.style.borderColor = '#dc3545';
|
||
endInput.style.backgroundColor = '#fff5f5';
|
||
if (!firstMissingInput) firstMissingInput = endInput;
|
||
}
|
||
}
|
||
|
||
if (missing.length > 0) {
|
||
missingFields.push(`${weekday} (${dateDisplay}): ${missing.join(' und ')}`);
|
||
}
|
||
}
|
||
|
||
if (missingFields.length > 0) {
|
||
console.warn('Fehlende Felder:', missingFields);
|
||
|
||
// Scroll zum ersten fehlenden Feld
|
||
if (firstMissingInput) {
|
||
firstMissingInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
setTimeout(() => firstMissingInput.focus(), 300);
|
||
}
|
||
|
||
// Detaillierte Fehlermeldung
|
||
const requiredDaysText = requiredDays === 1 ? '1 Tag' : `${requiredDays} Tage`;
|
||
const message = `❌ Bitte füllen Sie alle ${requiredDaysText} vollständig aus!\n\n` +
|
||
`Fehlende Eingaben:\n${missingFields.map((field, index) => `\n${index + 1}. ${field}`).join('')}\n\n` +
|
||
`Die fehlenden Felder wurden rot markiert.\n` +
|
||
`Hinweis: Samstag und Sonntag sind optional.`;
|
||
|
||
alert(message);
|
||
return;
|
||
}
|
||
|
||
console.log('Alle Werktage sind ausgefüllt');
|
||
|
||
// Prüfe ob bereits eine Version existiert
|
||
const hasExistingVersion = currentEntries._hasExistingVersion || false;
|
||
|
||
if (hasExistingVersion) {
|
||
// Zeige Modal für Grund-Eingabe
|
||
showVersionReasonModal((reason) => {
|
||
if (reason) {
|
||
submitWeekWithReason(reason);
|
||
}
|
||
});
|
||
} else {
|
||
// Erste Version - normale Bestätigung
|
||
const confirmed = confirm(
|
||
`Möchten Sie die Stundenerfassung für die Woche vom ${formatDateDE(currentWeekStart)} bis ${formatDateDE(formatDate(endDate))} wirklich abschicken?`
|
||
);
|
||
|
||
if (!confirmed) {
|
||
console.log('Benutzer hat abgebrochen');
|
||
return;
|
||
}
|
||
|
||
submitWeekWithReason(null);
|
||
}
|
||
}
|
||
|
||
// Modal für Grund-Eingabe anzeigen
|
||
function showVersionReasonModal(callback) {
|
||
// Erstelle Modal
|
||
const modal = document.createElement('div');
|
||
modal.id = 'versionReasonModal';
|
||
modal.style.cssText = `
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 10000;
|
||
`;
|
||
|
||
const modalContent = document.createElement('div');
|
||
modalContent.style.cssText = `
|
||
background-color: white;
|
||
padding: 30px;
|
||
border-radius: 8px;
|
||
max-width: 500px;
|
||
width: 90%;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
`;
|
||
|
||
modalContent.innerHTML = `
|
||
<h3 style="margin-top: 0; margin-bottom: 15px;">Neue Version einreichen</h3>
|
||
<p style="margin-bottom: 15px; color: #666;">
|
||
Es existiert bereits eine Version für diese Woche. Bitte geben Sie einen Grund an, warum Sie eine neue Version einreichen:
|
||
</p>
|
||
<textarea
|
||
id="versionReasonInput"
|
||
placeholder="Grund für die neue Version..."
|
||
style="width: 100%; min-height: 100px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-family: inherit; resize: vertical;"
|
||
required></textarea>
|
||
<div style="margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end;">
|
||
<button id="cancelReasonBtn" class="btn btn-secondary">Abbrechen</button>
|
||
<button id="submitReasonBtn" class="btn btn-success">Einreichen</button>
|
||
</div>
|
||
`;
|
||
|
||
modal.appendChild(modalContent);
|
||
document.body.appendChild(modal);
|
||
|
||
const reasonInput = document.getElementById('versionReasonInput');
|
||
reasonInput.focus();
|
||
|
||
// Event-Handler
|
||
document.getElementById('cancelReasonBtn').addEventListener('click', () => {
|
||
document.body.removeChild(modal);
|
||
callback(null);
|
||
});
|
||
|
||
document.getElementById('submitReasonBtn').addEventListener('click', () => {
|
||
const reason = reasonInput.value.trim();
|
||
if (!reason) {
|
||
alert('Bitte geben Sie einen Grund für die neue Version an.');
|
||
reasonInput.focus();
|
||
return;
|
||
}
|
||
document.body.removeChild(modal);
|
||
callback(reason);
|
||
});
|
||
|
||
// Enter-Taste im Textarea
|
||
reasonInput.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter' && e.ctrlKey) {
|
||
document.getElementById('submitReasonBtn').click();
|
||
}
|
||
});
|
||
|
||
// ESC-Taste zum Schließen
|
||
modal.addEventListener('click', (e) => {
|
||
if (e.target === modal) {
|
||
document.body.removeChild(modal);
|
||
callback(null);
|
||
}
|
||
});
|
||
}
|
||
|
||
// Woche mit Grund abschicken
|
||
async function submitWeekWithReason(versionReason) {
|
||
const startDate = new Date(currentWeekStart);
|
||
const endDate = new Date(startDate);
|
||
endDate.setDate(endDate.getDate() + 6);
|
||
|
||
console.log('Sende Anfrage an Server...');
|
||
try {
|
||
const response = await fetch('/api/timesheet/submit', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
week_start: currentWeekStart,
|
||
week_end: formatDate(endDate),
|
||
version_reason: versionReason || null
|
||
})
|
||
});
|
||
|
||
console.log('Server-Antwort erhalten, Status:', response.status);
|
||
const result = await response.json();
|
||
console.log('Server-Antwort:', result);
|
||
|
||
if (result.success) {
|
||
const versionText = result.version ? ` (Version ${result.version})` : '';
|
||
alert(`Stundenzettel wurde erfolgreich eingereicht${versionText}!`);
|
||
loadWeek(); // Neu laden um Status zu aktualisieren
|
||
// Statistiken aktualisieren
|
||
loadUserStats();
|
||
} else {
|
||
console.error('Fehler-Details:', result);
|
||
alert(result.error || 'Fehler beim Einreichen des Stundenzettels');
|
||
}
|
||
} catch (error) {
|
||
console.error('Fehler beim Abschicken:', error);
|
||
alert('Fehler beim Abschicken: ' + error.message);
|
||
}
|
||
}
|
||
|
||
// Überstunden-Eingabefeld ein-/ausblenden
|
||
function toggleOvertimeInput(dateStr) {
|
||
const inputDiv = document.getElementById(`overtime-input-${dateStr}`);
|
||
if (inputDiv) {
|
||
if (inputDiv.style.display === 'none' || !inputDiv.style.display) {
|
||
inputDiv.style.display = 'inline-block';
|
||
const input = inputDiv.querySelector('input');
|
||
if (input) {
|
||
input.focus();
|
||
}
|
||
} else {
|
||
inputDiv.style.display = 'none';
|
||
// Wert löschen wenn ausgeblendet
|
||
const input = inputDiv.querySelector('input');
|
||
if (input) {
|
||
input.value = '';
|
||
// Speichern
|
||
if (currentEntries[dateStr]) {
|
||
currentEntries[dateStr].overtime_taken_hours = null;
|
||
saveEntry(input);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Urlaub-Auswahl ein-/ausblenden
|
||
function toggleVacationSelect(dateStr) {
|
||
const selectDiv = document.getElementById(`vacation-select-${dateStr}`);
|
||
if (selectDiv) {
|
||
if (selectDiv.style.display === 'none' || !selectDiv.style.display) {
|
||
selectDiv.style.display = 'inline-block';
|
||
const select = selectDiv.querySelector('select');
|
||
if (select) {
|
||
select.focus();
|
||
}
|
||
} else {
|
||
selectDiv.style.display = 'none';
|
||
// Wert löschen wenn ausgeblendet
|
||
const select = selectDiv.querySelector('select');
|
||
if (select) {
|
||
select.value = '';
|
||
// Speichern
|
||
if (currentEntries[dateStr]) {
|
||
currentEntries[dateStr].vacation_type = null;
|
||
saveEntry(select);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Wochenend-Reise-Status umschalten
|
||
function toggleWeekendTravel(dateStr) {
|
||
const button = document.querySelector(`button[onclick="toggleWeekendTravel('${dateStr}')"]`);
|
||
if (!button) return;
|
||
|
||
// Aktuellen Status aus currentEntries lesen
|
||
const currentTravelStatus = currentEntries[dateStr]?.weekend_travel || false;
|
||
const newStatus = !currentTravelStatus;
|
||
|
||
// Status in currentEntries aktualisieren
|
||
if (!currentEntries[dateStr]) {
|
||
currentEntries[dateStr] = { date: dateStr };
|
||
}
|
||
currentEntries[dateStr].weekend_travel = newStatus;
|
||
|
||
// Button-Stil aktualisieren
|
||
if (newStatus) {
|
||
button.style.backgroundColor = '#28a745';
|
||
button.style.color = 'white';
|
||
} else {
|
||
button.style.backgroundColor = '';
|
||
button.style.color = '';
|
||
}
|
||
|
||
// Speichere den Wert (erstellen ein temporäres Input-Element für saveEntry)
|
||
const tempInput = document.createElement('input');
|
||
tempInput.dataset.date = dateStr;
|
||
tempInput.dataset.field = 'weekend_travel';
|
||
tempInput.value = newStatus;
|
||
saveEntry(tempInput);
|
||
updateOvertimeDisplay();
|
||
}
|
||
|
||
function toggleSickStatus(dateStr) {
|
||
const button = document.querySelector(`button[onclick="toggleSickStatus('${dateStr}')"]`);
|
||
if (!button) return;
|
||
|
||
// Aktuellen Status aus currentEntries lesen
|
||
const currentSickStatus = currentEntries[dateStr]?.sick_status || false;
|
||
const newStatus = !currentSickStatus;
|
||
|
||
// Status in currentEntries aktualisieren
|
||
if (!currentEntries[dateStr]) {
|
||
currentEntries[dateStr] = { date: dateStr };
|
||
}
|
||
currentEntries[dateStr].sick_status = newStatus;
|
||
|
||
// Button-Stil aktualisieren
|
||
if (newStatus) {
|
||
button.style.backgroundColor = '#e74c3c';
|
||
button.style.color = 'white';
|
||
} else {
|
||
button.style.backgroundColor = '';
|
||
button.style.color = '';
|
||
}
|
||
|
||
// SOFORTIGE DOM-UPDATES
|
||
|
||
// 1. Datum-Zelle: "(Krank)" in rot hinzufügen/entfernen
|
||
const startInput = document.querySelector(`input[data-date="${dateStr}"][data-field="start_time"]`);
|
||
if (startInput) {
|
||
const row = startInput.closest('tr');
|
||
if (row) {
|
||
const dateCell = row.querySelector('td:nth-child(2)'); // Zweite Spalte ist das Datum
|
||
if (dateCell) {
|
||
let dateText = dateCell.innerHTML;
|
||
const sickSpan = '<span style="color: #e74c3c;">(Krank)</span>';
|
||
|
||
if (newStatus) {
|
||
// Prüfe ob bereits vorhanden
|
||
if (!dateText.includes('(Krank)')) {
|
||
dateText += ' ' + sickSpan;
|
||
dateCell.innerHTML = dateText;
|
||
}
|
||
} else {
|
||
// Entferne "(Krank)" Span
|
||
dateText = dateText.replace(/ <span style="color: #e74c3c;">\(Krank\)<\/span>/g, '');
|
||
dateCell.innerHTML = dateText;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 2. Stunden-Anzeige sofort aktualisieren
|
||
const hoursElement = document.getElementById(`hours_${dateStr}`);
|
||
if (hoursElement) {
|
||
const fullDayHours = getFullDayHours();
|
||
const entry = currentEntries[dateStr] || {};
|
||
const vacationType = entry.vacation_type || '';
|
||
const isHoliday = currentHolidayDates.has(dateStr);
|
||
const hours = entry.total_hours || 0;
|
||
const isFullDayVacation = vacationType === 'full';
|
||
|
||
if (newStatus) {
|
||
// Krank: Zeige fullDayHours mit "(Krank)" Label
|
||
hoursElement.textContent = formatHoursMin(fullDayHours) + ' (Krank)';
|
||
currentEntries[dateStr].total_hours = fullDayHours;
|
||
} else {
|
||
// Zurück zu normaler Anzeige basierend auf anderen Status
|
||
const d = new Date(dateStr);
|
||
const isWeekendHoliday = isHoliday && (d.getDay() === 6 || d.getDay() === 0);
|
||
if (isFullDayVacation) {
|
||
hoursElement.textContent = formatHoursMin(fullDayHours) + ' (Urlaub)';
|
||
} else if (isWeekendHoliday) {
|
||
hoursElement.textContent = formatHoursMin(hours || 0) + ' (Feiertag)';
|
||
} else if (isHoliday && !hours) {
|
||
hoursElement.textContent = formatHoursMin(fullDayHours) + ' (Feiertag)';
|
||
} else if (isHoliday && hours) {
|
||
hoursElement.textContent = formatHoursMin(fullDayHours) + ' + ' + formatHoursMin(hours) + ' (Überst.)';
|
||
} else {
|
||
hoursElement.textContent = formatHoursMin(hours);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 3. Tätigkeiten-Felder sofort deaktivieren/aktivieren
|
||
const activityInputs = document.querySelectorAll(`input[data-date="${dateStr}"][data-field^="activity"]`);
|
||
activityInputs.forEach(input => {
|
||
if (newStatus) {
|
||
input.disabled = true;
|
||
} else {
|
||
input.disabled = false;
|
||
}
|
||
});
|
||
|
||
// 4. Zeitfelder sofort deaktivieren/aktivieren
|
||
const timeInputs = document.querySelectorAll(`input[data-date="${dateStr}"][data-field="start_time"], input[data-date="${dateStr}"][data-field="end_time"], input[data-date="${dateStr}"][data-field="break_minutes"]`);
|
||
timeInputs.forEach(input => {
|
||
if (newStatus) {
|
||
input.disabled = true;
|
||
} else {
|
||
input.disabled = false;
|
||
}
|
||
});
|
||
|
||
// 5. Bei Abwahl: Alle Tätigkeitsfelder leeren
|
||
if (!newStatus) {
|
||
// Leere alle Tätigkeitsfelder
|
||
for (let i = 1; i <= 5; i++) {
|
||
const descInput = document.querySelector(`input[data-date="${dateStr}"][data-field="activity${i}_desc"]`);
|
||
const hoursInput = document.querySelector(`input[data-date="${dateStr}"][data-field="activity${i}_hours"]`);
|
||
const projectInput = document.querySelector(`input[data-date="${dateStr}"][data-field="activity${i}_project_number"]`);
|
||
|
||
if (descInput) {
|
||
descInput.value = '';
|
||
currentEntries[dateStr][`activity${i}_desc`] = null;
|
||
}
|
||
if (hoursInput) {
|
||
hoursInput.value = '';
|
||
currentEntries[dateStr][`activity${i}_hours`] = 0;
|
||
}
|
||
if (projectInput) {
|
||
projectInput.value = '';
|
||
currentEntries[dateStr][`activity${i}_project_number`] = null;
|
||
}
|
||
}
|
||
} else {
|
||
// Bei Aktivierung: Setze "Krank" als erste Tätigkeit und leere andere
|
||
const descInput = document.querySelector(`input[data-date="${dateStr}"][data-field="activity1_desc"]`);
|
||
const hoursInput = document.querySelector(`input[data-date="${dateStr}"][data-field="activity1_hours"]`);
|
||
const fullDayHours = getFullDayHours();
|
||
|
||
if (descInput) {
|
||
descInput.value = 'Krank';
|
||
currentEntries[dateStr].activity1_desc = 'Krank';
|
||
}
|
||
if (hoursInput) {
|
||
hoursInput.value = fullDayHours.toFixed(2);
|
||
currentEntries[dateStr].activity1_hours = fullDayHours;
|
||
}
|
||
|
||
// Leere andere Tätigkeiten
|
||
for (let i = 2; i <= 5; i++) {
|
||
const descInput = document.querySelector(`input[data-date="${dateStr}"][data-field="activity${i}_desc"]`);
|
||
const hoursInput = document.querySelector(`input[data-date="${dateStr}"][data-field="activity${i}_hours"]`);
|
||
const projectInput = document.querySelector(`input[data-date="${dateStr}"][data-field="activity${i}_project_number"]`);
|
||
|
||
if (descInput) {
|
||
descInput.value = '';
|
||
currentEntries[dateStr][`activity${i}_desc`] = null;
|
||
}
|
||
if (hoursInput) {
|
||
hoursInput.value = '';
|
||
currentEntries[dateStr][`activity${i}_hours`] = 0;
|
||
}
|
||
if (projectInput) {
|
||
projectInput.value = '';
|
||
currentEntries[dateStr][`activity${i}_project_number`] = null;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Speichere den Wert (erstellen ein temporäres Input-Element für saveEntry)
|
||
const tempInput = document.createElement('input');
|
||
tempInput.dataset.date = dateStr;
|
||
tempInput.dataset.field = 'sick_status';
|
||
tempInput.value = newStatus;
|
||
saveEntry(tempInput);
|
||
updateOvertimeDisplay();
|
||
}
|
||
|
||
// Ping-IP laden
|
||
async function loadPingIP() {
|
||
try {
|
||
const response = await fetch('/api/user/ping-ip');
|
||
if (!response.ok) {
|
||
throw new Error('Fehler beim Laden der IP-Adresse');
|
||
}
|
||
const data = await response.json();
|
||
const pingIpInput = document.getElementById('pingIpInput');
|
||
if (pingIpInput) {
|
||
pingIpInput.value = data.ping_ip || '';
|
||
}
|
||
} catch (error) {
|
||
console.error('Fehler beim Laden der Ping-IP:', error);
|
||
}
|
||
}
|
||
|
||
// 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');
|
||
if (!pingIpInput) {
|
||
return;
|
||
}
|
||
|
||
const pingIp = pingIpInput.value.trim();
|
||
|
||
// Finde den Button (nächstes Geschwisterelement oder über Parent)
|
||
const button = pingIpInput.parentElement?.querySelector('button') ||
|
||
document.querySelector('button[onclick*="savePingIP"]');
|
||
|
||
try {
|
||
const response = await fetch('/api/user/ping-ip', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({ ping_ip: pingIp })
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (!response.ok) {
|
||
alert(result.error || 'Fehler beim Speichern der IP-Adresse');
|
||
return;
|
||
}
|
||
|
||
// Erfolgs-Feedback
|
||
if (button) {
|
||
const originalText = button.textContent;
|
||
button.textContent = 'Gespeichert!';
|
||
button.style.backgroundColor = '#27ae60';
|
||
setTimeout(() => {
|
||
button.textContent = originalText;
|
||
button.style.backgroundColor = '';
|
||
}, 2000);
|
||
}
|
||
|
||
console.log('Ping-IP gespeichert:', result.ping_ip);
|
||
} catch (error) {
|
||
console.error('Fehler beim Speichern der Ping-IP:', error);
|
||
alert('Fehler beim Speichern der IP-Adresse');
|
||
}
|
||
};
|