leesbare tijdseenheid in stats plus timer door laten lopen na einde

src/app/pages/modus/focus/focus-stats.ts

@@ -1,47 +1,65 @@
 import {FocusState} from "./focus-state";
-import {state} from "@angular/animations";
 
 export class FocusStats {
   private _focusCycles: number = 0;
   private _focusTimeInMs: number = 0;
+  private _focusTime: string = '';
   private _shortBreakCycles: number = 0;
   private _longBreakCycles: number = 0;
   private _breakTimeInMs: number = 0;
+  private _breakTime: string = '';
 
   inc(state: FocusState, deltaInMs?: number): void {
     switch (state) {
       case FocusState.FOCUS:
         this._focusCycles++;
         this._focusTimeInMs += !!deltaInMs ? deltaInMs : 0;
+        this.updateFocusTime();
         break;
       case FocusState.SHORT_BREAK:
         this._shortBreakCycles++;
         this._breakTimeInMs += !!deltaInMs ? deltaInMs : 0;
+        this.updateBreakTime();
         break;
       case FocusState.LONG_BREAK:
         this._longBreakCycles++;
         this._breakTimeInMs += !!deltaInMs ? deltaInMs : 0;
+        this.updateBreakTime();
         break;
       default:
         // nothing
         break;
     }
-    console.log("stas after inc", state, "with", deltaInMs);
+  }
-    console.log("focusCylces", this._focusCycles);
+
-    console.log("focusTime" , this._focusTimeInMs);
+  private updateFocusTime() {
-    console.log("shortBreakCycles", this._shortBreakCycles);
+    this._focusTime = this.transformTime(this._focusTimeInMs);
-    console.log("longBreakCycles", this._longBreakCycles);
+  }
-    console.log("beeakTime", this._breakTimeInMs);
+
+  private updateBreakTime() {
+    this._breakTime = this.transformTime(this._breakTimeInMs);
+  }
+
+  private transformTime(ms: number): string {
+    const totalSeconds = Math.floor(ms / 1000);
+    const seconds = totalSeconds % 60;
+    const totalMinutes = Math.floor(totalSeconds / 60);
+    const minutes = totalMinutes % 60;
+    const hours = Math.floor(totalMinutes / 60);
+
+    const pad = (n: number) => n.toString().padStart(2, "0");
+
+    if (hours > 0) {
+      return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+    } else {
+      return `${pad(minutes)}:${pad(seconds)}`;
+    }
   }
 
   get focusCycles(): number {
     return this._focusCycles;
   }
 
-  get focusTimeInMs(): number {
-    return this._focusTimeInMs;
-  }
-
   get shortBreakCycles(): number {
     return this._shortBreakCycles;
   }
@@ -50,7 +68,12 @@ export class FocusStats {
     return this._longBreakCycles;
   }
 
-  get breakTimeInMs(): number {
+
-    return this._breakTimeInMs;
+  get focusTime(): string {
+    return this._focusTime;
+  }
+
+  get breakTime(): string {
+    return this._breakTime;
   }
 }

src/app/pages/modus/focus/focus.component.html

@@ -75,7 +75,7 @@
         </ion-item>
         <ion-item>
           <ion-label>
-            <p>Focus tijd: <span>{{ ($stats | async)?.focusTimeInMs}}</span></p>
+            <p>Focus tijd: <span>{{ ($stats | async)?.focusTime}}</span></p>
           </ion-label>
         </ion-item>
         <ion-item>
@@ -90,7 +90,7 @@
         </ion-item>
         <ion-item>
           <ion-label>
-            <p>Pauze tijd: <span>{{ ($stats | async)?.breakTimeInMs}}</span></p>
+            <p>Pauze tijd: <span>{{ ($stats | async)?.breakTime}}</span></p>
           </ion-label>
         </ion-item>
       </ion-list>

src/app/pages/modus/focus/focus.component.ts

@@ -67,27 +67,27 @@ export class FocusPage implements OnInit, OnDestroy {
   }
 
   private update() {
-    const elapsed = Math.round((Date.now() - (this.timerStarted!)) / 1000); // in seconden
+    const elapsed = this.timerStarted ?  Math.round((Date.now() - (this.timerStarted)) / 1000) : 0; // in seconden
     let progress = elapsed / (this.duration * 60); // from 0 to 1
 
     if( progress === 0) {
       progress = 0.0000001; // otherwise no graph
     }
 
-    if (progress >= 1) {
+    if (progress >= 1 || isNaN(progress)) {
       progress = 1;
       if (this.duration === 0) {
         this.forcedEndOfTimerChime.play().catch(error => {
           console.error('Error playing audio:', error);
         });
+        clearInterval(this.interval);
+        this.timerStarted = null;
       }
       else {
         this.endOfTimerChime.play().catch(error => {
           console.error('Error playing audio:', error);
         });
       }
-      clearInterval(this.interval);
-      this.timerStarted = null;
     }
 
     this.renderer.setStyle(
@@ -106,8 +106,9 @@ export class FocusPage implements OnInit, OnDestroy {
     this.pathD = 'M100 10 A90 90 0 ' + (percentage > 0.5 ? '1' : '0') + ' 1 ' + circleEndX + ' ' + circleEndY;
 
     const twoNumbers = (n: number) => n < 10 && n >= 0 ? '0' + n.toString() : n.toString();
-    this.minutesText = twoNumbers(Math.max(Math.floor(timeLeft / 60), 0));
+    const floorPositiveCeilNegative = (n: number): number => n > 0 ? Math.floor(n) : Math.ceil(n);
-    this.secondsText = twoNumbers(Math.max(Math.floor(timeLeft % 60), 0));
+    this.minutesText = twoNumbers(Math.abs(floorPositiveCeilNegative(timeLeft / 60)));
+    this.secondsText = twoNumbers(Math.abs(floorPositiveCeilNegative(timeLeft % 60)));
 
     this.dashOffset = elapsed;
   }
@@ -147,7 +148,7 @@ export class FocusPage implements OnInit, OnDestroy {
     this.state = FocusState.FOCUS;
     this.stopStatsCounter();
     this.focusService.startFocus();
-    this.startTimer(25); // 25
+    this.startTimer(1); // 25
   }
 
   reload() {
@@ -160,7 +161,7 @@ export class FocusPage implements OnInit, OnDestroy {
     this.state = FocusState.SHORT_BREAK;
     this.stopStatsCounter();
     this.focusService.startShortBreak();
-    this.startTimer(5); // 5
+    this.startTimer(0.1); // 5
   }
 
   recharge() {
@@ -173,6 +174,6 @@ export class FocusPage implements OnInit, OnDestroy {
     this.state = FocusState.LONG_BREAK;
     this.stopStatsCounter();
     this.focusService.startLongBreak();
-    this.startTimer(15); // 15
+    this.startTimer(0.3); // 15
   }
 }

src/app/pages/modus/focus/focus.service.ts

@@ -37,35 +37,4 @@ export class FocusService {
       this.statsSubject.next(this.localStats);
     }
   }
-
-  private formatDelta(deltaInMs: number) {
-    const totalSeconds = Math.floor(deltaInMs / 1000);
-    const hours = Math.floor(totalSeconds / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = totalSeconds % 60;
-
-    const padZero = (num: number) => num.toString().padStart(2, '0');
-
-    return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
-  }
-
-  getFocusCycles(): number {
-    return this.localStats.focusCycles;
-  }
-
-  getFocusTime(): string {
-    return this.formatDelta(this.localStats.focusTimeInMs);
-  }
-
-  getShortBreakCycles(): number {
-    return this.localStats.shortBreakCycles;
-  }
-
-  getLongBreakCycles(): number {
-    return this.localStats.longBreakCycles;
-  }
-
-  getBreakTime(): string {
-    return this.formatDelta(this.localStats.breakTimeInMs);
-  }
 }