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

View File

@ -22,7 +22,8 @@
:disabled="disabled" :disabled="disabled"
type="range" type="range"
class="slider" class="slider"
@change="emit" @input="emit('input')"
@change="emit('change')"
@click.stop @click.stop
> >
@ -34,7 +35,8 @@
:disabled="disabled" :disabled="disabled"
type="range" type="range"
class="slider" class="slider"
@change="emit" @input="emit('input')"
@change="emit('change')"
@click.stop @click.stop
> >
</div> </div>
@ -59,20 +61,20 @@ function maxValue() {
} }
function minPercentage() { function minPercentage() {
return (this.minValue / this.max) * 100; return ((this.minValue - this.min) / (this.max - this.min)) * 100;
} }
function maxPercentage() { function maxPercentage() {
return (this.maxValue / this.max) * 100; return ((this.maxValue - this.min) / (this.max - this.min)) * 100;
} }
function emit() { function emit(type = 'change') {
if (this.values) { if (this.values) {
this.$emit('change', [this.values[this.minValue], this.values[this.maxValue]]); this.$emit(type, [this.values[this.minValue], this.values[this.maxValue]]);
return; return;
} }
this.$emit('change', [this.minValue, this.maxValue]); this.$emit(type, [this.minValue, this.maxValue]);
} }
function setNearest(event) { function setNearest(event) {
@ -115,7 +117,7 @@ export default {
default: false, default: false,
}, },
}, },
emits: ['change'], emits: ['change', 'input'],
data() { data() {
if (this.values) { if (this.values) {
return { return {

View File

@ -1,8 +1,33 @@
<!-- Generated by IcoMoon.io --> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <svg
<title>user6</title> xmlns:dc="http://purl.org/dc/elements/1.1/"
<path d="M11.5 5.5c0 2.485-1.567 4.5-3.5 4.5s-3.5-2.015-3.5-4.5c0-2.485 1.567-4.5 3.5-4.5s3.5 2.015 3.5 4.5z"></path> xmlns:cc="http://creativecommons.org/ns#"
<path d="M7 8.922h2v2.078h-2v-2.078z"></path> xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
<path d="M1 12c0-1.105 3.134-2 7-2s7 0.895 7 2z"></path> xmlns:svg="http://www.w3.org/2000/svg"
<path d="M1 12h14v2h-14v-2z"></path> xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="16"
height="16"
viewBox="0 0 16 16"
id="svg12">
<metadata
id="metadata18">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>user6</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs16" />
<title
id="title2">user6</title>
<path
id="path4"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill-opacity:1;fill-rule:nonzero;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1;stroke:none;opacity:1"
d="M 8 1 C 6.067 1 4.5 3.015 4.5 5.5 C 4.5 7.535206 5.5576181 9.2350589 7 9.7910156 L 7 10.029297 C 3.6121657 10.168998 1 10.992951 1 12 L 1 14 L 15 14 L 15 12 C 15 10.992951 12.387834 10.168998 9 10.029297 L 9 9.7910156 C 10.442382 9.2350589 11.5 7.535206 11.5 5.5 C 11.5 3.015 9.933 1 8 1 z " />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 417 B

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -268,12 +268,16 @@ function initActorActions(store, router) {
gender, gender,
naturalBoobs, naturalBoobs,
boobSize, boobSize,
height,
weight,
}) { }) {
const genderFilter = (gender === null && 'gender: { isNull: true }') const genderFilter = (gender === null && 'gender: { isNull: true }')
|| (gender === 'all' && ' ') || (gender === 'all' && ' ')
|| `gender: { equalTo: "${gender}" }`; || `gender: { equalTo: "${gender}" }`;
const cupFilter = boobSize ? `cup: { greaterThanOrEqualTo: "${boobSize[0]}", lessThanOrEqualTo: "${boobSize[1]}" }` : ''; const cupFilter = boobSize ? `cup: { greaterThanOrEqualTo: "${boobSize[0]}", lessThanOrEqualTo: "${boobSize[1]}" }` : '';
const heightFilter = height ? `height: { greaterThanOrEqualTo: ${height[0]}, lessThanOrEqualTo: ${height[1]} }` : '';
const weightFilter = weight ? `weight: { greaterThanOrEqualTo: ${weight[0]}, lessThanOrEqualTo: ${weight[1]} }` : '';
const { connection: { actors, totalCount } } = await graphql(` const { connection: { actors, totalCount } } = await graphql(`
query Actors( query Actors(
@ -298,6 +302,8 @@ function initActorActions(store, router) {
equalTo: $naturalBoobs equalTo: $naturalBoobs
} }
${cupFilter} ${cupFilter}
${heightFilter}
${weightFilter}
} }
) { ) {
totalCount totalCount