settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: issue a warning on admin page when there're no teams yet

Browse Source
This commit is contained in:
Settel 2024-02-18 13:42:59 +01:00
parent 2bcb322488
commit 512edbc62b
1 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
client/src/components/admin/GameInfosTile.vue
View File

@ -1,32 +1,37 @@
<template> <template>
<AdminInfoTile title="Games"> <div>
<table class="gameinfos-tile__table"> <AdminInfoTile v-if="gamesCount > 0" title="Games">
<tr class="gameinfos-tile__row"> <table class="gameinfos-tile__table">
<th class="gameinfos-tile__table-head">{{ $t('team-name')}}</th> <tr class="gameinfos-tile__row">
<th class="gameinfos-tile__table-head">{{ $t('lang')}}</th> <th class="gameinfos-tile__table-head">{{ $t('team-name')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('state')}}</th> <th class="gameinfos-tile__table-head">{{ $t('lang')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('num-players')}}</th> <th class="gameinfos-tile__table-head">{{ $t('state')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('gamemasters')}}</th> <th class="gameinfos-tile__table-head">{{ $t('num-players')}}</th>
</tr> <th class="gameinfos-tile__table-head">{{ $t('gamemasters')}}</th>
<tr </tr>
:class="{ 'gameinfos-tile__row': true, 'gameinfos-tile__row__disabled': game.state == 'disabled' }" <tr
v-for="game in games" :class="{ 'gameinfos-tile__row': true, 'gameinfos-tile__row__disabled': game.state == 'disabled' }"
:key="game.id" v-for="game in games"
@click="selectGame(game)" :key="game.id"
> @click="selectGame(game)"
>
<td class="gameinfos-tile__cell">{{ game.name }}</td> <td class="gameinfos-tile__cell">{{ game.name }}</td>
<td class="gameinfos-tile__cell">{{ game.lang }}</td> <td class="gameinfos-tile__cell">{{ game.lang }}</td>
<td class="gameinfos-tile__cell">{{ game.state }}</td> <td class="gameinfos-tile__cell">{{ game.state }}</td>
<td class="gameinfos-tile__cell">{{ game.players.length }}</td> <td class="gameinfos-tile__cell">{{ game.players.length }}</td>
<td class="gameinfos-tile__cell">{{ getGamemastersFromGame(game).join(', ') }}</td> <td class="gameinfos-tile__cell">{{ getGamemastersFromGame(game).join(', ') }}</td>
</tr> </tr>
</table> </table>
</AdminInfoTile> </AdminInfoTile>
<AdminInfoTile v-if="gamesCount == 0" :title="$t('no-games-1')">
<p>{{ $t('no-games-2') }}</p>
</AdminInfoTile>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { navigateTo } from "#app" import { navigateTo } from "#app"
import { ref } from 'vue' import { ref, computed } from 'vue'
import useI18n from '@/composables/useI18n' import useI18n from '@/composables/useI18n'
import useEngine from '@/composables/useEngine' import useEngine from '@/composables/useEngine'
import type { GameInfo } from '@/composables/engine.d' import type { GameInfo } from '@/composables/engine.d'
@ -37,11 +42,16 @@ const { $t } = useI18n({
state: { en: 'State', de: 'Status' }, state: { en: 'State', de: 'Status' },
'num-players': { en: '# Players', de: '# Spieler' }, 'num-players': { en: '# Players', de: '# Spieler' },
gamemasters: { en: 'Gamemaster(s)', de: 'Gamemaster(s)' }, gamemasters: { en: 'Gamemaster(s)', de: 'Gamemaster(s)' },
'no-games-1': { en: 'The list of teams is empty', de: 'Die Liste der Teams ist noch leer'},
'no-games-2': { en: 'Log out and click the "create team" button on the start page.', de: 'Logge dich aus und klicke auf der Startseite auf "Team erstellen".'},
}) })
const { fetchGameInfos, cameo } = useEngine() const { fetchGameInfos, cameo } = useEngine()
const games = ref(await fetchGameInfos()) const games = ref(await fetchGameInfos())
const gamesCount = computed(() => {
return Object.keys(games.value).length
})
const getGamemastersFromGame = (game: GameInfo) => game.players.filter((player) => player.role === 'gamemaster').map((player) => player.name) const getGamemastersFromGame = (game: GameInfo) => game.players.filter((player) => player.role === 'gamemaster').map((player) => player.name)
const selectGame = async (game: GameInfo): Promise<void> => { const selectGame = async (game: GameInfo): Promise<void> => {