clean up the game detail page.

backend/src/app.ts

@@ -91,9 +91,7 @@ app.post('/api/serverstats/rolestats', jsonParser, async (req, res) => {
     picks.forEach((character, characterNum) => {
       const role = character.dataValues.role
       // Count role application
-      pickedCharacterCount.set(
+      pickedCharacterCount.set(role, (pickedCharacterCount.get(role) || 0) + 1)
-        role, (pickedCharacterCount.get(role) || 0) + 1
-      )
     })
 
     appls.forEach((character, characterNum) => {
@@ -105,9 +103,7 @@ app.post('/api/serverstats/rolestats', jsonParser, async (req, res) => {
       }
       activeCharacters.get(role).add(charId)
       // Count role application
-      appedCharacterCount.set(
+      appedCharacterCount.set(role, (appedCharacterCount.get(role) || 0) + 1)
-        role, (appedCharacterCount.get(role) || 0) + 1
-      )
     })
   })
 
@@ -130,7 +126,7 @@ app.post('/api/serverstats/rolestats', jsonParser, async (req, res) => {
     result[roleName] = {
       apps: appedCharacterCount.get(roleName) || 0,
       picks: pickedCharacterCount.get(roleName) || 0,
-      active: activeCharacters.has(roleName) ?activeCharacters.get(roleName).size : 0
+      active: activeCharacters.has(roleName) ? activeCharacters.get(roleName).size : 0
     }
   })
 
@@ -195,7 +191,10 @@ app.get('/api/game/:gameId', async (req, res) => {
 })
 
 app.post('/api/game/:gameId/apps', async (req, res) => {
-  const apps = await App.findAll({ where: { gameId: req.params['gameId'] } })
+  const apps = await App.findAll({
+    include: [{ model: Character, as: 'appliedCharacter' }],
+    where: { gameId: req.params['gameId'] }
+  })
   res.send(apps)
 })
 
@@ -205,7 +204,10 @@ app.post('/api/character/:characterId/apps', async (req, res) => {
 })
 
 app.post('/api/game/:gameId/picks', async (req, res) => {
-  const picks = await Pick.findAll({ where: { gameId: req.params['gameId'] } })
+  const picks = await Pick.findAll({
+    include: [{ model: Character, as: 'pickedCharacter' }],
+    where: { gameId: req.params['gameId'] }
+  })
   res.send(picks)
 })
 

frontend/src/vues/CharacterDetails.vue

@@ -11,11 +11,11 @@
     <div>Last Game: {{ lastPlayedPostDate }}</div>
     <div class="d-flex flex-row">
       <div class="flex-column game-list">
-        <h3 class="game-list-title">Games Played</h3>
+        <h3 class="game-list-title">{{ games.played.length }} Games Played</h3>
         <GameTable :gameList="games.played"></GameTable>
       </div>
       <div class="flex-column game-list">
-        <h3 class="game-list-title">Games Applied</h3>
+        <h3 class="game-list-title">{{ games.applied.length }} Games Applied</h3>
         <game-table :gameList="games.applied"></game-table>
       </div>
     </div>

frontend/src/vues/CharacterList.vue

@@ -88,7 +88,7 @@ let debounce = null
 watch(filtervalue, (newFilter, oldFilter) => {
   debounce = clearTimeout(debounce)
   debounce = setTimeout(() => {
-    router.replace({query: {page: route.query.page, filter: newFilter}})
+    router.replace({ query: { page: route.query.page, filter: newFilter } })
   }, 500)
 })
 

frontend/src/vues/GameDetails.vue

@@ -6,7 +6,13 @@
     <h2>GameMaster: {{ game.gamemaster }}</h2>
   </div>
   <div class="container">
-    <div class="d-flex flex-row justify-space-evenly">
+    <div class="d-flex flex-row">
+      <div class="result-box">
+        <h3>Picks</h3>
+        <div v-for="pick in picks">
+          {{ pick.pickedCharacter.playerName }} as {{ pick.characterName }}
+        </div>
+      </div>
       <div class="result-box">
         <h3>Payout</h3>
         <div>{{ game.payoutEB }} eb</div>
@@ -14,18 +20,33 @@
         <div>{{ game.payoutLoot }}</div>
       </div>
 
-      <div class="result-box">
+      
-        <h3>Picks</h3>
-        <div v-for="pick in picks">
-          {{ pick.characterName }}
     </div>
   </div>
 
-      <div class="result-box">
+  <div class="container">
-        <h3>Apps</h3>
+    <div class="d-flex flex-row">
-        <div v-for="app in apps">
+      <div class="character-list">
-          {{ app.characterName }}
+        <h3>{{ picks.length }} Character Picks</h3>
+        <v-data-table-virtual :headers="pickHeaders" :items="picks" height="500px" fixed-header>
+          <template v-slot:item.characterId="{ item }">
+            <a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterId }}</a>
+          </template>
+          <template v-slot:item.characterName="{ item }">
+            <a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterName }}</a>
+          </template>
+        </v-data-table-virtual>
       </div>
