Zeiterfassung – Werner Gindhart

Bedienungsanleitung

Shortcuts: Esc closes this window.

Persistence: recorded entries in IndexedDB + optional JSON backup and CSV/ZIP export. Theme and language choices stored in localStorage (shared with the website). No external libraries; the only network requests are the document itself and the locally hosted fonts.

0. Overview 1. Core principle: entries → segments 2. Recording 3. Projects/tags (MRU) 4. List of individual records 5. Standard analyses 6. Special analyses 7. Excel-style analysis 8. Text analysis (tags per day) 9. Backup export/import (JSON) 10. Excel & CSV export 11. Themes 12. Storage & diagnostics 13. Troubleshooting

0. Overview

This application records points in time as entries (start/end). Consecutive entries form segments (time spans), which are then summed up and visualised.

Areas of the page (top to bottom)

Recording – save start/end, MRU suggestions, today overview
Totals – project totals per day/week/month/year, grouped by the next larger unit
List of individual records – editable, search
Excel-style analysis – pivot-like tables (overall + per project)
Graphical analyses – pie charts for today/week/year + special analyses
Text analysis – per day, tags sorted by tag time total

Important

Local time is used (no UTC conversion).
Segments are formed only from a start entry up to the next entry.
Export/import: JSON backup and CSV/ZIP export exist independently side by side.
On the very first visit and weekly thereafter, a notice dialog (disclaimer) appears that must be confirmed.

1. Core principle: entries → segments

An entry is a point in time. There are two kinds:

Start: point in time + project (required), optional tags + note
End: point in time that ends the running assignment, without a new project

A segment is only formed when a start entry is directly followed by the next entry:

Start(i) + next entry(i+1) ⇒ segment [Start.ts, Next.ts)
If the duration is ≤ 0, the segment is ignored.
Tags/note logically belong to the start and therefore to the segment.

Example

09:00 start project A (tag: “dev”)
10:30 end
⇒ segment project A: 1 h 30 min (tag “dev”)

2. Recording

Point in time

The point in time field is a datetime-local input with a step of 60 seconds.
On page load it is prefilled with the current local time (without seconds).
As long as you do not change the value manually, the point in time is kept in sync with the system clock.
The “Now” button sets the point in time to “now” and re-enables the synchronisation.

Project

A start entry requires a project (mandatory). End entries have no project.
Projects can be typed freely or selected from the suggestion list.

Note

The note is optional (free text).
After every save (start or end) the note field is cleared automatically.

Saving

“Save project start”: validates time and project.
“Save end”: validates the time; saves an end entry without project/tags. A note (e.g. the reason for finishing early) can be included.
After saving, focus automatically jumps to the tags field (with selection).

Today overview

Below the input fields, a collapsible area (open by default) shows the day total and all of today’s records, descending by time (newest first).
Corrections (time, kind, project, tags, note, delete) work exactly as in the “List of individual records”.

3. Projects/tags (MRU)

MRU means “Most Recently Used”. Recently used values therefore appear at the top of the suggestions.

Project MRU

The project list is based on start entries.
Sorting: most recently used projects first.

Tag MRU per project

Tag suggestions are project-specific.
Sorting: most recently used tags first.

Note: the MRU suggestions are purely a UI aid; analyses always count the tags actually stored.

4. List of individual records

Collapsing and scrolling

The area can be collapsed and expanded (details); it is collapsed by default.
With more than 12 entries, the table is automatically limited to a fixed height and becomes scrollable.

Search

The search field filters entries whose project or tags contain the search term (case-insensitive).

Sorting

The table is always sorted by begin in descending order (newest first).

Editing

You can change point in time, kind, project, tags and note (depending on the kind).
If kind = End, project/tags/note are disabled (not relevant).
Save asks for confirmation and validates the input.
Delete asks for confirmation.

Totals panel

