Fixed time calculation bug + fixed theme color for pwa

This commit is contained in:
2024-09-05 15:17:45 +02:00
parent ca9f0cf5aa
commit 5de004d657
3 changed files with 27 additions and 12 deletions

View File

@@ -25,10 +25,10 @@
</ion-item> </ion-item>
<section class="time-entries"> <section class="time-entries">
<ion-item class="entry" *ngFor="let entry of getEntriesOfToday(); let index = index" (click)="removeEntry(index)" [ngClass]="{'animate': shouldAnimate[index]}"> <ion-item class="entry" *ngFor="let entry of getEntriesOfToday(); let index = index" (click)="removeEntry(entry, index)" [ngClass]="{'animate': shouldAnimate[index]}">
<div class="circle"></div> <div class="circle"></div>
<ion-label class="type">{{getTypeText(entry.type)}}</ion-label> <ion-label class="type">{{getTypeText(entry.type)}}</ion-label>
<span class="time">{{entry.registeredAt.toLocaleTimeString()}}</span> <span class="time">{{formatEntry(entry.registeredAt.getHours(), entry.registeredAt.getMinutes())}}</span>
<span *ngIf="index !== 0" class="between"> <span *ngIf="index !== 0" class="between">
<span class="between-content">{{generateSeparatorText(data[index - 1], entry)}}</span> <span class="between-content">{{generateSeparatorText(data[index - 1], entry)}}</span>
</span> </span>

View File

@@ -73,15 +73,29 @@ export class TimePage {
} }
public generateSeparatorText(entry1: TimeEntry, entry2: TimeEntry): string { public generateSeparatorText(entry1: TimeEntry, entry2: TimeEntry): string {
const difference = +entry2.registeredAt.getTime() - +entry1.registeredAt.getTime() - 3600000;
const date = new Date(difference);
let text = entry1.type === 'login' ? "Arbeit " : "Pause "; let text = entry1.type === 'login' ? "Arbeit " : "Pause ";
if (entry1.type === 'start-drive' && entry2.type === 'end-drive') { if (entry1.type === 'start-drive' && entry2.type === 'end-drive') {
text = "Dienstreise"; text = "Dienstreise";
} }
return text + `(${date.toLocaleTimeString()})`; return text + `(${this.calculateTimespan(entry1.registeredAt, entry2.registeredAt)})`;
}
private calculateTimespan(start: Date, end: Date): string {
const startSeconds: number = (start.getHours() * 3600) + (start.getMinutes() * 60) + start.getSeconds();
const endSeconds: number = (end.getHours() * 3600) + (end.getMinutes() * 60) + end.getSeconds();
const difference = endSeconds - startSeconds;
const diffHours = Math.floor(difference / 3600.00);
const diffMinutes = Math.floor((difference % 3600) / 60.00);
return this.formatEntry(diffHours, diffMinutes);
}
public formatEntry(hours: number, minutes: number): string {
let result = hours < 10 ? "0" + hours + ":" : hours.toString() + ":";
result += minutes < 10 ? "0" + minutes : minutes.toString();
return result;
} }
public addEntry(): void { public addEntry(): void {
@@ -97,18 +111,19 @@ export class TimePage {
this.updateCurrentAction(); this.updateCurrentAction();
} }
public removeEntry(index: number): void { public removeEntry(entry: TimeEntry, index: number): void {
this.shouldAnimate.splice(index, 1); this.shouldAnimate.splice(index, 1);
this.data.splice(index, 1); this.data.splice(this.data.indexOf(entry), 1);
this.saveData(); this.saveData();
this.updateCurrentAction(); this.updateCurrentAction();
} }
private updateCurrentAction(): void { private updateCurrentAction(): void {
if (this.data.length == 0) { const today = this.getEntriesOfToday();
if (today.length == 0) {
this.currentAction = 'login'; this.currentAction = 'login';
}else { }else {
this.currentAction = this.data[this.data.length - 1].type === 'login' ? 'logout' : 'login'; this.currentAction = today[today.length - 1].type === 'login' ? 'logout' : 'login';
} }
} }
@@ -121,7 +136,7 @@ export class TimePage {
} }
public addModalEntry(): void { public addModalEntry(): void {
const date = new Date(this.modalDate); const date = new Date(this.modalDate || Date.now());
date.setSeconds(0); date.setSeconds(0);
this.data.push({ this.data.push({

View File

@@ -18,7 +18,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-status-bar-style" content="black"/> <meta name="mobile-web-app-status-bar-style" content="black"/>
<link rel="manifest" href="manifest.webmanifest"> <link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#1976d2"> <meta name="theme-color" content="#1f1f1f">
</head> </head>
<body> <body>