Uppdating typescript tuff to allow it t build

This commit is contained in:
jmosrael@gmail.com
2024-05-29 15:47:45 -07:00
parent 65378473e0
commit 4eb5b22dc9
18 changed files with 287 additions and 198 deletions

View File

@@ -1,53 +1,51 @@
<template>
<div class="game-title-box">
<v-container>
<h1>#{{ game.id }} - {{ game.title }}</h1>
</div>
<div class="gm-title-box">
<h2>GameMaster: {{ game.gamemaster }}</h2>
</div>
<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 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 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 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 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>
</div></v-container
>
</template>
<style>
@@ -75,20 +73,24 @@
</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 = [
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 = [
const appHeaders: ReadonlyHeaders = [
{ title: 'ID', align: 'start', key: 'characterId' },
{ title: 'Character', align: 'start', key: 'characterName' },
{ title: 'Status', align: 'start', key: 'appliedCharacter.status' },
@@ -96,9 +98,18 @@ const appHeaders = [
]
const gameId = ref(route.params.gameId)
const game = ref({})
const picks = ref([])
const apps = ref([])
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()