658 lines
59 KiB
HTML
658 lines
59 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="stylesheet" href="../../../globalcss.css">
|
||
<link rel="stylesheet" href="../../panel.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="shortcut icon" href="../../../img/logo.png" type="image/x-icon">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha1/0.6.0/sha1.min.js"></script>
|
||
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
|
||
<title>M-Panel | Players</title>
|
||
</head>
|
||
<body>
|
||
<div id="loading-container" class="panel">
|
||
<div id="loading-item"></div>
|
||
</div>
|
||
|
||
<div id="app" @click="resetSelectMenu($event)">
|
||
<m-navbar
|
||
loginhref="/Login/"
|
||
homehref="/"
|
||
rightbutton="Sign Out"
|
||
colorofbutton="yellow-white-linear"
|
||
></m-navbar>
|
||
<div id="background-front"></div>
|
||
<div id="background"></div>
|
||
<div id="page-content-container">
|
||
<div id="panel-content">
|
||
<Transition name="fade">
|
||
<div id="inv-popup-container" v-if="invPopup">
|
||
<div id="inv-popup-box" class="deleteItem" style="overflow: hidden;" v-if="invPopup === 'deleteItem'">
|
||
<div style="width: 100%; height: auto; display: flex; justify-content: end; margin-top: 1.4815vh;">
|
||
<div id="inv-popup-close" @click="invPopup = false"></div>
|
||
</div>
|
||
<div id="inv-inventory-item-box" style="background-image: url(img/InvItemBoxDeleteBg.png); width: 7.8704vh; height: 7.8704vh;">
|
||
<div id="inv-item-box-header">
|
||
<div id="item-header-slot" style="opacity: 0"></div>
|
||
<span style="font-size: .4167vw; opacity: 0.36; font-family: 'Proxima Nova'; margin-right: 0.5556vh; margin-top: 0.5556vh;">{{ inventoryDeletePopup.amount+'x' }}</span>
|
||
</div>
|
||
<div style="width: 100%; height: auto; display: flex; justify-content: center; align-items: center; margin-top: 0.463vh;">
|
||
<img :src="'../../../Assets/'+inventoryDeletePopup.icon" alt="icon">
|
||
</div>
|
||
<span style="font-size: .5208vw; font-family: 'Proxima Nova'; font-weight: 700; width: 90%; text-align: center; margin-top: 1.6667vh; margin-left: 0.3704vh; overflow: hidden;">{{ inventoryDeletePopup.name.toUpperCase() }}</span>
|
||
</div>
|
||
<span style="font-size: 1.3889vh; margin-top: 2.7778vh; font-weight: 600; width: 19.3519vh; text-align: center;">
|
||
Are you sure to delete this item from character’s inventory ?
|
||
</span>
|
||
<span style="font-size: 0.9259vh; opacity: 0.35; font-weight: 400; margin-top: 1.6667vh;">
|
||
This action can not be undone!
|
||
</span>
|
||
<div style="display: flex; margin-top: 2.6852vh; width: 100%; justify-content: center;">
|
||
<div id="inv-popup-button" class="cancelButton" style="margin-right: 5.1852vh;" @click="invPopup = false">Cancel</div>
|
||
<div id="inv-popup-button" class="deleteButton" @click="inventoryDeleteItem">Delete</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="inv-popup-box" class="addItem" style="overflow: hidden;" v-if="invPopup === 'addItem'">
|
||
<span style="font-size: 1.3889vh; font-weight: 600; margin-top: 1.8519vh; margin-left: 1.8519vh;">Add Item To Inventory</span>
|
||
<input type="text" @keyup.esc="$event.target.blur(); inventoryAddInputSelectMenu = false" placeholder="Item Name" id="inv-popup-input" v-model="inventoryItemsAddItemInput" @click="inventoryAddInputSelectMenu = true">
|
||
<Transition name="fade">
|
||
<div id="inv-popup-selectmenu" v-if="inventoryAddInputSelectMenu">
|
||
<div id="inv-selectmenu-item" v-for="(data, key) in serverItemsShow" :class="{ last: serverItemsShow.length-1 === key ? true : false }" @click="inventoryItemsAddItemInput = data.name; inventoryItemsAddItemIcon = data.image; inventoryAddInputSelectMenu = false;">
|
||
<img :src="'../../../Assets/'+data.image" alt="itemIcon">
|
||
<span style="margin-left: 1.1111vh;">{{ data.name }}</span>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
<input type="text" placeholder="Amount" id="inv-popup-input" v-model="inventoryItemsAddItemAmount">
|
||
<div style="display: flex; margin-top: 2.6852vh; width: 100%; justify-content: center;">
|
||
<div id="inv-popup-button" class="cancelButton" style="margin-right: 5.1852vh;" @click="invPopup = false">Cancel</div>
|
||
<div id="inv-popup-button" style="background-color: #6C39FF; box-shadow: 0 0.0926vh 8.5185vh 0 rgba(108, 57, 255, 0.40);" @click="inventoryAddItem()">Add</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="inv-popup-box" class="clearInv" style="overflow: hidden;" v-if="invPopup === 'clearInv'">
|
||
<span style="width: 16.2963vh; font-size: 1.3889vh; font-weight: 600; margin-top: 14.3519vh; text-align: center;">
|
||
Are you sure to delete this character inventory ?
|
||
</span>
|
||
<span style="font-size: 0.9259vh; opacity: 0.35; margin-top: 1.6667vh;">
|
||
This action can not be undone!
|
||
</span>
|
||
<div style="display: flex; margin-top: 2.1296vh; width: 100%; justify-content: center;">
|
||
<div id="inv-popup-button" class="cancelButton" style="margin-right: 5.1852vh;" @click="invPopup = false">Cancel</div>
|
||
<div id="inv-popup-button" style="background-color: #FF1E46; box-shadow: 0 0.0926vh 8.5185vh 0 rgba(255, 30, 70, 0.40);" @click="clearInventory()">Delete</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
|
||
<Transition name="fade">
|
||
<div id="pactions-popup-container" v-if="playerActionsPopUp">
|
||
<div id="pactions-popup-box" :style="{ backgroundImage: `url(img/${playerActionsPopUp.background}.png)` }">
|
||
<div id="pactions-popup-box-container">
|
||
<div id="pactions-popup-title-box">
|
||
<span class="popupTitle">{{ playerActionsPopUp.title }}</span>
|
||
<img src="img/PActionsPopupCancel.png" alt="" @click="playerActionsPopUp = undefined">
|
||
</div>
|
||
<div id="pactions-popup-inputs">
|
||
<textarea type="text" :placeholder="playerActionsPopUp.inputPlaceHolder" v-model="playerActionsPopUp.inputValue" :value="playerActionsPopUp.inputValue"></textarea>
|
||
<div id="pactions-popup-time-selector" v-if="!playerActionsPopUp.isInputSingle">
|
||
<div id="pactions-popup-time-selector-content">
|
||
<span class="popupTimeSelectorTitle">Time</span>
|
||
<div id="pactions-popup-time-fast-boxes">
|
||
<div id="pactions-popup-time-fast-box" v-for="data in playerActionsPopUp.timeSelectors" @mouseover="data.hovering = true" @mouseleave="data.hovering = false" @click="const activity = data.active; playerActionsPopUp.timeSelectors.forEach(s => s.active = false); data.active = !activity;" :style="{ backgroundColor: data.active || data.hovering ? playerActionsPopUp.timeSelectorActiveColor : '' }">{{ data.title }}</div>
|
||
</div>
|
||
<span class="popupTimeSelectorTitle">Custom Time</span>
|
||
<div id="pactions-popup-time-inputs">
|
||
<input type="number" v-for="data in playerActionsPopUp.timeInputs" v-model="data.value" :placeholder="data.title" :style="{ border: data.clicked ? '.0521vw solid '+playerActionsPopUp.buttonColor : '' }" @click="playerActionsPopUp.timeInputs.forEach(s => s.clicked = false); playerActionsPopUp.timeSelectors.forEach(s => s.active = false); data.clicked = true;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="pactions-popup-buttons">
|
||
<div id="pactions-popup-button" @click="playerActionsPopUp = undefined" :style="{ width: playerActionsPopUp.isInputSingle === true ? '' : '23.8667vh' }">
|
||
<span>Cancel</span>
|
||
</div>
|
||
<div id="pactions-popup-button" :style="{ backgroundColor: playerActionsPopUp.buttonColor }" @click="playerActionsPopUp.buttonFunction()">
|
||
<span>{{ playerActionsPopUp.buttonName }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
|
||
<left-navbar
|
||
activepage="Players"
|
||
innerfolder="true"
|
||
></left-navbar>
|
||
<div id="right-page-container">
|
||
<div id="header-content">
|
||
<p style="margin-left: 3.4259vh; font-size: 1.6667vw; font-weight: 600;">Players</p>
|
||
|
||
<div id="search-players-container">
|
||
<input type="text" placeholder="Search players" v-model="searchValue">
|
||
</div>
|
||
|
||
<notify-menu :notifymenu="notifyMenu" twolayer="true" @closenotifymenu="notifyMenu = false"></notify-menu>
|
||
<new-notify :newnotify="newNotify" twolayer="true" @closenewnotify="newNotify = false"></new-notify>
|
||
|
||
<div id="notify-container" v-if="!notifyMenu && !newNotify" @click="notifyMenu = true">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width=".9375vw" height="1.0417vw" viewBox="0 0 19 21" fill="none">
|
||
<g clip-path="url(#clip0_103_3053)">
|
||
<path d="M1.47461 16.709H16.9531C17.4154 16.709 17.7767 16.6016 18.0371 16.3867C18.2975 16.1719 18.4277 15.8854 18.4277 15.5273C18.4277 15.2018 18.3333 14.8861 18.1445 14.5801C17.9557 14.2741 17.7197 13.9746 17.4365 13.6816C17.1533 13.3887 16.8717 13.0957 16.5918 12.8027C16.3769 12.5814 16.2093 12.2917 16.0889 11.9336C15.9684 11.5755 15.8789 11.1947 15.8203 10.791C15.7617 10.3873 15.7194 9.99671 15.6934 9.61914C15.6869 9.30013 15.6755 8.98925 15.6592 8.68652C15.6429 8.38379 15.6185 8.08919 15.5859 7.80273C15.3385 7.90039 15.0846 7.97526 14.8242 8.02734C14.5638 8.07943 14.2936 8.10547 14.0137 8.10547C13.1478 8.10547 12.3584 7.89225 11.6455 7.46582C10.9326 7.03939 10.363 6.4681 9.93652 5.75195C9.51009 5.0358 9.29688 4.24804 9.29688 3.38867C9.29688 2.80924 9.39779 2.25911 9.59961 1.73828C9.80143 1.21745 10.0749 0.751953 10.4199 0.341797C10.0553 0.159505 9.65169 0.0683594 9.20898 0.0683594C8.49284 0.0683594 7.89063 0.289714 7.40234 0.732422C6.91406 1.17513 6.57877 1.71549 6.39648 2.35352C5.5306 2.66602 4.83236 3.1543 4.30176 3.81836C3.77116 4.48242 3.38216 5.30273 3.13477 6.2793C2.88737 7.25586 2.75391 8.36914 2.73438 9.61914C2.70833 9.99671 2.66601 10.3873 2.60742 10.791C2.54883 11.1947 2.45931 11.5755 2.33887 11.9336C2.21842 12.2917 2.05078 12.5814 1.83594 12.8027C1.55599 13.0957 1.27442 13.3887 0.991211 13.6816C0.708008 13.9746 0.472005 14.2741 0.283203 14.5801C0.094401 14.8861 0 15.2018 0 15.5273C0 15.8854 0.130208 16.1719 0.390625 16.3867C0.651042 16.6016 1.01237 16.709 1.47461 16.709ZM9.20898 20.625C9.76239 20.625 10.2572 20.5046 10.6934 20.2637C11.1296 20.0228 11.4795 19.707 11.7432 19.3164C12.0069 18.9258 12.1615 18.5026 12.207 18.0469H6.2207C6.25977 18.5026 6.41276 18.9258 6.67969 19.3164C6.94662 19.707 7.29818 20.0228 7.73438 20.2637C8.17057 20.5046 8.66211 20.625 9.20898 20.625Z" fill="white"/>
|
||
<path d="M14.0234 6.77734C14.6354 6.77734 15.1985 6.62435 15.7129 6.31836C16.2272 6.01237 16.6374 5.60222 16.9434 5.08789C17.2493 4.57357 17.4023 4.00716 17.4023 3.38867C17.4023 2.77018 17.2493 2.20378 16.9434 1.68945C16.6374 1.17513 16.2272 0.764974 15.7129 0.458984C15.1985 0.152995 14.6354 0 14.0234 0C13.3984 0 12.8303 0.152995 12.3193 0.458984C11.8082 0.764974 11.3997 1.17513 11.0938 1.68945C10.7878 2.20378 10.6348 2.77018 10.6348 3.38867C10.6348 4.00716 10.7878 4.57357 11.0938 5.08789C11.3997 5.60222 11.8082 6.01237 12.3193 6.31836C12.8303 6.62435 13.3984 6.77734 14.0234 6.77734Z" fill="#FF3B30"/>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_103_3053">
|
||
<rect width="18.4277" height="20.6934" fill="white"/>
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
|
||
<div id="user-details-container" v-if="!notifyMenu && !newNotify">
|
||
<div id="text-details">
|
||
<p style="font-size: 1.4815vh; font-weight: 700; font-family: 'SF Pro Display';">{{ userUsername }}</p>
|
||
<p class="rank" :style="{ 'color': userRank.color }">{{ userRank.title }}</p>
|
||
</div>
|
||
<div id="user-icon" :style="{ 'border-color': userRank.color, 'background-image': 'url('+userIcon+')', 'background-size': 'cover', 'background-position': 'center' }">
|
||
<div id="circle-user-icon"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="info-content-container">
|
||
<div id="info-player-info-container">
|
||
<div id="player-info-left-navi" :style="{ backgroundImage: leftNaviSelection !== 'info' ? leftNaviSelection !== 'logs' ? 'url(img/playerInfoLeftNaviBgDefault.png)' : 'url(img/playerInfoLeftNaviLogsBg.png)' : 'url(img/playerInfoLeftNaviBg.png)' }">
|
||
<div id="player-info-icon-border" :style="{ borderColor: vip === true && !permaBanned ? '' : permaBanned ? '#FD0B09' : '#CC39FF', boxShadow: vip === true ? '' : '0rem 0rem 1.5208vw -0.625rem #CC39FF' }">
|
||
<div id="player-info-icon" :style="{ 'background-image': 'url('+selectedPlayer.icon+')' }"></div>
|
||
</div>
|
||
<span class="playerId">
|
||
ID {{ selectedPlayer.id }}
|
||
</span>
|
||
<div id="vip-badge-icon-container" style="width: 100%; height: 1.2963vh; display: flex; justify-content: center;">
|
||
<div id="vip-badge-icon" v-if="vip === true && !permaBanned"></div>
|
||
</div>
|
||
<div id="info-left-navi-items">
|
||
<div id="info-left-navi-item" v-for="data in leftNaviItems" @click="changePage(data.id)">
|
||
<div id="info-navi-selector-container">
|
||
<div id="info-navi-selector" v-if="data.id === leftNaviSelection"></div>
|
||
</div>
|
||
|
||
<div id="info-navi-item-border" :class="{ 'active': leftNaviSelection === data.id }">
|
||
<div id="info-navi-item-bg">
|
||
<div id="info-navi-item-icon" :style="{ 'background-image': 'url(img/'+data.icon+'.png)' }"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="info-back-button" @click="backToPlayers()">
|
||
<div id="info-back-button-icon"></div>
|
||
</div>
|
||
</div>
|
||
<div id="info-page-content">
|
||
<div id="ipage-container">
|
||
<div id="ipage-banned-banner" v-if="permaBanned" style="position: absolute; background-color: rgba(255, 63, 63, 0.20); width: 76.3889vh; height: 6.0185vh; left: 25.0926vh; border-radius: 2.8704vh 0.6481vh 0 2.8704vh;"></div>
|
||
<div id="ipage-player-info-container">
|
||
<div id="ipage-player-name-and-status">
|
||
<span class="playerName">
|
||
<span>{{ selectedPlayer.inGameName }}</span>
|
||
<span v-if="vip && !permaBanned">- <span style="color: #FFDE30;">VIP</span></span>
|
||
</span>
|
||
<span class="onlineStatus" :style="{ color: selectedPlayer.status === 'Online' ? '#8BFF30' : '#F34240' }">{{ permaBanned ? `Perma Banned at ${permaBanned.bannedAt} by ${permaBanned.bannedBy}` : selectedPlayer.status }}</span>
|
||
</div>
|
||
<div id="ipage-player-vip-action-container">
|
||
<div id="ipage-player-vip-action" :class="{ take: vip === true, give: vip === false }" @click="takeOrGiveVIP()" v-if="!permaBanned">
|
||
<div id="ipage-player-vip-icon"></div>
|
||
<span>{{ vip === true ? 'Take VIP' : 'Give VIP' }}</span>
|
||
</div>
|
||
<div id="ipage-player-vip-action" :class="{ take: vip === true, give: vip === false }" style="background: rgba(143, 255, 0, 0.25); z-index: 2;" @click="unPermaBanPlayerAction()" v-if="permaBanned">
|
||
<div id="ipage-player-vip-icon" style="background-image: url(img/UnbanIconBg.png); width: 1.6667vh; height: 1.6667vh;"></div>
|
||
<span style="color: #8FFF00;">Unban</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="ipage-seperator"></div>
|
||
<div id="ipage-info-page-container" v-if="leftNaviSelection === 'info'">
|
||
<span class="title">General Information</span>
|
||
<div id="ipage-all-boxes" v-if="selectedPlayer.authorized !== false">
|
||
<div id="ipage-left-boxes">
|
||
|
||
<div id="ipage-left-up-box">
|
||
<div id="ipage-left-up-box-container">
|
||
<span class="boxTitle">ID’s & Licences</span>
|
||
<div id="ipage-input-box" style="margin-top: 0.9259vh;" @click="copyToClipboard('inputaccountId')">
|
||
<span class="inputTitle">Account ID</span>
|
||
<input type="text" readonly class="accountId" :value="selectedPlayer.name" id="inputaccountId">
|
||
</div>
|
||
<div id="ipage-input-box">
|
||
<span class="inputTitle">Discord ID</span>
|
||
<input type="text" readonly class="discordId" :value="selectedPlayer.discordId" id="inputdiscordId" @click="copyToClipboard('inputdiscordId')">
|
||
</div>
|
||
<div id="ipage-input-box">
|
||
<span class="inputTitle">Steam ID</span>
|
||
<input type="text" readonly class="steamId" :value="selectedPlayer.steamId" id="inputsteamId" @click="copyToClipboard('inputsteamId')">
|
||
</div>
|
||
<div id="ipage-input-box">
|
||
<span class="inputTitle">Rockstar License</span>
|
||
<input type="text" readonly class="rockstar" :value="selectedPlayer.rockstarLicense" id="inputrockstarId" @click="copyToClipboard('inputrockstarId')">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="ipage-left-down-box">
|
||
<div id="ipage-left-down-box-container">
|
||
<span class="boxTitle">Job & Faction</span>
|
||
<div id="ipage-input-box" v-for="data in leftDownInputs" :style="{ marginTop: data.class === 'job' ? '0.9259vh' : '1.4815vh' }">
|
||
<span class="inputTitle"> {{ data.title }} </span>
|
||
<div id="ipage-input-container" :class="{ editing: data.editing }">
|
||
<input type="text" :disabled="data.editing === false" :class="data.class" :value="data.value" :id="'input'+data.class">
|
||
<div id="ipage-edit-button" @click="changeEditStatus(data.class)">
|
||
<div id="ipage-edit-icon"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div id="ipage-right-box" :style="{ backgroundImage: rightInputs.find(w => w.class === 'genderInput').value === 'Female' ? '' : 'url(img/CharacterInfoMaleBg.png)' }">
|
||
<div id="ipage-right-box-container">
|
||
<div id="ipage-right-title-container" style="margin-top: 1.8519vh;">
|
||
<span style="font-size: 1.0417vw; font-weight: 500;">Character Info</span>
|
||
<span style="font-size: .625vw; font-weight: 500; opacity: 0.3;">{{ framework.includes('qb') ? 'Last updated' : 'Created' }} at {{ selectedPlayer.created_at }}</span>
|
||
</div>
|
||
<div id="ipage-input-box" v-for="data in rightInputs">
|
||
<span class="inputTitle">{{ data.title }}</span>
|
||
<div id="ipage-input-container" :class="{ editing: data.editing }">
|
||
<input type="text":disabled="!data.editing" :class="data.class" :value="data.value" :id="data.class" :style="!data.editable ? 'width: 100%' : ''">
|
||
<div id="ipage-edit-button" v-if="data.editable" @click="changeEditStatus(data.class, 'yes')">
|
||
<div id="ipage-edit-icon"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="ipage-input-box">
|
||
<span class="inputTitle">Playtime And {{ framework.includes("qb") ? "Last Update Date" : "Creation Date" }}</span>
|
||
<div id="ipage-input-container">
|
||
<input type="text" disabled class="playTimeInput" :value="selectedPlayer.time">
|
||
<input type="text" disabled class="creationDateInput" :value="selectedPlayer.created_at">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="ipage-all-boxes" v-if="selectedPlayer.authorized === false" style="background-image: url(img/GeneralInformationNoPerm.png); background-size: 100%; background-position: center; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 0.9259vh;">
|
||
<span style="font-size: 1.8519vh; font-weight: 500;">Your rank is not enough to display this section.</span>
|
||
<span style="font-size: 0.9259vh; font-weight: 200; opacity: .8;">No data found.</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="ipage-info-page-container" v-if="leftNaviSelection === 'hearth'">
|
||
<span class="title">Character Status</span>
|
||
<div id="ipage-all-boxes">
|
||
<div id="hearth-left-box" :style="{ backgroundImage: selectedPlayer.status === 'Online' ? '' : 'url(img/HearthStatusOfflineBg.png)' }">
|
||
<div id="hearth-left-box-container">
|
||
<span class="boxTitle">Status</span>
|
||
<div id="hearth-offline-message-box" v-if="selectedPlayer.status === 'Offline'">
|
||
<span style="font-size: .625vw; font-family: 'SF Pro Rounded'; font-weight: 600; margin-bottom: 0.9259vh;">Character is offline.</span>
|
||
<span style="opacity: 0.6; font-family: 'SF Pro Rounded'; font-size: .5208vw; font-weight: 500;">No data found.</span>
|
||
</div>
|
||
<div id="hearth-credentials" v-if="selectedPlayer.status === 'Online'">
|
||
<div id="hearth-credential-box" v-for="data in hearthLeftInputs">
|
||
<span class="hCredentialTitle">{{ data.title }}</span>
|
||
<div id="hearth-credential-ibuttons">
|
||
<input type="text" disabled :id="data.class" :style="{ backgroundImage: `url(img/${data.class}Bg.png)` }" :value="data.value+'%'">
|
||
<div id="hearth-credential-action-button" :style="{ backgroundColor: data.color }" @click="hearthSetValue(data.class, 'fill')">FILL</div>
|
||
<div id="hearth-credential-action-button" :style="{ backgroundColor: data.color }" @click="hearthSetValue(data.class, 'drain')">DRAIN</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="hearth-right-box">
|
||
<div id="hearth-right-box-container">
|
||
<span class="boxTitle">Status Log</span>
|
||
<input type="text" placeholder="Search logs" v-model="hearthLogSearchValue">
|
||
<div id="hearth-logs-container">
|
||
<span class="logSpan" v-for="data in hearthToShowLogs">[{{ data.date }}] {{ data.author }} {{ data.message }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="ipage-info-page-container" v-if="leftNaviSelection === 'money'">
|
||
<span class="title">Character Money</span>
|
||
<div id="ipage-all-boxes">
|
||
<div id="money-left-box">
|
||
<div id="money-left-box-container">
|
||
<span class="boxTitle">Moneys</span>
|
||
<div id="money-inputs-container">
|
||
<div id="money-inputs-each" v-for="data in moneyLeftInputs">
|
||
<span class="inputTitle">{{ data.title }}</span>
|
||
<div id="money-input">
|
||
<input type="text" :disabled="!data.editing" :value="data.value" :style="{ backgroundImage: `url(img/Money${data.class}Bg.png)`, color: data.editing ? 'rgba(255, 255, 255, 0.6)' : 'white' }" :id="'Money'+data.class">
|
||
<div id="money-edit-button" :style="{ backgroundColor: data.color }" @click="moneyEditValues(data.class, $event)">
|
||
<div id="money-edit-button-icon" :class="{ editing: data.editing }"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="hearth-right-box">
|
||
<div id="hearth-right-box-container">
|
||
<span class="boxTitle">Money Log</span>
|
||
<input type="text" placeholder="Search logs" v-model="moneyLogsSearchValue">
|
||
<div id="hearth-logs-container">
|
||
<span class="logSpan" v-for="data in moneyToShowLogs">[{{ data.date }}] {{ data.author }} {{ data.message }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="ipage-info-page-container" v-if="leftNaviSelection === 'car' && !showingVehicleInfo">
|
||
<div id="car-page-content">
|
||
<div id="car-page-title-box">
|
||
<span class="contentTitle">Character Vehicles</span>
|
||
<div id="car-page-title-button" v-if="playerVehicles !== 'Not Authorized'" @click="carAddingNewCar = true">Add New Vehicle</div>
|
||
</div>
|
||
<div id="car-cars-container">
|
||
<div id="car-box" class="newCar" v-if="carAddingNewCar">
|
||
<div id="car-box-content">
|
||
<div id="car-basic-infos" class="newCar">
|
||
<span class="brandName">Add New Vehicle</span>
|
||
<span class="modelName" style="margin-top: 0.2778vh;">Fill the blanks</span>
|
||
</div>
|
||
<div id="car-details-container" class="newCar">
|
||
<input type="text" placeholder="Vehicle Hash" id="newCarHashInput">
|
||
<input type="text" placeholder="Plate (blank to auto)" id="newCarPlateInput">
|
||
<input type="text" placeholder="pillboxgarage" id="newCarGarageInput">
|
||
</div>
|
||
<div id="car-seperate-line-box">
|
||
<div id="car-seperate-line"></div>
|
||
</div>
|
||
<span style="width: 100%; text-align: center; font-size: .625vw; font-weight: 600; margin-top: 0.9259vh;" @click="addVehicleToPlayer()">Add New Vehicle</span>
|
||
<span style="width: 100%; text-align: center; font-size: .625vw; font-weight: 600; margin-top: 0.9259vh; color: #FF3030;" @click="carAddingNewCar = false">Cancel</span>
|
||
</div>
|
||
</div>
|
||
<div id="car-box" v-for="data in playerVehicles" @click="selectVehicle(data.plate)">
|
||
<div id="car-box-content">
|
||
<div id="car-basic-infos">
|
||
<span class="brandName">{{ data.brand }}</span>
|
||
<span class="modelName">{{ data.label }}</span>
|
||
<span :class="{ vehicleStatus: true, inGarage: data.status === 1 ? true : false }">{{ data.status === 1 ? 'Vehicle in garage.' : 'Vehicle at outside.' }}</span>
|
||
</div>
|
||
<div id="car-details-container">
|
||
<div id="car-detail">
|
||
<div id="car-detail-icon"></div>
|
||
<span class="carDetail">{{ data.plate }}</span>
|
||
</div>
|
||
<div id="car-detail">
|
||
<div id="car-detail-icon" style="background-image: url(img/CarGarageIcon.png); width: .7292vw;"></div>
|
||
<span class="carDetail" style="margin-left: 1.5741vh;">{{ data.status === 0 ? 'Outside' : data.storedIn }}</span>
|
||
</div>
|
||
<div id="car-detail">
|
||
<div id="car-detail-icon" style="background-image: url(img/CarKMIcon.png); width: .7292vw; height: .8333vw;"></div>
|
||
<span class="carDetail" style="margin-left: 1.5741vh;">{{ parseInt(data.km / 1000).toLocaleString()+' km' }}</span>
|
||
</div>
|
||
<div id="car-detail">
|
||
<div id="car-detail-icon" style="background-image: url(img/CarBoughtIcon.png); width: .7292vw; height: .8333vw;"></div>
|
||
<span class="carDetail" style="margin-left: 1.5741vh;">{{ data.bought }}</span>
|
||
</div>
|
||
<div id="car-detail">
|
||
<div id="car-detail-icon" style="background-image: url(img/CarBudgetIcon.png); width: .7292vw; height: .7292vw;"></div>
|
||
<span class="carDetail" style="margin-left: 1.5741vh;">$ {{ data.price.toLocaleString() }}</span>
|
||
</div>
|
||
</div>
|
||
<div id="car-seperate-line-box">
|
||
<div id="car-seperate-line"></div>
|
||
</div>
|
||
<span style="margin-top: 0.9259vh; color: white; font-weight: 600; font-size: .625vw; width: 100%; display: flex; justify-content: center;">Inspect</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="ipage-info-page-container" v-if="leftNaviSelection === 'car' && showingVehicleInfo">
|
||
<div id="car-page-content">
|
||
<div id="car-page-title-box">
|
||
<span class="contentTitle">Character Vehicles</span>
|
||
<div id="car-page-title-button" class="goback" @click="showingVehicleInfo = false"><span style="margin-right: 2.4074vh;">Go Back</span></div>
|
||
</div>
|
||
|
||
<div id="cinfo-all-boxes">
|
||
<div id="cinfo-box" class="left">
|
||
<div id="cinfo-box-container">
|
||
<span class="boxTitle">Vehicle Information</span>
|
||
<div id="cinfo-inputs-container">
|
||
<div id="cinfo-input" v-for="data in showingVehicleLeftInputs">
|
||
<span class="inputTitle">{{ data.title }}</span>
|
||
<div id="cinfo-input-content" :class="{ editing: data.editing }" @click="data.editable === false ? data.onclicked() : null">
|
||
<input type="text" :id="'pvehicles'+data.class" :style="{ backgroundImage: `url(img/${data.background})` }" :class="{ noneditable: !data.editable }" :disabled="!data.editing" :value="data.value" v-model="data.value">
|
||
<div id="cinfo-input-edit-button" v-if="data.editable" @click="cinfoEditValue(data.class, $event); data.onclicked()">
|
||
<div id="cinfo-edit-icon"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="cinfo-box" class="right">
|
||
<div id="cinfo-box-container">
|
||
<span class="boxTitle">Actions</span>
|
||
<div id="cinfo-inputs-container">
|
||
<div id="cinfo-input" v-for="data in showingVehicleRightInputs">
|
||
<span class="inputTitle">{{ data.title }}</span>
|
||
<div id="cinfo-input-content" :class="{ editing: data.editing }" @click="data.editable === false ? data.onclicked() : null">
|
||
<input type="text" :id="'pvehicles'+data.class" :style="{ backgroundImage: `url(img/${data.background})`, cursor: 'pointer', width: data.editable ? '23.7963vh' : '100%', backgroundColor: data.class === 'deleteveh' ? 'rgba(255, 109, 109, 0.20)' : '', color: data.class === 'deleteveh' ? '#FF6D6D' : '' }" :class="{ noneditable: !data.editable }" :readonly="!data.editing" :value="data.value" v-model="data.value">
|
||
<div id="cinfo-input-edit-button" v-if="data.editable" @click="cinfoEditValue(data.class, $event, 'right'); data.onclicked()">
|
||
<div id="cinfo-edit-icon"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="ipage-info-page-container" v-if="leftNaviSelection === 'inventory'">
|
||
<div id="car-page-content" class="inventoryPage">
|
||
<div id="car-page-title-box">
|
||
<span class="contentTitle">Character Inventory</span>
|
||
<div id="car-page-title-button" @click="invPopup = 'clearInv'"><span>Clear Inventory</span></div>
|
||
</div>
|
||
|
||
<div id="inv-page-boxes">
|
||
<div id="inv-page-left-box">
|
||
<div id="inv-page-left-box-content">
|
||
<div id="inv-left-inventory-box">
|
||
<div id="inv-inventory-box-title">Player Inventory</div>
|
||
<div id="inv-inventory-items-content">
|
||
<draggable v-model="inventoryItems" v-for="data in inventoryItems" @start="inventoryOnDragStart(data.slot)">
|
||
<div id="inv-inventory-item-box">
|
||
<div id="inv-item-box-header">
|
||
<div id="item-header-slot" :style="{ opacity: data.slot > 5 ? '0' : '1' }">{{ data.slot }}</div>
|
||
<span style="font-size: .4167vw; font-family: 'Proxima Nova'; margin-right: 0.463vh;" :style="{ opacity: data.count === 0 ? 0 : 0.39 }">{{ data.count+'x' }}</span>
|
||
</div>
|
||
<div style="width: 100%; height: auto; display: flex; justify-content: center; align-items: center;">
|
||
<img :style="{ opacity: data.icon === '' ? 0 : 1 }" :src="'../../../Assets/'+data.icon" alt="icon">
|
||
</div>
|
||
<span style="font-size: .3646vw; font-family: 'Proxima Nova'; font-weight: 700; width: 90%; overflow: hidden; text-align: center; margin-top: 0.6481vh; margin-left: 0.3704vh;">{{data.name.toUpperCase()}}</span>
|
||
</div>
|
||
</draggable>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="inv-page-right-actions-box">
|
||
<span style="font-size: .625vw; font-weight: 600; margin-top: 1.3889vh;">Actions</span>
|
||
<div id="inv-actions-button" class="addItem" @dragover.prevent @drop="inventoryPlusDrag" @click="invPopup = 'addItem'"></div>
|
||
<input type="number" class="itemAmount" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" placeholder="0" v-model="inventoryCountInput">
|
||
<div id="inv-actions-button" class="removeItem" @dragover.prevent @drop="iventoryTrashDrag"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="ipage-info-page-container" v-if="leftNaviSelection === 'logs'">
|
||
<div id="car-page-content" class="logsPage">
|
||
<div id="car-page-title-box">
|
||
<span class="contentTitle">Character Logs</span>
|
||
</div>
|
||
|
||
|
||
<div id="logs-content-box" :style="{ backgroundImage: `url(${logsNavbarBoxBg})` }">
|
||
<div id="logs-navbar">
|
||
<div id="logs-navbar-item-box" v-for="data in logsNavbarItems" @click="logsChangeCategory(data.id)">
|
||
<div id="logs-navbar-item-button" :style="{ backgroundImage: data.active ? `url(${data.button})` : '', background: data.active ? 'transperent' : data.notActiveButton }">
|
||
<span>{{ data.name }}</span>
|
||
<span v-if="data.count !== -1">{{ data.count }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="logs-content" class="general" v-if="logsNavbarItems[0].active">
|
||
<div id="logs-logtext-container">
|
||
<span v-for="data in generalLogsShow" style="margin-left: 1.8519vh; margin-top: 0.9259vh;">
|
||
{{`[${data.date}] ${data.author} ${data.message}`}}
|
||
</span>
|
||
</div>
|
||
<div id="logs-logtext-right-container">
|
||
<span style="font-size: 1.3889vh; font-weight: 600;">Search Any Log</span>
|
||
<span style="margin-top: 1.8519vh; font-size: 0.9259vh; font-weight: 400; opacity: 0.29;">Search any log about the character by name, time or event</span>
|
||
<input type="text" placeholder="Search anything..." v-model="generalLogsSearch">
|
||
<div id="logs-logtext-button" @click="searchGeneralLogs(generalLogsSearch)">
|
||
<img src="img/SearchIcon.png" alt="searchIcon">
|
||
<span style="margin-left: 0.6481vh;">Search</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="logs-content" class="warns notGeneral" v-if="logsNavbarItems[1].active">
|
||
<div style="height: 1.8519vh; width: 100%;"></div>
|
||
<div id="logs-column-container">
|
||
<div id="logs-column-item" class="Warn" v-for="(data, index) in warnsLogs">
|
||
<LogsBox
|
||
logtype="Warn"
|
||
:logid="index+1"
|
||
:logdesc="data.desc"
|
||
:logstaff="data.staff"
|
||
logcount="0"
|
||
:logdate="data.date"
|
||
isactive="false"
|
||
iscountable="false"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="logs-content" class="kicks notGeneral" v-if="logsNavbarItems[2].active">
|
||
<div style="height: 1.8519vh; width: 100%;"></div>
|
||
<div id="logs-column-container">
|
||
<div id="logs-column-item" class="Kicks" v-for="(data, index) in kicksLogs">
|
||
<LogsBox
|
||
logtype="Kick"
|
||
:logid="index+1"
|
||
:logdesc="data.desc"
|
||
:logstaff="data.staff"
|
||
logcount="0"
|
||
:logdate="data.date"
|
||
isactive="false"
|
||
iscountable="false"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="logs-content" class="adminjails notGeneral" v-if="logsNavbarItems[3].active">
|
||
<div style="height: 1.8519vh; width: 100%;"></div>
|
||
<div id="logs-column-container">
|
||
<div id="logs-column-item" :class="{ AdminJails: true }" v-for="(data, index) in adminjailsLogs">
|
||
<LogsBox
|
||
logtype="Admin Jail"
|
||
:logid="index+1"
|
||
:logdesc="data.desc"
|
||
:logstaff="data.staff"
|
||
:logcount="data.count"
|
||
:logdate="data.date"
|
||
:isactive="data.active"
|
||
iscountable="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="logs-content" class="bans notGeneral" v-if="logsNavbarItems[4].active">
|
||
<div style="height: 1.8519vh; width: 100%;"></div>
|
||
<div id="logs-column-container">
|
||
<div id="logs-column-item" class="Bans" v-for="(data, index) in bansLogs">
|
||
<LogsBox
|
||
logtype="Ban"
|
||
:logid="index+1"
|
||
:logdesc="data.desc"
|
||
:logstaff="data.staff"
|
||
:logcount="data.count"
|
||
:logdate="data.date"
|
||
:isactive="data.active"
|
||
iscountable="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="info-player-actions-container">
|
||
<div id="player-actions-content">
|
||
<div id="pactions-title-box">
|
||
<span>Actions</span>
|
||
</div>
|
||
<div id="seperate-line"></div>
|
||
<span class="pactions-actions-title" style="margin-top: 2.3148vh;">In Game Actions</span>
|
||
<div id="pactions-actions-container">
|
||
<div id="pactions-action" v-for="data in playerInGameActions" :style="{ backgroundImage: `url(img/${data.background}.png)` }" @click="data.function()">
|
||
<span class="pactions-action-text">{{ data.title }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<span class="pactions-actions-title" style="margin-top: 2.3148vh;">Other Actions</span>
|
||
<div id="pactions-actions-container">
|
||
<div id="pactions-action" v-for="data in playerOtherActions" :style="{ backgroundImage: `url(img/${data.background}.png)` }" @click="data.function()">
|
||
<span class="pactions-action-text">{{ data.title }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../../../components.js"></script>
|
||
<script src="main.js"></script>
|
||
</body>
|
||
</html> |