StatusGas now displays overlays and can be grouped

src/pages/Devices.tsx

@@ -138,6 +138,15 @@ export default function Devices() {
     localStorage.setItem('separateDust', separateDust.toString());
   }, [separateDust]);
 
+  const [groupGas, setGroupGas] = useState(() => {
+    const stored = localStorage.getItem('groupGas');
+    return stored !== null ? stored === 'true' : false;
+  });
+
+  useEffect(() => {
+    localStorage.setItem('groupGas', groupGas.toString());
+  }, [groupGas]);
+
   const [preferencesAnchor, setPreferencesAnchor] = useState<any>(null)
 
   const [{ as }] = useGlobalState()
@@ -320,9 +329,9 @@ export default function Devices() {
     return '/' + newSegments.join('/');
   }
 
-  useEffect(() => {
-    console.log(devices)
-  }, [devices])
+  // useEffect(() => {
+  //   console.log(devices)
+  // }, [devices])
 
   const toDevice = (device: Device) => {
     let url = getGroup() ? insertGroupContext(getGroup().id().toString(), device.id().toString()) : ""
@@ -455,12 +464,12 @@ export default function Devices() {
     }
     if (hasCo) {
       columns.push({
-        title: "CO",
+        title: groupGas ? "Gas" : "CO",
         render: (device: Device) => {
           if (device.status.co) {
             return (
               <Box sx={{ marginLeft: 1 }}>
-                <StatusGas device={device} gasType={"co"}/>
+                <StatusGas device={device} gasType={groupGas ? "all" : "co"}/>
               </Box>
             )
           } else {
@@ -471,7 +480,7 @@ export default function Devices() {
         }
       })
     }
-    if (hasCo2) {
+    if (hasCo2 && !groupGas) {
       columns.push({
         title: "CO2",
         render: (device: Device) => {
@@ -489,7 +498,7 @@ export default function Devices() {
         }
       })
     }
-    if (hasNo2) {
+    if (hasNo2 && !groupGas) {
       columns.push({
         title: "NO2",
         render: (device: Device) => {
@@ -507,7 +516,7 @@ export default function Devices() {
         }
       })
     }
-    if (hasCo2) {
+    if (hasO2 && !groupGas) {
       columns.push({
         title: "O2",
         render: (device: Device) => {
@@ -625,8 +634,6 @@ export default function Devices() {
     )
   }
 
-
-
   const preferencesMenu = () => {
     return (
       <Menu
@@ -642,10 +649,23 @@ export default function Devices() {
           >
             <ListItemIcon>
               <Checkbox 
-                checked={separateDust}
+                checked={!separateDust}
               />
             </ListItemIcon>
-            <ListItemText primary={"Seperate Dust"} />
+            <ListItemText primary={"Group Dust"} />
+          </MenuItem>
+          <MenuItem 
+            onClick={() => setGroupGas(!groupGas)}
+            sx={{ marginLeft: -0.75 }}
+            dense
+          >
+            <ListItemIcon>
+              <Checkbox 
+                checked={groupGas}
+
+              />
+            </ListItemIcon>
+            <ListItemText primary={"Group Gas"} />
           </MenuItem>
       </Menu>
     )