487 lines
12 KiB
Vue
487 lines
12 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">
|
|
<div class="filter-section">
|
|
<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-section">
|
|
<label class="filter-label">
|
|
<span class="label">
|
|
<Checkbox
|
|
:checked="filters.dobRequired"
|
|
class="checkbox"
|
|
@change="(checked) => updateFilter('dobRequired', checked, true)"
|
|
/>
|
|
|
|
<select
|
|
v-model="filters.dobType"
|
|
class="input select"
|
|
@change="() => updateFilter('dobRequired', true, true)"
|
|
>
|
|
<option value="birthday">Birthday</option>
|
|
<option value="dob">Date of birth</option>
|
|
</select>
|
|
</span>
|
|
</label>
|
|
|
|
<div
|
|
class="input-container"
|
|
@click="() => updateFilter('dobRequired', true, true)"
|
|
>
|
|
<input
|
|
:value="filters.dob"
|
|
:disabled="!filters.dobRequired"
|
|
:max="maxDob"
|
|
type="date"
|
|
class="input"
|
|
@change="(event) => updateFilter('dob', event.target.value, true)"
|
|
>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<div
|
|
v-if="filteredCountries.length > 0"
|
|
class="countries-container"
|
|
>
|
|
<input
|
|
v-if="!filters.country"
|
|
v-model="countryQuery"
|
|
type="search"
|
|
placeholder="Search country"
|
|
class="input input-inline countries-search"
|
|
>
|
|
|
|
<div class="countries-list">
|
|
<Countries
|
|
v-if="!countryQuery && !filters.country && topCountries.length < filteredCountries.length"
|
|
:countries="topCountries"
|
|
:selected-country="filters.country"
|
|
:update-value="updateFilter"
|
|
/>
|
|
|
|
<Countries
|
|
:countries="filteredCountries"
|
|
:selected-country="filters.country"
|
|
:update-value="updateFilter"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<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 { format, subYears } from 'date-fns';
|
|
|
|
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 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(() => topCountryAlpha2s.map((alpha2) => countries.value.find((country) => country.alpha2 === alpha2)).filter(Boolean));
|
|
const filteredCountries = computed(() => countries.value.filter((country) => new RegExp(countryQuery.value, 'i').test(country.name)));
|
|
|
|
const maxDob = format(subYears(new Date(), 18), 'yyyy-MM-dd');
|
|
|
|
actors.value = pageProps.actors;
|
|
|
|
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],
|
|
dobRequired: !!urlParsed.search.dob,
|
|
dobType: urlParsed.search.dobt ? ({ bd: 'birthday', dob: 'dob' })[urlParsed.search.dobt] : 'birthday',
|
|
dob: urlParsed.search.dob || format(subYears(new Date(), 21), 'yyyy-MM-dd'),
|
|
country: urlParsed.search.c,
|
|
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,
|
|
});
|
|
|
|
console.log(filters.value.dobType);
|
|
|
|
async function search() {
|
|
const query = {
|
|
q: q.value || undefined,
|
|
gender: filters.value.gender || undefined,
|
|
age: filters.value.ageRequired ? filters.value.age.join(',') : undefined,
|
|
dob: filters.value.dobRequired ? filters.value.dob : undefined,
|
|
dobt: filters.value.dobRequired ? ({ birthday: 'bd', dob: 'dob' })[filters.value.dobType] : undefined,
|
|
cup: filters.value.braSizeRequired ? filters.value.braSize.join(',') : undefined,
|
|
c: filters.value.country || 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;
|
|
border-right: solid 1px var(--shadow-weak-30);
|
|
overflow-y: auto;
|
|
|
|
.input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.filter {
|
|
padding: .5rem .25rem;
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.select {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.countries-container {
|
|
border-bottom: solid 1px var(--shadow-weak-30);
|
|
}
|
|
|
|
.countries-search {
|
|
width: 100%;
|
|
margin-bottom: .25rem;
|
|
border-bottom: solid 1px var(--shadow-weak-40);
|
|
}
|
|
|
|
.countries-list {
|
|
max-height: 13rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
:deep(.country.selected) .country-name {
|
|
padding: .5rem;
|
|
}
|
|
|
|
.filter-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--shadow);
|
|
font-size: .9rem;
|
|
font-weight: bold;
|
|
|
|
.icon,
|
|
.flag {
|
|
fill: var(--shadow);
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin: -.1rem .75rem 0 0;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--shadow-strong);
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
fill: var(--shadow-strong);
|
|
}
|
|
}
|
|
|
|
&.enabled {
|
|
color: var(--primary);
|
|
|
|
.icon {
|
|
fill: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
</style>
|