This commit is contained in:
2026-10-04 23:08:03 +07:00
parent 31d93a9916
commit 68fd0760f6
4 changed files with 394 additions and 371 deletions
+4 -4
View File
@@ -5,10 +5,10 @@
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Вечерний детектив</title>
<script type="module" crossorigin src="/assets/index-D9DHo4Ux.js"></script>
<link rel="modulepreload" crossorigin href="/assets/client-Dr2LhGo3.js">
<link rel="modulepreload" crossorigin href="/assets/light-DXa4IKh6.js">
<link rel="modulepreload" crossorigin href="/assets/light-4JJV7N1X.js">
<script type="module" crossorigin src="/assets/index-DVruj17R.js"></script>
<link rel="modulepreload" crossorigin href="/assets/client-CmW03vy2.js">
<link rel="modulepreload" crossorigin href="/assets/light-CU7ioAUB.js">
<link rel="modulepreload" crossorigin href="/assets/light-CBsH9Klj.js">
<link rel="stylesheet" crossorigin href="/assets/index-CF62QB4P.css">
</head>
<body>
+240 -2
View File
@@ -1,11 +1,15 @@
<script setup lang="ts">
import { NButton, NFlex, NSpace, NText } from 'naive-ui'
import { NButton, NFlex, NInput, NInputNumber, NSelect, NSpace, NText } from 'naive-ui'
import { computed, onBeforeUnmount, ref } from 'vue'
import type {
Application,
MapItem,
ResultsQuestion,
ScreenCommand,
ScreenMode,
ScreenPlan,
ScreenPlanStep,
ScreenState,
Team,
TeamResult,
@@ -18,11 +22,30 @@ const props = defineProps<{
screens: ScreenState[]
previewQuestions: ResultsQuestion[]
previewTeams: TeamResult[]
screenPlan?: ScreenPlan
screenPlanDraft: ScreenPlanStep[]
screenPlanDirty: boolean
screenPlanSaving: boolean
screenPlanMode: 'use' | 'edit'
screenVolume: number
screenPosition: number
}>()
const emit = defineEmits<{
saveItem: [item: MapItem, hidden?: boolean]
giveApplication: [team: Team, application: Application]
addStep: []
edit: []
cancel: []
removeStep: [index: number]
moveStep: [index: number, offset: number]
dirty: []
clearPlan: []
save: []
setStep: [index: number]
command: [mode: ScreenMode | undefined, command: ScreenCommand]
'update:screenVolume': [value: number | null]
'update:screenPosition': [value: number | null]
}>()
const mapScale = ref(1)
@@ -34,6 +57,16 @@ const teamsNeedingApplications = computed(
() =>
new Map(props.teams.filter((team) => team.applications?.length).map((team) => [team.ID, team])),
)
const screenPlanModeOptions = [
{ label: 'Обложка', value: 'SCREEN_MODE_COVER' },
{ label: 'Введение', value: 'SCREEN_MODE_INTRO' },
{ label: 'Успехов', value: 'SCREEN_MODE_INTRO_DONE' },
{ label: 'Закрывашка', value: 'SCREEN_MODE_CONCLUSION' },
{ label: 'Спасибо за игру', value: 'SCREEN_MODE_CONCLUSION_DONE' },
{ label: 'Результаты', value: 'SCREEN_MODE_RESULTS' },
{ label: 'Таймер', value: 'SCREEN_MODE_TIMER' },
{ label: 'Текст', value: 'SCREEN_MODE_TEXT' },
]
let dragState:
{ item: MapItem; startX: number; startY: number; itemX: number; itemY: number } | undefined
let panState: { startX: number; startY: number; offsetX: number; offsetY: number } | undefined
@@ -211,6 +244,210 @@ onBeforeUnmount(() => {
:teams="previewTeams"
/>
<div v-else class="screen-preview-placeholder">Экран не подключён</div>
<div class="screen-plan">
<n-flex align="center" justify="space-between">
<p class="screens-title">План экранов</p>
<n-space>
<n-button
v-if="!screenPlan && screenPlanMode === 'use'"
size="small"
@click="emit('addStep')"
>
Создать план
</n-button>
<n-button
v-if="screenPlan && screenPlanMode === 'use'"
size="small"
@click="emit('edit')"
>
Редактировать
</n-button>
<template v-if="screenPlanMode === 'edit'">
<n-button size="small" :disabled="screenPlanSaving" @click="emit('cancel')">
Отменить
</n-button>
<n-button
size="small"
type="primary"
:loading="screenPlanSaving"
:disabled="screenPlanSaving"
@click="emit('save')"
>
Сохранить план
</n-button>
</template>
</n-space>
</n-flex>
<p v-if="!screenPlan && screenPlanMode === 'use'" class="screen-empty">
План экранов ещё не создан.
</p>
<template v-else-if="screenPlanMode === 'edit'">
<n-space v-for="(step, index) in screenPlanDraft" :key="index" align="center" wrap>
<n-text>{{ index + 1 }}</n-text>
<n-select
v-model:value="step.mode"
:options="screenPlanModeOptions"
:disabled="screenPlanSaving"
size="small"
style="width: 180px"
@update:value="emit('dirty')"
/>
<n-input
v-if="step.mode === 'SCREEN_MODE_TEXT'"
v-model:value="step.text"
:disabled="screenPlanSaving"
size="small"
placeholder="Текст экрана"
style="min-width: 240px"
@update:value="emit('dirty')"
/>
<template v-if="step.mode === 'SCREEN_MODE_TIMER'">
<n-input
v-model:value="step.timerLabel"
:disabled="screenPlanSaving"
size="small"
placeholder="Надпись таймера"
@update:value="emit('dirty')"
/>
<n-input-number
v-model:value="step.timerDurationSeconds"
:min="1"
:max="86400"
:disabled="screenPlanSaving"
size="small"
placeholder="Секунды"
@update:value="emit('dirty')"
/>
</template>
<n-button
size="small"
:disabled="screenPlanSaving || index === 0"
@click="emit('moveStep', index, -1)"
>
↑
</n-button>
<n-button
size="small"
:disabled="screenPlanSaving || index === screenPlanDraft.length - 1"
@click="emit('moveStep', index, 1)"
>
↓
</n-button>
<n-button
size="small"
type="error"
ghost
:disabled="screenPlanSaving"
@click="emit('removeStep', index)"
>
Удалить
</n-button>
</n-space>
<n-space>
<n-button size="small" :disabled="screenPlanSaving" @click="emit('addStep')">
Добавить шаг
</n-button>
<n-button
v-if="screenPlanDraft.length"
size="small"
:disabled="screenPlanSaving"
@click="emit('clearPlan')"
>
Удалить план
</n-button>
</n-space>
</template>
<template v-else-if="screenPlan">
<n-space v-for="(step, index) in screenPlan.steps || []" :key="index" align="center" wrap>
<n-text>{{ index + 1 }}</n-text>
<n-text>
{{ screenPlanModeOptions.find((option) => option.value === step.mode)?.label }}
<template v-if="step.mode === 'SCREEN_MODE_TEXT'">: {{ step.text }}</template>
<template v-else-if="step.mode === 'SCREEN_MODE_TIMER'">
: {{ step.timerLabel }} ({{ step.timerDurationSeconds }} с)
</template>
</n-text>
<n-button
size="small"
:type="screenPlan.currentStep === index ? 'primary' : 'default'"
:disabled="screenPlan.currentStep === index"
@click="emit('setStep', index)"
>
Показать
</n-button>
<template v-if="screenPlan.currentStep === index">
<template v-if="step.mode === 'SCREEN_MODE_TIMER'">
<n-button
size="small"
@click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_START')"
>
Старт
</n-button>
<n-button
size="small"
@click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_PAUSE')"
>
Пауза
</n-button>
<n-button
size="small"
@click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_RESUME')"
>
Продолжить
</n-button>
<n-button
size="small"
@click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_RESET')"
>
Сбросить
</n-button>
</template>
<template
v-else-if="
step.mode === 'SCREEN_MODE_INTRO' || step.mode === 'SCREEN_MODE_CONCLUSION'
"
>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_PLAY')">
Запуск
</n-button>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_PAUSE')">
Пауза
</n-button>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_RESUME')">
Продолжить
</n-button>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_STOP')">
Стоп
</n-button>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_REPLAY')">
Повтор
</n-button>
<n-input-number
:value="screenVolume"
:min="0"
:max="100"
:step="5"
size="small"
@update:value="emit('update:screenVolume', $event)"
/>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_VOLUME')">
Громкость
</n-button>
<n-input-number
:value="screenPosition"
:min="0"
:step="5"
size="small"
@update:value="emit('update:screenPosition', $event)"
/>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_SEEK')">
Перемотать
</n-button>
</template>
</template>
</n-space>
</template>
</div>
</aside>
</div>
</template>
@@ -247,10 +484,11 @@ onBeforeUnmount(() => {
}
.map-field {
aspect-ratio: 1;
background-color: #151515;
border: 1px dashed rgb(255 255 255 / 20%);
cursor: grab;
height: 420px;
height: auto;
min-height: 200px;
overflow: hidden;
position: relative;
+145 -119
View File
@@ -12,6 +12,8 @@ import {
NRate,
NSelect,
NSpace,
NTabPane,
NTabs,
NText,
} from 'naive-ui'
import { useMessage } from 'naive-ui'
@@ -52,6 +54,20 @@ const isDownloadingQR = ref(false)
const router = useRouter()
const route = useRoute()
const gameId = route.params.id
type GameTab = 'game' | 'teams' | 'screens-map'
function isGameTab(value: string): value is GameTab {
return ['game', 'teams', 'screens-map'].includes(value)
}
const queryTab = typeof route.query.tab === 'string' ? route.query.tab : ''
const activeTab = ref<GameTab>(isGameTab(queryTab) ? queryTab : 'game')
async function setActiveTab(value: string) {
if (!isGameTab(value)) return
activeTab.value = value
await router.replace({ query: { ...route.query, tab: value } })
}
const message = useMessage()
@@ -680,127 +696,137 @@ useSimplePolling(() => {
<template>
<div class="center-block-custom">
<div class="width1200">
<div class="settings-block">
<n-flex justify="space-between">
<n-space>
<n-tag :bordered="false" type="info"> Участвуют команд: {{ activeTeamCount }} </n-tag>
<n-tag type="info">
{{ timeString }}
</n-tag>
<n-tag v-if="formatGameDateTime(game.startAt)" type="info">
Начало: {{ formatGameDateTime(game.startAt) }}
</n-tag>
</n-space>
<n-tabs :value="activeTab" type="line" animated @update:value="setActiveTab">
<n-tab-pane name="game" tab="Игра">
<div class="settings-block">
<n-flex justify="space-between">
<n-space>
<n-tag :bordered="false" type="info">
Участвуют команд: {{ activeTeamCount }}
</n-tag>
<n-tag type="info">
{{ timeString }}
</n-tag>
<n-tag v-if="formatGameDateTime(game.startAt)" type="info">
Начало: {{ formatGameDateTime(game.startAt) }}
</n-tag>
</n-space>
<n-flex justify="end">
<n-button quaternary @click="openQR(url, 'Админка')"> QR </n-button>
<n-button quaternary @click="openIssueTickets()"> Выпустить билеты </n-button>
<n-button quaternary @click="openAnswersModal()"> Ответы команд </n-button>
<n-button v-if="game.status == 'finish'" quaternary @click="toResults()">
<Icon class="settings-icon">
<Trophy />
</Icon>
Итоги
</n-button>
<n-button
v-if="activeTeamCount"
quaternary
:loading="isDownloadingQR"
:disabled="isDownloadingQR"
@click="downloadTeamQR()"
>
QR команд
</n-button>
<n-button quaternary @click="openSettings()">
<Icon class="settings-icon">
<Settings />
</Icon>
Настройки
</n-button>
<n-button
v-if="(game.teams?.length || 0) == 0"
type="error"
quaternary
@click="showDeleteGameModal = true"
>
Удалить игру
</n-button>
<n-flex justify="end">
<n-button quaternary @click="openQR(url, 'Админка')"> QR </n-button>
<n-button quaternary @click="openIssueTickets()"> Выпустить билеты </n-button>
<n-button quaternary @click="openAnswersModal()"> Ответы команд </n-button>
<n-button v-if="game.status == 'finish'" quaternary @click="toResults()">
<Icon class="settings-icon">
<Trophy />
</Icon>
Итоги
</n-button>
<n-button
v-if="activeTeamCount"
quaternary
:loading="isDownloadingQR"
:disabled="isDownloadingQR"
@click="downloadTeamQR()"
>
QR команд
</n-button>
<n-button quaternary @click="openSettings()">
<Icon class="settings-icon">
<Settings />
</Icon>
Настройки
</n-button>
<n-button
v-if="(game.teams?.length || 0) == 0"
type="error"
quaternary
@click="showDeleteGameModal = true"
>
Удалить игру
</n-button>
<n-space>
<n-button type="info" v-if="game.status != 'draft'" dashed @click="resetGame()">
<Icon>
<Reset />
</Icon>
</n-button>
<n-button type="info" v-if="game.status == 'draft'" dashed @click="startGame()">
<Icon>
<Play />
</Icon>
</n-button>
<n-button type="info" v-if="game.status == 'pause'" dashed @click="playGame()">
<Icon>
<Play />
</Icon>
</n-button>
<n-button type="info" v-if="game.status == 'run'" dashed @click="pauseGame()">
<Icon>
<Pause />
</Icon>
</n-button>
<n-button type="info" v-if="game.status != 'finish'" dashed @click="finishGame()">
<Icon>
<Flag />
</Icon>
</n-button>
</n-space>
</n-flex>
</n-flex>
</div>
<GameScreensPanel
:screens="screens"
:screen-plan="screenPlan"
:screen-plan-draft="screenPlanDraft"
:screen-plan-dirty="screenPlanDirty"
:screen-plan-saving="screenPlanSaving"
:screen-plan-mode="screenPlanMode"
:screen-volume="screenVolume"
:screen-position="screenPosition"
:screen-binding="screenBinding"
@bind="bindScannedScreen"
@set-sound="setSoundScreen"
@unbind="unbindScreen"
@add-step="addScreenPlanStep"
@edit="editScreenPlan"
@cancel="cancelScreenPlanEdit"
@remove-step="removeScreenPlanStep"
@move-step="moveScreenPlanStep"
@dirty="markScreenPlanDirty"
@clear-plan="clearScreenPlan"
@save="saveScreenPlan"
@set-step="setScreenPlanStep"
@command="sendScreenPlanCommand"
@update:screen-volume="screenVolume = $event ?? 0"
@update:screen-position="screenPosition = $event ?? 0"
/>
<GameMapPanel
:map-items="mapItems"
:teams="game.teams || []"
:screens="screens"
:preview-questions="previewQuestions"
:preview-teams="previewTeams"
@save-item="saveMapItemAndReload"
@give-application="giveApplication"
/>
<GameTeamsPanel
:teams="game.teams || []"
:participation-options="participationOptions"
@add="showAddTeamModal = true"
@open-qr="openTeamQR"
@preview="(id, password) => toTeamStory(id, password, true)"
@delete="deleteTeam"
@give-application="giveApplication"
/>
<n-space>
<n-button type="info" v-if="game.status != 'draft'" dashed @click="resetGame()">
<Icon>
<Reset />
</Icon>
</n-button>
<n-button type="info" v-if="game.status == 'draft'" dashed @click="startGame()">
<Icon>
<Play />
</Icon>
</n-button>
<n-button type="info" v-if="game.status == 'pause'" dashed @click="playGame()">
<Icon>
<Play />
</Icon>
</n-button>
<n-button type="info" v-if="game.status == 'run'" dashed @click="pauseGame()">
<Icon>
<Pause />
</Icon>
</n-button>
<n-button type="info" v-if="game.status != 'finish'" dashed @click="finishGame()">
<Icon>
<Flag />
</Icon>
</n-button>
</n-space>
</n-flex>
</n-flex>
</div>
</n-tab-pane>
<n-tab-pane name="teams" tab="Команды">
<n-tag :bordered="false" type="info"> Участвуют команд: {{ activeTeamCount }} </n-tag>
<GameTeamsPanel
:teams="game.teams || []"
:participation-options="participationOptions"
@add="showAddTeamModal = true"
@open-qr="openTeamQR"
@preview="(id, password) => toTeamStory(id, password, true)"
@delete="deleteTeam"
@give-application="giveApplication"
/>
</n-tab-pane>
<n-tab-pane name="screens-map" tab="Экраны и карта">
<GameScreensPanel
:screens="screens"
:screen-binding="screenBinding"
@bind="bindScannedScreen"
@set-sound="setSoundScreen"
@unbind="unbindScreen"
/>
<GameMapPanel
:map-items="mapItems"
:teams="game.teams || []"
:screens="screens"
:preview-questions="previewQuestions"
:preview-teams="previewTeams"
:screen-plan="screenPlan"
:screen-plan-draft="screenPlanDraft"
:screen-plan-dirty="screenPlanDirty"
:screen-plan-saving="screenPlanSaving"
:screen-plan-mode="screenPlanMode"
:screen-volume="screenVolume"
:screen-position="screenPosition"
@save-item="saveMapItemAndReload"
@give-application="giveApplication"
@add-step="addScreenPlanStep"
@edit="editScreenPlan"
@cancel="cancelScreenPlanEdit"
@remove-step="removeScreenPlanStep"
@move-step="moveScreenPlanStep"
@dirty="markScreenPlanDirty"
@clear-plan="clearScreenPlan"
@save="saveScreenPlan"
@set-step="setScreenPlanStep"
@command="sendScreenPlanCommand"
@update:screen-volume="screenVolume = $event ?? 0"
@update:screen-position="screenPosition = $event ?? 0"
/>
</n-tab-pane>
</n-tabs>
</div>
</div>
+5 -246
View File
@@ -1,35 +1,12 @@
<script setup lang="ts">
import {
NAlert,
NButton,
NFlex,
NInput,
NInputNumber,
NSelect,
NSpace,
NTag,
NText,
} from 'naive-ui'
import { NAlert, NButton, NFlex, NTag } from 'naive-ui'
import { ref } from 'vue'
import type {
ScreenCommand,
ScreenMode,
ScreenPlan,
ScreenPlanStep,
ScreenState,
} from '@/api/generated/crabs/evening_detective_server'
import type { ScreenState } from '@/api/generated/crabs/evening_detective_server'
import ScreenBindingModal from '@/components/ScreenBindingModal.vue'
const props = defineProps<{
screens: ScreenState[]
screenPlan?: ScreenPlan
screenPlanDraft: ScreenPlanStep[]
screenPlanDirty: boolean
screenPlanSaving: boolean
screenPlanMode: 'use' | 'edit'
screenVolume: number
screenPosition: number
screenBinding: boolean
}>()
@@ -37,32 +14,9 @@ const emit = defineEmits<{
bind: [screenID: string, accessToken: string]
setSound: [screen: ScreenState]
unbind: [screen: ScreenState]
addStep: []
edit: []
cancel: []
removeStep: [index: number]
moveStep: [index: number, offset: number]
dirty: []
clearPlan: []
save: []
setStep: [index: number]
command: [mode: ScreenMode | undefined, command: ScreenCommand]
'update:screenVolume': [value: number | null]
'update:screenPosition': [value: number | null]
}>()
const showBindingModal = ref(false)
const screenPlanModeOptions = [
{ label: 'Обложка', value: 'SCREEN_MODE_COVER' },
{ label: 'Введение', value: 'SCREEN_MODE_INTRO' },
{ label: 'Успехов', value: 'SCREEN_MODE_INTRO_DONE' },
{ label: 'Закрывашка', value: 'SCREEN_MODE_CONCLUSION' },
{ label: 'Спасибо за игру', value: 'SCREEN_MODE_CONCLUSION_DONE' },
{ label: 'Результаты', value: 'SCREEN_MODE_RESULTS' },
{ label: 'Таймер', value: 'SCREEN_MODE_TIMER' },
{ label: 'Текст', value: 'SCREEN_MODE_TEXT' },
]
</script>
<template>
@@ -93,206 +47,11 @@ const screenPlanModeOptions = [
<n-flex justify="end">
<n-tag v-if="screen.soundEnabled" type="success">Со звуком</n-tag>
<n-button v-else size="small" @click="emit('setSound', screen)">Назначить звук</n-button>
<n-button size="small" type="error" ghost @click="emit('unbind', screen)"
>Отвязать</n-button
>
<n-button size="small" type="error" ghost @click="emit('unbind', screen)">
Отвязать
</n-button>
</n-flex>
</div>
<div class="screen-plan">
<n-flex align="center" justify="space-between">
<p class="screens-title">План экранов</p>
<n-space>
<n-button
v-if="!screenPlan && screenPlanMode === 'use'"
size="small"
@click="emit('addStep')"
>
Создать план
</n-button>
<n-button
v-if="screenPlan && screenPlanMode === 'use'"
size="small"
@click="emit('edit')"
>
Редактировать
</n-button>
<template v-if="screenPlanMode === 'edit'">
<n-button size="small" :disabled="screenPlanSaving" @click="emit('cancel')"
>Отменить</n-button
>
<n-button
size="small"
type="primary"
:loading="screenPlanSaving"
:disabled="screenPlanSaving"
@click="emit('save')"
>
Сохранить план
</n-button>
</template>
</n-space>
</n-flex>
<p v-if="!screenPlan && screenPlanMode === 'use'" class="screen-empty">
План экранов ещё не создан.
</p>
<template v-else-if="screenPlanMode === 'edit'">
<n-space v-for="(step, index) in screenPlanDraft" :key="index" align="center" wrap>
<n-text>{{ index + 1 }}</n-text>
<n-select
v-model:value="step.mode"
:options="screenPlanModeOptions"
:disabled="screenPlanSaving"
size="small"
style="width: 180px"
@update:value="emit('dirty')"
/>
<n-input
v-if="step.mode === 'SCREEN_MODE_TEXT'"
v-model:value="step.text"
:disabled="screenPlanSaving"
size="small"
placeholder="Текст экрана"
style="min-width: 240px"
@update:value="emit('dirty')"
/>
<template v-if="step.mode === 'SCREEN_MODE_TIMER'">
<n-input
v-model:value="step.timerLabel"
:disabled="screenPlanSaving"
size="small"
placeholder="Надпись таймера"
@update:value="emit('dirty')"
/>
<n-input-number
v-model:value="step.timerDurationSeconds"
:min="1"
:max="86400"
:disabled="screenPlanSaving"
size="small"
placeholder="Секунды"
@update:value="emit('dirty')"
/>
</template>
<n-button
size="small"
:disabled="screenPlanSaving || index === 0"
@click="emit('moveStep', index, -1)"
>↑</n-button
>
<n-button
size="small"
:disabled="screenPlanSaving || index === screenPlanDraft.length - 1"
@click="emit('moveStep', index, 1)"
>↓</n-button
>
<n-button
size="small"
type="error"
ghost
:disabled="screenPlanSaving"
@click="emit('removeStep', index)"
>Удалить</n-button
>
</n-space>
<n-space>
<n-button size="small" :disabled="screenPlanSaving" @click="emit('addStep')"
>Добавить шаг</n-button
>
<n-button
v-if="screenPlanDraft.length"
size="small"
:disabled="screenPlanSaving"
@click="emit('clearPlan')"
>Удалить план</n-button
>
</n-space>
</template>
<template v-else-if="screenPlan">
<n-space v-for="(step, index) in screenPlan.steps || []" :key="index" align="center" wrap>
<n-text>{{ index + 1 }}</n-text>
<n-text>
{{ screenPlanModeOptions.find((option) => option.value === step.mode)?.label }}
<template v-if="step.mode === 'SCREEN_MODE_TEXT'">: {{ step.text }}</template>
<template v-else-if="step.mode === 'SCREEN_MODE_TIMER'"
>: {{ step.timerLabel }} ({{ step.timerDurationSeconds }} с)</template
>
</n-text>
<n-button
size="small"
:type="screenPlan.currentStep === index ? 'primary' : 'default'"
:disabled="screenPlan.currentStep === index"
@click="emit('setStep', index)"
>Показать</n-button
>
<template v-if="screenPlan.currentStep === index">
<template v-if="step.mode === 'SCREEN_MODE_TIMER'">
<n-button
size="small"
@click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_START')"
>Старт</n-button
>
<n-button
size="small"
@click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_PAUSE')"
>Пауза</n-button
>
<n-button
size="small"
@click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_RESUME')"
>Продолжить</n-button
>
<n-button
size="small"
@click="emit('command', step.mode, 'SCREEN_COMMAND_TIMER_RESET')"
>Сбросить</n-button
>
</template>
<template
v-else-if="
step.mode === 'SCREEN_MODE_INTRO' || step.mode === 'SCREEN_MODE_CONCLUSION'
"
>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_PLAY')"
>Запуск</n-button
>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_PAUSE')"
>Пауза</n-button
>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_RESUME')"
>Продолжить</n-button
>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_STOP')"
>Стоп</n-button
>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_REPLAY')"
>Повтор</n-button
>
<n-input-number
:value="screenVolume"
:min="0"
:max="100"
:step="5"
size="small"
@update:value="emit('update:screenVolume', $event)"
/>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_VOLUME')"
>Громкость</n-button
>
<n-input-number
:value="screenPosition"
:min="0"
:step="5"
size="small"
@update:value="emit('update:screenPosition', $event)"
/>
<n-button size="small" @click="emit('command', step.mode, 'SCREEN_COMMAND_SEEK')"
>Перемотать</n-button
>
</template>
</template>
</n-space>
</template>
</div>
</template>
</div>
<ScreenBindingModal