Added height and weight filters to actors overview.

This commit is contained in:
DebaucheryLibrarian
2021-03-03 16:47:57 +01:00
parent cdb47066cc
commit 74e33303ed
4 changed files with 126 additions and 20 deletions

View File

@@ -66,7 +66,7 @@
<template v-slot:tooltip>
<div class="filter-section boobsize">
<label class="filter-label off">Size</label>
<label class="filter-label off">Size ({{ boobSize[0] }} - {{ boobSize[1] }})</label>
<span class="filter-split">
<Checkbox
@@ -81,7 +81,8 @@
:value="boobSize"
:values="boobSizes"
:disabled="!boobSizeRequired"
@change="(sizeRange) => updateValue('boobSize', sizeRange)"
@input="(sizeRange) => updateValue('boobSize', sizeRange, false)"
@change="(sizeRange) => updateValue('boobSize', sizeRange, true)"
>
<template v-slot:start>
<span class="range-label"><Icon icon="boobs-small" /></span>
@@ -124,6 +125,62 @@
</template>
</Tooltip>
</li>
<li>
<Tooltip class="filter boobs">
<span class="filter-trigger"><Icon icon="rulers" />Physique</span>
<template v-slot:tooltip>
<div class="filter-section">
<label class="filter-label off">Height ({{ height[0] }} - {{ height[1] }} cm)</label>
<span class="filter-split">
<Checkbox
:checked="heightRequired"
class="checkbox"
@change="(checked) => updateValue('heightRequired', checked)"
/>
<Range
:min="50"
:max="250"
:value="height"
:disabled="!heightRequired"
@input="(heightRange) => updateValue('height', heightRange, false)"
@change="(heightRange) => updateValue('height', heightRange, true)"
>
<template v-slot:start><Icon icon="shorts" /></template>
<template v-slot:end><Icon icon="pants" /></template>
</Range>
</span>
</div>
<div class="filter-section">
<label class="filter-label off">Weight ({{ weight[0] }} - {{ weight[1] }} kg)</label>
<span class="filter-split">
<Checkbox
:checked="weightRequired"
class="checkbox"
@change="(checked) => updateValue('weightRequired', checked)"
/>
<Range
:min="30"
:max="200"
:value="weight"
:disabled="!weightRequired"
@input="(weightRange) => updateValue('weight', weightRange, false)"
@change="(weightRange) => updateValue('weight', weightRange, true)"
>
<template v-slot:start><Icon icon="user6" /></template>
<template v-slot:end><Icon icon="user3" /></template>
</Range>
</span>
</div>
</template>
</Tooltip>
</li>
</ul>
</nav>
@@ -163,13 +220,18 @@ function updateFilters() {
query: {
naturalBoobs: toggleValues[this.naturalBoobs],
bs: this.boobSizeRequired ? this.boobSize.join(',') : undefined,
h: this.heightRequired ? this.height.join(',') : undefined,
w: this.weightRequired ? this.weight.join(',') : undefined,
},
});
}
function updateValue(prop, value) {
function updateValue(prop, value, load = true) {
this[prop] = value;
this.updateFilters();
if (load) {
this.updateFilters();
}
}
async function fetchActors(scroll) {
@@ -182,6 +244,8 @@ async function fetchActors(scroll) {
gender: curatedGender === 'other' ? null : curatedGender,
boobSize: this.boobSizeRequired && this.boobSize,
naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
height: this.heightRequired && this.height,
weight: this.weightRequired && this.weight,
});
this.actors = actors;
@@ -235,6 +299,10 @@ export default {
boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'],
boobSizeRequired: !!this.$route.query.bs,
naturalBoobs: naturalBoobs > -1 ? naturalBoobs : 1,
height: this.$route.query.h?.split(',').map(Number) || [50, 250],
heightRequired: !!this.$route.query.h,
weight: this.$route.query.w?.split(',').map(Number) || [30, 200],
weightRequired: !!this.$route.query.w,
};
},
computed: {
@@ -388,6 +456,11 @@ export default {
}
}
.filter-section {
width: 15rem;
max-width: 100%;
}
.filter-label {
display: flex;
justify-content: center;
@@ -408,7 +481,7 @@ export default {
.checkbox {
display: inline-block;
padding: 0 0 0 .5rem;
padding: 0 .5rem;
}
}