iamBadgers/RushStatistics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean up the game detail page.

Browse Source
This commit is contained in:
iamBadgers
2024-05-25 12:00:02 -07:00
parent e62825a114
commit 04a6e47a0a
7 changed files with 125 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/src/vues/GameDetails.vue
View File

@@ -6,7 +6,13 @@
<h2>GameMaster: {{ game.gamemaster }}</h2>
</div>
<div class="container">
<div class="d-flex flex-row justify-space-evenly">
<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>
@@ -14,18 +20,33 @@
<div>{{ game.payoutLoot }}</div>
</div>
<div class="result-box">
<h3>Picks</h3>
<div v-for="pick in picks">
{{ pick.characterName }}
</div>
</div>
</div>
</div>
<div class="result-box">
<h3>Apps</h3>
<div v-for="app in apps">
{{ app.characterName }}
</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>
@@ -43,8 +64,12 @@
}
.result-box {
margin: 10px;
margin-top: 40px;
margin: 20px;
margin-top: 20px;
}
.character-list {
margin: 20px;
}
</style>
@@ -55,10 +80,24 @@ import axios from 'axios'
const route = useRoute()
const pickHeaders = [
{ 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 = [
{ 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({})
const picks = ref({})
const apps = ref({})
const picks = ref([])
const apps = ref([])
loadGameDetails()
@@ -85,5 +124,6 @@ async function loadPicks() {
async function loadApps() {
const response = await axios.post(`/api/game/${gameId.value}/apps`)
apps.value = response.data
console.log(apps.value)
}
</script>