Added actor stash.
This commit is contained in:
@@ -1,270 +1,9 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<Filters :results="total">
|
||||
<div class="filter">
|
||||
<input
|
||||
v-model="q"
|
||||
type="search"
|
||||
placeholder="Search actors"
|
||||
class="input search"
|
||||
@search="search"
|
||||
>
|
||||
</div>
|
||||
|
||||
<GenderFilter
|
||||
:filters="filters"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<BirthdateFilter
|
||||
:filters="filters"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<BoobsFilter
|
||||
:filters="filters"
|
||||
:cup-range="cupRange"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<PhysiqueFilter
|
||||
:filters="filters"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<CountryFilter
|
||||
:filters="filters"
|
||||
:countries="countries"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<div class="filter">
|
||||
<Checkbox
|
||||
:checked="filters.avatarRequired"
|
||||
label="Require photo"
|
||||
@change="(checked) => updateFilter('avatarRequired', checked, true)"
|
||||
/>
|
||||
</div>
|
||||
</Filters>
|
||||
|
||||
<div class="actors-container">
|
||||
<div class="actors-header">
|
||||
<div class="meta">
|
||||
<span class="count">{{ total }} results</span>
|
||||
|
||||
<select
|
||||
v-model="order"
|
||||
class="input"
|
||||
@change="search({ autoScope: false })"
|
||||
>
|
||||
<option value="name.asc">Name</option>
|
||||
<option value="likes.desc">Likes</option>
|
||||
<option value="scenes.desc">Scenes</option>
|
||||
<option
|
||||
value="relevance.desc"
|
||||
:disabled="!q"
|
||||
>Relevance</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="actors nolist">
|
||||
<li
|
||||
v-for="actor in actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
>
|
||||
<ActorTile
|
||||
:actor="actor"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Pagination
|
||||
:page="currentPage"
|
||||
:total="total"
|
||||
:redirect="false"
|
||||
@navigation="paginate"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Actors />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject } from 'vue';
|
||||
import { format, subYears } from 'date-fns';
|
||||
|
||||
import navigate from '#/src/navigate.js';
|
||||
import { get } from '#/src/api.js';
|
||||
import events from '#/src/events.js';
|
||||
|
||||
import ActorTile from '#/components/actors/tile.vue';
|
||||
import Pagination from '#/components/pagination/pagination.vue';
|
||||
import Checkbox from '#/components/form/checkbox.vue';
|
||||
import Filters from '#/components/filters/filters.vue';
|
||||
import GenderFilter from '#/components/filters/gender.vue';
|
||||
import BirthdateFilter from '#/components/filters/birthdate.vue';
|
||||
import BoobsFilter from '#/components/filters/boobs.vue';
|
||||
import PhysiqueFilter from '#/components/filters/physique.vue';
|
||||
import CountryFilter from '#/components/filters/country.vue';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const { pageProps, urlParsed, routeParams } = pageContext;
|
||||
|
||||
const q = ref(urlParsed.search.q);
|
||||
const actors = ref([]);
|
||||
const countries = ref(pageProps.countries);
|
||||
const cupRange = ref(pageProps.cupRange);
|
||||
|
||||
actors.value = pageProps.actors;
|
||||
|
||||
const currentPage = ref(Number(routeParams.page));
|
||||
const total = ref(Number(pageProps.total));
|
||||
const order = ref(urlParsed.search.order || 'likes.desc');
|
||||
|
||||
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,
|
||||
});
|
||||
|
||||
async function search(options = {}) {
|
||||
if (options.resetPage !== false) {
|
||||
currentPage.value = 1;
|
||||
}
|
||||
|
||||
if (options.autoScope !== false) {
|
||||
if (q.value) {
|
||||
order.value = 'relevance.desc';
|
||||
}
|
||||
|
||||
if (!q.value && order.value.includes('relevance')) {
|
||||
order.value = 'likes.desc';
|
||||
}
|
||||
}
|
||||
|
||||
const query = {
|
||||
q: q.value || undefined,
|
||||
order: order.value,
|
||||
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/${currentPage.value}`, query, { redirect: false });
|
||||
|
||||
const res = await get('/actors', {
|
||||
...query,
|
||||
page: currentPage.value, // client uses param rather than query pagination
|
||||
});
|
||||
|
||||
actors.value = res.actors;
|
||||
total.value = res.total;
|
||||
|
||||
countries.value = res.countries;
|
||||
|
||||
events.emit('scrollUp');
|
||||
}
|
||||
|
||||
function paginate({ page }) {
|
||||
currentPage.value = page;
|
||||
|
||||
search({ resetPage: false });
|
||||
}
|
||||
|
||||
function updateFilter(prop, value, reload = true) {
|
||||
filters.value[prop] = value;
|
||||
|
||||
if (reload) {
|
||||
search();
|
||||
}
|
||||
}
|
||||
import Actors from '#/components/actors/actors.vue';
|
||||
</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 {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.actors-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem 0 .25rem 2rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.actors-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.actors {
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
gap: .25rem;
|
||||
}
|
||||
|
||||
@media(--small-40) {
|
||||
.actors {
|
||||
grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,7 +12,7 @@ export async function onBeforeRender(pageContext) {
|
||||
page: Number(pageContext.routeParams.page) || 1,
|
||||
limit: Number(pageContext.urlParsed.search.limit) || 120,
|
||||
order: pageContext.urlParsed.search.order?.split('.') || ['likes', 'desc'],
|
||||
});
|
||||
}, pageContext.user);
|
||||
|
||||
return {
|
||||
pageContext: {
|
||||
|
||||
@@ -25,20 +25,19 @@
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<!--
|
||||
<Social
|
||||
v-if="actor.social && actor.social.length > 0"
|
||||
:actor="actor"
|
||||
class="header-social"
|
||||
<Icon
|
||||
v-show="favorited"
|
||||
icon="heart7"
|
||||
class="heart favorited"
|
||||
@click.native.stop="unstash"
|
||||
/>
|
||||
|
||||
<StashButton
|
||||
:stashed-by="stashedBy"
|
||||
class="actor-stash light"
|
||||
@stash="(stash) => stashActor(stash)"
|
||||
@unstash="(stash) => unstashActor(stash)"
|
||||
<Icon
|
||||
v-show="!favorited && user"
|
||||
icon="heart8"
|
||||
class="heart"
|
||||
@click.native.stop="stash"
|
||||
/>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
@@ -50,15 +49,61 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject } from 'vue';
|
||||
import { ref, inject } from 'vue';
|
||||
|
||||
import { post, del } from '#/src/api.js';
|
||||
import events from '#/src/events.js';
|
||||
|
||||
import Bio from '#/components/actors/bio.vue';
|
||||
import Gender from '#/components/actors/gender.vue';
|
||||
import Scenes from '#/components/scenes/scenes.vue';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const { pageProps } = pageContext;
|
||||
const { pageProps, user } = pageContext;
|
||||
const { actor } = pageProps;
|
||||
|
||||
const favorited = ref(actor.stashes?.some((sceneStash) => sceneStash.primary) || false);
|
||||
|
||||
async function stash() {
|
||||
try {
|
||||
favorited.value = true;
|
||||
|
||||
await post(`/stashes/${user.primaryStash.id}/actors`, { actorId: actor.id });
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'success',
|
||||
message: `${actor.name} stashed to ${user.primaryStash.name}`,
|
||||
});
|
||||
} catch (error) {
|
||||
favorited.value = false;
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'error',
|
||||
message: `Failed to stash ${actor.name} to ${user.primaryStash.name}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function unstash() {
|
||||
try {
|
||||
favorited.value = false;
|
||||
await del(`/stashes/${user.primaryStash.id}/actors/${actor.id}`);
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'remove',
|
||||
message: `${actor.name} unstashed from ${user.primaryStash.name}`,
|
||||
});
|
||||
} catch (error) {
|
||||
favorited.value = true;
|
||||
|
||||
console.error(error);
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'error',
|
||||
message: `Failed to unstash ${actor.name} from ${user.primaryStash.name}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -73,6 +118,7 @@ const { actor } = pageProps;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
color: var(--highlight-strong-30);
|
||||
background: var(--grey-dark-40);
|
||||
}
|
||||
@@ -103,4 +149,24 @@ const { actor } = pageProps;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.icon.heart {
|
||||
width: 2rem;
|
||||
height: 1.5rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: .5rem 1rem 1rem 1rem;
|
||||
fill: var(--highlight-strong-10);
|
||||
filter: drop-shadow(0 0 3px var(--shadow));
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
&.favorited {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { curateScenesQuery } from '#/src/web/scenes.js';
|
||||
|
||||
export async function onBeforeRender(pageContext) {
|
||||
const [[actor], actorScenes] = await Promise.all([
|
||||
fetchActorsById([Number(pageContext.routeParams.actorId)]),
|
||||
fetchActorsById([Number(pageContext.routeParams.actorId)], {}, pageContext.user),
|
||||
fetchScenes(await curateScenesQuery({
|
||||
...pageContext.urlQuery,
|
||||
scope: pageContext.routeParams.scope || 'latest',
|
||||
@@ -13,7 +13,7 @@ export async function onBeforeRender(pageContext) {
|
||||
page: Number(pageContext.routeParams.page) || 1,
|
||||
limit: Number(pageContext.urlParsed.search.limit) || 30,
|
||||
aggregate: true,
|
||||
}),
|
||||
}, pageContext.user),
|
||||
]);
|
||||
|
||||
const {
|
||||
|
||||
Reference in New Issue
Block a user