Fix mobile plan override sheets

Author: =

apps/predbat/frontend.zip

@@ -724,12 +724,14 @@
   position: relative;
 }
 
-.plan-rate-control {
+.plan-rate-control,
+.plan-load-control {
   position: relative;
   display: inline-block;
 }
 
-.plan-rate-button {
+.plan-rate-button,
+.plan-load-button {
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
@@ -744,11 +746,14 @@
 }
 
 .plan-rate-button:hover,
-.plan-rate-button:focus-visible {
+.plan-rate-button:focus-visible,
+.plan-load-button:hover,
+.plan-load-button:focus-visible {
   background: color-mix(in srgb, var(--color-text) 6%, transparent);
 }
 
-.plan-rate-button.is-manual {
+.plan-rate-button.is-manual,
+.plan-load-button.is-manual {
   border-color: color-mix(in srgb, var(--color-text-muted) 35%, transparent);
 }
 
@@ -946,10 +951,11 @@
 
   .plan-cell-popover {
     position: fixed;
-    inset: auto 0 0;
+    inset: auto 0 var(--plan-mobile-keyboard-offset, 0px);
     z-index: 110;
     width: auto;
     max-width: none;
+    max-height: calc(100dvh - var(--plan-mobile-keyboard-offset, 0px));
     padding: 0.8rem;
     padding-bottom: max(0.8rem, env(safe-area-inset-bottom));
     border-radius: 1rem 1rem 0 0;

frontend/src/components/PlanTable.css

@@ -480,6 +480,179 @@ function RateCell({
   )
 }
 
+type LoadCellProps = {
+  row: PlanRow
+  overrides: PlanOverrides
+  isPast: boolean
+  debugEnabled: boolean
+  open: boolean
+  onToggle: () => void
+  onClose: () => void
+  onOverrideSubmitted: () => void
+}
+
+function LoadCell({
+  row,
+  overrides,
+  isPast,
+  debugEnabled,
+  open,
+  onToggle,
+  onClose,
+  onOverrideSubmitted
+}: LoadCellProps) {
+  const override = (overrides.manual_load_adjust ?? []).find((item) => item.minutes === row.slot_minute) ?? null
+  const [value, setValue] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const controlRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    function handlePointerDown(event: PointerEvent) {
+      if (controlRef.current && !controlRef.current.contains(event.target as Node)) {
+        onClose()
+      }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    document.addEventListener('pointerdown', handlePointerDown)
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open, onClose])
+
+  function openEditor() {
+    if (isPast) {
+      return
+    }
+
+    if (!open) {
+      setValue(String(override?.adjustment ?? row.load_forecast))
+      setError(null)
+    }
+
+    onToggle()
+  }
+
+  async function sendOverride(action: 'Set Load' | 'Clear Load', adjustment: number) {
+    setSaving(true)
+    setError(null)
+
+    const formData = new FormData()
+    formData.append('time', formatOverrideTime(row.time))
+    formData.append('action', action)
+    formData.append('rate', String(adjustment))
+
+    try {
+      const response = await fetch('./rate_override', {
+        method: 'POST',
+        body: formData
+      })
+      const result = (await response.json()) as { success?: boolean; message?: string }
+
+      if (!response.ok || result.success === false) {
+        throw new Error(result.message || `HTTP ${response.status}`)
+      }
+
+      onClose()
+      onOverrideSubmitted()
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error'
+      setError(`Unable to update load forecast: ${message}`)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function setLoad(event: React.FormEvent) {
+    event.preventDefault()
+    const adjustment = Number(value)
+
+    if (!Number.isFinite(adjustment)) {
+      setError('Enter a valid load forecast.')
+      return
+    }
+
+    await sendOverride('Set Load', adjustment)
+  }
+
+  return (
+    <td
+      className={['plan-number', 'plan-load', row.load_color ? 'has-plan-cell-colour' : ''].filter(Boolean).join(' ')}
+      style={cellColour(row.load_color)}
+    >
+      <div ref={controlRef} className="plan-load-control">
+        <button
+          type="button"
+          className={['plan-load-button', override ? 'is-manual' : ''].filter(Boolean).join(' ')}
+          onClick={openEditor}
+          aria-disabled={isPast}
+          aria-label={override ? `Load forecast ${row.load_forecast.toFixed(2)} kWh, manually overridden` : `Load forecast ${row.load_forecast.toFixed(2)} kWh`}
+        >
+          <span className="plan-value-with-indicator">
+            {row.load_forecast > 0 && row.load_color && (
+              <span className="plan-value-indicator" style={{ backgroundColor: row.load_color }} aria-hidden="true" />
+            )}
+            <span>{row.load_forecast.toFixed(2)}</span>
+          </span>
+
+          {override && <span className="plan-rate-manual-dot" title="Manual load override" aria-hidden="true" />}
+        </button>
+
+        {debugEnabled && (row.load_forecast10 ?? 0) > 0 && (
+          <small className="plan-debug-value">({row.load_forecast10?.toFixed(2)})</small>
+        )}
+
+        {open && !isPast && (
+          <form className="plan-cell-popover" onSubmit={setLoad}>
+            <div className="plan-cell-popover-title">{formatTime(row.time)} load override</div>
+
+            <label>
+              <span>Load forecast</span>
+
+              <div className="plan-rate-input">
+                <input
+                  type="number"
+                  step="0.01"
+                  inputMode="decimal"
+                  value={value}
+                  onChange={(event) => setValue(event.target.value)}
+                  autoFocus
+                  disabled={saving}
+                />
+
+                <span>kWh</span>
+              </div>
+            </label>
+
+            <button type="submit" disabled={saving}>{saving ? 'Saving…' : 'Set override'}</button>
+
+            {override && (
+              <button type="button" className="plan-rate-clear" disabled={saving} onClick={() => void sendOverride('Clear Load', override.adjustment)}>
+                Use Predbat forecast
+              </button>
+            )}
+
+            {error && <div className="plan-rate-error" role="alert">{error}</div>}
+          </form>
+        )}
+      </div>
+    </td>
+  )
+}
+
 type TargetCellProps = {
   row: PlanRow
   overrides: PlanOverrides
@@ -1136,6 +1309,32 @@ export default function PlanTable({
 
   const [openCellEditor, setOpenCellEditor] = useState<string | null>(null)
 
+  useEffect(() => {
+    const visualViewport = window.visualViewport
+
+    if (!visualViewport) {
+      return
+    }
+
+    const viewport = visualViewport as VisualViewport
+
+    function updateKeyboardOffset() {
+      const offset = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop)
+
+      document.documentElement.style.setProperty('--plan-mobile-keyboard-offset', `${offset}px`)
+    }
+
+    updateKeyboardOffset()
+    viewport.addEventListener('resize', updateKeyboardOffset)
+    viewport.addEventListener('scroll', updateKeyboardOffset)
+
+    return () => {
+      viewport.removeEventListener('resize', updateKeyboardOffset)
+      viewport.removeEventListener('scroll', updateKeyboardOffset)
+      document.documentElement.style.removeProperty('--plan-mobile-keyboard-offset')
+    }
+  }, [])
+
   function toggleCellEditor(key: string) {
     setOpenOverrideTime(null)
     setOverrideError(null)
@@ -1743,26 +1942,20 @@ export default function PlanTable({
                       )}
                     </td>
 
-                    <td
-                      className={['plan-number', 'plan-load', row.load_color ? 'has-plan-cell-colour' : ''].filter(Boolean).join(' ')}
-                      style={cellColour(row.load_color)}
-                    >
-                      <span className="plan-value-with-indicator">
-                        {row.load_forecast > 0 && row.load_color && (
-                          <span
-                            className="plan-value-indicator"
-                            style={{ backgroundColor: row.load_color }}
-                            aria-hidden="true"
-                          />
-                        )}
-                        <span>{row.load_forecast.toFixed(2)}</span>
-                      </span>
-                      {debugEnabled && (row.load_forecast10 ?? 0) > 0 && (
-                        <small className="plan-debug-value">
-                          ({row.load_forecast10?.toFixed(2)})
-                        </small>
-                      )}
-                    </td>
+                    <LoadCell
+                      row={row}
+                      overrides={overrides}
+                      isPast={isPast}
+                      debugEnabled={debugEnabled}
+                      onOverrideSubmitted={onOverrideSubmitted}
+                      open={openCellEditor === `load:${row.time}`}
+                      onToggle={() => {
+                        toggleCellEditor(`load:${row.time}`)
+                      }}
+                      onClose={() => {
+                        setOpenCellEditor(null)
+                      }}
+                    />
 
                     {debugEnabled && (
                       <td className="plan-number plan-debug-column">

frontend/src/components/PlanTable.tsx

@@ -63,7 +63,7 @@ const colours = ['#2563eb', '#f59e0b', '#059669', '#dc2626', '#7c3aed', '#0891b2
 const emptyOverrides: PlanOverrides = {
   manual_charge_times: [], manual_export_times: [], manual_freeze_charge_times: [],
   manual_freeze_export_times: [], manual_demand_times: [], manual_import_rates: [],
-  manual_export_rates: [], manual_soc: []
+  manual_export_rates: [], manual_load_adjust: [], manual_soc: []
 }
 
 function value(value: number | null, suffix = '') {

frontend/src/pages/ComparePage.tsx

@@ -26,6 +26,7 @@ const EMPTY_OVERRIDES: PlanOverrides = {
   manual_demand_times: [],
   manual_import_rates: [],
   manual_export_rates: [],
+  manual_load_adjust: [],
   manual_soc: []
 }
 

frontend/src/pages/PlanPage.tsx

@@ -104,6 +104,11 @@ export type ManualRateOverride = {
   rate: number
 }
 
+export type ManualLoadOverride = {
+  minutes: number
+  adjustment: number
+}
+
 export type ManualSocOverride = {
   minutes: number
   target: number
@@ -118,6 +123,7 @@ export type PlanOverrides = {
 
   manual_import_rates: ManualRateOverride[]
   manual_export_rates: ManualRateOverride[]
+  manual_load_adjust: ManualLoadOverride[]
 
   manual_soc: ManualSocOverride[]
 }

frontend/src/types/plan.ts

@@ -123,6 +123,7 @@ const overrides = {
   manual_demand_times: [],
   manual_import_rates: [],
   manual_export_rates: [],
+  manual_load_adjust: [],
   manual_soc: []
 }