78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
type Props = {
|
|
modeName: string
|
|
activatedAt: string | null
|
|
nextReplanIn: number | null
|
|
onReplan: () => void
|
|
onModeChange: () => void
|
|
}
|
|
|
|
const MODE_DOT: Record<string, string> = {
|
|
AUTO: '#1D9E75',
|
|
SELF_SUSTAIN: '#E24B4A',
|
|
CHARGE_CHEAP: '#EF9F27',
|
|
PRESERVE: '#378ADD',
|
|
MANUAL: '#888780',
|
|
}
|
|
|
|
function fmtActivatedPrague(iso: string | null): string | null {
|
|
if (!iso) return null
|
|
return new Intl.DateTimeFormat('cs-CZ', {
|
|
timeZone: 'Europe/Prague',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false,
|
|
}).format(new Date(iso))
|
|
}
|
|
|
|
export function ModeBar({ modeName, activatedAt, nextReplanIn, onReplan, onModeChange }: Props) {
|
|
const code = (modeName || 'AUTO').toUpperCase().replace(/-/g, '_')
|
|
const dot = MODE_DOT[code] ?? MODE_DOT.MANUAL!
|
|
const tAct = fmtActivatedPrague(activatedAt)
|
|
const subParts: string[] = []
|
|
if (tAct) subParts.push(`aktivní od ${tAct}`)
|
|
if (nextReplanIn != null) subParts.push(`příští replan za ${nextReplanIn} min`)
|
|
|
|
return (
|
|
<>
|
|
<style>{`
|
|
@keyframes ems-mode-auto-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
.ems-mode-auto-pulse {
|
|
animation: ems-mode-auto-pulse 2s ease-in-out infinite;
|
|
}
|
|
`}</style>
|
|
<div className="flex flex-wrap items-center gap-3 rounded-lg border border-slate-700/90 bg-slate-950/95 px-3 py-2 text-sm text-slate-200">
|
|
<div className="flex min-w-0 flex-1 items-center gap-2">
|
|
<span
|
|
className={`inline-block h-2.5 w-2.5 shrink-0 rounded-full ${code === 'AUTO' ? 'ems-mode-auto-pulse' : ''}`}
|
|
style={{ backgroundColor: dot }}
|
|
aria-hidden
|
|
/>
|
|
<span className="font-semibold tracking-wide text-slate-100">{code}</span>
|
|
{subParts.length > 0 ? (
|
|
<span className="truncate text-xs text-slate-400 sm:text-sm">{subParts.join(' · ')}</span>
|
|
) : null}
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onReplan}
|
|
className="rounded-md border border-slate-600 bg-slate-800/80 px-3 py-1.5 text-xs font-medium text-slate-100 hover:bg-slate-700"
|
|
>
|
|
Přeplánovat
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onModeChange}
|
|
className="rounded-md border border-slate-600 bg-slate-800/80 px-3 py-1.5 text-xs font-medium text-slate-100 hover:bg-slate-700"
|
|
>
|
|
Změnit režim
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|