TTG display formatting (closes #226)

SignalK · Jan 16, 2025 · ebfee8c · ebfee8c
1 parent ac5365b
commit ebfee8c
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,13 +6,13 @@
 - **New**: Display specific Note icons when "skIcon" property matches a POI type.
 - **Fixed**: Notes popover and dialog formatting. (#214, #223)
 - **Fixed**: Navigation data panel alignment on smaller screens. (#212)
+- **Fixed**: Update TTG display format based on magnitude of value. (#226)
 - **Updated**: Resource Set feature popover formatting. (#213)
 - **Updated**: Show more / less ui icons in AIS properties. (#217)
 - **Updated**: Relocated close button on resource lists. (#218)
 - **Updated**: Additional aisCogLine length options. (#209)
 - **Added**: %map:zoom% token for use in Notes fetch filter (#222)
 
-
 ### v2.12.2
 - **Fixed**: Issue applying URL query parameters. (#201)
 - **Fixed**: S57 symbol display issue. (#202)

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1032,16 +1032,15 @@
               >
               </ap-dial-text>
               } @if(app.data.navData.ttg) {
-              <ap-dial-text
-                [title]="'TTG'"
-                [value]="app.data.navData.ttg.toFixed(1)"
-                [units]="'mins'"
-              >
-              </ap-dial-text>
+              <ap-dial-ttg [value]="app.data.navData.ttg"> </ap-dial-ttg>
               } @if(app.data.navData.xte) {
               <ap-dial-text
                 [title]="'XTE'"
-                [value]="app.data.navData.xte.toFixed(3)"
+                [value]="
+                  app.data.navData.xte > 10
+                    ? app.data.navData.xte.toFixed(1)
+                    : app.data.navData.xte.toFixed(3)
+                "
                 [units]="app.config.units.distance === 'm' ? 'km' : 'NM'"
               >
               </ap-dial-text>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -613,8 +613,19 @@ export class AppComponent {
           .get(this.app.skApiVersion, 'vessels/self/steering/autopilot')
           .subscribe(
             () => {
+              const sap = this.app.data.autopilot.hasApi;
               this.app.data.autopilot.hasApi = true;
               this.app.data.autopilot.isLocal = true;
+              if (sap && this.app.data.autopilot.isLocal) {
+                setTimeout(() =>
+                  this.app.showMessage(
+                    'Built-in PyPilot support is deprecated! See Help for more.',
+                    true,
+                    5000
+                  )
+                ),
+                  10000;
+              }
             },
             () => {
               this.app.debug('No local AP API found.');

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -34,6 +34,7 @@ import {
 
 import {
   TextDialComponent,
+  TTGDialComponent,
   FileInputComponent,
   PiPVideoComponent,
   WakeLockComponent,
@@ -56,6 +57,7 @@ import {
     BrowserAnimationsModule,
     FBMapComponent,
     TextDialComponent,
+    TTGDialComponent,
     FileInputComponent,
     PiPVideoComponent,
     WakeLockComponent,

diff --git a/src/app/lib/components/dial-text.ts b/src/app/lib/components/dial-text.ts
@@ -1,7 +1,12 @@
 /** Text Dial Component **
  ************************/
 
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  SimpleChanges
+} from '@angular/core';
 
 /*********** Text Dial ***************
 title: "<string>" title text,
@@ -27,3 +32,50 @@ export class TextDialComponent {
   @Input() value: string;
   @Input() units: string;
 }
+
+/*********** TTG Text Dial ***************
+value: "<number>" TTG value in minutes
+***********************************/
+@Component({
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'ap-dial-ttg',
+  imports: [],
+  template: `
+    <div class="dial-text mat-app-background">
+      <div class="dial-text-title">TTG</div>
+      <div class="dial-text-value">{{ ttg }}</div>
+      <div class="dial-text-units">{{ units }}</div>
+    </div>
+  `,
+  styleUrls: ['./dial-text.css']
+})
+export class TTGDialComponent {
+  @Input() value: number;
+  protected ttg: string = '--';
+  protected units: string = 'min';
+
+  ngOnChanges(changes: SimpleChanges) {
+    const cv = changes.value.currentValue;
+    if (typeof cv !== 'number') {
+      this.ttg = '--';
+      this.units = 'min';
+    } else if (cv < 60) {
+      this.ttg = Math.floor(cv).toString();
+      this.units = 'min';
+    } else if (cv < 60 * 24) {
+      this.ttg = `${Math.floor(cv / 60)}:${(cv % 60).toFixed(0)}`;
+      this.units = 'hr:min';
+    } else {
+      const minPerDay = 60 * 24;
+      const days = Math.floor(cv / minPerDay);
+      const dm = days * minPerDay;
+      const rhm = cv - dm;
+      const hours = Math.floor(rhm / 60);
+      const minutes = Math.floor(rhm - hours * 60);
+
+      this.ttg = `${days}:${hours}:${minutes}`;
+      this.units = 'day:hr:min';
+    }
+  }
+}