256 lines
9.5 KiB
JavaScript
256 lines
9.5 KiB
JavaScript
const app = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
darkMode: false,
|
|
|
|
userUsername: "Lvorex",
|
|
userRank: { title: "Admin", color: "#F34240" },
|
|
userIcon: "",
|
|
userPermissions: undefined,
|
|
accountType: "",
|
|
|
|
notifyMenu: false,
|
|
newNotify: false,
|
|
|
|
loadCount: 12,
|
|
selectedCategory: false,
|
|
|
|
activeCategory: "all",
|
|
searchValue: "",
|
|
|
|
allVehicles: [],
|
|
vanillaVehicles: [],
|
|
importVehicles: [],
|
|
classesVehicles: [],
|
|
toShowVehicles: [],
|
|
|
|
ownedallVehicles: [],
|
|
ownedvanillaVehicles: [],
|
|
ownedimportVehicles: [],
|
|
ownedclassesVehicles: [],
|
|
|
|
vcasMenuMaximized: false,
|
|
selectedVehicleCategory: { name: "", value: "" },
|
|
vehicleCategories: [
|
|
{ name: "Boats", value: "boats" },
|
|
{ name: "Commercials", value: "commercials" },
|
|
{ name: "Compacts", value: "compacts" },
|
|
{ name: "Coupes", value: "coupes" },
|
|
{ name: "Cycles", value: "cycles" },
|
|
{ name: "Emergency", value: "emergency" },
|
|
{ name: "Helicopters", value: "helicopters" },
|
|
{ name: "Industrial", value: "industrial" },
|
|
{ name: "Military", value: "military" },
|
|
{ name: "Motorcycles", value: "motorcycles" },
|
|
{ name: "Muslce", value: "muscle" },
|
|
{ name: "Off-road", value: "offroad" },
|
|
{ name: "Open Wheel", value: "openwheel" },
|
|
{ name: "Planes", value: "planes" },
|
|
{ name: "SUV's", value: "suvs" },
|
|
{ name: "Sedans", value: "sedans" },
|
|
{ name: "Service", value: "service" },
|
|
{ name: "Sports", value: "sports" },
|
|
{ name: "Sports Classic", value: "sportsclassics" },
|
|
{ name: "Super", value: "super" },
|
|
{ name: "Utility", value: "utility" },
|
|
{ name: "Vans", value: "vans" },
|
|
],
|
|
vehicleClasses: [
|
|
{name: "E"},
|
|
{name: "D"},
|
|
{name: "C"},
|
|
{name: "B"},
|
|
{name: "A"},
|
|
{name: "A+"},
|
|
{name: "S"},
|
|
{name: "S+"},
|
|
]
|
|
},
|
|
components: {
|
|
"m-navbar": navbarComp,
|
|
"left-navbar": leftNavbarComp
|
|
},
|
|
methods: {
|
|
checkScroll() {
|
|
let list = this.$refs.list;
|
|
if (list.scrollTop + list.clientHeight >= list.scrollHeight) {
|
|
this.loadMoreData();
|
|
}
|
|
},
|
|
|
|
loadMoreData() {
|
|
if (this.selectedCategory) return
|
|
let nextData = this[this.activeCategory+"Vehicles"].slice(this.toShowVehicles.length, this.toShowVehicles.length + this.loadCount);
|
|
this.toShowVehicles = this.toShowVehicles.concat(nextData);
|
|
},
|
|
|
|
inspectVehicle: function(data) {
|
|
if (this.userPermissions["Vehicles"][1] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
if (this.activeCategory.includes("owned")) {
|
|
location.href = `/Panel/Players/Info/?vehicle=${data.plate}#uid=${data.ownerCitizenid}`
|
|
} else {
|
|
location.href = `/Panel/Vehicles/Info/?type=server&model=${data.model}`
|
|
}
|
|
},
|
|
|
|
changeCategory: function(event) {
|
|
const to = event.target.className.split(" ")[0]
|
|
if (this.activeCategory === to) return
|
|
|
|
if (this.activeCategory.includes("owned")) {
|
|
this.activeCategory = `owned${to}`
|
|
} else {
|
|
this.activeCategory = to
|
|
}
|
|
this.selectedCategory = false
|
|
this.toShowVehicles = this[this.activeCategory+"Vehicles"].slice(0, this.loadCount)
|
|
},
|
|
|
|
changeVehicleCategory: function(category) {
|
|
this.toShowVehicles = this[this.activeCategory+"Vehicles"]
|
|
this.vcasMenuMaximized = false
|
|
if (category === "all") {
|
|
this.selectedCategory = false
|
|
this.toShowVehicles = this[this.activeCategory+"Vehicles"].slice(0, this.loadCount)
|
|
this.selectedVehicleCategory = { name: "", value: "" }
|
|
return
|
|
}
|
|
|
|
this.selectedCategory = true
|
|
if (!this.vehicleCategories.some(c => c.value === category.value)) {
|
|
this.toShowVehicles = this[this.activeCategory+"Vehicles"].filter(v => v.class === category.name)
|
|
} else {
|
|
this.toShowVehicles = this[this.activeCategory+"Vehicles"].filter(v => v.categoryValue === category.value)
|
|
}
|
|
|
|
this.selectedVehicleCategory = category
|
|
},
|
|
|
|
changeListMode: async function () {
|
|
const classes = {
|
|
C: 0,
|
|
B: 1,
|
|
A: 2,
|
|
"A+": 3,
|
|
S: 4,
|
|
"S+": 5
|
|
}
|
|
|
|
if (this.activeCategory.includes("owned")) {
|
|
this.activeCategory = this.activeCategory.replace("owned", "")
|
|
} else {
|
|
if (this.userPermissions["Vehicles"][2] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
if (this.ownedallVehicles.length === 0) {
|
|
let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getOwnedVehicles.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.ownedallVehicles = result.message
|
|
this.ownedallVehicles.sort((a,b) => classes[b.class]-classes[a.class])
|
|
|
|
this.ownedimportVehicles = this.ownedallVehicles.filter(v => v.import === 1)
|
|
this.ownedvanillaVehicles = this.ownedallVehicles.filter(v => v.import === 0)
|
|
this.ownedclassesVehicles = this.ownedallVehicles
|
|
}
|
|
this.activeCategory = `owned${this.activeCategory}`
|
|
}
|
|
|
|
this.toShowVehicles = this[this.activeCategory+"Vehicles"].slice(0, this.loadCount)
|
|
}
|
|
},
|
|
watch: {
|
|
searchValue: function(newValue) {
|
|
this.toShowVehicles = this[this.activeCategory+"Vehicles"]
|
|
this.toShowVehicles = this.toShowVehicles.filter(
|
|
vehicle =>
|
|
vehicle.brand.toLowerCase().includes(newValue.toLowerCase()) ||
|
|
vehicle.model.toLowerCase().includes(newValue.toLowerCase()) ||
|
|
vehicle.label.toLowerCase().includes(newValue.toLowerCase())
|
|
)
|
|
}
|
|
},
|
|
mounted: async function() {
|
|
let 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
|
|
|
|
result = await fetch(`/getServerVehicles.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.allVehicles = result.message
|
|
|
|
const classes = {
|
|
"E": 0,
|
|
"D": 1,
|
|
"C": 2,
|
|
"B": 3,
|
|
"A": 4,
|
|
"A+": 5,
|
|
"S": 6,
|
|
"S+": 7
|
|
}
|
|
|
|
this.allVehicles.sort((a,b) => classes[b.class]-classes[a.class])
|
|
this.importVehicles = this.allVehicles.filter(v => v.import === 1)
|
|
this.vanillaVehicles = this.allVehicles.filter(v => v.import === 0)
|
|
this.classesVehicles = this.allVehicles
|
|
this.toShowVehicles = this.allVehicles.slice(0, this.loadCount)
|
|
|
|
document.getElementById("panel-content").style.backgroundImage = `url(../../img/panel${this.darkMode === true ? "Dark" : "Light"}ModeVehicles.png)`
|
|
document.getElementById("loading-container").style.opacity = 0
|
|
}
|
|
}) |