Add manual sorting to Speaker list

Also create CSS Theme file to prevent side effects from theming

client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss

@@ -1,31 +1,3 @@
-@import '~@angular/material/theming';
-
-@mixin os-list-of-speakers-style($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $contrast: map-get($primary, contrast);
-    $foreground: map-get($theme, foreground);
-
-    .current-speaker {
-        background-color: mat-color($accent) !important;
-
-        > span {
-            color: mat-color($accent, default-contrast);
-        }
-    }
-
-    .finished-speaker-grid {
-        > .number .name .controls {
-            color: mat-color($foreground, text);
-        }
-
-        > .time {
-            color: mat-color($foreground, secondary-text);
-        }
-    }
-}
-
 .los-title {
     margin-left: 25px;
 }

client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss-theme.scss

@@ -0,0 +1,27 @@
+@import '~@angular/material/theming';
+
+@mixin os-list-of-speakers-style($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $contrast: map-get($primary, contrast);
+    $foreground: map-get($theme, foreground);
+
+    .current-speaker {
+        background-color: mat-color($accent) !important;
+
+        > span {
+            color: mat-color($accent, default-contrast);
+        }
+    }
+
+    .finished-speaker-grid {
+        > .number .name .controls {
+            color: mat-color($foreground, text);
+        }
+
+        > .time {
+            color: mat-color($foreground, secondary-text);
+        }
+    }
+}

client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.ts

@@ -241,7 +241,17 @@ export class ListOfSpeakersComponent extends BaseViewComponent implements OnInit
                 this.viewItem = newAgendaItem;
                 const allSpeakers = this.repo.createSpeakerList(newAgendaItem.item);
                 this.speakers = allSpeakers.filter(speaker => speaker.state === SpeakerState.WAITING);
+                // Since the speaker repository is not a normal repository, sorting cannot be handled there
+                this.speakers.sort((a: ViewSpeaker, b: ViewSpeaker) => a.weight - b.weight);
                 this.finishedSpeakers = allSpeakers.filter(speaker => speaker.state === SpeakerState.FINISHED);
+
+                // convert begin time to date and sort
+                this.finishedSpeakers.sort((a: ViewSpeaker, b: ViewSpeaker) => {
+                    const aTime = new Date(a.begin_time).getTime();
+                    const bTime = new Date(b.begin_time).getTime();
+                    return aTime - bTime;
+                });
+
                 this.activeSpeaker = allSpeakers.find(speaker => speaker.state === SpeakerState.CURRENT);
             }
         });

client/src/styles.scss

@@ -11,7 +11,7 @@
 @import './app/site/site.component.scss-theme.scss';
 @import './assets/styles/global-components-style.scss';
 @import './app/shared/components/projector-button/projector-button.component.scss';
-@import './app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss';
+@import './app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss-theme.scss';
 
 /** fonts */
 @import './assets/styles/fonts.scss';