371 lines
16 KiB
JavaScript
371 lines
16 KiB
JavaScript
var app = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
darkMode: false,
|
|
userUsername: "Lvorex",
|
|
userRank: { title: "Admin", color: "#F34240" },
|
|
userIcon: "",
|
|
userPermissions: undefined,
|
|
searchValue: "",
|
|
accountType: "",
|
|
|
|
notifyMenu: false,
|
|
newNotify: false,
|
|
|
|
activeCategory: "all", // all, weapon, useable, craftable, unique
|
|
|
|
toShowFactions: [],
|
|
allFactions: [],
|
|
gangsFactions: [],
|
|
familiesFactions: [],
|
|
mobsFactions: [],
|
|
crewsFactions: [],
|
|
|
|
factionTypes: ["gangs", "families", "mobs", "crews"],
|
|
|
|
selectedFaction: false,
|
|
selectedFactionInputs: [
|
|
{ id: 0, label: "Faction Label", value: "", inputImage: "img/JobLabelNameTypeInputBg.png" },
|
|
{ id: 1, label: "Faction Name (Command Name)", value: "", inputImage: "img/JobLabelNameTypeInputBg.png" },
|
|
{ id: 2, label: "Faction Type", value: "", inputImage: "img/JobLabelNameTypeInputBg.png" },
|
|
{ id: 3, label: "Faction Ranks", value: "", inputImage: "img/JobGradesInputBg.png" },
|
|
{ id: 4, label: "Faction Players", value: "", inputImage: "img/JobPlayersInputBg.png" },
|
|
{ id: 5, label: "Faction's Highest Rank Player", value: "", pIdentifier: "", inputImage: "img/JobHRPInputBg.png" },
|
|
],
|
|
selectedImageUrl: "",
|
|
selectedFile: undefined,
|
|
|
|
selectedGrade: undefined,
|
|
gradePlayers: undefined,
|
|
rightBoxCategory: "players", // players, grades, gradeplayers
|
|
|
|
popup: undefined
|
|
},
|
|
components : {
|
|
"m-navbar": navbarComp,
|
|
"left-navbar": leftNavbarComp
|
|
},
|
|
watch: {
|
|
searchValue: function(newValue) {
|
|
this.toShowFactions = this[this.activeCategory+"Factions"]
|
|
this.toShowFactions = this.toShowFactions.filter(
|
|
item =>
|
|
item.label.toLowerCase().includes(newValue.toLowerCase()) ||
|
|
item.code.toLowerCase().includes(newValue.toLowerCase())
|
|
)
|
|
}
|
|
},
|
|
methods: {
|
|
inspectPlayer: function(identifier) {
|
|
if (!identifier) return
|
|
location.href = `/Panel/Players/Info/#uid=${identifier}`
|
|
},
|
|
|
|
triggerFileInput: function() {
|
|
if (this.userPermissions["Factions"][3] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
document.getElementById("vinfo-left-right-realFile").click()
|
|
},
|
|
|
|
changeSelectedImage: function(event) {
|
|
if (this.userPermissions["Factions"][3] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
const SentFile = event.target.files[0]
|
|
const fileReader = new FileReader()
|
|
let imageUrl = ""
|
|
const vm = this
|
|
fileReader.addEventListener("load", () => {
|
|
imageUrl = fileReader.result
|
|
vm.selectedFile = SentFile
|
|
console.log(SentFile.path)
|
|
vm.selectedImage = imageUrl
|
|
})
|
|
fileReader.readAsDataURL(SentFile)
|
|
},
|
|
|
|
openSetJobPopup: function() {
|
|
this.popup = {
|
|
grade: "",
|
|
level: "",
|
|
type: "setjob"
|
|
}
|
|
},
|
|
|
|
openGradeJobPopup: function(grade, level) {
|
|
this.popup = {
|
|
grade,
|
|
level,
|
|
type: "setgrade"
|
|
}
|
|
},
|
|
|
|
uploadImage: async function() {
|
|
if (this.userPermissions["Factions"][3] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
if (this.selectedImageUrl && this.selectedImageUrl.includes(":")) {
|
|
let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeFactionLogoByLink.lvorex`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
key: sha1(sessionStorage.getItem("uid-key")),
|
|
faction: this.selectedFaction.code,
|
|
link: this.selectedImageUrl
|
|
})
|
|
})
|
|
result = await result.json()
|
|
if (result.code !== 200) return console.log(result.message)
|
|
document.getElementById("vinfo-left-right-file").style.backgroundImage = `url(${this.selectedImageUrl})`
|
|
this.selectedFaction.image = this.selectedImageUrl
|
|
return
|
|
}
|
|
if (!this.selectedImage) return
|
|
console.log(this.selectedFile)
|
|
const formData = new FormData()
|
|
formData.append("file", this.selectedFile)
|
|
formData.append("key", sha1(sessionStorage.getItem("uid-key")))
|
|
formData.append("faction", this.selectedFaction.code)
|
|
let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeFactionLogo.lvorex`, {
|
|
method: "POST",
|
|
body: formData
|
|
})
|
|
result = await result.json()
|
|
if (result.code !== 200) return console.log(result.message)
|
|
|
|
document.getElementById("vinfo-left-right-file").style.backgroundImage = `url(${this.selectedImage})`
|
|
this.selectedFaction.image = this.selectedImage
|
|
this.selectedImage = undefined
|
|
},
|
|
|
|
clearImage: async function() {
|
|
if (this.userPermissions["Factions"][3] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/clearFactionLogo.lvorex`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
key: sha1(sessionStorage.getItem("uid-key")),
|
|
faction: this.selectedFaction.code
|
|
})
|
|
})
|
|
result = await result.json()
|
|
if (result.code !== 200) return console.log(result.message)
|
|
|
|
document.getElementById("vinfo-left-right-file").style.backgroundImage = ""
|
|
this.selectedFaction.image = "img/DefaultFactionIcon.png"
|
|
this.selectedImage = undefined
|
|
},
|
|
|
|
changeCategory: async function(changeto) {
|
|
this.activeCategory = changeto
|
|
this.toShowFactions = this[changeto+"Factions"]
|
|
},
|
|
|
|
changeJobType: async function() {
|
|
if (this.userPermissions["Factions"][2] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
const currentTypeIndex = this.factionTypes.findIndex(t => t === this.selectedFaction.type)
|
|
|
|
this.selectedFaction.type = this.factionTypes[currentTypeIndex + 1] === undefined ? this.factionTypes[0] : this.factionTypes[currentTypeIndex + 1]
|
|
this.selectedFactionInputs[2].value = this.factionTypes[currentTypeIndex + 1] === undefined ? this.factionTypes[0] : this.factionTypes[currentTypeIndex + 1]
|
|
this.allFactions.find(j => j.code === this.selectedFaction.code).type = this.factionTypes[currentTypeIndex + 1] === undefined ? this.factionTypes[0] : this.factionTypes[currentTypeIndex + 1]
|
|
|
|
let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeFactionType.lvorex`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
key: sha1(sessionStorage.getItem("uid-key")),
|
|
faction: this.selectedFaction.code,
|
|
type: this.selectedFaction.type
|
|
})
|
|
})
|
|
result = await result.json()
|
|
if (result.code !== 200) return console.log(result.message)
|
|
|
|
this.gangsFactions = this.allFactions.filter(f => f.type === 'gangs')
|
|
this.familiesFactions = this.allFactions.filter(f => f.type === 'families')
|
|
this.mobsFactions = this.allFactions.filter(f => f.type === 'mobs')
|
|
this.crewsFactions = this.allFactions.filter(f => f.type === 'crews')
|
|
},
|
|
|
|
selectItem: function(item) {
|
|
if (this.userPermissions["Factions"][1] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
this.selectedFaction = item
|
|
|
|
this.selectedFactionInputs[0].value = item.label
|
|
this.selectedFactionInputs[1].value = item.code
|
|
this.selectedFactionInputs[2].value = item.type
|
|
this.selectedFactionInputs[3].value = Object.entries(item.grades).length+" Rank"
|
|
this.selectedFactionInputs[4].value = item.factionMembers.length+" Player",
|
|
this.selectedFactionInputs[5].value = item.mostRankedPlayer.name === '' ? 'Not Found.' : item.mostRankedPlayer.name,
|
|
this.selectedFactionInputs[5].pIdentifier = item.mostRankedPlayer.identifier
|
|
},
|
|
|
|
selectGrade: function(grade) {
|
|
this.gradePlayers = this.selectedFaction.factionMembers.filter(p => Number(p.grade) === Number(grade))
|
|
this.selectedGrade = {
|
|
name: Object.entries(this.selectedFaction.grades).find(([k , v]) => k === grade)[1].name,
|
|
level: Object.entries(this.selectedFaction.grades).find(([k , v]) => k === grade)[0]
|
|
}
|
|
this.rightBoxCategory = "gradeplayers"
|
|
},
|
|
|
|
autoCompleteWithGradeName: function(event) {
|
|
const inputElement = event.target
|
|
if (
|
|
inputElement.value === '' ||
|
|
inputElement.value.includes(" ") ||
|
|
isNaN(Number(inputElement.value)) ||
|
|
!this.selectedFaction.grades[Number(inputElement.value)]
|
|
) return
|
|
this.popup.level = event.target.value
|
|
this.popup.grade = this.selectedFaction.grades[Number(inputElement.value)].name
|
|
inputElement.disabled = true
|
|
},
|
|
|
|
setJobToPlayer: async function() {
|
|
if (this.userPermissions["Factions"][4] === false) {
|
|
this.newNotify = {
|
|
desc: "Your rank is not enough.",
|
|
author: "System"
|
|
}
|
|
return
|
|
}
|
|
|
|
let gradeLevel = this.popup.level
|
|
let pIdentifier = document.getElementById("popupPlayerIdentifier").value
|
|
if (
|
|
!pIdentifier ||
|
|
pIdentifier === "" ||
|
|
pIdentifier.includes(" ")
|
|
) return
|
|
|
|
let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changePlayerFaction.lvorex`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
key: sha1(sessionStorage.getItem("uid-key")),
|
|
faction: this.selectedFaction.code,
|
|
factionLevel: gradeLevel,
|
|
pIdentifier: pIdentifier
|
|
})
|
|
})
|
|
result = await result.json()
|
|
if (result.code !== 200) return console.log(result.message)
|
|
this.popup = undefined
|
|
},
|
|
|
|
goBackToGrades: function() {
|
|
this.gradePlayers = undefined
|
|
this.selectedGrade = undefined
|
|
this.rightBoxCategory = "grades"
|
|
},
|
|
|
|
goBackToItemsPage: function() {
|
|
this.selectedFaction = false
|
|
this.selectedFactionInputs = [
|
|
{ id: 0, label: "Faction Label", value: "", inputImage: "img/JobLabelNameTypeInputBg.png" },
|
|
{ id: 1, label: "Faction Name (Command Name)", value: "", inputImage: "img/JobLabelNameTypeInputBg.png" },
|
|
{ id: 2, label: "Faction Type", value: "", inputImage: "img/JobLabelNameTypeInputBg.png" },
|
|
{ id: 3, label: "Faction Ranks", value: "", inputImage: "img/JobGradesInputBg.png" },
|
|
{ id: 4, label: "Faction Players", value: "", inputImage: "img/JobPlayersInputBg.png" },
|
|
{ id: 5, label: "Faction's Highest Rank Player", value: "", pIdentifier: "", inputImage: "img/JobHRPInputBg.png" },
|
|
]
|
|
this.rightBoxCategory = "players"
|
|
this.gradePlayers = undefined
|
|
this.selectedGrade = undefined
|
|
}
|
|
},
|
|
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(`${location.protocol}//${location.hostname}:${location.port}/getAllFactions.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.message)
|
|
this.allFactions = result.message
|
|
this.toShowFactions = this.allFactions
|
|
this.gangsFactions = this.allFactions.filter(f => f.type === 'gangs')
|
|
this.familiesFactions = this.allFactions.filter(f => f.type === 'families')
|
|
this.mobsFactions = this.allFactions.filter(f => f.type === 'mobs')
|
|
this.crewsFactions = this.allFactions.filter(f => f.type === 'crews')
|
|
// this.stateFactions = this.allFactions.filter(j => j.type === 'state')
|
|
// this.corpFactions = this.allFactions.filter(j => j.type === 'corp')
|
|
|
|
document.getElementById("panel-content").style.backgroundImage = `url(../../img/panel${this.darkMode === true ? "Dark" : "Light"}ModeJobs.png)`
|
|
document.getElementById("loading-container").style.opacity = 0
|
|
}
|
|
}) |