Refactored stats page.

assets/components/campaigns/campaign.vue

@@ -165,6 +165,7 @@ export default {
 
 .campaign-banner {
 	height: auto;
+	width: auto;
 	max-height: 100%;
 	max-width: 100%;
 }

assets/components/entities/entity.vue

@@ -288,6 +288,7 @@ export default {
 }
 
 .campaign-container {
+	max-height: 150px;
 	background: var(--background-dim);
 	text-align: center;
 	padding: .5rem;

assets/components/stats/stats.vue

@@ -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>

assets/js/ui/actions.js

@@ -280,23 +280,15 @@ function initUiActions(store, _router) {
 			actors,
 			networks,
 			channels,
+			batches: [batch],
 		} = await graphql(`
             query Stats {
-				scenes: releasesConnection(
-					last: 1,
-					orderBy: BATCH_BY_CREATED_BATCH_ID__CREATED_AT_ASC
-				) {
-					totalCount
-					scenes: nodes {
-						batch: createdBatch {
-							createdAt
-						}
-					}
-				}
+				scenes: releasesConnection { totalCount }
 				movies: moviesConnection { totalCount }
 				actors: actorsConnection { totalCount }
 				networks: entitiesConnection(filter: { type: { equalTo: "network" } }) { totalCount }
 				channels: entitiesConnection(filter: { type: { equalTo: "channel" } }) { totalCount }
+				batches(orderBy: CREATED_AT_DESC, first: 1) { createdAt }
 			}
 		`);
 
@@ -306,7 +298,7 @@ function initUiActions(store, _router) {
 			totalActors: actors.totalCount,
 			totalNetworks: networks.totalCount,
 			totalChannels: channels.totalCount,
-			lastScrape: new Date(scenes.scenes[0]?.batch.createdAt),
+			lastScrape: new Date(batch.createdAt),
 		};
 	}