forked from DebaucheryLibrarian/traxxx
128 lines
2.7 KiB
Vue
Executable File
128 lines
2.7 KiB
Vue
Executable File
<template>
|
|
<div class="stats">
|
|
<div class="content-inner">
|
|
<h1 class="heading">Stats</h1>
|
|
|
|
<dl class="stat-table">
|
|
<div class="stat-row">
|
|
<dt class="stat-label">Version</dt>
|
|
<dd class="stat-value">{{ version }}</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<template v-if="loaded">
|
|
<dl class="stat-table">
|
|
<div class="stat-row">
|
|
<dt class="stat-label">Content updated</dt>
|
|
<dd
|
|
class="stat-value"
|
|
:title="format(lastScrape, 'yyyy-MM-dd HH:mm')"
|
|
>{{ formatDistance(lastScrape, new Date(), { includeSeconds: true }) }} ago</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<dl class="stat-table">
|
|
<div class="stat-row">
|
|
<dt class="stat-label">Networks</dt>
|
|
<dd class="stat-value">{{ totalNetworks.toLocaleString() }}</dd>
|
|
</div>
|
|
|
|
<div class="stat-row">
|
|
<dt class="stat-label">Channels</dt>
|
|
<dd class="stat-value">{{ totalChannels.toLocaleString() }}</dd>
|
|
</div>
|
|
|
|
<div class="stat-row">
|
|
<dt class="stat-label">Scenes</dt>
|
|
<dd class="stat-value">{{ totalScenes.toLocaleString() }}</dd>
|
|
</div>
|
|
|
|
<div class="stat-row">
|
|
<dt class="stat-label">Movies</dt>
|
|
<dd class="stat-value">{{ totalMovies.toLocaleString() }}</dd>
|
|
</div>
|
|
|
|
<div class="stat-row">
|
|
<dt class="stat-label">Actors</dt>
|
|
<dd class="stat-value">{{ totalActors.toLocaleString() }}</dd>
|
|
</div>
|
|
</dl>
|
|
</template>
|
|
|
|
<Ellipsis v-else />
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
import { format, formatDistance } from 'date-fns';
|
|
|
|
import Ellipsis from '../loading/ellipsis.vue';
|
|
|
|
const store = useStore();
|
|
const version = VERSION; // eslint-disable-line no-undef
|
|
|
|
const loaded = ref(false);
|
|
const totalScenes = ref(0);
|
|
const totalMovies = ref(0);
|
|
const totalActors = ref(0);
|
|
const totalNetworks = ref(0);
|
|
const totalChannels = ref(0);
|
|
const lastScrape = ref(null);
|
|
|
|
onMounted(async () => {
|
|
const stats = await store.dispatch('fetchStats');
|
|
|
|
totalScenes.value = stats.totalScenes;
|
|
totalMovies.value = stats.totalMovies;
|
|
totalActors.value = stats.totalActors;
|
|
totalNetworks.value = stats.totalNetworks;
|
|
totalChannels.value = stats.totalChannels;
|
|
lastScrape.value = stats.lastScrape;
|
|
|
|
loaded.value = true;
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.content-inner {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.stat-table {
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
|
|
.stat-row {
|
|
width: 20rem;
|
|
max-width: 100%;
|
|
display: flex;
|
|
padding: .5rem 0;
|
|
justify-content: space-between;
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: solid 1px var(--shadow-hint);
|
|
}
|
|
}
|
|
|
|
.stat-label {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
color: var(--shadow-strong);
|
|
}
|
|
|
|
.stat-value {
|
|
display: inline-block;
|
|
}
|
|
</style>
|