From 4e3431e7a7cfad802893ad1ba2835a1636b25fea Mon Sep 17 00:00:00 2001 From: Wanja Krah Date: Fri, 15 Nov 2024 18:54:28 +0100 Subject: [PATCH] Finished the pomodoro timer except for a sound, the settings and perfect centering on mobile devices --- src/app/pages/modus/focus/focus.component.css | 48 +++++----- .../pages/modus/focus/focus.component.html | 90 +++++++++++-------- src/app/pages/modus/focus/focus.component.ts | 55 ++++++------ 3 files changed, 107 insertions(+), 86 deletions(-) diff --git a/src/app/pages/modus/focus/focus.component.css b/src/app/pages/modus/focus/focus.component.css index 2eb7863..29deb22 100644 --- a/src/app/pages/modus/focus/focus.component.css +++ b/src/app/pages/modus/focus/focus.component.css @@ -9,8 +9,11 @@ app-tusha-page { justify-content: space-between; } -.countdown-box { +.fullwidth { width: 320px; +} + +.countdown-box { height: 320px; border: 2px solid; padding: 0.5em 0.5em 0.5em 0.5em; @@ -30,31 +33,31 @@ app-tusha-page { color: darkred; } -.countdown-state-short-break-box { - background-color: lightgreen; +.countdown-state-short_break-box { + background-color: lightcyan; border-color: darkgreen; } -.countdown-state-short-break-text { +.countdown-state-short_break-text { color: darkgreen; } -.countdown-state-long-break-box { +.countdown-state-long_break-box { background-color: peachpuff; border-color: orangered; } -.countdown-state-long-break-text { +.countdown-state-long_break-text { color: orangered; } -.countdown-state-in-focus-box { +.countdown-state-in_focus-box { background-color: lightblue; border-color: darkblue; } -.countdown-state-in-focus-text { +.countdown-state-in_focus-text { color: darkblue; } @@ -72,6 +75,19 @@ app-tusha-page { background-color: lavender; } +.countdown-text { + position: relative; + transform: translate(25%, -225%); + font-size: 4em; + color: var(--ion-color-primary); +} + +ion-button { + position: relative; + width: 120px; +} + + @@ -98,21 +114,9 @@ app-tusha-page { background-color: beige; } -ion-button { - position: relative; - left: 50%; - margin-top: 20px; - transform: translate(-50%, 0%); -} -.countdown-text { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 4em; - color: var(--ion-color-primary); -} + + .timer { width: 350px; diff --git a/src/app/pages/modus/focus/focus.component.html b/src/app/pages/modus/focus/focus.component.html index 3e71b30..6425b7a 100644 --- a/src/app/pages/modus/focus/focus.component.html +++ b/src/app/pages/modus/focus/focus.component.html @@ -14,15 +14,24 @@ - - - -
+
+ + + Focus + + + + Give up + +
+ +
{{state}} +
@@ -43,47 +52,50 @@
{{ minutesText }}:{{ secondsText }}
-
- Focus - Give up -
-
- Reload - Recharge + +
+ + + Reload + + + + Recharge +
-
-
- - - - - - - - - - + + + + + + + + + + + + - - -
{{ minutesText }}:{{ secondsText }}
-
+ + + + + -
-
{{state}}
- -
- Focus - Give up -
-
- Reload - Recharge -
+ + + + + + + + + + + diff --git a/src/app/pages/modus/focus/focus.component.ts b/src/app/pages/modus/focus/focus.component.ts index 321c3e6..6f4db74 100644 --- a/src/app/pages/modus/focus/focus.component.ts +++ b/src/app/pages/modus/focus/focus.component.ts @@ -10,13 +10,11 @@ import {FocusState} from "./focus-state"; imports: [IonBreadcrumbs, IonBreadcrumb, IonIcon, TushaPageComponent, IonProgressBar, IonContent, IonButton] }) export class FocusPage implements OnInit, OnDestroy { - duration: number = 0.5; // default duration in minutes - minutes: number = 25; + duration: number = 0; // default duration in minutes minutesText: string = ''; - seconds: number = 0; secondsText: string = ''; - private interval: any; - private startTime: number | null = null; + private interval: number | undefined; + private timerStarted: number | null = null; state: FocusState = FocusState.STOPPED; @@ -42,30 +40,24 @@ export class FocusPage implements OnInit, OnDestroy { clearInterval(this.interval); } - this.startTime = Date.now(); + this.timerStarted = Date.now(); + this.update(); this.interval = setInterval(() => this.update(), 1000); } private update() { - const elapsed = Math.round((Date.now() - (this.startTime as number)) / 1000); // in seconden - let progress = elapsed / (this.duration * 60); + const elapsed = Math.round((Date.now() - (this.timerStarted!)) / 1000); // in seconden + let progress = elapsed / (this.duration * 60); // from 0 to 1 + + if( progress === 0) { + progress = 0.0000001; // otherwise no graph + } if (progress >= 1) { - console.log('timer reader'); progress = 1; clearInterval(this.interval); } - const path1 = document.getElementById('1stPath') as unknown as SVGPathElement; - - const totalLength1 = path1.getTotalLength(); - - // path1.style.strokeDasharray = `${totalLength1}`; - // path1.style.strokeDashoffset = `${totalLength1 - totalLength1 * this.progress}`; - // - // path2.style.strokeDasharray = `${totalLength2}`; - // path2.style.strokeDashoffset = `${totalLength2 - totalLength2 * this.progress}`; - this.renderer.setStyle( document.documentElement, '--progress', @@ -82,12 +74,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.minutes = Math.max(Math.floor(timeLeft / 60), 0); - this.seconds = Math.max(Math.floor(timeLeft % 60), 0); - this.minutesText = twoNumbers(this.minutes); - this.secondsText = twoNumbers(this.seconds); + this.minutesText = twoNumbers(Math.max(Math.floor(timeLeft / 60), 0)); + this.secondsText = twoNumbers(Math.max(Math.floor(timeLeft % 60), 0)); - const progress = -1 * (elapsed / (this.duration * 60)); this.dashOffset = elapsed; } @@ -96,6 +85,22 @@ export class FocusPage implements OnInit, OnDestroy { } stopTimer() { - clearInterval(this.interval); + this.state = FocusState.STOPPED; + this.startTimer(0); + } + + focus() { + this.state = FocusState.FOCUS; + this.startTimer(25); + } + + reload() { + this.state = FocusState.SHORT_BREAK; + this.startTimer(5); + } + + recharge() { + this.state = FocusState.LONG_BREAK; + this.startTimer(15); } }