282 lines
13 KiB
JavaScript
282 lines
13 KiB
JavaScript
var navbarComp = {
|
|
props: ["homehref", "loginhref", "rightbutton", "colorofbutton"],
|
|
methods: {
|
|
MainPage: function() {
|
|
if (location.pathname.includes("/Panel/")) {
|
|
if (location.pathname === "/Panel/Dashboard/") return
|
|
location.href = "/Panel/Dashboard/"
|
|
} else {
|
|
if (location.pathname === "/home/") return
|
|
location.href = "/"
|
|
}
|
|
}
|
|
},
|
|
template: `
|
|
<div id="navbar-container">
|
|
<div id="footer-container">
|
|
<p>COPYRIGHT © 2024 - 2025 CodeM, All rights Reserved</p>
|
|
</div>
|
|
<div id="navbar-logo-container">
|
|
<a @click="MainPage()"><div id="navbar-logo">LVO<br>LVO</div></a>
|
|
<a @click="MainPage()"><div id="navbar-title" class="blue-white-linear">Admin</div></a>
|
|
</div>
|
|
<div id="navbar-pages-container">
|
|
<a href="https://codem.tebex.io/" target="_blank">CodeM</a>
|
|
<a href="https://discord.gg/codem" target="_blank">Discord</a>
|
|
<a href="https://codem.gitbook.io/codem-documentation/m-series/madmin-panel" target="_blank">Docs</a>
|
|
<a :href="loginhref" :class="colorofbutton">{{ rightbutton }}</a>
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
var leftNavbarComp = {
|
|
props: ["activepage", "innerfolder"],
|
|
data: function() { return {
|
|
DataActivePage: "Not Found",
|
|
ServerItems: [
|
|
{ title: "Dashboard", status: false, style: { marginTop: 0 }, href: "/Panel/Dashboard/", activeColor: "#01C9E4" },
|
|
{ title: "Players", status: false, href: "/Panel/Players/", activeColor: "#CC39FF" },
|
|
{ title: "Accounts", status: false, href: "/Panel/Accounts", activeColor: "#FF6939" },
|
|
{ title: "Live Map", status: false, href: "/Panel/LiveMap", activeColor: "#39FF88" },
|
|
{ title: "Vehicles", status: false, href: "/Panel/Vehicles", activeColor: "#39FFD0" },
|
|
{ title: "Items", status: false, href: "/Panel/Items", activeColor: "#39FF71" },
|
|
{ title: "Jobs", status: false, href: "/Panel/Jobs", activeColor: "#90FF39" },
|
|
{ title: "Factions", status: false, href: "/Panel/Factions", activeColor: "#D7FF39" },
|
|
{ title: "Logs", status: false, href: "/Panel/Logs", activeColor: "#FFC839" }
|
|
],
|
|
|
|
DevelopmentItems: [
|
|
{ title: "Live Console", status: false, style: { marginTop: 0 }, href: "/Panel/LiveConsole", activeColor: "#FFD4AC" },
|
|
{ title: "Resources", status: false, href: "/Panel/Resources", activeColor: "#FFACAC" },
|
|
],
|
|
|
|
AdministratorItems: [
|
|
{ title: "Admins", status: false, style: { marginTop: 0 }, href: "/Panel/Admins", activeColor: "#FF3939" },
|
|
{ title: "Management", status: false, href: "/Panel/Management", activeColor: "#FF395D" },
|
|
{ title: "Settings", status: false, href: "/Panel/Settings", style: { marginTop: 0 }, activeColor: "#FFFF" }
|
|
],
|
|
|
|
ServerCategory: true,
|
|
DevelopmentCategory: true
|
|
} },
|
|
|
|
template: `
|
|
<div id="left-navbar-container">
|
|
<p v-if="ServerCategory" style="margin-left: 2.7778vh; font-size: .6771vw; color: rgba(255, 255, 255, 0.26);">Server</p>
|
|
<div id="navbar-category">
|
|
<a v-for="data in ServerItems" @mouseover="data.status !== 'active' ? data.status = true : ''" @mouseleave="data.status === 'active' ? '' : data.status = false" v-if="data.hidden !== true" @click="changePageHref(data)"><div id="category-item" :class="data.status" :style="data.style">
|
|
<div id="icon" :style="{ opacity: data.status !== false ? '1' : '' }">
|
|
<img class="left-navbar-icon" v-if="data.status === false" :src="\`\${innerfolder ? '../' : ''}\`+'../img/'+data.title.replaceAll(' ', '')+'Inactive.png'"></img>
|
|
<img class="left-navbar-icon" v-else :src="\`\${innerfolder ? '../' : ''}\`+'../img/'+data.title.replaceAll(' ', '')+'Active.png'"></img>
|
|
</div>
|
|
<span :style="{ color: data.status !== false ? data.activeColor : '', opacity: data.status !== false ? '1' : '' }">{{ data.title }}</span>
|
|
</div></a>
|
|
</div>
|
|
|
|
<p v-if="DevelopmentCategory" style="margin-left: 2.7778vh; font-size: .6771vw; color: rgba(255, 255, 255, 0.26); margin-top: 2.963vh;">Development</p>
|
|
<div id="navbar-category">
|
|
<a v-for="data in DevelopmentItems" @mouseover="data.status !== 'active' ? data.status = true : ''" @mouseleave="data.status === 'active' ? '' : data.status = false" v-if="data.hidden !== true" @click="changePageHref(data)"><div id="category-item" :class="data.status" :style="data.style">
|
|
<div id="icon" :style="{ opacity: data.status !== false ? '1' : '' }">
|
|
<img class="left-navbar-icon" v-if="data.status === false" :src="\`\${innerfolder ? '../' : ''}\`+'../img/'+data.title.replaceAll(' ', '')+'Inactive.png'"></img>
|
|
<img class="left-navbar-icon" v-else :src="\`\${innerfolder ? '../' : ''}\`+'../img/'+data.title.replaceAll(' ', '')+'Active.png'"></img>
|
|
</div>
|
|
<span :style="{ color: data.status !== false ? data.activeColor : '', opacity: data.status !== false ? '1' : '' }">{{ data.title }}</span>
|
|
</div></a>
|
|
</div>
|
|
|
|
<p v-if="AdministratorItems.find(i => i.hidden !== true)" style="margin-left: 2.7778vh; font-size: .6771vw; color: rgba(255, 255, 255, 0.26); margin-top: 2.963vh;">Administrator</p>
|
|
<div id="navbar-category">
|
|
<a v-for="data in AdministratorItems" @mouseover="data.status !== 'active' ? data.status = true : ''" @mouseleave="data.status === 'active' ? '' : data.status = false" v-if="data.hidden !== true" @click="changePageHref(data)"><div id="category-item" :class="data.status" :style="data.style">
|
|
<div id="icon" :style="{ opacity: data.status !== false ? '1' : '' }">
|
|
<img class="left-navbar-icon" v-if="data.status === false" :src="\`\${innerfolder ? '../' : ''}\`+'../img/'+data.title.replaceAll(' ', '')+'Inactive.png'"></img>
|
|
<img class="left-navbar-icon" v-else :src="\`\${innerfolder ? '../' : ''}\`+'../img/'+data.title.replaceAll(' ', '')+'Active.png'"></img>
|
|
</div>
|
|
<span :style="{ color: data.status !== false ? data.activeColor : '', opacity: data.status !== false ? '1' : '' }">{{ data.title }}</span>
|
|
</div></a>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
methods: {
|
|
changePageHref: function(pageData) {
|
|
const ActivePage = this._props.activepage
|
|
if (!pageData.title || !ActivePage) return
|
|
if (ActivePage === pageData.title) return
|
|
location.href = pageData.href
|
|
},
|
|
},
|
|
|
|
created: async function() {
|
|
this.DataActivePage = this.activepage
|
|
const framework = sessionStorage.getItem("framework")
|
|
|
|
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 permissions = userDetails.permissions
|
|
if (this.activepage !== "Settings") {
|
|
if (permissions[this.activepage.replace(' ', '')][0] === false) {
|
|
location.href = "/"
|
|
return
|
|
}
|
|
}
|
|
|
|
if (this.activepage === "Factions") {
|
|
if (framework.includes("esx")) {
|
|
location.href = "/"
|
|
return
|
|
}
|
|
}
|
|
|
|
let serversCategory = []
|
|
this.ServerItems.forEach(i => {
|
|
const perm = permissions[i.title.replace(' ', '')][0]
|
|
serversCategory.push(perm)
|
|
if (perm === false) {
|
|
i.hidden = true
|
|
}
|
|
if (i.title === "Factions" && framework.includes("esx") && i.hidden !== true) {
|
|
i.hidden = true
|
|
}
|
|
})
|
|
let developmentCategory = []
|
|
this.DevelopmentItems.forEach(i => {
|
|
const perm = permissions[i.title.replace(' ', '')][0]
|
|
developmentCategory.push(perm)
|
|
if (perm === false) {
|
|
i.hidden = true
|
|
}
|
|
})
|
|
|
|
if (!serversCategory.find(i => i === true)) {
|
|
this.ServerCategory = false
|
|
}
|
|
if (!developmentCategory.find(i => i === true)) {
|
|
this.DevelopmentCategory = false
|
|
}
|
|
|
|
this.AdministratorItems.forEach(i => {
|
|
if (i.title === "Settings") {
|
|
i.hidden = false
|
|
return
|
|
}
|
|
if (permissions[i.title.replace(' ', '')][0] === false) {
|
|
i.hidden = true
|
|
}
|
|
})
|
|
|
|
let activePageIndex = null
|
|
let activePageCategory = null
|
|
const categories = [ "ServerItems", "DevelopmentItems", "AdministratorItems" ]
|
|
for (const category of categories) {
|
|
Object.entries(this[category]).forEach(([key, value]) => {
|
|
if (value.title === this.activepage) {
|
|
activePageIndex = key
|
|
activePageCategory = category
|
|
}
|
|
})
|
|
}
|
|
|
|
if (activePageIndex === null || activePageCategory === null) return
|
|
this[activePageCategory][activePageIndex].status = "active"
|
|
}
|
|
}
|
|
|
|
Vue.component("notify-menu", {
|
|
props: ["notifymenu", "twolayer"],
|
|
data: function() { return{
|
|
notifications: []
|
|
}},
|
|
created: async function() {
|
|
let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getPlayerNotifications.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.notifications = result.message
|
|
},
|
|
methods: {
|
|
closeNotifyMenu: function() {
|
|
this.$emit("closenotifymenu")
|
|
},
|
|
|
|
clearNotifications: async function() {
|
|
let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/clearAllUserNotifications.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.notifications = []
|
|
}
|
|
},
|
|
template: `
|
|
<div id="notifies-menu-container" v-if="notifymenu">
|
|
<div id="notify-menu-header">
|
|
<img :src="twolayer ? '../../../img/notifyIcon.png' : '../../img/notifyIcon.png'" class="bell" alt="notifyIcon">
|
|
<span>Notification Center</span>
|
|
<img :src="twolayer ? '../../../img/cancelImg.png' : '../../img/cancelImg.png'" class="cancel" alt="cancelIcon" @click="closeNotifyMenu()">
|
|
</div>
|
|
<div id="notify-menu-line"></div>
|
|
|
|
<div id="notify-menu-notifies">
|
|
<div id="notify-menu-item" v-for="data in notifications">
|
|
<div id="notify-item-header">
|
|
<img :src="twolayer ? '../../../img/notifyIcon.png' : '../../img/notifyIcon.png'" alt="notifyIcon">
|
|
<span>Notification</span>
|
|
</div>
|
|
<span class="notify-content">{{ data.desc+' by '+data.author }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="notify-menu-line" style="margin-top: 0.9259vh;"></div>
|
|
<div id="notify-menu-bottom">
|
|
<span @click="clearNotifications()">Delete All</span>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
|
|
Vue.component("new-notify", {
|
|
props: ["newnotify", "twolayer"],
|
|
data: {},
|
|
methods: {
|
|
closeMenu: function() {
|
|
this.$emit("closenewnotify")
|
|
}
|
|
},
|
|
template: `
|
|
<transition name="newnotify">
|
|
<div id="new-notify-container" v-if="newnotify">
|
|
<div id="new-notify-header">
|
|
<img :src="twolayer ? '../../../img/notifyIcon.png' : '../../img/notifyIcon.png'" class="notifyIcon" alt="notifyIcon">
|
|
<span>New Notification</span>
|
|
<img :src="twolayer ? '../../../img/cancelImg.png' : '../../img/cancelImg.png'" class="cancelIcon" alt="cancelIcon" @click="closeMenu()">
|
|
</div>
|
|
<span class="desc">{{ newnotify.author ? newnotify.desc+' by '+newnotify.author : newnotify.desc }}</span>
|
|
</div>
|
|
</transition>
|
|
`
|
|
}) |