108 lines
3.5 KiB
HTML
108 lines
3.5 KiB
HTML
<app-tusha-page>
|
|
<ion-breadcrumbs slot="breadcrumb">
|
|
<ion-breadcrumb href="tusha/home">
|
|
<ion-icon slot="start" name="home"/>
|
|
Home
|
|
</ion-breadcrumb>
|
|
<ion-breadcrumb href="tusha/modus">
|
|
<ion-icon slot="start" name="aperture"/>
|
|
Modus
|
|
</ion-breadcrumb>
|
|
<ion-breadcrumb>
|
|
<ion-icon slot="start" name="time"/>
|
|
Focus
|
|
</ion-breadcrumb>
|
|
</ion-breadcrumbs>
|
|
|
|
<!-- TODO add default action to div -->
|
|
<!-- TODO add are you sure pop-ups -->
|
|
|
|
<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>
|
|
STOP
|
|
</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">
|
|
<svg class="focustimer countdown-state-{{state}}-box" width="100%" height="100%" viewBox="0 0 200 200" (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>
|
|
|
|
<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="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="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)?.focusTime}}</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)?.breakTime}}</span></p>
|
|
</ion-label>
|
|
</ion-item>
|
|
</ion-list>
|
|
</ion-card>
|
|
<!--
|
|
ion-card
|
|
met daarin ion-lines met de vol
|
|
|
|
-->
|
|
</div>
|
|
|
|
|
|
</app-tusha-page>
|
|
|