создание qr-кода

2024-11-18 18:26:28 +02:00
parent 89cf15b6ea
commit 931b0cc976
24 changed files with 813 additions and 103 deletions
@@ -0,0 +1,94 @@
+<template>
+  <section>
+    <h2 class="text-xl font-semibold mb-4">Сообщения для отправки</h2>
+    <p class="text-gray-600 mb-4">
+      После считывания QR-кода можно будет выбрать одно из этих сообщений или написать своё.
+    </p>
+    <p class="text-sm text-gray-500 mb-6">Вы сможете изменить эти сообщения позже.</p>
+
+    <!-- Список сообщений -->
+    <div class="flex flex-col gap-2 mb-4">
+      <div v-for="(message, index) in messages" :key="index" class="flex gap-2" ref="messagesRef">
+        <InputText v-model="messages[index]" class="flex-1" placeholder="Введите сообщение" />
+        <Button
+          icon="pi pi-trash"
+          class="p-button-danger p-button-text"
+          @click="removeMessage(index)"
+          title="Удалить сообщение"
+        />
+      </div>
+    </div>
+
+    <!-- Кнопка добавления сообщения -->
+    <Button
+      label="Добавить сообщение"
+      icon="pi pi-plus"
+      class="p-button-sm p-button-outlined mb-4"
+      @click="addMessage"
+    />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { watch, nextTick, useTemplateRef } from 'vue'
+import { type QRCodeDocument } from '@/types/DBDocumentTypes'
+
+// Пропсы
+const props = defineProps<{ placement: QRCodeDocument['placement'] }>()
+const messagesRef = useTemplateRef<HTMLDivElement[]>('messagesRef')
+
+// Предустановленные сообщения по типу размещения
+const defaultMessages = {
+  car: [
+    'Ваш автомобиль мешает',
+    'Выключите свет',
+    'Спустило колесо',
+    'Подойдите к вашей машине',
+    'Эвакуатор',
+  ],
+  pet: ['Нашёлся ваш питомец'],
+  door: ['Я рядом с дверью'],
+  store: ['Подойдите к кассе', 'Вопрос по товару', 'Помощь с покупкой'],
+  restaurant_table: [
+    'Позовите официанта',
+    'Принести меню',
+    'Принести счёт',
+    'Пожаловаться на обслуживание',
+  ],
+  other: [],
+}
+
+// Локальное хранилище сообщений
+const messages = defineModel<Exclude<QRCodeDocument['predefinedMessage'], undefined>>({
+  required: true,
+})
+
+// Следим за типом размещения и устанавливаем предустановленные сообщения при его смене
+watch(
+  () => props.placement,
+  (newPlacement, previousPlacement) => {
+    let prevDefaultMessages: QRCodeDocument['predefinedMessage'] = []
+    if (previousPlacement && previousPlacement in defaultMessages) {
+      prevDefaultMessages = defaultMessages[previousPlacement]
+    }
+    const isMessagesDefault = JSON.stringify(messages.value) === JSON.stringify(prevDefaultMessages)
+    if (isMessagesDefault) {
+      messages.value = [...(defaultMessages[newPlacement] || [])]
+    }
+  },
+  { immediate: true },
+)
+
+// Функции для управления сообщениями
+function addMessage() {
+  messages.value.push('')
+  nextTick(() => {
+    const lastMessageRef = messagesRef.value![messagesRef.value!.length - 1]
+    lastMessageRef?.querySelector('input')?.focus() // Фокусируемся на последнем поле
+  })
+}
+
+function removeMessage(index: number) {
+  messages.value.splice(index, 1)
+}
+</script>