added pwa + dienstreise support

src/app/time/time.page.html

@@ -6,7 +6,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true" [scrollY]="false">
+<ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">Zeiterfassung</ion-title>
@@ -27,7 +27,7 @@
   <section class="time-entries">
     <ion-item class="entry" *ngFor="let entry of getEntriesOfToday(); let index = index" (click)="removeEntry(index)" [ngClass]="{'animate': shouldAnimate[index]}">
       <div class="circle"></div>
-      <ion-label class="type">{{entry.type === 'login' ? "Eingestempelt" : "Ausgestempelt"}}</ion-label>
+      <ion-label class="type">{{getTypeText(entry.type)}}</ion-label>
       <span class="time">{{entry.registeredAt.toLocaleTimeString()}}</span>
       <span *ngIf="index !== 0" class="between">
         <span class="between-content">{{generateSeparatorText(data[index - 1], entry)}}</span>
@@ -37,7 +37,7 @@
 
   <div class="button-container">
     <ion-button (click)="addEntry()">{{currentAction === 'login' ? "Einstempeln" : "Ausstempeln"}}</ion-button>
-    <ion-button shape="round" id="open-modal">
+    <ion-button shape="round" id="open-modal" class="icon-button">
       <ion-icon slot="icon-only" name="add"></ion-icon>
     </ion-button>
   </div>
@@ -70,6 +70,8 @@
           <ion-select label="Stempeltyp" value="login" [(ngModel)]="modalMode">
             <ion-select-option value="login">Einstempeln</ion-select-option>
             <ion-select-option value="logout">Ausstempeln</ion-select-option>
+            <ion-select-option value="start-drive">Dienstreise starten</ion-select-option>
+            <ion-select-option value="end-drive">Dienstreise beenden</ion-select-option>
           </ion-select>
         </ion-item>
       </ion-content>

src/app/time/time.page.scss

@@ -1,6 +1,6 @@
 .button-container {
-  position: absolute;
-  bottom: 75px;
+  position: fixed;
+  bottom: 25px;
   left: 0;
   right: 0;
   display: flex;
@@ -13,6 +13,7 @@
   flex-direction: column;
   gap: 65px;
   margin: 20px;
+  padding-bottom: 75px;
 
   .entry {
     --inner-border-width: 0 0 0 0;

src/app/time/time.page.ts

@@ -57,23 +57,45 @@ export class TimePage {
     return this.data.filter(entry => entry.registeredAt.getDay() === today);
   }
 
+  public getTypeText(type: TimeType): string {
+    switch (type) {
+      case "login":
+        return "Eingestempelt";
+
+      case "logout":
+        return "Ausgestempelt";
+
+      case "start-drive":
+        return "Dienstreise gestartet";
+
+      case "end-drive":
+        return "Dienstreise beendet";
+    }
+  }
+
   public generateSeparatorText(entry1: TimeEntry, entry2: TimeEntry): string {
     const difference = +entry2.registeredAt.getTime() - +entry1.registeredAt.getTime() - 3600000;
     const date = new Date(difference);
-    const text = entry1.type === 'login' ? "Arbeit " : "Pause ";
+
+    let text = entry1.type === 'login' ? "Arbeit " : "Pause ";
+    if (entry1.type === 'start-drive' && entry2.type === 'end-drive') {
+      text = "Dienstreise";
+    }
+
     return text + `(${date.toLocaleTimeString()})`;
   }
 
   public addEntry(): void {
+    const animateIndex = this.shouldAnimate.length;
     this.shouldAnimate.push(true)
-    setTimeout(() => this.shouldAnimate[this.shouldAnimate.length - 1] = false, 5000);
+    setTimeout(() => this.shouldAnimate[animateIndex] = false, 2000);
 
     this.data.push({
       registeredAt: new Date(Date.now()),
       type: this.currentAction
     });
     this.saveData();
-    this.currentAction = this.currentAction === 'login' ? 'logout' : 'login';
+    this.updateCurrentAction();
   }
 
   public removeEntry(index: number): void {