generated from VLADIMIR/template_frontend
up
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user