135 lines
3.5 KiB
Vue
135 lines
3.5 KiB
Vue
<template>
|
|
<div class="d-flex flex-column">
|
|
<v-select class="date-selector" v-model="dateSelect" variant="underlined" :items="dateItems">
|
|
</v-select>
|
|
<div class="stat-bar d-flex flex-row justify-space-around">
|
|
<div class="d-flex flex-column">
|
|
<v-label class="title">Completed Games</v-label>
|
|
<v-label>{{ gameStats.Complete }}</v-label>
|
|
</div>
|
|
<div class="d-flex flex-column">
|
|
<v-label class="title">Postponed Games</v-label>
|
|
<v-label>{{ gameStats.Postponed }}</v-label>
|
|
</div>
|
|
<div class="d-flex flex-column">
|
|
<v-label class="title">Total / Average EB</v-label>
|
|
<v-label
|
|
>{{ Math.floor(gameStats.TotalEB) }} / {{ Math.floor(gameStats.AverageEB) }}</v-label
|
|
>
|
|
</div>
|
|
<div class="d-flex flex-column">
|
|
<v-label class="title">Total / Average IP</v-label>
|
|
<v-label
|
|
>{{ Math.floor(gameStats.TotalIP) }} / {{ Math.floor(gameStats.AverageIP) }}</v-label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="role-table d-flex flex-column">
|
|
<v-table>
|
|
<thead>
|
|
<tr>
|
|
<th class="text-left">Role</th>
|
|
<th class="text-center">Characters</th>
|
|
<th class="text-center">App Count</th>
|
|
<th class="text-center">Games Played</th>
|
|
<th class="text-center">% Games With Role</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="roleStat, roleName in roleStats">
|
|
<td>{{ roleName }}</td>
|
|
<td class="text-center">{{ roleStat.active }}</td>
|
|
<td class="text-center">{{ roleStat.apps }}</td>
|
|
<td class="text-center">{{ roleStat.picks }}</td>
|
|
<td class="text-center">{{ Math.floor((roleStat.picks / gameStats.Complete) * 100)}}%</td>
|
|
</tr>
|
|
</tbody>
|
|
</v-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.date-selector {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
.graph-selector {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
.stat-bar {
|
|
padding: 10px;
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
margin-bottom: 20px;
|
|
.title {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.role-table {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, watch, ref } from 'vue'
|
|
import axios from 'axios'
|
|
|
|
const dateSelect = ref(-1)
|
|
|
|
const dateItems = buildDateItems()
|
|
|
|
const gameStats = ref({})
|
|
|
|
const roleStats = ref({})
|
|
|
|
async function loadData() {
|
|
const gameStatsResponse = await axios.post('/api/serverstats/gamestats', {
|
|
monthId: dateSelect.value
|
|
})
|
|
gameStats.value = gameStatsResponse.data
|
|
|
|
const roleStatsResponse = await axios.post('/api/serverstats/rolestats', {
|
|
monthId: dateSelect.value
|
|
})
|
|
roleStats.value = roleStatsResponse.data
|
|
}
|
|
|
|
function buildDateItems() {
|
|
const items = [{title: "All Time", value: -1}]
|
|
|
|
const date = new Date()
|
|
while (date.getUTCFullYear() != 2023 || date.getUTCMonth() != 0) {
|
|
console.log(buildDateEntry(date))
|
|
items.push(buildDateEntry(date))
|
|
date.setUTCMonth(date.getUTCMonth() - 1)
|
|
}
|
|
items.push(buildDateEntry(date))
|
|
|
|
return items
|
|
}
|
|
|
|
function buildDateEntry(date: Date) {
|
|
const monthId = dateToMonthId(date)
|
|
return {
|
|
title: date.toLocaleString('en-us',{month:'short', year:'numeric'}),
|
|
value: monthId
|
|
}
|
|
}
|
|
|
|
function dateToMonthId(date: Date) {
|
|
return (((date.getUTCFullYear() - 2023) * 12) + (date.getUTCMonth()))
|
|
}
|
|
|
|
watch(dateSelect, async (newValue, oldValue) => {
|
|
loadData()
|
|
})
|
|
|
|
onMounted(async () => {
|
|
loadData()
|
|
console.log(buildDateItems())
|
|
})
|
|
</script>
|