The project totals live in their own “Totals” panel above the list; the tabs “days/weeks/months/years” select the unit.
The elements are grouped by the next larger unit (days → calendar week, weeks → month, months → year) and are collapsible; each group header shows the unit’s grand total.
Sorting: groups descending by their start, elements within a group ascending by their start.
The panel is collapsed by default and is only rendered when expanded. The “Days” tab is then active and the current calendar week is expanded; with more than 10 visible element rows the panel scrolls.
The table in the “List of individual records” remains the complete list (filtered by the search).

5. Standard analyses

The “Graphical analyses” panel (collapsed by default; rendered when expanded) contains three pie charts at the top:

Today (00:00–24:00)
Calendar week (ISO week, Monday–Sunday)
Year (01 Jan–31 Dec)

The legend always shows the duration per project as hours and minutes. Percentages are shown directly inside the pie segments, provided the segment is large enough.

6. Special analyses

Under “Special analyses” you can run targeted analyses:

Date only (no project): pie charts for day/month/year of this date + segment list for the day
Date + project (no “to” date): pie charts for month and year (this project only) + filtered day list
Date + to date: range pie chart (optionally filtered by project) + segment list for the range
Include end: extends the range by the end (effectively “including the last day”)

7. Excel-style analysis

Below the “List of individual records” there is the standalone, collapsible panel “Excel-style analysis”. It presents time values in tabular form – similar to a pivot view. The same tables can be exported via the Export/Import menu as a real Excel workbook (.xlsx) or as CSV files (ZIP).

Overall analysis (columns = projects)

Rows: days in ascending order
Columns: projects
First value column: “Total” (sum of all project columns)
Additional sum rows: day total, week total, month total, year total, grand total

Project analysis (columns = tags)

Each project has its own collapsible table.
Columns: tags of this project (including “(none)”).
Width is unlimited: horizontal scrolling is possible.
If a segment has multiple tags, the segment duration is distributed evenly across these tags.
The first value column is again “Total” (sum of the tag columns).

8. Text analysis (tags per day)

At the very bottom you will find a textual summary: one line per day with its tags.

Months are collapsible; the most recent month is on top and expanded by default.
Per day, each tag is shown only once (unique).
Sorting of tags per day: descending by the tag’s time total for that day (alphabetically on ties).
Tag time totals are based on segments; segments crossing midnight are split correctly per day.

9. Backup export/import (JSON)

Export

The menu item Export/Import → “Export backup (JSON)” downloads zeit_erfassung_backup.json.
Format: object with { "entries": [...] }, pretty-printed (2 spaces).

Import

The menu item Export/Import → “Import backup” reads a JSON file.
Accepts either an array or an object with entries.
A UTF-8 BOM is tolerated.
Invalid entries (e.g. without a finite ts) are discarded.

10. Excel & CSV export

Excel workbook (.xlsx)

The menu item Export/Import → “Export as Excel (.xlsx)” creates zeit_erfassung_export.xlsx – a real workbook with an “Overall” sheet (columns = projects) and one sheet per project (columns = tags). Time values are genuine Excel times in the [h]:mm format and can be used in further calculations; total rows are bold. The file is created entirely in the browser, without external libraries.

CSV files (ZIP)

The menu item Export/Import → “Export as CSV (ZIP)” creates CSV files for raw data and analyses.

entries.csv – all entries (raw data)
overall.csv – overall analysis (Excel style, columns = projects)
project_<project>.csv – per project the tag analysis (columns = tags)

If possible, all CSV files are stored in one ZIP (zeit_erfassung_csv_export.zip). If ZIP creation is not possible, the CSV files are downloaded individually (fallback).

CSV format note (DE/Excel)

The default separator is ;. Texts are automatically quoted when necessary.

11. Themes

Theme selection at the top right: Bright / Dark / High contrast (default: Bright).
The choice is stored in localStorage, applies to both the website and the time tracking app, and is restored after a reload.
High contrast uses fixed, very high-contrast colours (also for charts).

12. Storage & diagnostics

The application stores entries in the browser’s IndexedDB.

Each record is stored as its own row in an IndexedDB store (with an index on the timestamp). On startup only the current and the previous month are loaded at first; immediately after the initial page build, the full data set is loaded asynchronously in the background, so project and tag suggestions become complete early. The analysis panels are only rendered when expanded. Data from the earlier single-record format is migrated automatically on first start.
The theme and language choices are stored in localStorage and shared with the gindhart.de website.

