time-to-work

time-to-work


Project LanguageGerman
StatusCompleted
TypeWeb application
Programming Language
HTMLCSSJavaScript
Since the language of this project is german, the following description will also be in german.

time-to-work

Work time dashboard / calculator

Kurzbeschreibung


Halte mit dem Arbeitszeitdashboard "TimeToWork" deine Arbeitsstunden im Blick.

TimeToWork starten


  1. 1.
    Lade das Repository herunter (als .zip Datei oder via git clone).
  2. 2.
    Starte die Applikation, in dem du die Datei timeToWork.html in deinem Browser öffnest.

Features


Neumorphic Design

TimeToWork hat eine schöne und moderne Benutzeroberfläche im Neumorphic-Stil.

Light- und Dark-Mode

Du kannst zwischen Light- und Dark-Mode wechseln, in dem du den Button oben links anklickst.

Zeiterfassung

Du kannst deine Arbeitszeit über 3 Wege erfassen:
  1. 1.
    Zeiterfassung via Zeitstempel
    Wenn du auf den Button "Zeitstempel erfassen" klickst, wird eine neuer Zeitstempel mit der aktuellen Zeit erstellt. Falls bereits ein offener Zeitstempel vorhanden ist, wird dieser mit der aktuellen Zeit geschlossen.
  2. 2.
    Zeiterfassung via Eingabe eines Zeitintervalls
    Du kannst ein Zeitintervall (durch Angabe von Start- und Endzeit) erstellen.
  3. 3.
    Erstellen eines offenen Zeitstempels bei angegebener Startzeit
    Falls du ein Zeitintervall ohne Endzeit angibst wird, statt eines Zeitintervalls, ein offener Zeitstempel mit deiner angegeben Zeit erstellt.
Deine erstellten Zeitintervalle bzw. Zeitstempel werden in einer Tabelle angezeigt. Dort siehst du auch den Zeitunterschied von jedem Zeitintervall / Zeitstempel.

Arbeitszeitberechungen

Durch die Angabe von
  1. 1.
    Arbeitszeit
    Hier kannst du eintragen, wie lange du am Tag arbeiten musst.
  2. 2.
    Zeitsaldo (Überstunden)
    Trage hier deinen Überstundenkontostand ein (Unterstunden werden auch unterstützt).
  3. 3.
    Mindestpause
    Hier kannst du die gesetzliche Mindestpause eintragen.
berechnet dir TimeToWork folgende Werte:
  1. 1.
    Summe der Arbeitszeit
    So lange hast du heute schon gearbeitet.
  2. 2.
    restliche Arbeitszeit
    Ein Blick auf dieses Feld verrät dir, wie viel du noch zu arbeiten hast.
  3. 3.
    Arbeitsende
    Dieses Feld zeigt dir an, wann du Feierabend hast. Dabei wird davon ausgegangen, dass du exakt die Zeit arbeitest, die du in dem Feld "Arbeitszeit" angegeben hast (keine Über- / Unterstunden). Es werden auch die Pausen (in Kombination mit der Mindestpause) mit einberechnet.
  4. 4.
    neuer Zeitsaldo
    Falls du jetzt deinen Arbeitsplatz verlassen solltest, zeigt dir dieses Feld an, wie dein Überstundenkonto dann aussehen würde.
  5. 5.
    Summe der eingelegten Pausen
    So lange hast du heute schon Pause gemacht.

Zugberechnungen

Wenn du mit dem Zug zur Arbeit kommst, kannst du bei Angabe von
  1. 1.
    Startzeitpunkt
    Hier trägst du ein, was der Startzeitpunkt des Zugplans ist. Beispiel: Wenn der Zug z.B. jeden Tag um 14:04, 14:34, 15:04, ... abfährt, trägst du hier 00:04 ein.
  2. 2.
    jede
    Hier gibst du an, in welchem Intervall dein Zug regelmäßig kommt. Beispiel: Wenn der Zug z.B. jeden Tag um 14:04, 14:34, 15:04, ... abfährt, trägst du hier 00:30 ein.
  3. 3.
    Wegzeit
    In diesem Feld kannst du eintragen, wie lange du brauchst, um von deinem Arbeitsplatz zum Bahnhof zu gelangen.
folgendes sehen:
  1. 1.
    Zeitpunkt zum Verlassen des Arbeitsplatzes
    Hier siehst du, wann du deinen Arbeitsplatz verlassen musst, damit du den nächsten Zug pünktlich erreichst.
  2. 2.
    Abfahrt des nächsten Zugs
    Dieses Feld zeigt dir an, wann der nächste Zug abfährt (und in wie vielen Minuten das ist).

Speichern

Der gesamte Zustand der Applikation wird beim Schließen des Tabs (bei dir lokal via localStorage) gesichert. Dieser Zustand wird wiederherstellt, wenn du die Applikation wieder öffnest.
Wenn du aber die Applikation an einem neuen Tag öffnest, werden die Zeitstempel und Zeitintervalle vom Vortag nicht geladen und der am Vortag berechnete neue Zeitsaldo wird als aktueller Zeitsaldo übernommen.