From 347875390f9e10f0aefa0c82f1d367c818cf2bef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20M=C3=BCller?= Date: Sat, 2 Oct 2021 12:50:11 +0200 Subject: [PATCH] Better displaying of dates and times --- Frontend/src/app/app.module.ts | 9 +++-- .../event-detail/event-detail.component.html | 10 +++--- .../event-detail/event-detail.component.ts | 9 ++++- .../app/components/event/event.component.css | 9 +++++ .../app/components/event/event.component.html | 7 ++-- .../app/components/event/event.component.ts | 8 ++++- .../services/utils/utilities.service.spec.ts | 16 +++++++++ .../app/services/utils/utilities.service.ts | 34 +++++++++++++++++++ 8 files changed, 90 insertions(+), 12 deletions(-) create mode 100644 Frontend/src/app/services/utils/utilities.service.spec.ts create mode 100644 Frontend/src/app/services/utils/utilities.service.ts diff --git a/Frontend/src/app/app.module.ts b/Frontend/src/app/app.module.ts index a0385c6..3104fa5 100644 --- a/Frontend/src/app/app.module.ts +++ b/Frontend/src/app/app.module.ts @@ -15,6 +15,9 @@ import {EventDetailComponent} from './components/event-detail/event-detail.compo import {HttpClientModule} from '@angular/common/http'; import {FormsModule} from '@angular/forms'; import {ApiService} from './services/api/api.service'; +import {MatTooltipModule} from '@angular/material/tooltip'; +import {UtilitiesService} from './services/utils/utilities.service'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ declarations: [ @@ -33,9 +36,11 @@ import {ApiService} from './services/api/api.service'; AppRouting, HttpClientModule, NgbModule, - FormsModule + FormsModule, + MatTooltipModule, + BrowserAnimationsModule ], - providers: [ApiService], + providers: [ApiService, UtilitiesService], bootstrap: [AppComponent] }) export class AppModule { diff --git a/Frontend/src/app/components/event-detail/event-detail.component.html b/Frontend/src/app/components/event-detail/event-detail.component.html index 915b223..caefda4 100644 --- a/Frontend/src/app/components/event-detail/event-detail.component.html +++ b/Frontend/src/app/components/event-detail/event-detail.component.html @@ -13,19 +13,19 @@ Created: -  {{latestFullChange.new_created}} +  {{getDateTime(latestFullChange.new_created.toString())}} Start: -  {{latestFullChange.new_start}} +  {{getDateTime(latestFullChange.new_start.toString())}} End: -  {{latestFullChange.new_end}} +  {{getDateTime(latestFullChange.new_end.toString())}} Last modified: -  {{latestFullChange.new_last_modified}} +  {{getDateTime(latestFullChange.new_last_modified.toString())}} Location: @@ -52,7 +52,7 @@ - {{change.timestamp}} + {{getDateTime(change.timestamp.toString())}} {{change.summary}} diff --git a/Frontend/src/app/components/event-detail/event-detail.component.ts b/Frontend/src/app/components/event-detail/event-detail.component.ts index 9e4bb3e..c41269f 100644 --- a/Frontend/src/app/components/event-detail/event-detail.component.ts +++ b/Frontend/src/app/components/event-detail/event-detail.component.ts @@ -3,6 +3,7 @@ import {ActivatedRoute} from '@angular/router'; import {Event} from '../../models/event'; import {ApiService} from '../../services/api/api.service'; import {Change} from '../../models/change'; +import {UtilitiesService} from '../../services/utils/utilities.service'; @Component({ selector: 'app-event-detail', @@ -18,7 +19,8 @@ export class EventDetailComponent implements OnInit { constructor( private route: ActivatedRoute, - private apiService: ApiService + private apiService: ApiService, + private utilities: UtilitiesService ) { } @@ -122,6 +124,11 @@ export class EventDetailComponent implements OnInit { closeTab(): void { window.close(); } + + getDateTime(date: string): string { + console.log(date); + return this.utilities.getDateTimeFromString(date); + } } export interface ChangeDetail { diff --git a/Frontend/src/app/components/event/event.component.css b/Frontend/src/app/components/event/event.component.css index b7e3b7c..380f373 100644 --- a/Frontend/src/app/components/event/event.component.css +++ b/Frontend/src/app/components/event/event.component.css @@ -4,6 +4,10 @@ margin: .5em; } +.event-card:hover { + cursor: pointer; +} + .event-card-lecture { background-color: #0A62D0; } @@ -15,3 +19,8 @@ .event-card-blocker { background-color: dimgrey; } + +.click-hint { + font-size: 80%; + color: black; +} diff --git a/Frontend/src/app/components/event/event.component.html b/Frontend/src/app/components/event/event.component.html index 9920dda..aaa0b8b 100644 --- a/Frontend/src/app/components/event/event.component.html +++ b/Frontend/src/app/components/event/event.component.html @@ -1,5 +1,6 @@
- Titel: {{event.latest_event_summary}} - Start: {{event.latest_start_date}} - Gelöscht: {{event.changes[event.changes.length-1].is_deleted}} + {{event.latest_event_summary}}
+ Start: {{getTime()}}
+ Deleted: {{event.changes[event.changes.length-1].is_deleted}}
+
Click for change details
diff --git a/Frontend/src/app/components/event/event.component.ts b/Frontend/src/app/components/event/event.component.ts index 9764b28..cb119ea 100644 --- a/Frontend/src/app/components/event/event.component.ts +++ b/Frontend/src/app/components/event/event.component.ts @@ -2,6 +2,7 @@ import {Component, Input, OnInit} from '@angular/core'; import {Event} from '../../models/event'; import {Change} from '../../models/change'; import {Router} from '@angular/router'; +import {UtilitiesService} from '../../services/utils/utilities.service'; @Component({ selector: 'app-event', @@ -15,7 +16,8 @@ export class EventComponent implements OnInit { latestFullChange: Change = {} as Change; constructor( - private router: Router + private router: Router, + private utilities: UtilitiesService ) { } @@ -43,4 +45,8 @@ export class EventComponent implements OnInit { openEventDetails() { this.router.navigate([]).then(result => { window.open('/eventDetails/'+this.event.event_uid, '_blank'); }); } + + getTime(): string { + return this.utilities.getTimeFromString(this.latestFullChange.new_start.toString()); + } } diff --git a/Frontend/src/app/services/utils/utilities.service.spec.ts b/Frontend/src/app/services/utils/utilities.service.spec.ts new file mode 100644 index 0000000..61f79bd --- /dev/null +++ b/Frontend/src/app/services/utils/utilities.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { UtilitiesService } from './utilities.service'; + +describe('UtilitiesService', () => { + let service: UtilitiesService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(UtilitiesService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/Frontend/src/app/services/utils/utilities.service.ts b/Frontend/src/app/services/utils/utilities.service.ts new file mode 100644 index 0000000..09268a2 --- /dev/null +++ b/Frontend/src/app/services/utils/utilities.service.ts @@ -0,0 +1,34 @@ +import {Injectable} from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class UtilitiesService { + + constructor() { + } + + getTimeFromDate(date: Date): string { + return date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0'); + } + + getTimeFromString(dateString: string): string { + let date = new Date(dateString); + return this.getTimeFromDate(date); + } + + getDateTimeFromDate(date: Date): string { + let year = date.getFullYear().toString(); + let month = date.getMonth().toString().padStart(2, '0'); + let day = date.getDate().toString().padStart(2, '0'); + let hour = date.getHours().toString().padStart(2, '0'); + let minute = date.getMinutes().toString().padStart(2, '0'); + + return day + '.' + month + '.' + year + ', ' + hour + ':' + minute; + } + + getDateTimeFromString(dateString: string): string { + let date = new Date(dateString); + return this.getDateTimeFromDate(date); + } +}