From 056a20964cbee4d6ddcfc313ee44e24ffa4b32d3 Mon Sep 17 00:00:00 2001
From: Maximilian Krambach <maximilian.krambach@intevation.de>
Date: Mon, 4 Feb 2019 12:42:08 +0100
Subject: [PATCH] improve start time and duration display for finished speakers

---
 .../app/core/ui-services/duration.service.ts  | 12 +++++++
 .../src/app/shared/models/agenda/speaker.ts   | 15 ++++++--
 .../speaker-list/speaker-list.component.html  |  8 ++---
 .../speaker-list/speaker-list.component.ts    | 34 +++++++++++++++++--
 .../app/site/agenda/models/view-speaker.ts    |  6 ++++
 5 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/client/src/app/core/ui-services/duration.service.ts b/client/src/app/core/ui-services/duration.service.ts
index b62f8eeaa..9ccccaa00 100644
--- a/client/src/app/core/ui-services/duration.service.ts
+++ b/client/src/app/core/ui-services/duration.service.ts
@@ -69,4 +69,16 @@ export class DurationService {
             return '';
         }
     }
+
+    /**
+     * Converts a duration number (given in seconds)o a string in `MMM:SS` format
+     *
+     * @param time value in seconds
+     * @returns a more human readable time representation
+     */
+    public secondDurationToString(time: number): string {
+        const minutes = Math.floor(time / 60);
+        const seconds = Math.floor(time % 60);
+        return `${minutes}:${`0${seconds}`.slice(-2)}`;
+    }
 }
