Use new UI (#8983)

* fixup build * swap frontends
2023-12-16 16:20:59 +00:00
parent a2c6f45454
commit bdebb99b5a
286 changed files with 20010 additions and 20007 deletions
--- a/web/src/utils/timelineUtil.tsx
+++ b/web/src/utils/timelineUtil.tsx
@@ -0,0 +1,80 @@
+import { LuCircle, LuPlay, LuPlayCircle, LuTruck } from "react-icons/lu";
+import { IoMdExit } from "react-icons/io";
+import {
+  MdFaceUnlock,
+  MdOutlineLocationOn,
+  MdOutlinePictureInPictureAlt,
+} from "react-icons/md";
+
+export function getTimelineIcon(timelineItem: Timeline) {
+  switch (timelineItem.class_type) {
+    case "visible":
+      return <LuPlay className="w-4 mr-1" />;
+    case "gone":
+      return <IoMdExit className="w-4 mr-1" />;
+    case "active":
+      return <LuPlayCircle className="w-4 mr-1" />;
+    case "stationary":
+      return <LuCircle className="w-4 mr-1" />;
+    case "entered_zone":
+      return <MdOutlineLocationOn className="w-4 mr-1" />;
+    case "attribute":
+      switch (timelineItem.data.attribute) {
+        case "face":
+          return <MdFaceUnlock className="w-4 mr-1" />;
+        case "license_plate":
+          return <MdOutlinePictureInPictureAlt className="w-4 mr-1" />;
+        default:
+          return <LuTruck className="w-4 mr-1" />;
+      }
+    case "sub_label":
+      switch (timelineItem.data.label) {
+        case "person":
+          return <MdFaceUnlock className="w-4 mr-1" />;
+        case "car":
+          return <MdOutlinePictureInPictureAlt className="w-4 mr-1" />;
+      }
+  }
+}
+
+export function getTimelineItemDescription(timelineItem: Timeline) {
+  const label = (
+    (Array.isArray(timelineItem.data.sub_label)
+      ? timelineItem.data.sub_label[0]
+      : timelineItem.data.sub_label) || timelineItem.data.label
+  ).replaceAll("_", " ");
+
+  switch (timelineItem.class_type) {
+    case "visible":
+      return `${label} detected`;
+    case "entered_zone":
+      return `${label} entered ${timelineItem.data.zones
+        .join(" and ")
+        .replaceAll("_", " ")}`;
+    case "active":
+      return `${label} became active`;
+    case "stationary":
+      return `${label} became stationary`;
+    case "attribute": {
+      let title = "";
+      if (
+        timelineItem.data.attribute == "face" ||
+        timelineItem.data.attribute == "license_plate"
+      ) {
+        title = `${timelineItem.data.attribute.replaceAll(
+          "_",
+          " "
+        )} detected for ${label}`;
+      } else {
+        title = `${
+          timelineItem.data.sub_label
+        } recognized as ${timelineItem.data.attribute.replaceAll("_", " ")}`;
+      }
+      return title;
+    }
+    case "sub_label":
+      return `${timelineItem.data.label} recognized as ${timelineItem.data.sub_label}`;
+    case "gone":
+      return `${label} left`;
+  }
+}