Manual departure controls with arrow keys (#305)

* Added manual custom departure control

* Added support for mainboard

DepartureBoardWeb/ClientApp/src/app/Components/departure-scroller/departure-scroller.component.ts

@@ -62,6 +62,10 @@ export class DepartureScrollerComponent implements OnInit, OnChanges {
     } else if (this.enableScoll === false && this.timer) {
       clearInterval(this.timer);
     }
+
+    if (this.departures.length === 0) {
+      this.setDeparture(null, 0);
+    }
   }
 
   ngOnInit() {}
@@ -87,6 +91,11 @@ export class DepartureScrollerComponent implements OnInit, OnChanges {
         departure.platform === "0" ? " " : departure.platform;
       this.currentDestination = departure.destination;
       this.currentStatus = departure.status;
+    } else {
+      this.currentTime = null;
+      this.currentPlatform = "";
+      this.currentDestination = "";
+      this.currentStatus = "";
     }
 
     this.currentCount = count;

DepartureBoardWeb/ClientApp/src/app/Pages/boards/boards.component.ts

@@ -5,7 +5,7 @@ import {
   ViewContainerRef,
   OnDestroy,
   OnInit,
-  Input,
+  Input, HostListener,
 } from "@angular/core";
 import {
   ActivatedRoute,
@@ -22,7 +22,7 @@ import { AngularFirestore } from "@angular/fire/compat/firestore";
 import { DepartureService } from "src/app/Services/departure.service";
 import { StationLookupService } from "src/app/Services/station-lookup.service";
 import { Departure } from "src/app/models/departure.model";
-import { Subscription } from "rxjs";
+import {BehaviorSubject, Subscription} from "rxjs";
 import {ServiceStatus} from "../singleboard/singleboard";
 import { AnnouncementService } from "src/app/Services/announcement.service";
 import {BoardModernRgb} from "./board-modern-rgb/board-modern-rgb";
@@ -53,6 +53,7 @@ export class BoardsComponent implements OnInit, OnDestroy {
   subscriptions: Subscription[] = [];
   isLoading = false;
   announcementSub;
+  customDepartureSequence: BehaviorSubject<number> = new BehaviorSubject(0);
 
   constructor(
     private route: ActivatedRoute,
@@ -288,7 +289,10 @@ export class BoardsComponent implements OnInit, OnDestroy {
                   validDepartures = departures;
                 }
 
-                this.ProcessDepartures(validDepartures.slice(0, this.displays));
+                this.subscriptions.push(this.customDepartureSequence.subscribe(startIndex => {
+                  const index = departureData.manualControl ? startIndex : 0;
+                  this.ProcessDepartures(validDepartures.slice(index, this.displays));
+                }));
               },
               (error) => {
                 ToggleConfig.LoadingBar.next(false);
@@ -348,4 +352,14 @@ export class BoardsComponent implements OnInit, OnDestroy {
   isNumber(value: string | number): boolean {
     return value != null && !isNaN(Number(value.toString()));
   }
+
+  @HostListener('window:keyup', ['$event'])
+  keyEvent(event: KeyboardEvent) {
+    console.log("Key Pressed")
+    if(event.key == "ArrowRight"){
+      this.customDepartureSequence.next(this.customDepartureSequence.value + 1);
+    } else if(event.key == "ArrowLeft"){
+      this.customDepartureSequence.next(this.customDepartureSequence.value -1);
+    }
+  }
 }

DepartureBoardWeb/ClientApp/src/app/Pages/custom-departure-board/add-custom-departure/add-custom-departure.component.html

@@ -25,7 +25,8 @@ <h1 id="title" class="led centre-text">{{ title }}</h1>
 
     <br />
     <label class="led">Options: </label>
-    <mat-checkbox formControlName="hideExpired">Hide Expired Departures</mat-checkbox>
+    <mat-checkbox formControlName="hideExpired" style="padding-right: 15px">Hide Expired Departures</mat-checkbox>
+    <mat-checkbox *ngIf="!addForm.value.hideExpired" formControlName="manualControl">Manual Control (Use left and right arrow keys)</mat-checkbox>
     <br />
     <button id="btnSave" type="submit" mat-button [disabled]="!addForm.valid || (!file && !data) || isValidData === false" (click)="Save()">
       Save

DepartureBoardWeb/ClientApp/src/app/Pages/custom-departure-board/add-custom-departure/add-custom-departure.component.ts

@@ -24,6 +24,7 @@ export class AddCustomDepartureComponent {
   addForm = new FormGroup({
     name: new FormControl(null, [Validators.required]),
     hideExpired: new FormControl(true, [Validators.required]),
+    manualControl: new FormControl(false, [Validators.required]),
   });
   file: File;
   error = '';
@@ -63,6 +64,9 @@ export class AddCustomDepartureComponent {
                   this.addForm.controls["hideExpired"].setValue(
                     result.data()["hideExpired"]
                   );
+                  this.addForm.controls["manualControl"].setValue(
+                    result.data()["manualControl"]
+                  );
                   var theJSON = JSON.stringify(result.data()["jsonData"]);
                   this.data = result.data()["jsonData"];
                   var uri = this.sanitizer.bypassSecurityTrustUrl(
@@ -145,10 +149,18 @@ export class AddCustomDepartureComponent {
         return false;
       }
 
+      const hideExpired = this.addForm.controls["hideExpired"].value;
+      let manualControl = this.addForm.controls["manualControl"].value;
+
+      if (hideExpired === true) {
+        manualControl = false;
+      }
+
       var toSaveForm = {
         createdDate: new Date(),
         departuresCount: this.data.departures.length,
-        hideExpired: this.addForm.controls["hideExpired"].value,
+        hideExpired: hideExpired,
+        manualControl: manualControl,
         jsonData: this.data,
       };
       this.auth.user$.subscribe((user) => {

DepartureBoardWeb/ClientApp/src/app/Pages/singleboard/singleboard.html

@@ -4,7 +4,7 @@ <h1 id="title" class="led centre-text" *ngIf="showStationName">
       {{stationName}}
     </h1>
     <div class="row">
-      <h1 class="led col-md-1 col-sm-12">1st</h1>
+      <h1 class="led col-md-1 col-sm-12" *ngIf="firstTime">1st</h1>
       <h1 class="led col-md-1 col-sm-12">{{firstTime | date: 'HH:mm'}}</h1>
       <h1
         class="led col-md-1 col-sm-12 clickable"

DepartureBoardWeb/ClientApp/src/app/Pages/singleboard/singleboard.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from "@angular/core";
+import { Component, HostListener, Input, OnDestroy, OnInit } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
 import {
   ActivatedRoute,
@@ -19,7 +19,7 @@ import { SingleBoardResponse } from "src/app/models/singleboard-response.model";
 import { environment } from "src/environments/environment";
 import { AngularFirestore } from "@angular/fire/compat/firestore";
 import { AuthService } from "src/app/Services/auth.service";
-import { Subscription } from "rxjs";
+import {BehaviorSubject, Observable, Subscription} from "rxjs";
 import {AnnouncementService} from "src/app/Services/announcement.service";
 import {ConfigService} from "../../Services/config.service";
 
@@ -45,6 +45,7 @@ export class SingleBoard implements OnDestroy, OnInit {
   nextDepartures: Departure[] = [];
   subscriptions: Subscription[] = [];
   announcementSub;
+  customDepartureSequence: BehaviorSubject<number> = new BehaviorSubject(0);
 
   //first
   firstTime: Date;
@@ -229,6 +230,14 @@ export class SingleBoard implements OnDestroy, OnInit {
       this.marquee.appendItem($item);
     }
 
+    if (data.departures.length === 0) {
+      this.firstTime = null;
+      this.firstPlatform = "";
+      this.firstDestination = "";
+      this.firstStatus = "";
+      return;
+    }
+
     // First
     this.firstTime = data.departures[0].aimedDeparture;
     this.firstPlatform = data.departures[0].platform;
@@ -357,31 +366,33 @@ export class SingleBoard implements OnDestroy, OnInit {
                   validDepartures = departures;
                 }
 
-                // Calculates the Departure Status's
-                validDepartures.map(d => {
-                  if (d.expectedDeparture) {
-                    d.status = new Date(d.expectedDeparture) > new Date(d.aimedDeparture)
-                      ? ServiceStatus.LATE
-                      : ServiceStatus.ONTIME;
-                  }
-                  else {
-                    d.status = ServiceStatus.ONTIME;
-                  }
+                this.subscriptions.push(this.customDepartureSequence.subscribe(startIndex => {
+                  // Calculates the Departure Status's
+                  validDepartures.map(d => {
+                    if (d.expectedDeparture) {
+                      d.status = new Date(d.expectedDeparture) > new Date(d.aimedDeparture)
+                        ? ServiceStatus.LATE
+                        : ServiceStatus.ONTIME;
+                    }
+                    else {
+                      d.status = ServiceStatus.ONTIME;
+                    }
 
-                  return d;
-                })
+                    return d;
+                  });
 
-                var toViewDepartures = validDepartures.slice(0, 3);
+                  var toViewDepartures = validDepartures.slice(departureData.manualControl ? startIndex : 0, 3);
 
-                let information = ""
-                if (toViewDepartures.length > 0){
-                  information = this.GetInformationLine(toViewDepartures[0])
-                }
+                  let information = ""
+                  if (toViewDepartures.length > 0){
+                    information = this.GetInformationLine(toViewDepartures[0])
+                  }
 
-                this.ProcessDepartures({
-                  departures: toViewDepartures,
-                  information: information
-                });
+                  this.ProcessDepartures({
+                    departures: toViewDepartures,
+                    information: information
+                  });
+                }));
               },
               (error) => {
                 ToggleConfig.LoadingBar.next(false);
@@ -402,6 +413,16 @@ export class SingleBoard implements OnDestroy, OnInit {
 
     return information
   }
+
+  @HostListener('window:keyup', ['$event'])
+  keyEvent(event: KeyboardEvent) {
+    console.log("Key Pressed")
+    if(event.key == "ArrowRight"){
+      this.customDepartureSequence.next(this.customDepartureSequence.value + 1);
+    } else if(event.key == "ArrowLeft"){
+      this.customDepartureSequence.next(this.customDepartureSequence.value -1);
+    }
+  }
 }
 
 export enum ServiceStatus {