up

src/components/ControlPage.vue

@@ -9,6 +9,7 @@ import {
   NSpace,
   NSwitch,
   useMessage,
+  useDialog,
 } from 'naive-ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import type {
@@ -20,13 +21,23 @@ import type {
   PreviewFrame,
   ScreenMode,
   State,
+  ScreenStep,
+  PlanStatus,
 } from '../types/screen'
 
 import ConnectionPanel from './ConnectionPanel.vue'
+import ScreenPlanPanel from './ScreenPlanPanel.vue'
 import { modeLabels } from '../utils/presentation'
 import { useScreenTimer } from '../composables/useScreenTimer'
 
 const message = useMessage()
+const dialog = useDialog()
+const planStatus = ref<PlanStatus>({ key: null, editable: false, notice: '' })
+const isPlanEditing = ref(false)
+const isPlanSaving = ref(false)
+const planDraft = ref<ScreenStep[]>([])
+const originalPlan = ref('')
+const isPlanDirty = computed(() => JSON.stringify(planDraft.value) !== originalPlan.value)
 const bridge = window.screenBridge
 const state = ref<State | null>(null)
 const packages = ref<PackageSummary[]>([])
@@ -54,12 +65,6 @@ const previewURL = computed(() =>
     ? preview.value?.dataURL
     : null,
 )
-const stepOptions = computed(() =>
-  (state.value?.catalog.steps ?? []).map((step, index) => ({
-    label: `${index + 1}. ${modeLabels[step.mode]}${step.mode === 8 ? ` · ${step.text.slice(0, 60)}` : ''}`,
-    value: index,
-  })),
-)
 const sceneLabels = {
   idle: 'Окно показа закрыто',
   pending: 'Подготовка показа',
@@ -122,8 +127,60 @@ let timer: ReturnType<typeof setInterval> | undefined
 let unsubscribe: (() => void) | undefined
 let session = ''
 let sequence = 0
+function editPlan() {
+  planDraft.value = state.value?.catalog.steps.map((step) => ({ ...step })) ?? []
+  originalPlan.value = JSON.stringify(planDraft.value)
+  isPlanEditing.value = true
+  if (!planDraft.value.length) addPlanStep()
+}
+function addPlanStep() {
+  planDraft.value.push({
+    mode: 8,
+    text: 'Новый экран',
+    timerLabel: 'Перерыв',
+    timerDurationSeconds: 600,
+  })
+}
+function movePlanStep(index: number, offset: number) {
+  const target = index + offset
+  if (target < 0 || target >= planDraft.value.length) return
+  const [step] = planDraft.value.splice(index, 1)
+  if (step) planDraft.value.splice(target, 0, step)
+}
+function discardPlan(action: () => void) {
+  if (!isPlanEditing.value || !isPlanDirty.value) return action()
+  dialog.warning({
+    title: 'Несохранённые изменения',
+    content: 'Отменить несохранённые изменения плана?',
+    positiveText: 'Отменить изменения',
+    negativeText: 'Продолжить редактирование',
+    onPositiveClick: action,
+  })
+}
+async function savePlan() {
+  if (!bridge || !state.value?.catalog.key || isPlanSaving.value) return
+  const key = state.value.catalog.key
+  isPlanSaving.value = true
+  try {
+    await bridge.onlineAction({
+      action: 'plan-save',
+      key,
+      steps: planDraft.value.map((step) => ({ ...step })),
+    })
+    if (state.value.catalog.key === key) isPlanEditing.value = false
+    message.success('План экранов сохранён')
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : 'Не удалось сохранить план')
+  } finally {
+    isPlanSaving.value = false
+  }
+}
 function acceptState(value: State) {
   if (state.value && value.revision < state.value.revision) return
+  if (value.catalog.key !== state.value?.catalog.key) {
+    isPlanEditing.value = false
+    planDraft.value = []
+  }
   if (value.session !== state.value?.session || value.scene.text !== state.value?.scene.text)
     textDraft.value = value.scene.text
   if (
@@ -164,7 +221,12 @@ async function send(intent: Intent) {
     message.error(error instanceof Error ? error.message : 'Команда не выполнена')
   }
 }
-async function selectPackage(key: string) {
+function selectPackage(key: string) {
+  discardPlan(() => {
+    void changePackage(key)
+  })
+}
+async function changePackage(key: string) {
   await run(async () => {
     if (!bridge) return
     try {
@@ -186,6 +248,7 @@ async function removePackage(key: string) {
 async function refreshHost() {
   if (!bridge) return
   host.value = await bridge.host()
+  planStatus.value = await bridge.planStatus()
   if (display.value === null) display.value = host.value.preferredDisplayId
   if (!host.value.displays.some((d) => d.id === display.value)) display.value = null
 }
@@ -244,7 +307,7 @@ onUnmounted(() => {
       <n-select
         :value="state?.catalog.key ?? 'fixtures'"
         :options="packageOptions"
-        :disabled="!bridge || isBusy"
+        :disabled="!bridge || isBusy || isPlanSaving"
         :input-props="{ 'aria-label': 'Подготовленный пакет' }"
         @update:value="selectPackage"
       />
@@ -298,35 +361,30 @@ onUnmounted(() => {
         >Откройте показ, чтобы подготовить медиа и включить воспроизведение.</n-alert
       >
       <section class="presentation-grid">
-        <n-card title="План показа">
+        <n-card title="План экранов">
           <n-space vertical>
-            <n-select
-              :value="state.scene.stepIndex"
-              :options="stepOptions"
-              :disabled="isBusy || !state.catalog.steps.length"
-              placeholder="Выберите шаг"
-              :input-props="{ 'aria-label': 'Шаг плана' }"
-              @update:value="send({ action: 'step', index: $event })"
+            <ScreenPlanPanel
+              :steps="state.catalog.steps"
+              :current-index="state.scene.stepIndex"
+              :draft="planDraft"
+              :is-editing="isPlanEditing"
+              :is-busy="isBusy || isPlanSaving"
+              :can-edit="planStatus.key === state.catalog.key && planStatus.editable"
+              :notice="planStatus.key === state.catalog.key ? planStatus.notice : ''"
+              @edit="editPlan"
+              @cancel="
+                discardPlan(() => {
+                  isPlanEditing = false
+                })
+              "
+              @save="savePlan"
+              @add="addPlanStep"
+              @remove="planDraft.splice($event, 1)"
+              @move="movePlanStep"
+              @clear="planDraft = []"
+              @update-step="(index, patch) => Object.assign(planDraft[index]!, patch)"
+              @command="send"
             />
-            <p v-if="!state.catalog.steps.length">
-              В пакете нет плана. Используйте переключатель режимов.
-            </p>
-            <n-space>
-              <n-button
-                :disabled="isBusy || state.scene.stepIndex === null || state.scene.stepIndex <= 0"
-                @click="send({ action: 'step', index: (state.scene.stepIndex ?? 0) - 1 })"
-                >Предыдущий шаг</n-button
-              >
-              <n-button
-                :disabled="
-                  isBusy ||
-                  !state.catalog.steps.length ||
-                  (state.scene.stepIndex ?? -1) >= state.catalog.steps.length - 1
-                "
-                @click="send({ action: 'step', index: (state.scene.stepIndex ?? -1) + 1 })"
-                >Следующий шаг</n-button
-              >
-            </n-space>
             <label>Режим показа</label>
             <n-select
               :value="state.scene.mode"