wanjakrah/tusha
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Finished the pomodoro timer

Browse Source 
except for a sound, the settings and perfect centering on mobile devices
This commit is contained in:
Wanja Krah
2024-11-15 18:54:28 +01:00
parent c75f322a0c
commit 4e3431e7a7
3 changed files with 107 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/app/pages/modus/focus/focus.component.ts
View File

@@ -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);
}
}