445 lines
17 KiB
TypeScript
445 lines
17 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect, useCallback } from 'react'
|
||
import { Thermometer, Droplets, Wind, Calendar, Sun, CloudRain, Snowflake as SnowIcon, Cloud, CloudSun, Zap, Settings as SettingsIcon } 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'
|
||
|
||
type Tab = 'home' | 'devices' | 'calendar' | '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: [],
|
||
}
|
||
|
||
function getWeatherIcon(desc: string): string {
|
||
const d = desc?.toLowerCase() || ''
|
||
if (d.includes('ясно') || d.includes('солнеч')) return '☀️'
|
||
if (d.includes('облач')) return '⛅'
|
||
if (d.includes('пасмурн')) return '☁️'
|
||
if (d.includes('дождь') || d.includes('морос')) return '🌧️'
|
||
if (d.includes('снег')) return '❄️'
|
||
if (d.includes('гроз')) return '⛈️'
|
||
return '🌤️'
|
||
}
|
||
|
||
function formatEventTime(iso: string): string {
|
||
const d = new Date(iso)
|
||
return d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
|
||
}
|
||
|
||
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)' }
|
||
}
|
||
|
||
// ————— Home Tab —————
|
||
function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: SensorData | null }) {
|
||
const [todayEvents, setTodayEvents] = useState<CalendarEvent[]>([])
|
||
const [calLoading, setCalLoading] = useState(true)
|
||
|
||
useEffect(() => {
|
||
fetch('/api/calendar?range=today')
|
||
.then(r => r.json())
|
||
.then(d => setTodayEvents(d.events || []))
|
||
.catch(() => setTodayEvents([]))
|
||
.finally(() => setCalLoading(false))
|
||
}, [])
|
||
|
||
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 }}>
|
||
|
||
{/* Top row: Weather + Sensors side by side */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
||
|
||
{/* Weather Card */}
|
||
{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',
|
||
}}>
|
||
{/* Background decoration */}
|
||
<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 }}>
|
||
<span style={{ fontSize: 44 }}>{getWeatherIcon(weather.desc)}</span>
|
||
<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>
|
||
|
||
{/* Forecast mini */}
|
||
{weather.forecast && weather.forecast.length > 0 && (
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
{weather.forecast.slice(0, 3).map(day => {
|
||
const d = new Date(day.date)
|
||
const label = d.toLocaleDateString('ru-RU', { weekday: 'short' })
|
||
return (
|
||
<div key={day.date} style={{
|
||
flex: 1,
|
||
background: 'rgba(255,255,255,0.04)',
|
||
borderRadius: 14,
|
||
padding: '10px 8px',
|
||
textAlign: 'center',
|
||
border: '1px solid rgba(255,255,255,0.04)',
|
||
}}>
|
||
<div style={{ fontSize: 10, color: 'var(--text-secondary)', textTransform: 'capitalize', marginBottom: 4, fontWeight: 500 }}>{label}</div>
|
||
<div style={{ fontSize: 20, marginBottom: 4 }}>{getWeatherIcon(day.desc)}</div>
|
||
<div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{day.maxTemp}°</div>
|
||
<div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{day.minTemp}°</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Sensors Card */}
|
||
{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 }}>
|
||
{/* Temperature */}
|
||
<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>
|
||
|
||
{/* Humidity */}
|
||
<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>
|
||
|
||
{/* PM2.5 */}
|
||
<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>
|
||
|
||
{/* Today Events */}
|
||
<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>
|
||
)
|
||
}
|
||
|
||
export default function HomePage() {
|
||
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>({})
|
||
|
||
useEffect(() => {
|
||
const load = async () => {
|
||
try {
|
||
const r = await fetch('/api/weather')
|
||
const d = await r.json()
|
||
if (d.temp && d.temp !== '—') setWeather(d)
|
||
} catch {}
|
||
}
|
||
load()
|
||
const t = setInterval(load, 600_000)
|
||
return () => clearInterval(t)
|
||
}, [])
|
||
|
||
const loadHA = useCallback(async () => {
|
||
try {
|
||
const r = await fetch('/api/ha')
|
||
const d = await r.json()
|
||
if (d.states) setHaStates(d.states)
|
||
if (d.sensors) setSensors(d.sensors)
|
||
} catch {}
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
loadHA()
|
||
const t = setInterval(loadHA, 30_000)
|
||
return () => clearInterval(t)
|
||
}, [loadHA])
|
||
|
||
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
|
||
}
|
||
|
||
return (
|
||
<div style={{
|
||
display: 'flex',
|
||
height: '100dvh',
|
||
width: '100%',
|
||
background: 'var(--bg)',
|
||
overflow: 'hidden',
|
||
position: 'relative',
|
||
}}>
|
||
{/* Ambient background */}
|
||
<div className="bg-ambient" />
|
||
|
||
<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} />
|
||
|
||
{tab === 'home' && <HomeTab weather={weather} sensors={sensors} />}
|
||
|
||
{tab === 'devices' && (
|
||
<>
|
||
<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>
|
||
</>
|
||
)}
|
||
|
||
{tab === 'calendar' && <CalendarTab />}
|
||
|
||
{tab === 'settings' && (
|
||
<div style={{
|
||
flex: 1,
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
gap: 16,
|
||
color: 'var(--text-secondary)',
|
||
}}>
|
||
<div style={{
|
||
width: 72, height: 72, borderRadius: 22,
|
||
background: 'linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08))',
|
||
border: '1px solid rgba(129,140,248,0.15)',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
}}>
|
||
<SettingsIcon size={32} color="#818cf8" />
|
||
</div>
|
||
<span style={{ fontSize: 18, fontWeight: 600 }}>Настройки</span>
|
||
<span style={{ fontSize: 13 }}>Скоро</span>
|
||
</div>
|
||
)}
|
||
</main>
|
||
</div>
|
||
)
|
||
}
|