Display the list of pending devices in the UI

central_frontend/src/widgets/SolarEnergyNavList.tsx

@@ -1,14 +1,4 @@
-import {
-  mdiAccountMultiple,
-  mdiAccountMusic,
-  mdiAlbum,
-  mdiApi,
-  mdiChartLine,
-  mdiCog,
-  mdiHome,
-  mdiInbox,
-  mdiMusic,
-} from "@mdi/js";
+import { mdiHome, mdiNewBox } from "@mdi/js";
 import Icon from "@mdi/react";
 import {
   List,
@@ -16,14 +6,11 @@ import {
   ListItemIcon,
   ListItemSecondaryAction,
   ListItemText,
-  ListSubheader,
 } from "@mui/material";
 import { useLocation } from "react-router-dom";
-import { useAuthInfo } from "./BaseAuthenticatedPage";
 import { RouterLink } from "./RouterLink";
 
 export function SolarEnergyNavList(): React.ReactElement {
-  const user = useAuthInfo().info;
   return (
     <List
       dense
@@ -34,6 +21,11 @@ export function SolarEnergyNavList(): React.ReactElement {
       }}
     >
       <NavLink label="Home" uri="/" icon={<Icon path={mdiHome} size={1} />} />
+      <NavLink
+        label="Pending devices"
+        uri="/pending_devices"
+        icon={<Icon path={mdiNewBox} size={1} />}
+      />
     </List>
   );
 }

central_frontend/src/widgets/SolarEnergyRouteContainer.tsx

@@ -0,0 +1,27 @@
+import { Typography } from "@mui/material";
+import React, { PropsWithChildren } from "react";
+
+export function SolarEnergyRouteContainer(
+  p: {
+    label: string;
+    actions?: React.ReactElement;
+  } & PropsWithChildren
+): React.ReactElement {
+  return (
+    <div style={{ margin: "50px" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "20px",
+        }}
+      >
+        <Typography variant="h4">{p.label}</Typography>
+        {p.actions ?? <></>}
+      </div>
+
+      {p.children}
+    </div>
+  );
+}

central_frontend/src/widgets/TimeWidget.tsx

@@ -0,0 +1,65 @@
+import { Tooltip } from "@mui/material";
+import date from "date-and-time";
+import { time } from "../utils/DateUtils";
+
+export function formatDate(time: number): string {
+  const t = new Date();
+  t.setTime(1000 * time);
+  return date.format(t, "DD/MM/YYYY HH:mm:ss");
+}
+
+export function timeDiff(a: number, b: number): string {
+  let diff = b - a;
+
+  if (diff === 0) return "now";
+  if (diff === 1) return "1 second";
+
+  if (diff < 60) {
+    return `${diff} seconds`;
+  }
+
+  diff = Math.floor(diff / 60);
+
+  if (diff === 1) return "1 minute";
+  if (diff < 24) {
+    return `${diff} minutes`;
+  }
+
+  diff = Math.floor(diff / 60);
+
+  if (diff === 1) return "1 hour";
+  if (diff < 24) {
+    return `${diff} hours`;
+  }
+
+  const diffDays = Math.floor(diff / 24);
+
+  if (diffDays === 1) return "1 day";
+  if (diffDays < 31) {
+    return `${diffDays} days`;
+  }
+
+  diff = Math.floor(diffDays / 31);
+
+  if (diff < 12) {
+    return `${diff} month`;
+  }
+
+  const diffYears = Math.floor(diffDays / 365);
+
+  if (diffYears === 1) return "1 year";
+  return `${diffYears} years`;
+}
+
+export function timeDiffFromNow(t: number): string {
+  return timeDiff(t, time());
+}
+
+export function TimeWidget(p: { time?: number }): React.ReactElement {
+  if (!p.time) return <></>;
+  return (
+    <Tooltip title={formatDate(p.time)} arrow>
+      <span>{timeDiffFromNow(p.time)}</span>
+    </Tooltip>
+  );
+}