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

develop #3

Merged
wanjakrah merged 17 commits from develop into main 2026-11-12 16:37:01 +01:00
Conversation 0 Commits 17 Files Changed 71 +107 -86
3 changed files with 107 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4e3431e7a7 - Show all commits

48
src/app/pages/modus/focus/focus.component.css
View File

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

90
src/app/pages/modus/focus/focus.component.html
View File

@@ -14,15 +14,24 @@
</ion-breadcrumb>
</ion-breadcrumbs>
<!-- TODO add settings cogwheel -->
<!-- TODO add default action to div -->
<!-- TODO add are you sure pop-ups -->
<div class="countdown-box countdown-state-{{state}}-box">
<div class="leftright-line fullwidth">
<ion-button (click)="focus()" color="primary">
<ion-icon slot="start" name="aperture"></ion-icon>
Focus
</ion-button>
<ion-button (click)="stopTimer()" color="danger">
<ion-icon slot="start" name="close-circle"></ion-icon>
Give up
</ion-button>
</div>
<div class="countdown-box countdown-state-{{state}}-box fullwidth">
<div class="leftright-line">
<span class="countdown-state-text countdown-state-{{state}}-text">{{state}}</span>
<!-- TODO add behaviour to settings cogwheel -->
<ion-icon name="settings-outline"></ion-icon>
</div>
<div class="countdown-timer">
@@ -43,47 +52,50 @@
<div class="countdown-text">{{ minutesText }}:{{ secondsText }}</div>
</div>
</div>
<div class="leftright-line">
<ion-button (click)="startTimer(25)">Focus</ion-button>
<ion-button (click)="stopTimer()">Give up</ion-button>
</div>
<div class="leftright-line">
<ion-button (click)="startTimer(5)">Reload</ion-button>
<ion-button (click)="startTimer(15)">Recharge</ion-button>
<div class="leftright-line fullwidth">
<ion-button (click)="reload()" color="secondary">
<ion-icon slot="start" name="refresh-circle" ></ion-icon>
Reload
</ion-button>
<ion-button (click)="recharge()" color="warning">
<ion-icon slot="start" name="battery-charging"></ion-icon>
Recharge
</ion-button>
</div>
<div class="timer">
<div class="countdown focusmode">
<svg class="focustimer" width="100%" height="100%" viewBox="0 0 200 200" style="background-color: lavender;" (click)="startWhereWeAre()">
<!-- Definieer de gradient -->
<defs>
<!-- have the gradient follow the path is possible but too difficult for now - can be read at https://stackoverflow.com/questions/14633363/can-i-apply-a-gradient-along-an-svg-path -->
<linearGradient id="grad1" x1="1" y1="0" x2="0" y2="0">
<stop offset="0%" stop-color="blue"></stop>
<stop offset="80%" stop-color="green"></stop>
<stop offset="100%" stop-color="red"></stop>
</linearGradient>
</defs>
<!-- <div class="timer">-->
<!-- <div class="countdown focusmode">-->
<!-- <svg class="focustimer" width="100%" height="100%" viewBox="0 0 200 200" style="background-color: lavender;" (click)="startWhereWeAre()">-->
<!-- &lt;!&ndash; Definieer de gradient &ndash;&gt;-->
<!-- <defs>-->
<!-- &lt;!&ndash; have the gradient follow the path is possible but too difficult for now - can be read at https://stackoverflow.com/questions/14633363/can-i-apply-a-gradient-along-an-svg-path &ndash;&gt;-->
<!-- <linearGradient id="grad1" x1="1" y1="0" x2="0" y2="0">-->
<!-- <stop offset="0%" stop-color="blue"></stop>-->
<!-- <stop offset="80%" stop-color="green"></stop>-->
<!-- <stop offset="100%" stop-color="red"></stop>-->
<!-- </linearGradient>-->
<!-- </defs>-->
<path id="1stPath" [attr.d]="pathD"
fill="none" stroke="url(#grad1)" stroke-width="30" stroke-dasharray="0" [attr.stroke-dashoffset]="dashOffset" />
</svg>
<div class="countdown-text">{{ minutesText }}:{{ secondsText }}</div>
</div>
<!-- <path id="1stPath" [attr.d]="pathD"-->
<!-- fill="none" stroke="url(#grad1)" stroke-width="30" stroke-dasharray="0" [attr.stroke-dashoffset]="dashOffset" />-->
<!-- </svg>-->
<!-- <div class="countdown-text">{{ minutesText }}:{{ secondsText }}</div>-->
<!-- </div>-->
</div>
<div class="state state-{{state}}">{{state}}</div>
<!-- TODO decide buttons to show on state -->
<div class="buttonBar">
<ion-button (click)="startTimer(25)">Focus</ion-button>
<ion-button (click)="stopTimer()">Give up</ion-button>
</div>
<div class="buttonBar">
<ion-button (click)="startTimer(5)">Reload</ion-button>
<ion-button (click)="startTimer(15)">Recharge</ion-button>
</div>
<!-- </div>-->
<!-- <div class="state state-{{state}}">{{state}}</div>-->
<!-- &lt;!&ndash; TODO decide buttons to show on state &ndash;&gt;-->
<!-- <div class="buttonBar">-->
<!-- <ion-button (click)="startTimer(25)">Focus</ion-button>-->
<!-- <ion-button (click)="stopTimer()">Give up</ion-button>-->
<!-- </div>-->
<!-- <div class="buttonBar">-->
<!-- <ion-button (click)="startTimer(5)">Reload</ion-button>-->
<!-- <ion-button (click)="startTimer(15)">Recharge</ion-button>-->
<!-- </div>-->
</app-tusha-page>

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