Added footer and basic stats page.

assets/components/stats/stats.vue

@@ -0,0 +1,95 @@
+<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">Networks</dt>
+					<dd class="stat-value">{{ totalNetworks }}</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">Scenes</dt>
+					<dd class="stat-value">{{ totalScenes }}</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">Actors</dt>
+					<dd class="stat-value">{{ totalActors }}</dd>
+				</div>
+			</dl>
+		</div>
+
+		<Footer />
+	</div>
+</template>
+
+<script>
+async function mounted() {
+	const stats = await this.$store.dispatch('fetchStats');
+
+	this.totalScenes = stats.totalScenes;
+	this.totalMovies = stats.totalMovies;
+	this.totalActors = stats.totalActors;
+	this.totalNetworks = stats.totalNetworks;
+	this.totalChannels = stats.totalChannels;
+}
+
+export default {
+	data() {
+		return {
+			totalScenes: 0,
+			totalMovies: 0,
+			totalActors: 0,
+			totalNetworks: 0,
+			totalChannels: 0,
+		};
+	},
+	mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+.stats {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.content-inner {
+	padding: 1rem;
+}
+
+.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>