370 lines
21 KiB
HTML
370 lines
21 KiB
HTML
<div class="outfits">
|
|
<div class="black-overlay" @click.self="setDeleteModal(false);addDressCode=false;editDressCode=false;selectedOutfit.preset_code=prevPresetCodeCode;prevPresetCodeCode=false;" v-if="editDressCode || deleteModal || addDressCode">
|
|
</div>
|
|
<div class="employee-fire-modal" v-if="deleteModal">
|
|
<h1 class="employee-fire-modal-header">{{locales.sure_to_delete}}</h1>
|
|
<div class="employee-fire-modal-container">
|
|
<p class="dress-preset-text">{{locales.dress_preset}}</p>
|
|
<div class="dress" >
|
|
<inlinesvg src="./assets/svg/clothing-icon.svg" class="clothing-icon"></inlinesvg>
|
|
<p>{{selectedOutfit.preset_name}}</p>
|
|
</div>
|
|
<span>{{locales.cant_undone}}.</span>
|
|
<div @click="DeleteClothes" class="fire-button" style="width: 55%;">
|
|
{{locales.delete}}
|
|
</div>
|
|
<div @click="setDeleteModal(false);" class="cancel-button">
|
|
{{locales.cancel}}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="employee-fire-modal" v-if="editDressCode">
|
|
<h1 class="employee-fire-modal-header">{{locales.edit_dress}}</h1>
|
|
<div class="employee-add-dress-code-modal-container">
|
|
<p class="dress-preset-text">{{locales.dress_preset}}</p>
|
|
<div class="presets no-scrollbar">
|
|
<div class="preset">
|
|
<p>{{locales.tops_jackets}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="selectedOutfit.preset_code.jacket.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="selectedOutfit.preset_code.jacket.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.undershirt}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="selectedOutfit.preset_code.shirt.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="selectedOutfit.preset_code.shirt.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.hands}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="selectedOutfit.preset_code.hands.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="selectedOutfit.preset_code.hands.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.legs}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="selectedOutfit.preset_code.pants.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="selectedOutfit.preset_code.pants.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.shoes}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="selectedOutfit.preset_code.shoes.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="selectedOutfit.preset_code.shoes.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>Masks</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="selectedOutfit.preset_code.mask.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="selectedOutfit.preset_code.mask.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.scarfs}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="selectedOutfit.preset_code.chain.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="selectedOutfit.preset_code.chain.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.decals}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="selectedOutfit.preset_code.decals.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="selectedOutfit.preset_code.decals.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.hats}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="selectedOutfit.preset_code.helmet.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="selectedOutfit.preset_code.helmet.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.glasses}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="selectedOutfit.preset_code.glasses.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="selectedOutfit.preset_code.glasses.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.watches}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="selectedOutfit.preset_code.watches.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="selectedOutfit.preset_code.watches.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.bracelets}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="selectedOutfit.preset_code.bracelets.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="selectedOutfit.preset_code.bracelets.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input v-model="selectedOutfit.preset_name" placeholder="Preset Name" type="text" class="preset-name-input">
|
|
|
|
<div @click="SaveEditPreset();editDressCode=false;prevPresetCodeCode=false" class="header-button" style="width: 55%;">
|
|
{{locales.save}}
|
|
</div>
|
|
<div @click="editDressCode=false;selectedOutfit.preset_code=prevPresetCodeCode;prevPresetCodeCode=false;" class="clothing-button delete" style="width: 55%;">
|
|
{{locales.cancel}}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="employee-fire-modal" v-if="addDressCode">
|
|
<h1 class="employee-fire-modal-header">{{locales.add_dress}}</h1>
|
|
<div class="employee-add-dress-code-modal-container">
|
|
<p class="dress-preset-text">{{locales.dress_preset}}</p>
|
|
<div class="presets no-scrollbar">
|
|
<div class="preset">
|
|
<p>{{locales.tops_jackets}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="newDressCode.jacket.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="newDressCode.jacket.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.undershirt}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="newDressCode.shirt.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="newDressCode.shirt.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.hands}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="newDressCode.hands.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="newDressCode.hands.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.legs}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="newDressCode.pants.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="newDressCode.pants.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.shoes}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="newDressCode.shoes.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="newDressCode.shoes.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.masks}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="newDressCode.mask.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="newDressCode.mask.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.scarfs}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="newDressCode.chain.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="newDressCode.chain.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.decals}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="newDressCode.decals.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="newDressCode.decals.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.hats}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="newDressCode.helmet.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="newDressCode.helmet.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.glasses}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="newDressCode.glasses.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="newDressCode.glasses.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.watches}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="newDressCode.watches.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="newDressCode.watches.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
<div class="preset">
|
|
<p>{{locales.bracelets}}</p>
|
|
<div class="preset-inputs">
|
|
<input v-model="newDressCode.bracelets.val" style="text-align: right;" type="text" class="preset-input">
|
|
<span>-</span>
|
|
<input v-model="newDressCode.bracelets.tex" style="text-align: left;" type="text" class="preset-input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input v-model="presetName" placeholder="Preset Name" type="text" class="preset-name-input">
|
|
|
|
<div @click="SaveOutfit" class="header-button" style="width: 55%;">
|
|
{{locales.add_dress_preset}}
|
|
</div>
|
|
<span>{{locales.dress_desc}}</span>
|
|
</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="filteredOutfits" type="text" :placeholder="locales.search_any_item">
|
|
</div>
|
|
</div>
|
|
<div @click="addDressCode=true" :class="{[companyData.theme]:true}" class="header-button" style="width: 11.875rem;">
|
|
<inlinesvg src="./assets/svg/dress-code-icon.svg"></inlinesvg>
|
|
<p>{{locales.add_dress}}</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="seperator"></div>
|
|
<div style="padding:0rem 2rem;">
|
|
<div @click="wearOriginalClothes" :class="{[companyData.theme]:true}" class="header-button" style="width: 14.875rem;">
|
|
<inlinesvg src="./assets/svg/dress-code-icon.svg"></inlinesvg>
|
|
<p>{{locales.wear_original}}</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="outfit-container">
|
|
|
|
<div class="dresses">
|
|
<h1 class="dresses-header">{{locales.dresses}}</h1>
|
|
<div class="dresses-list no-scrollbar">
|
|
<div @click="selectedOutfitIndex=index;selectedOutfit=outfit" v-for="(outfit, index) in getFilteredOutfits" class="dress" :class="{selected:index == selectedOutfitIndex, [companyData.theme]:true}">
|
|
<inlinesvg src="./assets/svg/clothing-icon.svg" class="clothing-icon"></inlinesvg>
|
|
<p>{{outfit.preset_name}}</p>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="outfit-codes">
|
|
<h1 class="dresses-header">{{locales.dress_codes}}</h1>
|
|
<div class="outfit-codes-container no-scrollbar" :class="{[companyData.theme]:true}">
|
|
<div v-if="!selectedOutfit">
|
|
<inlinesvg src="./assets/svg/dress-icon.svg" class="dress-icon"></inlinesvg>
|
|
<p class="dress-code-select-text" v-html="locales.dress_code_desc"></p>
|
|
<div @click="OpenClothingMenu" class="clothing-menu-button" :class="{[companyData.theme]:true}">
|
|
{{locales.open_clothing}}
|
|
</div>
|
|
</div>
|
|
<template v-else>
|
|
<div class="outfit-preset">
|
|
<p>{{locales.tops_jackets}}</p>
|
|
<p>{{selectedOutfit.preset_code.jacket.val}}-{{selectedOutfit.preset_code.jacket.tex}}</p>
|
|
|
|
</div>
|
|
<div class="outfit-preset">
|
|
<p>{{locales.undershirt}}</p>
|
|
<p>{{selectedOutfit.preset_code.shirt.val}}-{{selectedOutfit.preset_code.shirt.tex}}</p>
|
|
|
|
</div>
|
|
<div class="outfit-preset">
|
|
<p>{{locales.legs}}</p>
|
|
<p>{{selectedOutfit.preset_code.pants.val}}-{{selectedOutfit.preset_code.pants.tex}}</p>
|
|
|
|
</div>
|
|
<div class="outfit-preset">
|
|
<p>{{locales.shoes}}</p>
|
|
<p>{{selectedOutfit.preset_code.shoes.val}}-{{selectedOutfit.preset_code.shoes.tex}}</p>
|
|
|
|
</div>
|
|
<div class="outfit-preset">
|
|
<p>{{locales.masks}}</p>
|
|
<p>{{selectedOutfit.preset_code.mask.val}}-{{selectedOutfit.preset_code.mask.tex}}</p>
|
|
|
|
</div>
|
|
<div class="outfit-preset">
|
|
<p>{{locales.scarfs}}</p>
|
|
<p>{{selectedOutfit.preset_code.chain.val}}-{{selectedOutfit.preset_code.chain.tex}}</p>
|
|
</div>
|
|
<div class="outfit-preset">
|
|
<p>{{locales.decals}}</p>
|
|
<p>{{selectedOutfit.preset_code.decals.val}}-{{selectedOutfit.preset_code.decals.tex}}</p>
|
|
</div>
|
|
<div class="outfit-preset">
|
|
<p>{{locales.hats}}</p>
|
|
<p>{{selectedOutfit.preset_code.helmet.val}}-{{selectedOutfit.preset_code.helmet.tex}}</p>
|
|
</div>
|
|
<div class="outfit-preset">
|
|
<p>{{locales.glasses}}</p>
|
|
<p>{{selectedOutfit.preset_code.glasses.val}}-{{selectedOutfit.preset_code.glasses.tex}}</p>
|
|
</div>
|
|
<div class="outfit-preset">
|
|
<p>{{locales.watches}}</p>
|
|
<p>{{selectedOutfit.preset_code.watches.val}}-{{selectedOutfit.preset_code.watches.tex}}</p>
|
|
</div>
|
|
<div class="outfit-preset">
|
|
<p>{{locales.bracelets}}</p>
|
|
<p>{{selectedOutfit.preset_code.bracelets.val}}-{{selectedOutfit.preset_code.bracelets.tex}}</p>
|
|
</div>
|
|
<div class="outfit-preset">
|
|
<p>{{locales.hands}}</p>
|
|
<p>{{selectedOutfit.preset_code.hands.val}}-{{selectedOutfit.preset_code.hands.tex}}</p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="dresses" v-if="selectedOutfit">
|
|
<h1 class="dresses-header">{{locales.edit_and_menu}}</h1>
|
|
<div class="outfit-codes-container no-scrollbar" :class="{[companyData.theme]:true}" style="padding-top: 5rem;">
|
|
<inlinesvg src="./assets/svg/outfit-icon-2.svg" class="outfit-icon-2"></inlinesvg>
|
|
<p class="edit-or-delete-text">{{locales.edit_or_delete}}</p>
|
|
<div @click="OpenClothingMenu" class="clothing-button open">
|
|
{{locales.open_clothing}}
|
|
</div>
|
|
<div @click="WearClothes" class="clothing-button open">
|
|
{{locales.wear_clothes}}
|
|
</div>
|
|
<div @click="editDressCode=true;prevPresetCodeCode=selectedOutfit.preset_code" class="clothing-button edit">
|
|
{{locales.edit_dress_code}}
|
|
</div>
|
|
<div @click="setDeleteModal(true)" class="clothing-button delete">
|
|
{{locales.delete_dress}}
|
|
</div>
|
|
<img src="./assets/images/clothes-bg.png" class="clothes-bg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |