diff --git a/central_frontend/src/App.tsx b/central_frontend/src/App.tsx index c724bb4..242b59a 100644 --- a/central_frontend/src/App.tsx +++ b/central_frontend/src/App.tsx @@ -10,6 +10,7 @@ import { DeviceRoute } from "./routes/DeviceRoute/DeviceRoute"; import { DevicesRoute } from "./routes/DevicesRoute"; import { HomeRoute } from "./routes/HomeRoute"; import { LoginRoute } from "./routes/LoginRoute"; +import { LogsRoute } from "./routes/LogsRoute"; import { NotFoundRoute } from "./routes/NotFoundRoute"; import { PendingDevicesRoute } from "./routes/PendingDevicesRoute"; import { RelaysListRoute } from "./routes/RelaysListRoute"; @@ -27,6 +28,7 @@ export function App() { } /> } /> } /> + } /> } /> ) diff --git a/central_frontend/src/api/LogsAPI.ts b/central_frontend/src/api/LogsAPI.ts new file mode 100644 index 0000000..72438ba --- /dev/null +++ b/central_frontend/src/api/LogsAPI.ts @@ -0,0 +1,29 @@ +import { Dayjs } from "dayjs"; +import { APIClient } from "./ApiClient"; + +export type LogSeverity = "Debug" | "Info" | "Warn" | "Error"; + +export interface LogEntry { + device_id: string; + time: number; + severity: LogSeverity; + message: string; +} + +export class LogsAPI { + /** + * Request the logs from the server + * + * @param date The date that contains the requested date + */ + static async GetLogs(date: Dayjs): Promise { + const day = Math.floor(date.unix() / (3600 * 24)); + + const res = await APIClient.exec({ + uri: `/logging/logs?day=${day}`, + method: "GET", + }); + + return res.data; + } +} diff --git a/central_frontend/src/routes/LogsRoute.tsx b/central_frontend/src/routes/LogsRoute.tsx new file mode 100644 index 0000000..12c37f1 --- /dev/null +++ b/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(); + + const load = async () => { + setLogs(await LogsAPI.GetLogs(currDate)); + }; + + const reload = () => { + setLogs(undefined); + loadKey.current += 1; + }; + return ( + + + + + + } + > +
+ + setCurrDate(currDate.add(-1, "day"))}> + + + + setCurrDate(d === null ? currDate : d)} + /> + + setCurrDate(currDate.add(1, "day"))}> + + + +
+ } + /> +
+ ); +} + +function LogsView(p: { logs: LogEntry[] }): React.ReactElement { + return "TODO : show logs"; +} diff --git a/central_frontend/src/widgets/SolarEnergyNavList.tsx b/central_frontend/src/widgets/SolarEnergyNavList.tsx index bf180c6..f5546fb 100644 --- a/central_frontend/src/widgets/SolarEnergyNavList.tsx +++ b/central_frontend/src/widgets/SolarEnergyNavList.tsx @@ -1,4 +1,10 @@ -import { mdiChip, mdiElectricSwitch, mdiHome, mdiNewBox } from "@mdi/js"; +import { + mdiChip, + mdiElectricSwitch, + mdiHome, + mdiNewBox, + mdiNotebookMultiple, +} from "@mdi/js"; import Icon from "@mdi/react"; import { List, @@ -35,6 +41,11 @@ export function SolarEnergyNavList(): React.ReactElement { uri="/relays" icon={} /> + } + /> ); }