+
+
+ airplanemode_active
+
+
+ {{ data.title }}
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ styles: [
+ `
+ ._ap-aircraft {
+ font-family: arial;
+ min-width: 300px;
+ }
+ ._ap-aircraft .key-label {
+ width: 150px;
+ font-weight: bold;
+ }
+ `
+ ]
+})
+export class AircraftPropertiesModal {
+ protected showProperties = true;
+ protected properties: { [key: string]: string | number | null };
+
+ constructor(
+ private sk: SignalKClient,
+ private app: AppInfo,
+ public modalRef: MatBottomSheetRef
+
+
+
+ Name:
+ {{ data.target.name }}
+
+
+ MMSI:
+ {{ data.target.mmsi }}
+
+
+
+ @if(showProperties) {
+ Call sign:
+ {{ data.target.callsign }}
+
+
+
+ directions_boat
+
+
+ {{ data.title }}
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ styles: [
+ `
+ ._ap-ais {
+ font-family: arial;
+ }
+ ._ap-ais .key-label {
+ width: 150px;
+ font-weight: bold;
+ }
+ `
+ ]
+})
+export class AISPropertiesModal implements OnInit {
+ public vInfo = {
+ name: null,
+ mmsi: null,
+ callsign: null,
+ length: null,
+ beam: null,
+ draft: null,
+ height: null,
+ shipType: null,
+ destination: null,
+ eta: null,
+ state: null,
+ flag: null,
+ port: null
+ };
+
+ constructor(
+ public app: AppInfo,
+ private sk: SignalKClient,
+ public modalRef: MatBottomSheetRef
+
+
+
+ Name:
+ {{ vInfo.name }}
+
+
+ @if(vInfo.shipType) {
+ MMSI:
+ {{ vInfo.mmsi }}
+
+
+ } @if(vInfo.flag) {
+ Type:
+ {{ vInfo.shipType }}
+
+
+ } @if(vInfo.port) {
+ Flag:
+ {{ vInfo.flag }}
+
+
+ } @if(vInfo.callsign) {
+ Port:
+ {{ vInfo.port }}
+
+
+ } @if(vInfo.length) {
+ Call sign:
+ {{ vInfo.callsign }}
+
+
+ } @if(vInfo.draft) {
+ Dimensions:
+
+ {{ vInfo.length }} x {{ vInfo.beam }}
+
+
+
+ } @if(vInfo.height) {
+ Draft:
+ {{ vInfo.draft }}
+
+
+ } @if(vInfo.state) {
+ Height:
+ {{ vInfo.height }}
+
+
+ } @if(vInfo.destination) {
+ State:
+ {{ vInfo.state }}
+
+
+ } @if(vInfo.eta) {
+ Destination:
+ {{ vInfo.destination }}
+
+
+ }
+ ETA:
+
+ {{ vInfo.eta.toLocaleString() }}
+
+
+
diff --git a/src/app/modules/skresources/lists/aislist.ts b/src/app/modules/skresources/components/ais/aislist.ts
similarity index 56%
rename from src/app/modules/skresources/lists/aislist.ts
rename to src/app/modules/skresources/components/ais/aislist.ts
index 3bbe2e4b3..bf998a796 100644
--- a/src/app/modules/skresources/lists/aislist.ts
+++ b/src/app/modules/skresources/components/ais/aislist.ts
@@ -5,6 +5,17 @@ import {
EventEmitter,
ChangeDetectionStrategy
} from '@angular/core';
+
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+
import { AppInfo } from 'src/app/app.info';
import { SKVessel } from 'src/app/modules';
import { Position } from 'src/app/types';
@@ -12,9 +23,21 @@ import { Position } from 'src/app/types';
//** AIS Dialog **
@Component({
selector: 'ais-list',
+ standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './aislist.html',
- styleUrls: ['./resourcelist.css']
+ styleUrls: ['../resourcelist.css'],
+ imports: [
+ MatTooltipModule,
+ MatIconModule,
+ MatCardModule,
+ MatCheckboxModule,
+ MatButtonModule,
+ FormsModule,
+ MatInputModule,
+ ScrollingModule,
+ MatSlideToggleModule
+ ]
})
export class AISListComponent {
@Input() aisTargets: Map
+ @if (app.config.selections.aisFilterByShipType) {
+
+
+ @for (i of shipTypes; track i.id) {
+
+
+
+ } @else {
+ }
+
+ }
+
+ ![]()
+
+
+ {{i.description}}
+
+ @if(i.id !==0){ ({{i.id}}-{{i.id + 9}}) }
+
+
+
+
+
+
+
+
+
+
+ {{ data.icon }}
+
+
+ {{ data.title }}
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ styles: [
+ `
+ ._ap-aton {
+ font-family: arial;
+ min-width: 300px;
+ }
+ ._ap-aton .key-label {
+ width: 150px;
+ font-weight: bold;
+ }
+ `
+ ]
+})
+export class AtoNPropertiesModal implements OnInit {
+ protected showProperties = true;
+ protected properties: { [key: string]: string | number | null };
+
+ constructor(
+ private sk: SignalKClient,
+ private app: AppInfo,
+ public modalRef: MatBottomSheetRef
+
+
+
+ Name:
+ {{ data.target.name }}
+
+
+ MMSI:
+ {{ data.target.mmsi }}
+
+
+
+ @if(showProperties) {
+ Type:
+ {{ data.target.type.name }}
+
+
+
+ Chart Properties
+
+
+
+
+
+
+
+ `,
+ styles: [
+ `
+ ._ap-chartinfo {
+ font-family: arial;
+ min-width: 300px;
+ }
+ .ap-confirm-icon {
+ min-width: 35px;
+ max-width: 35px;
+ color: darkorange;
+ text-align: left;
+ }
+
+ ._ap-chartinfo .key-label {
+ width: 150px;
+ font-weight: 500;
+ }
+
+ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px),
+ only screen and (min-width: 800px) {
+ .ap-confirm-icon {
+ min-width: 25%;
+ max-width: 25%;
+ }
+ }
+ `
+ ]
+})
+export class ChartPropertiesDialog {
+ public icon: string;
+
+ constructor(
+ public app: AppInfo,
+ public dialogRef: MatDialogRef
+
+
+
+ Name:
+ {{ data['name'] }}
+
+
+ Description:
+ {{ data['description'] }}
+
+
+ Scale:
+ {{ data['scale'] }}
+
+
+ @if(data['bounds']) {
+ Zoom:
+
+
+
+ Min:
+ {{ data['minZoom'] }},
+ Max:
+ {{ data['maxZoom'] }}
+
+
+
+ }
+ Bounds:
+
+
+
+
+
+ + +
+ + + +
+
+
+ + +
+ + + +
+
+ Format:
+ {{ data['format'] }}
+
+
+ Type:
+
+ {{ data['type'] }}
+
+
+
+ Layers:
+ {{ data['layers'] }}
+
+
+ URL:
+
+ {{ data['url'] }}
+
+ Charts:
-
-
-