From 36f5d6b39627c105d0d34473df53a956e885fea9 Mon Sep 17 00:00:00 2001
From: iamBadgers <jmosrael@gmail.com>
Date: Mon, 2 Sep 2024 22:17:46 -0700
Subject: [PATCH] build's a bitch

---
 frontend/.prettierrc.json              |  2 +-
 frontend/src/router/index.ts           |  2 +
 frontend/src/vues/CharacterDetails.vue | 29 +++++++++----
 frontend/src/vues/CharacterList.vue    | 59 ++++++++++++++++----------
 frontend/src/vues/GameDetails.vue      | 30 ++++++++++---
 frontend/src/vues/GameList.vue         | 48 ++++++++++++---------
 frontend/src/vues/GameTable.vue        |  7 ++-
 frontend/src/vues/ServerStats.vue      | 21 ++++++---
 8 files changed, 134 insertions(+), 64 deletions(-)

diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json
index 66e2335..dde9147 100644
--- a/frontend/.prettierrc.json
+++ b/frontend/.prettierrc.json
@@ -3,6 +3,6 @@
   "semi": false,
   "tabWidth": 2,
   "singleQuote": true,
-  "printWidth": 100,
+  "printWidth": 80,
   "trailingComma": "none"
 }
\ No newline at end of file
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index a41d190..cd74526 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -18,6 +18,7 @@ const gameListRoute = {
 }
 
 const gameDetailsRoute = {
+  name: 'game',
   path: '/games/:gameId',
   component: GameDetails
 }
@@ -28,6 +29,7 @@ const characterListRoute = {
 }
 
 const characterDetailsRoute = {
+  name: 'character',
   path: '/characters/:characterId',
   component: CharacterDetails
 }
diff --git a/frontend/src/vues/CharacterDetails.vue b/frontend/src/vues/CharacterDetails.vue
index a059f81..bb2adb1 100644
--- a/frontend/src/vues/CharacterDetails.vue
+++ b/frontend/src/vues/CharacterDetails.vue
@@ -5,17 +5,21 @@
     <h2>Player: {{ character.playerName }}</h2>
     <div>Total Game EB: {{ earnedEB }} --- Total Game IP: {{ earnedIP }}</div>
     <div>
-      Games Played: {{ gamesPlayedCount }} --- Games Applied: {{ gamesAppliedCount }} -- Pick Rate:
-      {{ pickRate.toFixed(2) }}%
+      Games Played: {{ gamesPlayedCount }} --- Games Applied:
+      {{ gamesAppliedCount }} -- Pick Rate: {{ pickRate.toFixed(2) }}%
     </div>
     <div>Last Game: {{ lastPlayedPostDate }}</div>
     <div class="d-flex flex-row">
       <div class="flex-column game-list">
-        <h3 class="game-list-title">{{ (games.played || []).length }} 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 || []).length }} Games Applied</h3>
+        <h3 class="game-list-title">
+          {{ (games.applied || []).length }} Games Applied
+        </h3>
         <game-table :gameList="games.applied"></game-table>
       </div>
     </div>
