traxxx/assets/components/stats/stats.vue

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>