boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Added timerange filters. Refactored releases module for more efficient queries.

Browse Source
This commit is contained in:
ThePendulum
2019-11-15 01:27:58 +01:00
parent a089bf892c
commit 1c3f17ec82
13 changed files with 280 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
assets/components/home/filter-bar.vue
View File

@@ -1,24 +1,70 @@
<template>
<div class="filter-bar noselect">
<Icon icon="filter" />
<span>
<label class="range">
<input
:id="`${_uid}-all`"
:checked="range === 'all'"
type="radio"
class="range-input"
@click="$emit('set-range', 'all')"
>
<label
:for="`${_uid}-all`"
class="range-button"
>All</label>
</label>
<Filters
class="filters-container"
:filter="filter"
@set-filter="filter => $emit('set-filter', filter)"
/>
<label class="range">
<input
:id="`${_uid}-new`"
:checked="range === 'new'"
type="radio"
class="range-input"
@click="$emit('set-range', 'new')"
>
<label
:for="`${_uid}-new`"
class="range-button"
>New</label>
</label>
<v-popover class="filters-compact">
<div>Filters</div>
<label class="range">
<input
:id="`${_uid}-upcoming`"
:checked="range === 'upcoming'"
type="radio"
class="range-input"
@click="$emit('set-range', 'upcoming')"
>
<label
:for="`${_uid}-upcoming`"
class="range-button"
>Upcoming</label>
</label>
</span>
<div slot="popover">
<Filters
:compact="true"
:filter="filter"
@set-filter="filter => $emit('set-filter', filter)"
/>
</div>
</v-popover>
<span>
<Icon icon="filter" />
<Filters
class="filters-container"
:filter="filter"
@set-filter="filter => $emit('set-filter', filter)"
/>
<v-popover class="filters-compact">
<div>Filters</div>
<div slot="popover">
<Filters
:compact="true"
:filter="filter"
@set-filter="filter => $emit('set-filter', filter)"
/>
</div>
</v-popover>
</span>
</div>
</template>
@@ -34,6 +80,10 @@ export default {
type: Array,
default: () => [],
},
range: {
type: String,
default: null,
},
},
};
</script>
@@ -43,7 +93,8 @@ export default {
.filter-bar {
background: $background;
display: block;
display: flex;
justify-content: space-between;
padding: .5rem 1rem;
font-size: 0;
box-shadow: 0 0 3px $shadow;
@@ -64,6 +115,30 @@ export default {
margin: 0 0 0 .5rem;
}
.range-button {
color: $shadow;
background: $background;
display: inline-block;
padding: .5rem 1rem;
border: none;
box-shadow: 0 0 2px $shadow-weak;
font-size: .8rem;
font-weight: bold;
&:hover {
color: $text;
cursor: pointer;
}
}
.range-input {
display: none;
&:checked + .range-button {
color: $primary;
}
}
@media(max-width: $breakpoint) {
.filters-container {
display: none;

36
assets/components/home/filters.vue
View File

@@ -1,25 +1,6 @@
<template>
<div :class="{ compact }">
<ul class="filters">
<li
v-tooltip.bottom="'Not yet available'"
class="filter"
>
<label
class="toggle"
:class="{ active: !localFilter.includes('straight') }"
>
<input
v-model="localFilter"
value="straight"
type="checkbox"
class="check"
disabled
@change="$emit('set-filter', localFilter)"
>straight
</label>
</li>
<li class="filter">
<label
class="toggle"
@@ -82,23 +63,6 @@
</label>
</li>
</ul>
<ul class="filters">
<li class="filter">
<label
class="toggle"
:class="{ active: !localFilter.includes('femdom') }"
>
<input
v-model="localFilter"
value="femdom"
type="checkbox"
class="check"
@change="$emit('set-filter', localFilter)"
>femdom
</label>
</li>
</ul>
</div>
</template>

15
assets/components/home/home.vue
View File

@@ -2,7 +2,9 @@
<div class="content">
<FilterBar
:filter="filter"
:range="range"
@set-filter="setFilter"
@set-range="setRange"
/>
<div class="content-inner">
@@ -23,9 +25,12 @@
import FilterBar from './filter-bar.vue';
import ReleaseTile from '../tile/release.vue';
import rangeDates from '../../js/range-dates';
async function fetchReleases() {
this.releases = await this.$store.dispatch('fetchReleases', {
filter: this.filter,
...rangeDates(this.range),
});
}
@@ -36,6 +41,13 @@ async function setFilter(filter) {
await this.fetchReleases();
}
async function setRange(range) {
this.range = range;
localStorage.setItem('range', this.range);
await this.fetchReleases();
}
async function mounted() {
this.pageTitle = '';
@@ -49,9 +61,11 @@ export default {
},
data() {
const storedFilter = localStorage.getItem('filter');
const storedRange = localStorage.getItem('range');
return {
filter: storedFilter ? storedFilter.split(',') : ['gay', 'transsexual'],
range: storedRange || 'new',
releases: [],
networks: [],
pageTitle: null,
@@ -61,6 +75,7 @@ export default {
methods: {
fetchReleases,
setFilter,
setRange,
},
};
</script>

56
assets/components/release/release.vue
View File

@@ -9,6 +9,7 @@
<div class="column">
<a
v-if="release.date"
v-tooltip.bottom="`View scene on ${release.site.name}`"
:title="`View scene on ${release.site.name}`"
:href="release.url"
target="_blank"
@@ -21,6 +22,7 @@
<a
v-if="release.date"
v-tooltip.bottom="`View scene on ${release.site.name}`"
:title="`View scene on ${release.site.name}`"
:href="release.url"
target="_blank"
@@ -33,6 +35,7 @@
<span
v-if="release.shootId"
v-tooltip.bottom="`Shoot #`"
class="tidbit shoot hideable"
>
<Icon icon="clapboard-play" />
@@ -41,6 +44,7 @@
<span
v-if="release.duration"
v-tooltip.bottom="`Duration`"
class="tidbit duration hideable"
>
<Icon icon="stopwatch" />
@@ -127,6 +131,20 @@
</ul>
</div>
<div
v-if="release.duration"
class="row duration showable"
>
<Icon icon="stopwatch" />
<span
v-if="release.duration >= 3600"
class="duration-segment"
>{{ Math.floor(release.duration / 3600) }}:</span>
<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
</div>
<p
v-if="release.description"
class="row description"
@@ -150,29 +168,19 @@
>{{ release.studio.name }}</a>
</div>
<a
v-if="release.shootId"
:href="release.url"
:title="`release.shootId`"
target="_blank"
rel="noopener noreferrer"
class="row shoot showable"
>
<Icon icon="clapboard-play" />{{ release.shootId }}
</a>
<div
v-if="release.duration"
class="row duration showable"
v-if="release.shootId"
class="row showable"
>
<Icon icon="stopwatch" />
<Icon icon="clapboard-play" />
<span
v-if="release.duration >= 3600"
class="duration-segment"
>{{ Math.floor(release.duration / 3600) }}:</span>
<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
<a
:href="release.url"
:title="`release.shootId`"
target="_blank"
rel="noopener noreferrer"
class="link shoot"
>{{ release.shootId }}</a>
</div>
<span class="row">
@@ -199,7 +207,7 @@ function pageTitle() {
}
async function mounted() {
[this.release] = await this.$store.dispatch('fetchReleases', { id: this.$route.params.releaseId });
this.release = await this.$store.dispatch('fetchReleases', { id: this.$route.params.releaseId });
}
export default {
@@ -271,6 +279,7 @@ export default {
&.date,
&.duration,
&.shoot {
flex-shrink: 0;
padding: 1.25rem 1rem 1.25rem 0;
margin: 0 1rem 0 0;
}
@@ -293,12 +302,14 @@ export default {
height: 3rem;
max-width: 15rem;
object-fit: contain;
object-position: 100% 50%;
}
.logo-network {
height: 1.5rem;
max-width: 10rem;
object-fit: contain;
object-position: 100% 50%;
}
.chain {
@@ -373,7 +384,8 @@ export default {
}
.logo-site {
max-width: 10rem;
width: 15rem;
max-width: 100%;
}
}
</style>

2
assets/css/style.scss
View File

@@ -46,6 +46,6 @@ body {
@media(max-width: $breakpoint) {
.scenes {
grid-template-columns: repeat(auto-fit, minmax(22.5rem, 1fr));
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
}

18
assets/js/range-dates.js Normal file
View File

@@ -0,0 +1,18 @@
function rangeDates(range) {
return ({
new: () => ({
after: new Date(0),
before: new Date(),
}),
upcoming: () => ({
after: new Date(),
before: new Date(2 ** 42),
}),
all: () => ({
after: new Date(0),
before: new Date(2 ** 42),
}),
})[range]();
}
export default rangeDates;

18
assets/js/releases/actions.js
View File

@@ -1,8 +1,22 @@
import dayjs from 'dayjs';
import { get } from '../api';
function initReleasesActions(_store, _router) {
async function fetchReleases({ _commit }, { id, filter }) {
const releases = await get(`/releases/${id || ''}`, { filter });
async function fetchReleases({ _commit }, {
id,
filter,
after,
before,
}) {
const afterString = dayjs(after).format('YYYY-MM-DD');
const beforeString = dayjs(before).format('YYYY-MM-DD');
const releases = await get(`/releases/${id || ''}`, {
filter,
after: afterString,
before: beforeString,
});
return releases;
}