Skip to content

Commit

Permalink
Meteo popover to display wind & temperature values.
Browse files Browse the repository at this point in the history
  • Loading branch information
@panaaj
panaaj committed Jun 14, 2024
1 parent c7a9c28 commit becc499
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 51 deletions.
30 changes: 28 additions & 2 deletions src/app/modules/map/components/popover/popover.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ import {
ChangeDetectionStrategy
} from '@angular/core';
import { AppInfo } from 'src/app/app.info';
import { SKAtoN, SKAircraft } from 'src/app/modules';
import { SKAircraft, SKMeteo } from 'src/app/modules';
import { SKNotification } from 'src/app/types';
import { Convert } from 'src/app/lib/convert';

/*********** Popover ***************
title: string - title text,
Expand Down Expand Up @@ -234,6 +235,27 @@ aton: SKAtoN - aton data
{{ timeLastUpdate }} {{ timeAgo }}
</div>
</div>
@if(isMeteo && aton.temperature !== undefined) {
<div style="display:flex;">
<div style="font-weight:bold;">Temperature:</div>
<div style="flex: 1 1 auto;text-align:right;">
{{ this.app.formatValueForDisplay(aton.temperature, 'K') }}
</div>
</div>
} @if(isMeteo && aton.tws !== undefined && aton.twd !== undefined) {
<div style="display:flex;flex-wrap:no-wrap;">
<div style="font-weight:bold;">Wind:</div>
<div style="width:150px;">
<ap-compass
[windtrue]="convert.radiansToDegrees(aton.twd)"
[heading]="convert.radiansToDegrees(aton.twd)"
[speed]="app.formatSpeed(aton.tws)"
[speedunits]="app.formattedSpeedUnits"
>
</ap-compass>
</div>
</div>
}
<div style="display:flex;">
<div style="flex:1 1 auto;">&nbsp;</div>
<div class="popover-action-button">
Expand All @@ -253,20 +275,24 @@ aton: SKAtoN - aton data
})
export class AtoNPopoverComponent {
@Input() title: string;
@Input() aton: SKAtoN;
@Input() aton: SKMeteo;
@Input() canClose: boolean;
@Output() info: EventEmitter<string> = new EventEmitter();
@Output() closed: EventEmitter<void> = new EventEmitter();

_title: string;
timeLastUpdate: string;
timeAgo: string; // last update in minutes ago
protected convert = Convert;
isMeteo: boolean;

constructor(public app: AppInfo) {}

ngOnInit() {
if (!this.aton) {
this.handleClose();
} else {
this.isMeteo = this.aton.id.includes('meteo');
}
}

Expand Down
3 changes: 3 additions & 0 deletions src/app/modules/skresources/resource-classes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,9 @@ export class SKAircraft extends AISBase {
// ** Meteo / weather class **
export class SKMeteo extends SKAtoN {
callsign: string;
twd: number;
tws: number;
temperature: number;
constructor() {
super();
}
Expand Down
146 changes: 97 additions & 49 deletions src/app/modules/skresources/resource-dialogs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
SKRoute
} from './resource-classes';
import { SKResourceSet } from './sets/resource-set';
import { GeoUtils } from 'src/app/lib/geoutils';

/********* ResourceDialog **********
data: {
Expand Down Expand Up @@ -793,33 +794,55 @@ export class AircraftPropertiesModal {
</div>
<div style="flex: 1 1 auto;">
<div style="display:flex;">
<div class="key-label">Lat:</div>
<div class="key-label">Name:</div>
<div
style="flex: 1 1 auto;"
[innerText]="
pt[1]
| coords : app.config.selections.positionFormat : true
"
[innerText]="pointMeta[i].name"
></div>
</div>
@if(pointMeta[i].description) {
<div style="display:flex;">
<div class="key-label">Lon:</div>
<div class="key-label">Desc:</div>
<div
style="flex: 1 1 auto;"
[innerText]="
pt[0] | coords : app.config.selections.positionFormat
"
[innerText]="pointMeta[i].description"
></div>
</div>
@if(i < pointNames.length) {
}
<div style="display:flex;">
<div class="key-label">
<mat-icon [color]="i === 0 ? 'primary' : ''"
>square_foot</mat-icon
>
</div>
<div style="flex: 1 1 auto;">
<span [innerText]="legs[i].bearing"></span>
&nbsp;
<span [innerText]="legs[i].distance"></span>
</div>
</div>
<!--
<div style="display:flex;">
<div class="key-label">Name:</div>
<div class="key-label"></div>
<div
style="flex: 1 1 auto;"
[innerText]="pointNames[i]"
></div>
style="flex: 1 1 auto;">
<span
[innerText]="
pt[1]
| coords : app.config.selections.positionFormat : true
"
></span>
&nbsp;
<span
[innerText]="
pt[0] | coords : app.config.selections.positionFormat
"
></span>
</div>
</div>
}
-->
</div>
<div cdkDragHandle matTooltip="Drag to re-order points">
@if(data.type === 'route') {
Expand Down Expand Up @@ -863,11 +886,12 @@ export class AircraftPropertiesModal {
]
})
export class ActiveResourcePropertiesModal implements OnInit {
public points: Array<Position> = [];
public pointNames: Array<string> = [];
public selIndex = -1;
public clearButtonText = 'Clear';
public showClearButton = false;
protected points: Array<Position> = [];
protected pointMeta: Array<{ name: string; description: string }> = [];
protected legs: { bearing: string; distance: string }[] = [];
protected selIndex = -1;
protected clearButtonText = 'Clear';
protected showClearButton = false;

constructor(
public app: AppInfo,
Expand All @@ -891,6 +915,7 @@ export class ActiveResourcePropertiesModal implements OnInit {
this.points = [].concat(
this.data.resource[1].feature.geometry.coordinates
);
this.legs = this.getLegs();

this.data.title = this.data.resource[1].name
? `${this.data.resource[1].name} Points`
Expand All @@ -900,35 +925,61 @@ export class ActiveResourcePropertiesModal implements OnInit {
this.selIndex = this.app.data.navData.pointIndex;
this.showClearButton = true;
}
if (
this.data.resource[1].feature.properties.coordinatesMeta &&
Array.isArray(
this.data.resource[1].feature.properties.coordinatesMeta
)
) {
this.pointNames = this.getPointNames(
this.data.resource[1].feature.properties.coordinatesMeta
);
}
this.pointMeta = this.getPointMeta();
}
}
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
getPointNames(pointsMeta: any[]): string[] {
return pointsMeta.map((pt) => {
if (pt.href) {
const id = pt.href.split('/').slice(-1);
const wpt = this.app.data.waypoints.filter((i) => {
return i[0] === id[0] ? true : false;
});
return wpt.length !== 0 ? `* ${wpt[0][1].name}` : '!wpt reference!';
} else {
return pt.name ?? '';
}
getLegs() {
const pos = this.app.data.vessels.self.position;
return GeoUtils.routeLegs(this.points, pos).map((l) => {
return {
bearing: this.app.formatValueForDisplay(l.bearing, 'deg'),
distance: this.app.formatValueForDisplay(l.distance, 'm')
};
});
}

getPointMeta() {
if (
this.data.resource[1].feature.properties.coordinatesMeta &&
Array.isArray(this.data.resource[1].feature.properties.coordinatesMeta)
) {
const pointsMeta =
this.data.resource[1].feature.properties.coordinatesMeta;
let idx = 0;
return pointsMeta.map((pt) => {
idx++;
if (pt.href) {
const id = pt.href.split('/').slice(-1);
const wpt = this.data.skres.fromCache('waypoints', id[0]);
return wpt
? {
name: `* ${wpt[1].name}`,
description: `* ${wpt[1].description}`
}
: {
name: '!wpt reference!',
description: ''
};
} else {
return {
name: pt.name ?? `RtePt-${('000' + String(idx)).slice(-3)}`,
description: pt.description ?? ``
};
}
});
} else {
let idx = 0;
return this.points.map(() => {
return {
name: `RtePt-${('000' + String(++idx)).slice(-3)}`,
description: ''
};
});
}
}

selectPoint(idx: number) {
if (this.points.length < 2 || this.selIndex < 0) {
return;
Expand All @@ -943,19 +994,16 @@ export class ActiveResourcePropertiesModal implements OnInit {
if (this.data.type === 'route') {
const selPosition = this.points[this.selIndex];
moveItemInArray(this.points, e.previousIndex, e.currentIndex);
if (
this.data.type === 'route' &&
this.data.resource[1].feature.properties.coordinatesMeta
) {
this.legs = this.getLegs();
if (this.data.resource[1].feature.properties.coordinatesMeta) {
moveItemInArray(
this.data.resource[1].feature.properties.coordinatesMeta,
e.previousIndex,
e.currentIndex
);
this.pointNames = this.getPointNames(
this.data.resource[1].feature.properties.coordinatesMeta
);
}
this.pointMeta = this.getPointMeta();

this.updateFlag(selPosition);
this.data.skres.updateRouteCoords(
this.data.resource[0],
Expand Down

0 comments on commit becc499

Please sign in to comment.