On startup, a “storage self-test” is written to the console, checking among other things:

whether IndexedDB is available
the total number of stored records as well as storage usage and quota (if the browser supports navigator.storage)

Note on file://

If you open the file directly via file://, browser-side persistent storage (in particular IndexedDB) may be handled differently depending on browser/settings. Recommendation: use a local HTTP server (http://localhost/...).

13. Troubleshooting

1) “Data is gone” after reload

Check whether you are working under file://. Use a local web server if necessary.
Open the console and look for “Speicher-Selbsttest”. If ok=false, IndexedDB could not be used properly.
Workaround: export a JSON backup and re-import it after switching servers.

2) Charts show nothing

Segments are only formed from a start plus the next entry.
If you only have start entries without a following entry, there is no segment.
Make sure the times are sensibly ascending (no negative/zero durations).

3) Project/tag suggestions are missing

Suggestions are derived from stored start entries.
Project tag suggestions are project-specific; select a project first.

Kurztasten: Esc schließt dieses Fenster.

Persistenz: erfasste Einträge in IndexedDB + optional JSON-Backup und CSV/ZIP Export. Theme- und Sprachauswahl per localStorage (mit der Website geteilt). Keine externen Bibliotheken; einzige Netzwerk-Zugriffe: das Dokument selbst und die lokal gehosteten Schriften.

0. Überblick 1. Kernprinzip: Einträge → Segmente 2. Werte-Erfassung 3. Projekte/Tags (MRU) 4. Liste der Einzelbuchungen 5. Standard-Auswertungen 6. Spezielle Auswertungen 7. Excel-Stil-Auswertung 8. Textauswertung (Tags pro Tag) 9. Backup Export/Import (JSON) 10. Excel- & CSV-Export 11. Themes 12. Speicher & Diagnose 13. Troubleshooting

0. Überblick

Diese Anwendung erfasst Zeitpunkte als Einträge (Start/Ende). Aus aufeinanderfolgenden Einträgen entstehen Segmente (Zeitabschnitte), die anschließend summiert und visualisiert werden.

Bereiche der Seite (von oben nach unten)

Werte-Erfassung – Start/Ende speichern, MRU-Vorschläge, Tagesüberblick
Summen – Projektsummen je Tag/Woche/Monat/Jahr, gruppiert nach der nächstgrößeren Einheit
Liste der Einzelbuchungen – editierbar, Suche
Auswertung im Excel-Stil – Pivot-artige Tabellen (Gesamt + je Projekt)
Graphische Auswertungen – Torten für Heute/Woche/Jahr + Spezialauswertungen
Textuelle Auswertung – pro Tag Tags nach Tag-Zeitsumme

Wichtig

Es wird lokale Zeit verwendet (keine UTC-Konvertierung).
Segmente entstehen nur von einem Start-Eintrag bis zum nächsten Eintrag.
Export/Import: JSON-Backup und CSV/ZIP Export stehen unabhängig nebeneinander.
Beim allerersten Aufruf und danach wöchentlich erscheint ein Hinweis-Dialog (Disclaimer), der bestätigt werden muss.

1. Kernprinzip: Einträge → Segmente

Ein Eintrag ist ein Zeitpunkt. Es gibt zwei Arten:

Start: Zeitpunkt + Projekt (Pflicht), optional Tags + Notiz
Ende: Zeitpunkt beendet die laufende Zuordnung, ohne neues Projekt

Ein Segment entsteht nur, wenn ein Start-Eintrag direkt vom nächsten Eintrag gefolgt wird:

Start(i) + nächster Eintrag(i+1) ⇒ Segment [Start.ts, Next.ts)
Falls die Dauer ≤ 0 ist, wird das Segment ignoriert.
Tags/Notiz gehören fachlich zum Start und damit zum Segment.

Beispiel

