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>
<AdminInfoTile title="Games">
<table class="gameinfos-tile__table">
<tr class="gameinfos-tile__row">
<th class="gameinfos-tile__table-head">{{ $t('team-name')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('lang')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('state')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('num-players')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('gamemasters')}}</th>
</tr>
<tr
:class="{ 'gameinfos-tile__row': true, 'gameinfos-tile__row__disabled': game.state == 'disabled' }"
v-for="game in games"
:key="game.id"
@click="selectGame(game)"
>
<div>
<AdminInfoTile v-if="gamesCount > 0" title="Games">
<table class="gameinfos-tile__table">
<tr class="gameinfos-tile__row">
<th class="gameinfos-tile__table-head">{{ $t('team-name')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('lang')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('state')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('num-players')}}</th>
<th class="gameinfos-tile__table-head">{{ $t('gamemasters')}}</th>
</tr>
<tr
:class="{ 'gameinfos-tile__row': true, 'gameinfos-tile__row__disabled': game.state == 'disabled' }"
v-for="game in games"
:key="game.id"
@click="selectGame(game)"
>
<td class="gameinfos-tile__cell">{{ game.name }}</td>
<td class="gameinfos-tile__cell">{{ game.lang }}</td>
<td class="gameinfos-tile__cell">{{ game.state }}</td>
<td class="gameinfos-tile__cell">{{ game.players.length }}</td>
<td class="gameinfos-tile__cell">{{ getGamemastersFromGame(game).join(', ') }}</td>
</tr>
</table>
</AdminInfoTile>
</tr>
</table>
</AdminInfoTile>
<AdminInfoTile v-if="gamesCount == 0" :title="$t('no-games-1')">
<p>{{ $t('no-games-2') }}</p>
</AdminInfoTile>
</div>
</template>
<script setup lang="ts">
import { navigateTo } from "#app"
import { ref } from 'vue'
import { ref, computed } from 'vue'
import useI18n from '@/composables/useI18n'
import useEngine from '@/composables/useEngine'
import type { GameInfo } from '@/composables/engine.d'
@ -37,11 +42,16 @@ const { $t } = useI18n({
state: { en: 'State', de: 'Status' },
'num-players': { en: '# Players', de: '# Spieler' },
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 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 selectGame = async (game: GameInfo): Promise<void> => {