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(map): selected unit coordinates panel moved to top; coords are now copy-able

Browse Source
This commit is contained in:
MarcoJayUsai 2024-11-16 18:33:59 +01:00
parent 5e5ee30b8f
commit e273203629
3 changed files with 145 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -124,6 +124,53 @@
display:flex;
}
#unit-coordinates-title {
#unit-coordinates-container {
box-sizing: border-box;
background-color: var(--background-steel);
border-radius: var(--border-radius-sm);
box-shadow: 0px 2px 5px #000A;
padding: 10px;
position: absolute;
top: -48px;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0px;
transition: all 200ms ease-in-out;
}
#unit-coordinates-container[data-open="true"] {
gap: 4px;
top: -140px;
}
#unit-coordinates-container > #unit-coordinates {
width: 170px;
height: 0;
padding: 0 6px;
overflow: hidden;
flex-grow: 1;
transition: all 200ms ease-in-out;
}
#unit-coordinates-container[data-open="true"] > #unit-coordinates {
height: 90px;
padding: 6px;
}
#unit-coordinates-container > #unit-coordinates-toggle {
font-size: 10px;
flex-shrink: 1;
cursor: pointer;
}
#unit-coordinates-container > #unit-coordinates-toggle> #unit-coordinates-toggle-icon::after {
margin-top: 8px;
font-size: 12px;
content: "↑";
}
#unit-coordinates-container[data-open="true"] > #unit-coordinates-toggle > #unit-coordinates-toggle-icon::after {
content: "↓";
}

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

@ -60,40 +60,44 @@
</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 id="unit-coordinates-container">
<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 copyable"></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 copyable" 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 copyable" 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 copyable" 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 copyable" 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 copyable" data-value="---"></div>
</div>
</div>
</div>
<div id="unit-coordinates-toggle" data-open="false">
Unit Coordinates <span id="unit-coordinates-toggle-icon"></span>
</div>
</div>

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

@ -22,6 +22,7 @@ export class MouseInfoPanel extends Panel {
#elevationRequest: XMLHttpRequest | null = null;
#unitElevationRequest: XMLHttpRequest | null = null;
#unitElevation: any = null;
#updateInterval: any = null;
constructor(ID: string) {
@ -43,7 +44,6 @@ 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,6 +79,63 @@ export class MouseInfoPanel extends Panel {
},
"code": "Period"
});
/* Selected unit coordinates panel interaction */
this.#unitCoordinatesElement = <HTMLElement>this.getElement().querySelector( '#unit-coordinates' );
const unitCoordsToggleEl = <HTMLElement>this.getElement().querySelector('#unit-coordinates-toggle');
const unitCoordsContainer = <HTMLElement>this.getElement().querySelector('#unit-coordinates-container');
unitCoordsToggleEl.addEventListener("click", (ev: MouseEvent) => {
if (unitCoordsContainer.getAttribute('data-open') === 'true') {
unitCoordsContainer.setAttribute('data-open', 'false');
} else {
unitCoordsContainer.setAttribute('data-open', 'true');
}
});
/* Let's update selected unit coordinates every second, useful for moving units */
this.#updateInterval = setInterval(() => {
var selectedUnits = getApp().getUnitsManager().getSelectedUnits();
if (selectedUnits && selectedUnits.length == 1) {
this.#update()
} else {
}
}, 1000);
/* Let's make coordinates copy-able */
this.#listenForCopyableElements();
}
#listenForCopyableElements() {
const copyableElements = document.getElementsByClassName('copyable');
for (const element of copyableElements) {
element.addEventListener('click', (ev) => {
if (!ev.target) return;
const el = ev.target as HTMLElement;
let text = null;
if (el.innerText !== "") {
text = el.innerText;
}
if (el.getAttribute('data-value')) {
text = el.getAttribute('data-value');
}
if (!text) return;
navigator.clipboard.writeText(text)
.then(() => {
console.log('Testo copiato negli appunti!');
})
.catch(err => {
console.error('Errore nel copiare:', err);
});
});
}
}
#update() {
@ -88,14 +145,12 @@ export class MouseInfoPanel extends Panel {
var selectedUnits = getApp().getUnitsManager().getSelectedUnits();
if (selectedUnits && selectedUnits.length == 1) {
this.getElement().querySelector(`#unit-coordinates`)?.classList.remove('hide');
this.getElement().querySelector(`#unit-coordinates-title`)?.classList.remove('hide');
this.getElement().querySelector(`#unit-coordinates-container`)?.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');
this.getElement().querySelector(`#unit-coordinates-container`)?.classList.add('hide');
}
/* Draw measures from selected unit, from pin location, and from bullseyes */