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

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>