Adjust anchor position (closes #129)

src/app/app.component.html

@@ -342,7 +342,7 @@
               *ngIf="!draw.enabled || !measure.enabled"
               (click)="sidemenu.close(); displayLeftMenu('anchorWatch', true)"
             >
-              <mat-icon><i class="fi-anchor"></i></mat-icon>
+              <mat-icon>anchor</mat-icon>
               &nbsp;Anchor Watch
             </a>
 
@@ -588,7 +588,6 @@
               <div *ngIf="display.fullscreen.enabled">
                 <button
                   mat-mini-fab
-                  [color]="''"
                   (click)="toggleFullscreen()"
                   matTooltip="Go Fullscreen"
                   matTooltipPosition="left"
@@ -638,7 +637,7 @@
               <div>
                 <button
                   mat-mini-fab
-                  [color]="app.config.map.limitZoom ? 'accent' : ''"
+                  [color]="app.config.map.limitZoom ? 'primary' : 'accent'"
                   (click)="toggleLimitMapZoom()"
                   matTooltip="Constrain map zoom."
                   matTooltipPosition="left"
@@ -652,7 +651,7 @@
               <div>
                 <button
                   mat-mini-fab
-                  [color]="app.config.map.invertColor ? 'warn' : 'accent'"
+                  [color]="app.config.map.invertColor ? 'primary' : 'accent'"
                   (click)="invertAISTextColor()"
                   matTooltip="Invert feature text color."
                   matTooltipPosition="left"
@@ -925,7 +924,7 @@
                     </mat-icon>
                   </button>
                 </div>
-                <div style="width: 40px">
+                <div>
                   <button
                     mat-icon-button
                     matTooltip="Restart XTE"

src/app/lib/components/file-input.component.html

@@ -3,9 +3,8 @@
     <label>
       <ng-content></ng-content>
       <span *ngIf="icon">
-        <i class="fi-upload" style="font-size: 20pt; font-style: normal">
-          &nbsp;<span style="font-size: 10pt">{{ label }}</span>
-        </i>
+        <i class="material-icons">upload</i>
+        &nbsp;<span style="font-size: 10pt">{{ label }}</span>
       </span>
       <input
         #input

src/app/lib/components/wakelock.component.ts

@@ -25,7 +25,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     <div *ngIf="isSupported">
       <button
         mat-mini-fab
-        [color]="state ? 'warn' : ''"
+        [color]="state ? 'primary' : 'accent'"
         [matTooltip]="tipText"
         matTooltipPosition="left"
         (click)="toggle()"

src/app/modules/alarms/alarms.facade.ts

@@ -58,7 +58,7 @@ export class AlarmsFacade {
 
   // ******** ANCHOR WATCH EVENTS ************
   anchorEvent(
-    e: { radius: number; action: string },
+    e: { radius?: number; action: string },
     context?: string,
     position?: Position
   ) {
@@ -103,6 +103,22 @@ export class AlarmsFacade {
             reject();
           }
         );
+      } else if (e.action === 'position') {
+        this.signalk
+          .post('/plugins/anchoralarm/setAnchorPosition', {
+            position: {
+              latitude: position[1],
+              longitude: position[0]
+            }
+          })
+          .subscribe(
+            () => resolve(true),
+            (err: HttpErrorResponse) => {
+              this.parseAnchorError(err, 'position');
+              this.queryAnchorStatus(context, position);
+              reject();
+            }
+          );
       }
     });
   }
@@ -157,7 +173,7 @@ export class AlarmsFacade {
       this.anchorSource.next({
         action: action,
         error: true,
-        result: e.error
+        result: e
       });
     }
   }

src/app/modules/alarms/alarms.module.ts

@@ -19,6 +19,7 @@ import { AlarmComponent } from './components/alarm.component';
 import { AlarmsDialog } from './components/alarms-dialog.component';
 import { AnchorWatchComponent } from './components/anchor-watch.component';
 import { TimerButtonComponent } from './components/timer-button.component';