09:00 Start Projekt A (Tag: „dev“)
10:30 Ende
⇒ Segment Projekt A: 1 h 30 min (Tag „dev“)

2. Werte-Erfassung

Zeitpunkt

Das Feld Zeitpunkt ist datetime-local mit Schrittweite 60 Sekunden.
Beim Laden wird es mit der aktuellen lokalen Zeit (ohne Sekunden) befüllt.
Solange du den Wert nicht manuell änderst, wird der Zeitpunkt mit der Systemuhr synchronisiert.
Button „Jetzt“ setzt den Zeitpunkt auf „jetzt“ und reaktiviert die Synchronisation.

Projekt

Ein Start-Eintrag benötigt ein Projekt (Pflicht). Ende-Einträge haben kein Projekt.
Projekte können frei eingegeben oder aus der Vorschlagsliste ausgewählt werden.

Notiz

Die Notiz ist optional (Freitext).
Nach jeder Speicherung (Start oder Ende) wird das Notizfeld automatisch geleert.

Speichern

„Projekt-Start speichern“: validiert Zeit und Projekt.
„Ende speichern“: validiert Zeit; speichert Ende-Eintrag ohne Projekt/Tags. Eine Notiz (z. B. Grund für ein vorzeitiges Ende) kann mitgegeben werden.
Nach dem Speichern springt der Fokus automatisch ins Tags-Feld (inkl. Markierung).

Tagesüberblick „Heute“

Unter den Eingabefeldern zeigt ein ausklappbarer Bereich (standardmäßig geöffnet) die Tagessumme und alle Buchungen des aktuellen Tages, absteigend nach Zeitpunkt (neueste zuerst).
Korrekturen (Zeit, Art, Projekt, Tags, Notiz, Löschen) funktionieren dort genauso wie in der „Liste der Einzelbuchungen“.

3. Projekte/Tags (MRU)

MRU bedeutet „Most Recently Used“. Damit erscheinen zuletzt verwendete Werte oben in den Vorschlägen.

Projekt-MRU

Die Projektliste basiert auf Start-Einträgen.
Sortierung: zuletzt verwendete Projekte zuerst.

Tag-MRU pro Projekt

Tag-Vorschläge sind projektabhängig.
Sortierung: zuletzt verwendete Tags zuerst.

Hinweis: Die MRU-Vorschläge sind eine reine UI-Hilfe; in Auswertungen zählen die tatsächlich gespeicherten Tags.

4. Liste der Einzelbuchungen

Ein-/Ausklappen und Scroll

Der Bereich ist ein- und ausklappbar (Details); standardmäßig ist er eingeklappt.
Bei mehr als 12 Einträgen wird die Tabelle automatisch auf eine feste Höhe begrenzt und ist scrollbar.

Suche

Das Suchfeld filtert Einträge, wenn der Suchbegriff in Projekt oder Tags vorkommt (case-insensitive).

Sortierung

Die Tabelle ist immer nach Beginn absteigend sortiert (neueste zuerst).

Bearbeiten

Du kannst Zeitpunkt, Art, Projekt, Tags, Notiz ändern (je nach Art).
Wenn Art = Ende, sind Projekt/Tags/Notiz deaktiviert (fachlich nicht relevant).
Speichern fragt eine Bestätigung ab und validiert die Eingaben.
Löschen fragt eine Bestätigung ab.

Summen-Panel

Die Projektsummen stehen im eigenen Panel „Summen“ oberhalb der Liste; die Tabs „Tage/Wochen/Monate/Jahre“ wählen die Einheit.
Die Elemente sind nach der nächstgrößeren Einheit gruppiert (Tage → Kalenderwoche, Wochen → Monat, Monate → Jahr) und ausklappbar; der Gruppenkopf zeigt die Gesamtsumme der Einheit.
Sortierung: Gruppen absteigend nach Beginn, Elemente innerhalb der Gruppe aufsteigend nach Beginn.
Das Panel ist standardmäßig eingeklappt und wird erst beim Aufklappen gerendert. Danach ist der Tab „Tage“ aktiv und die aktuelle Kalenderwoche aufgeklappt; ab mehr als 10 sichtbaren Elementzeilen wird gescrollt.
Die Tabelle in der „Liste der Einzelbuchungen“ bleibt die vollständige Liste (gefiltert durch Suche).

