Chron script for loading database

frontend/src/App.vue

@@ -5,6 +5,7 @@
         <v-btn to="/serverstats">Server Stats</v-btn>
         <v-btn to="/games">Games</v-btn>
         <v-btn to="/characters">Characters</v-btn>
+        <!-- <v-btn to="/gamemasters">Gamemasters</v-btn> -->
       </v-app-bar>
       <router-view />
     </v-main>

frontend/src/router/index.ts

@@ -5,6 +5,7 @@ import GameDetails from '../vues/GameDetails.vue'
 import CharacterList from '../vues/CharacterList.vue'
 import CharacterDetails from '../vues/CharacterDetails.vue'
 import ServerStats from '../vues/ServerStats.vue'
+import DmList from '../vues/DmList.vue'
 
 const root = {
   path: '/',
@@ -36,13 +37,19 @@ const serverStatsRoute = {
   component: ServerStats
 }
 
+const gameMasterListRoute = {
+  path: '/gamemasters',
+  component: DmList
+}
+
 const routes = [
   root,
   gameListRoute,
   gameDetailsRoute,
   characterListRoute,
   characterDetailsRoute,
-  serverStatsRoute
+  serverStatsRoute,
+  gameMasterListRoute
 ]
 
 export default createRouter({

frontend/src/types.ts

@@ -21,6 +21,13 @@ export interface Character {
   creationDate: number
 }
 
+export interface DmStats {
+  name: string
+  gameCount: string
+  lastGame: number
+  games: Game
+}
+
 export interface GameStats {
   Complete: number
   Postponed: number

frontend/src/vues/DmList.vue

@@ -1,10 +1,17 @@
-<template>
-	
-</template>
+<template>Hello World</template>
 
-<style>
-</style>
+<style></style>
 
 <script setup lang="ts">
+import { DmStats } from '../types'
+import { onMounted, ref, watch } from 'vue'
+import { VDataTable } from 'vuetify/components'
 
-</script>
+type ReadonlyHeaders = VDataTable['$props']['headers']
+
+const headers: ReadonlyHeaders = [
+  { title: 'Game Master', align: 'start', sortable: true, key: 'id' },
+  { title: 'Game Count', align: 'start', sortable: true, key: 'characterName' },
+  { title: 'Last Game', align: 'start', sortable: true, key: 'role' }
+]
+</script>

frontend/src/vues/ServerStats.vue

@@ -33,9 +33,7 @@
         <thead>
           <tr>
             <th class="text-left">Role</th>
-            <th class="text-left">
-              Characters
-            </th>
+            <th class="text-left">Characters</th>
             <th class="text-left">App Count</th>
             <th class="text-left">Games Played</th>
             <th class="text-left">Pick Rate %</th>