leon.hoppe/WorkTime
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

changed graph appearance + QOL improvements

Browse Source
This commit is contained in:
Leon Hoppe
2024-11-08 21:27:05 +01:00
parent 6271cdd99d
commit 38543bae7f
7 changed files with 131 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "WorkTime",
"version": "0.3.1",
"version": "0.3.2",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {

7
src/app/analysis/analysis.page.html
View File

@@ -27,7 +27,10 @@
<ion-card>
<ion-card-header>
<ion-card-title>Noch zu arbeiten</ion-card-title>
<ion-card-subtitle *ngIf="combinedWorkTime > (settings.maxWorkTime + settings.desiredOverTime)">Tagessoll erreicht!</ion-card-subtitle>
<ion-card-subtitle *ngIf="combinedWorkTime < settings.maxWorkTime">Noch {{formatTime(settings.maxWorkTime - combinedWorkTime)}} Stunden</ion-card-subtitle>
<ion-card-subtitle *ngIf="combinedWorkTime >= settings.maxWorkTime && combinedWorkTime < (settings.maxWorkTime + settings.desiredOverTime)">Arbeitszeit erreicht!</ion-card-subtitle>
<ion-card-subtitle *ngIf="combinedWorkTime >= (settings.maxWorkTime + settings.desiredOverTime) && combinedWorkTime <= (settings.maxWorkTime + settings.maxOverTime)">Tagessoll erreicht!</ion-card-subtitle>
<ion-card-subtitle *ngIf="combinedWorkTime > settings.maxWorkTime + settings.maxOverTime">Tageslimit erreicht!</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
@@ -63,7 +66,7 @@
{{formatTime(Math.max(combinedWorkTime - settings.maxWorkTime, 0))}} von {{formatTime(settings.desiredOverTime)}} ({{formatTime(settings.maxOverTime)}} maximal)
<ion-progress-bar
*ngIf="combinedWorkTime - settings.maxWorkTime <= settings.maxOverTime"
class="work-progress" id="overtime"
class="work-progress" id="overtime" [ngClass]="{'progress-warn': combinedWorkTime > settings.maxWorkTime + settings.desiredOverTime}"
[value]="(combinedWorkTime - settings.maxWorkTime) / settings.maxOverTime"
[buffer]="settings.desiredOverTime / settings.maxOverTime"
/>

2
src/app/analysis/analysis.page.scss
View File

@@ -5,7 +5,7 @@
background-image: radial-gradient(ellipse at center, var(--background) 0%, var(--background) 30%, var(--background) 30%);
}
&::part(track) {
&::part(track), &.progress-warn::part(progress) {
background-color: var(--ion-color-warning);
}
}

89
src/app/analysis/analysis.page.ts
View File