5. Standard-Auswertungen

Im Panel „Graphische Auswertungen“ (standardmäßig eingeklappt; gerendert wird beim Aufklappen) gibt es oben drei Tortendiagramme:

Heute (00:00–24:00)
Kalenderwoche (ISO-Woche, Montag–Sonntag)
Jahr (01.01–31.12)

Die Legende zeigt pro Projekt die Dauer stets als Stunden und Minuten. In der Torte werden Prozentwerte direkt im Segment angezeigt, sofern das Segment groß genug ist.

6. Spezielle Auswertungen

Unter „Spezielle Auswertungen“ kannst du gezielte Analysen ausführen:

Nur Datum (ohne Projekt): Torten für Tag/Monat/Jahr dieses Datums + Segmentliste für den Tag
Datum + Projekt (ohne Bis): Torten für Monat und Jahr (nur dieses Projekt) + Tagesliste gefiltert
Datum + Bis: Zeitraum-Torte (optional projektgefiltert) + Segmentliste für den Zeitraum
Ende einschließen: erweitert den Zeitraum um das Ende (praktisch „inkl. letzter Tag“)

7. Excel-Stil-Auswertung

Unterhalb der „Liste der Einzelbuchungen“ befindet sich das eigenständige, ausklappbare Panel „Auswertung im Excel-Stil“. Dort werden Zeitwerte tabellarisch dargestellt – ähnlich einer Pivot-Ansicht. Dieselben Tabellen lassen sich über das Menü Export/Import als echte Excel-Arbeitsmappe (.xlsx) oder als CSV-Dateien (ZIP) exportieren.

Gesamtauswertung (Spalten = Projekte)

Zeilen: Tage aufsteigend
Spalten: Projekte
Erste Wertespalte: „Summe“ (Summe aller Projektspalten)
Zusätzliche Summenzeilen: Tagessumme, Wochensumme, Monatssumme, Jahressumme, Gesamtsumme

Projekt-Auswertung (Spalten = Tags)

Für jedes Projekt gibt es eine eigene ausklappbare Tabelle.
Spalten: Tags dieses Projekts (inkl. „(ohne)“).
Breite ist unbeschränkt: horizontales Scrollen möglich.
Wenn ein Segment mehrere Tags hat, wird die Segmentdauer gleichmäßig auf diese Tags verteilt.
Erste Wertespalte ist wieder „Summe“ (Summe der Tag-Spalten).

8. Textauswertung (Tags pro Tag)

Ganz unten findest du eine textuelle Zusammenfassung: pro Tag eine Zeile mit Tags.

Monate sind ausklappbar; der jüngste Monat ist oben und standardmäßig geöffnet.
Pro Tag werden Tags nur einmal angezeigt (unique).
Sortierung der Tags pro Tag: absteigend nach Tag-Zeitsumme des Tages (bei Gleichstand alphabetisch).
Tag-Zeitsummen basieren auf Segmenten; Segmente, die über Mitternacht gehen, werden pro Tag korrekt gesplittet.

9. Backup Export/Import (JSON)

Export

Menüpunkt Export/Import → „Backup exportieren (JSON)“ lädt zeit_erfassung_backup.json herunter.
Format: Objekt mit { "entries": [...] }, lesbar formatiert (2 Spaces).

Import

Menüpunkt Export/Import → „Backup importieren“ liest eine JSON-Datei ein.
Akzeptiert entweder ein Array oder ein Objekt mit entries.
BOM (UTF-8) wird toleriert.
Ungültige Einträge (z. B. ohne finite ts) werden verworfen.

10. Excel- & CSV-Export

Excel-Arbeitsmappe (.xlsx)

