Better displaying of dates and times

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 {

Frontend/src/app/components/event-detail/event-detail.component.html

@@ -13,19 +13,19 @@
         </tr>
         <tr>
             <td>Created:</td>
-            <td>&nbsp;{{latestFullChange.new_created}}</td>
+            <td>&nbsp;{{getDateTime(latestFullChange.new_created.toString())}}</td>
         </tr>
         <tr>
             <td>Start:</td>
-            <td>&nbsp;{{latestFullChange.new_start}}</td>
+            <td>&nbsp;{{getDateTime(latestFullChange.new_start.toString())}}</td>
         </tr>
         <tr>
             <td>End:</td>
-            <td>&nbsp;{{latestFullChange.new_end}}</td>
+            <td>&nbsp;{{getDateTime(latestFullChange.new_end.toString())}}</td>
         </tr>
         <tr>
             <td>Last modified:</td>
-            <td>&nbsp;{{latestFullChange.new_last_modified}}</td>
+            <td>&nbsp;{{getDateTime(latestFullChange.new_last_modified.toString())}}</td>
         </tr>
         <tr>
             <td>Location:</td>
@@ -52,7 +52,7 @@
         </tr>
         <tbody *ngFor="let change of changeDetails">
             <tr>
-                <td class="change-timestamp">{{change.timestamp}}</td>
+                <td class="change-timestamp">{{getDateTime(change.timestamp.toString())}}</td>
                 <td class="change-summary">{{change.summary}}</td>
             </tr>
             <tr *ngIf="change.hasDetails">

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 {

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

Frontend/src/app/components/event/event.component.html

@@ -1,5 +1,6 @@
 <div class="event-card {{eventTypeClass}}" (click)="openEventDetails()">
-    Titel: {{event.latest_event_summary}}
+    {{event.latest_event_summary}}<br>
-    Start: {{event.latest_start_date}}
+    Start: {{getTime()}}<br>
-    Gelöscht: {{event.changes[event.changes.length-1].is_deleted}}
+    Deleted: {{event.changes[event.changes.length-1].is_deleted}}<br>
+    <div class="click-hint">Click for change details</div>
 </div>

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

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

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);
+    }
+}