feat: TTLock integration + fix agent offline status
- Add TTLock electronic lock module: settings page, room-lock mapping, card issuance via agent command (ttlock:write_card) - Fix agent offline: EquipmentPage now polls every 30s + reacts to workstation:online/offline WebSocket events instantly - Backend broadcasts workstation online/offline events to hotel clients via existing WebSocket (agent-ws.ts) - New DB migration 048_ttlock.sql: hotel_ttlock_config, room_lock_mappings, card_issuances tables - New backend routes: GET/PATCH ttlock/config, POST ttlock/token, GET ttlock/locks, POST/DELETE ttlock/room-locks, POST issue-card - "Выдать ключ (TTLock)" button in BookingDetailPanel for confirmed/checked_in - TTLock page added to sidebar under Настройки Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
491
src/pages/TTLockPage.tsx
Normal file
491
src/pages/TTLockPage.tsx
Normal file
@@ -0,0 +1,491 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import {
|
||||
KeyRound, Save, RefreshCw, Check, X, AlertCircle, ChevronDown, ChevronRight,
|
||||
Trash2, Plus, Eye, EyeOff, Monitor, Wifi, WifiOff, Lock, Unlock,
|
||||
} from 'lucide-react'
|
||||
import { api, type TTLockConfig, type TTLockDevice, type RoomLockMapping, type Workstation } from '../lib/api'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import { cn } from '../lib/utils'
|
||||
import type { Room } from '../types'
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||||
|
||||
function Section({ title, children, defaultOpen = true }: {
|
||||
title: string
|
||||
children: React.ReactNode
|
||||
defaultOpen?: boolean
|
||||
}) {
|
||||
const [open, setOpen] = useState(defaultOpen)
|
||||
return (
|
||||
<div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
|
||||
<button
|
||||
onClick={() => setOpen(o => !o)}
|
||||
className="w-full flex items-center justify-between px-6 py-4 bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors text-left"
|
||||
>
|
||||
<span className="font-semibold text-slate-800 dark:text-slate-200">{title}</span>
|
||||
{open ? <ChevronDown size={16} className="text-slate-500" /> : <ChevronRight size={16} className="text-slate-500" />}
|
||||
</button>
|
||||
{open && <div className="p-6 bg-white dark:bg-slate-900">{children}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PasswordInput({ value, onChange, placeholder }: {
|
||||
value: string
|
||||
onChange: (v: string) => void
|
||||
placeholder?: string
|
||||
}) {
|
||||
const [show, setShow] = useState(false)
|
||||
return (
|
||||
<div className="relative">
|
||||
<input
|
||||
type={show ? 'text' : 'password'}
|
||||
value={value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="input pr-10 w-full"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShow(s => !s)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
|
||||
>
|
||||
{show ? <EyeOff size={15} /> : <Eye size={15} />}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Main Page ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export function TTLockPage() {
|
||||
const { user } = useAuth()
|
||||
const slug = user?.hotelSlug ?? ''
|
||||
|
||||
const [config, setConfig] = useState<TTLockConfig | null>(null)
|
||||
const [locks, setLocks] = useState<TTLockDevice[]>([])
|
||||
const [mappings, setMappings] = useState<RoomLockMapping[]>([])
|
||||
const [rooms, setRooms] = useState<Room[]>([])
|
||||
const [workstations, setWorkstations] = useState<Workstation[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [tokenLoading, setTokenLoading] = useState(false)
|
||||
const [locksLoading, setLocksLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [success, setSuccess] = useState<string | null>(null)
|
||||
|
||||
// Form state
|
||||
const [isEnabled, setIsEnabled] = useState(false)
|
||||
const [clientId, setClientId] = useState('')
|
||||
const [clientSecret, setClientSecret] = useState('')
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [workstationId, setWorkstationId] = useState<string>('')
|
||||
|
||||
// Room mapping
|
||||
const [selectedRoom, setSelectedRoom] = useState('')
|
||||
const [selectedLock, setSelectedLock] = useState<number | ''>('')
|
||||
const [mappingLoading, setMappingLoading] = useState(false)
|
||||
|
||||
const showSuccess = (msg: string) => {
|
||||
setSuccess(msg)
|
||||
setTimeout(() => setSuccess(null), 3000)
|
||||
}
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!slug) return
|
||||
setLoading(true)
|
||||
try {
|
||||
const [cfg, maps, roomList, wsList] = await Promise.all([
|
||||
api.ttlock.getConfig(slug),
|
||||
api.ttlock.getRoomLocks(slug),
|
||||
api.rooms.list(slug),
|
||||
api.workstations.list(slug),
|
||||
])
|
||||
setConfig(cfg)
|
||||
setIsEnabled(cfg.isEnabled)
|
||||
setClientId(cfg.clientId)
|
||||
setUsername(cfg.ttlockUsername)
|
||||
setWorkstationId(cfg.workstationId ?? '')
|
||||
setMappings(maps)
|
||||
setRooms(roomList)
|
||||
setWorkstations(wsList)
|
||||
} catch {
|
||||
setError('Не удалось загрузить настройки')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [slug])
|
||||
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
try {
|
||||
await api.ttlock.updateConfig(slug, {
|
||||
isEnabled,
|
||||
clientId: clientId.trim(),
|
||||
clientSecret: clientSecret.trim() || undefined,
|
||||
ttlockUsername: username.trim(),
|
||||
ttlockPassword: password.trim() || undefined,
|
||||
workstationId: workstationId || null,
|
||||
})
|
||||
showSuccess('Настройки сохранены')
|
||||
await load()
|
||||
} catch {
|
||||
setError('Ошибка сохранения')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleTestToken = async () => {
|
||||
setTokenLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const r = await api.ttlock.testToken(slug)
|
||||
showSuccess(`Авторизация успешна, токен действителен до ${new Date(r.expiresAt).toLocaleString('ru')}`)
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Ошибка авторизации в TTLock')
|
||||
} finally {
|
||||
setTokenLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleLoadLocks = async () => {
|
||||
setLocksLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const list = await api.ttlock.getLocks(slug)
|
||||
setLocks(list)
|
||||
if (list.length === 0) setError('Замки не найдены. Убедитесь, что замки добавлены в аккаунт TTLock.')
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Ошибка загрузки замков')
|
||||
} finally {
|
||||
setLocksLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleMapRoom = async () => {
|
||||
if (!selectedRoom || !selectedLock) return
|
||||
setMappingLoading(true)
|
||||
try {
|
||||
const lock = locks.find(l => l.lockId === selectedLock)
|
||||
await api.ttlock.mapRoom(slug, {
|
||||
roomId: selectedRoom,
|
||||
lockId: selectedLock as number,
|
||||
lockName: lock?.name,
|
||||
})
|
||||
setSelectedRoom('')
|
||||
setSelectedLock('')
|
||||
await load()
|
||||
showSuccess('Замок привязан к номеру')
|
||||
} catch {
|
||||
setError('Ошибка привязки')
|
||||
} finally {
|
||||
setMappingLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUnmap = async (roomId: string) => {
|
||||
try {
|
||||
await api.ttlock.unmapRoom(slug, roomId)
|
||||
await load()
|
||||
showSuccess('Привязка удалена')
|
||||
} catch {
|
||||
setError('Ошибка удаления привязки')
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<RefreshCw size={24} className="animate-spin text-brand-600" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const unmappedRooms = rooms.filter(r => !mappings.some(m => m.roomId === r.id))
|
||||
const onlineWorkstations = workstations.filter(w => w.isOnline)
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
|
||||
<KeyRound size={20} className="text-brand-600 dark:text-brand-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Электронные замки TTLock</h1>
|
||||
<p className="text-sm text-slate-500">Автоматическая выдача карт-ключей гостям при заезде</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status messages */}
|
||||
{error && (
|
||||
<div className="flex items-start gap-2 p-4 rounded-xl bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 text-sm">
|
||||
<AlertCircle size={16} className="mt-0.5 shrink-0" />
|
||||
<span>{error}</span>
|
||||
<button className="ml-auto" onClick={() => setError(null)}><X size={14} /></button>
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="flex items-center gap-2 p-4 rounded-xl bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 text-sm">
|
||||
<Check size={16} />
|
||||
<span>{success}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── API Credentials ── */}
|
||||
<Section title="Подключение к TTLock Open Platform">
|
||||
<div className="space-y-5">
|
||||
{/* Enable toggle */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium text-slate-800 dark:text-slate-200">Активировать модуль</p>
|
||||
<p className="text-xs text-slate-500 mt-0.5">Включает кнопку «Выдать ключ» в карточке бронирования</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsEnabled(e => !e)}
|
||||
className={cn(
|
||||
'relative w-11 h-6 rounded-full transition-colors',
|
||||
isEnabled ? 'bg-brand-500' : 'bg-slate-300 dark:bg-slate-600',
|
||||
)}
|
||||
>
|
||||
<span className={cn(
|
||||
'absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform',
|
||||
isEnabled && 'translate-x-5',
|
||||
)} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 text-sm text-blue-700 dark:text-blue-300">
|
||||
<p className="font-medium mb-1">Как получить Client ID и Secret</p>
|
||||
<ol className="list-decimal ml-4 space-y-1 text-xs">
|
||||
<li>Зарегистрируйтесь на <strong>euopen.ttlock.com</strong> (EU) или <strong>open.ttlock.com</strong></li>
|
||||
<li>Создайте приложение в разделе «My App»</li>
|
||||
<li>Скопируйте Client ID и Client Secret из настроек приложения</li>
|
||||
<li>Логин/пароль — это ваш аккаунт TTLock (мобильное приложение)</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="form-label">Client ID</label>
|
||||
<input
|
||||
type="text"
|
||||
value={clientId}
|
||||
onChange={e => setClientId(e.target.value)}
|
||||
placeholder="Из TTLock Open Platform"
|
||||
className="input w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label">Client Secret</label>
|
||||
<PasswordInput value={clientSecret} onChange={setClientSecret} placeholder="Оставьте пустым — не изменится" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label">Логин TTLock (email)</label>
|
||||
<input
|
||||
type="email"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
placeholder="admin@hotel.ru"
|
||||
className="input w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label">Пароль TTLock</label>
|
||||
<PasswordInput value={password} onChange={setPassword} placeholder="Оставьте пустым — не изменится" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Workstation selection */}
|
||||
<div>
|
||||
<label className="form-label">Рабочее место с картридером</label>
|
||||
<select
|
||||
value={workstationId}
|
||||
onChange={e => setWorkstationId(e.target.value)}
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="">— Выберите рабочее место —</option>
|
||||
{workstations.map(w => (
|
||||
<option key={w.id} value={w.id}>
|
||||
{w.name}
|
||||
{w.isOnline ? ' ✓ онлайн' : ' ✗ офлайн'}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{workstationId && !workstations.find(w => w.id === workstationId)?.isOnline && (
|
||||
<p className="text-xs text-amber-600 mt-1 flex items-center gap-1">
|
||||
<AlertCircle size={12} />
|
||||
Это рабочее место сейчас офлайн. Убедитесь, что агент запущен перед выдачей карт.
|
||||
</p>
|
||||
)}
|
||||
{onlineWorkstations.length === 0 && (
|
||||
<p className="text-xs text-red-500 mt-1">
|
||||
Нет онлайн-рабочих мест. Сначала подключите агент на Windows-компьютере с картридером.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<button onClick={handleSave} disabled={saving} className="btn-primary flex items-center gap-2">
|
||||
{saving ? <RefreshCw size={15} className="animate-spin" /> : <Save size={15} />}
|
||||
Сохранить
|
||||
</button>
|
||||
<button onClick={handleTestToken} disabled={tokenLoading || !clientId} className="btn-secondary flex items-center gap-2">
|
||||
{tokenLoading ? <RefreshCw size={15} className="animate-spin" /> : <Wifi size={15} />}
|
||||
Проверить подключение
|
||||
</button>
|
||||
{config?.hasToken && (
|
||||
<span className="text-xs text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
|
||||
<Check size={12} /> Токен активен
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* ── Room → Lock mapping ── */}
|
||||
<Section title="Привязка номеров к замкам">
|
||||
<div className="space-y-5">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Каждому номеру отеля назначается конкретный замок TTLock. При выдаче карты гостю
|
||||
система автоматически определит нужный замок по номеру бронирования.
|
||||
</p>
|
||||
|
||||
{/* Load locks button */}
|
||||
<div className="flex items-center gap-3">
|
||||
<button onClick={handleLoadLocks} disabled={locksLoading || !config?.hasToken} className="btn-secondary flex items-center gap-2">
|
||||
{locksLoading ? <RefreshCw size={15} className="animate-spin" /> : <RefreshCw size={15} />}
|
||||
Загрузить замки из TTLock
|
||||
</button>
|
||||
{locks.length > 0 && (
|
||||
<span className="text-xs text-slate-500">Найдено: {locks.length} замков</span>
|
||||
)}
|
||||
{!config?.hasToken && (
|
||||
<span className="text-xs text-amber-600">Сначала проверьте подключение к TTLock</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add mapping */}
|
||||
{locks.length > 0 && unmappedRooms.length > 0 && (
|
||||
<div className="flex items-end gap-3 p-4 bg-slate-50 dark:bg-slate-800/50 rounded-xl">
|
||||
<div className="flex-1">
|
||||
<label className="form-label">Номер</label>
|
||||
<select value={selectedRoom} onChange={e => setSelectedRoom(e.target.value)} className="input w-full">
|
||||
<option value="">— Выберите номер —</option>
|
||||
{unmappedRooms.map(r => (
|
||||
<option key={r.id} value={r.id}>{r.number} {r.name && `— ${r.name}`}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="form-label">Замок TTLock</label>
|
||||
<select
|
||||
value={selectedLock}
|
||||
onChange={e => setSelectedLock(e.target.value ? Number(e.target.value) : '')}
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="">— Выберите замок —</option>
|
||||
{locks.map(l => (
|
||||
<option key={l.lockId} value={l.lockId}>{l.name} (#{l.lockId})</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleMapRoom}
|
||||
disabled={!selectedRoom || !selectedLock || mappingLoading}
|
||||
className="btn-primary flex items-center gap-2 shrink-0"
|
||||
>
|
||||
{mappingLoading ? <RefreshCw size={15} className="animate-spin" /> : <Plus size={15} />}
|
||||
Привязать
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Current mappings */}
|
||||
{mappings.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{mappings.map(m => (
|
||||
<div key={m.roomId} className="flex items-center justify-between p-3 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-brand-50 dark:bg-brand-900/20 flex items-center justify-center">
|
||||
<Lock size={14} className="text-brand-600 dark:text-brand-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-800 dark:text-slate-200">
|
||||
Номер {m.roomNumber}{m.roomName ? ` — ${m.roomName}` : ''}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
{m.lockName ?? `Замок #${m.lockId}`}
|
||||
<span className="text-slate-400 ml-1">(ID: {m.lockId})</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleUnmap(m.roomId)}
|
||||
className="btn-ghost p-2 text-red-500 hover:text-red-700"
|
||||
title="Удалить привязку"
|
||||
>
|
||||
<Trash2 size={15} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-slate-400 dark:text-slate-600">
|
||||
<Unlock size={32} className="mx-auto mb-2 opacity-50" />
|
||||
<p className="text-sm">Нет привязанных замков</p>
|
||||
<p className="text-xs mt-1">Загрузите замки из TTLock и привяжите их к номерам</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* ── Agent instructions ── */}
|
||||
<Section title="Как работает интеграция (без шлюза)" defaultOpen={false}>
|
||||
<div className="space-y-4 text-sm text-slate-600 dark:text-slate-400">
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 text-blue-800 dark:text-blue-300">
|
||||
<p className="font-medium mb-2">Архитектура для замков без шлюза</p>
|
||||
<p className="text-xs mb-2">
|
||||
USB-программатор E3/E4 от TTLock требует подключения к интернету через шлюз G2/G3.
|
||||
Для автономных замков без шлюза карты программируются через <strong>Bluetooth</strong>:
|
||||
замок запоминает UID карты при непосредственном контакте.
|
||||
</p>
|
||||
<ol className="list-decimal ml-4 space-y-1 text-xs">
|
||||
<li>Менеджер прикладывает карту к считывателю на ресепшен</li>
|
||||
<li>Нажимает «Выдать ключ» в PMS → команда идёт агенту</li>
|
||||
<li>Агент через Bluetooth (адаптер в ПК) подключается к замку</li>
|
||||
<li>Замок считывает UID карты и записывает в свою память с датами доступа</li>
|
||||
<li>Карта работает у двери номера автономно, без интернета</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 dark:bg-slate-800 rounded-lg p-4">
|
||||
<p className="font-medium text-slate-700 dark:text-slate-300 mb-2">Требования к компьютеру ресепшена:</p>
|
||||
<ul className="space-y-1 text-xs list-disc ml-4">
|
||||
<li>Windows 10 или 11</li>
|
||||
<li>Bluetooth-адаптер (для BLE-соединения с замками, радиус ~10м)</li>
|
||||
<li>USB RFID/IC считыватель карт (для чтения UID карты гостя)</li>
|
||||
<li>Агент HotelSync версии 1.1.0 и выше с поддержкой BLE</li>
|
||||
<li>Замки синхронизированы с TTLock-аккаунтом через мобильное приложение</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4 text-amber-700 dark:text-amber-400">
|
||||
<p className="font-medium mb-1">Альтернатива: шлюз G2/G3</p>
|
||||
<p className="text-xs">
|
||||
Если установить шлюз TTLock, карты можно программировать через USB-программатор E3/E4
|
||||
удалённо через облако — без Bluetooth и без физического доступа к замку.
|
||||
Это более надёжный вариант для большого отеля.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TTLockPage
|
||||
Reference in New Issue
Block a user