add screens

src/components/GamePage.vue

@@ -13,6 +13,7 @@ import type {
   Application,
   Game,
   Question,
+  ScreenState,
   Team,
   TeamAnswers,
 } from '@/api/generated/crabs/evening_detective_server'
@@ -52,6 +53,7 @@ const game = ref<Game>({
   scenario: undefined,
   teams: undefined,
 })
+const screens = ref<ScreenState[]>([])
 
 async function getGame(id: number) {
   const res = await client.GetGame({ id: id })
@@ -89,6 +91,33 @@ async function getGame(id: number) {
 }
 getGame(Number(gameId))
 
+async function getGameScreens() {
+  const res = await client.GetGameScreens({ gameId: Number(gameId) })
+  if (res.error != '') {
+    return
+  }
+  screens.value = res.screens || []
+}
+getGameScreens()
+
+async function setSoundScreen(screen: ScreenState) {
+  const res = await client.SetScreenSound({ screenId: screen.id, soundEnabled: true })
+  if (res.error != '') {
+    message.error(res.error!)
+    return
+  }
+  await getGameScreens()
+}
+
+async function unbindScreen(screen: ScreenState) {
+  const res = await client.UnbindScreen({ screenId: screen.id })
+  if (res.error != '') {
+    message.error(res.error!)
+    return
+  }
+  await getGameScreens()
+}
+
 async function toTeamStory(id: number, password: string, newTab: boolean = false) {
   const uri = '/team-story/' + id + '?password=' + password
   if (newTab) {
@@ -250,6 +279,7 @@ async function openQR(url: string, text: string) {
 
 useSimplePolling(() => {
   getGame(Number(gameId))
+  getGameScreens()
 }, 2000)
 
 async function resetGame() {
@@ -477,6 +507,22 @@ useSimplePolling(() => {
         </n-flex>
       </div>
 
+      <div v-if="screens.length > 0" class="screens-block">
+        <p class="screens-title">Экраны</p>
+        <div v-for="screen in screens" :key="screen.id" class="screen-row">
+          <div>
+            <div>Экран {{ screen.id }}</div>
+            <div class="screen-status">{{ screen.status }}</div>
+            <div v-if="screen.error" class="screen-error">{{ screen.error }}</div>
+          </div>
+          <n-flex justify="end">
+            <n-tag v-if="screen.soundEnabled" type="success">Со звуком</n-tag>
+            <n-button v-else size="small" @click="setSoundScreen(screen)">Назначить звук</n-button>
+            <n-button size="small" type="error" ghost @click="unbindScreen(screen)">Отвязать</n-button>
+          </n-flex>
+        </div>
+      </div>
+
       <div class="team-block team-block-hover" @click="showAddTeamModal = true">
         <p class="place-image-plus">+</p>
       </div>
@@ -823,4 +869,36 @@ useSimplePolling(() => {
 .answers-score-input {
   width: 110px;
 }
+
+.screens-block {
+  background-color: #222;
+  border-radius: 10px;
+  margin: 12px 0;
+  padding: 16px;
+}
+
+.screens-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.screen-row {
+  align-items: center;
+  border-top: 1px solid rgb(255 255 255 / 10%);
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  padding: 12px 0;
+}
+
+.screen-status {
+  color: #aaa;
+  font-size: 13px;
+}
+
+.screen-error {
+  color: #f2a2a2;
+  font-size: 13px;
+}
 </style>