@@ -21,7 +21,7 @@ import {TimeService} from "../../services/time.service";
import {Chart} from "chart.js/auto";
import {addIcons} from "ionicons";
import {briefcase, card, pizza} from "ionicons/icons";
import {NgIf} from "@angular/common";
import {NgClass, NgIf} from "@angular/common";
import {SettingsService} from "../../services/settings.service";
import {Settings} from "../../models/settings";
import {AppComponent} from "../app.component";
@@ -31,7 +31,7 @@ import {AppComponent} from "../app.component";
templateUrl: 'analysis.page.html',
styleUrls: ['analysis.page.scss'],
standalone: true,
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonLabel, IonDatetimeButton, IonModal, IonDatetime, FormsModule, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonCardSubtitle, IonList, IonIcon, IonProgressBar, NgIf]
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonLabel, IonDatetimeButton, IonModal, IonDatetime, FormsModule, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonCardSubtitle, IonList, IonIcon, IonProgressBar, NgIf, NgClass]
})
export class AnalysisPage {
public currentDate: any;
@@ -51,7 +51,7 @@ export class AnalysisPage {
constructor(private time: TimeService, private settingsProvider: SettingsService) {
this.settings = this.settingsProvider.loadSettings();
addIcons({briefcase, pizza, card})
addIcons({briefcase, pizza, card});
}
ionViewDidEnter() {
@@ -72,11 +72,6 @@ export class AnalysisPage {
this.driveTime = 0;
this.combinedWorkTime = 0;
if (this.timeData.length == 0) {
this.showEmptyChart();
return;
}
if (this.timeData.length >= 1 && this.time.isToday(this.currentDate)) {
const lastEntry = this.timeData[this.timeData.length - 1];
const diff = this.time.calculateTimespanInMinutes(lastEntry, {
@@ -98,7 +93,7 @@ export class AnalysisPage {
}
}
if (this.timeData.length > 2) {
if (this.timeData.length >= 2) {
for (let i = 1; i < this.timeData.length; i++) {
const start = this.timeData[i - 1];
const end = this.timeData[i];
@@ -135,22 +130,34 @@ export class AnalysisPage {
const style = getComputedStyle(document.body);
const textColor = style.getPropertyValue('--ion-text-color');
const workColor = style.getPropertyValue('--ion-color-primary');
const driveColor = style.getPropertyValue('--ion-color-secondary');
const remainColor = style.getPropertyValue('--ion-card-background');
const overColor = style.getPropertyValue('--ion-color-tertiary');
const overColorWarn = style.getPropertyValue('--ion-color-warning');
const overColorDanger = style.getPropertyValue('--ion-color-danger');
let overData: number[] = [];
let overLabels: string[] = [];
let overColors: string[] = [];
let chartData: number[] = [];
let chartLabels: string[] = [];
let chartColors: string[] = [];
if (this.combinedWorkTime > this.settings.maxWorkTime) {
if (this.combinedWorkTime > (this.settings.maxWorkTime + this.settings.maxOverTime)) {
chartData.push(1);
chartColors.push(overColorDanger);
}
else if (this.combinedWorkTime > this.settings.maxWorkTime) {
const overTime = this.combinedWorkTime - this.settings.maxWorkTime;
const overPercentage = overTime / this.settings.desiredOverTime;
const overPercentage = (overTime / this.settings.desiredOverTime) * 0.5;
overData.push(this.combinedWorkTime * overPercentage);
overLabels.push('Überstunden');
overColors.push(overPercentage > 1 ? overColorWarn : overColor);
chartData.push(overPercentage, 1 - overPercentage);
chartLabels.push('Überstunden', 'Arbeitszeit');
chartColors.push(overPercentage > 0.5 ? overColorWarn : overColor, workColor);
}
else if (this.combinedWorkTime == 0) {
chartData.push(1);
chartColors.push(remainColor);
}
else {
chartData.push(this.workTime, Math.max(this.settings.maxWorkTime - this.combinedWorkTime, 0));
chartColors.push(workColor, remainColor);
}
this.chart?.destroy();
@@ -158,55 +165,17 @@ export class AnalysisPage {
this.chart = new Chart(this.chartRef.nativeElement, {
type: 'doughnut',
data: {
labels: [
...overLabels,
'Arbeitszeit',
'Dienstreise'
],
labels: chartLabels,
datasets: [{
label: 'Zeit',
data: [...overData, this.workTime, this.driveTime, Math.max(this.settings.maxWorkTime - this.combinedWorkTime, 0)],
backgroundColor: [
...overColors,
workColor,
driveColor,
remainColor
],
data: chartData,
backgroundColor: chartColors
}]
},
options: {
events: [],
plugins: {
legend: {
display: this.driveTime > 0 || this.combinedWorkTime > this.settings.maxWorkTime
}
}
}
});
}
public showEmptyChart() {
const style = getComputedStyle(document.body);
const remainColor = style.getPropertyValue('--ion-card-background');
this.chart?.destroy();
this.chart = new Chart(this.chartRef.nativeElement, {
type: 'doughnut',
data: {
labels: [],
datasets: [{
label: 'Zeit',
data: [100],
backgroundColor: [
remainColor
],
}]
},
options: {
events: [],
plugins: {
legend: {
display: this.driveTime > 0 || this.combinedWorkTime > this.settings.maxWorkTime
display: false
}
}
}

123
src/app/settings/settings.page.html
View File

@@ -13,62 +13,69 @@
</ion-toolbar>
</ion-header>
<ion-list>
<!--<ion-item>
<ion-toggle [(ngModel)]="input.notifications">Benachrichtigungen</ion-toggle>
</ion-item>
<ion-item-divider/>-->
<ion-item>
<ion-label><h1>Zeiten</h1></ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Arbeitszeit</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.maxWorkTime / 60" [(ngModel)]="input.maxWorkTime" />
<ion-label slot="end">Stunden</ion-label>
</ion-item>
<ion-item-divider/>
<ion-item>
<ion-label><h1>Pause</h1></ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Nach 0 Stunden</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.defaultPauseTime" [(ngModel)]="input.defaultPauseTime" />
<ion-label slot="end">Minuten</ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Nach 6 Stunden</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.pauseAfter6" [(ngModel)]="input.pauseAfter6" />
<ion-label slot="end">Minuten</ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Nach 9 Stunden</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.pauseAfter9" [(ngModel)]="input.pauseAfter9" />
<ion-label slot="end">Minuten</ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Nicht tracken nach</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.dontTrackPauseAfter" [(ngModel)]="input.dontTrackPauseAfter" />
<ion-label slot="end">Uhr</ion-label>
</ion-item>
<ion-item-divider/>
<ion-item>
<ion-label><h1>Überstunden</h1></ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Optimal</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.desiredOverTime" [(ngModel)]="input.desiredOverTime" />
<ion-label slot="end">Minuten</ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Maximal</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.maxOverTime" [(ngModel)]="input.maxOverTime" />
<ion-label slot="end">Minuten</ion-label>
</ion-item>
<ion-item-divider/>
<ion-item>
<ion-col size="12" class="ion-text-center">
<ion-button size="normal" (click)="save()">Speichern</ion-button>
</ion-col>
</ion-item>
</ion-list>
<ion-card>
<ion-card-content>
<ion-list>
<!--<ion-item>
<ion-toggle [(ngModel)]="input.notifications">Benachrichtigungen</ion-toggle>
</ion-item>
<ion-item-divider/>-->
<ion-item>
<ion-icon aria-hidden="true" name="briefcase"></ion-icon>
<ion-label><h1>Zeiten</h1></ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Arbeitszeit</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.maxWorkTime / 60" [(ngModel)]="input.maxWorkTime" />
<ion-label slot="end">Stunden</ion-label>
</ion-item>
<ion-item-divider/>
<ion-item>
<ion-icon aria-hidden="true" name="pizza"></ion-icon>
<ion-label><h1>Pause</h1></ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Nach 0 Stunden</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.defaultPauseTime" [(ngModel)]="input.defaultPauseTime" />
<ion-label slot="end">Minuten</ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Nach 6 Stunden</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.pauseAfter6" [(ngModel)]="input.pauseAfter6" />
<ion-label slot="end">Minuten</ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Nach 9 Stunden</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.pauseAfter9" [(ngModel)]="input.pauseAfter9" />
<ion-label slot="end">Minuten</ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Nicht tracken nach</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.dontTrackPauseAfter" [(ngModel)]="input.dontTrackPauseAfter" />
<ion-label slot="end">Uhr</ion-label>
</ion-item>
<ion-item-divider/>
<ion-item>
<ion-icon aria-hidden="true" name="card"></ion-icon>
<ion-label><h1>Überstunden</h1></ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Optimal</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.desiredOverTime" [(ngModel)]="input.desiredOverTime" />
<ion-label slot="end">Minuten</ion-label>
</ion-item>
<ion-item>
<ion-label slot="start">Maximal</ion-label>
<ion-input type="number" fill="solid" [placeholder]="settings.maxOverTime" [(ngModel)]="input.maxOverTime" />
<ion-label slot="end">Minuten</ion-label>
</ion-item>
<ion-item-divider/>
<ion-item>
<ion-col size="12" class="ion-text-center">
<ion-button size="normal" (click)="save()">Speichern</ion-button>
</ion-col>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>

16
src/app/settings/settings.page.scss
View File

@@ -1,3 +1,9 @@
ion-card-content {
ion-item, ion-item-divider {
--background: unset;
}
}
ion-item-divider {
--background: transparent;
border-bottom: none;
@@ -10,3 +16,13 @@ ion-item {
ion-label {
min-width: 60px;
}
ion-icon {
height: 100%;
font-size: 1.7rem;
transform: translateY(-0.15rem);
margin-right: 1rem;
display: flex;
justify-content: center;
align-items: center;
}

18
src/app/settings/settings.page.ts
View File

@@ -7,20 +7,30 @@ import {
IonList,
IonItem,
IonInput,
IonToggle, IonButton, IonLabel, IonItemDivider, IonCol, ToastController
IonToggle,
IonButton,
IonLabel,
IonItemDivider,
IonCol,
ToastController,
IonIcon,
IonCard,
IonCardHeader,
IonCardTitle,
IonCardContent
} from '@ionic/angular/standalone';
import {Settings} from "../../models/settings";
import {SettingsService} from "../../services/settings.service";
import {FormsModule} from "@angular/forms";
import {addIcons} from "ionicons";
import { save } from 'ionicons/icons';
import {briefcase, card, pizza, save} from 'ionicons/icons';
@Component({
selector: 'app-tab3',
templateUrl: 'settings.page.html',
styleUrls: ['settings.page.scss'],
standalone: true,
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonInput, FormsModule, IonToggle, IonButton, IonLabel, IonItemDivider, IonCol],
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonInput, FormsModule, IonToggle, IonButton, IonLabel, IonItemDivider, IonCol, IonIcon, IonCard, IonCardHeader, IonCardTitle, IonCardContent],
})
export class SettingsPage {
public settings: Settings;
@@ -30,7 +40,7 @@ export class SettingsPage {
this.settings = settingsProvider.loadSettings();
this.input.notifications = this.settings.notifications;
addIcons({save});
addIcons({save, briefcase, pizza, card});
}
public async save() {