Added height and weight filters to actors overview.

2021-03-03 16:47:57 +01:00 · 2021-03-03 16:47:57 +01:00 · 74e33303ed
parent cdb47066cc
commit 74e33303ed
4 changed files with 126 additions and 20 deletions
--- a/assets/components/actors/actors.vue
+++ b/assets/components/actors/actors.vue
@ -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,14 +220,19 @@ 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;
+
+	if (load) {
 		this.updateFilters();
 	}
+}

 async function fetchActors(scroll) {
 	const curatedGender = this.gender.replace('trans', 'transsexual');
@ -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;
 	}
 }

--- a/assets/components/form/range.vue
+++ b/assets/components/form/range.vue
@ -22,7 +22,8 @@
 				:disabled="disabled"
 				type="range"
 				class="slider"
-				@change="emit"
+				@input="emit('input')"
+				@change="emit('change')"
 				@click.stop
 			>

@ -34,7 +35,8 @@
 				:disabled="disabled"
 				type="range"
 				class="slider"
-				@change="emit"
+				@input="emit('input')"
+				@change="emit('change')"
 				@click.stop
 			>
 		</div>
@ -59,20 +61,20 @@ function maxValue() {
 }

 function minPercentage() {
-	return (this.minValue / this.max) * 100;
+	return ((this.minValue - this.min) / (this.max - this.min)) * 100;
 }

 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) {
-		this.$emit('change', [this.values[this.minValue], this.values[this.maxValue]]);
+		this.$emit(type, [this.values[this.minValue], this.values[this.maxValue]]);
 		return;
 	}

-	this.$emit('change', [this.minValue, this.maxValue]);
+	this.$emit(type, [this.minValue, this.maxValue]);
 }

 function setNearest(event) {
@ -115,7 +117,7 @@ export default {
 			default: false,
 		},
 	},
-	emits: ['change'],
+	emits: ['change', 'input'],
 	data() {
 		if (this.values) {
 			return {
--- a/assets/img/icons/user6.svg
+++ b/assets/img/icons/user6.svg
@ -1,8 +1,33 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-<title>user6</title>
-<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>
-<path d="M7 8.922h2v2.078h-2v-2.078z"></path>
-<path d="M1 12c0-1.105 3.134-2 7-2s7 0.895 7 2z"></path>
-<path d="M1 12h14v2h-14v-2z"></path>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   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>
--- a/assets/js/actors/actions.js
+++ b/assets/js/actors/actions.js
@ -268,12 +268,16 @@ function initActorActions(store, router) {
 		gender,
 		naturalBoobs,
 		boobSize,
+		height,
+		weight,
 	}) {
 		const genderFilter = (gender === null && 'gender: { isNull: true }')
 			|| (gender === 'all' && ' ')
 			|| `gender: { equalTo: "${gender}" }`;

 		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(`
            query Actors(
@ -298,6 +302,8 @@ function initActorActions(store, router) {
 							equalTo: $naturalBoobs
 						}
 						${cupFilter}
+						${heightFilter}
+						${weightFilter}
                    }
                ) {
 					totalCount