Display live and cached consumption on dashboard

central_frontend/src/routes/HomeRoute/CurrConsumptionWidget.tsx

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