Display relay consumption history

central_frontend/src/api/EnergyApi.ts

@@ -35,6 +35,18 @@ export class EnergyApi {
     return data.data.consumption;
   }
 
+  /**
+   * Get relays consumption
+   */
+  static async RelaysConsumption(): Promise<number> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: "/energy/relays_consumption",
+      })
+    ).data.consumption;
+  }
+
   /**
    * Get relays consumption history
    */

central_frontend/src/api/RelayApi.ts

@@ -83,7 +83,7 @@ export class RelayApi {
     return (
       await APIClient.exec({
         method: "GET",
-        uri: `/relay/${relay.id}/state`,
+        uri: `/relay/${relay.id}/status`,
       })
     ).data;
   }

central_frontend/src/routes/HomeRoute.tsx

@@ -2,6 +2,7 @@ import { Typography } from "@mui/material";
 import { CurrConsumptionWidget } from "./HomeRoute/CurrConsumptionWidget";
 import Grid from "@mui/material/Grid2";
 import { CachedConsumptionWidget } from "./HomeRoute/CachedConsumptionWidget";
+import { RelayConsumptionWidget } from "./HomeRoute/RelayConsumptionWidget";
 
 export function HomeRoute(): React.ReactElement {
   return (
@@ -18,6 +19,9 @@ export function HomeRoute(): React.ReactElement {
         <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
           <CurrConsumptionWidget />
         </Grid>
+        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+          <RelayConsumptionWidget />
+        </Grid>
         <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
           <CachedConsumptionWidget />
         </Grid>

central_frontend/src/routes/HomeRoute/RelayConsumptionWidget.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { EnergyApi } from "../../api/EnergyApi";
+import { useSnackbar } from "../../hooks/context_providers/SnackbarProvider";
+import StatCard from "../../widgets/StatCard";
+
+export function RelayConsumptionWidget(): React.ReactElement {
+  const snackbar = useSnackbar();
+
+  const [val, setVal] = React.useState<undefined | number>();
+  const [history, setHistory] = React.useState<number[] | undefined>();
+
+  const refresh = async () => {
+    try {
+      const s = await EnergyApi.RelaysConsumption();
+      const history = await EnergyApi.RelaysConsumptionHistory();
+      setVal(s);
+      setHistory(history);
+    } catch (e) {
+      console.error(e);
+      snackbar("Failed to refresh current relays consumption!");
+    }
+  };
+
+  React.useEffect(() => {
+    const i = setInterval(() => refresh(), 3000);
+
+    return () => clearInterval(i);
+  });
+
+  return (
+    <StatCard
+      title="Relays consumption"
+      data={history ?? []}
+      interval="Last day"
+      value={val?.toString() ?? "Loading"}
+    />
+  );
+}

central_frontend/src/widgets/TimeWidget.tsx

@@ -61,7 +61,10 @@ export function TimeWidget(p: {
 }): React.ReactElement {
   if (!p.time) return <></>;
   return (
-    <Tooltip title={formatDate(p.time)} arrow>
+    <Tooltip
+      title={formatDate(p.diff ? new Date().getTime() / 1000 - p.time : p.time)}
+      arrow
+    >
       <span>{p.diff ? timeDiff(0, p.time) : timeDiffFromNow(p.time)}</span>
     </Tooltip>
   );