142 lines
3.5 KiB
TypeScript
142 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState } 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 [loading, setLoading] = useState(false)
|
|
|
|
const toggle = async () => {
|
|
const next = !isOn
|
|
setIsOn(next) // optimistic update
|
|
|
|
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 {
|
|
// revert on error
|
|
setIsOn(!next)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
background: isOn ? 'rgba(0,212,255,0.06)' : 'var(--card-bg)',
|
|
border: isOn ? '1px solid rgba(0,212,255,0.2)' : '1px solid var(--card-border)',
|
|
borderRadius: 18,
|
|
padding: '16px',
|
|
minHeight: 140,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
transition: 'all 0.25s ease',
|
|
}}
|
|
>
|
|
{/* Top row: icon + toggle */}
|
|
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
|
|
<div
|
|
style={{
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 12,
|
|
background: isOn ? 'rgba(0,212,255,0.15)' : 'rgba(255,255,255,0.06)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: 22,
|
|
transition: 'all 0.25s ease',
|
|
}}
|
|
>
|
|
{icon}
|
|
</div>
|
|
|
|
{/* Toggle button */}
|
|
<button
|
|
onClick={toggle}
|
|
disabled={loading}
|
|
style={{
|
|
width: 50,
|
|
height: 28,
|
|
borderRadius: 14,
|
|
background: isOn
|
|
? 'linear-gradient(90deg, #00b4d8, #00d4ff)'
|
|
: 'rgba(255,255,255,0.1)',
|
|
position: 'relative',
|
|
transition: 'background 0.3s ease',
|
|
flexShrink: 0,
|
|
touchAction: 'manipulation',
|
|
WebkitTapHighlightColor: 'transparent',
|
|
opacity: loading ? 0.6 : 1,
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
position: 'absolute',
|
|
top: 3,
|
|
left: isOn ? 25 : 3,
|
|
width: 22,
|
|
height: 22,
|
|
borderRadius: '50%',
|
|
background: '#fff',
|
|
boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
|
|
transition: 'left 0.25s ease',
|
|
}}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Bottom: name + status */}
|
|
<div>
|
|
<div
|
|
style={{
|
|
fontSize: 14,
|
|
fontWeight: 600,
|
|
color: 'var(--text-primary)',
|
|
marginBottom: 3,
|
|
lineHeight: 1.2,
|
|
}}
|
|
>
|
|
{name}
|
|
</div>
|
|
<div style={{ fontSize: 12, color: isOn ? 'var(--accent)' : 'var(--text-secondary)' }}>
|
|
{isOn ? 'Включён' : 'Выключен'}
|
|
{extraInfo && isOn ? ` · ${extraInfo}` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|