Add server stats to fe

backend/src/app.ts

@@ -15,13 +15,20 @@ app.get('/', (req, res) => {
 })
 
 app.post('/api/serverstats/gamestats', jsonParser, async (req, res) => {
+  let startSeconds = 0
+  let endSeconds = Number.MAX_SAFE_INTEGER
 
+  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)
 
+    startSeconds = startDate.getTime() / 1000
+    endSeconds = endDate.getTime() / 1000
+  }
+
   const serverGameStats = await database.query(
     'SELECT ' +
       'COUNT(*) as TotalGames, ' +
@@ -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
       }
     }
   )

frontend/src/vues/ServerStats.vue

@@ -1,26 +1,25 @@
 <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>
+    <!--     <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>0</v-label>
+        <v-label>{{ gameStats.Complete }}</v-label>
       </div>
       <div class="d-flex flex-column">
         <v-label>Postponed Games</v-label>
-      <v-label>0</v-label>
+        <v-label>{{ gameStats.Postponed }}</v-label>
       </div>
       <div class="d-flex flex-column">
         <v-label>Average EB</v-label>
-      <v-label>0</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>0</v-label>
+        <v-label>{{ Math.floor(gameStats.AverageIP) }}</v-label>
       </div>
     </div>
     <div class="d-flex flex-column">
@@ -37,6 +36,7 @@
         </tbody>
       </v-table>
     </div>
+  </div>
 </template>
 
 <style>
@@ -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>