@@ -1,75 +1,105 @@
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<h1 class="text-2xl font-bold mb-4 text-center lg:text-left">Управление QR-кодом</h1>
|
||||
<QueryRender :query="qrCodeQuery" #default="{ data: qrCodeDoc }">
|
||||
<div class="bg-white p-6 rounded-lg shadow-md mb-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center">
|
||||
<QRCodePlacementIcon :placement="qrCodeDoc.placement" />
|
||||
<h2 class="text-xl font-semibold">{{ qrCodeDoc.name }}</h2>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-cog"
|
||||
label="Настроить"
|
||||
:to="`/manage/qr/${qrCodeDoc.uri}/settings`"
|
||||
as="router-link"
|
||||
severity="secondary"
|
||||
size="small"
|
||||
outlined
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-qrcode"
|
||||
label="QR-код и инструкции"
|
||||
:to="`/manage/qr/${qrCodeDoc.uri}/ready`"
|
||||
as="router-link"
|
||||
severity="secondary"
|
||||
size="small"
|
||||
outlined
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 flex gap-2 items-baseline">
|
||||
<strong>Ссылка: </strong>
|
||||
<a :href="qrCodeDoc.url" class="text-blue-500" target="_blank">{{ qrCodeDoc.url }}</a>
|
||||
<LinkCopyButton :url="qrCodeDoc.url" />
|
||||
<LinkShareTelegramButton
|
||||
:shareUrl="qrCodeDoc.url"
|
||||
shareText="Используйте эту ссылку НаСвязи!"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p><strong>Создано:</strong> {{ formatDate(qrCodeDoc.created_at) }}</p>
|
||||
<!-- <p><strong>Количество сканирований:</strong> {{ qrCodeDoc.scanCount }}</p>-->
|
||||
<!-- <p><strong>Последнее сканирование:</strong> {{ formatDate(qrCodeDoc.lastScan) }}</p>-->
|
||||
</div>
|
||||
</div>
|
||||
</QueryRender>
|
||||
<div class="flex flex-col min-h-full">
|
||||
<main class="flex-grow flex justify-center py-6 px-4 md:px-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold mb-4 text-center lg:text-left">Управление QR-кодом</h1>
|
||||
<QueryRender :query="qrCodeQuery">
|
||||
<template #default="{ data: qrCodeDoc }">
|
||||
<MetaHead>
|
||||
<title>{{ qrCodeDoc.name }}: управление QR-кодом — НаСвязи</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Просматривайте и управляйте сообщениями, отправленными через ваш QR-код. Полная конфиденциальность и удобный интерфейс чата"
|
||||
/>
|
||||
</MetaHead>
|
||||
<div class="bg-white p-6 rounded-lg shadow-md mb-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center">
|
||||
<QRCodePlacementIcon :placement="qrCodeDoc.placement" />
|
||||
<h2 class="text-xl font-semibold">{{ qrCodeDoc.name }}</h2>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<!-- <Button-->
|
||||
<!-- icon="pi pi-cog"-->
|
||||
<!-- label="Настроить"-->
|
||||
<!-- :to="`/manage/qr/${qrCodeDoc.uri}/settings`"-->
|
||||
<!-- as="router-link"-->
|
||||
<!-- severity="secondary"-->
|
||||
<!-- size="small"-->
|
||||
<!-- outlined-->
|
||||
<!-- />-->
|
||||
<Button
|
||||
icon="pi pi-qrcode"
|
||||
label="QR-код и инструкции"
|
||||
:to="`/manage/qr/${qrCodeDoc.uri}/ready`"
|
||||
as="router-link"
|
||||
severity="secondary"
|
||||
size="small"
|
||||
outlined
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 flex gap-2 items-baseline flex-wrap">
|
||||
<strong>Ссылка: </strong>
|
||||
<LinkQRCode :url="qrCodeDoc.url" />
|
||||
<div class="flex gap-2 items-baseline flex-wrap">
|
||||
<LinkCopyButton :url="qrCodeDoc.url" />
|
||||
<LinkShareTelegramButton
|
||||
:shareUrl="qrCodeDoc.url"
|
||||
shareText="Используйте эту ссылку НаСвязи!"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<strong>Создано: </strong>
|
||||
<span class="text-nowrap">{{ formatDate(qrCodeDoc.created_at) }}</span>
|
||||
</p>
|
||||
<!-- <p><strong>Количество сканирований:</strong> {{ qrCodeDoc.scanCount }}</p>-->
|
||||
<!-- <p><strong>Последнее сканирование:</strong> {{ formatDate(qrCodeDoc.lastScan) }}</p>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</QueryRender>
|
||||
|
||||
<!-- <div class="bg-white p-6 rounded-lg shadow-md mb-6">-->
|
||||
<!-- <h2 class="text-xl font-bold mb-4">Чаты</h2>-->
|
||||
<!-- <div v-if="chats.length > 0" class="grid grid-cols-1 gap-4">-->
|
||||
<!-- <div v-for="chat in chats" :key="chat._id" class="p-4 rounded-lg bg-white shadow-md">-->
|
||||
<!-- <div class="flex items-center justify-between">-->
|
||||
<!-- <div>-->
|
||||
<!-- <p class="text-lg font-semibold">Чат #{{ chat._id }}</p>-->
|
||||
<!-- <p class="text-gray-500">-->
|
||||
<!-- Последнее сообщение: {{ formatDate(chat.lastMessageDate) }}-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <Button-->
|
||||
<!-- label="Открыть"-->
|
||||
<!-- :to="`/manage/qr/${qrCodeDoc.uri}/chat/${chat._id}`"-->
|
||||
<!-- as="router-link"-->
|
||||
<!-- class="p-button-outlined p-button-sm"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-else class="text-center text-gray-500">-->
|
||||
<!-- <p>Нет активных чатов для этого QR-кода.</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="bg-white p-6 rounded-lg shadow-md mb-6">-->
|
||||
<!-- <h2 class="text-xl font-bold mb-4">Чаты</h2>-->
|
||||
<!-- <div v-if="chats.length > 0" class="grid grid-cols-1 gap-4">-->
|
||||
<!-- <div v-for="chat in chats" :key="chat._id" class="p-4 rounded-lg bg-white shadow-md">-->
|
||||
<!-- <div class="flex items-center justify-between">-->
|
||||
<!-- <div>-->
|
||||
<!-- <p class="text-lg font-semibold">Чат #{{ chat._id }}</p>-->
|
||||
<!-- <p class="text-gray-500">-->
|
||||
<!-- Последнее сообщение: {{ formatDate(chat.lastMessageDate) }}-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <Button-->
|
||||
<!-- label="Открыть"-->
|
||||
<!-- :to="`/manage/qr/${qrCodeDoc.uri}/chat/${chat._id}`"-->
|
||||
<!-- as="router-link"-->
|
||||
<!-- class="p-button-outlined p-button-sm"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-else class="text-center text-gray-500">-->
|
||||
<!-- <p>Нет активных чатов для этого QR-кода.</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">
|
||||
<p>
|
||||
Нужен еще один?
|
||||
<a href="/create" class="underline">Создайте QR‑код</a>.
|
||||
</p>
|
||||
<p class="mt-1">
|
||||
Сделайте НаСвязи удобнее. Будем рады вашей <a href="/donate" class="underline"
|
||||
>поддержке</a
|
||||
>.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -77,7 +107,6 @@
|
||||
import { computed } from 'vue'
|
||||
import type { QRCodeDocument } from '@hereconnect/types'
|
||||
import { getQrCodeDocument } from '@/api/qrCode'
|
||||
import CopyLinkButton from '@/components/CopyLinkButton.vue'
|
||||
|
||||
const props = defineProps<{ qr_code_uri: QRCodeDocument['uri'] }>()
|
||||
|
||||
|
||||
Reference in New Issue
Block a user