Add NetUP IPTV integration module (TV Welcome settings page)
- DB: migrations/002_netup.sql — netup_settings + netup_room_mapping tables - Backend: routes/netup.ts — GET/PATCH settings, POST test, GET/POST room mappings, POST send TV message; notifyNetupCheckin/Checkout helpers - Backend: bookings PATCH — fire-and-forget NetUP check-in/out on status change - Frontend: TvWelcomePage — connection settings tab + room mapping tab - Frontend: sidebarItem added to tv-welcome module (shows in sidebar menu) - Frontend: ModulesPage Settings button navigates to /tv-welcome - Frontend: BookingModal — "Сообщение гостю на TV" panel for existing bookings Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
362
src/pages/TvWelcomePage.tsx
Normal file
362
src/pages/TvWelcomePage.tsx
Normal file
@@ -0,0 +1,362 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Tv2, Plug, Map, CheckCircle2, XCircle, Loader2, Save, Eye, EyeOff } from 'lucide-react'
|
||||
import { cn } from '../lib/utils'
|
||||
import { api } from '../lib/api'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
|
||||
type Tab = 'connection' | 'rooms'
|
||||
|
||||
const LANGUAGES = [
|
||||
{ value: 'ru_RU', label: 'Русский' },
|
||||
{ value: 'en_US', label: 'English' },
|
||||
{ value: 'de_DE', label: 'Deutsch' },
|
||||
{ value: 'zh_CN', label: '中文' },
|
||||
{ value: 'ar_AE', label: 'العربية' },
|
||||
]
|
||||
|
||||
export function TvWelcomePage() {
|
||||
const { user } = useAuth()
|
||||
const slug = user?.hotelSlug ?? ''
|
||||
|
||||
const [tab, setTab] = useState<Tab>('connection')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [testing, setTesting] = useState(false)
|
||||
const [testResult, setTestResult] = useState<{ ok: boolean; msg: string } | null>(null)
|
||||
const [showPass, setShowPass] = useState(false)
|
||||
|
||||
// Connection settings
|
||||
const [serverUrl, setServerUrl] = useState('')
|
||||
const [username, setUsername] = useState('admin')
|
||||
const [password, setPassword] = useState('')
|
||||
const [language, setLanguage] = useState('ru_RU')
|
||||
const [enabled, setEnabled] = useState(true)
|
||||
const [settingsLoaded, setSettingsLoaded] = useState(false)
|
||||
|
||||
// Room mappings
|
||||
const [rooms, setRooms] = useState<{ id: string; number: string; type: string; netup_room_number: string }[]>([])
|
||||
const [roomsSaving, setRoomsSaving] = useState(false)
|
||||
const [roomsSaved, setRoomsSaved] = useState(false)
|
||||
|
||||
// Load settings
|
||||
useEffect(() => {
|
||||
if (!slug) return
|
||||
api.netup.getSettings(slug)
|
||||
.then(s => {
|
||||
setServerUrl(s.server_url)
|
||||
setUsername(s.username)
|
||||
setLanguage(s.default_language)
|
||||
setEnabled(s.enabled)
|
||||
setSettingsLoaded(true)
|
||||
})
|
||||
.catch(() => setSettingsLoaded(true))
|
||||
}, [slug])
|
||||
|
||||
// Load room mappings when tab switches
|
||||
useEffect(() => {
|
||||
if (tab !== 'rooms' || !slug) return
|
||||
api.netup.getRoomMappings(slug)
|
||||
.then(setRooms)
|
||||
.catch(() => {})
|
||||
}, [tab, slug])
|
||||
|
||||
const handleSaveConnection = async () => {
|
||||
setSaving(true)
|
||||
setTestResult(null)
|
||||
try {
|
||||
await api.netup.saveSettings(slug, {
|
||||
server_url: serverUrl,
|
||||
username,
|
||||
password: password || undefined,
|
||||
default_language: language,
|
||||
enabled,
|
||||
})
|
||||
setPassword('')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleTest = async () => {
|
||||
setTesting(true)
|
||||
setTestResult(null)
|
||||
try {
|
||||
await api.netup.saveSettings(slug, {
|
||||
server_url: serverUrl,
|
||||
username,
|
||||
password: password || undefined,
|
||||
default_language: language,
|
||||
enabled,
|
||||
})
|
||||
const res = await api.netup.testConnection(slug)
|
||||
setTestResult({ ok: true, msg: res.message })
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : 'Ошибка подключения'
|
||||
setTestResult({ ok: false, msg })
|
||||
} finally {
|
||||
setTesting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSaveRooms = async () => {
|
||||
setRoomsSaving(true)
|
||||
setRoomsSaved(false)
|
||||
try {
|
||||
await api.netup.saveRoomMappings(slug, rooms.map(r => ({
|
||||
pms_room_id: r.id,
|
||||
netup_room_number: r.netup_room_number,
|
||||
})))
|
||||
setRoomsSaved(true)
|
||||
setTimeout(() => setRoomsSaved(false), 2500)
|
||||
} finally {
|
||||
setRoomsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const updateRoomNetup = (id: string, val: string) =>
|
||||
setRooms(prev => prev.map(r => r.id === id ? { ...r, netup_room_number: val } : r))
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-3xl mx-auto space-y-6">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center shrink-0">
|
||||
<Tv2 size={20} className="text-violet-600 dark:text-violet-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Приветствие на TV</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">Интеграция с NetUP IPTV Middleware</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 p-1 bg-slate-100 dark:bg-slate-800 rounded-xl w-fit">
|
||||
{([
|
||||
{ id: 'connection', label: 'Подключение', icon: Plug },
|
||||
{ id: 'rooms', label: 'Сопоставление номеров', icon: Map },
|
||||
] as const).map(t => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => setTab(t.id)}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all',
|
||||
tab === t.id
|
||||
? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 shadow-sm'
|
||||
: 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300',
|
||||
)}
|
||||
>
|
||||
<t.icon size={14} />
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ── Tab: Connection ──────────────────────────────────────────────────── */}
|
||||
{tab === 'connection' && (
|
||||
<div className="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 p-6 space-y-5">
|
||||
|
||||
{/* Enabled toggle */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium text-slate-900 dark:text-slate-100">Интеграция включена</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
|
||||
При заселении/выезде автоматически уведомлять NetUP
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setEnabled(v => !v)}
|
||||
className={cn(
|
||||
'relative w-12 h-6 rounded-full transition-colors',
|
||||
enabled ? 'bg-violet-500' : 'bg-slate-300 dark:bg-slate-600',
|
||||
)}
|
||||
>
|
||||
<span className={cn(
|
||||
'absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform',
|
||||
enabled ? 'translate-x-6' : 'translate-x-0.5',
|
||||
)} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr className="border-slate-100 dark:border-slate-700" />
|
||||
|
||||
{/* Server URL */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Адрес сервера NetUP
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={serverUrl}
|
||||
onChange={e => setServerUrl(e.target.value)}
|
||||
placeholder="http://192.168.1.100:8880"
|
||||
className="input w-full font-mono text-sm"
|
||||
/>
|
||||
<p className="text-xs text-slate-400 dark:text-slate-500">
|
||||
Внешний адрес и порт, на который пробрасывается 172.16.0.12:80
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Credentials */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-slate-700 dark:text-slate-300">Логин</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
className="input w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-slate-700 dark:text-slate-300">Пароль</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPass ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
placeholder="Не изменять"
|
||||
className="input w-full pr-9"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPass(v => !v)}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
|
||||
>
|
||||
{showPass ? <EyeOff size={15} /> : <Eye size={15} />}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 dark:text-slate-500">Оставьте пустым, чтобы не менять</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Default language */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Язык по умолчанию
|
||||
</label>
|
||||
<select value={language} onChange={e => setLanguage(e.target.value)} className="input w-full">
|
||||
{LANGUAGES.map(l => (
|
||||
<option key={l.value} value={l.value}>{l.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<p className="text-xs text-slate-400 dark:text-slate-500">
|
||||
Язык меню на TV, если для гостя не указан язык
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Test result */}
|
||||
{testResult && (
|
||||
<div className={cn(
|
||||
'flex items-center gap-2 px-4 py-3 rounded-lg text-sm',
|
||||
testResult.ok
|
||||
? 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800'
|
||||
: 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-800',
|
||||
)}>
|
||||
{testResult.ok
|
||||
? <CheckCircle2 size={15} className="shrink-0" />
|
||||
: <XCircle size={15} className="shrink-0" />}
|
||||
{testResult.msg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-1">
|
||||
<button
|
||||
onClick={handleTest}
|
||||
disabled={testing || !serverUrl}
|
||||
className="btn-secondary flex items-center gap-2"
|
||||
>
|
||||
{testing ? <Loader2 size={14} className="animate-spin" /> : <Plug size={14} />}
|
||||
Проверить подключение
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveConnection}
|
||||
disabled={saving || !settingsLoaded}
|
||||
className="btn-primary flex items-center gap-2"
|
||||
>
|
||||
{saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Tab: Room Mapping ────────────────────────────────────────────────── */}
|
||||
{tab === 'rooms' && (
|
||||
<div className="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 overflow-hidden">
|
||||
<div className="px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<p className="font-medium text-slate-900 dark:text-slate-100">Сопоставление номеров</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
|
||||
Укажите номер в NetUP, соответствующий каждому номеру в PMS
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{rooms.length === 0 ? (
|
||||
<div className="px-5 py-8 text-center text-sm text-slate-400 dark:text-slate-500">
|
||||
Нет номеров. Сначала добавьте номера в разделе «Номера».
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-100 dark:border-slate-700">
|
||||
<th className="px-5 py-3 text-left font-medium text-slate-500 dark:text-slate-400">
|
||||
Номер в PMS
|
||||
</th>
|
||||
<th className="px-5 py-3 text-left font-medium text-slate-500 dark:text-slate-400">
|
||||
Тип
|
||||
</th>
|
||||
<th className="px-5 py-3 text-left font-medium text-slate-500 dark:text-slate-400">
|
||||
Номер в NetUP
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rooms.map((room, i) => (
|
||||
<tr
|
||||
key={room.id}
|
||||
className={cn(
|
||||
'border-b border-slate-50 dark:border-slate-700/50 last:border-0',
|
||||
i % 2 === 0 ? '' : 'bg-slate-50/50 dark:bg-slate-700/20',
|
||||
)}
|
||||
>
|
||||
<td className="px-5 py-3 font-medium text-slate-900 dark:text-slate-100">
|
||||
{room.number}
|
||||
</td>
|
||||
<td className="px-5 py-3 text-slate-500 dark:text-slate-400">
|
||||
{room.type}
|
||||
</td>
|
||||
<td className="px-5 py-3">
|
||||
<input
|
||||
type="text"
|
||||
value={room.netup_room_number}
|
||||
onChange={e => updateRoomNetup(room.id, e.target.value)}
|
||||
placeholder="Не задан"
|
||||
className="input py-1.5 w-36 text-sm"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
<div className="px-5 py-4 border-t border-slate-100 dark:border-slate-700 flex items-center gap-3">
|
||||
<button
|
||||
onClick={handleSaveRooms}
|
||||
disabled={roomsSaving || rooms.length === 0}
|
||||
className="btn-primary flex items-center gap-2"
|
||||
>
|
||||
{roomsSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
|
||||
Сохранить сопоставление
|
||||
</button>
|
||||
{roomsSaved && (
|
||||
<span className="flex items-center gap-1.5 text-sm text-emerald-600 dark:text-emerald-400">
|
||||
<CheckCircle2 size={14} /> Сохранено
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user