401 lines
10 KiB
Vue
401 lines
10 KiB
Vue
<template>
|
|
<div class="page">
|
|
<form
|
|
class="filters"
|
|
@submit.prevent
|
|
>
|
|
<div class="filter">
|
|
<input
|
|
v-model="q"
|
|
type="search"
|
|
placeholder="Search actors"
|
|
class="input search"
|
|
@search="search"
|
|
>
|
|
</div>
|
|
|
|
<ul class="filter genders nolist">
|
|
<li>
|
|
<button
|
|
:class="{ selected: filters.gender === undefined }"
|
|
class="gender-button all"
|
|
@click="updateFilter('gender', undefined, true)"
|
|
>all</button>
|
|
</li>
|
|
|
|
<li>
|
|
<button
|
|
:class="{ selected: filters.gender === 'female' }"
|
|
class="gender-button female"
|
|
@click="updateFilter('gender', 'female', true)"
|
|
><Gender gender="female" /></button>
|
|
</li>
|
|
|
|
<li>
|
|
<button
|
|
:class="{ selected: filters.gender === 'male' }"
|
|
class="gender-button male"
|
|
@click="updateFilter('gender', 'male', true)"
|
|
><Gender gender="male" /></button>
|
|
</li>
|
|
|
|
<li>
|
|
<button
|
|
:class="{ selected: filters.gender === 'transsexual' }"
|
|
class="gender-button transsexual"
|
|
@click="updateFilter('gender', 'transsexual', true)"
|
|
><Gender gender="transsexual" /></button>
|
|
</li>
|
|
|
|
<li>
|
|
<button
|
|
:class="{ selected: filters.gender === 'other' }"
|
|
class="gender-button other"
|
|
@click="updateFilter('gender', 'other', true)"
|
|
><Icon icon="question5" /></button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="filter">
|
|
<RangeFilter
|
|
label="age"
|
|
:min="18"
|
|
:max="100"
|
|
:value="filters.age"
|
|
:disabled="!filters.ageRequired"
|
|
@enable="(checked) => updateFilter('ageRequired', checked, filters.ageRequired !== checked)"
|
|
@input="(range) => updateFilter('age', range, false)"
|
|
@change="(range) => updateFilter('age', range, true)"
|
|
>
|
|
<template #start><Icon icon="leaf" /></template>
|
|
<template #end><Icon icon="tree3" /></template>
|
|
</RangeFilter>
|
|
</div>
|
|
|
|
<div class="filter">
|
|
<RangeFilter
|
|
label="bra size"
|
|
:min="0"
|
|
:max="braSizes.length - 1"
|
|
:value="filters.braSize"
|
|
:values="braSizes"
|
|
:disabled="!filters.braSizeRequired"
|
|
@enable="(checked) => updateFilter('braSizeRequired', checked, true)"
|
|
@input="(range) => updateFilter('braSize', range, false)"
|
|
@change="(range) => updateFilter('braSize', range, true)"
|
|
>
|
|
<template #start><Icon icon="boobs-small" /></template>
|
|
<template #end><Icon icon="boobs-big" /></template>
|
|
</RangeFilter>
|
|
|
|
<span class="filter-label">Enhanced Boobs</span>
|
|
|
|
<span
|
|
:class="{ [['off', 'default', 'on'][naturalBoobsValues.indexOf(filters.naturalBoobs)]]: true }"
|
|
class="toggle-container noclick"
|
|
>
|
|
<span
|
|
class="toggle-label off"
|
|
@click="updateFilter('naturalBoobs', true, true)"
|
|
><Icon icon="leaf" /></span>
|
|
|
|
<input
|
|
:value="naturalBoobsValues.indexOf(filters.naturalBoobs)"
|
|
class="toggle"
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
@change="updateFilter('naturalBoobs', naturalBoobsValues[$event.target.value], true)"
|
|
>
|
|
|
|
<span
|
|
class="toggle-label on"
|
|
@click="updateFilter('naturalBoobs', false, true)"
|
|
><Icon icon="magic-wand2" /></span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="filter">
|
|
<RangeFilter
|
|
label="height"
|
|
:min="50"
|
|
:max="220"
|
|
:value="filters.height"
|
|
:disabled="!filters.heightRequired"
|
|
unit="cm"
|
|
@enable="(checked) => updateFilter('heightRequired', checked, filters.heightRequired !== checked)"
|
|
@input="(range) => updateFilter('height', range, false)"
|
|
@change="(range) => updateFilter('height', range, true)"
|
|
>
|
|
<template #start><Icon icon="height-short" /></template>
|
|
<template #end><Icon icon="height" /></template>
|
|
</RangeFilter>
|
|
|
|
<RangeFilter
|
|
label="weight"
|
|
:min="30"
|
|
:max="200"
|
|
:value="filters.weight"
|
|
:disabled="!filters.weightRequired"
|
|
unit="kg"
|
|
@enable="(checked) => updateFilter('weightRequired', checked, filters.weightRequired !== checked)"
|
|
@input="(range) => updateFilter('weight', range, false)"
|
|
@change="(range) => updateFilter('weight', range, true)"
|
|
>
|
|
<template #start><Icon icon="meter-slow" /></template>
|
|
<template #end><Icon icon="meter-fast" /></template>
|
|
</RangeFilter>
|
|
</div>
|
|
|
|
<Tooltip class="filter">
|
|
<span
|
|
:class="{ enabled: filters.country }"
|
|
class="filter-trigger"
|
|
>
|
|
<img
|
|
v-if="filters.country"
|
|
:src="`/img/flags/${filters.country.toLowerCase()}.svg`"
|
|
class="flag"
|
|
>
|
|
|
|
<Icon
|
|
v-else
|
|
icon="earth2"
|
|
/>Country
|
|
</span>
|
|
|
|
<template #tooltip>
|
|
<input
|
|
v-model="countryQuery"
|
|
placeholder="Search"
|
|
class="input"
|
|
>
|
|
|
|
<Countries
|
|
v-if="!countryQuery"
|
|
:countries="topCountries"
|
|
:selected-country="country"
|
|
:update-value="updateFilter"
|
|
/>
|
|
|
|
<Countries
|
|
:countries="filteredCountries"
|
|
:selected-country="country"
|
|
:update-value="updateFilter"
|
|
/>
|
|
</template>
|
|
</Tooltip>
|
|
|
|
<div class="filter">
|
|
<Checkbox
|
|
:checked="filters.avatarRequired"
|
|
label="Require photo"
|
|
@change="(checked) => updateFilter('avatarRequired', checked, true)"
|
|
/>
|
|
</div>
|
|
</form>
|
|
|
|
<ul class="actors nolist">
|
|
<li
|
|
v-for="actor in actors"
|
|
:key="`actor-${actor.id}`"
|
|
>
|
|
<ActorTile
|
|
:actor="actor"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, inject } from 'vue';
|
|
|
|
import navigate from '#/src/navigate.js';
|
|
import { get } from '#/src/api.js';
|
|
|
|
import ActorTile from '#/components/actors/tile.vue';
|
|
import Gender from '#/components/actors/gender.vue';
|
|
import Checkbox from '#/components/form/checkbox.vue';
|
|
import RangeFilter from '#/components/filters/range.vue';
|
|
import Tooltip from '#/components/tooltip/tooltip.vue';
|
|
import Countries from '#/components/filters/countries.vue';
|
|
|
|
const { pageProps, urlParsed } = inject('pageContext');
|
|
|
|
const q = ref(urlParsed.search.q);
|
|
const actors = ref([]);
|
|
|
|
const countries = ref(pageProps.countries);
|
|
const countryQuery = ref('');
|
|
|
|
const topCountryAlpha2s = ['AU', 'BR', 'CZ', 'DE', 'JP', 'RU', 'GB', 'US'];
|
|
const topCountries = computed(() => countries.value.filter((country) => topCountryAlpha2s.includes(country.alpha2)));
|
|
const filteredCountries = computed(() => countries.value.filter((country) => new RegExp(countryQuery.value, 'i').test(country.name)));
|
|
|
|
actors.value = pageProps.actors;
|
|
|
|
console.log(countries.value);
|
|
|
|
const braSizes = 'ABCDEFGHIJKZ'.split('');
|
|
const naturalBoobsValues = [true, undefined, false];
|
|
|
|
const filters = ref({
|
|
gender: urlParsed.search.gender,
|
|
ageRequired: !!urlParsed.search.age,
|
|
age: urlParsed.search.age?.split(',').map((age) => Number(age)) || [18, 100],
|
|
braSizeRequired: !!urlParsed.search.cup,
|
|
braSize: urlParsed.search.cup?.split(',') || ['A', 'Z'],
|
|
naturalBoobs: urlParsed.search.nb ? urlParsed.search.nb === 'true' : undefined,
|
|
heightRequired: !!urlParsed.search.height,
|
|
height: urlParsed.search.height?.split(',').map((height) => Number(height)) || [50, 220],
|
|
weightRequired: !!urlParsed.search.weight,
|
|
weight: urlParsed.search.weight?.split(',').map((weight) => Number(weight)) || [30, 200],
|
|
avatarRequired: !!urlParsed.search.avatar,
|
|
});
|
|
|
|
async function search() {
|
|
const query = {
|
|
q: q.value || undefined,
|
|
gender: filters.value.gender || undefined,
|
|
age: filters.value.ageRequired ? filters.value.age.join(',') : undefined,
|
|
cup: filters.value.braSizeRequired ? filters.value.braSize.join(',') : undefined,
|
|
nb: filters.value.naturalBoobs,
|
|
height: filters.value.heightRequired ? filters.value.height.join(',') : undefined,
|
|
weight: filters.value.weightRequired ? filters.value.weight.join(',') : undefined,
|
|
avatar: filters.value.avatarRequired || undefined,
|
|
};
|
|
|
|
navigate('/actors', query, { redirect: false });
|
|
|
|
const res = await get('/actors', query);
|
|
|
|
actors.value = res.actors;
|
|
countries.value = res.countries;
|
|
}
|
|
|
|
function updateFilter(prop, value, reload = true) {
|
|
filters.value[prop] = value;
|
|
|
|
if (reload) {
|
|
search();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.gender-button {
|
|
&.selected .gender .icon {
|
|
fill: var(--text-light);
|
|
filter: none;
|
|
}
|
|
|
|
&:hover:not(.selected) {
|
|
.gender .icon {
|
|
fill: var(--text-light);
|
|
}
|
|
|
|
.male .icon {
|
|
filter: drop-shadow(0 0 1px var(--male));
|
|
}
|
|
|
|
.female .icon {
|
|
filter: drop-shadow(0 0 1px var(--female));
|
|
}
|
|
}
|
|
|
|
&:hover:not(.selected) .transsexual .icon {
|
|
fill: var(--female);
|
|
filter: drop-shadow(1px 0 0 var(--text-light)) drop-shadow(-1px 0 0 var(--text-light)) drop-shadow(0 1px 0 var(--text-light)) drop-shadow(0 -1px 0 var(--text-light)) drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.page {
|
|
height: 100%;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.filters {
|
|
width: 17rem;
|
|
flex-shrink: 0;
|
|
padding: .5rem 0;
|
|
border-right: solid 1px var(--shadow-weak-30);
|
|
overflow-y: auto;
|
|
|
|
.input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.filter {
|
|
padding: .5rem;
|
|
border-bottom: solid 1px var(--shadow-weak-30);
|
|
}
|
|
|
|
.actors {
|
|
display: grid;
|
|
flex-grow: 1;
|
|
grid-template-columns: repeat(auto-fill, 10rem);
|
|
gap: .25rem;
|
|
padding: 1rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.genders {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: .5rem;
|
|
}
|
|
|
|
.gender-button {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
border: none;
|
|
color: var(--shadow);
|
|
background: var(--background);
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
font-size: .9rem;
|
|
box-shadow: 0 0 3px var(--shadow-weak-20);
|
|
|
|
.male,
|
|
.female,
|
|
.transsexual {
|
|
padding: .2rem 0 0 0;
|
|
}
|
|
|
|
.icon {
|
|
fill: var(--shadow);
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
fill: var(--text);
|
|
}
|
|
}
|
|
|
|
&.selected {
|
|
background: var(--primary);
|
|
color: var(--text-light);
|
|
|
|
&.other .icon {
|
|
fill: var(--text-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
.countries {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|