Add server stats to fe

This commit is contained in:
iamBadgers
2024-05-19 14:44:53 -07:00
parent 687f6b941a
commit f14fd0d449
2 changed files with 67 additions and 39 deletions

View File

@@ -15,12 +15,19 @@ app.get('/', (req, res) => {
})
app.post('/api/serverstats/gamestats', jsonParser, async (req, res) => {
let startSeconds = 0
let endSeconds = Number.MAX_SAFE_INTEGER
const month = req.body.monthId % 12
const year = Math.floor(req.body.monthId / 12) + 2023
if (req.body.monthId != -1) {
const month = req.body.monthId % 12
const year = Math.floor(req.body.monthId / 12) + 2023
const startDate = new Date(year, month, 1)
const endDate = new Date(year, month + 1, -1)
const startDate = new Date(year, month, 1)
const endDate = new Date(year, month + 1, -1)
startSeconds = startDate.getTime() / 1000
endSeconds = endDate.getTime() / 1000
}
const serverGameStats = await database.query(
'SELECT ' +
@@ -34,8 +41,8 @@ app.post('/api/serverstats/gamestats', jsonParser, async (req, res) => {
{
type: QueryTypes.SELECT,
replacements: {
startSeconds: startDate.getTime() / 1000,
endSeconds: endDate.getTime() / 1000
startSeconds,
endSeconds
}
}
)

View File

@@ -1,41 +1,41 @@
<template>
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<v-select class="date-selector" v-model="dateSelect" variant="underlined" :items="dateItems">
</v-select>
<v-select class="graph-selector" v-model="graphSelect" variant="underlined" :items="graphItems">
</v-select>
</div>
<div class="d-flex flex-row justify-space-around">
<div class="d-flex flex-column">
<v-label>Completed Games</v-label>
<v-label>0</v-label>
<!-- <v-select class="graph-selector" v-model="graphSelect" variant="underlined" :items="graphItems">
</v-select> -->
<div class="d-flex flex-row justify-space-around">
<div class="d-flex flex-column">
<v-label>Completed Games</v-label>
<v-label>{{ gameStats.Complete }}</v-label>
</div>
<div class="d-flex flex-column">
<v-label>Postponed Games</v-label>
<v-label>{{ gameStats.Postponed }}</v-label>
</div>
<div class="d-flex flex-column">
<v-label>Average EB</v-label>
<v-label>{{ Math.floor(gameStats.AverageEB) }}</v-label>
</div>
<div class="d-flex flex-column">
<v-label>Average IP</v-label>
<v-label>{{ Math.floor(gameStats.AverageIP) }}</v-label>
</div>
</div>
<div class="d-flex flex-column">
<v-label>Postponed Games</v-label>
<v-label>0</v-label>
<v-table>
<thead>
<tr>
<th class="text-left">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Solo</td>
</tr>
</tbody>
</v-table>
</div>
<div class="d-flex flex-column">
<v-label>Average EB</v-label>
<v-label>0</v-label>
</div>
<div class="d-flex flex-column">
<v-label>Average IP</v-label>
<v-label>0</v-label>
</div>
</div>
<div class="d-flex flex-column">
<v-table>
<thead>
<tr>
<th class="text-left">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Solo</td>
</tr>
</tbody>
</v-table>
</div>
</template>
@@ -51,7 +51,8 @@
</style>
<script setup lang="ts">
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import axios from 'axios'
const dateSelect = ref('All Time')
@@ -60,4 +61,24 @@ const dateItems = ['All Time', 'May 2024']
const graphSelect = ref('All Time')
const graphItems = ['All Time', 'May 2024']
const gameStats = ref({
TotalGames: 0,
Complete: 0,
Postponed: 0,
Pending: 0,
AverageEB: 0,
AverageIP: 0
})
async function loadData() {
const response = await axios.post('/api/serverstats/gamestats', {
monthId: -1
})
gameStats.value = response.data
}
onMounted(async () => {
loadData()
})
</script>