747 lines
27 KiB
JavaScript
747 lines
27 KiB
JavaScript
var app = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
darkMode: false,
|
|
userUsername: "",
|
|
userRank: { title: "", color: "" },
|
|
userIcon: "",
|
|
userPermissions: undefined,
|
|
accountType: "",
|
|
searchValue: "",
|
|
|
|
notifyMenu: false,
|
|
newNotify: false,
|
|
|
|
rightPanelMinimized: false,
|
|
rightPanelCategory: "players",
|
|
|
|
newBlipPopup: undefined,
|
|
deleteBlipPopup: undefined,
|
|
|
|
map: undefined,
|
|
mapStylesButtons: [
|
|
{ name: "Satelite Map", checked: true },
|
|
{ name: "Atlas Map", checked: false }
|
|
],
|
|
mapStyles: {},
|
|
mapPlayerBlips: [],
|
|
mapVehicleBlips: [],
|
|
mapHudBlips: [],
|
|
|
|
selectedPlayer: {
|
|
name: "Lvorex Lvorex",
|
|
icon: "",
|
|
job: "",
|
|
id: 0,
|
|
uid: 0,
|
|
coords: "",
|
|
status: ""
|
|
},
|
|
selectedVehicle: {
|
|
plate: "",
|
|
coords: [],
|
|
label: "",
|
|
owner: "",
|
|
fuel: 0,
|
|
vehicleId: 0
|
|
},
|
|
selectedHudBlip: {
|
|
id: 0,
|
|
name: "",
|
|
coords: [],
|
|
sprite: -1
|
|
},
|
|
selectedHudBlipEditing: undefined
|
|
},
|
|
components: {
|
|
"m-navbar": navbarComp,
|
|
"left-navbar": leftNavbarComp
|
|
},
|
|
watch: {
|
|
searchValue: function(newValue) {
|
|
if (this.rightPanelCategory === "players") {
|
|
const neededPlayer = this.mapPlayerBlips.filter(p => p.name.toLowerCase().includes(newValue.toLowerCase()))[0]
|
|
if (neededPlayer) {
|
|
const coords = neededPlayer.coords.split(", ")
|
|
this.map.setView([coords[1], coords[0]], 5)
|
|
this.selectedPlayer = neededPlayer
|
|
}
|
|
} else if (this.rightPanelCategory === "vehicles") {
|
|
const neededVehicle = this.mapVehicleBlips.filter(p => p.plate.toLowerCase().includes(newValue.toLowerCase()))[0]
|
|
if (neededVehicle) {
|
|
const coords = neededVehicle.coords
|
|
this.map.setView([coords[1], coords[0]], 5)
|
|
this.selectedVehicle = neededVehicle
|
|
}
|
|
} else if (this.rightPanelCategory === "hudblips") {
|
|
const neededBlip = this.mapHudBlips.filter(p => p.name.toLowerCase().includes(newValue.toLowerCase()))[0]
|
|
if (neededBlip) {
|
|
const coords = neededBlip.coords
|
|
this.map.setView([coords[1], coords[0]], 5)
|
|
this.selectedHudBlip = neededBlip
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
editCreatedBlip: async function(save) {
|
|
if (this.userPermissions["LiveMap"][1] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
if (!save) {
|
|
this.selectedHudBlipEditing = {
|
|
name: "",
|
|
sprite: "",
|
|
coords: ""
|
|
}
|
|
} else {
|
|
const credits = this.selectedHudBlipEditing
|
|
const oldCredits = this.selectedHudBlip
|
|
|
|
credits.name = credits.name === "" ? oldCredits.name : credits.name
|
|
credits.sprite = credits.sprite === "" ? oldCredits.sprite : credits.sprite
|
|
credits.coords = credits.coords === "" ? oldCredits.coords.join(" ") : credits.coords
|
|
|
|
if (credits.coords.split(" ").length !== 3) {
|
|
this.newNotify = { desc: "Please type coords with correct syntax." }
|
|
this.selectedHudBlipEditing = undefined
|
|
return
|
|
}
|
|
|
|
let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/editScriptBlip.lvorex`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
key: sha1(sessionStorage.getItem("uid-key")),
|
|
id: Number(oldCredits.id),
|
|
name: credits.name,
|
|
sprite: Number(credits.sprite),
|
|
coords: credits.coords,
|
|
scale: oldCredits.scale,
|
|
color: oldCredits.color
|
|
})
|
|
})
|
|
result = await result.json()
|
|
if (result.code !== 200) {
|
|
this.newNotify = { desc: result.message }
|
|
this.selectedHudBlipEditing = undefined
|
|
return
|
|
}
|
|
|
|
const hudBlip = this.mapHudBlips.find(w => w.id === oldCredits.id)
|
|
hudBlip.name = credits.name
|
|
hudBlip.sprite = Number(credits.sprite)
|
|
hudBlip.coords = credits.coords.split(" ")
|
|
|
|
oldCredits.name = credits.name
|
|
oldCredits.sprite = Number(credits.sprite)
|
|
oldCredits.coords = credits.coords.split(" ")
|
|
|
|
this.selectedHudBlipEditing = undefined
|
|
}
|
|
},
|
|
|
|
deleteHudBlip: async function(id) {
|
|
if (this.userPermissions["LiveMap"][1] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
this.deleteBlipPopup = undefined
|
|
this.closeItemDetailsPage()
|
|
|
|
let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/deleteScriptBlip.lvorex`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
key: sha1(sessionStorage.getItem("uid-key")),
|
|
id: id
|
|
})
|
|
})
|
|
result = await result.json()
|
|
if (result.code !== 200) return console.log(result.message)
|
|
|
|
const index = this.mapHudBlips.findIndex(blip => blip.id === id)
|
|
this.mapHudBlips.splice(index, 1)
|
|
this.changeToHudBlips()
|
|
},
|
|
|
|
createNewBlip: async function() {
|
|
if (this.userPermissions["LiveMap"][1] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
const newBlipPopup = this.newBlipPopup
|
|
if (
|
|
newBlipPopup.name === "" ||
|
|
newBlipPopup.sprite === null ||
|
|
newBlipPopup.coords.split(" ").length !== 3
|
|
) {
|
|
this.newNotify = { desc: "You need to fill all blanks." }
|
|
this.newBlipPopup = undefined
|
|
return
|
|
}
|
|
|
|
this.newBlipPopup = undefined
|
|
console.log(Number(newBlipPopup.scale).toFixed(1))
|
|
let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/createScriptBlip.lvorex`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
key: sha1(sessionStorage.getItem("uid-key")),
|
|
name: newBlipPopup.name,
|
|
sprite: Number(newBlipPopup.sprite),
|
|
coords: newBlipPopup.coords,
|
|
color: newBlipPopup.color,
|
|
scale: Number(newBlipPopup.scale).toFixed(1)
|
|
})
|
|
})
|
|
result = await result.json()
|
|
if (result.code !== 200) {
|
|
this.newNotify = { desc: result.message }
|
|
this.newBlipPopup = undefined
|
|
return
|
|
}
|
|
|
|
const coords = newBlipPopup.coords.split(" ")
|
|
const blip = L.marker([coords[1], coords[0]], {
|
|
icon: L.icon({
|
|
iconUrl: "img/HudBlipIcon.png",
|
|
iconSize: [25, 37],
|
|
iconAnchor: [25, 37]
|
|
})
|
|
})
|
|
|
|
const blipCredentials = {
|
|
id: result.message.blip,
|
|
name: newBlipPopup.name,
|
|
coords: coords,
|
|
sprite: newBlipPopup.sprite
|
|
}
|
|
this.mapHudBlips.push(blipCredentials)
|
|
|
|
const vm = this
|
|
blip.on('click', function() {
|
|
if (vm.selectedHudBlip.id === result.message.blip) {
|
|
vm.closeItemDetailsPage()
|
|
return
|
|
}
|
|
vm.selectedHudBlip = blipCredentials
|
|
vm.openItemDetailsPage("HudBlips")
|
|
})
|
|
|
|
blip.addTo(this.map)
|
|
},
|
|
|
|
removeAllBlips: function() {
|
|
this.map.eachLayer(layer => {
|
|
const vm = this.map
|
|
if (layer instanceof L.Marker) {
|
|
vm.removeLayer(layer)
|
|
}
|
|
})
|
|
},
|
|
|
|
openItemDetailsPage: function(wanted) {
|
|
const allItemDatas = {
|
|
selectedPlayer: {
|
|
name: "Lvorex Lvorex",
|
|
icon: "",
|
|
job: "",
|
|
id: 0,
|
|
uid: 0,
|
|
coords: "",
|
|
status: ""
|
|
},
|
|
selectedVehicle: {
|
|
plate: "",
|
|
coords: [],
|
|
label: "",
|
|
owner: "",
|
|
fuel: 0,
|
|
vehicleId: 0
|
|
},
|
|
selectedHudBlip: {
|
|
id: 0,
|
|
name: "",
|
|
coords: [],
|
|
sprite: -1
|
|
},
|
|
selectedHudBlipEditing: undefined
|
|
}
|
|
Object.entries(allItemDatas).forEach(([k, v]) => {
|
|
let newWanted = wanted
|
|
newWanted = newWanted.slice(0, newWanted.length-1)
|
|
if (k.toLowerCase().includes(newWanted.toLowerCase())) return
|
|
this[k] = v
|
|
})
|
|
},
|
|
|
|
closeItemDetailsPage: function() {
|
|
const allItemDatas = {
|
|
selectedPlayer: {
|
|
name: "Lvorex Lvorex",
|
|
icon: "",
|
|
job: "",
|
|
id: 0,
|
|
uid: 0,
|
|
coords: "",
|
|
status: ""
|
|
},
|
|
selectedVehicle: {
|
|
plate: "",
|
|
coords: [],
|
|
label: "",
|
|
owner: "",
|
|
fuel: 0,
|
|
vehicleId: 0
|
|
},
|
|
selectedHudBlip: {
|
|
id: 0,
|
|
name: "",
|
|
coords: [],
|
|
sprite: -1
|
|
},
|
|
selectedHudBlipEditing: undefined
|
|
}
|
|
Object.entries(allItemDatas).forEach(([k, v]) => {
|
|
this[k] = v
|
|
})
|
|
|
|
// const wantedItemDetail = document.getElementById(`mapItemDetails${wanted}`)
|
|
// wantedItemDetail.style.display = "none"
|
|
// wantedItemDetail.style.opacity = 0
|
|
},
|
|
|
|
changeToHudBlips: function() {
|
|
this.removeAllBlips()
|
|
|
|
this.mapHudBlips.forEach((hudBlip) => {
|
|
const blip = L.marker([hudBlip.coords[1], hudBlip.coords[0]], {
|
|
icon: L.icon({
|
|
iconUrl: "img/HudBlipIcon.png",
|
|
iconSize: [25, 37],
|
|
iconAnchor: [25, 37]
|
|
})
|
|
})
|
|
|
|
const vm = this
|
|
blip.on('click', function() {
|
|
if (vm.selectedHudBlip.id === hudBlip.id) {
|
|
vm.closeItemDetailsPage()
|
|
return
|
|
}
|
|
vm.selectedHudBlip = hudBlip
|
|
vm.openItemDetailsPage("HudBlips")
|
|
})
|
|
|
|
blip.addTo(this.map)
|
|
})
|
|
|
|
this.rightPanelCategory = "hudblips"
|
|
},
|
|
|
|
changeToVehicleBlips: function() {
|
|
this.removeAllBlips()
|
|
|
|
this.mapVehicleBlips.forEach((vehicle) => {
|
|
const blip = L.marker([vehicle.coords[1], vehicle.coords[0]], {
|
|
icon: L.icon({
|
|
iconUrl: "img/VehicleBlipIcon.png",
|
|
iconSize: [22, 28],
|
|
iconAnchor: [22, 28]
|
|
})
|
|
})
|
|
|
|
const vm = this
|
|
blip.on('click', function() {
|
|
if (vm.selectedVehicle.vehicleId === vehicle.vehicleId) {
|
|
vm.closeItemDetailsPage()
|
|
vm.selectedVehicle = {
|
|
plate: "",
|
|
coords: [],
|
|
label: "",
|
|
owner: "",
|
|
fuel: 0,
|
|
vehicleId: 0
|
|
}
|
|
return
|
|
}
|
|
vm.selectedVehicle = vehicle
|
|
vm.openItemDetailsPage("Vehicles")
|
|
})
|
|
|
|
blip.addTo(this.map)
|
|
})
|
|
|
|
this.rightPanelCategory = "vehicles"
|
|
},
|
|
|
|
changeToPlayerBlips: function() {
|
|
this.removeAllBlips()
|
|
|
|
this.mapPlayerBlips.forEach((player) => {
|
|
const coords = player.coords.split(",")
|
|
const marker = L.marker([coords[1], coords[0]], {
|
|
icon: L.icon({
|
|
iconUrl: player.playerBlip,
|
|
iconSize: [22, 28],
|
|
iconAnchor: [22, 28]
|
|
})
|
|
})
|
|
|
|
const vueVM = this
|
|
marker.on('click', function() {
|
|
if (vueVM.selectedPlayer.id === player.id) {
|
|
vueVM.closeItemDetailsPage()
|
|
setTimeout(() => {
|
|
vueVM.selectedPlayer = {
|
|
name: "Lvorex Lvorex",
|
|
icon: "",
|
|
job: "",
|
|
id: 0,
|
|
coords: "",
|
|
status: ""
|
|
}
|
|
}, 200)
|
|
return
|
|
}
|
|
|
|
vueVM.openItemDetailsPage("Players")
|
|
vueVM.selectedPlayer = {
|
|
id: player.id,
|
|
uid: player.uid,
|
|
icon: player.icon,
|
|
playerColor: player.playerColor,
|
|
playerBlip: player.playerBlip,
|
|
|
|
name: player.name,
|
|
job: player.job,
|
|
status: player.status,
|
|
coords: player.coords,
|
|
}
|
|
})
|
|
|
|
marker.addTo(this.map)
|
|
})
|
|
|
|
this.rightPanelCategory = "players"
|
|
},
|
|
|
|
minimizeRightPanel: function() {
|
|
if (this.rightPanelMinimized) {
|
|
document.getElementById("map-categories-container").style.backgroundImage = ""
|
|
document.getElementById("map-categories-container").style.height = ""
|
|
} else {
|
|
document.getElementById("map-categories-container").style.backgroundImage = "url(img/MapControlsListMinimizedBg.png)"
|
|
document.getElementById("map-categories-container").style.height = "3.6111vh"
|
|
}
|
|
|
|
this.rightPanelMinimized = !this.rightPanelMinimized
|
|
},
|
|
|
|
selectPlayerFromRightPanel: function(id) {
|
|
const player = this.mapPlayerBlips.find(player => player.id === id)
|
|
|
|
if (this.selectedPlayer.id === player.id) {
|
|
this.closeItemDetailsPage()
|
|
this.selectedPlayer.id = 0
|
|
} else {
|
|
this.selectedPlayer = {
|
|
id: player.id,
|
|
uid: player.uid,
|
|
icon: player.icon,
|
|
playerColor: player.playerColor,
|
|
playerBlip: player.playerBlip,
|
|
|
|
name: player.name,
|
|
job: player.job,
|
|
status: player.status,
|
|
coords: player.coords,
|
|
}
|
|
this.openItemDetailsPage("Players")
|
|
const coords = player.coords.split(",")
|
|
this.map.setView([coords[1], coords[0]], 5)
|
|
}
|
|
},
|
|
|
|
selectHudBlipFromRightPanel: function(id) {
|
|
const hudblip = this.mapHudBlips.find(hudblip => hudblip.id === id)
|
|
|
|
if (this.selectedHudBlip.id === hudblip.id) {
|
|
this.closeItemDetailsPage()
|
|
this.selectedHudBlip.id = 0
|
|
} else {
|
|
this.selectedHudBlip = hudblip
|
|
this.map.setView([hudblip.coords[1], hudblip.coords[0]], 5)
|
|
}
|
|
},
|
|
|
|
selectVehicleFromRightPanel: function(vehicleId) {
|
|
const vehicle = this.mapVehicleBlips.find(vehicle => vehicle.vehicleId === vehicleId)
|
|
|
|
if (this.selectedVehicle.vehicleId === vehicle.vehicleId) {
|
|
this.closeItemDetailsPage()
|
|
this.selectedVehicle.vehicleId = 0
|
|
} else {
|
|
this.selectedVehicle = vehicle
|
|
this.openItemDetailsPage("Vehicles")
|
|
this.map.setView([vehicle.coords[1], vehicle.coords[0]], 5)
|
|
}
|
|
},
|
|
|
|
inspectSelectedUser: function() {
|
|
location.href = "/Panel/Players/Info/#uid="+this.selectedPlayer.uid
|
|
},
|
|
|
|
inspectSelectedVehicle: function() {
|
|
location.href = `/Panel/Players/Info/?vehicle=${this.selectedVehicle.plate}#uid=${this.selectedVehicle.owneruid}`
|
|
},
|
|
|
|
zoomInOrOut: function(toggle) {
|
|
if (toggle === "in") {
|
|
this.map.zoomIn()
|
|
} else {
|
|
this.map.zoomOut()
|
|
}
|
|
},
|
|
|
|
changeMapStyle: function(map) {
|
|
Object.entries(this.mapStyles).forEach(([key, data]) => {
|
|
if (this.map.hasLayer(data)) {
|
|
this.mapStylesButtons.find(w => w.name === key).checked = false
|
|
this.map.removeLayer(data)
|
|
}
|
|
})
|
|
this.mapStylesButtons.find(w => w.name === map).checked = true
|
|
this.mapStyles[map].addTo(this.map)
|
|
}
|
|
},
|
|
mounted: async function() {
|
|
result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/controlKeyWithServer.lvorex`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
key: sha1(sessionStorage.getItem("uid-key"))
|
|
})
|
|
})
|
|
|
|
result = await result.json()
|
|
if (result.code === 404) {
|
|
location.href = "/"
|
|
return
|
|
}
|
|
|
|
const userDetails = JSON.parse(result.message)
|
|
|
|
const userRankColors = {
|
|
"Not Authorized": "#9e9e9e",
|
|
Moderator: "#F34240",
|
|
Admin: "#F34240",
|
|
Owner: "#F34240",
|
|
}
|
|
|
|
this.darkMode = userDetails.darkMode === 1 ? true : false
|
|
this.userUsername = userDetails.username
|
|
this.userRank.title = userDetails.rank
|
|
this.userRank.color = "#F34240"
|
|
this.userIcon = userDetails.avatar
|
|
this.accountType = userDetails.accountType
|
|
this.userPermissions = userDetails.permissions
|
|
|
|
// Live Map Start
|
|
|
|
const center_x = 117.3;
|
|
const center_y = 172.8;
|
|
const scale_x = 0.02072;
|
|
const scale_y = 0.0205;
|
|
|
|
const CUSTOM_CRS = L.extend({}, L.CRS.Simple, {
|
|
projection: L.Projection.LonLat,
|
|
scale: function(zoom) {
|
|
|
|
return Math.pow(2, zoom);
|
|
},
|
|
zoom: function(sc) {
|
|
|
|
return Math.log(sc) / 0.6931471805599453;
|
|
},
|
|
distance: function(pos1, pos2) {
|
|
var x_difference = pos2.lng - pos1.lng;
|
|
var y_difference = pos2.lat - pos1.lat;
|
|
return Math.sqrt(x_difference * x_difference + y_difference * y_difference);
|
|
},
|
|
transformation: new L.Transformation(scale_x, center_x, -scale_y, center_y),
|
|
infinite: true
|
|
});
|
|
|
|
const AtlasStyle = L.tileLayer("img/styleAtlas/{z}/{x}/{y}.jpg", {minZoom: 0,maxZoom: 5,noWrap: true,continuousWorld: false,attribution: 'CodeM - Atlas Map',id: 'styleAtlas map',})
|
|
const SateliteStyle = L.tileLayer('img/styleSatelite/{z}/{x}/{y}.jpg', {minZoom: 0,maxZoom: 8,noWrap: true,continuousWorld: false,attribution: 'CodeM - Satelite Map',id: 'SateliteStyle map',})
|
|
this.mapStyles = {
|
|
"Atlas Map": AtlasStyle,
|
|
"Satelite Map": SateliteStyle
|
|
}
|
|
|
|
const boundsTopLeft = CUSTOM_CRS.transformation.untransform(L.point([0, 0]));
|
|
const boundsBottomRight = CUSTOM_CRS.transformation.untransform(L.point([250, 250]));
|
|
|
|
const maxBounds = [
|
|
[boundsTopLeft.y, boundsTopLeft.x],
|
|
[boundsBottomRight.y, boundsBottomRight.x]
|
|
];
|
|
|
|
const map = L.map("map", {
|
|
crs: CUSTOM_CRS,
|
|
minZoom: 3,
|
|
maxZoom: 5,
|
|
Zoom: 5,
|
|
maxNativeZoom: 5,
|
|
preferCanvas: true,
|
|
layers: [SateliteStyle],
|
|
center: [0, 0],
|
|
zoom: 3,
|
|
maxBounds: maxBounds,
|
|
continuousWorld: true,
|
|
worldCopyJump: false,
|
|
maxBoundsViscosity: 0.95
|
|
})
|
|
|
|
map.zoomControl.remove()
|
|
map.attributionControl.remove()
|
|
|
|
const vueVM = this
|
|
|
|
map.on('contextmenu', function(e) {
|
|
const LatLng = [ e.latlng.lat, e.latlng.lng ]
|
|
console.log(LatLng)
|
|
vueVM.newBlipPopup = { name: '', sprite: null, coords: `${LatLng[1].toFixed()} ${LatLng[0].toFixed()} 0` }
|
|
})
|
|
|
|
this.map = map
|
|
|
|
// Live Map End
|
|
|
|
// Players Blips Get Start
|
|
|
|
result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getPlayerCoordsAndCredentials.lvorex`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
key: sha1(sessionStorage.getItem("uid-key"))
|
|
})
|
|
})
|
|
result = await result.json()
|
|
if (result.code !== 200) return console.log(result.message)
|
|
|
|
result.message.forEach(player => {
|
|
const playerBlipIcons = ["img/PlayerBlipIcon.png|#39FF88", "img/PlayerBlipIconBlue.png|#5F5BFF", "img/PlayerBlipIconRed.png|#F88"]
|
|
const randomInt = Math.floor(Math.random() * playerBlipIcons.length)
|
|
const marker = L.marker([player.coords[1], player.coords[0]], {
|
|
icon: L.icon({
|
|
iconUrl: playerBlipIcons[randomInt].split("|")[0],
|
|
iconSize: [22, 28],
|
|
iconAnchor: [22, 28]
|
|
})
|
|
})
|
|
|
|
const remakedCoords = player.coords.map(coord => coord = parseInt(coord)).join(", ")
|
|
|
|
this.mapPlayerBlips.push({
|
|
id: player.id,
|
|
uid: player.uid,
|
|
icon: player.icon,
|
|
playerColor: playerBlipIcons[randomInt].split("|")[1],
|
|
playerBlip: playerBlipIcons[randomInt].split("|")[0],
|
|
|
|
name: player.name,
|
|
job: player.job,
|
|
status: player.status,
|
|
coords: remakedCoords,
|
|
|
|
blip: marker
|
|
})
|
|
|
|
marker.on('click', function() {
|
|
if (vueVM.selectedPlayer.id === player.id) {
|
|
vueVM.closeItemDetailsPage()
|
|
setTimeout(() => {
|
|
vueVM.selectedPlayer = {
|
|
name: "Lvorex Lvorex",
|
|
icon: "",
|
|
job: "",
|
|
id: 0,
|
|
coords: "",
|
|
status: ""
|
|
}
|
|
}, 200)
|
|
return
|
|
}
|
|
|
|
vueVM.openItemDetailsPage("Players")
|
|
vueVM.selectedPlayer = {
|
|
id: player.id,
|
|
uid: player.uid,
|
|
icon: player.icon,
|
|
playerColor: playerBlipIcons[randomInt].split("|")[1],
|
|
playerBlip: playerBlipIcons[randomInt].split("|")[0],
|
|
|
|
name: player.name,
|
|
job: player.job,
|
|
status: player.status,
|
|
coords: remakedCoords,
|
|
}
|
|
})
|
|
|
|
marker.addTo(map)
|
|
})
|
|
|
|
// Players Blips Get End
|
|
|
|
// Vehicle Blips Get Start
|
|
|
|
result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getAllVehicleCoordsAndCredentials.lvorex`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
key: sha1(sessionStorage.getItem("uid-key"))
|
|
})
|
|
})
|
|
result = await result.json()
|
|
if (result.code !== 200) return console.log(result.message)
|
|
this.mapVehicleBlips = result.message
|
|
|
|
// Vehicle Blips Get End
|
|
|
|
// Hud Blips Get Start
|
|
|
|
result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getScriptBlips.lvorex`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
key: sha1(sessionStorage.getItem("uid-key"))
|
|
})
|
|
})
|
|
result = await result.json()
|
|
if (result.code !== 200) return console.log(result.message)
|
|
this.mapHudBlips = result.message
|
|
|
|
// Hud Blips Get End
|
|
|
|
document.getElementById("panel-content").style.backgroundImage = `url(../../img/panel${this.darkMode === true ? "Dark" : "Light"}ModeLiveMap.png)`
|
|
document.getElementById("loading-container").style.opacity = 0
|
|
}
|
|
}) |