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);
-    console.log("shortBreakCycles", this._shortBreakCycles);
-    console.log("longBreakCycles", this._longBreakCycles);
-    console.log("beeakTime", this._breakTimeInMs);
+  }
+
+  private updateFocusTime() {
+    this._focusTime = this.transformTime(this._focusTimeInMs);
+  }
+
+  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;
   }
 }