created settings page

package.json

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

src/app/analysis/analysis.page.html

@@ -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>
+            {{formatTime(workTime)}} von {{formatTime(settings.maxWorkTime)}} <span *ngIf="driveTime > 0">(+{{formatTime(driveTime)}} Reisezeit)</span>
-            <ion-progress-bar class="work-progress" [value]="workTime / maxWorkTime" [buffer]="(workTime + driveTime) / maxWorkTime" />
+            <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)
+            {{formatTime(Math.max(combinedWorkTime - settings.maxWorkTime, 0))}} von {{formatTime(settings.desiredOverTime)}} ({{formatTime(settings.maxOverTime)}} maximal)
-            <ion-progress-bar *ngIf="combinedWorkTime - maxWorkTime <= maxOverTime" class="work-progress" id="overtime" [value]="(combinedWorkTime - maxWorkTime) / maxOverTime" [buffer]="desOverTime / maxOverTime" />
+            <ion-progress-bar
-            <ion-progress-bar *ngIf="combinedWorkTime - maxWorkTime > maxOverTime" value="1" color="danger" />
+              *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>

src/app/analysis/analysis.page.ts

@@ -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 settings: Settings;
-  public maxPauseTime: number = 30;
-  public maxOverTime: number = 60;
-  public desOverTime: number = 30;
 
   // @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) {
+    if (this.combinedWorkTime > this.settings.maxWorkTime) {
-      const overTime = this.combinedWorkTime - this.maxWorkTime;
+      const overTime = this.combinedWorkTime - this.settings.maxWorkTime;
-      const overPercentage = overTime / this.desOverTime;
+      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
           }
         }
       }

src/app/explore-container/explore-container.component.html

@@ -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>

src/app/explore-container/explore-container.component.scss

@@ -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;
-}

src/app/explore-container/explore-container.component.spec.ts

@@ -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();
-  });
-});

src/app/explore-container/explore-container.component.ts

@@ -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;
-}

src/app/settings/settings.page.html

@@ -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>

src/app/settings/settings.page.scss

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

src/app/settings/settings.page.ts

@@ -1,14 +1,61 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import {
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+  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();
+  }
 }

src/app/tabs/tabs.page.html

@@ -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>

src/app/time/time.page.ts

@@ -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[] = [];

src/global.scss

@@ -39,3 +39,9 @@
 .ios .icon-button {
   width: 50px;
 }
+
+.toast {
+  --background: var(--ion-item-background);
+  --color: var(--ion-text-color);
+  --ion-safe-area-bottom: 60px;
+}

src/models/settings.ts

@@ -0,0 +1,9 @@
+export interface Settings {
+  notifications?: boolean;
+  maxWorkTime?: number;
+  defaultPauseTime?: number;
+  pauseAfter6?: number;
+  pauseAfter9?: number;
+  maxOverTime?: number;
+  desiredOverTime?: number;
+}

src/services/settings.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import {Settings} from "../models/settings";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SettingsService {
+
+  constructor() { }
+
+  public loadSettings(): Settings {
+    const raw = localStorage.getItem("settings");
+
+    if (raw == undefined) return this.defaultSettings();
+
+    return JSON.parse(raw) as Settings;
+  }
+
+  public saveSettings(settings: Settings): void {
+    localStorage.setItem("settings", JSON.stringify(settings));
+  }
+
+  public defaultSettings(): Settings {
+    return {
+      notifications: false,
+      maxWorkTime: 420, // 7h
+      defaultPauseTime: 0,
+      pauseAfter6: 30,
+      pauseAfter9: 45,
+      maxOverTime: 60,
+      desiredOverTime: 30
+    };
+  }
+}

tsconfig.json

@@ -5,7 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "strict": false,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,