создание qr-кода
This commit is contained in:
Vendored
+15
@@ -8,6 +8,15 @@ export {}
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
Button: typeof import('primevue/button')['default']
|
||||
Checkbox: typeof import('primevue/checkbox')['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']
|
||||
CreatePlacementSection: typeof import('./src/components/create/CreatePlacementSection.vue')['default']
|
||||
CreateReadySection: typeof import('./src/components/create/CreateReadySection.vue')['default']
|
||||
CreateSection: typeof import('./src/components/create/CreateSection.vue')['default']
|
||||
CreateSummarySection: typeof import('./src/components/create/CreateSummarySection.vue')['default']
|
||||
Dropdown: typeof import('primevue/dropdown')['default']
|
||||
ExamplesSection: typeof import('./src/components/TheWelcome/ExamplesSection.vue')['default']
|
||||
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
||||
IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
|
||||
@@ -15,9 +24,15 @@ declare module 'vue' {
|
||||
IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
|
||||
IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
|
||||
IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
|
||||
InputText: typeof import('primevue/inputtext')['default']
|
||||
QRCodeReadySection: typeof import('./src/components/create/CreateReadySection.vue')['default']
|
||||
RadioButton: typeof import('primevue/radiobutton')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
Select: typeof import('primevue/select')['default']
|
||||
SelectActions: typeof import('./src/components/create/SelectActions.vue')['default']
|
||||
SelecteActions: typeof import('./src/components/create/SelecteActions.vue')['default']
|
||||
SelectPlacement: typeof import('./src/components/create/SelectPlacement.vue')['default']
|
||||
TheWelcome: typeof import('./src/components/TheWelcome/TheWelcome.vue')['default']
|
||||
WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
|
||||
}
|
||||
|
||||
Generated
+204
-8
@@ -15,6 +15,8 @@
|
||||
"pouchdb-browser": "^9.0.0",
|
||||
"primeicons": "^7.0.0",
|
||||
"primevue": "^4.2.1",
|
||||
"qr-code-styling": "^1.8.4",
|
||||
"svgo": "^3.3.2",
|
||||
"tailwindcss-primeui": "^0.3.4",
|
||||
"vue": "^3.5.12",
|
||||
"vue-router": "^4.4.5"
|
||||
@@ -1122,9 +1124,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@eslint/plugin-kit": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.2.tgz",
|
||||
"integrity": "sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==",
|
||||
"version": "0.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.3.tgz",
|
||||
"integrity": "sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
@@ -1752,6 +1754,15 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@trysound/sax": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
|
||||
"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tsconfig/node20": {
|
||||
"version": "20.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@tsconfig/node20/-/node20-20.1.4.tgz",
|
||||
@@ -2795,7 +2806,6 @@
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
@@ -3088,9 +3098,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.4",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.4.tgz",
|
||||
"integrity": "sha512-9KdyVPPtLHjPAD7tcuzSFs64UfHlLJt7U6qP4/bFVLyjLceyizj6s6jO6YBaV5d0G7g/9KnY/dOpLR4Rcg8YDg==",
|
||||
"version": "7.0.5",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz",
|
||||
"integrity": "sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"path-key": "^3.1.0",
|
||||
@@ -3101,6 +3111,47 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/css-select": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
|
||||
"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"boolbase": "^1.0.0",
|
||||
"css-what": "^6.1.0",
|
||||
"domhandler": "^5.0.2",
|
||||
"domutils": "^3.0.1",
|
||||
"nth-check": "^2.0.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/css-tree": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
|
||||
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mdn-data": "2.0.30",
|
||||
"source-map-js": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/css-what": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
|
||||
"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
@@ -3113,6 +3164,39 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/csso": {
|
||||
"version": "5.0.5",
|
||||
"resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
|
||||
"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"css-tree": "~2.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
|
||||
"npm": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/csso/node_modules/css-tree": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
|
||||
"integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mdn-data": "2.0.28",
|
||||
"source-map-js": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
|
||||
"npm": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/csso/node_modules/mdn-data": {
|
||||
"version": "2.0.28",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
|
||||
"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
|
||||
"license": "CC0-1.0"
|
||||
},
|
||||
"node_modules/cssstyle": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
|
||||
@@ -3260,6 +3344,61 @@
|
||||
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dom-serializer": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
|
||||
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"domelementtype": "^2.3.0",
|
||||
"domhandler": "^5.0.2",
|
||||
"entities": "^4.2.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/domelementtype": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
|
||||
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
],
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/domhandler": {
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
|
||||
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"domelementtype": "^2.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/domhandler?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/domutils": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
|
||||
"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"dom-serializer": "^2.0.0",
|
||||
"domelementtype": "^2.3.0",
|
||||
"domhandler": "^5.0.3"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/domutils?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/eastasianwidth": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
|
||||
@@ -4691,6 +4830,12 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.30",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
|
||||
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
|
||||
"license": "CC0-1.0"
|
||||
},
|
||||
"node_modules/memorystream": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
|
||||
@@ -5020,7 +5165,6 @@
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
|
||||
"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"boolbase": "^1.0.0"
|
||||
@@ -5631,6 +5775,24 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/qr-code-styling": {
|
||||
"version": "1.8.4",
|
||||
"resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.8.4.tgz",
|
||||
"integrity": "sha512-uxykNuvXaPDK/jGDERDIdDvvocefbHu1oxVYi6K87FUdPPAezkBdcIeFJ8XVX2HSsyLFINile5uzfOMYpGu5ZA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"qrcode-generator": "^1.4.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.18.0"
|
||||
}
|
||||
},
|
||||
"node_modules/qrcode-generator": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
|
||||
"integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/queue-microtask": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||
@@ -6145,6 +6307,40 @@
|
||||
"integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/svgo": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
|
||||
"integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@trysound/sax": "0.2.0",
|
||||
"commander": "^7.2.0",
|
||||
"css-select": "^5.1.0",
|
||||
"css-tree": "^2.3.1",
|
||||
"css-what": "^6.1.0",
|
||||
"csso": "^5.0.5",
|
||||
"picocolors": "^1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"svgo": "bin/svgo"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/svgo"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/commander": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
|
||||
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/symbol-tree": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
||||
|
||||
@@ -26,6 +26,8 @@
|
||||
"pouchdb-browser": "^9.0.0",
|
||||
"primeicons": "^7.0.0",
|
||||
"primevue": "^4.2.1",
|
||||
"qr-code-styling": "^1.8.4",
|
||||
"svgo": "^3.3.2",
|
||||
"tailwindcss-primeui": "^0.3.4",
|
||||
"vue": "^3.5.12",
|
||||
"vue-router": "^4.4.5"
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<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-3 mb-4">
|
||||
<div v-for="(label, action) in actionsOptions" :key="action" class="flex items-center gap-2">
|
||||
<Checkbox v-model="model" :inputId="action" :value="action" @change="next" />
|
||||
<label :for="action">{{ label }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const emit = defineEmits(['nextStep'])
|
||||
const model = defineModel()
|
||||
|
||||
const actionsOptions = {
|
||||
sendMessage: 'Отправить сообщение',
|
||||
viewContactInfo: 'Посмотреть ваши контактные данные',
|
||||
}
|
||||
|
||||
function next() {
|
||||
emit('nextStep')
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<section>
|
||||
<h2 class="text-xl font-semibold mb-4">Куда отправлять сообщения?</h2>
|
||||
<p class="text-gray-600 mb-4">Выберите, как вы хотите получать сообщения.</p>
|
||||
<div class="flex flex-col gap-3 mb-4">
|
||||
<div class="flex items-center gap-2" v-for="(label, method) in deliveryOptions" :key="method">
|
||||
<RadioButton
|
||||
v-model="model"
|
||||
:inputId="method"
|
||||
name="delivery"
|
||||
:value="method"
|
||||
@change="next"
|
||||
/>
|
||||
<label :for="method">{{ label }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const emit = defineEmits(['nextStep'])
|
||||
const model = defineModel<string>()
|
||||
|
||||
const deliveryOptions = {
|
||||
telegram: 'Telegram',
|
||||
webPushSubscription: 'В браузере (push-уведомления)',
|
||||
}
|
||||
|
||||
function next() {
|
||||
emit('nextStep')
|
||||
}
|
||||
</script>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<section>
|
||||
<h2 class="text-xl font-semibold mb-4">Где вы хотите разместить QR-код?</h2>
|
||||
<p class="text-gray-600 mb-4">Этот выбор поможет настроить QR-код с подходящими действиями.</p>
|
||||
<div class="flex flex-col gap-3 mb-4">
|
||||
<div v-for="(label, type) in qrCodePlacements" :key="type" class="flex items-center gap-2">
|
||||
<RadioButton
|
||||
v-model="selectedPlacement"
|
||||
:inputId="type"
|
||||
name="placement"
|
||||
:value="type"
|
||||
@change="next"
|
||||
/>
|
||||
<label :for="type">{{ label }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const qrCodePlacements = {
|
||||
car: 'Автомобиль',
|
||||
pet: 'Питомец',
|
||||
door: 'Входная дверь дома или квартиры',
|
||||
store: 'Магазин',
|
||||
restaurant_table: 'Стол в кафе или ресторане',
|
||||
other: 'Другое',
|
||||
}
|
||||
|
||||
const selectedPlacement = defineModel<string>()
|
||||
|
||||
const emit = defineEmits(['nextStep'])
|
||||
|
||||
function next() {
|
||||
emit('nextStep')
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<section>
|
||||
<h2 class="text-xl font-semibold mb-4">Ваш QR-код готов</h2>
|
||||
<p class="text-gray-600 mb-4">Сохраните его и ознакомьтесь с инструкциями по размещению.</p>
|
||||
|
||||
<!-- Рендер QR-кода -->
|
||||
<div class="border p-4 bg-white rounded-lg mb-6" v-if="svgUrl">
|
||||
<img :src="svgUrl" alt="QR-код" />
|
||||
</div>
|
||||
|
||||
<!-- Кнопки для скачивания -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-center">
|
||||
<a
|
||||
v-if="svgUrl"
|
||||
:href="svgUrl"
|
||||
:download="`${sanitizedFileName}.svg`"
|
||||
class="p-button p-button-sm p-button-outlined text-center"
|
||||
>
|
||||
Скачать SVG
|
||||
</a>
|
||||
<Button label="Скачать PNG" icon="pi pi-download" class="p-button-sm" @click="downloadPng" />
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="text-red-500 mt-4">Ошибка: {{ error }}</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import QRCodeStyling from 'qr-code-styling'
|
||||
|
||||
// Пропсы
|
||||
const { uri, name } = defineProps<{ uri: string; name: string }>()
|
||||
|
||||
const qrCodeUrl = `https://hereconnect.condev.ru/read/${uri}`
|
||||
const sanitizedFileName = computed(() => {
|
||||
const sanitized = name.replace(/[^a-zA-Z0-9-_]/g, '').trim()
|
||||
return sanitized || 'qr-code'
|
||||
})
|
||||
|
||||
const error = ref<string | null>(null)
|
||||
const svgUrl = ref<string | null>(null)
|
||||
|
||||
// Инициализация QRCodeStyling
|
||||
const qrCode = new QRCodeStyling({
|
||||
width: 256 * 4,
|
||||
height: 256 * 4,
|
||||
data: qrCodeUrl,
|
||||
type: 'svg',
|
||||
// dotsOptions: {
|
||||
// color: '#000',
|
||||
// type: 'rounded',
|
||||
// },
|
||||
backgroundOptions: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
})
|
||||
|
||||
// Генерация SVG и отображение QR-кода
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const blob = await qrCode.getRawData('svg')
|
||||
if (blob && blob instanceof Blob) {
|
||||
svgUrl.value = URL.createObjectURL(blob)
|
||||
} else {
|
||||
error.value = 'Ошибка генерации QR-кода'
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = (err as Error).message
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (svgUrl.value) {
|
||||
URL.revokeObjectURL(svgUrl.value)
|
||||
}
|
||||
})
|
||||
|
||||
// Скачивание PNG
|
||||
async function downloadPng() {
|
||||
try {
|
||||
const blob = await qrCode.getRawData('png') // Получение PNG в формате Blob
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `${sanitizedFileName.value}.png`
|
||||
link.click()
|
||||
} catch (err) {
|
||||
error.value = (err as Error).message || 'Ошибка при скачивании QR-кода'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<section :class="{ 'active-section': isActive }" ref="section">
|
||||
<slot />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, useTemplateRef } from 'vue'
|
||||
|
||||
const props = defineProps<{ isActive: boolean }>()
|
||||
|
||||
const sectionRef = useTemplateRef('section')
|
||||
|
||||
// плавная прокрутка при активации секции
|
||||
watch(
|
||||
() => props.isActive,
|
||||
(isActive) => {
|
||||
if (isActive) {
|
||||
sectionRef.value?.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
opacity: 0.1;
|
||||
transition: opacity 0.5s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
section {
|
||||
border-top: 1px solid silver;
|
||||
padding-top: 1em;
|
||||
}
|
||||
section:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
section.active-section {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<section>
|
||||
<h2 class="text-xl font-semibold mb-4">Введите название для вашего QR-кода</h2>
|
||||
<p class="text-gray-600 mb-4">Название поможет вам организовать ваши QR-коды.</p>
|
||||
|
||||
<!-- Форма задания названия -->
|
||||
<div class="mb-6">
|
||||
<label for="name" class="block text-gray-700 font-semibold mb-2">Название</label>
|
||||
<InputText id="name" v-model="nameModel" class="w-full" placeholder="Введите название" />
|
||||
<p v-if="!nameModel" class="text-red-500 text-sm mt-1">Название обязательно.</p>
|
||||
</div>
|
||||
|
||||
<!-- Кнопка создания -->
|
||||
<Button
|
||||
label="Создать QR-код"
|
||||
class="p-button-sm mt-4 mb-4"
|
||||
:disabled="!nameModel"
|
||||
@click="saveQRCode"
|
||||
/>
|
||||
<p v-if="error" class="text-red-500 mt-4">Ошибка создания QR-кода: {{ error }}</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { qrCodeDb } from '@/dbs'
|
||||
import { type QRCodeDocument } from '@/types/DBDocumentTypes'
|
||||
|
||||
const { placement, actions, deliveryMethod, user_uuid, predefinedMessage } = defineProps<{
|
||||
placement: QRCodeDocument['placement']
|
||||
actions: QRCodeDocument['actions']
|
||||
deliveryMethod: QRCodeDocument['deliveryMethod']
|
||||
user_uuid: QRCodeDocument['user_uuid']
|
||||
predefinedMessage: QRCodeDocument['predefinedMessage'] | undefined
|
||||
}>()
|
||||
|
||||
const uriModel = defineModel<QRCodeDocument['uri']>('uri', { required: true })
|
||||
const nameModel = defineModel<QRCodeDocument['name']>('name', { required: true })
|
||||
const emit = defineEmits(['nextStep'])
|
||||
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
async function saveQRCode() {
|
||||
try {
|
||||
// Генерация уникального uri
|
||||
const EPOHE = 1731661630981
|
||||
const uri = Math.abs(Date.now() - EPOHE).toString(36)
|
||||
|
||||
const qrCodeDoc: QRCodeDocument = {
|
||||
_id: `qr_code:${uri}`,
|
||||
type: 'qr_code',
|
||||
uri,
|
||||
url: `https://hereconnect.condev.ru/read/${uri}`,
|
||||
name: nameModel.value,
|
||||
deliveryMethod,
|
||||
created_at: new Date().toISOString(),
|
||||
placement,
|
||||
actions,
|
||||
user_uuid,
|
||||
predefinedMessage,
|
||||
}
|
||||
|
||||
await qrCodeDb.put(qrCodeDoc)
|
||||
|
||||
uriModel.value = uri
|
||||
error.value = null
|
||||
emit('nextStep')
|
||||
} catch (err) {
|
||||
error.value = (err as Error).message || 'Неизвестная ошибка'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||
<path
|
||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -1,19 +0,0 @@
|
||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--mdi"
|
||||
width="24"
|
||||
height="24"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
import PouchDB from 'pouchdb-browser'
|
||||
import { type QRCodeDocument } from '@/types/DBDocumentTypes'
|
||||
|
||||
export const qrCodeDb = new PouchDB<QRCodeDocument>('https://hereconnect.condev.ru/api/qr', {
|
||||
skip_setup: true,
|
||||
})
|
||||
+5
-5
@@ -17,11 +17,11 @@ const routes = [
|
||||
name: 'create',
|
||||
component: () => import('@/views/CreateView.vue'), // Первый шаг создания QR-кода
|
||||
},
|
||||
// {
|
||||
// path: 'actions',
|
||||
// name: 'create-actions',
|
||||
// component: () => import('@/views/CreateActionsView.vue'), // Второй шаг создания QR-кода
|
||||
// },
|
||||
{
|
||||
path: ':placement/actions',
|
||||
name: 'create-actions',
|
||||
component: () => import('@/views/CreateActionsView.vue'), // Второй шаг создания QR-кода
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* Базовый интерфейс для всех документов в базе данных.
|
||||
* Содержит общие поля, такие как идентификатор, тип и дату создания.
|
||||
*/
|
||||
export interface BaseDocument {
|
||||
/** Уникальный идентификатор документа */
|
||||
_id: string
|
||||
|
||||
/** Тип документа */
|
||||
type: string
|
||||
|
||||
/** Дата создания документа в формате ISO */
|
||||
created_at: string
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { type BaseDocument } from './BaseDocument'
|
||||
|
||||
/**
|
||||
* Интерфейс для документа сообщения.
|
||||
* Используется для хранения сообщений, отправленных через QR-код, с поддержкой вложений.
|
||||
*/
|
||||
export interface MessageDocument extends BaseDocument {
|
||||
/** Тип документа, всегда 'message' */
|
||||
type: 'message'
|
||||
|
||||
/** Идентификатор QR-кода, к которому относится сообщение */
|
||||
qr_code: string
|
||||
|
||||
/** Идентификатор чата для связывания сообщений */
|
||||
chat: string
|
||||
|
||||
/** Отправитель сообщения ('guest' или 'owner') */
|
||||
from: 'guest' | 'owner'
|
||||
|
||||
/** Содержимое сообщения */
|
||||
body: string
|
||||
|
||||
/** Опциональная геопозиция (широта и долгота) */
|
||||
location?: { lat: number; lng: number }
|
||||
|
||||
/** Вложения, такие как фото */
|
||||
// _attachments?: {
|
||||
// [key: string]: Attachment
|
||||
// }
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { BaseDocument } from './BaseDocument'
|
||||
|
||||
/**
|
||||
* Интерфейс для документа QR-кода.
|
||||
* Представляет QR-код, созданный пользователем, и информацию о привязанном объекте.
|
||||
*/
|
||||
export interface QRCodeDocument extends BaseDocument {
|
||||
/** Тип документа, всегда 'qr_code' */
|
||||
type: 'qr_code'
|
||||
|
||||
/** Уникальный URL для настройки и взаимодействия */
|
||||
uri: string
|
||||
|
||||
/** Ссылка на QR-код */
|
||||
url: string
|
||||
|
||||
/** Идентификатор пользователя, который создал QR-код */
|
||||
user_uuid: string
|
||||
|
||||
/** Название объекта, для которого создан QR-код, например "Мой автомобиль" */
|
||||
name: string
|
||||
|
||||
deliveryMethod: 'telegram' | 'webPushSubscription'
|
||||
|
||||
/** Тип объекта, для которого создан QR-код, например "car" */
|
||||
placement: 'car' | 'pet' | 'door' | 'store' | 'restaurant_table' | 'other'
|
||||
|
||||
/** Доступные действия для гостей (например, ["send_message"]) */
|
||||
actions: string[]
|
||||
|
||||
/** Предустановленное сообщение для гостей */
|
||||
predefinedMessage?: string[]
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import type { BaseDocument } from './BaseDocument'
|
||||
|
||||
/**
|
||||
* Интерфейс для документа пользователя.
|
||||
* Содержит данные, такие как имя пользователя, уникальный UUID, email и роли.
|
||||
*/
|
||||
export interface UserDocument extends BaseDocument {
|
||||
/** Тип документа, всегда 'user' */
|
||||
type: 'user'
|
||||
|
||||
/** Имя пользователя */
|
||||
name: string
|
||||
|
||||
/** Уникальный UUID пользователя, не связанный с _id */
|
||||
user_uuid: string
|
||||
|
||||
/** Email пользователя */
|
||||
email: string
|
||||
|
||||
/** Роли пользователя (например, ['admin', 'user']) */
|
||||
roles: string[]
|
||||
|
||||
/** Пароль пользователя (должен храниться в зашифрованном виде) */
|
||||
password: string
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './BaseDocument'
|
||||
export * from './QRCodeDocument'
|
||||
export * from './MessageDocument'
|
||||
export * from './UserDocument'
|
||||
@@ -0,0 +1,4 @@
|
||||
<template>
|
||||
<SelectActions />
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
+74
-43
@@ -1,55 +1,86 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-center min-h-screen px-4">
|
||||
<div class="max-w-md">
|
||||
<h2 class="text-2xl font-semibold mb-4">Где вы хотите разместить QR-код?</h2>
|
||||
<p class="text-gray-600 mb-6">
|
||||
Этот выбор поможет настроить QR-код с подходящими действиями для выбранного места или цели.
|
||||
На следующем шаге вы сможете выбрать, какие действия будут доступны сканирующему.
|
||||
</p>
|
||||
|
||||
<!-- Список типов назначений -->
|
||||
<div class="mb-6 flex flex-col gap-3">
|
||||
<div class="flex items-center gap-2" v-for="(label, type) in qrCodePlacements" :key="type">
|
||||
<RadioButton v-model="selectedPlacement" :inputId="type" name="pizza" :value="type" />
|
||||
<label :for="type">{{ label }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Сообщение об ошибке -->
|
||||
<p v-if="error" class="text-red-500 mb-4">
|
||||
Пожалуйста, выберите, где вы хотите разместить QR-код
|
||||
</p>
|
||||
|
||||
<!-- Кнопка Далее -->
|
||||
<Button
|
||||
@click="nextStep"
|
||||
:disabled="!selectedPlacement"
|
||||
class="p-2 bg-blue-500 text-white rounded"
|
||||
label="Далее"
|
||||
<div class="create-page max-w-lg mx-auto py-8">
|
||||
<!-- Секция выбора размещения -->
|
||||
<CreateSection isActive>
|
||||
<CreatePlacementSection
|
||||
v-model="placement"
|
||||
@nextStep="placement && activateSections('actions')"
|
||||
/>
|
||||
</div>
|
||||
</CreateSection>
|
||||
|
||||
<!-- Секция выбора доступных действий -->
|
||||
<CreateSection :isActive="activeSteps.includes('actions')">
|
||||
<CreateActionsSection
|
||||
v-model="selectedActions"
|
||||
@nextStep="
|
||||
selectedActions.length &&
|
||||
activateSections(selectedActions.includes('sendMessage') ? 'delivery' : 'summary')
|
||||
"
|
||||
/>
|
||||
</CreateSection>
|
||||
|
||||
<!-- Секция выбора способа доставки -->
|
||||
<CreateSection
|
||||
v-if="selectedActions.includes('sendMessage')"
|
||||
:isActive="activeSteps.includes('delivery')"
|
||||
>
|
||||
<CreateDeliverySection
|
||||
v-model="deliveryMethod"
|
||||
@nextStep="deliveryMethod && activateSections('messages', 'summary')"
|
||||
/>
|
||||
</CreateSection>
|
||||
|
||||
<!-- Секция сообщений для отправки -->
|
||||
<CreateSection
|
||||
v-if="selectedActions.includes('sendMessage') && activeSteps.includes('messages')"
|
||||
:isActive="true"
|
||||
>
|
||||
<CreateMessagesSection :placement v-model="messages" />
|
||||
</CreateSection>
|
||||
|
||||
<!-- Секция итогового резюме -->
|
||||
<CreateSection :isActive="activeSteps.includes('summary')">
|
||||
<CreateSummarySection
|
||||
v-model:uri="uri"
|
||||
v-model:name="name"
|
||||
:placement="placement"
|
||||
:actions="selectedActions"
|
||||
:deliveryMethod="deliveryMethod"
|
||||
:user_uuid="user_uuid"
|
||||
:predefinedMessage="selectedActions.includes('sendMessage') ? messages : undefined"
|
||||
@nextStep="activateSections('qrReady')"
|
||||
/>
|
||||
</CreateSection>
|
||||
|
||||
<!-- Секция готового QR-кода -->
|
||||
<CreateSection :isActive="activeSteps.includes('qrReady')">
|
||||
<CreateReadySection :uri="uri" :name="name" />
|
||||
</CreateSection>
|
||||
|
||||
<div class="h-[30dvh] md:h-[10dvh] overflow-hidden"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const qrCodePlacements = {
|
||||
car: 'Автомобиль',
|
||||
pet: 'Питомец',
|
||||
door: 'Входная дверь дома или квартиры',
|
||||
store: 'Магазин',
|
||||
}
|
||||
// Шаги и состояния для работы с секциями
|
||||
const activeSteps = ref(['placement'])
|
||||
|
||||
const selectedPlacement = ref('')
|
||||
const error = ref(false)
|
||||
const selectedActions = ref<string[]>([])
|
||||
const placement = ref('')
|
||||
const deliveryMethod = ref('')
|
||||
const messages = ref<string[]>([])
|
||||
const name = ref('')
|
||||
const uri = ref('')
|
||||
const user_uuid = 'example-user-uuid' // Временно захардкожено, заменить на динамическое
|
||||
|
||||
function nextStep() {
|
||||
if (!selectedPlacement.value) {
|
||||
error.value = true
|
||||
} else {
|
||||
error.value = false
|
||||
// Логика перехода к следующему шагу и сохранения места размещения QR-кода
|
||||
}
|
||||
// Функция активации следующих шагов
|
||||
function activateSections(...sections: string[]) {
|
||||
sections.forEach((section) => {
|
||||
if (!activeSteps.value.includes(section)) {
|
||||
activeSteps.value.push(section)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user