add teams opts

src/components/GamePage.vue

@@ -5,7 +5,7 @@ import { getAuthClient } from '@/api/auth_client';
 import { Icon } from '@vicons/utils'
 import { NButton } from 'naive-ui'
 import type { Application, Game, Team } from '@/api/generated/crabs/evening_detective_server';
-import { NCard, NInput, NModal, NSpace, NFlex } from 'naive-ui'
+import { NCard, NInput, NModal, NSpace, NFlex, NText } from 'naive-ui'
 import HeaderMenu from '@/components/HeaderMenu.vue'
 import { useMessage } from 'naive-ui';
 import { ref } from 'vue';
@@ -20,6 +20,9 @@ const message = useMessage()
 
 const showSettingsModal = ref(false)
 const showGiveApplicationModal = ref(false)
+const showAddTeamModal = ref(false)
+const showDeleteTeamModal = ref(false)
+const newTeamName = ref('')
 
 const game = ref<Game>({
     id: undefined,
@@ -70,6 +73,16 @@ const giveApplicationTeam = ref<Team>({
     applications: []
 })
 
+const deletedTeamName = ref('')
+const deletedTeam = ref<Team>({
+    id: 0,
+    name: '',
+    status: '',
+    password: '',
+    actionsCount: 0,
+    applications: []
+})
+
 const giveApplicationApplication = ref<Application>({
     name: '',
     image: ''
@@ -81,6 +94,19 @@ function giveApplication(team: Team, application: Application) {
     showGiveApplicationModal.value = true
 }
 
+async function addTeam() {
+    const res = await client.AddTeam({
+        gameId: game.value.id,
+        name: newTeamName.value,
+    })
+    if (res.error != '') {
+        message.error(res.error!)
+        return
+    }
+    await getGame(game.value.id!)
+    showAddTeamModal.value = false
+}
+
 async function confirmGiveApplication() {
     const res = await client.GiveTeamApplications({
         id: giveApplicationTeam.value.id,
@@ -93,6 +119,23 @@ async function confirmGiveApplication() {
     await getGame(game.value.id!)
     showGiveApplicationModal.value = false
 }
+
+async function deleteTeam(team: Team) {
+    deletedTeam.value = team
+    showDeleteTeamModal.value = true
+}
+
+async function confirmDeleteTeam() {
+    const res = await client.DeleteTeam({
+        id: deletedTeam.value.id,
+    })
+    if (res.error != '') {
+        message.error(res.error!)
+        return
+    }
+    await getGame(game.value.id!)
+    showDeleteTeamModal.value = false
+}
 </script>
 
 <template>
@@ -109,6 +152,10 @@ async function confirmGiveApplication() {
                 </n-button>
             </div>
 
+            <div class="team-block team-block-hover" @click="showAddTeamModal = true">
+                <p class="place-image-plus">+</p>
+            </div>
+
             <div v-for="team in game.teams" class="team-block">
                 <div class="team-content-block">
                     <div class="team-name-block">
@@ -116,6 +163,9 @@ async function confirmGiveApplication() {
                         <n-button class="team-url" @click="toTeamStory(team.id!, team.password!)">
                             Подсмотреть игру
                         </n-button>
+                        <n-button class="team-url" type="error" ghost @click="deleteTeam(team)">
+                            Удалить команду
+                        </n-button>
                     </div>
                     <div>Поездки: {{ team.actionsCount }}</div>
                     <n-button v-for="application in team.applications" :key="application.name" class="link-button"
@@ -141,11 +191,12 @@ async function confirmGiveApplication() {
                 <p class="settings-header">Описание</p>
                 <n-input v-model:value="game.description" type="textarea" placeholder="Убийство пастуха..." />
 
+            </n-space>
+            <template #footer>
                 <n-flex justify="end">
                     <n-button @click="updateGame()" ghost> Сохранить изменения </n-button>
                 </n-flex>
-            </n-space>
+            </template>
-            <template #footer> </template>
         </n-card>
     </n-modal>
 
@@ -164,11 +215,55 @@ async function confirmGiveApplication() {
                 <p>Улика</p>
                 <h3>{{ giveApplicationApplication.name }}</h3>
 
+            </n-space>
+            <template #footer>
                 <n-flex justify="end">
                     <n-button @click="confirmGiveApplication()" ghost> Выдать </n-button>
                 </n-flex>
+            </template>
+        </n-card>
+    </n-modal>
+
+    <!-- Окно создания команды -->
+    <n-modal v-model:show="showAddTeamModal">
+        <n-card style="width: 600px" title="Создание команды" :bordered="false" size="huge" role="dialog"
+            aria-modal="true">
+            <template #header-extra>
+                <n-button @click="showAddTeamModal = false"> x </n-button>
+            </template>
+            <n-input v-model:value="newTeamName" type="text" placeholder='Три дебила' />
+            <template #footer>
+                <n-flex justify="end">
+                    <n-button @click="addTeam()" :disabled="newTeamName.length == 0">
+                        Создать
+                    </n-button>
+                </n-flex>
+            </template>
+        </n-card>
+    </n-modal>
+
+    <!-- Окно создания команды -->
+    <n-modal v-model:show="showDeleteTeamModal">
+        <n-card style="width: 600px" title="Удаление команды" :bordered="false" size="huge" role="dialog"
+            aria-modal="true">
+            <template #header-extra>
+                <n-button @click="showDeleteTeamModal = false"> x </n-button>
+            </template>
+            <n-space vertical>
+                <p>
+                    Введите название команды
+                    <n-text class="name-text" strong>{{ deletedTeam.name }}</n-text> чтобы удалить его
+                </p>
+                <n-input v-model:value="deletedTeamName" type="text" placeholder='Три дебила' />
             </n-space>
-            <template #footer> </template>
+
+            <template #footer>
+                <n-flex justify="end">
+                    <n-button @click="confirmDeleteTeam()" :disabled="deletedTeamName != deletedTeam.name">
+                        Удалить
+                    </n-button>
+                </n-flex>
+            </template>
         </n-card>
     </n-modal>
 
@@ -182,13 +277,18 @@ async function confirmGiveApplication() {
     border: 1px solid #444;
 }
 
+.team-block-hover:hover {
+    color: #63e2b7;
+    cursor: pointer;
+    border: 1px solid #63e2b7;
+}
+
 .team-url {
     margin-left: 10px;
 }
 
 .team-url:hover {
     cursor: pointer;
-    color: #63e2b7;
 }
 
 .team-content-block {
@@ -216,4 +316,17 @@ async function confirmGiveApplication() {
     margin-top: 10px;
     width: 100%;
 }
+
+.place-image-plus {
+    font-size: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.name-text {
+    padding: 3px;
+    border-radius: 3px;
+    background-color: rgb(255 255 255 / 10%);
+}
 </style>

src/components/PlaceBlock.vue

@@ -289,6 +289,8 @@ function onCreateKey(): Key {
 
 .place-block-hover:hover {
   color: #63e2b7;
+  cursor: pointer;
+  border: 1px solid #63e2b7;
 }
 
 .place-image-plus {

src/components/ScenariosPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useMessage } from 'naive-ui'
-import { NButton, NCard, NInput, NModal, NTag } from 'naive-ui'
+import { NButton, NCard, NInput, NModal, NTag, NFlex } from 'naive-ui'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -77,9 +77,11 @@ getScenarios()
       </template>
       <n-input v-model:value="newScenarioName" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />
       <template #footer>
+        <n-flex justify="end">
           <n-button @click="addScenario(newScenarioName)" :disabled="newScenarioName.length == 0">
             Создать
           </n-button>
+        </n-flex>
       </template>
     </n-card>
   </n-modal>