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

Layout anpassugnen

Browse Source
This commit is contained in:
Carsten Graf
2026-01-23 18:10:06 +01:00
parent daf4f9b77c
commit 587bdd2722
4 changed files with 31 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/css/style.css
View File

@@ -388,9 +388,12 @@ table input[type="text"] {
}
.summary-item {
display: flex;
justify-content: space-between;
font-size: 18px;
margin-bottom: 10px;
}
.summary-item strong {
margin-right: 5px;
}
/* Actions */
@@ -410,6 +413,13 @@ table input[type="text"] {
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
width: 100%;
}
/* Admin Container - volle Breite */
.admin-container .container {
max-width: 100%;
padding: 20px;
}
.add-user-form {

31
public/js/dashboard.js
View File

@@ -61,9 +61,6 @@ document.addEventListener('DOMContentLoaded', async function() {
console.warn('Konnte letzte Woche nicht vom Server laden:', error);
}
// Statistiken laden
loadUserStats();
// Ping-IP laden
loadPingIP();
@@ -495,16 +492,6 @@ function renderWeek() {
}
});
// Überstunden-Anzeige erstellen (falls noch nicht vorhanden)
let overtimeDisplay = document.getElementById('overtimeDisplay');
if (!overtimeDisplay) {
const summaryDiv = document.querySelector('.summary');
overtimeDisplay = document.createElement('div');
overtimeDisplay.id = 'overtimeDisplay';
overtimeDisplay.className = 'summary-item';
summaryDiv.appendChild(overtimeDisplay);
}
// Überstunden-Berechnung aufrufen
updateOvertimeDisplay();
@@ -609,17 +596,15 @@ function updateOvertimeDisplay() {
// Überstunden = (Tatsächliche Stunden + Urlaubsstunden) - Sollstunden
const totalHoursWithVacation = totalHours + vacationHours;
const overtimeHours = totalHoursWithVacation - sollStunden;
const remainingOvertime = overtimeHours - overtimeTaken;
// Überstunden-Anzeige aktualisieren
const overtimeDisplay = document.getElementById('overtimeDisplay');
if (overtimeDisplay) {
overtimeDisplay.innerHTML = `
<strong>Überstunden diese Woche:</strong>
<span id="overtimeHours">${overtimeHours.toFixed(2)} h</span>
${overtimeTaken > 0 ? `<br><strong>Davon genommen:</strong> <span>${overtimeTaken.toFixed(2)} h</span>` : ''}
${remainingOvertime !== overtimeHours ? `<br><strong>Verbleibend:</strong> <span>${remainingOvertime.toFixed(2)} h</span>` : ''}
`;
const overtimeSummaryItem = document.getElementById('overtimeSummaryItem');
const overtimeHoursSpan = document.getElementById('overtimeHours');
if (overtimeSummaryItem && overtimeHoursSpan) {
overtimeSummaryItem.style.display = 'block';
const sign = overtimeHours >= 0 ? '+' : '';
overtimeHoursSpan.textContent = `${sign}${overtimeHours.toFixed(2)} h`;
overtimeHoursSpan.style.color = overtimeHours >= 0 ? '#27ae60' : '#e74c3c';
}
}
@@ -1187,7 +1172,7 @@ async function submitWeekWithReason(versionReason) {
const versionText = result.version ? ` (Version ${result.version})` : '';
alert(`Stundenzettel wurde erfolgreich eingereicht${versionText}!`);
loadWeek(); // Neu laden um Status zu aktualisieren
loadUserStats(); // Statistiken aktualisieren
// Statistiken werden durch updateOvertimeDisplay() aktualisiert
} else {
console.error('Fehler-Details:', result);
alert(result.error || 'Fehler beim Einreichen des Stundenzettels');

12
views/admin.ejs
View File

@@ -25,8 +25,9 @@
</div>
</div>
<div class="container">
<div class="admin-panel">
<div class="admin-container">
<div class="container">
<div class="admin-panel">
<h2>Benutzerverwaltung</h2>
<!-- Benutzer anlegen - Zusammenklappbar -->
@@ -112,9 +113,9 @@
<span id="userListToggleIcon" style="font-size: 18px; transition: transform 0.3s;">▼</span>
</div>
<div id="userListContent" style="display: none; padding: 20px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff;">
<div class="user-list">
<table>
<div id="userListContent" style="display: none; padding: 20px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff; overflow-x: auto; max-width: 100%;">
<div class="user-list" style="min-width: 100%;">
<table style="width: 100%; min-width: 900px;">
<thead>
<tr>
<th>ID</th>
@@ -322,6 +323,7 @@
</div>
</div>
</div>
</div>
</div>
</div>

59
views/dashboard.ejs
View File

@@ -44,6 +44,10 @@
<strong>Gesamtstunden diese Woche:</strong>
<span id="totalHours">0.00 h</span>
</div>
<div class="summary-item" id="overtimeSummaryItem" style="display: none;">
<strong>Überstunden diese Woche:</strong>
<span id="overtimeHours">0.00 h</span>
</div>
</div>
<div class="actions">
@@ -51,61 +55,6 @@
<p class="help-text">Stunden werden automatisch gespeichert. Am Ende der Woche können Sie die Stunden abschicken.</p>
</div>
</div>
<!-- Auswertung: Überstunden und Urlaubstage -->
<div class="user-stats-panel" id="userStatsPanel">
<h3>Ihre Auswertung</h3>
<div class="stat-card stat-overtime">
<div class="stat-label">Aktuelle Überstunden</div>
<div class="stat-value" id="currentOvertime">-</div>
<div class="stat-unit">Stunden</div>
</div>
<div class="stat-card stat-vacation">
<div class="stat-label">Verbleibende Urlaubstage</div>
<div class="stat-value" id="remainingVacation">-</div>
<div class="stat-unit">von <span id="totalVacation">-</span> Tagen</div>
</div>
<!-- API-URLs für Zeiterfassung -->
<div class="stat-card stat-api-urls" style="margin-top: 20px; padding: 15px; box-sizing: border-box; width: 100%;">
<h4 style="margin-bottom: 15px; font-size: 14px; color: #555;">Zeiterfassung vir URL</h4>
<div style="margin-bottom: 12px;">
<label style="display: block; font-size: 12px; color: #666; margin-bottom: 5px;">Kommen (Check-in):</label>
<div style="display: flex; gap: 8px; align-items: center; width: 100%;">
<input type="text" id="checkinUrl" readonly value=""
style="flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; background-color: #f9f9f9;">
<button onclick="copyToClipboard('checkinUrl')" class="btn btn-secondary btn-sm" style="padding: 6px 12px; font-size: 12px; flex-shrink: 0;">Kopieren</button>
</div>
</div>
<div>
<label style="display: block; font-size: 12px; color: #666; margin-bottom: 5px;">Gehen (Check-out):</label>
<div style="display: flex; gap: 8px; align-items: center; width: 100%;">
<input type="text" id="checkoutUrl" readonly value=""
style="flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; background-color: #f9f9f9;">
<button onclick="copyToClipboard('checkoutUrl')" class="btn btn-secondary btn-sm" style="padding: 6px 12px; font-size: 12px; flex-shrink: 0;">Kopieren</button>
</div>
</div>
<p style="margin-top: 10px; font-size: 11px; color: #888; line-height: 1.4;">
Diese URLs können Sie in einer App eintragen oder direkt im Browser aufrufen, um Ihre Arbeitszeiten zu erfassen.
</p>
</div>
<!-- IP-basierte automatische Zeiterfassung -->
<div class="stat-card stat-ping-ip" style="margin-top: 20px; padding: 15px; box-sizing: border-box; width: 100%;">
<h4 style="margin-bottom: 15px; font-size: 14px; color: #555;">Automatische Zeiterfassung per IP</h4>
<div style="margin-bottom: 12px;">
<label style="display: block; font-size: 12px; color: #666; margin-bottom: 5px;">IP-Adresse für automatische Zeiterfassung:</label>
<div style="display: flex; gap: 8px; align-items: center; width: 100%;">
<input type="text" id="pingIpInput" placeholder="z.B. 192.168.1.100"
style="flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px;">
<button onclick="savePingIP()" class="btn btn-primary btn-sm" style="padding: 6px 12px; font-size: 12px; flex-shrink: 0;">Speichern</button>
</div>
</div>
<p style="margin-top: 10px; font-size: 11px; color: #888; line-height: 1.4;">
Geben Sie Ihre IP-Adresse ein. Das System pingt diese jede Minute automatisch. Bei erster Erreichbarkeit wird die Start-Zeit gesetzt, bei 3+ fehlgeschlagenen Pings die End-Zeit.
</p>
</div>
</div>
</div>
</div>