159 lines
4.1 KiB
Vue
159 lines
4.1 KiB
Vue
<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>
|