From fd6b661980ba0f2d3ac4616fb6cf887cc48f3fdf Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Tue, 19 Nov 2024 00:51:11 +0200
Subject: [PATCH] add contact info

---
 components.d.ts                           |   4 +
 package-lock.json                         |  36 +++++++
 package.json                              |   1 +
 src/components/read/ReadContactInfo.vue   | 110 ++++++++++++++++++++++
 src/components/read/ReadMessageSender.vue |  86 +++++++++++++++++
 src/views/ManageQRCodeReadyView.vue       |   5 +-
 src/views/ReadQRCodeView.vue              |  95 +++----------------
 7 files changed, 255 insertions(+), 82 deletions(-)
 create mode 100644 src/components/read/ReadContactInfo.vue
 create mode 100644 src/components/read/ReadMessageSender.vue

diff --git a/components.d.ts b/components.d.ts
index 7bb457b..c7442fe 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     Button: typeof import('primevue/button')['default']
     Checkbox: typeof import('primevue/checkbox')['default']
+    ContactInfo: typeof import('./src/components/read/ReadContactInfo.vue')['default']
     CreateActionsSection: typeof import('./src/components/create/CreateActionsSection.vue')['default']
     CreateDeliverySection: typeof import('./src/components/create/CreateDeliverySection.vue')['default']
     CreateMessagesSection: typeof import('./src/components/create/CreateMessagesSection.vue')['default']
