fixed navigation bug in devices page; added option to seperate dust from sen5x to different column

src/pages/Device.tsx

@@ -14,7 +14,6 @@ import { pond, quack } from "protobuf-ts/pond";
 import { cloneDeep } from "lodash";
 import DeviceOverview from "device/DeviceOverview";
 import { DeviceAvailabilityMap, FindAvailablePositions, OffsetAvailabilityMap } from "pbHelpers/DeviceAvailability";
-import AddComponentManualDialog from "component/AddComponentManualDialog"; 
 import ComponentCard from "component/ComponentCard";
 import { sameComponentID, sortComponents } from "pbHelpers/Component";
 import { isController } from "pbHelpers/ComponentType";

src/pages/Devices.tsx

@@ -24,6 +24,7 @@ import { Tag as TagUI } from "common/Tag";
 import moment from "moment";
 import StatusPlenum from "common/StatusPlenum";
 import StatusSen5x from "common/StatusSen5x";
+import StatusDust from "common/StatusDust";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -122,6 +123,7 @@ export default function Devices() {
   const [groupSettingsIsOpen, setGroupSettingsIsOpen] = useState<boolean>(false);
 
   const [fieldContains, setFieldContains] = useState<Map<string, string>>(new Map<string, string>())
+  const [seperateDust, setSeperateDust] = useState(true)
 
   const [{ as }] = useGlobalState()
 
@@ -250,12 +252,8 @@ export default function Devices() {
     ).then(resp => {
       let newDevices: Device[] = []
       resp.data.devices.forEach(device => {
-        if (device.status?.plenum?.temperature) {
-          setHasPlenums(true)
-        }
-        if (device.status?.sen5x?.temperature) {
-          setHasSen5x(true)
-        }
+        if (device.status?.plenum?.temperature) setHasPlenums(true)
+        if (device.status?.sen5x?.temperature) setHasSen5x(true)
         newDevices.push(Device.create(device))
       })
       setDevices(newDevices)
@@ -277,15 +275,41 @@ export default function Devices() {
     setLimit(event.target.value);
   };
 
-  const prependToUrl = (prependage: number | string) => {
-    const basePath = location.pathname.replace(/\/$/, ""); 
-    return(`/${prependage}/${basePath}`.replace(/\/{2,}/g, "/").replace(/(\/[^/]+)\/\1+/g, "$1"));
-  };
+  // const prependToUrl = (prependage: number | string) => {
+  //   const basePath = location.pathname.replace(/\/$/, ""); 
+  //   return(`/${prependage}/${basePath}`.replace(/\/{2,}/g, "/").replace(/(\/[^/]+)\/\1+/g, "$1"));
+  // };
+
+  function insertGroupContext(groupID: string, deviceID: string): string {
+    const path = location.pathname
+    console.log(path)
+    const segments = path.split('/').filter(Boolean);
+    const deviceIndex = segments.findIndex(segment => segment === 'devices');
+
+    if (deviceIndex === -1) {
+      throw new Error('Path does not contain "devices"');
+    }
+
+    // Build the new segments
+    const newSegments = [
+      ...segments.slice(0, deviceIndex),
+      'groups',
+      groupID,
+      ...segments.slice(deviceIndex),
+      deviceID
+    ];
+
+    return '/' + newSegments.join('/');
+  }
 
   const toDevice = (device: Device) => {
-    let url = prependToUrl(getGroup() ? "groups/" + getGroup().id() : "")
-    url = url + "/" + device.id()
-    navigate(url, { replace: true, state: {device: device} })
+
+    let url = getGroup() ? insertGroupContext(getGroup().id().toString(), device.id().toString()) : ""
+    console.log(url)
+    if (url.length < 1) url = device.id().toString()
+    // url = url + "/" + device.id()
+    // navigate(url, { replace: true, state: {device: device} })
+    navigate(url, { state: {device: device} })
   };
 
   const handleTabChange = (_event: React.SyntheticEvent, newValue: string) => {
@@ -384,7 +408,23 @@ export default function Devices() {
           if (device.status.sen5x?.temperature) {
             return (
               <Box sx={{ marginLeft: 1 }}>
-                <StatusSen5x device={device} />
+                <StatusSen5x device={device} noDust={seperateDust} />
+              </Box>
+            )
+          } else {
+            return (
+              <></>
+            )
+          }
+        }
+      })
+      if (seperateDust) columns.push({
+        title: "Dust",
+        render: (device: Device) => {
+          if (device.status.sen5x?.temperature) {
+            return (
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusDust device={device} />
               </Box>
             )
           } else {