Display the list of pending devices in the UI

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>
+  );
+}