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

created settings page

Browse Source
This commit is contained in:
Leon Hoppe
2024-11-08 15:20:01 +01:00
parent c364c6faf9
commit d957ce6a1d
16 changed files with 195 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,7 +27,7 @@
<ion-card>
<ion-card-header>
<ion-card-title>Noch zu arbeiten</ion-card-title>
<ion-card-subtitle *ngIf="combinedWorkTime > (maxWorkTime + desOverTime)">Tagessoll erreicht!</ion-card-subtitle>
<ion-card-subtitle *ngIf="combinedWorkTime > (settings.maxWorkTime + settings.desiredOverTime)">Tagessoll erreicht!</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
@@ -45,8 +45,8 @@
<ion-item>
<ion-icon aria-hidden="true" name="briefcase" slot="start"></ion-icon>
<ion-label>
{{formatTime(workTime)}} von {{formatTime(maxWorkTime)}} <span *ngIf="driveTime > 0">(+{{formatTime(driveTime)}} Reisezeit)</span>
<ion-progress-bar class="work-progress" [value]="workTime / maxWorkTime" [buffer]="(workTime + driveTime) / maxWorkTime" />
{{formatTime(workTime)}} von {{formatTime(settings.maxWorkTime)}} <span *ngIf="driveTime > 0">(+{{formatTime(driveTime)}} Reisezeit)</span>
<ion-progress-bar class="work-progress" [value]="workTime / settings.maxWorkTime" [buffer]="(workTime + driveTime) / settings.maxWorkTime" />
</ion-label>
</ion-item>
<ion-item>
@@ -60,9 +60,14 @@
<ion-item>
<ion-icon aria-hidden="true" name="card" slot="start"></ion-icon>
<ion-label>
{{formatTime(Math.max(combinedWorkTime - maxWorkTime, 0))}} von {{formatTime(desOverTime)}} ({{formatTime(maxOverTime)}} maximal)
<ion-progress-bar *ngIf="combinedWorkTime - maxWorkTime <= maxOverTime" class="work-progress" id="overtime" [value]="(combinedWorkTime - maxWorkTime) / maxOverTime" [buffer]="desOverTime / maxOverTime" />
<ion-progress-bar *ngIf="combinedWorkTime - maxWorkTime > maxOverTime" value="1" color="danger" />
{{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"
[value]="(combinedWorkTime - settings.maxWorkTime) / settings.maxOverTime"
[buffer]="settings.desiredOverTime / settings.maxOverTime"
/>
<ion-progress-bar *ngIf="combinedWorkTime - settings.maxWorkTime > settings.maxOverTime" value="1" color="danger" />
</ion-label>
</ion-item>
</ion-list>

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

@@ -15,7 +15,6 @@ import {
IonCardContent,
IonCardSubtitle, IonList, IonIcon, IonProgressBar
} from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import {FormsModule} from "@angular/forms";
import {TimeEntry} from "../../models/timeEntry";
import {TimeService} from "../../services/time.service";
@@ -23,13 +22,15 @@ import {Chart} from "chart.js/auto";
import {addIcons} from "ionicons";
import {briefcase, card, pizza} from "ionicons/icons";
import {NgIf} from "@angular/common";
import {SettingsService} from "../../services/settings.service";
import {Settings} from "../../models/settings";
@Component({
selector: 'app-tab2',
templateUrl: 'analysis.page.html',
styleUrls: ['analysis.page.scss'],
standalone: true,
imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, 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]
})
export class AnalysisPage {
public currentDate: any;
@@ -39,17 +40,16 @@ export class AnalysisPage {
public pauseTime: number = 0;
public driveTime: number = 0;
public combinedWorkTime: number = 0;
public maxPauseTime: number = 0;
public maxWorkTime: number = 420;
public maxPauseTime: number = 30;
public maxOverTime: number = 60;
public desOverTime: number = 30;
public settings: Settings;
// @ts-ignore
@ViewChild('chart') chartRef: ElementRef;
private chart: any;
constructor(private time: TimeService) {
constructor(private time: TimeService, private settingsProvider: SettingsService) {
this.settings = this.settingsProvider.loadSettings();
addIcons({briefcase, pizza, card})
}
@@ -58,6 +58,7 @@ export class AnalysisPage {
}
public updateCurrentData() {
this.settings = this.settingsProvider.loadSettings();
this.timeData = this.time.getEntries(this.currentDate);
this.workTime = 0;
this.pauseTime = 0;
@@ -87,13 +88,13 @@ export class AnalysisPage {
this.combinedWorkTime = this.workTime + this.driveTime;
if (this.combinedWorkTime < 360) {
this.maxPauseTime = 0;
this.maxPauseTime = this.settings.defaultPauseTime;
}
if (this.combinedWorkTime >= 360) { // 6h
this.maxPauseTime = 30;
this.maxPauseTime = this.settings.pauseAfter6;
}
if (this.combinedWorkTime >= 540) { // 9h
this.maxPauseTime = 45;
this.maxPauseTime = this.settings.pauseAfter9;
}
this.updateChart();
@@ -112,9 +113,9 @@ export class AnalysisPage {
let overLabels: string[] = [];
let overColors: string[] = [];
if (this.combinedWorkTime > this.maxWorkTime) {
const overTime = this.combinedWorkTime - this.maxWorkTime;
const overPercentage = overTime / this.desOverTime;
if (this.combinedWorkTime > this.settings.maxWorkTime) {
const overTime = this.combinedWorkTime - this.settings.maxWorkTime;
const overPercentage = overTime / this.settings.desiredOverTime;
overData.push(this.combinedWorkTime * overPercentage);
overLabels.push('Überstunden');
@@ -133,7 +134,7 @@ export class AnalysisPage {
],
datasets: [{
label: 'Zeit',
data: [...overData, this.workTime, this.driveTime, Math.max(this.maxWorkTime - this.combinedWorkTime, 0)],
data: [...overData, this.workTime, this.driveTime, Math.max(this.settings.maxWorkTime - this.combinedWorkTime, 0)],
backgroundColor: [
...overColors,
workColor,
@@ -146,7 +147,7 @@ export class AnalysisPage {
events: [],
plugins: {
legend: {
display: this.driveTime > 0 || this.combinedWorkTime > this.maxWorkTime
display: this.driveTime > 0 || this.combinedWorkTime > this.settings.maxWorkTime
}
}
}
@@ -174,7 +175,7 @@ export class AnalysisPage {
events: [],
plugins: {
legend: {
display: this.driveTime > 0 || this.combinedWorkTime > this.maxWorkTime
display: this.driveTime > 0 || this.combinedWorkTime > this.settings.maxWorkTime
}
}
}

12
src/app/explore-container/explore-container.component.html
View File

@@ -1,12 +0,0 @@
<div id="container">
<strong>{{ name }}</strong>
<p>
Explore
<a
target="_blank"
rel="noopener noreferrer"
href="https://ionicframework.com/docs/components"
>UI Components</a
>
</p>
</div>

27
src/app/explore-container/explore-container.component.scss
View File

@@ -1,27 +0,0 @@
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
#container a {
text-decoration: none;
}

18
src/app/explore-container/explore-container.component.spec.ts
View File

@@ -1,18 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ExploreContainerComponent } from './explore-container.component';
describe('ExploreContainerComponent', () => {
let component: ExploreContainerComponent;
let fixture: ComponentFixture<ExploreContainerComponent>;
beforeEach(async () => {
fixture = TestBed.createComponent(ExploreContainerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

11
src/app/explore-container/explore-container.component.ts
View File

@@ -1,11 +0,0 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-explore-container',
templateUrl: './explore-container.component.html',
styleUrls: ['./explore-container.component.scss'],
standalone: true,
})
export class ExploreContainerComponent {
@Input() name?: string;
}

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

@@ -1,7 +1,7 @@
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Tab 3
Einstellungen
</ion-title>
</ion-toolbar>
</ion-header>
@@ -9,9 +9,61 @@
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 3</ion-title>
<ion-title size="large">Einstellungen</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Tab 3 page"></app-explore-container>
<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-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-content>

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

@@ -0,0 +1,8 @@
ion-item-divider {
--background: transparent;
border-bottom: none;
}
ion-item {
--border-style: none;
}

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

@@ -1,14 +1,61 @@
import { Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import {
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonList,
IonItem,
IonInput,
IonToggle, IonButton, IonLabel, IonItemDivider, IonCol, ToastController
} 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';
@Component({
selector: 'app-tab3',
templateUrl: 'settings.page.html',
styleUrls: ['settings.page.scss'],
standalone: true,
imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonInput, FormsModule, IonToggle, IonButton, IonLabel, IonItemDivider, IonCol],
})
export class SettingsPage {
constructor() {}
public settings: Settings;
public input: Settings = {};
constructor(private settingsProvider: SettingsService, private toasts: ToastController) {
this.settings = settingsProvider.loadSettings();
this.input.notifications = this.settings.notifications;
addIcons({save});
}
public async save() {
if (this.input.maxWorkTime != undefined)
this.input.maxWorkTime = this.input.maxWorkTime * 60;
this.input.maxWorkTime ??= this.settings.maxWorkTime;
this.input.defaultPauseTime ??= this.settings.defaultPauseTime;
this.input.pauseAfter6 ??= this.settings.pauseAfter6;
this.input.pauseAfter9 ??= this.settings.pauseAfter9;
this.input.maxOverTime ??= this.settings.maxOverTime;
this.input.desiredOverTime ??= this.settings.desiredOverTime;
this.settingsProvider.saveSettings(this.input);
this.settings = this.settingsProvider.loadSettings();
this.input = {};
this.input.notifications = this.settings.notifications;
const toast = await this.toasts.create({
message: "Einstellungen gespeichert!",
icon: "save",
duration: 2000,
cssClass: 'toast'
});
await toast.present();
}
}

2
src/app/tabs/tabs.page.html
View File

@@ -10,7 +10,7 @@
<ion-label>Analyse</ion-label>
</ion-tab-button>
<ion-tab-button tab="settings" href="/settings" disabled>
<ion-tab-button tab="settings" href="/settings">
<ion-icon aria-hidden="true" name="settings"></ion-icon>
<ion-label>Einstellungen</ion-label>
</ion-tab-button>

3
src/app/time/time.page.ts
View File

@@ -9,7 +9,6 @@ import {
IonItem,
IonLabel, IonIcon, IonModal, IonButtons, IonInput, IonDatetime, IonDatetimeButton, IonSelect, IonSelectOption
} from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import {TimeEntry, TimeType} from "../../models/timeEntry";
import {NgClass, NgForOf, NgIf} from "@angular/common";
import {addIcons} from "ionicons";
@@ -22,7 +21,7 @@ import {TimeService} from "../../services/time.service";
templateUrl: 'time.page.html',
styleUrls: ['time.page.scss'],
standalone: true,
imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, NgForOf, IonButton, IonList, IonItem, IonLabel, NgIf, NgClass, IonIcon, IonModal, IonButtons, IonInput, IonDatetime, IonDatetimeButton, IonSelect, IonSelectOption, FormsModule],
imports: [IonHeader, IonToolbar, IonTitle, IonContent, NgForOf, IonButton, IonList, IonItem, IonLabel, NgIf, NgClass, IonIcon, IonModal, IonButtons, IonInput, IonDatetime, IonDatetimeButton, IonSelect, IonSelectOption, FormsModule],
})
export class TimePage {
public data: TimeEntry[] = [];