Frontend requests log on backend

central_frontend/src/routes/LogsRoute.tsx

@@ -0,0 +1,75 @@
+import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import { IconButton, Tooltip } from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers";
+import dayjs from "dayjs";
+import React from "react";
+import { LogEntry, LogsAPI } from "../api/LogsAPI";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
+
+export function LogsRoute(): React.ReactElement {
+  const loadKey = React.useRef(1);
+
+  const [currDate, setCurrDate] = React.useState(dayjs());
+
+  const [logs, setLogs] = React.useState<LogEntry[] | undefined>();
+
+  const load = async () => {
+    setLogs(await LogsAPI.GetLogs(currDate));
+  };
+
+  const reload = () => {
+    setLogs(undefined);
+    loadKey.current += 1;
+  };
+  return (
+    <SolarEnergyRouteContainer
+      label="Logs"
+      actions={
+        <Tooltip title="Refresh logs">
+          <IconButton onClick={reload}>
+            <RefreshIcon />
+          </IconButton>
+        </Tooltip>
+      }
+    >
+      <div
+        style={{
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Tooltip title="Previous day">
+          <IconButton onClick={() => setCurrDate(currDate.add(-1, "day"))}>
+            <NavigateBeforeIcon />
+          </IconButton>
+        </Tooltip>
+        <DatePicker
+          label="Shown day"
+          value={currDate}
+          onChange={(d) => setCurrDate(d === null ? currDate : d)}
+        />
+        <Tooltip title="Next day">
+          <IconButton onClick={() => setCurrDate(currDate.add(1, "day"))}>
+            <NavigateNextIcon />
+          </IconButton>
+        </Tooltip>
+      </div>
+      <AsyncWidget
+        ready={!!logs}
+        loadKey={loadKey.current + currDate.toString()}
+        errMsg="Failed to load the logs!"
+        load={load}
+        build={() => <LogsView logs={logs!} />}
+      />
+    </SolarEnergyRouteContainer>
+  );
+}
+
+function LogsView(p: { logs: LogEntry[] }): React.ReactElement {
+  return "TODO : show logs";
+}