M5: roll Energy chart window for live auto-refresh (English label); render boolean config fields as switches

frontend/src/energy/hooks.ts

@@ -39,6 +39,13 @@ export type ModbusReadingsResponse = components['schemas']['ModbusReadingsRespon
 // ---------------------------------------------------------------------------
 
 export interface ReadingsQueryParams {
+  /**
+   * How many milliseconds of history to show.  When provided the queryFn
+   * computes end=now() and start=now()-spanMs on every invocation, so
+   * refetchInterval-triggered re-fetches always use a rolling window.
+   * Mutually exclusive with `start`/`end`.
+   */
+  spanMs?: number
   start?: string | null
   end?: string | null
   /** Capped server-side; default max is 1000 to avoid pulling full history. */
@@ -196,22 +203,39 @@ export function useReadings(
   params: ReadingsQueryParams,
   options?: AutoRefreshOptions,
 ) {
-  const { start, end, limit } = params
+  const { spanMs, start, end, limit } = params
   const effectiveLimit = Math.min(limit ?? READINGS_MAX_LIMIT, READINGS_MAX_LIMIT)
 
   const refetchInterval = options?.refetchIntervalMs != null
     ? Math.max(2_000, options.refetchIntervalMs)
     : undefined
 
+  // When spanMs is provided, the query key uses the stable span value (not
+  // absolute timestamps), so switching presets triggers a fresh fetch while
+  // refetchInterval-triggered re-fetches reuse the cached key and run the
+  // queryFn again — computing end=now() each time, giving a rolling window.
+  const queryKey = spanMs != null
+    ? ['modbus-readings', uuid, { spanMs, limit: effectiveLimit }]
+    : ['modbus-readings', uuid, { start, end, limit: effectiveLimit }]
+
   return useQuery({
-    queryKey: ['modbus-readings', uuid, { start, end, limit: effectiveLimit }],
+    queryKey,
     queryFn: async () => {
+      let resolvedStart = start
+      let resolvedEnd = end
+
+      if (spanMs != null) {
+        const now = new Date()
+        resolvedEnd = now.toISOString()
+        resolvedStart = new Date(now.getTime() - spanMs).toISOString()
+      }
+
       const res = await apiClient.GET('/api/modbus/devices/{uuid}/readings', {
         params: {
           path: { uuid },
           query: {
-            ...(start ? { start } : {}),
-            ...(end ? { end } : {}),
+            ...(resolvedStart ? { start: resolvedStart } : {}),
+            ...(resolvedEnd ? { end: resolvedEnd } : {}),
             limit: effectiveLimit,
           },
         },