192 lines
11 KiB
HTML
192 lines
11 KiB
HTML
<div class="employees">
|
|
<div class="black-overlay" @click.self="setFireModal(false);" v-if="fireModal">
|
|
</div>
|
|
<div class="hidden-overlay" :style="{visibility: showRankSelect ? 'hidden' : 'visible'}" @click.self="showRankSelect=false;showCertificationsSelect=false"
|
|
v-if="showRankSelect || showCertificationsSelect">
|
|
</div>
|
|
<div class="employee-fire-modal" v-if="fireModal">
|
|
<h1 class="employee-fire-modal-header">{{locales.sure_to_fire}}</h1>
|
|
<div class="employee-fire-modal-container">
|
|
<div class="recruit-player-pp-holder">
|
|
<img src="./assets/images/default-pp.png">
|
|
</div>
|
|
<div class="player-info-holder">
|
|
<h1>{{getSelectedEmployee.name}}</h1>
|
|
<p>{{getSelectedEmployee.jobLabel}} - {{getSelectedEmployee.rankLabel}}</p>
|
|
</div>
|
|
<div class="fire-button" @click="Fire" style="width: 55%;">
|
|
{{locales.fire}}
|
|
</div>
|
|
<div @click="setFireModal(false);" class="cancel-button">
|
|
{{locales.cancel}}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="employees-header">
|
|
<playerinformation :theme="companyData.theme" :playerName="playerInfo.name" :playerJob="formattedJob " :playerPP="playerInfo.pp">
|
|
</playerinformation>
|
|
<div class="employees-input-container">
|
|
<div class="employees-input-wrapper">
|
|
<inlinesvg src="./assets/svg/search-icon.svg" class="employees-search-icon"></inlinesvg>
|
|
<input type="text" :placeholder="locales.search_employee">
|
|
</div>
|
|
</div>
|
|
<div class="header-button" :class="{[companyData.theme]:true}" @click="setActivePage('employees')">
|
|
<inlinesvg src="./assets/svg/back-icon.svg"></inlinesvg>
|
|
<p>{{locales.go_back}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="seperator"></div>
|
|
<div class="employee-list-container">
|
|
<div class="employee-list-header">
|
|
<h1>{{locales.employee_details}}</h1>
|
|
<p>{{locales.employee_note}}</p>
|
|
</div>
|
|
<div class="employee-details-container">
|
|
<div class="employee-details" :class="{[companyData.theme]:true}" @click.self="showRankSelect=false">
|
|
<div class="employee-details-header">
|
|
<playerinformation :theme="companyData.theme" :playerName="getSelectedEmployee.name" :playerJob="otherPlayerFormattedJob "
|
|
:playerPP="getSelectedEmployee.profilepicture"></playerinformation>
|
|
<div class="fire-button" @click="setFireModal(true)">
|
|
{{locales.fire}}
|
|
</div>
|
|
</div>
|
|
<div class="employee-status-container">
|
|
<div class="employee-status">
|
|
<div class="employee-status-wrapper">
|
|
<h1 class="employee-logs-header">{{locales.status}}</h1>
|
|
<div class="employee-status-box-container">
|
|
|
|
<div class="employee-status-box">
|
|
<inlinesvg v-if="getSelectedEmployee.online == 1"
|
|
style="position: relative; top: .2rem;" src="./assets/svg/online-icon.svg">
|
|
</inlinesvg>
|
|
<inlinesvg v-else style="position: relative; top: .2rem;"
|
|
src="./assets/svg/offline-icon.svg">
|
|
</inlinesvg>
|
|
<p class="online-text" v-if="getSelectedEmployee.online == 1">{{locales.online}}</p>
|
|
<p class="offline-text" v-else>{{locales.offline}}</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="employee-status-wrapper">
|
|
<h1 class="employee-logs-header">{{locales.join_date}}</h1>
|
|
<div class="employee-status-box-container">
|
|
|
|
<div class="employee-status-box">
|
|
<inlinesvg style="position: relative; top: .15rem;"
|
|
src="./assets/svg/date-icon.svg">
|
|
</inlinesvg>
|
|
<p class="employee-status-box-text">{{SecondsToDate(getSelectedEmployee.joindate)}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="employee-status-wrapper">
|
|
<h1 class="employee-logs-header">{{locales.rank}}</h1>
|
|
<div class="employee-status-box-container" @click="showRankSelect=true">
|
|
<div class="employee-status-box">
|
|
<inlinesvg style="position: relative; top: .15rem;"
|
|
src="./assets/svg/rank-icon.svg">
|
|
</inlinesvg>
|
|
<p class="employee-status-box-text">{{getSelectedEmployee.rankLabel}}</p>
|
|
</div>
|
|
<div class="employee-status-box-small">
|
|
<inlinesvg style="position: relative; top: .15rem;"
|
|
src="./assets/svg/ranks-icon-white.svg" />
|
|
</div>
|
|
<ul v-if="showRankSelect" style="position: absolute; left: 75%; bottom: -350%;">
|
|
<div class="no-scrollbar">
|
|
<li @click="SetRank(rank)" v-for="rank in ranks">{{rank.label}}</li>
|
|
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="employee-status-wrapper">
|
|
<h1 class="employee-logs-header">{{locales.salary}}</h1>
|
|
<div class="employee-status-box-container">
|
|
|
|
<div class="employee-status-box">
|
|
<inlinesvg style="position: relative; top: .15rem;"
|
|
src="./assets/svg/salary-icon.svg">
|
|
</inlinesvg>
|
|
<p class="employee-status-box-text">{{locales.state_salary}}</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="employee-status-wrapper">
|
|
<h1 class="employee-logs-header">{{locales.badge}}</h1>
|
|
<div class="employee-status-box-container">
|
|
<div class="employee-status-box">
|
|
<inlinesvg style="position: relative; top: .15rem;"
|
|
src="./assets/svg/badge-icon.svg">
|
|
</inlinesvg>
|
|
<p class="employee-status-box-text">{{getSelectedEmployee.badgenumber}}</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="employee-status-wrapper">
|
|
<h1 class="employee-logs-header">{{locales.certifications}}</h1>
|
|
<div class="employee-status-box-container" @click="showCertificationsSelect=true">
|
|
<div class="employee-status-box">
|
|
<inlinesvg style="position: relative; top: .15rem;"
|
|
src="./assets/svg/certifications-icon.svg">
|
|
</inlinesvg>
|
|
<p class="employee-status-box-text">{{formatCertifications}}</p>
|
|
</div>
|
|
<div class="employee-status-box-small">
|
|
<inlinesvg style="position: relative; top: .15rem;"
|
|
src="./assets/svg/certifications-icon.svg" />
|
|
</div>
|
|
<ul v-if="showCertificationsSelect" style="position: absolute; left: 75%; bottom: 0%;">
|
|
<div class="no-scrollbar">
|
|
<li @click="ToggleCertification(certificationn.name)" v-for="certificationn in certifications" :class="{selected:Object.values(getSelectedEmployee.certifications).includes(certificationn.name)}">
|
|
<inlinesvg :src="'./assets/svg/'+certificationn.icon" />
|
|
<p>{{certificationn.label}}</p>
|
|
</li>
|
|
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="employee-logs-container">
|
|
<h1 class="employee-logs-header">{{locales.employee_logs}}</h1>
|
|
|
|
<div class="employee-logs">
|
|
<div class="employees-input-container">
|
|
<div class="employees-input-wrapper" style="width: 100%; ">
|
|
<inlinesvg src="./assets/svg/search-icon.svg" class="employees-search-icon">
|
|
</inlinesvg>
|
|
<input v-model="filteredLogs" type="text" :placeholder="locales.search_any_log">
|
|
</div>
|
|
</div>
|
|
<div class="employee-logs-scroll no-scrollbar">
|
|
<div class="employee-log" v-for="log in getFilteredLogs">
|
|
<p class="employee-log-text">{{log.message}}</p>
|
|
<p class="employee-log-date">[{{SecondsToDate(log.date, true)}}]</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="employee-note" :class="{[companyData.theme]:true}">
|
|
<inlinesvg src="./assets/svg/takenote-icon.svg" class="employee-note-icon"></inlinesvg>
|
|
<!-- <p class="employee-no-note">There is no note for this employee</p> -->
|
|
<textarea type="text" v-model="note" class="employee-no-note no-scrollbar" :placeholder="locales.no_note"></textarea>
|
|
|
|
<div :class="{[companyData.theme]:true}" @click="SaveNote" class="employee-note-button">
|
|
{{locales.save_note}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |