traxxx/assets/components/stats/stats.vue

100 lines
1.8 KiB
Vue
Raw Normal View History

2020-08-15 17:04:33 +00:00
<template>
<div class="stats">
<div class="content-inner">
<h1 class="heading">Stats</h1>
2020-10-07 01:40:19 +00:00
<span class="version">traxxx {{ version }}</span>
2020-09-25 19:21:26 +00:00
2020-08-15 17:04:33 +00:00
<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;
2020-09-25 19:21:26 +00:00
this.version = VERSION; // eslint-disable-line no-undef
2020-08-15 17:04:33 +00:00
}
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>