2026-04-14 17:41:39 +02:00

92 lines
4.8 KiB
HTML

<div class="employees">
<div class="black-overlay" @click.self="setCurrentAction(false);showSelect=false" v-if="currentAction == 'recruit'"></div>
<div class="recruit-employee" v-if="currentAction == 'recruit'">
<h1>{{locales.recruit_player}}</h1>
<div class="recruit-wrapper" @click.self="showSelect=false">
<div class="recruit-player-pp-holder">
<img style="border-radius: 50%;" v-if="playerPP" :src="playerPP">
<img style="border-radius: 50%;" v-else src="./assets/images/default-pp.png">
</div>
<p class="click-auto-text">{{playerName}}</p>
<p class="click-auto-text" v-html="locales.click_auto"></p>
<div class="recruit-inputs">
<div class="recruit-input-container recruit-input-wrapper">
<input v-model="playerId" type="text" :placeholder="locales.player_id">
<div>
<inlinesvg src="./assets/svg/player-id-icon.svg"></inlinesvg>
</div>
</div>
<div class="recruit-input-container recruit-input-wrapper">
<ul @click.self="showSelect=!showSelect">
<li class="selected-item">{{selectedRank.label}}</li>
<div style="bottom: -380%;" v-if="showSelect" class="no-scrollbar">
<li @click="SelectRank(rank.grade, rank.label)" v-for="rank in ranks">{{rank.label}}</li>
</div>
</ul>
<div>
<inlinesvg src="./assets/svg/ranks-icon-white.svg"></inlinesvg>
</div>
</div>
<span> {{locales.ranks_desc}}</span>
</div>
<div @click="Recruit" class="header-button" style="width: 15.625rem;">
<inlinesvg src="./assets/svg/recruit-icon.svg"></inlinesvg>
<p>{{locales.recruit}}</p>
</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 v-model="filteredEmployee" type="text" :placeholder="locales.search_employee">
</div>
</div>
<div class="header-button" :class="{[companyData.theme]:true}" @click="setCurrentAction('recruit')">
<inlinesvg src="./assets/svg/recruit-icon.svg"></inlinesvg>
<p>{{locales.recruit}}</p>
</div>
</div>
<div class="seperator"></div>
<div class="employee-list-container">
<div class="employee-list-header">
<h1>{{locales.employee_list}}</h1>
<p>{{companyData?.employees?.length}} {{locales.total_employees}}</p>
</div>
<div class="employees-list no-scrollbar">
<div class="employee" :class="{[companyData.theme]:true}" v-for="employee in getFilteredEmployees">
<div class="employee-activity-status employee-online" v-if="employee.online"></div>
<div class="employee-activity-status employee-offline" v-else></div>
<div class="player-pp-holder" :class="{[companyData.theme]:true}">
<img :src="employee.profilepicture">
</div>
<p class="employee-name">{{employee.name}}</p>
<p class="employee-job">{{employee.jobLabel}} - {{employee.rankLabel}}</p>
<div class="seperator"></div>
<div class="employee-other-info">
<inlinesvg src="./assets/svg/date-icon.svg"></inlinesvg>
<p>{{SecondsToDate(employee.joindate)}}</p>
</div>
<div class="employee-other-info">
<inlinesvg src="./assets/svg/badge-icon.svg"></inlinesvg>
<p>{{employee.badgenumber}}</p>
</div>
<div class="seperator"></div>
<div :class="{[companyData.theme]:true}" @click="EmployeeDetails(employee.identifier)" class="header-button">
<p>{{locales.details}}</p>
</div>
</div>
</div>
<div class="employees-activity-status-container">
<p class="online-employees">{{GetOnlineNum}} {{locales.online}}</p>
<p class="offline-employees">{{GetOfflineNum}} {{locales.offline}}</p>
</div>
</div>
</div>