790 lines
37 KiB
TypeScript
790 lines
37 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect, useCallback, useRef } from 'react'
|
||
import { motion, AnimatePresence } from 'framer-motion'
|
||
import { Thermometer, Droplets, Wind, Calendar, Lock, Settings as SettingsIcon, LogOut, Delete, KeyRound, MapPin, Info, Check, X as XIcon } from 'lucide-react'
|
||
import Sidebar from '@/components/Sidebar'
|
||
import TopBar from '@/components/TopBar'
|
||
import RoomTabs from '@/components/RoomTabs'
|
||
import DeviceCard from '@/components/DeviceCard'
|
||
import CalendarTab from '@/components/CalendarTab'
|
||
import NotesTab from '@/components/NotesTab'
|
||
import WeatherAnimation from '@/components/WeatherAnimation'
|
||
|
||
type Tab = 'home' | 'devices' | 'calendar' | 'notes' | 'settings'
|
||
|
||
interface WeatherData {
|
||
temp: string
|
||
desc: string
|
||
humidity: string
|
||
windSpeed: string
|
||
feelsLike: string
|
||
forecast?: { date: string; maxTemp: string; minTemp: string; desc: string }[]
|
||
}
|
||
|
||
interface SensorData {
|
||
temperature: number
|
||
humidity: number
|
||
pm25: number
|
||
}
|
||
|
||
interface HaStates {
|
||
[key: string]: { state: string; attributes?: Record<string, any>; _mock?: boolean }
|
||
}
|
||
|
||
interface CalendarEvent {
|
||
id: string
|
||
title: string
|
||
start: string
|
||
end: string
|
||
allDay: boolean
|
||
owner: string
|
||
ownerName: string
|
||
color: string
|
||
}
|
||
|
||
const ROOMS = [
|
||
{ id: 'living', name: 'Гостиная', emoji: '🛋️', deviceCount: 3 },
|
||
{ id: 'bedroom', name: 'Спальня', emoji: '🛏️', deviceCount: 2 },
|
||
{ id: 'kitchen', name: 'Кухня', emoji: '🍳', deviceCount: 0 },
|
||
{ id: 'bathroom', name: 'Ванная', emoji: '🚿', deviceCount: 0 },
|
||
]
|
||
|
||
const DEVICES_BY_ROOM: Record<string, {
|
||
id: string; name: string; icon: string
|
||
entityId?: string; domain?: string; haKey?: string; isMock?: boolean
|
||
}[]> = {
|
||
living: [
|
||
{ id: 'air_purifier', name: 'Очиститель воздуха', icon: '💨', entityId: 'fan.zhimi_rmb1_9528_air_purifier', domain: 'fan', haKey: 'fan.air_purifier', isMock: false },
|
||
{ id: 'light_living', name: 'Свет', icon: '💡', entityId: 'light.living_room', domain: 'light', haKey: 'light.living_room', isMock: true },
|
||
{ id: 'tv', name: 'Телевизор', icon: '📺', isMock: true },
|
||
],
|
||
bedroom: [
|
||
{ id: 'light_bedroom', name: 'Свет', icon: '💡', entityId: 'light.bedroom', domain: 'light', haKey: 'light.bedroom', isMock: true },
|
||
{ id: 'ac', name: 'Кондиционер', icon: '❄️', isMock: true },
|
||
],
|
||
kitchen: [],
|
||
bathroom: [],
|
||
}
|
||
|
||
const CITIES = [
|
||
{ id: 'spb', name: 'Санкт-Петербург', lat: '59.9343', lon: '30.3351' },
|
||
{ id: 'msk', name: 'Москва', lat: '55.7558', lon: '37.6173' },
|
||
{ id: 'nsk', name: 'Новосибирск', lat: '55.0084', lon: '82.9357' },
|
||
{ id: 'ekb', name: 'Екатеринбург', lat: '56.8389', lon: '60.6057' },
|
||
{ id: 'kzn', name: 'Казань', lat: '55.7887', lon: '49.1221' },
|
||
{ id: 'sochi', name: 'Сочи', lat: '43.5855', lon: '39.7231' },
|
||
{ id: 'krd', name: 'Краснодар', lat: '45.0355', lon: '38.9753' },
|
||
]
|
||
|
||
function getWeatherIcon(desc: string): string {
|
||
const d = desc?.toLowerCase() || ''
|
||
if (d.includes('ясно') || d.includes('солнеч')) return '☀️'
|
||
if (d.includes('облач') || d.includes('перем')) return '⛅'
|
||
if (d.includes('пасмурн')) return '☁️'
|
||
if (d.includes('дождь') || d.includes('морос') || d.includes('ливен')) return '🌧️'
|
||
if (d.includes('снег')) return '🌨️'
|
||
if (d.includes('гроз')) return '⛈️'
|
||
if (d.includes('туман')) return '🌫️'
|
||
return '🌤️'
|
||
}
|
||
|
||
function formatEventTime(iso: string): string {
|
||
return new Date(iso).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
|
||
}
|
||
|
||
function getWeatherBgClass(desc: string | null): string {
|
||
if (!desc) return ''
|
||
const d = desc.toLowerCase()
|
||
const hour = new Date().getHours()
|
||
if (hour >= 22 || hour < 5) return 'weather-bg-night'
|
||
if (d.includes('гроз')) return 'weather-bg-thunder'
|
||
if (d.includes('снег')) return 'weather-bg-snow'
|
||
if (d.includes('дождь') || d.includes('ливен') || d.includes('морос')) return 'weather-bg-rain'
|
||
if (d.includes('пасмурн') || d.includes('облач') || d.includes('туман')) return 'weather-bg-cloudy'
|
||
return 'weather-bg-clear'
|
||
}
|
||
|
||
function getGreeting(): string {
|
||
const h = new Date().getHours()
|
||
if (h >= 5 && h < 12) return 'Доброе утро'
|
||
if (h >= 12 && h < 17) return 'Добрый день'
|
||
if (h >= 17 && h < 22) return 'Добрый вечер'
|
||
return 'Доброй ночи'
|
||
}
|
||
|
||
function getPm25Level(pm25: number): { label: string; color: string; bg: string } {
|
||
if (pm25 <= 12) return { label: 'Отлично', color: '#34d399', bg: 'rgba(52,211,153,0.12)' }
|
||
if (pm25 <= 35) return { label: 'Хорошо', color: '#a3e635', bg: 'rgba(163,230,53,0.12)' }
|
||
if (pm25 <= 55) return { label: 'Умеренно', color: '#fbbf24', bg: 'rgba(251,191,36,0.12)' }
|
||
return { label: 'Плохо', color: '#f87171', bg: 'rgba(248,113,113,0.12)' }
|
||
}
|
||
|
||
// ————— Screensaver —————
|
||
function Screensaver({ weather, onDismiss }: { weather: WeatherData | null; onDismiss: () => void }) {
|
||
const [time, setTime] = useState(new Date())
|
||
|
||
useEffect(() => {
|
||
const t = setInterval(() => setTime(new Date()), 1000)
|
||
return () => clearInterval(t)
|
||
}, [])
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
onClick={onDismiss}
|
||
onTouchStart={onDismiss}
|
||
style={{
|
||
position: 'fixed', inset: 0, zIndex: 200,
|
||
background: '#050510',
|
||
display: 'flex', flexDirection: 'column',
|
||
alignItems: 'center', justifyContent: 'center',
|
||
cursor: 'pointer', gap: 24,
|
||
}}
|
||
>
|
||
{/* Subtle ambient */}
|
||
<div style={{
|
||
position: 'absolute', width: 400, height: 400, borderRadius: '50%',
|
||
background: 'radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%)',
|
||
animation: 'float1 20s ease-in-out infinite',
|
||
}} />
|
||
|
||
{/* Time */}
|
||
<div style={{
|
||
fontSize: 120, fontWeight: 800, color: 'rgba(255,255,255,0.9)',
|
||
letterSpacing: '-6px', fontVariantNumeric: 'tabular-nums',
|
||
lineHeight: 1, textShadow: '0 0 60px rgba(99,102,241,0.2)',
|
||
}}>
|
||
{time.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
|
||
</div>
|
||
|
||
{/* Date */}
|
||
<div style={{
|
||
fontSize: 22, color: 'rgba(255,255,255,0.35)',
|
||
fontWeight: 500, textTransform: 'capitalize',
|
||
}}>
|
||
{time.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })}
|
||
</div>
|
||
|
||
{/* Weather mini */}
|
||
{weather && (
|
||
<div style={{
|
||
display: 'flex', alignItems: 'center', gap: 12,
|
||
marginTop: 16, color: 'rgba(255,255,255,0.3)',
|
||
}}>
|
||
<WeatherAnimation condition={weather.desc} size={36} />
|
||
<span style={{ fontSize: 24, fontWeight: 600 }}>{weather.temp}°</span>
|
||
<span style={{ fontSize: 16 }}>{weather.desc}</span>
|
||
</div>
|
||
)}
|
||
|
||
<div style={{
|
||
position: 'absolute', bottom: 40,
|
||
fontSize: 13, color: 'rgba(255,255,255,0.15)',
|
||
}}>
|
||
Коснитесь для разблокировки
|
||
</div>
|
||
</motion.div>
|
||
)
|
||
}
|
||
|
||
// ————— Lock Screen —————
|
||
function LockScreen({ onUnlock }: { onUnlock: () => void }) {
|
||
const [pin, setPin] = useState('')
|
||
const [error, setError] = useState(false)
|
||
const [loading, setLoading] = useState(false)
|
||
const [time, setTime] = useState(new Date())
|
||
|
||
useEffect(() => {
|
||
const t = setInterval(() => setTime(new Date()), 1000)
|
||
return () => clearInterval(t)
|
||
}, [])
|
||
|
||
const submit = async (fullPin: string) => {
|
||
setLoading(true); setError(false)
|
||
try {
|
||
const r = await fetch('/api/auth', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ pin: fullPin }),
|
||
})
|
||
if (r.ok) onUnlock()
|
||
else { setError(true); setPin(''); setTimeout(() => setError(false), 1500) }
|
||
} catch { setError(true); setPin('') }
|
||
finally { setLoading(false) }
|
||
}
|
||
|
||
const handleDigit = (d: string) => {
|
||
if (pin.length >= 6) return
|
||
const next = pin + d
|
||
setPin(next)
|
||
if (next.length === 4) submit(next)
|
||
}
|
||
|
||
const digits = ['1','2','3','4','5','6','7','8','9','','0','del']
|
||
|
||
return (
|
||
<div style={{
|
||
position: 'fixed', inset: 0, zIndex: 200, background: '#0c0c18',
|
||
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 40,
|
||
}}>
|
||
<div className="bg-ambient" />
|
||
<div style={{ textAlign: 'center', position: 'relative', zIndex: 1 }}>
|
||
<div style={{ fontSize: 64, fontWeight: 800, color: 'var(--text-primary)', letterSpacing: '-3px', fontVariantNumeric: 'tabular-nums' }}>
|
||
{time.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
|
||
</div>
|
||
<div style={{ fontSize: 16, color: 'var(--text-secondary)', marginTop: 4, textTransform: 'capitalize', fontWeight: 500 }}>
|
||
{time.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' })}
|
||
</div>
|
||
</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20, position: 'relative', zIndex: 1 }}>
|
||
<div style={{
|
||
width: 56, height: 56, borderRadius: 18,
|
||
background: error ? 'rgba(239,68,68,0.15)' : 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15))',
|
||
border: error ? '1px solid rgba(239,68,68,0.3)' : '1px solid rgba(129,140,248,0.25)',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.3s ease',
|
||
}}>
|
||
<Lock size={24} color={error ? '#f87171' : '#a5b4fc'} />
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 14 }}>
|
||
{[0,1,2,3].map(i => (
|
||
<div key={i} style={{
|
||
width: 14, height: 14, borderRadius: '50%',
|
||
background: i < pin.length ? (error ? '#f87171' : '#a5b4fc') : 'rgba(255,255,255,0.1)',
|
||
border: `1px solid ${i < pin.length ? (error ? 'rgba(239,68,68,0.5)' : 'rgba(165,180,252,0.5)') : 'rgba(255,255,255,0.15)'}`,
|
||
transition: 'all 0.2s ease', transform: i < pin.length ? 'scale(1.15)' : 'scale(1)',
|
||
}} />
|
||
))}
|
||
</div>
|
||
{error && <div style={{ fontSize: 13, color: '#f87171', fontWeight: 500 }}>Неверный PIN</div>}
|
||
</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, position: 'relative', zIndex: 1 }}>
|
||
{digits.map((d, i) => {
|
||
if (d === '') return <div key={i} />
|
||
if (d === 'del') return (
|
||
<button key={i} onClick={() => setPin(p => p.slice(0, -1))} style={{
|
||
width: 72, height: 72, borderRadius: 20, background: 'rgba(255,255,255,0.03)',
|
||
border: '1px solid rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
color: 'var(--text-secondary)', transition: 'all 0.15s ease',
|
||
}}><Delete size={22} /></button>
|
||
)
|
||
return (
|
||
<button key={i} onClick={() => handleDigit(d)} style={{
|
||
width: 72, height: 72, borderRadius: 20, background: 'rgba(255,255,255,0.04)',
|
||
border: '1px solid rgba(255,255,255,0.07)', fontSize: 24, fontWeight: 600,
|
||
color: 'var(--text-primary)', transition: 'all 0.15s ease',
|
||
}}>{d}</button>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ————— Home Tab —————
|
||
function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: SensorData | null }) {
|
||
const [todayEvents, setTodayEvents] = useState<CalendarEvent[]>([])
|
||
const [calLoading, setCalLoading] = useState(true)
|
||
const [greeting, setGreeting] = useState(getGreeting())
|
||
|
||
useEffect(() => {
|
||
fetch('/api/calendar?range=today')
|
||
.then(r => r.json())
|
||
.then(d => setTodayEvents(d.events || []))
|
||
.catch(() => setTodayEvents([]))
|
||
.finally(() => setCalLoading(false))
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
const t = setInterval(() => setGreeting(getGreeting()), 60000)
|
||
return () => clearInterval(t)
|
||
}, [])
|
||
|
||
const pm25Info = sensors ? getPm25Level(sensors.pm25) : null
|
||
|
||
return (
|
||
<div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' as any, padding: '20px 24px 28px', display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||
{/* Greeting */}
|
||
<div style={{ marginBottom: 4 }}>
|
||
<h1 style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-primary)', letterSpacing: '-0.5px', margin: 0 }}>
|
||
{greeting} 👋
|
||
</h1>
|
||
<p style={{ fontSize: 14, color: 'var(--text-secondary)', marginTop: 4, fontWeight: 400 }}>
|
||
Вот что происходит дома
|
||
</p>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
||
{weather && (
|
||
<div style={{
|
||
background: 'linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.06))',
|
||
backdropFilter: 'blur(20px)', border: '1px solid rgba(129,140,248,0.12)',
|
||
borderRadius: 22, padding: '22px 24px', position: 'relative', overflow: 'hidden',
|
||
}}>
|
||
<div style={{ position: 'absolute', top: -20, right: -10, fontSize: 80, opacity: 0.12, pointerEvents: 'none' }}>{getWeatherIcon(weather.desc)}</div>
|
||
<div style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 16 }}>Погода</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 18, position: 'relative', zIndex: 1 }}>
|
||
<WeatherAnimation condition={weather.desc} size={56} />
|
||
<div>
|
||
<div style={{ fontSize: 36, fontWeight: 800, color: 'var(--text-primary)', lineHeight: 1, letterSpacing: '-2px' }}>{weather.temp}°</div>
|
||
<div style={{ fontSize: 14, color: 'var(--text-secondary)', marginTop: 4, fontWeight: 500 }}>{weather.desc}</div>
|
||
</div>
|
||
</div>
|
||
{weather.forecast && weather.forecast.length > 0 && (
|
||
<div style={{ display: 'flex', gap: 6, overflowX: 'auto', WebkitOverflowScrolling: 'touch' as any, scrollbarWidth: 'none' as any, msOverflowStyle: 'none' as any, paddingBottom: 2 }}>
|
||
{weather.forecast.map((day, idx) => {
|
||
const d = new Date(day.date)
|
||
const isToday = idx === 0
|
||
return (
|
||
<div key={day.date} style={{
|
||
minWidth: 58, background: isToday ? 'rgba(99,102,241,0.1)' : 'rgba(255,255,255,0.04)',
|
||
borderRadius: 12, padding: '8px 6px', textAlign: 'center',
|
||
border: isToday ? '1px solid rgba(129,140,248,0.2)' : '1px solid rgba(255,255,255,0.04)',
|
||
flexShrink: 0,
|
||
}}>
|
||
<div style={{ fontSize: 9, color: isToday ? '#a5b4fc' : 'var(--text-secondary)', textTransform: 'capitalize', marginBottom: 3, fontWeight: 600 }}>
|
||
{isToday ? 'Сегодня' : d.toLocaleDateString('ru-RU', { weekday: 'short' })}
|
||
</div>
|
||
<div style={{ fontSize: 16, marginBottom: 3 }}>{getWeatherIcon(day.desc)}</div>
|
||
<div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)' }}>{day.maxTemp}°</div>
|
||
<div style={{ fontSize: 10, color: 'var(--text-secondary)' }}>{day.minTemp}°</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
{sensors && (
|
||
<div style={{ background: 'rgba(255,255,255,0.03)', backdropFilter: 'blur(20px)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 22, padding: '22px 24px' }}>
|
||
<div style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 16 }}>Климат в квартире</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
|
||
<div style={{ width: 48, height: 48, borderRadius: 16, background: 'linear-gradient(135deg, rgba(251,146,60,0.15), rgba(245,158,11,0.08))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Thermometer size={22} color="#fb923c" /></div>
|
||
<div><div style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{sensors.temperature}°C</div><div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>Температура</div></div>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
|
||
<div style={{ width: 48, height: 48, borderRadius: 16, background: 'linear-gradient(135deg, rgba(59,130,246,0.15), rgba(99,102,241,0.08))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Droplets size={22} color="#3b82f6" /></div>
|
||
<div><div style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{sensors.humidity}%</div><div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>Влажность</div></div>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
|
||
<div style={{ width: 48, height: 48, borderRadius: 16, background: pm25Info?.bg || 'rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Wind size={22} color={pm25Info?.color || '#999'} /></div>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}><span style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{sensors.pm25}</span><span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>µg/m³</span></div>
|
||
<div style={{ fontSize: 12, color: pm25Info?.color, marginTop: 2, fontWeight: 500 }}>PM2.5 · {pm25Info?.label}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div style={{ background: 'rgba(255,255,255,0.03)', backdropFilter: 'blur(20px)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 22, padding: '22px 24px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
|
||
<Calendar size={15} color="var(--text-secondary)" />
|
||
<span style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>Сегодня</span>
|
||
</div>
|
||
{calLoading ? (
|
||
<div style={{ fontSize: 14, color: 'var(--text-secondary)' }}>Загрузка...</div>
|
||
) : todayEvents.length === 0 ? (
|
||
<div style={{ fontSize: 15, color: 'var(--text-secondary)', textAlign: 'center', padding: '12px 0' }}>Нет событий на сегодня</div>
|
||
) : (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||
{todayEvents.map(ev => (
|
||
<div key={ev.id} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 16px', borderRadius: 14, background: `${ev.color}0a`, border: `1px solid ${ev.color}18` }}>
|
||
<div style={{ width: 4, borderRadius: 2, background: ev.color, alignSelf: 'stretch', minHeight: 36, flexShrink: 0 }} />
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{ev.title}</div>
|
||
<div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 3, display: 'flex', gap: 8 }}>
|
||
<span>{ev.allDay ? 'Весь день' : `${formatEventTime(ev.start)} — ${formatEventTime(ev.end)}`}</span>
|
||
<span style={{ color: ev.color, fontWeight: 500 }}>{ev.ownerName}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ————— Settings Tab —————
|
||
function SettingsTab({ city, onCityChange, onLogout, theme, onThemeChange }: { city: string; onCityChange: (id: string) => void; onLogout: () => void; theme: string; onThemeChange: (t: string) => void }) {
|
||
const [showPinChange, setShowPinChange] = useState(false)
|
||
const [oldPin, setOldPin] = useState('')
|
||
const [newPin, setNewPin] = useState('')
|
||
const [pinMsg, setPinMsg] = useState<{ text: string; ok: boolean } | null>(null)
|
||
const [pinSaving, setPinSaving] = useState(false)
|
||
|
||
const changePIN = async () => {
|
||
if (!oldPin || !newPin) { setPinMsg({ text: 'Заполните оба поля', ok: false }); return }
|
||
if (newPin.length < 4) { setPinMsg({ text: 'Минимум 4 цифры', ok: false }); return }
|
||
setPinSaving(true); setPinMsg(null)
|
||
try {
|
||
const r = await fetch('/api/auth', {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ oldPin, newPin }),
|
||
})
|
||
const d = await r.json()
|
||
if (d.error) throw new Error(d.error === 'wrong_pin' ? 'Неверный старый PIN' : d.error)
|
||
setPinMsg({ text: 'PIN изменён', ok: true })
|
||
setOldPin(''); setNewPin('')
|
||
setTimeout(() => { setShowPinChange(false); setPinMsg(null) }, 1500)
|
||
} catch (e: any) { setPinMsg({ text: e.message, ok: false }) }
|
||
finally { setPinSaving(false) }
|
||
}
|
||
|
||
const inputStyle: React.CSSProperties = {
|
||
padding: '14px 18px', borderRadius: 14, width: '100%',
|
||
background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.07)',
|
||
color: 'var(--text-primary)', fontSize: 15, outline: 'none', fontFamily: 'inherit',
|
||
textAlign: 'center', letterSpacing: '4px',
|
||
}
|
||
|
||
const currentCity = CITIES.find(c => c.id === city) || CITIES[0]
|
||
|
||
return (
|
||
<div style={{ flex: 1, overflowY: 'auto', padding: '24px', display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 560, margin: '0 auto', width: '100%' }}>
|
||
<h2 style={{ fontSize: 24, fontWeight: 800, color: 'var(--text-primary)', margin: '0 0 8px', letterSpacing: '-0.5px' }}>Настройки</h2>
|
||
|
||
{/* City selector */}
|
||
<div style={{ background: 'var(--card-bg)', border: '1px solid var(--card-border)', borderRadius: 22, padding: '22px 24px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
|
||
<MapPin size={18} color="#818cf8" />
|
||
<span style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>Город</span>
|
||
</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
|
||
{CITIES.map(c => {
|
||
const isActive = city === c.id
|
||
return (
|
||
<button key={c.id} onClick={() => onCityChange(c.id)} style={{
|
||
padding: '12px 16px', borderRadius: 14, textAlign: 'left',
|
||
background: isActive ? 'rgba(99,102,241,0.12)' : 'rgba(255,255,255,0.02)',
|
||
border: `1px solid ${isActive ? 'rgba(129,140,248,0.25)' : 'rgba(255,255,255,0.05)'}`,
|
||
color: isActive ? '#a5b4fc' : 'var(--text-secondary)',
|
||
fontSize: 14, fontWeight: isActive ? 600 : 500,
|
||
transition: 'all 0.25s ease',
|
||
display: 'flex', alignItems: 'center', gap: 8,
|
||
}}>
|
||
{isActive && <Check size={14} />}
|
||
{c.name}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Theme */}
|
||
<div style={{ background: 'var(--card-bg)', border: '1px solid var(--card-border)', borderRadius: 22, padding: '22px 24px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
<span style={{ fontSize: 18 }}>{theme === 'dark' ? '🌙' : '☀️'}</span>
|
||
<span style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>Тема</span>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 6 }}>
|
||
{[
|
||
{ id: 'dark', label: 'Тёмная' },
|
||
{ id: 'light', label: 'Светлая' },
|
||
].map(t => (
|
||
<button key={t.id} onClick={() => onThemeChange(t.id)} style={{
|
||
padding: '8px 16px', borderRadius: 12,
|
||
background: theme === t.id ? 'rgba(99,102,241,0.12)' : 'rgba(255,255,255,0.02)',
|
||
border: theme === t.id ? '1px solid rgba(129,140,248,0.25)' : '1px solid var(--card-border)',
|
||
color: theme === t.id ? '#a5b4fc' : 'var(--text-secondary)',
|
||
fontSize: 13, fontWeight: theme === t.id ? 600 : 500,
|
||
transition: 'all 0.25s ease',
|
||
}}>
|
||
{t.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* PIN change */}
|
||
<div style={{ background: 'var(--card-bg)', border: '1px solid var(--card-border)', borderRadius: 22, padding: '22px 24px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
<KeyRound size={18} color="#818cf8" />
|
||
<span style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>PIN-код</span>
|
||
</div>
|
||
<button onClick={() => setShowPinChange(v => !v)} style={{
|
||
padding: '8px 16px', borderRadius: 12,
|
||
background: showPinChange ? 'rgba(255,255,255,0.04)' : 'rgba(99,102,241,0.1)',
|
||
border: `1px solid ${showPinChange ? 'rgba(255,255,255,0.06)' : 'rgba(129,140,248,0.2)'}`,
|
||
color: showPinChange ? 'var(--text-secondary)' : '#a5b4fc',
|
||
fontSize: 13, fontWeight: 600,
|
||
}}>
|
||
{showPinChange ? 'Отмена' : 'Изменить'}
|
||
</button>
|
||
</div>
|
||
|
||
{showPinChange && (
|
||
<div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||
<input
|
||
type="password" inputMode="numeric" maxLength={8}
|
||
value={oldPin} onChange={e => setOldPin(e.target.value.replace(/\D/g, ''))}
|
||
placeholder="Старый PIN" style={inputStyle}
|
||
/>
|
||
<input
|
||
type="password" inputMode="numeric" maxLength={8}
|
||
value={newPin} onChange={e => setNewPin(e.target.value.replace(/\D/g, ''))}
|
||
placeholder="Новый PIN" style={inputStyle}
|
||
/>
|
||
{pinMsg && (
|
||
<div style={{
|
||
fontSize: 13, padding: '10px 14px', borderRadius: 12, fontWeight: 500,
|
||
background: pinMsg.ok ? 'rgba(52,211,153,0.08)' : 'rgba(239,68,68,0.08)',
|
||
color: pinMsg.ok ? '#34d399' : '#f87171',
|
||
display: 'flex', alignItems: 'center', gap: 8,
|
||
}}>
|
||
{pinMsg.ok ? <Check size={14} /> : <XIcon size={14} />} {pinMsg.text}
|
||
</div>
|
||
)}
|
||
<button onClick={changePIN} disabled={pinSaving} style={{
|
||
padding: '14px', borderRadius: 14,
|
||
background: 'linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.2))',
|
||
border: '1px solid rgba(129,140,248,0.3)',
|
||
color: '#a5b4fc', fontSize: 14, fontWeight: 600,
|
||
}}>
|
||
{pinSaving ? 'Сохранение...' : 'Сохранить PIN'}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Lock screen */}
|
||
<button onClick={() => { const e = new CustomEvent('activate-screensaver'); window.dispatchEvent(e) }} style={{
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
|
||
padding: '16px', borderRadius: 18,
|
||
background: 'rgba(99,102,241,0.08)',
|
||
border: '1px solid rgba(129,140,248,0.15)',
|
||
color: '#a5b4fc', fontSize: 15, fontWeight: 600,
|
||
transition: 'all 0.25s ease',
|
||
}}>
|
||
<Lock size={18} />
|
||
Режим часов
|
||
</button>
|
||
|
||
{/* Logout */}
|
||
<button onClick={onLogout} style={{
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
|
||
padding: '16px', borderRadius: 18,
|
||
background: 'rgba(239,68,68,0.06)',
|
||
border: '1px solid rgba(239,68,68,0.15)',
|
||
color: '#f87171', fontSize: 15, fontWeight: 600,
|
||
transition: 'all 0.25s ease', marginTop: 8,
|
||
}}>
|
||
<LogOut size={18} />
|
||
Выйти из аккаунта
|
||
</button>
|
||
|
||
{/* Info */}
|
||
<div style={{ textAlign: 'center', padding: '16px 0', color: 'var(--text-tertiary)', fontSize: 12 }}>
|
||
Smart Home Dashboard v1.0 · {currentCity.name}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ————— Tab animation variants —————
|
||
const tabVariants = {
|
||
enter: { opacity: 0, y: 12 },
|
||
center: { opacity: 1, y: 0 },
|
||
exit: { opacity: 0, y: -8 },
|
||
}
|
||
|
||
// ————— Main —————
|
||
function HomePageInner() {
|
||
const [unlocked, setUnlocked] = useState<boolean | null>(null)
|
||
const [tab, setTab] = useState<Tab>('home')
|
||
const [activeRoom, setActiveRoom] = useState('living')
|
||
const [weather, setWeather] = useState<WeatherData | null>(null)
|
||
const [sensors, setSensors] = useState<SensorData | null>(null)
|
||
const [haStates, setHaStates] = useState<HaStates>({})
|
||
const [haConnected, setHaConnected] = useState(false)
|
||
const [city, setCity] = useState(() => {
|
||
if (typeof window !== 'undefined') return localStorage.getItem('tablet-city') || 'spb'
|
||
return 'spb'
|
||
})
|
||
const [screensaverActive, setScreensaverActive] = useState(false)
|
||
const [theme, setTheme] = useState(() => {
|
||
if (typeof window !== 'undefined') return localStorage.getItem('tablet-theme') || 'dark'
|
||
return 'dark'
|
||
})
|
||
const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||
|
||
// Theme
|
||
useEffect(() => {
|
||
document.documentElement.className = theme
|
||
localStorage.setItem('tablet-theme', theme)
|
||
}, [theme])
|
||
|
||
// Auth check
|
||
useEffect(() => {
|
||
fetch('/api/auth')
|
||
.then(r => r.json())
|
||
.then(d => setUnlocked(d.authenticated))
|
||
.catch(() => setUnlocked(false))
|
||
}, [])
|
||
|
||
// City change
|
||
const handleCityChange = (id: string) => {
|
||
setCity(id)
|
||
localStorage.setItem('tablet-city', id)
|
||
}
|
||
|
||
// Weather
|
||
useEffect(() => {
|
||
if (!unlocked) return
|
||
const c = CITIES.find(x => x.id === city) || CITIES[0]
|
||
const load = async () => {
|
||
try {
|
||
const r = await fetch(`/api/weather?lat=${c.lat}&lon=${c.lon}`)
|
||
const d = await r.json()
|
||
if (d.temp && d.temp !== '—') setWeather(d)
|
||
} catch {}
|
||
}
|
||
load()
|
||
const t = setInterval(load, 600_000)
|
||
return () => clearInterval(t)
|
||
}, [unlocked, city])
|
||
|
||
// HA
|
||
const loadHA = useCallback(async () => {
|
||
try {
|
||
const r = await fetch('/api/ha')
|
||
const d = await r.json()
|
||
if (d.states) { setHaStates(d.states); setHaConnected(true) }
|
||
if (d.sensors) setSensors(d.sensors)
|
||
} catch { setHaConnected(false) }
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (!unlocked) return
|
||
loadHA()
|
||
const t = setInterval(loadHA, 30_000)
|
||
return () => clearInterval(t)
|
||
}, [loadHA, unlocked])
|
||
|
||
// Listen for manual screensaver activation
|
||
useEffect(() => {
|
||
const handler = () => setScreensaverActive(true)
|
||
window.addEventListener('activate-screensaver', handler)
|
||
return () => window.removeEventListener('activate-screensaver', handler)
|
||
}, [])
|
||
|
||
// Screensaver idle detection
|
||
const resetIdle = useCallback(() => {
|
||
if (screensaverActive) return // don't reset timer while screensaver is active
|
||
if (idleTimer.current) clearTimeout(idleTimer.current)
|
||
idleTimer.current = setTimeout(() => setScreensaverActive(true), 2 * 60 * 1000) // 2 min
|
||
}, [screensaverActive])
|
||
|
||
useEffect(() => {
|
||
if (!unlocked) return
|
||
const events = ['mousedown', 'mousemove', 'touchstart', 'keydown', 'scroll']
|
||
events.forEach(e => window.addEventListener(e, resetIdle, { passive: true }))
|
||
resetIdle()
|
||
return () => {
|
||
events.forEach(e => window.removeEventListener(e, resetIdle))
|
||
if (idleTimer.current) clearTimeout(idleTimer.current)
|
||
}
|
||
}, [unlocked, resetIdle])
|
||
|
||
const devicesInRoom = DEVICES_BY_ROOM[activeRoom] || []
|
||
const getDeviceState = (haKey?: string): boolean => {
|
||
if (!haKey || !haStates[haKey]) return false
|
||
return haStates[haKey].state === 'on'
|
||
}
|
||
const getDeviceExtra = (id: string): string | undefined => {
|
||
if (id === 'air_purifier' && sensors) return `PM2.5: ${sensors.pm25}`
|
||
return undefined
|
||
}
|
||
|
||
const handleLogout = async () => {
|
||
await fetch('/api/auth', { method: 'DELETE' })
|
||
window.location.reload()
|
||
}
|
||
|
||
if (unlocked === null) {
|
||
return <div style={{ display: 'flex', height: '100dvh', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}><div className="bg-ambient" /></div>
|
||
}
|
||
if (!unlocked) {
|
||
return <LockScreen onUnlock={() => setUnlocked(true)} />
|
||
}
|
||
|
||
return (
|
||
<div className={getWeatherBgClass(weather?.desc || null)} style={{ display: 'flex', height: '100dvh', width: '100%', background: 'var(--bg)', overflow: 'hidden', position: 'relative' }}>
|
||
<div className="bg-ambient" />
|
||
|
||
<AnimatePresence>
|
||
{screensaverActive && (
|
||
<Screensaver weather={weather} onDismiss={() => setScreensaverActive(false)} />
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<Sidebar active={tab} onChange={setTab} />
|
||
|
||
<main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0, position: 'relative', zIndex: 1 }}>
|
||
<TopBar weather={weather} sensors={sensors} haConnected={haConnected} />
|
||
|
||
<AnimatePresence mode="wait">
|
||
{tab === 'home' && (
|
||
<motion.div key="home" variants={tabVariants} initial="enter" animate="center" exit="exit" transition={{ duration: 0.2 }} style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||
<HomeTab weather={weather} sensors={sensors} />
|
||
</motion.div>
|
||
)}
|
||
|
||
{tab === 'devices' && (
|
||
<motion.div key="devices" variants={tabVariants} initial="enter" animate="center" exit="exit" transition={{ duration: 0.2 }} style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||
<RoomTabs rooms={ROOMS} active={activeRoom} onChange={setActiveRoom} />
|
||
<div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' as any, padding: '16px 24px 28px' }}>
|
||
{devicesInRoom.length === 0 ? (
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: 220, color: 'var(--text-secondary)', gap: 12 }}>
|
||
<div style={{ width: 64, height: 64, borderRadius: 20, background: 'rgba(255,255,255,0.04)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28 }}>🏠</div>
|
||
<span style={{ fontSize: 15, fontWeight: 500 }}>Устройства не добавлены</span>
|
||
</div>
|
||
) : (
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
|
||
{devicesInRoom.map(device => (
|
||
<DeviceCard key={device.id} id={device.id} name={device.name} icon={device.icon} entityId={device.entityId} domain={device.domain} initialState={getDeviceState(device.haKey)} isMock={device.isMock} extraInfo={getDeviceExtra(device.id)} />
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{tab === 'calendar' && (
|
||
<motion.div key="calendar" variants={tabVariants} initial="enter" animate="center" exit="exit" transition={{ duration: 0.2 }} style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
||
<CalendarTab />
|
||
</motion.div>
|
||
)}
|
||
|
||
{tab === 'notes' && (
|
||
<motion.div key="notes" variants={tabVariants} initial="enter" animate="center" exit="exit" transition={{ duration: 0.2 }} style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||
<NotesTab />
|
||
</motion.div>
|
||
)}
|
||
|
||
{tab === 'settings' && (
|
||
<motion.div key="settings" variants={tabVariants} initial="enter" animate="center" exit="exit" transition={{ duration: 0.2 }} style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||
<SettingsTab city={city} onCityChange={handleCityChange} onLogout={handleLogout} theme={theme} onThemeChange={setTheme} />
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</main>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function HomePage() {
|
||
return <HomePageInner />
|
||
}
|