Singleboard custom font size

benfl3713 · Dec 28, 2024 · 1d095f7 · 1d095f7
1 parent 25a950b
commit 1d095f7
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 7 deletions.
diff --git a/...oardWeb/ClientApp/src/app/Components/departure-scroller/departure-scroller.component.html b/...oardWeb/ClientApp/src/app/Components/departure-scroller/departure-scroller.component.html
@@ -1,22 +1,25 @@
 <div class="row" id="departure-scroller">
-  <h1 class="led col-md-1 col-sm-12 clickable" (click)="changeDeparture()">
+  <h1 class="led col-md-1 col-sm-12 clickable" (click)="changeDeparture()" [ngStyle]="{'font-size': fontSize}">
     {{ getNumberWithOrdinal(currentCount) }}
   </h1>
-  <h1 class="led col-md-1 col-sm-12">{{ currentTime | date: "HH:mm" }}</h1>
+  <h1 class="led col-md-1 col-sm-12" [ngStyle]="{'font-size': fontSize}">{{ currentTime | date: "HH:mm" }}</h1>
   <h1
     class="led col-md-1 col-sm-12 clickable"
+    [ngStyle]="{'font-size': fontSize}"
     (click)="FilterPlatform(currentPlatform)"
   >
-    {{ currentPlatform }}
+    {{ showPlatforms ? currentPlatform : '' }}
   </h1>
   <h1
     class="led col-md-7 col-sm-12 clickable"
+    [ngStyle]="{'font-size': fontSize}"
     (click)="ChangeStation(currentDestination)"
   >
     {{ currentDestination }}
   </h1>
   <h1
     class="led col-md-2 status"
+    [ngStyle]="{'font-size': fontSize}"
     [ngClass]="{
       ontime: currentStatus == 'On Time',
       late: currentStatus?.includes('Exp'),

