116 lines
3.6 KiB
HTML
116 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Arbeitszeit-Auswertung</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<main class="app">
|
|
<section class="hero">
|
|
<div>
|
|
<p class="eyebrow">CSV-Auswertung</p>
|
|
<h1>Arbeitszeit-Saldo berechnen</h1>
|
|
<p class="intro">CSV-Datei hochladen, Netto-Arbeitszeiten auslesen und Plus-/Minusstunden berechnen: Montag bis Freitag mit 8:00 Stunden Sollzeit, Samstag/Sonntag und gesetzliche Feiertage mit 0:00 Sollzeit.</p>
|
|
</div>
|
|
<div class="settings" aria-label="Einstellungen">
|
|
<label>
|
|
Sollzeit pro Arbeitstag
|
|
<input id="targetTime" type="time" value="08:00" step="60">
|
|
<small>Gilt für Montag bis Freitag. Samstag/Sonntag und Feiertage = 0:00.</small>
|
|
</label>
|
|
<label>
|
|
Bundesland / Feiertage
|
|
<select id="federalState">
|
|
<option value="NW" selected>Nordrhein-Westfalen</option>
|
|
<option value="BY">Bayern</option>
|
|
<option value="BY_MH">Bayern inkl. Mariä Himmelfahrt</option>
|
|
<option value="NI">Niedersachsen</option>
|
|
<option value="HH">Hamburg</option>
|
|
</select>
|
|
<small>Feiertage werden automatisch aus dem Datum berechnet.</small>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="dropZone" class="drop-zone">
|
|
<input id="csvFile" type="file" accept=".csv,text/csv">
|
|
<div class="drop-content">
|
|
<strong>CSV-Datei hier ablegen</strong>
|
|
<span>oder Datei auswählen</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="formatHint" class="hint"></section>
|
|
|
|
<section id="errorBox" class="error hidden"></section>
|
|
|
|
<section id="summary" class="summary hidden" aria-live="polite">
|
|
<article class="card">
|
|
<span>Arbeitstage</span>
|
|
<strong id="totalDays">0</strong>
|
|
</article>
|
|
<article class="card">
|
|
<span>Arbeitszeit gesamt</span>
|
|
<strong id="totalWork">0:00</strong>
|
|
</article>
|
|
<article class="card">
|
|
<span>Sollzeit gesamt</span>
|
|
<strong id="totalTarget">0:00</strong>
|
|
</article>
|
|
<article class="card saldo-card">
|
|
<span>Saldo gesamt</span>
|
|
<strong id="totalSaldo">±0:00</strong>
|
|
</article>
|
|
</section>
|
|
|
|
<section id="results" class="results hidden">
|
|
<div class="table-header">
|
|
<h2>Monatsübersicht</h2>
|
|
<button id="exportCsv" type="button">Ergebnis als CSV exportieren</button>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Monat</th>
|
|
<th>Arbeitstage</th>
|
|
<th>Arbeitszeit</th>
|
|
<th>Sollzeit</th>
|
|
<th>Saldo</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="monthTable"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<details class="details">
|
|
<summary>Tagesdetails anzeigen</summary>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Datum</th>
|
|
<th>Wochentag</th>
|
|
<th>Feiertag</th>
|
|
<th>Beginn</th>
|
|
<th>Ende</th>
|
|
<th>Arbeitszeit</th>
|
|
<th>Sollzeit</th>
|
|
<th>Saldo</th>
|
|
<th>Ruhepause</th>
|
|
<th>Warnungen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="dayTable"></tbody>
|
|
</table>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|