feat: show gameinfos in admin view

client/src/components/admin/GameInfoTile.vue

@@ -1,5 +1,5 @@
 <template>
-  <InfoTile title="Game">
+  <AdminInfoTile title="Game">
     <table class="gameinfo-tile__table">
       <tr class="gameinfo-tile__row">
         <td>{{ $t('name') }}:</td>
@@ -44,7 +44,7 @@
         <td colspan="3">{{ gameinfo.id }}</td>
       </tr>
     </table>
-  </InfoTile>
+  </AdminInfoTile>
 </template>
 
 <script setup lang="ts">
@@ -93,11 +93,6 @@ const editLangChange = async (): Promise<void> => {
 
 <style lang="scss">
 .gameinfo-tile {
-  &__container {
-    width: 100%;
-    height: 100%;
-  }
-
   &__table {
     margin-left: -12px;
     border-collapse: separate;

client/src/components/admin/GameInfosTile.vue

@@ -0,0 +1,65 @@
+<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" v-for="game in games" :key="game.id">
+        <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>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import useI18n from '@/composables/useI18n'
+import useEngine from '@/composables/useEngine'
+import { GameInfo } from '@/composables/engine.d'
+
+const { $t } = useI18n({
+  'team-name': { en: 'Team name', de: 'Teamname' },
+  lang: { en: 'Lang', de: 'Sprache' },
+  state: { en: 'State', de: 'Status' },
+  'num-players': { en: '# Players', de: '# Spieler' },
+  gamemasters: { en: 'Gamemaster(s)', de: 'Gamemaster(s)' },
+})
+
+const games = ref(await useEngine().fetchGameInfos())
+const getGamemastersFromGame = (game: GameInfo) => game.players.filter((player) => player.role === 'gamemaster').map((player) => player.name)
+</script>
+
+<style lang="scss">
+.gameinfos-tile {
+  &__table {
+    margin: 0 0 16px 0;
+    border-spacing: 0;
+  }
+
+  &__table-head {
+    text-align: left;
+    padding-right: 8px;
+  }
+
+  &__row {
+    height: 24px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #606060;
+    }
+  }
+
+  &__cell {
+    padding-right: 8px;
+  }
+}
+</style>

client/src/components/admin/PlayersTile.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <InfoTile title="Players" icon-bottom="add" @icon-click="addPlayer">
+    <AdminInfoTile title="Players" icon-bottom="add" @icon-click="addPlayer">
       <table class="players-tile__table">
         <tr>
           <th class="players-tile__table-head">{{ $t('name') }}:</th>
@@ -20,7 +20,7 @@
           <td class="players-tile__cell">{{ player.lastLoggedIn === 0 ? '-' : datetime(player.lastLoggedIn) }}</td>
         </tr>
       </table>
-    </InfoTile>
+    </AdminInfoTile>
     <AdminPlayerDialog v-if="showPlayerDialog" :title="playerDialogTitle" :buttons="playerDialogButtons"
       :player="playerDialogPlayer" @close="showPlayerDialog = false" @submit="playerDialogSubmit" />
   </div>

client/src/composables/engine.d.ts

@@ -76,6 +76,8 @@ export type GameInfo = {
   numQuotesTotal: number
 }
 
+export type GameInfos = Array<GameInfo>
+
 export type CreateGameStatus = {
   status: string
   authcode: string

client/src/composables/engine/gameManagement.ts

@@ -1,6 +1,6 @@
 import { EngineContext } from '@/composables/useEngine'
 import { useUserinfoStore } from "@/stores/UserinfoStore"
-import type { GameInfo, PlayerEdit, Lang, CreateGameStatus } from '@/composables/engine.d'
+import type { GameInfo, GameInfos, PlayerEdit, Lang, CreateGameStatus } from '@/composables/engine.d'
 
 export async function fetchGameInfo(this: EngineContext): Promise<GameInfo> {
   const userInfoStore = useUserinfoStore()
@@ -51,3 +51,8 @@ export async function createGame(this: EngineContext, name: string, teamname: st
     lang,
   }) as CreateGameStatus
 }
+
+export async function fetchGameInfos(this: EngineContext): Promise<GameInfos> {
+  const resp = await this.callApi('/api/games') as { games: GameInfos }
+  return resp.games
+}

client/src/composables/useEngine.ts

@@ -3,10 +3,10 @@ import { callApi, QueryParams } from '@/composables/engine/callApi'
 import { start, stop } from '@/composables/engine/startStop'
 import { fetchUpdate } from '@/composables/engine/fetchUpdate'
 import { loadQuotes, getQuotesRef, deleteQuote, saveQuote } from '@/composables/engine/quotes'
-import { fetchGameInfo, setGameLang, setGameName, savePlayer, deletePlayer, createGame } from '@/composables/engine/gameManagement'
+import { fetchGameInfo, fetchGameInfos, setGameLang, setGameName, savePlayer, deletePlayer, createGame } from '@/composables/engine/gameManagement'
 import { collectQuotes, startGame, continueGame, resetGame, finishGame } from '@/composables/engine/gameState'
 import { saveSelection } from '@/composables/engine/play'
-import type { Quotes, GameInfo, PlayerEdit, Lang, CreateGameStatus } from '@/composables/engine.d'
+import type { Quotes, GameInfo, GameInfos, PlayerEdit, Lang, CreateGameStatus } from '@/composables/engine.d'
 
 export interface EngineContext {
     isActive: boolean
@@ -38,6 +38,7 @@ export interface useEngine {
     finishGame: () => Promise<void>
     saveSelection: (selection: string) => Promise<void>
     fetchGameInfo: () => Promise<GameInfo>
+    fetchGameInfos: () => Promise<GameInfos>
     setGameLang: (lang: string) => Promise<void>
     setGameName: (name: string) => Promise<void>
     savePlayer: (player: PlayerEdit) => Promise<void>
@@ -77,6 +78,7 @@ export default (): useEngine => {
         finishGame: () => finishGame.apply(context),
         saveSelection: (selection: string) => saveSelection.apply(context, [selection]),
         fetchGameInfo: () => fetchGameInfo.apply(context),
+        fetchGameInfos: () => fetchGameInfos.apply(context),
         setGameLang: (lang: string) => setGameLang.apply(context, [lang]),
         setGameName: (name: string) => setGameName.apply(context, [name]),
         savePlayer: (player: PlayerEdit) => savePlayer.apply(context, [player]),

client/src/pages/admin.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="admin__container">
     <TopBar />
-    Admin page
+    <div class="admin__tiles">
+      <AdminGameInfosTile />
+    </div>
   </div>
 </template>
 
@@ -19,5 +21,9 @@ await useAuth().authenticateAndLoadUserInfo(['admin'])
   &__container {
     color: $text-primary-color;
   }
+
+  &__tiles {
+    display: flex;
+  }
 }
 </style>