second version

2026-04-03 14:23:16 +02:00
parent 897b95f728
commit 9f4126946d
105 changed files with 9738 additions and 1470 deletions
--- a/frontend/src/components/ModeBar.tsx
+++ b/frontend/src/components/ModeBar.tsx
@@ -0,0 +1,77 @@
+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>
+    </>
+  )
+}