Der Menüpunkt Export/Import → „Export als Excel (.xlsx)“ erzeugt zeit_erfassung_export.xlsx – eine echte Arbeitsmappe mit dem Blatt „Gesamt“ (Spalten = Projekte) und je einem Blatt pro Projekt (Spalten = Tags). Zeitwerte sind echte Excel-Zeiten im Format [h]:mm und können direkt weitergerechnet werden; Summenzeilen sind fett. Die Datei entsteht vollständig im Browser, ohne externe Bibliotheken.

CSV-Dateien (ZIP)

Der Menüpunkt Export/Import → „Export als CSV (ZIP)“ erzeugt CSV-Dateien für Rohdaten und Auswertungen.

entries.csv – alle Einträge (Rohdaten)
overall.csv – Gesamtauswertung (Excel-Stil, Spalten=Projekte)
project_<Projekt>.csv – je Projekt die Tag-Auswertung (Spalten=Tags)

Wenn möglich werden alle CSVs in einem ZIP gespeichert (zeit_erfassung_csv_export.zip). Falls ZIP-Erzeugung nicht möglich ist, werden die CSV-Dateien einzeln heruntergeladen (Fallback).

CSV-Format-Hinweis (DE/Excel)

Als Trennzeichen wird standardmäßig ; verwendet. Texte werden bei Bedarf automatisch in Anführungszeichen gesetzt.

11. Themes

Theme-Auswahl oben rechts: Hell / Dunkel / Hoher Kontrast (Standard: Hell).
Die Auswahl wird im localStorage gespeichert, gilt gemeinsam für Website und Zeiterfassung und wird nach Reload wiederhergestellt.
High Contrast nutzt feste, sehr kontrastreiche Farben (auch für Diagramme).

12. Speicher & Diagnose

Die Anwendung speichert Einträge in der IndexedDB des Browsers.

Jede Buchung liegt als eigener Datensatz in einem IndexedDB-Store (Index auf dem Zeitpunkt). Beim Start werden zunächst nur der aktuelle und der vorige Monat geladen; unmittelbar nach dem ersten Seitenaufbau wird der Gesamtbestand asynchron im Hintergrund nachgeladen, sodass Projekt- und Tag-Vorschläge früh vollständig sind. Die Auswertungs-Panels werden erst beim Aufklappen gerendert. Ein Bestand aus dem früheren Sammel-Datensatz wird beim ersten Start automatisch migriert.
Theme- und Sprachauswahl werden im localStorage gespeichert und mit der Website gindhart.de geteilt.

Beim Start wird ein „Speicher-Selbsttest“ in die Konsole geschrieben, der u. a. prüft:

ob IndexedDB verfügbar ist
die Gesamtzahl der gespeicherten Buchungen sowie Speicherbelegung und -kontingent (sofern der Browser navigator.storage unterstützt)

Hinweis zu file://

Wenn du die Datei direkt via file:// öffnest, kann browserseitiger Persistenzspeicher (insbesondere IndexedDB) je nach Browser/Settings unterschiedlich behandelt werden. Empfehlung: lokaler HTTP-Server (http://localhost/...).

13. Troubleshooting

1) „Daten sind weg“ nach Reload

Prüfe, ob du unter file:// arbeitest. Nutze ggf. einen lokalen Webserver.
Öffne die Konsole und suche nach „Speicher-Selbsttest“. Wenn ok=false, konnte IndexedDB nicht sauber genutzt werden.
Als Workaround: JSON-Backup exportieren und nach Server-Wechsel wieder importieren.

2) Diagramme zeigen nichts

Segmente entstehen nur aus Start + nächstem Eintrag.
Wenn du nur Start-Einträge ohne nachfolgenden Eintrag hast, gibt es kein Segment.
Achte darauf, dass Zeiten aufsteigend sinnvoll sind (keine negativen/0-Dauern).

3) Projekt-/Tag-Vorschläge fehlen

Vorschläge entstehen aus gespeicherten Start-Einträgen.
Projekt-Tags-Vorschläge sind projektabhängig; wähle zuerst ein Projekt.

Zeit-Erfassung

Werte-Erfassung

Heute

Kalenderwoche

Jahr

Torte 1

Torte 2

Torte 3

Segmentliste