diff --git a/client/src/app/shared/models/agenda/speaker.ts b/client/src/app/shared/models/agenda/speaker.ts
index 79ca1da2c..a8751628f 100644
--- a/client/src/app/shared/models/agenda/speaker.ts
+++ b/client/src/app/shared/models/agenda/speaker.ts
@@ -19,8 +19,19 @@ export enum SpeakerState {
 export class Speaker extends Deserializer {
     public id: number;
     public user_id: number;
-    public begin_time: string; // TODO this is a time object
-    public end_time: string; // TODO this is a time object
+
+    /**
+     * ISO datetime string to indicate the begin time of the speech. Empty if
+     * the speaker has not started
+     */
+    public begin_time: string;
+
+    /**
+     * ISO datetime string to indicate the end time of the speech. Empty if the
+     * speech has not ended
+     */
+    public end_time: string;
+
     public weight: number;
     public marked: boolean;
     public item_id: number;
diff --git a/client/src/app/site/agenda/components/speaker-list/speaker-list.component.html b/client/src/app/site/agenda/components/speaker-list/speaker-list.component.html
index 3b3329ffa..3a65af79f 100644
--- a/client/src/app/site/agenda/components/speaker-list/speaker-list.component.html
+++ b/client/src/app/site/agenda/components/speaker-list/speaker-list.component.html
@@ -37,13 +37,11 @@
             <!-- {Number}. {full_name} {time} minutes (Start time: {begin_time}) [close button] -->
             <mat-list-item *ngFor="let speaker of finishedSpeakers; let number = index">
                 <div class="finished-prefix">
-                    <span>{{ number + 1 }}</span> <span>.&nbsp;{{ speaker }}</span>
+                    <span>{{ number + 1 }}. {{ speaker }}</span>
                 </div>
                 <div class="finished-suffix">
-                    <!-- TODO: No Date or time class yet -->
-                    <!-- <span> calc time here &nbsp;</span> -->
-                    <!-- <span translate>minutes</span> -->
-                    <span>&nbsp;(</span> <span translate>Start time</span> <span>:&nbsp;{{ speaker.begin_time }})</span>
+                    &nbsp;&nbsp; {{ durationString(speaker) }}
+                    ({{ 'Start time' | translate }}: {{ startTimeToString(speaker) }})
                 </div>
                 <button
                     mat-stroked-button
diff --git a/client/src/app/site/agenda/components/speaker-list/speaker-list.component.ts b/client/src/app/site/agenda/components/speaker-list/speaker-list.component.ts
index 8b34d8fd5..d4734f5aa 100644
--- a/client/src/app/site/agenda/components/speaker-list/speaker-list.component.ts
+++ b/client/src/app/site/agenda/components/speaker-list/speaker-list.component.ts
@@ -10,6 +10,7 @@ import { AgendaRepositoryService } from 'app/core/repositories/agenda/agenda-rep
 import { BaseViewComponent } from 'app/site/base/base-view';
 import { CurrentListOfSpeakersSlideService } from 'app/site/projector/services/current-list-of-of-speakers-slide.service';
 import { DataStoreService } from 'app/core/core-services/data-store.service';
+import { DurationService } from 'app/core/ui-services/duration.service';
 import { OperatorService } from 'app/core/core-services/operator.service';
 import { ProjectorRepositoryService } from 'app/core/repositories/projector/projector-repository.service';
 import { PromptService } from 'app/core/ui-services/prompt.service';
@@ -91,7 +92,9 @@ export class SpeakerListComponent extends BaseViewComponent implements OnInit {
     }
 
     /**
-     * Constructor for speaker list component
+     * Constructor for speaker list component. Generates the forms and subscribes
+     * to the {@link currentListOfSpeakers}
+     *
      * @param title
      * @param translate
      * @param snackBar
@@ -100,6 +103,9 @@ export class SpeakerListComponent extends BaseViewComponent implements OnInit {
      * @param DS the DataStore
      * @param itemRepo Repository fpr agenda items
      * @param op the current operator
+     * @param promptService
+     * @param currentListOfSpeakersService
+     * @param durationService helper for speech duration display
      */
     public constructor(
         title: Title,
@@ -111,7 +117,8 @@ export class SpeakerListComponent extends BaseViewComponent implements OnInit {
         private itemRepo: AgendaRepositoryService,
         private op: OperatorService,
         private promptService: PromptService,
-        private currentListOfSpeakersService: CurrentListOfSpeakersSlideService
+        private currentListOfSpeakersService: CurrentListOfSpeakersSlideService,
+        private durationService: DurationService
     ) {
         super(title, translate, snackBar);
         this.isCurrentListOfSpeakers();
@@ -318,4 +325,27 @@ export class SpeakerListComponent extends BaseViewComponent implements OnInit {
             this.itemRepo.deleteAllSpeakers(this.viewItem);
         }
     }
+
+    /**
+     * returns a locale-specific version of the starting time for the given speaker item
+     *
+     * @param speaker
+     * @returns a time string using the current language setting of the client
+     */
+    public startTimeToString(speaker: ViewSpeaker): string {
+        return new Date(speaker.begin_time).toLocaleString(this.translate.currentLang);
+    }
+
+    /**
+     * get the duration of a speech
+     *
+     * @param speaker
+     * @returns string representation of the duration in `[MM]M:SS minutes` format
+     */
+    public durationString(speaker: ViewSpeaker): string {
+        const duration = Math.floor(
+            (new Date(speaker.end_time).valueOf() - new Date(speaker.begin_time).valueOf()) / 1000
+        );
+        return `${this.durationService.secondDurationToString(duration)} ${this.translate.instant('minutes')}`;
+    }
 }
diff --git a/client/src/app/site/agenda/models/view-speaker.ts b/client/src/app/site/agenda/models/view-speaker.ts
index 929b1adb6..1002e820a 100644
--- a/client/src/app/site/agenda/models/view-speaker.ts
+++ b/client/src/app/site/agenda/models/view-speaker.ts
@@ -30,10 +30,16 @@ export class ViewSpeaker extends BaseViewModel implements Selectable {
         return this.speaker ? this.speaker.marked : null;
     }
 
+    /**
+     * @returns an ISO datetime string or null
+     */
     public get begin_time(): string {
         return this.speaker ? this.speaker.begin_time : null;
     }
 
+    /**
+     * @returns an ISO datetime string or null
+     */
     public get end_time(): string {
         return this.speaker ? this.speaker.end_time : null;
     }