traxxx/assets/components/stats/stats.vue

<template>
	<div class="stats">
		<div class="content-inner">
			<h1 class="heading">Stats</h1>

			<span class="version">traxxx {{ version }}</span>

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

	this.version = VERSION; // eslint-disable-line no-undef
}

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>