Refactored stats page.
This commit is contained in:
@@ -165,6 +165,7 @@ export default {
|
||||
|
||||
.campaign-banner {
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@@ -288,6 +288,7 @@ export default {
|
||||
}
|
||||
|
||||
.campaign-container {
|
||||
max-height: 150px;
|
||||
background: var(--background-dim);
|
||||
text-align: center;
|
||||
padding: .5rem;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user