Improved entry delete UX

src/app/time/time.page.html

@@ -29,6 +29,7 @@
       <div class="circle"></div>
       <ion-label class="type">{{getTypeText(entry.type)}}</ion-label>
       <span class="time">{{formatEntry(entry.registeredAt.getHours(), entry.registeredAt.getMinutes())}}</span>
+      <ion-icon name="trash" *ngIf="isToday()" />
       <span *ngIf="index !== 0" class="between">
         <span class="between-content">{{generateSeparatorText(today[index - 1], entry)}}</span>
       </span>

src/app/time/time.page.scss

@@ -22,6 +22,10 @@
     line-height: 15px;
     z-index: 0;
 
+    ion-icon {
+      margin-left: 1rem;
+    }
+
     &.animate {
       opacity: 0;
       animation: fade-in 200ms ease-in-out forwards;

src/app/time/time.page.ts

@@ -7,12 +7,21 @@ import {
   IonButton,
   IonList,
   IonItem,
-  IonLabel, IonIcon, IonModal, IonButtons, IonInput, IonDatetime, IonDatetimeButton, IonSelect, IonSelectOption
+  IonLabel,
+  IonIcon,
+  IonModal,
+  IonButtons,
+  IonInput,
+  IonDatetime,
+  IonDatetimeButton,
+  IonSelect,
+  IonSelectOption,
+  AlertController
 } from '@ionic/angular/standalone';
 import {TimeEntry, TimeType} from "../../models/timeEntry";
 import {NgClass, NgForOf, NgIf} from "@angular/common";
 import {addIcons} from "ionicons";
-import {add} from "ionicons/icons";
+import {add, trash} from "ionicons/icons";
 import {FormsModule} from "@angular/forms";
 import {TimeService} from "../../services/time.service";
 import {AppComponent} from "../app.component";
@@ -34,7 +43,7 @@ export class TimePage {
   public modalDate: any;
   public currentDate: any;
 
-  constructor(private timeService: TimeService) {
+  constructor(private timeService: TimeService, private alerts: AlertController) {
     this.data = timeService.loadEntries();
 
     for (let i = 0; i < this.data.length; i++) {
@@ -43,7 +52,7 @@ export class TimePage {
 
     this.updateCurrentAction();
 
-    addIcons({add});
+    addIcons({add, trash});
   }
 
   ionViewDidEnter() {
@@ -112,11 +121,32 @@ export class TimePage {
     this.updateCurrentAction();
   }
 
-  public removeEntry(entry: TimeEntry, index: number): void {
-    this.shouldAnimate.splice(index, 1);
-    this.data.splice(this.data.indexOf(entry), 1);
-    this.saveData();
-    this.updateCurrentAction();
+  public async removeEntry(entry: TimeEntry, index: number) {
+    if (!this.isToday()) return;
+
+    const alert = await this.alerts.create({
+      header: "Achtung!",
+      message: 'Möchtest du diesen Eintrag wirklich löschen?',
+      buttons: [
+        {
+          text: "Abbrechen",
+          role: "cancel"
+        },
+        {
+          text: "Löschen",
+          role: "destructive"
+        }
+      ]
+    });
+    await alert.present();
+    const result = await alert.onDidDismiss();
+
+    if (result.role == "destructive") {
+      this.shouldAnimate.splice(index, 1);
+      this.data.splice(this.data.indexOf(entry), 1);
+      this.saveData();
+      this.updateCurrentAction();
+    }
   }
 
   private updateCurrentAction(): void {