weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(mouse info panel): added selected unit coordinates displaying

Browse Source 
The coordinates are only shown if one unit has been selected.
This commit is contained in:
MarcoJayUsai 2024-11-11 18:56:29 +01:00
parent 5cd566c7ca
commit 5e5ee30b8f
3 changed files with 120 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/server/public/stylesheets/panels/mouseinfo.css
View File

@ -107,4 +107,23 @@
#coordinates-tool[data-location-system="MGRS"] [data-location-system="MGRS"],
#coordinates-tool[data-location-system="UTM"] [data-location-system="UTM"] {
display:flex;
}
/* Unit Coordinates */
#unit-coordinates .elevation::after {
content: attr(data-value)
}
#unit-coordinates[data-location-system] [data-location-system] {
display:none;
}
#unit-coordinates[data-location-system="LatLng"] [data-location-system="LatLng"],
#unit-coordinates[data-location-system="MGRS"] [data-location-system="MGRS"],
#unit-coordinates[data-location-system="UTM"] [data-location-system="UTM"] {
display:flex;
}
#unit-coordinates-title {
font-size: 10px;
}

37
frontend/server/views/panels/mouseinfo.ejs
View File

@ -60,4 +60,41 @@
</div>
</div>
<span id="unit-coordinates-title" class="hide">Selected Unit Coordinates:</span>
<div id="unit-coordinates" class="mouse-tool" data-location-system="LatLng">
<div class="mouse-tool-item" data-location-system="MGRS">
<div id="ref-unit-position-mgrs"></div>
<div id="unit-position-mgrs" class="coordinates"></div>
</div>
<div class="mouse-tool-item" data-location-system="LatLng">
<div id="ref-unit-position-latitude" data-location-system="LatLng"></div>
<div id="unit-position-latitude" class="coordinates" data-location-system="LatLng"></div>
</div>
<div class="mouse-tool-item" data-location-system="LatLng">
<div id="ref-unit-position-longitude" data-location-system="LatLng"></div>
<div id="unit-position-longitude" class="coordinates" data-location-system="LatLng"></div>
</div>
<div class="mouse-tool-item" data-location-system="UTM">
<div id="ref-unit-position-utm-northing" data-location-system="UTM"></div>
<div id="unit-position-utm-northing" class="coordinates" data-location-system="UTM"></div>
</div>
<div class="mouse-tool-item" data-location-system="UTM">
<div id="ref-unit-position-utm-easting" data-location-system="UTM"></div>
<div id="unit-position-utm-easting" class="coordinates" data-location-system="UTM"></div>
</div>
<div>
<div class="mouse-tool-item">
<div id="ref-unit-position-elevation" data-label="H"></div>
<div id="unit-position-elevation" class="elevation" data-value="---"></div>
</div>
</div>
</div>
</div>

66
frontend/website/src/panels/mouseinfopanel.ts
View File

