Refactored stats page.

This commit is contained in:
DebaucheryLibrarian
2023-06-24 17:16:06 +02:00
parent f4ed4fb8d8
commit fbcf17d1c4
15 changed files with 139 additions and 62 deletions

View File

@@ -8,71 +8,80 @@
<dt class="stat-label">Version</dt>
<dd class="stat-value">{{ version }}</dd>
</div>
<div class="stat-row">
<dt class="stat-label">Content updated</dt>
<dd class="stat-value">{{ formatDate(lastScrape, 'YYYY-MM-DD HH:mm') }}</dd>
</div>
</dl>
<dl class="stat-table">
<div class="stat-row">
<dt class="stat-label">Networks</dt>
<dd class="stat-value">{{ totalNetworks }}</dd>
</div>
<template v-if="loaded">
<dl class="stat-table">
<div class="stat-row">
<dt class="stat-label">Content updated</dt>
<dd class="stat-value">{{ formatDate(lastScrape, 'YYYY-MM-DD HH:mm') }}</dd>
</div>
</dl>
<div class="stat-row">
<dt class="stat-label">Channels</dt>
<dd class="stat-value">{{ totalChannels }}</dd>
</div>
<dl class="stat-table">
<div class="stat-row">
<dt class="stat-label">Networks</dt>
<dd class="stat-value">{{ totalNetworks }}</dd>
</div>
<div class="stat-row">
<dt class="stat-label">Scenes</dt>
<dd class="stat-value">{{ totalScenes }}</dd>
</div>
<div class="stat-row">
<dt class="stat-label">Channels</dt>
<dd class="stat-value">{{ totalChannels }}</dd>
</div>
<div class="stat-row">
<dt class="stat-label">Movies</dt>
<dd class="stat-value">{{ totalMovies }}</dd>
</div>
<div class="stat-row">
<dt class="stat-label">Scenes</dt>
<dd class="stat-value">{{ totalScenes }}</dd>
</div>
<div class="stat-row">
<dt class="stat-label">Actors</dt>
<dd class="stat-value">{{ totalActors }}</dd>
</div>
</dl>
<div class="stat-row">
<dt class="stat-label">Movies</dt>
<dd class="stat-value">{{ totalMovies }}</dd>
</div>
<div class="stat-row">
<dt class="stat-label">Actors</dt>
<dd class="stat-value">{{ totalActors }}</dd>
</div>
</dl>
</template>
<Ellipsis v-else />
</div>
<Footer />
</div>
</template>
<script>
async function mounted() {
const stats = await this.$store.dispatch('fetchStats');
<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
this.totalScenes = stats.totalScenes;
this.totalMovies = stats.totalMovies;
this.totalActors = stats.totalActors;
this.totalNetworks = stats.totalNetworks;
this.totalChannels = stats.totalChannels;
this.lastScrape = stats.lastScrape;
import Ellipsis from '../loading/ellipsis.vue';
this.version = VERSION; // eslint-disable-line no-undef
}
const store = useStore();
const version = VERSION; // eslint-disable-line no-undef
export default {
data() {
return {
totalScenes: 0,
totalMovies: 0,
totalActors: 0,
totalNetworks: 0,
totalChannels: 0,
};
},
mounted,
};
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>