+      <div class="character-list">
+        <h3>{{ apps.length }} Character Apps</h3>
+        <v-data-table-virtual :headers="appHeaders" :items="apps" height="500px" fixed-header>
+          <template v-slot:item.characterId="{ item }">
+            <a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterId }}</a>
+          </template>
+          <template v-slot:item.characterName="{ item }">
+            <a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterName }}</a>
+          </template>
+        </v-data-table-virtual>
       </div>
     </div>
   </div>
@@ -43,8 +64,12 @@
 }
 
 .result-box {
-  margin: 10px;
+  margin: 20px;
-  margin-top: 40px;
+  margin-top: 20px;
+}
+
+.character-list {
+  margin: 20px;
 }
 </style>
 
@@ -55,10 +80,24 @@ import axios from 'axios'
 
 const route = useRoute()
 
+const pickHeaders = [
+  { title: 'ID', align: 'start', key: 'characterId' },
+  { title: 'Character', align: 'start', key: 'characterName' },
+  { title: 'Status', align: 'start', key: 'pickedCharacter.status' },
+  { title: 'Player', align: 'start', key: 'pickedCharacter.playerName' }
+]
+
+const appHeaders = [
+  { title: 'ID', align: 'start', key: 'characterId' },
+  { title: 'Character', align: 'start', key: 'characterName' },
+  { title: 'Status', align: 'start', key: 'appliedCharacter.status' },
+  { title: 'Player', align: 'start', key: 'appliedCharacter.playerName' }
+]
+
 const gameId = ref(route.params.gameId)
 const game = ref({})
-const picks = ref({})
+const picks = ref([])
-const apps = ref({})
+const apps = ref([])
 
 loadGameDetails()
 