@ -5,9 +5,11 @@ import { Unit } from "../unit/unit";
import { Panel } from "./panel";
import formatcoords from "formatcoords";
import { MGRS_PRECISION_100M, MGRS_PRECISION_10KM, MGRS_PRECISION_10M, MGRS_PRECISION_1KM, MGRS_PRECISION_1M } from "../constants/constants";
import { log } from "console";
export class MouseInfoPanel extends Panel {
#coordinatesElement:HTMLElement;
#unitCoordinatesElement:HTMLElement;
#locationSystems = [ "LatLng", "MGRS", "UTM" ];
#measureMarker: Marker;
#measurePoint: LatLng | null = null;
@ -18,6 +20,9 @@ export class MouseInfoPanel extends Panel {
#selectedMGRSPrecisionIndex = 3;
#selectedLocationSystemIndex = 0;
#elevationRequest: XMLHttpRequest | null = null;
#unitElevationRequest: XMLHttpRequest | null = null;
#unitElevation: any = null;
constructor(ID: string) {
super( ID );
@ -38,6 +43,7 @@ export class MouseInfoPanel extends Panel {
document.addEventListener('clearSelection', () => this.#update());
this.#coordinatesElement = <HTMLElement>this.getElement().querySelector( '#coordinates-tool' );
this.#unitCoordinatesElement = <HTMLElement>this.getElement().querySelector( '#unit-coordinates' );
this.#coordinatesElement.addEventListener( "click", ( ev:MouseEvent ) => {
this.#changeLocationSystem();
@ -79,9 +85,18 @@ export class MouseInfoPanel extends Panel {
const mousePosition = getApp().getMap().getMouseCoordinates();
var selectedUnitPosition = null;
var selectedUnits = getApp().getUnitsManager().getSelectedUnits();
if (selectedUnits && selectedUnits.length == 1)
if (selectedUnits && selectedUnits.length == 1) {
this.getElement().querySelector(`#unit-coordinates`)?.classList.remove('hide');
this.getElement().querySelector(`#unit-coordinates-title`)?.classList.remove('hide');
selectedUnitPosition = new LatLng(selectedUnits[0].getPosition().lat, selectedUnits[0].getPosition().lng);
} else {
selectedUnitPosition = null;
this.#unitElevation = null;
this.getElement().querySelector(`#unit-coordinates`)?.classList.add('hide');
this.getElement().querySelector(`#unit-coordinates-title`)?.classList.add('hide');
}
/* Draw measures from selected unit, from pin location, and from bullseyes */
this.#drawMeasure("ref-measure-position", "measure-position", this.#measurePoint, mousePosition);
@ -110,6 +125,24 @@ export class MouseInfoPanel extends Panel {
this.#drawCoordinates("ref-mouse-position-longitude", "mouse-position-longitude", coordString.split(" ")[1]);
}
/* Draw selected unit coordinates */
if (selectedUnitPosition) {
var unitCoords = formatcoords(selectedUnitPosition.lat, selectedUnitPosition.lng);
var unitCoordString = unitCoords.format('XDDMMss', {decimalPlaces: 4});
if ( this.#getLocationSystem() === "MGRS" ) {
const mgrs = <MGRS>latLngToMGRS( selectedUnitPosition.lat, selectedUnitPosition.lng, this.#MGRSPrecisions[ this.#selectedMGRSPrecisionIndex ] );
this.#drawCoordinates("ref-unit-position-mgrs", "unit-position-mgrs", "M"+mgrs.groups.join(" ") );
} else if ( this.#getLocationSystem() === "UTM" ) {
const utm = latLngToUTM( selectedUnitPosition.lat, selectedUnitPosition.lng );
this.#drawCoordinates("ref-unit-position-utm-northing", "unit-position-utm-northing", "N"+utm.northing);
this.#drawCoordinates("ref-unit-position-utm-easting", "unit-position-utm-easting", "E"+utm.easting);
} else {
this.#drawCoordinates("ref-unit-position-latitude", "unit-position-latitude", unitCoordString.split(" ")[0]);
this.#drawCoordinates("ref-unit-position-longitude", "unit-position-longitude", unitCoordString.split(" ")[1]);
}
}
/* Get the ground elevation from the server endpoint */
if (this.#elevationRequest == null) {
this.#elevationRequest = new XMLHttpRequest();
@ -133,6 +166,35 @@ export class MouseInfoPanel extends Panel {
this.#elevationRequest.onabort = () => {this.#elevationRequest = null;}
this.#elevationRequest.send();
}
/* Get the ground elevation from the server endpoint for the unit */
if (this.#unitElevationRequest == null && this.#unitElevation == null && selectedUnitPosition !== null) {
this.#unitElevationRequest = new XMLHttpRequest();
this.#unitElevationRequest.open('GET', `api/elevation/${selectedUnitPosition.lat}/${selectedUnitPosition.lng}`, true);
this.#unitElevationRequest.timeout = 500; // ms
this.#unitElevationRequest.responseType = 'json';
this.#unitElevationRequest.onload = () => {
var status = this.#unitElevationRequest?.status;
if (status === 200) {
this.#unitElevation = this.#unitElevationRequest?.response;
const el = this.getElement().querySelector(`#unit-position-elevation`) as HTMLElement;
try {
el.dataset.value = `${Math.floor(mToFt(parseFloat(this.#unitElevation)))} ft`;
} catch {
el.dataset.value = `N/A`;
}
} else {
this.#unitElevation = null;
}
this.#unitElevationRequest = null;
};
this.#unitElevationRequest.ontimeout = () => {this.#unitElevationRequest = null;}
this.#unitElevationRequest.onerror = () => {this.#unitElevationRequest = null;}
this.#unitElevationRequest.onabort = () => {this.#unitElevationRequest = null;}
this.#unitElevationRequest.send();
}
}
#onMapClick(e: any) {
@ -273,10 +335,10 @@ export class MouseInfoPanel extends Panel {
}
this.#coordinatesElement.setAttribute( "data-location-system", this.#getLocationSystem() );
this.#unitCoordinatesElement.setAttribute( "data-location-system", this.#getLocationSystem() );
this.#update();
}
#getLocationSystem() {
const x = this.#locationSystems;
const y = this.#selectedLocationSystemIndex;