diff --git a/...eBoardWeb/ClientApp/src/app/Components/departure-scroller/departure-scroller.component.ts b/...eBoardWeb/ClientApp/src/app/Components/departure-scroller/departure-scroller.component.ts
@@ -20,6 +20,8 @@ export class DepartureScrollerComponent implements OnInit, OnChanges {
   @Input() departures: Departure[] = [];
   @Input() enableScoll: boolean = true;
   @Input() useArrivals: boolean = false;
+  @Input() showPlatforms: boolean = true;
+  @Input() fontSize?: string;
   index = 0;
   timer;
   currentCount;

diff --git a/DepartureBoardWeb/ClientApp/src/app/Pages/singleboard/singleboard.html b/DepartureBoardWeb/ClientApp/src/app/Pages/singleboard/singleboard.html
@@ -4,22 +4,25 @@ <h1 id="title" class="led centre-text" *ngIf="showStationName">
       {{stationName}}
     </h1>
     <div class="row">
-      <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" *ngIf="firstTime" [ngStyle]="{'font-size': fontSize}">1st</h1>
+      <h1 class="led col-md-1 col-sm-12" [ngStyle]="{'font-size': fontSize}">{{firstTime | date: 'HH:mm'}}</h1>
       <h1
         class="led col-md-1 col-sm-12 clickable"
+        [ngStyle]="{'font-size': fontSize}"
         (click)="FilterPlatform(firstPlatform)"
       >
-        {{firstPlatform}}
+        {{showPlatforms ? firstPlatform : ''}}
       </h1>
       <h1
         class="led col-md-7 col-sm-12 clickable"
+        [ngStyle]="{'font-size': fontSize}"
         (click)="ChangeStation(firstDestination)"
       >
         {{firstDestination}}
       </h1>
       <h1
         class="led col-md-2 status"
+        [ngStyle]="{'font-size': fontSize}"
         [ngClass]="{ 'ontime': firstStatus=='On Time', 'late': firstStatus.includes('Exp'), 'arrived': firstStatus=='Arrived', 'cancelled': firstStatus=='Cancelled'}"
       >
         {{firstStatus}}
@@ -29,13 +32,16 @@ <h1 class="led col-md-1 col-sm-12">{{firstTime | date: 'HH:mm'}}</h1>
       <div
         id="singleboard-information"
         class="led info col-12"
-        style="height: 48px"
+        style="min-height: 48px"
+        [ngStyle]="{'font-size': fontSize}"
       ></div>
     </div>
     <app-departure-scroller
       [departures]="nextDepartures"
       [enableScoll]="alternateSecondRow"
       [useArrivals]="useArrivals"
+      [fontSize]="fontSize"
+      [showPlatforms]="showPlatforms"
     ></app-departure-scroller>
     <h1 class="led time clickable" [routerLink]='["/"]' *ngIf="showClock">
       {{ time | date: 'HH:mm:ss' }}

diff --git a/DepartureBoardWeb/ClientApp/src/app/Pages/singleboard/singleboard.ts b/DepartureBoardWeb/ClientApp/src/app/Pages/singleboard/singleboard.ts
@@ -46,6 +46,8 @@ export class SingleBoard implements OnDestroy, OnInit {
   subscriptions: Subscription[] = [];
   announcementSub;
   customDepartureSequence: BehaviorSubject<number> = new BehaviorSubject(0);
+  fontSize?: string;
+  showPlatforms: boolean = true;
 
   //first
   firstTime: Date;
@@ -102,6 +104,14 @@ export class SingleBoard implements OnDestroy, OnInit {
           .toLowerCase() == "true";
     }
 
+    if (this.configService.getItem("settings_singleboard_fontsize")){
+      this.fontSize = this.configService.getItem("settings_singleboard_fontsize") + "px";
+    }
+
+    if (this.configService.getItem("settings_singleboard_showPlatforms")){
+      this.showPlatforms = this.configService.getItem("settings_singleboard_showPlatforms").toLowerCase() == "true";
+    }
+
     this.route.params.subscribe(() => {
       this.route.queryParams.subscribe((queryParams) => {
         this.stationCode = this.route.snapshot.paramMap.get("station") ?? this.stationCode;

diff --git a/DepartureBoardWeb/ClientApp/src/app/settings/settings-singleboard.component.ts b/DepartureBoardWeb/ClientApp/src/app/settings/settings-singleboard.component.ts
@@ -21,6 +21,13 @@ import { ControlContainer, FormGroup } from "@angular/forms";
         "
         >Alternate Second Row</mat-slide-toggle
       ><br />
+      <mat-slide-toggle
+        [checked]="form.controls.singleboard_showPlatforms.value"
+        (change)="
+          form.controls.singleboard_showPlatforms.setValue($event.checked)
+        "
+        >Show Platforms</mat-slide-toggle
+      ><br />
       <div class="row">
         <div class="col">
           <label>Scroll Speed</label>
@@ -47,6 +54,32 @@ import { ControlContainer, FormGroup } from "@angular/forms";
         </button>
       </div>
       <br />
+      <div class="row">
+        <div class="col">
+          <label>Font Size</label>
+          <input type="range"
+            #singleboardFontSize
+            min="20"
+            max="80"
+            step="5"
+            [value]="form.controls.singleboard_fontsize.value"
+            color="primary"
+            (change)="
+              form.controls.singleboard_fontsize.setValue($event.target['value'])
+            "
+          />
+          <mat-hint>{{ singleboardFontSize.value }}</mat-hint>
+        </div>
+        <button
+          mat-button
+          (click)="SetFormValue('singleboard_fontsize', null)"
+          style="margin-left: 20px"
+          class="btnOrange col-1"
+        >
+          Reset
+        </button>
+      </div>
+      <br />
     </form>
   `,
 })

diff --git a/DepartureBoardWeb/ClientApp/src/app/settings/settings.component.ts b/DepartureBoardWeb/ClientApp/src/app/settings/settings.component.ts
@@ -45,7 +45,9 @@ export class SettingsComponent implements OnInit {
 
     singleboard_showStationName: new FormControl(false),
     singleboard_alternateSecondRow: new FormControl(true),
+    singleboard_showPlatforms: new FormControl(true),
     singleboard_scrollspeed: new FormControl(300),
+    singleboard_fontsize: new FormControl(40),
 
     departureadmin_uid: new FormControl(""),
     departureadmin_enabled: new FormControl(false),
@@ -103,7 +105,9 @@ export class SettingsComponent implements OnInit {
       general_betaFeatures: false,
       singleboard_showStationName: false,
       singleboard_alternateSecondRow: true,
+      singleboard_showPlatforms: true,
       singleboard_scrollspeed: 300,
+      singleboard_fontsize: null,
       departureadmin_uid: "",
       departureadmin_enabled: false,
       buses_showStopName: true,