js kinda sucks a lot

frontend/src/types.ts

@@ -18,6 +18,7 @@ export interface Character {
   role: string
   status: string
   lastGame: number
+  creationDate: number
 }
 
 export interface GameStats {

frontend/src/vues/CharacterDetails.vue

@@ -53,7 +53,8 @@ const character = ref<Character>({
   playerName: '',
   role: '',
   status: '',
-  lastGame: 0
+  lastGame: 0,
+  creationDate: 0
 })
 const games = ref<GameList>({ played: [], applied: [] })
 const earnedEB = ref(0)

frontend/src/vues/CharacterList.vue

@@ -38,9 +38,12 @@
 import { Character } from '../types'
 import { onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { VDataTable } from 'vuetify/components'
 import axios from 'axios'
 
-const headers = [
+type ReadonlyHeaders = VDataTable['$props']['headers']
+
+const headers: ReadonlyHeaders = [
   { title: 'ID', align: 'start', sortable: true, key: 'id' },
   { title: 'Character', align: 'start', sortable: true, key: 'characterName' },
   { title: 'Role', align: 'start', sortable: true, key: 'role' },
@@ -61,7 +64,7 @@ const count = ref(10)
 
 const filtervalue = ref('')
 
-async function loadData({ page, itemsPerPage, sortBy }) {
+async function loadData({ page, itemsPerPage, sortBy }: any) {
   let sortString = 'id'
   if (sortBy[0]) {
     console.log(sortBy[0].key)

frontend/src/vues/GameList.vue

@@ -8,15 +8,12 @@
   </div>
   <v-data-table-server
     :headers="headers"
-    v-model:items-per-page="resltsPerPage"
+    v-model:items-per-page="resultsPerPage"
     :items="games"
     :items-length="count"
     v-model:page="page"
     @update:options="loadData"
   >
-
-
-
     <template v-slot:item.id="{ item }">
       <a v-bind:href="`/#/games/${item.id}`">{{ item.id }}</a>
     </template>
@@ -27,7 +24,6 @@
       {{ new Date(item.postdate * 1000).toISOString().split('T')[0] }}
     </template>
 
-
     <template #bottom></template>
   </v-data-table-server>
   <v-pagination
@@ -52,8 +48,11 @@ import GameTable from './GameTable.vue'
 import { onMounted, watch, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from 'axios'
+import { VDataTable } from 'vuetify/components'
 
-const headers = [
+type ReadonlyHeaders = VDataTable['$props']['headers']
+
+const headers: ReadonlyHeaders = [
   { title: 'ID', align: 'start', sortable: true, key: 'id' },
   { title: 'Title', align: 'start', sortable: true, key: 'title' },
   { title: 'Status', align: 'start', sortable: true, key: 'status' },
@@ -66,13 +65,13 @@ const router = useRouter()
 const games = ref<Game[]>([])
 const pageCount = ref(1)
 let page = ref(1)
-const resultePerPage = ref(10)
+const resultsPerPage = ref(10)
 
 let count = ref(10)
 
 const filtervalue = ref<string>('')
 
-async function loadData({ page, itemsPerPage, sortBy }) {
+async function loadData({ page, itemsPerPage, sortBy }: any) {
   let sortString = 'id'
   if (sortBy[0]) {
     console.log(sortBy[0].key)
@@ -88,7 +87,7 @@ async function loadData({ page, itemsPerPage, sortBy }) {
     page: `${page - 1}`,
     count: `${itemsPerPage}`,
     orderBy: sortString,
-    filter: filtervalue.value ? `title:"${filtervalue.value}"` : '',
+    filter: filtervalue.value ? `title:"${filtervalue.value}"` : ''
   })
 
   games.value = response.data.gameData
@@ -111,7 +110,7 @@ watch(route, (newValue, oldValue) => {
   if (route.query.filter) {
     filtervalue.value = route.query.filter.toString()
   }
-  loadData({page: page.value, itemsPerPage: resultePerPage.value, sortBy:[]})
+  loadData({ page: page.value, itemsPerPage: resultsPerPage.value, sortBy: [] })
 })
 
 let debounce: ReturnType<typeof setTimeout>
@@ -120,7 +119,7 @@ watch(filtervalue, (newFilter: string, oldFilter: string) => {
   debounce = setTimeout(() => {
     router.replace({ query: { page: route.query.page, filter: newFilter } })
   }, 500)
-  loadData({page: page.value, itemsPerPage: resultePerPage.value, sortBy:[]})
+  loadData({ page: page.value, itemsPerPage: resultsPerPage.value, sortBy: [] })
 })
 
 onMounted(async () => {