From 38543bae7f3ed5a596adb53098b9277668479799 Mon Sep 17 00:00:00 2001 From: Leon Hoppe Date: Fri, 8 Nov 2024 21:27:05 +0100 Subject: [PATCH] changed graph appearance + QOL improvements --- package.json | 2 +- src/app/analysis/analysis.page.html | 7 +- src/app/analysis/analysis.page.scss | 2 +- src/app/analysis/analysis.page.ts | 89 +++++++------------- src/app/settings/settings.page.html | 123 +++++++++++++++------------- src/app/settings/settings.page.scss | 16 ++++ src/app/settings/settings.page.ts | 18 +++- 7 files changed, 131 insertions(+), 126 deletions(-) diff --git a/package.json b/package.json index 082d5e4..75cc928 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "WorkTime", - "version": "0.3.1", + "version": "0.3.2", "author": "Ionic Framework", "homepage": "https://ionicframework.com/", "scripts": { diff --git a/src/app/analysis/analysis.page.html b/src/app/analysis/analysis.page.html index 560e6cf..1250e52 100644 --- a/src/app/analysis/analysis.page.html +++ b/src/app/analysis/analysis.page.html @@ -27,7 +27,10 @@ Noch zu arbeiten - Tagessoll erreicht! + Noch {{formatTime(settings.maxWorkTime - combinedWorkTime)}} Stunden + Arbeitszeit erreicht! + Tagessoll erreicht! + Tageslimit erreicht! @@ -63,7 +66,7 @@ {{formatTime(Math.max(combinedWorkTime - settings.maxWorkTime, 0))}} von {{formatTime(settings.desiredOverTime)}} ({{formatTime(settings.maxOverTime)}} maximal) diff --git a/src/app/analysis/analysis.page.scss b/src/app/analysis/analysis.page.scss index 3043f96..2b1f728 100644 --- a/src/app/analysis/analysis.page.scss +++ b/src/app/analysis/analysis.page.scss @@ -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); } } diff --git a/src/app/analysis/analysis.page.ts b/src/app/analysis/analysis.page.ts index c83506f..1cf762d 100644 --- a/src/app/analysis/analysis.page.ts +++ b/src/app/analysis/analysis.page.ts @@ -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 } } } diff --git a/src/app/settings/settings.page.html b/src/app/settings/settings.page.html index 1f94e67..b9a7eb3 100644 --- a/src/app/settings/settings.page.html +++ b/src/app/settings/settings.page.html @@ -13,62 +13,69 @@ - - - -

Zeiten

 - - - Arbeitszeit - - Stunden - - - -

Pause

 - - - Nach 0 Stunden - - Minuten - - - Nach 6 Stunden - - Minuten - - - Nach 9 Stunden - - Minuten - - - Nicht tracken nach - - Uhr - - - -

Überstunden

 - - - Optimal - - Minuten - - - Maximal - - Minuten - - - - - Speichern - - - + + + + + + +

Zeiten

 + + + Arbeitszeit + + Stunden + + + + +

Pause

 + + + Nach 0 Stunden + + Minuten + + + Nach 6 Stunden + + Minuten + + + Nach 9 Stunden + + Minuten + + + Nicht tracken nach + + Uhr + + + + +

Überstunden

 + + + Optimal + + Minuten + + + Maximal + + Minuten + + + + + Speichern + + + + + diff --git a/src/app/settings/settings.page.scss b/src/app/settings/settings.page.scss index 845ec3f..d27b5c9 100644 --- a/src/app/settings/settings.page.scss +++ b/src/app/settings/settings.page.scss @@ -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; +} diff --git a/src/app/settings/settings.page.ts b/src/app/settings/settings.page.ts index 167fdb9..59513f6 100644 --- a/src/app/settings/settings.page.ts +++ b/src/app/settings/settings.page.ts @@ -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() {