261 lines
8.6 KiB
JavaScript
261 lines
8.6 KiB
JavaScript
import importTemplate from "../../utils/importTemplate.js";
|
|
import inlinesvg from "../../utils/inlinesvg.js";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
patrolSpeed: 0,
|
|
frontRadarSpeed: 0,
|
|
frontRadarPlate: "",
|
|
rearRadarSpeed: 0,
|
|
rearRadarPlate: "",
|
|
location: {
|
|
street: "undefined",
|
|
heading: "N"
|
|
},
|
|
fwdMode: 'same',
|
|
bwdMode: 'same',
|
|
frontSpeedWarning: false,
|
|
rearSpeedWarning: false,
|
|
frontAllowRadarSpeed: "",
|
|
frontLockedSpeed: false,
|
|
rearLockedSpeed: false,
|
|
lockedFrontVehicle: false,
|
|
lockedRearVehicle: false,
|
|
showFastActions: false,
|
|
radarPower: true,
|
|
keys: [],
|
|
frontXMIT: true,
|
|
rearXMIT: true,
|
|
|
|
};
|
|
},
|
|
components: {
|
|
inlinesvg
|
|
},
|
|
computed: {
|
|
...Vuex.mapState({
|
|
Locales: state => state.Locales,
|
|
isTabletActive: state => state.isTabletActive,
|
|
radarPosition: state => state.radarPosition,
|
|
radarFastActionsPosition: state => state.radarFastActionsPosition,
|
|
radarScale : state => state.radarScale,
|
|
}),
|
|
getRadarStyle() {
|
|
let scale = this.radarScale
|
|
if (this.radarPosition.left && this.radarPosition.top) {
|
|
|
|
return {
|
|
left: this.radarPosition.left + 'px',
|
|
top: this.radarPosition.top + 'px',
|
|
transform : `scale(${scale})`
|
|
}
|
|
}
|
|
|
|
return {
|
|
right: "2rem",
|
|
bottom: "0.5rem",
|
|
transform : `scale(${scale})`
|
|
|
|
}
|
|
},
|
|
getRadarFastActionsStyle() {
|
|
if (this.radarFastActionsPosition.left && this.radarFastActionsPosition.top) {
|
|
|
|
return {
|
|
left: this.radarFastActionsPosition.left + 'px',
|
|
top: this.radarFastActionsPosition.top + 'px',
|
|
|
|
}
|
|
}
|
|
|
|
return {
|
|
right: "2rem",
|
|
bottom: "25rem",
|
|
|
|
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
...Vuex.mapMutations({
|
|
|
|
setElementPosition: 'setElementPosition',
|
|
}),
|
|
PlaySound() {
|
|
let audio = new Audio(`./assets/btn.ogg`);
|
|
audio.play();
|
|
audio.volume = 0.2;
|
|
},
|
|
setShowFastActions(payload) {
|
|
this.showFastActions = payload
|
|
},
|
|
radarAction(type, payload) {
|
|
postNUI("radarAction", {
|
|
type,
|
|
payload
|
|
});
|
|
},
|
|
messageHandler(event) {
|
|
switch (event.data.action) {
|
|
case "SET_FRONT_RADAR_SPEED":
|
|
this.frontRadarSpeed = event.data.payload.toFixed(0);
|
|
break;
|
|
case "ADD_KEY":
|
|
this.keys.push(event.data.payload)
|
|
break
|
|
case "CLEAR_KEYS":
|
|
this.keys = []
|
|
break
|
|
case "TOGGLE_FAST_ACTIONS":
|
|
this.setShowFastActions(event.data.payload)
|
|
break
|
|
case "SET_PATROL_SPEED":
|
|
this.patrolSpeed = event.data.payload.toFixed(0);
|
|
break;
|
|
case "SET_FRONT_RADAR_PLATE":
|
|
this.frontRadarPlate = event.data.payload;
|
|
break;
|
|
case "SET_REAR_RADAR_PLATE":
|
|
this.rearRadarPlate = event.data.payload;
|
|
break;
|
|
case "SET_REAR_RADAR_SPEED":
|
|
this.rearRadarSpeed = event.data.payload.toFixed(0);
|
|
break;
|
|
case "SET_LOCATION":
|
|
this.location.street = event.data.payload.street;
|
|
this.location.heading = event.data.payload.heading;
|
|
break;
|
|
|
|
case "FORCE_UPDATE":
|
|
this.fwdMode = event.data.payload.fwdMode
|
|
this.bwdMode = event.data.payload.bwdMode
|
|
this.frontSpeedWarning = event.data.payload.frontSpeedWarning
|
|
this.rearSpeedWarning = event.data.payload.rearSpeedWarning
|
|
this.frontLockedSpeed = event.data.payload.frontLockedSpeed
|
|
this.rearLockedSpeed = event.data.payload.rearLockedSpeed
|
|
this.lockedFrontVehicle = event.data.payload.lockedFrontVehicle
|
|
this.lockedRearVehicle = event.data.payload.lockedRearVehicle
|
|
this.radarPower = event.data.payload.radarPower
|
|
this.frontXMIT = event.data.payload.frontXMIT
|
|
this.rearXMIT = event.data.payload.rearXMIT
|
|
break
|
|
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
FormatSpeed(speed) {
|
|
if (!speed) {
|
|
speed = 0
|
|
}
|
|
if (!isNaN(speed)) {
|
|
speed = speed.toString()
|
|
}
|
|
if (speed.length == 1) {
|
|
if (speed == 10) {
|
|
}
|
|
return `00<span>${speed[0]}</span>`;
|
|
}
|
|
if (speed.length == 2) {
|
|
if (speed == 10) {
|
|
}
|
|
return `0<span>${speed[0]}</span><span>${speed[1]}</span>`;
|
|
}
|
|
if (speed.length == 3) {
|
|
if (speed == 10) {
|
|
}
|
|
return `<span>${speed[0]}</span><span>${speed[1]}</span><span>${speed[2]}</span>`;
|
|
}
|
|
|
|
return "000";
|
|
},
|
|
updateFromRadarSpeedValue(val) {
|
|
if (val > 0 && val <= 300) {
|
|
this.frontAllowRadarSpeed = val;
|
|
} else {
|
|
this.frontAllowRadarSpeed = "";
|
|
}
|
|
},
|
|
draggableElement(classname, type) {
|
|
if (!$(classname).data('ui-draggable')) {
|
|
$(classname).draggable({
|
|
helper: "clone",
|
|
revertDuration: 0,
|
|
revert: false,
|
|
containment: "body",
|
|
scroll: false,
|
|
containment: "body",
|
|
start: (event, ui) => {
|
|
this.PlaySound()
|
|
},
|
|
drag: function (event, ui) {
|
|
|
|
},
|
|
stop: (event, ui) => {
|
|
let left = ui.position.left;
|
|
let top = ui.position.top;
|
|
|
|
this.setElementPosition({
|
|
type,
|
|
value: {
|
|
left,
|
|
top,
|
|
},
|
|
})
|
|
this.PlaySound()
|
|
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener("message", this.messageHandler);
|
|
if (this.isTabletActive) {
|
|
if (this.showFastActions) {
|
|
|
|
this.draggableElement('.radar-fast-actions', 'radarFastActionsPosition')
|
|
}
|
|
this.draggableElement('.radar', 'radarPosition')
|
|
}
|
|
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener("message", this.messageHandler);
|
|
},
|
|
watch: {
|
|
frontRadarSpeedValue(val) {
|
|
if (val > 0 && val <= 300) {
|
|
this.frontAllowRadarSpeed = val;
|
|
}
|
|
},
|
|
isTabletActive(val) {
|
|
if (val) {
|
|
if (this.showFastActions) {
|
|
this.draggableElement('.radar-fast-actions', 'radarFastActionsPosition')
|
|
}
|
|
this.draggableElement('.radar', 'radarPosition')
|
|
}else{
|
|
if ($('.radar-fast-actions').data('ui-draggable')) {
|
|
$('.radar-fast-actions').draggable('destroy');
|
|
}
|
|
if ($('.radar').data('ui-draggable')) {
|
|
$('.radar').draggable('destroy');
|
|
}
|
|
}
|
|
},
|
|
showFastActions(val){
|
|
if (val && this.isTabletActive) {
|
|
this.draggableElement('.radar-fast-actions', 'radarFastActionsPosition')
|
|
}else{
|
|
if ($('.radar-fast-actions').data('ui-draggable')) {
|
|
$('.radar-fast-actions').draggable('destroy');
|
|
}
|
|
}
|
|
}
|
|
},
|
|
template: await importTemplate("./app/pages/radar/index.html")
|
|
};
|