Move the webapp into its own folder

app/frontend/src/vues/GameDetails.vue

@@ -0,0 +1,158 @@
+<template>
+  <v-container>
+    <h1>#{{ game.id }} - {{ game.title }}</h1>
+    <h2>GameMaster: {{ game.gamemaster }}</h2>
+    <div class="container">
+      <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>
+          <div>{{ game.payoutIP }} IP</div>
+          <div>{{ game.payoutLoot }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+      <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
+          >
+            <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></v-container
+  >
+</template>
+
+<style>
+.game-title-box {
+  margin-top: 25px;
+  margin-left: 20px;
+}
+
+.gm-title-box {
+  margin-top: 5px;
+  margin-left: 20px;
+}
+
+.result-box {
+  margin: 20px;
+  margin-top: 20px;
+}
+
+.character-list {
+  margin: 20px;
+  h3 {
+    margin-bottom: 10px;
+  }
+}
+</style>
+
+<script setup lang="ts">
+import { Game, Character, GameCharacter } from '../types'
+import { watch, ref } from 'vue'
+import { VDataTable } from 'vuetify/components'
+import { useRoute } from 'vue-router'
+import axios from 'axios'
+
+type ReadonlyHeaders = VDataTable['$props']['headers']
+
+const route = useRoute()
+
+const pickHeaders: ReadonlyHeaders = [
+  { 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: ReadonlyHeaders = [
+  { 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<Game>({
+  id: 0,
+  title: '',
+  gamemaster: '',
+  payoutEB: 0,
+  payoutIP: 0,
+  payoutLoot: '',
+  status: '',
+  postdate: 0
+})
+const picks = ref<GameCharacter[]>([])
+const apps = ref<GameCharacter[]>([])
+
+loadGameDetails()
+
+watch(
+  () => route.params.gameId,
+  (newId, oldId) => {
+    gameId.value = newId
+    loadGameDetails()
+  }
+)
+
+async function loadGameDetails() {
+  const response = await axios.get(`/api/game/${gameId.value}`)
+  game.value = response.data
+  loadPicks()
+  loadApps()
+}
+
+async function loadPicks() {
+  const response = await axios.post(`/api/game/${gameId.value}/picks`)
+  picks.value = response.data
+}
+
+async function loadApps() {
+  const response = await axios.post(`/api/game/${gameId.value}/apps`)
+  apps.value = response.data
+}
+</script>