@@ -65,8 +69,12 @@ const pickRate = ref(0)
 const lastPlayedPostDate = ref()
 
 async function loadCharacterDetails() {
-  const characterResponse = await axios.get(`/api/character/${characterId.value}`)
-  const gameDetails = await axios.post(`/api/character/${characterId.value}/gameHistory`)
+  const characterResponse = await axios.get(
+    `/api/character/${characterId.value}`
+  )
+  const gameDetails = await axios.post(
+    `/api/character/${characterId.value}/gameHistory`
+  )
 
   character.value = characterResponse.data
   games.value = {
@@ -86,7 +94,10 @@ function calculateDerivedEarnings(gamesPlayedList: Game[]) {
   earnedIP.value = runningEarnedIp
 }
 
-function calculateDerivedGameStats(gamesPlayedList: Game[], gamesAppliedList: Game[]) {
+function calculateDerivedGameStats(
+  gamesPlayedList: Game[],
+  gamesAppliedList: Game[]
+) {
   gamesPlayedCount.value = gamesPlayedList.length
   gamesAppliedCount.value = gamesAppliedList.length
   pickRate.value = (gamesPlayedList.length / gamesAppliedList.length) * 100
@@ -96,7 +107,9 @@ function calculateDerivedLastPlayedPostDate(gamesPlayedList: Game[]) {
   if (gamesPlayedList.length === 0) {
     lastPlayedPostDate.value = 'N/A'
   } else {
-    lastPlayedPostDate.value = new Date(gamesPlayedList[gamesPlayedList.length - 1].postdate * 1000)
+    lastPlayedPostDate.value = new Date(
+      gamesPlayedList[gamesPlayedList.length - 1].postdate * 1000
+    )
       .toISOString()
       .split('T')[0]
   }
diff --git a/frontend/src/vues/CharacterList.vue b/frontend/src/vues/CharacterList.vue
index 9d7d857..2213413 100644
--- a/frontend/src/vues/CharacterList.vue
+++ b/frontend/src/vues/CharacterList.vue
@@ -16,10 +16,16 @@
     @update:options="loadData"
   >
     <template v-slot:item.id="{ item }">
-      <a v-bind:href="`/#/characters/${item.id}`">{{ item.id }}</a>
+      <router-link
+        :to="{ name: 'character', params: { characterId: item.id } }"
+        >{{ item.id }}</router-link
+      >
     </template>
     <template v-slot:item.characterName="{ item }">
-      <a v-bind:href="`/#/characters/${item.id}`">{{ item.characterName }}</a>
+      <router-link
+        :to="{ name: 'character', params: { characterId: item.id } }"
+        >{{ item.characterName }}</router-link
+      >
     </template>
     <template v-slot:item.creationDate="{ item }">
       {{ new Date(item.creationDate * 1000).toISOString().split('T')[0] }}
@@ -37,11 +43,12 @@
 <script setup lang="ts">
 import { Character } from '../types'
 import { onBeforeMount, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter, LocationQueryValue } from 'vue-router'
 import { VDataTable } from 'vuetify/components'
 import axios from 'axios'
 
 type ReadonlyHeaders = VDataTable['$props']['headers']
+type SortItems = VDataTable['sortBy']
 
 const headers: ReadonlyHeaders = [
   { title: 'ID', align: 'start', sortable: true, key: 'id' },
@@ -49,7 +56,12 @@ const headers: ReadonlyHeaders = [
   { title: 'Role', align: 'start', sortable: true, key: 'role' },
   { title: 'Player', align: 'start', sortable: true, key: 'playerName' },
   { title: 'Status', align: 'start', sortable: true, key: 'status' },
-  { title: 'Creation Date', align: 'start', sortable: true, key: 'creationDate' }
+  {
+    title: 'Creation Date',
+    align: 'start',
+    sortable: true,
+    key: 'creationDate'
+  }
 ]
 
 const route = useRoute()
@@ -63,7 +75,7 @@ const count = ref(10)
 
 const pageValue = ref(1)
 const filterValue = ref('')
-const sortValue = ref([])
+const sortValue = ref<SortItems>([])
 
 async function loadData({ page, itemsPerPage, sortBy }: any) {
   let sortString = 'id asc'
@@ -92,25 +104,29 @@ async function loadData({ page, itemsPerPage, sortBy }: any) {
 }
 
 async function reloadData() {
-    loadData({
+  loadData({
     page: pageValue.value,
     itemsPerPage: 10,
     sortBy: sortValue.value
   })
 }
 
+function buildSortFromQuery(query: string | LocationQueryValue[]): SortItems {
+  if (typeof route.query.sort === 'string') {
+    const key = route.query.sort.split(' ')[0]
+    const order = route.query.sort.split(' ')[1] === 'asc' ? 'asc' : 'desc'
+    return [{ key, order }]
+  }
+  return []
+}
+
 watch(route, (newRoute, oldRoute) => {
-    if (newRoute.query.page) {
+  if (newRoute.query.page) {
     pageValue.value = Number(newRoute.query.page)
   }
 
   if (newRoute.query.sort) {
-    sortValue.value = [
-      {
-        key: newRoute.query.sort.split(' ')[0],
-        order: newRoute.query.sort.split(' ')[1]
-      }
-    ]
+    sortValue.value = buildSortFromQuery(newRoute.query.sort)
   }
 
   if (newRoute.query.filter) {
@@ -124,7 +140,11 @@ watch(filterValue, (newFilter: string, oldFilter: string) => {
   debounce = setTimeout(() => {
     router.replace({ query: { page: route.query.page, filter: newFilter } })
   }, 500)
-  loadData({ page: pageValue.value, itemsPerPage: resultePerPage.value, sortBy: [] })
+  loadData({
+    page: pageValue.value,
+    itemsPerPage: resultePerPage.value,
+    sortBy: []
+  })
 })
 
 onBeforeMount(async () => {
@@ -133,19 +153,14 @@ onBeforeMount(async () => {
     pageValue.value = 1
   } else {
     pageValue.value = Number(route.query.page)
-    count.value = route.query.page * 10
+    count.value = Number(route.query.page) * 10
   }
 
   // Initialize Sort
   if (!route.query.sort) {
     sortValue.value = []
-  } else {    
-    sortValue.value = [
-      {
-        key: route.query.sort.split(' ')[0],
-        order: route.query.sort.split(' ')[1]
-      }
-    ]
+  } else {
+    sortValue.value = buildSortFromQuery(route.query.sort)
   }
 
   // Initialize Filter
diff --git a/frontend/src/vues/GameDetails.vue b/frontend/src/vues/GameDetails.vue
index a83c262..80315da 100644
--- a/frontend/src/vues/GameDetails.vue
+++ b/frontend/src/vues/GameDetails.vue
@@ -23,23 +23,41 @@
       <div class="d-flex flex-row">
         <div class="character-list">
           <h3>{{ picks.length }} Character Picks</h3>
-          <v-data-table-virtual :headers="pickHeaders" :items="picks" height="500px" fixed-header>
+          <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>
+              <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>
+              <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>
+          <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>
+              <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>
+              <a v-bind:href="`/#/characters/${item.characterId}`">{{
+                item.characterName
+              }}</a>
             </template>
           </v-data-table-virtual>
         </div>
diff --git a/frontend/src/vues/GameList.vue b/frontend/src/vues/GameList.vue
index d0dcb18..ae30d36 100644
--- a/frontend/src/vues/GameList.vue
+++ b/frontend/src/vues/GameList.vue
@@ -16,10 +16,14 @@
     @update:options="loadData"
   >
     <template v-slot:item.id="{ item }">
-      <a v-bind:href="`/#/games/${item.id}`">{{ item.id }}</a>
+      <router-link :to="{ name: 'game', params: { gameId: item.id } }">{{
+        item.id
+      }}</router-link>
     </template>
     <template v-slot:item.title="{ item }">
-      <a v-bind:href="`/#/games/${item.id}`">{{ item.title }}</a>
+      <router-link :to="{ name: 'game', params: { gameId: item.id } }">{{
+        item.title
+      }}</router-link>
     </template>
     <template v-slot:item.postdate="{ item }">
       {{ new Date(item.postdate * 1000).toISOString().split('T')[0] }}
@@ -27,7 +31,10 @@
 
     <template #bottom></template>
   </v-data-table-server>
-  <v-pagination v-model:model-value="pageValue" :length="pageCount"></v-pagination>
+  <v-pagination
+    v-model:model-value="pageValue"
+    :length="pageCount"
+  ></v-pagination>
 </template>
 
 <style>
@@ -43,11 +50,12 @@
 import { Game } from '../types'
 import GameTable from './GameTable.vue'
 import { onBeforeMount, watch, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter, LocationQueryValue } from 'vue-router'
 import axios from 'axios'
-// import { VDataTable } from 'vuetify/components'
+import { VDataTable } from 'vuetify/components'
 
 type ReadonlyHeaders = VDataTable['$props']['headers']
+type SortItems = VDataTable['sortBy']
 
 const headers: ReadonlyHeaders = [
   { title: 'ID', align: 'start', sortable: true, key: 'id' },
@@ -67,7 +75,7 @@ const count = ref(0)
 
 const pageValue = ref(1)
 const filterValue = ref('')
-const sortValue = ref([])
+const sortValue = ref<SortItems>([])
 
 async function loadData({ page, itemsPerPage, sortBy }: any) {
   let sortString = 'id asc'
@@ -103,19 +111,22 @@ async function reloadData() {
   })
 }
 
+function buildSortFromQuery(query: string | LocationQueryValue[]): SortItems {
+  if (typeof route.query.sort === 'string') {
+    const key = route.query.sort.split(' ')[0]
+    const order = route.query.sort.split(' ')[1] === 'asc' ? 'asc' : 'desc'
+    return [{ key, order }]
+  }
+  return []
+}
+
 watch(route, (newRoute, oldRoute) => {
-  console.log('route')
   if (newRoute.query.page) {
     pageValue.value = Number(newRoute.query.page)
   }
 
   if (newRoute.query.sort) {
-    sortValue.value = [
-      {
-        key: newRoute.query.sort.split(' ')[0],
-        order: newRoute.query.sort.split(' ')[1]
-      }
-    ]
+    sortValue.value = buildSortFromQuery(newRoute.query.sort)
   }
 
   if (newRoute.query.filter) {
@@ -137,19 +148,14 @@ onBeforeMount(async () => {
     pageValue.value = 1
   } else {
     pageValue.value = Number(route.query.page)
-    count.value = route.query.page * 10
+    count.value = Number(route.query.page) * 10
   }
 
   // Initialize Sort
   if (!route.query.sort) {
     sortValue.value = []
-  } else {    
-    sortValue.value = [
-      {
-        key: route.query.sort.split(' ')[0],
-        order: route.query.sort.split(' ')[1]
-      }
-    ]
+  } else {
+    sortValue.value = buildSortFromQuery(route.query.sort)
   }
 
   // Initialize Filter
diff --git a/frontend/src/vues/GameTable.vue b/frontend/src/vues/GameTable.vue
index 5b86cfe..ad756ec 100644
--- a/frontend/src/vues/GameTable.vue
+++ b/frontend/src/vues/GameTable.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-data-table-virtual :headers="headers" :items="gameList" height="500px" fixed-header>
+  <v-data-table-virtual
+    :headers="headers"
+    :items="gameList"
+    height="500px"
+    fixed-header
+  >
     <template v-slot:item.id="{ item }">
       <a v-bind:href="`/#/games/${item.id}`">{{ item.id }}</a>
     </template>
diff --git a/frontend/src/vues/ServerStats.vue b/frontend/src/vues/ServerStats.vue
index cc4d007..7041b4b 100644
--- a/frontend/src/vues/ServerStats.vue
+++ b/frontend/src/vues/ServerStats.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="d-flex flex-column">
-    <v-select class="date-selector" v-model="dateSelect" variant="underlined" :items="dateItems">
+    <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">
@@ -18,13 +23,15 @@
       <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
+          >{{ 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
+          >{{ Math.floor(gameStats.TotalIP) }} /
+          {{ Math.floor(gameStats.AverageIP) }}</v-label
         >
       </div>
     </div>
@@ -49,7 +56,9 @@
             </td>
             <td class="text-left">{{ roleStat.apps }}</td>
             <td class="text-left">{{ roleStat.picks }}</td>
-            <td class="text-left">{{ Math.floor((roleStat.picks / roleStat.apps) * 100) }}%</td>
+            <td class="text-left">
+              {{ Math.floor((roleStat.picks / roleStat.apps) * 100) }}%
+            </td>
             <td class="text-left">
               {{ Math.floor((roleStat.picks / gameStats.Complete) * 100) }}%
             </td>
@@ -229,7 +238,9 @@ function updateChart(stats: RoleStats, tag: ChartType) {
         {
           label: 'Game Type',
           data: [
-            gameStats.value.Complete - gameStats.value.Events - gameStats.value.Fixes,
+            gameStats.value.Complete -
+              gameStats.value.Events -
+              gameStats.value.Fixes,
             gameStats.value.Postponed,
             gameStats.value.Pending,
             gameStats.value.Events,