+import { NSEWButtonsComponent } from './components/nsew-buttons.component';
 
 @NgModule({
   imports: [
@@ -33,7 +34,8 @@ import { TimerButtonComponent } from './components/timer-button.component';
     MatToolbarModule,
     MatStepperModule,
     CommonDialogs,
-    TimerButtonComponent
+    TimerButtonComponent,
+    NSEWButtonsComponent
   ],
   declarations: [AnchorWatchComponent, AlarmsDialog, AlarmComponent],
   exports: [AnchorWatchComponent, AlarmsDialog, AlarmComponent],

src/app/modules/alarms/components/anchor-watch.component.html

@@ -56,7 +56,7 @@
           RAISE
           <mat-slide-toggle
             #slideCtl
-            color="warn"
+            color="primary"
             [hideIcon]="true"
             [disabled]="disable"
             [checked]="!raised"
@@ -89,7 +89,7 @@
           </button>
         </div>
       </mat-step>
-      <mat-step label="Adjust Radius" editable="false">
+      <mat-step label="Adjust" editable="false">
         <div>
           <div>
             <br />
@@ -99,7 +99,7 @@
             <div>
               <mat-slider
                 discrete
-                [color]="display.sliderColor"
+                color="primary"
                 [disabled]="disable"
                 [min]="this.feet ? mToFt(min) : min"
                 [max]="this.feet ? mToFt(max) : max"
@@ -126,6 +126,13 @@
             </div>
           </div>
         </div>
+        <div>
+          <div>
+            <br />
+            <b>Shift Anchor:</b>
+          </div>
+          <nsew-buttons (direction)="shiftAnchor($event)"></nsew-buttons>
+        </div>
       </mat-step>
     </mat-stepper>
   </div>

src/app/modules/alarms/components/anchor-watch.component.ts

@@ -9,11 +9,14 @@ import {
   ElementRef
 } from '@angular/core';
 
+import { computeDestinationPoint } from 'geolib';
+
 import { AlarmsFacade } from '../alarms.facade';
+import { AppInfo } from 'src/app/app.info';
 
 interface OutputMessage {
   radius: number | null;
-  action: 'drop' | 'raise' | 'setRadius' | undefined;
+  action: 'drop' | 'raise' | 'setRadius' | 'position' | undefined;
 }
 
 @Component({
@@ -35,21 +38,18 @@ export class AnchorWatchComponent {
   @ViewChild('slideCtl', { static: true }) slideCtl: ElementRef;
 
   bgImage: string;
-  display = { sliderColor: 'primary' };
   msg: OutputMessage = { radius: null, action: undefined };
 
   sliderValue: number;
   rodeOut = false;
 
-  constructor(private facade: AlarmsFacade) {}
+  constructor(private facade: AlarmsFacade, private app: AppInfo) {}
 
   ngOnInit() {
-    this.display.sliderColor = !this.raised ? 'warn' : 'primary';
     this.msg.radius = this.sliderValue;
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    this.display.sliderColor = !this.raised ? 'warn' : 'primary';
     if (changes.radius) {
       if (changes.radius.previousValue === -1) {
         this.sliderValue = Math.round(changes.radius.currentValue);
@@ -68,7 +68,6 @@ export class AnchorWatchComponent {
         ? './assets/img/anchor-radius-raised.png'
         : './assets/img/anchor-radius.png'
     }')`;
-    this.display.sliderColor = !this.raised ? 'warn' : 'primary';
     this.rodeOut = !this.raised && this.radius !== -1;
   }
 
@@ -99,6 +98,22 @@ export class AnchorWatchComponent {
       });
   }
 
+  shiftAnchor(direction: number) {
+    const inc = 1;
+    const position = computeDestinationPoint(
+      this.app.data.anchor.position,
+      inc,
+      direction
+    );
+
+    this.msg.action = 'position';
+    this.facade
+      .anchorEvent(this.msg, undefined, [position.longitude, position.latitude])
+      .catch(() => {
+        console.log('Error shifting anchor!');
+      });
+  }
+
   close() {
     this.closed.emit();
   }

src/app/modules/alarms/components/nsew-buttons.component.ts

@@ -0,0 +1,103 @@
+/***********************************
+NSEW arrow buttons component
+  <nsew-buttons>
+***********************************/
+import {
+  Component,
+  Input,
+  Output,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  EventEmitter
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  standalone: true,
+  selector: 'nsew-buttons',
+  imports: [CommonModule, MatButtonModule, MatIconModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [
+    `
+      .nsew {
+        border: silver 0px solid;
+      }
+      .nsew .btnRow {
+        display: flex;
+        flex-wrap: no-wrap;
+      }
+      .nsew .btnDiv {
+        width: 50px;
+      }
+    `
+  ],
+  template: `
+    <div class="nsew">
+      <div class="btnRow">
+        <div class="btnDiv"></div>
+        <div class="btnDiv">
+          <button
+            mat-mini-fab
+            color="primary"
+            [disabled]="disabled"
+            (click)="action(0)"
+          >
+            <mat-icon>arrow_upward</mat-icon>
+          </button>
+        </div>
+        <div class="btnDiv"></div>
+      </div>
+
+      <div class="btnRow">
+        <div class="btnDiv">
+          <button
+            mat-mini-fab
+            color="primary"
+            [disabled]="disabled"
+            (click)="action(270)"
+          >
+            <mat-icon>arrow_back</mat-icon>
+          </button>
+        </div>
+        <div class="btnDiv"></div>
+        <div class="btnDiv">
+          <button
+            mat-mini-fab
+            color="primary"
+            [disabled]="disabled"
+            (click)="action(90)"
+          >
+            <mat-icon>arrow_forward</mat-icon>
+          </button>
+        </div>
+      </div>
+
+      <div class="btnRow">
+        <div class="btnDiv"></div>
+        <div class="btnDiv">
+          <button
+            mat-mini-fab
+            color="primary"
+            [disabled]="disabled"
+            (click)="action(180)"
+          >
+            <mat-icon>arrow_downward</mat-icon>
+          </button>
+        </div>
+        <div class="btnDiv"></div>
+      </div>
+    </div>
+  `
+})
+export class NSEWButtonsComponent {
+  @Input() disabled: boolean;
+  @Output() direction: EventEmitter<number> = new EventEmitter();
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  action(value: number) {
+    this.direction.emit(value);
+  }
+}

src/app/modules/alarms/components/timer-button.component.ts

@@ -45,7 +45,7 @@ import { MatIconModule } from '@angular/material/icon';
   `
 })
 export class TimerButtonComponent {
-  @Input() period = 5000; // timeout period in millisecondss
+  @Input() period = 5000; // timeout period in milliseconds
   @Input() label: string;
   @Input() icon: string;
   @Input() cancelledLabel: string;

src/app/modules/map/components/popover/popover.component.ts

@@ -64,12 +64,12 @@ features: Array<any> - list of features
     <ap-popover [title]="title" [canClose]="canClose" (closed)="handleClose()">
       <mat-nav-list>
         <mat-list-item *ngFor="let f of features" (click)="handleSelect(f)">
-            <mat-icon
-              [color]="f.text && f.text.indexOf('self') != -1 ? 'warn' : ''"
-            >
-              {{ f.icon }}
-            </mat-icon>
-            {{ f.text }}
+          <mat-icon
+            [color]="f.text && f.text.indexOf('self') != -1 ? 'warn' : ''"
+          >
+            {{ f.icon }}
+          </mat-icon>
+          {{ f.text }}
         </mat-list-item>
       </mat-nav-list>
     </ap-popover>

src/app/modules/map/fb-map.component.html

@@ -559,7 +559,7 @@
       (click)="onContextMenuAction('anchor', item)"
       (contextmenu)="$event.preventDefault()"
     >
-      <mat-icon><i class="fi-anchor"></i></mat-icon>
+      <mat-icon>anchor</mat-icon>
       Anchor Watch
     </button>
   </ng-template>