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

@@ -66,6 +66,35 @@
 
   <div class="focus-stats">
     hier komen de stats
+    <ion-card>
+      <ion-list>
+        <ion-item>
+          <ion-label>
+            <p>Aantal focus cycles: <span>{{ ($stats | async)?.focusCycles }}</span></p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <p>Focus tijd: <span>{{ ($stats | async)?.focusTimeInMs}}</span></p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <p>Aantal korte pauzes: <span>{{ ($stats | async)?.shortBreakCycles}}</span></p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <p>Aantal lange pauzes: <span>{{ ($stats | async)?.longBreakCycles}}</span></p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <p>Pauze tijd: <span>{{ ($stats | async)?.breakTimeInMs}}</span></p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card>
     <!--
     ion-card
     met daarin ion-lines met de vol

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

@@ -1,14 +1,25 @@
 import {Component, OnDestroy, OnInit, Renderer2} from "@angular/core";
-import {IonBreadcrumb, IonBreadcrumbs, IonButton, IonContent, IonIcon, IonProgressBar} from "@ionic/angular/standalone";
+import {
+  IonBreadcrumb,
+  IonBreadcrumbs,
+  IonButton,
+  IonCard,
+  IonContent,
+  IonIcon, IonItem, IonLabel, IonList,
+  IonProgressBar
+} from "@ionic/angular/standalone";
 import {TushaPageComponent} from "../../../tusha/tusha-page/tusha-page.component";
 import {FocusState} from "./focus-state";
 import {FocusService} from "./focus.service";
+import {Observable} from "rxjs";
+import {FocusStats} from "./focus-stats";
+import { CommonModule } from '@angular/common';
 
 @Component({
   templateUrl: 'focus.component.html',
   styleUrls: ['focus.component.css'],
   standalone: true,
-  imports: [IonBreadcrumbs, IonBreadcrumb, IonIcon, TushaPageComponent, IonProgressBar, IonContent, IonButton]
+  imports: [IonBreadcrumbs, IonBreadcrumb, IonIcon, TushaPageComponent, IonProgressBar, IonContent, IonButton, IonCard, IonItem, IonLabel, IonList, CommonModule]
 })
 export class FocusPage implements OnInit, OnDestroy {
   duration: number = 0; // default duration in minutes
@@ -18,6 +29,7 @@ export class FocusPage implements OnInit, OnDestroy {
   private timerStarted: number | null = null;
   state: FocusState = FocusState.STOPPED;
   private focusRuns = 0;
+  $stats: Observable<FocusStats> = this.focusService.$stats;
 
   private endOfTimerChime: HTMLAudioElement;
 

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

@@ -1,11 +1,14 @@
 import {FocusStats} from "./focus-stats";
 import {FocusState} from "./focus-state";
 import {Injectable} from "@angular/core";
+import {BehaviorSubject, Observable} from "rxjs";
 
 @Injectable({  providedIn: 'root',})
 export class FocusService {
   current: {state: FocusState, start: Date} = {state: FocusState.STOPPED, start: new Date()};
-  stats: FocusStats = new FocusStats();
+  private localStats = new FocusStats();
+  private statsSubject: BehaviorSubject<FocusStats> = new BehaviorSubject<FocusStats>(this.localStats);
+  $stats: Observable<FocusStats> = this.statsSubject.asObservable();
 
   private startState(state: FocusState) {
     this.current.state = state;
@@ -27,9 +30,11 @@ export class FocusService {
   stopCurrent(forced: boolean) {
     if (!forced) {
       const deltaInMs = new Date().getTime() - this.current.start.getTime();
-      this.stats.inc(this.current.state, deltaInMs);
+      this.localStats.inc(this.current.state, deltaInMs);
+      this.statsSubject.next(this.localStats);
     } else {
-      this.stats.inc(this.current.state);
+      this.localStats.inc(this.current.state);
+      this.statsSubject.next(this.localStats);
     }
   }
 
@@ -45,22 +50,22 @@ export class FocusService {
   }
 
   getFocusCycles(): number {
-    return this.stats.focusCycles;
+    return this.localStats.focusCycles;
   }
 
   getFocusTime(): string {
-    return this.formatDelta(this.stats.focusTimeInMs);
+    return this.formatDelta(this.localStats.focusTimeInMs);
   }
 
   getShortBreakCycles(): number {
-    return this.stats.shortBreakCycles;
+    return this.localStats.shortBreakCycles;
   }
 
   getLongBreakCycles(): number {
-    return this.stats.longBreakCycles;
+    return this.localStats.longBreakCycles;
   }
 
   getBreakTime(): string {
-    return this.formatDelta(this.stats.breakTimeInMs);
+    return this.formatDelta(this.localStats.breakTimeInMs);
   }
 }

src/app/tusha/tusha-page/tusha-page.component.css

@@ -1,6 +1,5 @@
 ion-grid {
   max-width: 280px;
-  height: 100%;
 }
 
 ion-grid .backpane {