115 lines
2.2 KiB
Vue
115 lines
2.2 KiB
Vue
<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>
|