@@ -26,8 +27,11 @@ declare module 'vue' {
     IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
     InputText: typeof import('primevue/inputtext')['default']
+    MessageSender: typeof import('./src/components/read/ReadMessageSender.vue')['default']
     QRCodeReadySection: typeof import('./src/components/create/CreateReadySection.vue')['default']
     RadioButton: typeof import('primevue/radiobutton')['default']
+    ReadContactInfo: typeof import('./src/components/read/ReadContactInfo.vue')['default']
+    ReadMessageSender: typeof import('./src/components/read/ReadMessageSender.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Select: typeof import('primevue/select')['default']
diff --git a/package-lock.json b/package-lock.json
index 05ce6ee..a2efdf2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@primevue/forms": "^4.2.1",
         "@primevue/themes": "^4.2.1",
         "events": "^3.3.0",
+        "md5": "^2.3.0",
         "pinia": "^2.2.6",
         "pouchdb-browser": "^9.0.0",
         "primeicons": "^7.0.0",
@@ -2962,6 +2963,15 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@@ -3111,6 +3121,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/css-select": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
@@ -4374,6 +4393,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "license": "MIT"
+    },
     "node_modules/is-core-module": {
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
@@ -4830,6 +4855,17 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
diff --git a/package.json b/package.json
index 310773c..6735baa 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@primevue/forms": "^4.2.1",
     "@primevue/themes": "^4.2.1",
     "events": "^3.3.0",
+    "md5": "^2.3.0",
     "pinia": "^2.2.6",
     "pouchdb-browser": "^9.0.0",
     "primeicons": "^7.0.0",
diff --git a/src/components/read/ReadContactInfo.vue b/src/components/read/ReadContactInfo.vue
new file mode 100644
index 0000000..d3e395f
--- /dev/null
+++ b/src/components/read/ReadContactInfo.vue
@@ -0,0 +1,110 @@
+<template>
+  <section class="max-w-lg w-full text-center">
+    <!-- Контактная информация -->
+    <div class="flex items-start bg-gray-100 border rounded-lg p-4">
+      <!-- Аватарка Gravatar -->
+      <div v-if="contactInfo.email" class="flex-shrink-0 mr-4">
+        <img
+          :src="gravatarUrl"
+          alt="Аватар"
+          class="w-16 h-16 rounded-full"
+          title="Аватар владельца"
+        />
+      </div>
+
+      <!-- Контакты -->
+      <div class="text-left flex-grow">
+        <p v-if="contactInfo.name" class="text-lg font-semibold">{{ contactInfo.name }}</p>
+
+        <p v-if="contactInfo.phone" class="text-gray-700">
+          Телефон:
+          <a :href="`tel:${formattedPhone}`" class="underline text-blue-600">
+            {{ contactInfo.phone }}
+          </a>
+        </p>
+
+        <p v-if="contactInfo.email" class="text-gray-700">
+          Email:
+          <a :href="`mailto:${contactInfo.email}`" class="underline text-blue-600">
+            {{ contactInfo.email }}
+          </a>
+        </p>
+
+        <Button
+          v-if="hasContactInfo"
+          label="Добавить в адресную книгу"
+          icon="pi pi-user-plus"
+          class="p-button-sm mt-4 p-button-outlined"
+          @click="addToAddressBook"
+        />
+      </div>
+    </div>
+
+    <p v-if="success" class="text-green-500 mt-4">Контакт успешно добавлен в адресную книгу!</p>
+    <p v-if="error" class="text-red-500 mt-4">Ошибка добавления контакта: {{ error }}</p>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import md5 from 'md5'
+
+const { contactInfo } = defineProps<{
+  contactInfo: { name?: string; phone?: string; email?: string }
+}>()
+
+const success = ref(false)
+const error = ref<string | null>(null)
+
+// Форматирование номера телефона для протокола `tel:`
+const formattedPhone = computed(() => {
+  if (!contactInfo.phone) return ''
+  return contactInfo.phone.replace(/[^0-9+]/g, '') // Удаляем все, кроме цифр и "+"
+})
+
+// Проверка наличия контактной информации
+const hasContactInfo = computed(() => {
+  return !!contactInfo.name || !!contactInfo.phone || !!contactInfo.email
+})
+
+// Ссылка на аватар Gravatar
+const gravatarUrl = computed(() => {
+  if (!contactInfo.email) return ''
+  const hash = md5(contactInfo.email.trim().toLowerCase())
+  return `https://www.gravatar.com/avatar/${hash}?d=identicon&s=128`
+})
+
+// Добавление в адресную книгу
+function addToAddressBook() {
+  try {
+    const vCard = [
+      'BEGIN:VCARD',
+      'VERSION:3.0',
+      contactInfo.name ? `FN:${contactInfo.name}` : '',
+      contactInfo.phone ? `TEL;TYPE=VOICE:${formattedPhone.value}` : '',
+      contactInfo.email ? `EMAIL:${contactInfo.email}` : '',
+      'END:VCARD',
+    ]
+      .filter(Boolean) // Убираем пустые строки
+      .join('\n')
+
+    const blob = new Blob([vCard], { type: 'text/vcard;charset=utf-8' })
+    const link = document.createElement('a')
+
+    const sanitized = contactInfo.name
+      ?.replace(/[<>:"/\\|?*\x00-\x1F]/g, '') // Убираем запрещённые символы
+      .replace(/\s+/g, '_') // Заменяем пробелы на подчёркивания
+      .trim()
+
+    link.href = URL.createObjectURL(blob)
+    link.download = `${sanitized || 'contact'}.vcf`
+    link.click()
+
+    success.value = true
+    error.value = null
+  } catch {
+    error.value = 'Ошибка при создании vCard'
+    success.value = false
+  }
+}
+</script>
diff --git a/src/components/read/ReadMessageSender.vue b/src/components/read/ReadMessageSender.vue
new file mode 100644
index 0000000..2b0bf94
--- /dev/null
+++ b/src/components/read/ReadMessageSender.vue
@@ -0,0 +1,86 @@
+<template>
+  <section class="max-w-lg w-full">
+    <p class="text-gray-600 mb-4 text-center">Выберите сообщение из списка или напишите своё:</p>
+
+    <!-- Предустановленные сообщения -->
+    <div v-if="presetMessages.length" class="mb-6">
+      <div class="flex flex-col gap-3">
+        <Button
+          v-for="(message, index) in presetMessages"
+          :key="index"
+          class="p-button-outlined w-full text-left"
+          :disabled="loading"
+          @click="sendPresetMessage(message)"
+        >
+          {{ message }}
+        </Button>
+      </div>
+    </div>
+
+    <!-- Текстовое поле ввода с кнопкой -->
+    <form @submit.prevent="sendCustomMessage" class="flex gap-2 items-center">
+      <InputText
+        id="customMessage"
+        v-model="customMessage"
+        class="flex-1"
+        placeholder="Напишите сообщение"
+        :disabled="loading"
+      />
+      <Button
+        type="submit"
+        icon="pi pi-send"
+        class="p-button-md"
+        :disabled="!customMessage.trim() || loading"
+      />
+    </form>
+
+    <p v-if="success" class="text-green-500 mt-4 text-center">Сообщение отправлено!</p>
+    <p v-if="error" class="text-red-500 mt-4 text-center">Ошибка: {{ error }}</p>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const { qr_code_uri, predefinedMessages } = defineProps<{
+  qr_code_uri: string
+  predefinedMessages: string[]
+}>()
+
+// Локальные состояния
+const presetMessages = ref(predefinedMessages || [])
+const customMessage = ref('')
+const success = ref(false)
+const error = ref<string | null>(null)
+const loading = ref(false)
+
+// Функция для отправки сообщения
+async function sendMessage(message: string) {
+  try {
+    loading.value = true
+    console.log({
+      qr_code_uri,
+      message: message.trim(),
+    })
+
+    success.value = true
+    error.value = null
+    customMessage.value = ''
+  } catch {
+    success.value = false
+    error.value = 'Ошибка отправки сообщения'
+  } finally {
+    loading.value = false
+  }
+}
+
+// Функция для отправки предустановленного сообщения
+async function sendPresetMessage(message: string) {
+  await sendMessage(message)
+}
+
+// Функция для отправки пользовательского сообщения
+async function sendCustomMessage() {
+  await sendMessage(customMessage.value)
+}
+</script>
diff --git a/src/views/ManageQRCodeReadyView.vue b/src/views/ManageQRCodeReadyView.vue
index fdfb409..7a7d52c 100644
--- a/src/views/ManageQRCodeReadyView.vue
+++ b/src/views/ManageQRCodeReadyView.vue
@@ -52,7 +52,10 @@ const svgUrl = ref<string | null>(null)
 
 // Получение имени файла
 const sanitizedFileName = computed(() => {
-  const sanitized = qrCodeData.value?.name.replace(/[^a-zA-Z0-9-_]/g, '').trim()
+  const sanitized = qrCodeData.value?.name
+    .replace(/[<>:"/\\|?*\x00-\x1F]/g, '') // Убираем запрещённые символы
+    .replace(/\s+/g, '_') // Заменяем пробелы на подчёркивания
+    .trim()
   return sanitized ? `${sanitized}_QR-Code_HereConnect` : 'QR-Code_HereConnect'
 })
 
diff --git a/src/views/ReadQRCodeView.vue b/src/views/ReadQRCodeView.vue
index d9c67ba..a6cc9ea 100644
--- a/src/views/ReadQRCodeView.vue
+++ b/src/views/ReadQRCodeView.vue
@@ -1,50 +1,16 @@
 <template>
   <div class="flex flex-col min-h-screen">
-    <!-- Основной контент -->
     <main class="flex-grow flex items-center justify-center py-6 px-4 md:px-6">
-      <section class="max-w-lg w-full">
-        <p class="text-gray-600 mb-4 text-center">
-          Выберите сообщение из списка или напишите своё:
-        </p>
-
-        <!-- Предустановленные сообщения -->
-        <div v-if="presetMessages.length" class="mb-6">
-          <div class="flex flex-col gap-3">
-            <Button
-              v-for="(message, index) in presetMessages"
-              :key="index"
-              class="p-button-outlined w-full text-left"
-              :disabled="loading"
-              @click="sendPresetMessage(message)"
-            >
-              {{ message }}
-            </Button>
-          </div>
-        </div>
-
-        <!-- Текстовое поле ввода с кнопкой -->
-        <form @submit.prevent="sendCustomMessage" class="flex gap-2 items-center">
-          <InputText
-            id="customMessage"
-            v-model="customMessage"
-            class="flex-1"
-            placeholder="Напишите сообщение"
-            :disabled="loading"
-          />
-          <Button
-            type="submit"
-            icon="pi pi-send"
-            class="p-button-md"
-            :disabled="!customMessage.trim() || loading"
-          />
-        </form>
-
-        <p v-if="success" class="text-green-500 mt-4 text-center">Сообщение отправлено!</p>
-        <p v-if="error" class="text-red-500 mt-4 text-center">Ошибка: {{ error }}</p>
+      <section class="max-w-lg w-full flex flex-col gap-10">
+        <ReadContactInfo v-if="actions.includes('viewContactInfo')" :contactInfo="contactInfo" />
+        <ReadMessageSender
+          v-if="actions.includes('sendMessage')"
+          :qr_code_uri="qr_code_uri"
+          :predefinedMessages="predefinedMessages"
+        />
       </section>
     </main>
 
-    <!-- Футер -->
     <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">
       <p>
         Нужен такой же?
@@ -62,55 +28,22 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { getQrCodeDocument } from '@/api/qrCode'
-import { type QRCodeDocument } from '@/types/DBDocumentTypes'
 
-const { qr_code_uri } = defineProps<{ qr_code_uri: QRCodeDocument['uri'] }>()
+const { qr_code_uri } = defineProps<{ qr_code_uri: string }>()
 
 // Локальные состояния
-const presetMessages = ref<string[]>([])
-const customMessage = ref('')
-const success = ref(false)
-const error = ref<string | null>(null)
-const loading = ref(false)
+const predefinedMessages = ref<string[]>([])
+const contactInfo = ref<{ name?: string; phone?: string; email?: string }>({})
+const actions = ref<string[]>([])
 
-// Функция для отправки сообщения
-async function sendMessage(message: string) {
-  try {
-    loading.value = true
-    console.log({
-      qr_code_uri,
-      message: message.trim(),
-    })
-
-    success.value = true
-    error.value = null
-    customMessage.value = ''
-  } catch {
-    success.value = false
-    error.value = 'Ошибка отправки сообщения'
-  } finally {
-    loading.value = false
-  }
-}
-
-// Функция для отправки предустановленного сообщения
-async function sendPresetMessage(message: string) {
-  await sendMessage(message)
-}
-
-// Функция для отправки пользовательского сообщения
-async function sendCustomMessage() {
-  await sendMessage(customMessage.value)
-}
-
-// Загрузка данных QR‑кода
 onMounted(async () => {
   try {
     const qrCodeDoc = await getQrCodeDocument(qr_code_uri)
-    presetMessages.value = qrCodeDoc!.predefinedMessage || []
+    predefinedMessages.value = qrCodeDoc!.predefinedMessage || []
+    contactInfo.value = qrCodeDoc!.contactInfo || { name: 'waka', phone: '+123' }
+    actions.value = qrCodeDoc!.actions || []
   } catch (err) {
     console.error(err)
-    error.value = 'Ошибка загрузки данных QR‑кода'
   }
 })
 </script>