395 lines
13 KiB
TypeScript
395 lines
13 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect, useCallback } from '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 getWeatherEmoji(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' })
|
||
}
|
||
|
||
// ————— 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))
|
||
}, [])
|
||
|
||
return (
|
||
<div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' as any, padding: '16px 20px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||
|
||
{/* Today Widget */}
|
||
<div style={{
|
||
background: 'var(--card-bg)',
|
||
border: '1px solid var(--card-border)',
|
||
borderRadius: 20,
|
||
padding: '18px 20px',
|
||
}}>
|
||
<div style={{ fontSize: 12, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 14 }}>
|
||
📅 Сегодня
|
||
</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: '8px 0' }}>
|
||
Свободный день 🎉
|
||
</div>
|
||
) : (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||
{todayEvents.map(ev => (
|
||
<div key={ev.id} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
|
||
<div style={{ width: 3, borderRadius: 2, background: ev.color, alignSelf: 'stretch', minHeight: 32, 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: 2, display: 'flex', gap: 6 }}>
|
||
<span>{ev.allDay ? 'Весь день' : `${formatEventTime(ev.start)} — ${formatEventTime(ev.end)}`}</span>
|
||
<span style={{ color: ev.color }}>{ev.ownerName}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Weather Widget */}
|
||
{weather && (
|
||
<div style={{
|
||
background: 'var(--card-bg)',
|
||
border: '1px solid var(--card-border)',
|
||
borderRadius: 20,
|
||
padding: '18px 20px',
|
||
}}>
|
||
<div style={{ fontSize: 12, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 14 }}>
|
||
🌤️ Погода
|
||
</div>
|
||
|
||
{/* Current */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
|
||
<span style={{ fontSize: 44 }}>{getWeatherEmoji(weather.desc)}</span>
|
||
<div>
|
||
<div style={{ fontSize: 32, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>{weather.temp}°C</div>
|
||
<div style={{ fontSize: 14, color: 'var(--text-secondary)', marginTop: 4 }}>{weather.desc}</div>
|
||
<div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>
|
||
💧 {weather.humidity}% · 💨 {weather.windSpeed} км/ч · Ощущается {weather.feelsLike}°
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Forecast */}
|
||
{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: 12,
|
||
padding: '10px 8px',
|
||
textAlign: 'center',
|
||
border: '1px solid rgba(255,255,255,0.06)',
|
||
}}>
|
||
<div style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'capitalize', marginBottom: 4 }}>{label}</div>
|
||
<div style={{ fontSize: 20, marginBottom: 4 }}>{getWeatherEmoji(day.desc)}</div>
|
||
<div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)' }}>{day.maxTemp}°</div>
|
||
<div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{day.minTemp}°</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Sensors Widget */}
|
||
{sensors && (
|
||
<div style={{
|
||
background: 'var(--card-bg)',
|
||
border: '1px solid var(--card-border)',
|
||
borderRadius: 20,
|
||
padding: '18px 20px',
|
||
}}>
|
||
<div style={{ fontSize: 12, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 14 }}>
|
||
📊 Датчики квартиры
|
||
</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
|
||
{[
|
||
{ label: 'Температура', value: `${sensors.temperature}°C`, icon: '🌡️' },
|
||
{ label: 'Влажность', value: `${sensors.humidity}%`, icon: '💧' },
|
||
{ label: 'PM2.5', value: `${sensors.pm25} μg`, icon: '💨' },
|
||
].map(s => (
|
||
<div key={s.label} style={{
|
||
background: 'rgba(255,255,255,0.04)',
|
||
border: '1px solid rgba(255,255,255,0.06)',
|
||
borderRadius: 14,
|
||
padding: '12px 10px',
|
||
textAlign: 'center',
|
||
}}>
|
||
<div style={{ fontSize: 24, marginBottom: 6 }}>{s.icon}</div>
|
||
<div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{s.value}</div>
|
||
<div style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 2 }}>{s.label}</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',
|
||
}}>
|
||
<Sidebar active={tab} onChange={setTab} />
|
||
|
||
<main style={{
|
||
flex: 1,
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
overflow: 'hidden',
|
||
minWidth: 0,
|
||
}}>
|
||
<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 20px 24px',
|
||
}}>
|
||
{devicesInRoom.length === 0 ? (
|
||
<div style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
height: 200,
|
||
color: 'var(--text-secondary)',
|
||
gap: 8,
|
||
}}>
|
||
<span style={{ fontSize: 40 }}>🏠</span>
|
||
<span style={{ fontSize: 15 }}>Устройства не добавлены</span>
|
||
</div>
|
||
) : (
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
|
||
{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: 12,
|
||
color: 'var(--text-secondary)',
|
||
}}>
|
||
<span style={{ fontSize: 48 }}>⚙️</span>
|
||
<span style={{ fontSize: 16 }}>Настройки</span>
|
||
<span style={{ fontSize: 13 }}>Скоро</span>
|
||
</div>
|
||
)}
|
||
</main>
|
||
</div>
|
||
)
|
||
}
|