Add button to center vessel in the Vessels List

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG: Freeboard
 
+### v2.2.0
+
+- **Added**: Ability to center a vessel in the Vessels List.
+
 ### v2.1.0
 
 - **Added**: Ability to limit map zoom to min / max of displayed charts.

src/app/app.component.html

@@ -510,6 +510,7 @@
             (properties)="featureProperties({ id: $event, type: 'ais' })"
             (closed)="displayLeftMenu()"
             (focusVessel)="switchActiveVessel($event)"
+            (pan)="centerResource($event.center, $event.zoomLevel)"
           >
           </ais-list>
 

src/app/modules/skresources/lists/aislist.html

@@ -109,12 +109,20 @@
                 UNFOCUS
               </button>
             </div>
+            <button
+              mat-icon-button
+              color="primary"
+              [disabled]="app.config.map.moveMap"
+              (click)="emitCenter(r[1].position)"
+              matTooltip="Center Vessel"
+            >
+              <mat-icon>center_focus_strong</mat-icon>
+            </button>
             <div>
               <button
                 mat-button
                 (click)="itemProperties(r[0])"
                 matTooltip="Vessel Properties"
-                matTooltipPosition="right"
               >
                 <mat-icon color="primary">info_outline</mat-icon>
                 INFO

src/app/modules/skresources/lists/aislist.ts

@@ -7,6 +7,7 @@ import {
 } from '@angular/core';
 import { AppInfo } from 'src/app/app.info';
 import { SKVessel } from 'src/app/modules/skresources/resource-classes';
+import { Position } from 'src/app/lib/geoutils';
 
 //** AIS Dialog **
 @Component({
@@ -22,14 +23,16 @@ export class AISListComponent {
   @Output() closed: EventEmitter<void> = new EventEmitter();
   @Output() properties: EventEmitter<string> = new EventEmitter();
   @Output() focusVessel: EventEmitter<string> = new EventEmitter();
+  @Output() pan: EventEmitter<{ center: Position; zoomLevel: number }> =
+    new EventEmitter();
 
   aisAvailable = [];
   filterList = [];
   filterText = '';
   someSel = false;
   allSel = false;
 
-  constructor(private app: AppInfo) {}
+  constructor(public app: AppInfo) {}
 
   ngOnInit() {
     this.initItems();
@@ -130,4 +133,11 @@ export class AISListComponent {
   focus(id?: string) {
     this.focusVessel.emit(id);
   }
+
+  emitCenter(position: Position) {
+    this.pan.emit({
+      center: position,
+      zoomLevel: this.app.config.map.zoomLevel
+    });
+  }
 }