<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">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> <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.lastScrape = stats.lastScrape; 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-table { margin: 0 0 1rem 0; } .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>