@@ -85,5 +124,6 @@ async function loadPicks() {
 async function loadApps() {
   const response = await axios.post(`/api/game/${gameId.value}/apps`)
   apps.value = response.data
+  console.log(apps.value)
 }
 </script>

frontend/src/vues/GameList.vue

@@ -6,7 +6,30 @@
       v-model="filtervalue"
     ></v-text-field>
   </div>
-  <game-table :gameList="games"></game-table>
+  <v-table>
+    <thead>
+      <tr>
+        <th class="text-left">ID</th>
+        <th class="text-left">Title</th>
+        <th class="text-left">Staus</th>
+        <th class="text-left">Post Date</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="game in games">
+        <td>
+          <a v-bind:href="`/#/games/${game.id}`">{{ game.id }}</a>
+        </td>
+        <td>
+          <a v-bind:href="`/#/games/${game.id}`">{{ game.title }}</a>
+        </td>
+        <td>{{ game.status }}</td>
+        <td>
+          {{ new Date(game.postdate * 1000).toISOString().split('T')[0] }}
+        </td>
+      </tr>
+    </tbody></v-table
+  >
   <v-pagination
     :model-value="page"
     :length="pageCount"
@@ -52,7 +75,7 @@ async function loadData() {
 }
 
 function setPage(targetPage: number) {
-  router.replace({ query: { page: targetPage, filter: route.query.filter} })
+  router.replace({ query: { page: targetPage, filter: route.query.filter } })
 }
 
 watch(route, (newValue, oldValue) => {
@@ -73,7 +96,7 @@ let debounce = null
 watch(filtervalue, (newFilter, oldFilter) => {
   debounce = clearTimeout(debounce)
   debounce = setTimeout(() => {
-    router.replace({query: {page: route.query.page, filter: newFilter}})
+    router.replace({ query: { page: route.query.page, filter: newFilter } })
   }, 500)
 })
 

frontend/src/vues/GameTable.vue

@@ -1,33 +1,26 @@
 <template>
-  <h3>{{ title }}</h3>
+  <v-data-table-virtual :headers="headers" :items="gameList" height="500px" fixed-header>
-  <v-table>
+    <template v-slot:item.id="{ item }">
-    <thead>
+      <a v-bind:href="`/#/games/${item.id}`">{{ item.id }}</a>
-      <tr>
+    </template>
-        <th class="text-left">ID</th>
+    <template v-slot:item.title="{ item }">
-        <th class="text-left">Title</th>
+      <a v-bind:href="`/#/games/${item.id}`">{{ item.title }}</a>
-        <th class="text-left">Staus</th>
+    </template>
-        <th class="text-left">Post Date</th>
+    <template v-slot:item.postdate="{ item }">
-      </tr>
+      {{ new Date(item.postdate * 1000).toISOString().split('T')[0] }}
-    </thead>
+    </template>
-    <tbody>
+  </v-data-table-virtual>
-      <tr v-for="game in gameList">
-        <td>
-          <a v-bind:href="`/#/games/${game.id}`">{{ game.id }}</a>
-        </td>
-        <td>
-          <a v-bind:href="`/#/games/${game.id}`">{{ game.title }}</a>
-        </td>
-        <td>{{ game.status }}</td>
-        <td>
-          {{ new Date(game.postdate * 1000).toISOString().split('T')[0] }}
-        </td>
-      </tr>
-    </tbody>
-  </v-table>
 </template>
 
 <style></style>
 
 <script setup lang="ts">
-defineProps(['title', 'gameList'])
+const props = defineProps(['gameList'])
+
+const headers = [
+  { title: 'ID', align: 'start', key: 'id' },
+  { title: 'Title', align: 'start', key: 'title' },
+  { title: 'Status', aligasdfn: 'start', key: 'status' },
+  { title: 'Post Date', align: 'start', key: 'postdate' }
+]
 </script>

frontend/src/vues/ServerStats.vue

@@ -96,6 +96,9 @@ import { onMounted, watch, ref } from 'vue'
 import Chart from 'chart.js/auto'
 import axios from 'axios'
 
+const route = useRoute()
+const router = useRouter()
+
 const dateSelect = ref(-1)
 
 const dateItems = buildDateItems()
@@ -184,6 +187,7 @@ function updateChart(stats, tag) {
 }
 
 watch(dateSelect, async (newValue, oldValue) => {
+  router.replace({ query: { monthId: dateSelect.value } })
   loadData()
 })
 
@@ -196,6 +200,12 @@ watch(chartSelect, async (newValue, oldValue) => {
 })
 
 onMounted(async () => {
+  console.log(dateItems)
+  if (!route.query.monthId) {
+    router.replace({ query: { monthId: -1 } })
+  } else {
+    dateSelect.value = Number(route.query.monthId)
+  }
   loadData()
   chart = new Chart(document.getElementById('piechart'), {
     type: 'pie',