156 lines
6.4 KiB
JavaScript
156 lines
6.4 KiB
JavaScript
var app = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
darkMode: false,
|
|
userUsername: "Lvorex",
|
|
userRank: { title: "Admin", color: "#F34240" },
|
|
userIcon: "",
|
|
userPermission: undefined,
|
|
searchValue: "",
|
|
accountType: "",
|
|
|
|
loadCount: 15,
|
|
|
|
serverFramework: undefined,
|
|
|
|
notifyMenu: false,
|
|
newNotify: false,
|
|
|
|
activeCategory: "all", // all, weapon, useable, craftable, unique
|
|
|
|
toShowItems: [],
|
|
allItems: [],
|
|
weaponItems: [],
|
|
useableItems: [],
|
|
craftableItems: [],
|
|
uniqueItems: [],
|
|
|
|
selectedItem: false,
|
|
selectedItemInputs: false
|
|
},
|
|
components : {
|
|
"m-navbar": navbarComp,
|
|
"left-navbar": leftNavbarComp
|
|
},
|
|
watch: {
|
|
searchValue: function(newValue) {
|
|
this.toShowItems = this[this.activeCategory+"Items"]
|
|
this.toShowItems = this.toShowItems.filter(
|
|
item =>
|
|
item.label.toLowerCase().includes(newValue.toLowerCase()) ||
|
|
item.code.toLowerCase().includes(newValue.toLowerCase())
|
|
)
|
|
}
|
|
},
|
|
methods: {
|
|
checkScroll() {
|
|
let list = this.$refs.list;
|
|
if (list.scrollTop + list.clientHeight >= list.scrollHeight) {
|
|
this.loadMoreData();
|
|
}
|
|
},
|
|
|
|
loadMoreData() {
|
|
let nextData = this[this.activeCategory+"Items"].slice(this.toShowItems.length, this.toShowItems.length + this.loadCount);
|
|
this.toShowItems = this.toShowItems.concat(nextData);
|
|
},
|
|
|
|
changeCategory: async function(changeto) {
|
|
this.activeCategory = changeto
|
|
this.toShowItems = this[changeto+"Items"].slice(0, this.loadCount)
|
|
},
|
|
|
|
selectItem: async function(item, isCraftItem) {
|
|
if (this.userPermission["Items"][1] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
if (isCraftItem) {
|
|
const sharedItem = this.allItems.find(i => i.code === item)
|
|
if (!sharedItem) return
|
|
this.selectedItem = sharedItem
|
|
} else {
|
|
document.getElementById("panel-content").style.backgroundImage = `url(../../img/panel${this.darkMode === true ? "Dark" : "Light"}ModeItems.png)`
|
|
this.selectedItem = item
|
|
}
|
|
|
|
this.selectedItemInputs = [
|
|
{ id: 0, label: "Item Label", value: this.selectedItem.label, inputImage: "img/ItemLabelNameDescInputBg.png" },
|
|
{ id: 1, label: "Item Name (Command Name)", value: this.selectedItem.code, inputImage: "img/ItemLabelNameDescInputBg.png" },
|
|
{ id: 2, label: "Item Description", value: `"${this.selectedItem.desc}"`, inputImage: "img/ItemLabelNameDescInputBg.png" },
|
|
{ id: 3, label: "Item Weight", value: `${this.selectedItem.weight} gr`, inputImage: "img/ItemWeightInputBg.png" },
|
|
{ id: 4, label: "Item Type", value: this.selectedItem.type, inputImage: "img/ItemTypeInputBg.png" },
|
|
{ id: 5, label: "Item Usability", value: this.selectedItem.useable === 'ESX' ? 'Not found.' : this.selectedItem.useable ? 'Usable' : 'Non-Usable', inputImage: "img/ItemUsabilityInputBg.png" },
|
|
{ id: 6, label: "Item Uniqeness", value: this.selectedItem.unique ? 'Unique' : 'Non-Unique', inputImage: "img/ItemUniqenessInputBg.png" },
|
|
{ id: 7, label: "Close After Usage", value: this.selectedItem.closeafterusage, inputImage: "img/ItemCloseAfterUsageInputBg.png" }
|
|
]
|
|
if (this.selectedItem.type === 'weapon') {
|
|
this.selectedItemInputs[5] = {
|
|
id: 5,
|
|
label: "Weapon Ammo Type",
|
|
value: this.selectedItem.ammotype ? this.selectedItem.ammotype : 'Not Found.',
|
|
inputImage: "img/ItemAmmoTypeInputBg.png"
|
|
}
|
|
this.selectedItemInputs[7].value = "true"
|
|
}
|
|
},
|
|
|
|
goBackToItemsPage: function() {
|
|
this.selectedItem = false
|
|
this.selectedItemInputs = false
|
|
}
|
|
},
|
|
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)
|
|
|
|
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.userPermission = userDetails.permissions
|
|
|
|
result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getAllSharedItems.lvorex`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
key: sha1(sessionStorage.getItem("uid-key"))
|
|
})
|
|
})
|
|
result = await result.json()
|
|
console.log(result.message)
|
|
if (result.code !== 200) return console.log(result)
|
|
this.allItems = result.message
|
|
this.toShowItems = this.allItems.slice(0, this.loadCount)
|
|
this.useableItems = this.allItems.filter(item => item.useable === true)
|
|
this.weaponItems = this.allItems.filter(item => item.type === 'weapon')
|
|
this.uniqueItems = this.allItems.filter(item => item.unique === true)
|
|
this.craftableItems = this.allItems.filter(item => item.craftable !== false)
|
|
|
|
document.getElementById("panel-content").style.backgroundImage = `url(../../img/panel${this.darkMode === true ? "Dark" : "Light"}ModeItems.png)`
|
|
document.getElementById("loading-container").style.opacity = 0
|
|
}
|
|
}) |