122 lines
3.7 KiB
TypeScript
122 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
|
|
interface DeviceCardProps {
|
|
id: string
|
|
name: string
|
|
icon: string
|
|
entityId?: string
|
|
domain?: string
|
|
initialState: boolean
|
|
isMock?: boolean
|
|
extraInfo?: string
|
|
}
|
|
|
|
export default function DeviceCard({
|
|
id, name, icon, entityId, domain, initialState, isMock = false, extraInfo,
|
|
}: DeviceCardProps) {
|
|
const [isOn, setIsOn] = useState(initialState)
|
|
const [synced, setSynced] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
// Sync from HA only once — when real data first arrives (not mock default)
|
|
useEffect(() => {
|
|
if (!synced && !isMock) {
|
|
setIsOn(initialState)
|
|
setSynced(true)
|
|
}
|
|
}, [initialState, isMock, synced])
|
|
|
|
const toggle = async () => {
|
|
const next = !isOn
|
|
setIsOn(next) // optimistic
|
|
|
|
if (!isMock && entityId && domain) {
|
|
setLoading(true)
|
|
try {
|
|
await fetch('/api/ha', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
domain,
|
|
service: next ? 'turn_on' : 'turn_off',
|
|
entity_id: entityId,
|
|
}),
|
|
})
|
|
} catch {
|
|
setIsOn(!next)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
const accent = '#00d4ff'
|
|
|
|
return (
|
|
<div style={{
|
|
background: isOn ? 'rgba(0,212,255,0.07)' : 'rgba(255,255,255,0.04)',
|
|
border: isOn ? '1px solid rgba(0,212,255,0.25)' : '1px solid rgba(255,255,255,0.08)',
|
|
borderRadius: 18,
|
|
padding: '18px 16px 16px',
|
|
minHeight: 140,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
transition: 'background 0.25s ease, border-color 0.25s ease',
|
|
boxShadow: isOn ? '0 0 24px rgba(0,212,255,0.06)' : 'none',
|
|
}}>
|
|
{/* Top: icon + toggle */}
|
|
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
|
|
<div style={{
|
|
width: 42, height: 42, borderRadius: 12,
|
|
background: isOn ? 'rgba(0,212,255,0.15)' : 'rgba(255,255,255,0.06)',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
fontSize: 20,
|
|
transition: 'background 0.25s ease',
|
|
boxShadow: isOn ? '0 0 16px rgba(0,212,255,0.25)' : 'none',
|
|
}}>
|
|
{icon}
|
|
</div>
|
|
|
|
<button
|
|
onClick={toggle}
|
|
disabled={loading}
|
|
style={{
|
|
width: 52, height: 30, borderRadius: 15,
|
|
background: isOn ? `linear-gradient(90deg, #00b4d8, #00d4ff)` : 'rgba(255,255,255,0.1)',
|
|
position: 'relative', border: 'none', cursor: 'pointer',
|
|
flexShrink: 0, touchAction: 'manipulation',
|
|
WebkitTapHighlightColor: 'transparent',
|
|
transition: 'background 0.25s ease',
|
|
opacity: loading ? 0.6 : 1,
|
|
boxShadow: isOn ? '0 0 10px rgba(0,212,255,0.4)' : 'none',
|
|
}}
|
|
>
|
|
<span style={{
|
|
position: 'absolute', top: 4,
|
|
left: isOn ? 26 : 4,
|
|
width: 22, height: 22, borderRadius: '50%',
|
|
background: '#fff',
|
|
boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
|
|
transition: 'left 0.22s ease',
|
|
display: 'block',
|
|
}} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Bottom: name + status */}
|
|
<div>
|
|
<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3 }}>
|
|
{name}
|
|
</div>
|
|
<div style={{ fontSize: 12, color: isOn ? accent : 'var(--text-secondary)', marginTop: 3 }}>
|
|
{isOn ? 'Включён' : 'Выключен'}
|
|
{extraInfo && isOn ? ` · ${extraInfo}` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|