traxxx/assets/components/networks/networks.vue

206 lines
3.4 KiB
Vue

<template>
<div class="networks">
<div class="content-inner">
<SearchBar
:placeholder="`Search ${channelCount} channels in ${entities.length} networks`"
:eager="true"
/>
<span
v-if="done && entities.length === 0"
class="empty"
>No results for "{{ $route.query.query }}"</span>
<template v-else>
<h2 class="heading">Popular</h2>
<div
class="entity-tiles"
>
<Entity
v-for="entity in popularEntities"
:key="entity.parent ? `entity-tile-${entity.parent.slug}-${entity.slug}` : `entity-tile-${entity.slug}`"
:entity="entity"
/>
</div>
<h2 class="heading">All networks</h2>
<div
class="entity-tiles"
>
<Entity
v-for="entity in entities"
:key="entity.parent ? `entity-tile-${entity.parent.slug}-${entity.slug}` : `entity-tile-${entity.slug}`"
:entity="entity"
/>
</div>
</template>
</div>
<Footer />
</div>
</template>
<script>
import Entity from '../entities/tile.vue';
import SearchBar from '../search/bar.vue';
async function fetchEntities() {
if (this.$route.query.query) {
await this.searchEntities();
return;
}
this.done = false;
this.entities = await this.$store.dispatch('fetchEntities', {
type: 'network',
entitySlugs: [],
});
this.done = true;
}
async function searchEntities() {
this.done = false;
this.entities = await this.$store.dispatch('searchEntities', {
query: this.$route.query.query,
limit: 20,
});
this.done = true;
}
function popularEntities() {
const entitiesBySlug = Object.fromEntries(this.entities.map((entity) => [entity.slug, entity]));
return [
'21sextury',
'adulttime',
'amateurallure',
'analvids',
'bamvisions',
'bang',
'bangbros',
'blowpass',
'brazzers',
'burningangel',
'digitalplayground',
'dogfartnetwork',
'dorcel',
'elegantangel',
'evilangel',
'fakehub',
'girlsway',
'hookuphotshot',
'hussiepass',
'insex',
'julesjordan',
'kellymadison',
'kink',
'mofos',
'naughtyamerica',
'newsensations',
'pervcity',
'pornpros',
'private',
'realitykings',
'teamskeet',
'twistys',
'vixen',
'xempire',
].map((slug) => entitiesBySlug[slug]).filter(Boolean);
}
async function mounted() {
this.pageTitle = 'Channels';
await this.fetchEntities();
}
function channelCount() {
return this.entities.reduce((acc, entity) => acc + entity.childrenTotal, 0);
}
export default {
components: {
Entity,
SearchBar,
},
data() {
return {
done: false,
pageTitle: null,
entities: [],
};
},
computed: {
channelCount,
popularEntities,
},
watch: {
$route: fetchEntities,
},
mounted,
methods: {
fetchEntities,
searchEntities,
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.networks {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.content-inner {
padding: 0 1rem;
}
.search {
margin: 1rem 0 0 0;
}
.entity-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-gap: .5rem;
padding: 1rem 0;
.tile {
height: 6rem;
}
}
.empty {
display: block;
margin: 1rem 0;
color: var(--shadow);
font-size: 1.25rem;
font-weight: bold;
}
.heading {
margin: 1rem 0 0 0;
}
@media(max-width: $breakpoint2) {
.entity-tiles {
grid-gap: .5rem;
}
}
@media(max-width: $breakpoint0) {
.entity-tiles {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
}
</style>