From d6f08204c04d8d904aee25383d9fea2f2dd1aff0 Mon Sep 17 00:00:00 2001
From: vondrp <vondrovic@centrum.cz>
Date: Sat, 30 Mar 2024 22:23:53 +0100
Subject: [PATCH 1/2] =?UTF-8?q?Re=20#11120=20-=20p=C5=99id=C3=A1na=20kompo?=
=?UTF-8?q?nenta=20delta=20=C4=8Dasu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
lze nastavit ikonu u delty (+ nebo napĹ™Ăklad fa fa-plus)
lze si zvolit formát času - combine: 10 min 20 s | h: 0.2 | min: 10.33 | s: 620 s
lze též zobrazit počátečnà čas
+ u počáteÄŤnĂho ÄŤasu lze tĂ©Ĺľ pĹ™idat ikonu pĹ™. z fontawesome ikona fa fa-clock
je-li delta negativnĂ zobrazĂ se N/A
- v kĂłdu jsou zakomentovány pĹ™Ăklady pouĹľitĂ
---
src/app/app.component.html | 1 -
src/app/app.component.ts | 5 +
src/app/app.module.ts | 2 +
.../time-delta/time-delta.component.css | 13 ++
.../time-delta/time-delta.component.html | 23 +++
.../time-delta/time-delta.component.spec.ts | 23 +++
.../time-delta/time-delta.component.ts | 131 ++++++++++++++++++
7 files changed, 197 insertions(+), 1 deletion(-)
create mode 100644 src/app/view/components/time-delta/time-delta.component.css
create mode 100644 src/app/view/components/time-delta/time-delta.component.html
create mode 100644 src/app/view/components/time-delta/time-delta.component.spec.ts
create mode 100644 src/app/view/components/time-delta/time-delta.component.ts
diff --git a/src/app/app.component.html b/src/app/app.component.html
index e984222..1f5b28f 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -7,5 +7,4 @@
[recording]="recording"
>
</overview>
-
</div>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index bf3c213..b9085b4 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -52,4 +52,9 @@ export class AppComponent implements OnInit {
this.actions.splice(index, 1);
saveActions(this.actions);
}
+
+ // Function to parse string to boolean - can be used to pass parameters of components
+ parseBoolean(value: string): boolean {
+ return value.toLowerCase() === 'true';
+ }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2ee858f..da5475f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,12 +4,14 @@ import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { OverviewComponent } from './view/pages/overview/overview.component';
import { CustomButtonComponent } from './view/components/custom-button/custom-button.component';
+import { TimeDeltaComponent } from './view/components/time-delta/time-delta.component';
@NgModule({
declarations: [
AppComponent,
OverviewComponent,
CustomButtonComponent,
+ TimeDeltaComponent,
],
imports: [
BrowserModule
diff --git a/src/app/view/components/time-delta/time-delta.component.css b/src/app/view/components/time-delta/time-delta.component.css
new file mode 100644
index 0000000..8e3e034
--- /dev/null
+++ b/src/app/view/components/time-delta/time-delta.component.css
@@ -0,0 +1,13 @@
+.time-container {
+ white-space: nowrap; /* Prevent line breaks */
+}
+
+.start-time {
+ display: inline-block;
+ padding: 0px 4px;
+}
+
+.delta-time {
+ display: inline-block;
+ padding: 0px 4px;
+}
\ No newline at end of file
diff --git a/src/app/view/components/time-delta/time-delta.component.html b/src/app/view/components/time-delta/time-delta.component.html
new file mode 100644
index 0000000..da3fd12
--- /dev/null
+++ b/src/app/view/components/time-delta/time-delta.component.html
@@ -0,0 +1,23 @@
+<div class="time-container">
+
+ <span *ngIf="showStartTime && hasStartTime()" class="start-time">
+ <ng-container *ngIf="startIconPosition === 'left' && startIconType === 'custom'">{{ startIcon}}</ng-container>
+ <ng-container *ngIf="startIconPosition === 'left' && startIconType === 'image'"><img src="{{ startIcon }}"/></ng-container>
+ <ng-container *ngIf="startIconPosition === 'left' && startIconType === 'fontawesome'"><i class="{{ startIcon }}"></i></ng-container>
+ {{ getStartTime() }}
+ <ng-container *ngIf="startIconPosition === 'right' && startIconType === 'custom'">{{ startIcon }}</ng-container>
+ <ng-container *ngIf="startIconPosition === 'right' && startIconType === 'image'"><img src="{{ startIcon }}"/></ng-container>
+ <ng-container *ngIf="startIconPosition === 'right' && startIconType === 'fontawesome'"><i class="{{ startIcon }}"></i></ng-container>
+ </span>
+
+ <span *ngIf="showDeltaTime" class="delta-time" >
+ <ng-container *ngIf="deltaIconPosition === 'left' && deltaIconType === 'custom'">{{ deltaIcon }}</ng-container>
+ <ng-container *ngIf="deltaIconPosition === 'left' && deltaIconType === 'image'"><img src="{{ deltaIcon }}"/></ng-container>
+ <ng-container *ngIf="deltaIconPosition === 'left' && deltaIconType === 'fontawesome'"><i class="{{ deltaIcon }}"></i></ng-container>
+ {{ getDelta() }}
+ <ng-container *ngIf="deltaIconPosition === 'right' && deltaIconType === 'custom'">{{ deltaIcon }}</ng-container>
+ <ng-container *ngIf="deltaIconPosition === 'right' && deltaIconType === 'image'"><img src="{{ deltaIcon }}"/></ng-container>
+ <ng-container *ngIf="deltaIconPosition === 'right' && deltaIconType === 'fontawesome'"><i class="{{ deltaIcon }}"></i></ng-container>
+ </span>
+
+</div>
diff --git a/src/app/view/components/time-delta/time-delta.component.spec.ts b/src/app/view/components/time-delta/time-delta.component.spec.ts
new file mode 100644
index 0000000..bb02149
--- /dev/null
+++ b/src/app/view/components/time-delta/time-delta.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimeDeltaComponent } from './time-delta.component';
+
+describe('TimeDeltaComponent', () => {
+ let component: TimeDeltaComponent;
+ let fixture: ComponentFixture<TimeDeltaComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [TimeDeltaComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(TimeDeltaComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/view/components/time-delta/time-delta.component.ts b/src/app/view/components/time-delta/time-delta.component.ts
new file mode 100644
index 0000000..e506bfb
--- /dev/null
+++ b/src/app/view/components/time-delta/time-delta.component.ts
@@ -0,0 +1,131 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'time-delta',
+ templateUrl: './time-delta.component.html',
+ styleUrls: ['./time-delta.component.css']
+})
+
+export class TimeDeltaComponent {
+ @Input() startTime!: Date;
+ @Input() actionTime!: Date;
+ @Input() showStartTime: boolean = false;
+ @Input() showDeltaTime: boolean = true;
+
+ @Input() startIcon: string = ''; // recommended format is fontawesome and value fa fa-clock
+ @Input() startIconPosition: 'left' | 'right' = 'left';
+ @Input() startIconType: 'fontawesome' | 'custom' | 'image' = 'custom';
+
+ @Input() deltaIconPosition: 'left' | 'right' = 'left';
+ @Input() deltaTextFormat: 'combine' | 'h' | 'min' | 's' = 'combine';
+
+ @Input() deltaIcon: string = ''; // recommended format is fontawesome and value fa fa-plus
+ @Input() deltaIconType: 'fontawesome' | 'custom' | 'image' = 'custom';
+
+
+ // Return string of delta time (actionTime - startTime) in format selected by deltaTextFormat
+ getDelta(): string {
+ if (!this.canCountDelta()) {
+ return 'N/A'; // Return 'N/A' if delta cannot be calculated
+ }
+
+ const deltaSeconds = Math.round((this.actionTime.getTime() - this.startTime.getTime()) / 1000);
+ const hours = Math.floor(deltaSeconds / (60 * 60));
+ const minutes = Math.floor(deltaSeconds / 60) % 60;
+ const seconds = deltaSeconds % 60;
+
+ let deltaText = '';
+
+ if (this.deltaTextFormat == 'combine') {
+ if (hours > 0) {
+ deltaText += `${hours} h${hours > 1 ? ' ' : ''} `;
+ }
+ if (minutes > 0 || deltaText !== '') {
+ deltaText += `${minutes} min${minutes > 1 ? ' ' : ''} `;
+ }
+ if (seconds > 0 || deltaText === '') {
+ deltaText += `${seconds} s`;
+ }
+ } else if (this.deltaTextFormat === 'h') {
+ const totalHours = hours + minutes / 60 + seconds / 3600;
+ deltaText = totalHours.toFixed(1) + ' h';
+ } else if (this.deltaTextFormat === 'min') {
+ const totalMinutes = minutes + seconds / 60;
+ deltaText += `${totalMinutes.toFixed(2)} min`;
+ } else if (this.deltaTextFormat === 's') {
+ deltaText += `${deltaSeconds} s`;
+ }
+
+ return deltaText;
+ }
+
+ // Check if startTime was given
+ hasStartTime(): boolean {
+ return !!this.startTime;
+ }
+
+ // Function to check if it's possible to calculate delta
+ canCountDelta(): boolean {
+ return !!this.startTime && !!this.actionTime && this.actionTime > this.startTime;
+ }
+
+ // Get start time in better format
+ getStartTime(): string {
+ const hours = this.startTime.getHours();
+ const minutes = this.startTime.getMinutes();
+ const seconds = this.startTime.getSeconds();
+
+ let formattedTime = ` ${hours < 10 ? '0' + hours : hours} h ${minutes < 10 ? '0' + minutes : minutes} min`;
+ if (seconds > 0) {
+ formattedTime += ` ${seconds} s`;
+ }
+ return formattedTime;
+ }
+}
+
+// Examples of useage
+/*
+ in components.ts needs to be specified values of startTime and actionTime
+ example
+
+ startTime: Date = new Date('2024-03-30T15:30:00');
+ actionTime: Date = new Date('2024-03-30T15:40:20');
+
+
+ <time-delta></time-delta>
+
+ <time-delta [startTime]="startTime" [actionTime]="actionTime"
+ deltaIconType = "fontawesome"
+ deltaIcon = "fa fa-plus"
+ ></time-delta>
+ <br>
+
+ <time-delta [startTime]="startTime" [actionTime]="actionTime"
+ deltaIconType = "fontawesome"
+ deltaIcon = "fa fa-plus"
+ deltaTextFormat = "h"
+
+ startIconType = "fontawesome"
+ startIcon = "fa fa-clock"
+ [showStartTime]="parseBoolean('true')"
+ ></time-delta>
+
+ <br>
+
+ <time-delta [startTime]="startTime" [actionTime]="actionTime"
+ deltaIconType = "fontawesome"
+ deltaIcon = "fa fa-plus"
+ deltaTextFormat = "min"
+ ></time-delta>
+
+ <br>
+
+ <time-delta [startTime]="startTime" [actionTime]="actionTime"
+ deltaIconType = "fontawesome"
+ deltaIcon = "fa fa-plus"
+ deltaTextFormat = "s"
+ ></time-delta>
+
+*/
+
+
--
GitLab
From 1c8279e06991509808d3e413930eb59da3da42e6 Mon Sep 17 00:00:00 2001
From: vondrp <vondrovic@centrum.cz>
Date: Sun, 31 Mar 2024 12:28:06 +0200
Subject: [PATCH 2/2] =?UTF-8?q?Re=20#11120=20-=20zm=C4=9Bn=C4=9Bn=20form?=
=?UTF-8?q?=C3=A1t=20startTime=20v=20getStartTime,=20odstran=C4=9Bn=C3=AD?=
=?UTF-8?q?=20parseBoolean?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/app.component.ts | 5 ----
.../time-delta/time-delta.component.ts | 23 ++++++++++++-------
2 files changed, 15 insertions(+), 13 deletions(-)
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b9085b4..bf3c213 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -52,9 +52,4 @@ export class AppComponent implements OnInit {
this.actions.splice(index, 1);
saveActions(this.actions);
}
-
- // Function to parse string to boolean - can be used to pass parameters of components
- parseBoolean(value: string): boolean {
- return value.toLowerCase() === 'true';
- }
}
diff --git a/src/app/view/components/time-delta/time-delta.component.ts b/src/app/view/components/time-delta/time-delta.component.ts
index e506bfb..b341cee 100644
--- a/src/app/view/components/time-delta/time-delta.component.ts
+++ b/src/app/view/components/time-delta/time-delta.component.ts
@@ -75,10 +75,9 @@ export class TimeDeltaComponent {
const minutes = this.startTime.getMinutes();
const seconds = this.startTime.getSeconds();
- let formattedTime = ` ${hours < 10 ? '0' + hours : hours} h ${minutes < 10 ? '0' + minutes : minutes} min`;
- if (seconds > 0) {
- formattedTime += ` ${seconds} s`;
- }
+ let formattedTime = `${this.startTime.toDateString() }`; // date
+ formattedTime += ` ${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`; //time
+
return formattedTime;
}
}
@@ -88,12 +87,19 @@ export class TimeDeltaComponent {
in components.ts needs to be specified values of startTime and actionTime
example
- startTime: Date = new Date('2024-03-30T15:30:00');
+ startTime: Date = new Date('2024-03-30T15:30:00');
actionTime: Date = new Date('2024-03-30T15:40:20');
-
<time-delta></time-delta>
+ <time-delta [startTime]="startTime"
+ [showStartTime]="true"
+ [showDeltaTime]="false"
+ startIconType="fontawesome"
+ startIcon="fa fa-clock"
+ >
+ </time-delta>
+
<time-delta [startTime]="startTime" [actionTime]="actionTime"
deltaIconType = "fontawesome"
deltaIcon = "fa fa-plus"
@@ -107,7 +113,7 @@ export class TimeDeltaComponent {
startIconType = "fontawesome"
startIcon = "fa fa-clock"
- [showStartTime]="parseBoolean('true')"
+ [showStartTime]="true"
></time-delta>
<br>
@@ -125,7 +131,8 @@ export class TimeDeltaComponent {
deltaIcon = "fa fa-plus"
deltaTextFormat = "s"
></time-delta>
-
*/
+
+
--
GitLab