314 lines
27 KiB
HTML
314 lines
27 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://cdn.jsdelivr.net/npm/vue@2"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha1/0.6.0/sha1.min.js"></script>
|
||
<title>M-Panel | Jobs</title>
|
||
</head>
|
||
<body>
|
||
<div id="loading-container" class="panel">
|
||
<div id="loading-item"></div>
|
||
</div>
|
||
|
||
<div id="app">
|
||
<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="popups-container" v-if="popup">
|
||
<div id="jpopup-box">
|
||
<div id="jpopup-job-icon"></div>
|
||
<span style="width: 9.4444vh; height: 2.037vh; font-size: 1.1111vh; font-weight: 600; margin-top: 2.3148vh; text-align: center;">{{ selectedJob.label }}</span>
|
||
|
||
<div id="jpopup-input-container" style="margin-top: 2.963vh;">
|
||
<span style="opacity: .32;">Job Grade Level</span>
|
||
<input type="text" @focusout="autoCompleteWithGradeName($event)" :disabled="popup.type === 'setgrade'" :value="popup.grade" placeholder="Type job grade level">
|
||
</div>
|
||
<div id="jpopup-input-container" style="margin-top: 1.8519vh;">
|
||
<span style="opacity: .32;">Set Job To Player</span>
|
||
<input type="text" id="popupPlayerIdentifier" placeholder="Player ID or Identifier">
|
||
</div>
|
||
<div id="jpopup-buttons-container" style="margin-top: 1.8519vh;">
|
||
<div id="jpopup-button" @click="popup = undefined">Cancel</div>
|
||
<div id="jpopup-button" @click="setJobToPlayer()" class="set">Set</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
|
||
<left-navbar
|
||
activepage="Jobs"
|
||
></left-navbar>
|
||
<div id="right-page-container" v-if="selectedJob === false">
|
||
<div id="header-content">
|
||
<p style="margin-left: 3.4259vh; font-size: 1.6667vw; font-weight: 600;">Jobs</p>
|
||
|
||
<div id="search-players-container">
|
||
<input type="text" placeholder="Search any job or degree" v-model="searchValue">
|
||
</div>
|
||
|
||
<notify-menu :notifymenu="notifyMenu" @closenotifymenu="notifyMenu = false"></notify-menu>
|
||
<new-notify :newnotify="newNotify" @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="player-categories-container">
|
||
<div id="player-categories">
|
||
<div id="player-category" class="all" :class="{ active: activeCategory === 'all' }" @click="changeCategory('all')">All</div>
|
||
<div id="player-category" :class="{ active: activeCategory === 'state' }" @click="changeCategory('state')">State</div>
|
||
<div id="player-category" :class="{ active: activeCategory === 'corp' }" @click="changeCategory('corp')">Corp</div>
|
||
</div>
|
||
<div id="registered-characters-count">{{ allJobs.length }} Jobs</div>
|
||
</div>
|
||
|
||
<div id="real-page-content">
|
||
<div id="real-page-container">
|
||
<div id="players-container">
|
||
<div id="player-container" v-for="data in toShowJobs" @click="selectItem(data)">
|
||
<div id="item-header">
|
||
<div id="item-header-icon-box">
|
||
<img :src="data.image" :style="{ width: data.image === 'img/DefaultJobIcon.png' ? '3.4259vh' : '4.6296vh', height: data.image === 'img/DefaultJobIcon.png' ? '2.7778vh' : '' }" alt="itemIcon">
|
||
</div>
|
||
<div id="item-header-credentials">
|
||
<span class="label">{{ data.label }}</span>
|
||
<span class="code">{{ data.code }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="credentials-list">
|
||
<div id="credential-item">
|
||
<div id="credential-icon" style="align-items: center;">
|
||
<img src="img/GradesIcon.png" alt="itemstatus" style="width: 1.4815vh; height: 0.6481vh;">
|
||
</div>
|
||
<span style="margin-left: 1.3889vh;">{{ Object.entries(data.grades).length }} Grades</span>
|
||
</div>
|
||
<div id="credential-item">
|
||
<div id="credential-icon">
|
||
<img src="img/PlayersIcon.png" alt="itemdesc" style="width: 1.4815vh; height: 1.0185vh;">
|
||
</div>
|
||
<span style="margin-left: 1.3889vh;">{{ data.jobPlayers.length }} Players</span>
|
||
</div>
|
||
<div id="credential-item">
|
||
<div id="credential-icon">
|
||
<img src="img/StarIcon.png" alt="itemweight" style="width: 1.2963vh; height: 1.2037vh;">
|
||
</div>
|
||
<span style="margin-left: 1.3889vh;">{{ data.mostRankedPlayer.name === '' ? 'Not found.' : data.mostRankedPlayer.name }}</span>
|
||
</div>
|
||
<div id="credential-item">
|
||
<div id="credential-icon">
|
||
<img src="img/JobTypeIcon.png" alt="itemtype" style="width: 1.4815vh; height: 1.1111vh;">
|
||
</div>
|
||
<span style="margin-left: 1.3889vh;">{{ data.type === 'state' ? 'State Job' : 'Corp Job' }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="box-line"></div>
|
||
<span class="inspect">Inspect</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="right-page-container" v-if="selectedJob !== false">
|
||
<div id="header-content">
|
||
<p style="margin-left: 3.4259vh; font-size: 1.6667vw; font-weight: 600;">Jobs</p>
|
||
|
||
<div id="search-players-container">
|
||
<input type="text" placeholder="Search any job or degree" v-model="searchValue">
|
||
</div>
|
||
|
||
<notify-menu :notifymenu="notifyMenu" @closenotifymenu="notifyMenu = false"></notify-menu>
|
||
<new-notify :newnotify="newNotify" @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="iinfo-page-content">
|
||
<div id="iinfo-left-box">
|
||
<div id="iinfo-left-header">
|
||
<div id="iinfo-left-item-icon">
|
||
<img :src="selectedJob.image" :class="{ default: selectedJob.image === 'img/DefaultJobIcon.png' }" alt="itemicon">
|
||
</div>
|
||
<div id="iinfo-left-text-credentials">
|
||
<span>{{ selectedJob.label }}</span>
|
||
<span style="opacity: .65;">{{ selectedJob.code }}</span>
|
||
</div>
|
||
<div id="iinfo-left-goback-button" @click="goBackToItemsPage()">
|
||
<span style="margin-left: 3.8889vh;">Go Back</span>
|
||
</div>
|
||
</div>
|
||
<div id="iinfo-left-line"></div>
|
||
<div id="iinfo-left-container">
|
||
<div id="iinfo-left-credentials-box">
|
||
<span style="font-size: 1.8519vh; font-weight: 500; margin-top: 1.8519vh; display: flex; width: 52.5926vh;">Item Information</span>
|
||
<div id="iinfo-left-credential-input" style="position: relative;" v-for="data in selectedJobInputs" :key="data.id" :style="{ marginTop: data.id === 0 ? '1.8519vh' : '0.9259vh' }">
|
||
<span style="opacity: .6;">{{ data.label }}</span>
|
||
<span class="inputText" v-if="data.id === 5" @click="inspectPlayer(data.pIdentifier)">Show Player</span>
|
||
<transition name="fade">
|
||
<span class="inputText" @click="rightBoxCategory = 'players'" v-if="data.id === 4 && rightBoxCategory !== 'players'">Show Players</span>
|
||
<span class="inputText" @click="rightBoxCategory = 'grades'" v-if="data.id === 3 && rightBoxCategory !== 'grades' && rightBoxCategory !== 'gradeplayers'">Show Grades</span>
|
||
</transition>
|
||
<span @click="changeJobType()" class="inputText" v-if="data.id === 2">Change Type</span>
|
||
<input type="text" :style="{ backgroundImage: `url(${data.inputImage})` }" :value="data.value" disabled>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="vinfo-left-boxes-right-box">
|
||
<span class="headerText">Job Logo</span>
|
||
<input @change="changeSelectedImage($event)" accept=".png, .jpg, .jpeg" type="file" id="vinfo-left-right-realFile" style="display: none;">
|
||
<div id="vinfo-left-right-file" :style="{ backgroundImage: selectedJob.image.includes('DefaultJobIcon') ? '' : 'url('+selectedJob.image+')' }" @click="triggerFileInput()"></div>
|
||
<span style="font-size: 1.2963vh; font-weight: 500; opacity: .6; margin-top: 1.8519vh;">Upload logo</span>
|
||
<div id="vinfo-left-right-input" style="margin-top: 0.9259vh;">
|
||
<span>by Link</span>
|
||
<input type="text" placeholder="Insert image link..." v-model="selectedImageUrl">
|
||
</div>
|
||
<div id="vinfo-left-right-line-or">
|
||
<div id="vinfo-left-right-line" style="margin-left: 2.3148vh;"></div>
|
||
<span style="margin-left: 0.7407vh; margin-right: 0.7407vh;">or</span>
|
||
<div id="vinfo-left-right-line"></div>
|
||
</div>
|
||
<div id="vinfo-left-right-input" style="margin-top: 1.0185vh;">
|
||
<span>by File</span>
|
||
<div id="vinfo-left-right-browse-images-button" @click="triggerFileInput()">
|
||
<span style="margin-left: 6.4815vh;">Browse Images</span>
|
||
</div>
|
||
</div>
|
||
<div id="vinfo-left-right-line" style="width: 17.5926vh; margin-top: 1.8519vh;"></div>
|
||
<div id="vinfo-left-right-upload-button" @click="uploadImage()">UPLOAD</div>
|
||
<span class="recommendation">Recommended size is 50x50 and the recommended file type is PNG. If you don’t use transparent image it may seems a bit off. </span>
|
||
<span v-if="selectedJob.image !== 'img/DefaultJobIcon.png'" @click="clearImage()" style="color: #FF3A5B; font-size: 0.9259vh; font-weight: 500; margin-top: 0.463vh;">Remove Image</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="iinfo-right-box">
|
||
<span style="margin-top: 1.4815vh; font-size: 1.8519vh; font-weight: 600;">
|
||
{{ rightBoxCategory === 'players' ? 'Job Members' : rightBoxCategory === 'grades' ? 'Job Grades' : selectedGrade.name }}
|
||
</span>
|
||
<div id="iinfo-right-line" style="margin-top: 1.4815vh;"></div>
|
||
|
||
<!-- If Right Box Category Players -->
|
||
<div v-if="rightBoxCategory === 'players'" style="display: flex; flex-direction: column; align-items: center;">
|
||
<div id="iinfo-right-box-player-list" style="position: relative;">
|
||
<div id="iinfo-right-box-player" @click="inspectPlayer(data.identifier)" style="margin-top: 1.8519vh;" v-for="data in selectedJob.jobPlayers">
|
||
<div id="iinfo-right-box-player-icon">
|
||
<img :src="data.avatar" alt="playerIcon">
|
||
</div>
|
||
<div style="font-size: 0.9259vh; font-weight: 600; margin-left: 1.0185vh; width: 6.4815vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
|
||
<span style="margin-left: 0.0926vh;">{{ data.name }}</span>
|
||
</div>
|
||
<div style="font-size: 0.7407vh; font-weight: 500; opacity: .42; position: absolute; text-align: right; right: 1.1111vh; width: 4.6296vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
|
||
<span>{{ data.gradeName }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="iinfo-right-line" style="margin-top: 0.9259vh;"></div>
|
||
<div id="iinfo-right-button" @click="openSetJobPopup()" class="setButton" style="margin-top: 0.9259vh;">Set Job To Player</div>
|
||
</div>
|
||
|
||
<div v-if="rightBoxCategory === 'grades'">
|
||
<div id="iinfo-right-box-player-list" style="position: relative; flex-direction: column-reverse;">
|
||
<div id="iinfo-right-box-player" @click="selectGrade(key)" style="margin-top: 1.8519vh;" v-for="(data, key) in selectedJob.grades">
|
||
<div id="iinfo-right-box-player-icon" style="border: 0; width: 2.3148vh; height: 1.3426vh; object-fit: contain;">
|
||
<img :src="`img/${data.isboss ? 'JobBossIcon' : 'JobGradeIcon'}.png`" alt="" style="width: auto; height: auto;">
|
||
</div>
|
||
<div style="font-size: 0.9259vh; font-weight: 600; margin-left: 1.0185vh; width: 6.4815vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
|
||
<span style="margin-left: 0.0926vh;">{{ framework.includes('qb') ? data.name : data.label }}</span>
|
||
</div>
|
||
<img src="img/PlayersIcon.png" style="position: absolute; right: 2.963vh;" alt="">
|
||
<div style="font-size: 0.7407vh; font-weight: 500; opacity: .42; position: absolute; text-align: right; right: 1.1111vh; width: 4.6296vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
|
||
<span>{{ selectedJob.jobPlayers.filter(p => Number(p.grade) === Number(key)).length }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="rightBoxCategory === 'gradeplayers'" style="display: flex; flex-direction: column; align-items: center;">
|
||
<div id="iinfo-right-box-player-list" style="position: relative; height: 42.4074vh;">
|
||
<div id="iinfo-right-box-player" @click="inspectPlayer(data.identifier)" style="margin-top: 1.8519vh;" v-for="data in gradePlayers">
|
||
<div id="iinfo-right-box-player-icon">
|
||
<img :src="data.avatar" alt="playerIcon">
|
||
</div>
|
||
<div style="font-size: 0.9259vh; font-weight: 600; margin-left: 1.0185vh; width: 6.4815vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
|
||
<span style="margin-left: 0.0926vh;">{{ data.name }}</span>
|
||
</div>
|
||
<div style="font-size: 0.7407vh; font-weight: 500; opacity: .42; position: absolute; text-align: right; right: 1.1111vh; width: 4.6296vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
|
||
<span>{{ data.gradeName }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="iinfo-right-line" style="margin-top: 0.9259vh;"></div>
|
||
<div id="iinfo-right-button" class="setButton" style="margin-top: 1.8519vh;" @click="openGradeJobPopup(selectedGrade.name, selectedGrade.level)">Set Grade To Player</div>
|
||
<div id="iinfo-right-button" @click="goBackToGrades()" class="goBackButton" style="margin-top: 0.9259vh;">Go Back</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../../components.js"></script>
|
||
<script src="main.js"></script>
|
||
</body>
|
||
</html> |