166 lines
4.0 KiB
JavaScript
Executable File
166 lines
4.0 KiB
JavaScript
Executable File
import { radToDeg } from "./Helpers.js";
|
|
|
|
export class Equipment {
|
|
|
|
constructor(equipmentNr, height, lat, lon, participantId) {
|
|
this.equipmentNr = equipmentNr;
|
|
this.height = height;
|
|
this.lat = lat;
|
|
this.lon = lon;
|
|
this.participantId = participantId;
|
|
this.partyId;
|
|
this.typeId;
|
|
this.partyColor;
|
|
this.designator;
|
|
this.tacticalIdentifier;
|
|
this.marker;
|
|
this.tracked = false;
|
|
this.visible = false;
|
|
}
|
|
|
|
updatePosition(height, lat, lon){
|
|
this.height = height;
|
|
this.lat = lat;
|
|
this.lon = lon;
|
|
}
|
|
|
|
toggleMarkerVisibility(map) {
|
|
if (!this.visible) {
|
|
this.marker.addTo(map);
|
|
this.visible = true;
|
|
document.getElementById(`icon-${this.equipmentNr}`).src = `./res/eye.svg`;
|
|
} else {
|
|
this.marker.remove();
|
|
this.visible = false;
|
|
document.getElementById(`icon-${this.equipmentNr}`).src = `./res/eye-slash.svg`;
|
|
}
|
|
}
|
|
|
|
focusMarker(map){
|
|
if (!this.visible) {
|
|
this.toggleMarkerVisibility(map);
|
|
}
|
|
map.panTo([this.getLatDeg(), this.getLonDeg()]);
|
|
}
|
|
|
|
|
|
followMarker(map){
|
|
if (!this.visible) {
|
|
this.toggleMarkerVisibility(map);
|
|
}
|
|
map.panTo([this.getLatDeg(), this.getLonDeg()]);
|
|
}
|
|
|
|
//Setter
|
|
setHeight(height) {
|
|
this.height = height;
|
|
}
|
|
|
|
setLat(lat) {
|
|
this.lat = lat;
|
|
}
|
|
|
|
setLon(lon) {
|
|
this.lon = lon;
|
|
}
|
|
|
|
setPartyId(partyId) {
|
|
this.partyId = partyId;
|
|
}
|
|
|
|
setTypeId(typeId){
|
|
this.typeId = typeId;
|
|
}
|
|
|
|
setPartyColor(partyColor) {
|
|
this.partyColor = partyColor;
|
|
}
|
|
|
|
setDesignator(designator) {
|
|
this.designator = designator;
|
|
}
|
|
|
|
setTatcicalIdentifier (tacticalIdentifier) {
|
|
this.tacticalIdentifier = tacticalIdentifier;
|
|
}
|
|
|
|
resetLatLng(followedEquipment) {
|
|
this.marker.setLatLng([this.getLatDeg(),this.getLonDeg()]);
|
|
if (followedEquipment == this.equipmentNr) {
|
|
document.getElementById('infoOverlay').innerHTML = "Equipment <b>" + this.equipmentNr + "</b> Lat: " + this.getLatDeg().toFixed(5) + " Lon: " + this.getLonDeg().toFixed(5) + " Height: " + this.height.toFixed(2);
|
|
}
|
|
}
|
|
|
|
setMarker(){
|
|
|
|
// Marker
|
|
|
|
const svgIcon = L.divIcon({
|
|
html: `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path id=svgIcon-${this.equipmentNr} transform="rotate(-45 25 25)" style="fill:${this.partyColor};stroke:#000;stroke-miterlimit:10; stroke-width:1" d="M7.7 7.7h34.6v34.6H9.7z"/></svg>`,
|
|
className: "",
|
|
iconSize: [34, 34],
|
|
iconAnchor: [17, 4],
|
|
});
|
|
|
|
this.marker = L.marker([this.getLatDeg(), this.getLonDeg()], {
|
|
icon: svgIcon
|
|
});
|
|
|
|
this.marker.bindTooltip(this.tacticalIdentifier, {
|
|
className: 'tooltip',
|
|
permanent: true,
|
|
direction : 'right',
|
|
offset: [0, 0]
|
|
});
|
|
|
|
this.marker.bindTooltip(this.designator, {
|
|
className: 'tooltip',
|
|
permanent: true,
|
|
direction : 'left',
|
|
offset: [0, 0]
|
|
});
|
|
|
|
this.marker.bindTooltip(this.designator + " | " + this.tacticalIdentifier, {
|
|
className: 'tooltip',
|
|
permanent: true,
|
|
direction : 'top',
|
|
offset: [0, -6]
|
|
});
|
|
|
|
}
|
|
//Getter
|
|
getHeight(){
|
|
return this.height;
|
|
}
|
|
|
|
getLat() {
|
|
return this.lat
|
|
}
|
|
|
|
getLon() {
|
|
return this.lon;
|
|
}
|
|
|
|
getPartyId() {
|
|
return this.partyId;
|
|
}
|
|
|
|
getTypeId() {
|
|
return this.typeId;
|
|
}
|
|
|
|
getLatDeg() {
|
|
return radToDeg(this.lat); //Lat in Gradmass
|
|
}
|
|
|
|
getLonDeg() {
|
|
return radToDeg(this.lon); //Lon in Gradmass
|
|
}
|
|
getMarker() {
|
|
return this.marker;
|
|
}
|
|
}
|
|
|
|
|