Systems sorted by State!

backend/sys_stats.js

@@ -17,39 +17,43 @@ function updateActiveSystems() {
 
             // While there are still Systems to work with
             if (item) {
-                var active = false;
-                var callAvg = 0;
-
                 // if you have recieved some calls during that last period, make the system active
                 if ((callTotals[item.shortName] != undefined) && (callTotals[item.shortName][0] > 0)) {
-                    active = true;
+                    const active = true;
-                    callAvg = callTotals[item.shortName][0] / timePeriod;
+                    const callAvg = callTotals[item.shortName][0] / timePeriod;
+                    sysCollection.update({
+                        shortName: item.shortName
+                    }, {
+                        $set: {
+                            "active": active,
+                            "callAvg": callAvg,
+                            "lastActive": new Date()
+                        }
+                    }, {
+                        upsert: true
+                    }, function(err, objects) {
+                        if (err) {
+                          console.log("Shortname: " + item.shortName);
+                          console.warn(err.message);
+                        }
+                    });
+                } else {
+                    sysCollection.update({
+                        shortName: item.shortName
+                    }, {
+                        $set: {
+                            "active": false,
+                            "callAvg": 0
+                        }
+                    }, {
+                        upsert: true
+                    }, function(err, objects) {
+                        if (err) {
+                          console.log("Shortname: " + item.shortName);
+                          console.warn(err.message);
+                        }
+                    });
                 }
-
-                if (err) {
-                  console.log(item);
-                  console.log(err);
-                }
-                //console.log();
-
-                // set the Call Average and Active for the System in the DB
-                sysCollection.update({
-                    shortName: item.shortName
-                }, {
-                    $set: {
-                        "active": active,
-                        "callAvg": callAvg
-                    }
-                }, {
-                    upsert: true
-                }, function(err, objects) {
-                    if (err) {
-                      console.log("Shortname: " + item.shortName);
-                      console.warn(err.message);
-                    }
-                    //console.log(util.inspect(objects));
-                });
-
             } 
         });
     });

frontend/src/Call/Calls.js

@@ -8,6 +8,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import { setLive, setFilter, setDateFilter } from "../features/callPlayer/callPlayerSlice";
 import { getCalls, addCall, getOlderCalls, getNewerCalls  } from "../features/calls/callsSlice";
 import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice'
+import { useGetSystemsQuery,  } from "../features/api/apiSlice";
 
 import {
   Container,
@@ -24,10 +25,8 @@ import io from 'socket.io-client';
 
 
 
-
 const socket = io(process.env.REACT_APP_BACKEND_SERVER);
 
-
 // ----------------------------------------------------
 function Calls(props) {
 
@@ -35,7 +34,6 @@ function Calls(props) {
 
   const { data: groupsData, isSuccess: isGroupsSuccess } = useGetGroupsQuery(shortName);
   const { loading: callsLoading, data: callsData } = useSelector((state) => state.calls);
-
   const [autoPlay, setAutoPlay] = useState(true);
   const [currentCall, setCurrentCall] = useState(false);
   const [urlOptions, setUrlOptions] = useState(false);

frontend/src/System/ListSystems.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
-import { Link, useNavigate  } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import SystemCard from "./SystemCard";
+import { useSelector, useDispatch } from 'react-redux'
 import {
   Container,
   Header,
@@ -9,32 +10,58 @@ import {
   Menu,
   Divider
 } from "semantic-ui-react";
-import  NavBar  from "../Common/NavBar"
+import NavBar from "../Common/NavBar"
-import { selectAllSystems, selectActiveSystems, useGetSystemsQuery } from "../features/api/apiSlice";
+import { selectAllSystems, selectActiveSystems, } from "../features/systems/systemsSlice";
-
+import { useGetSystemsQuery, } from '../features/api/apiSlice'
 // ----------------------------------------------------
 
 const ListSystems = (props) => {
 
-  
+  const { data: allSystems, isSuccess } = useGetSystemsQuery();
-  const {data:systems, isSuccess} = useGetSystemsQuery(); 
+  const systems = useSelector(selectActiveSystems)
-  const navigate = useNavigate();
+  let states = {};
-    return (
+  let other = []
-      <div>
+  for (var i = 0; i < systems.length; i++) {
-        <NavBar/>
+    const system = systems[i];
-        <Container >
+    if (system.hasOwnProperty("state")) {
-          <Divider horizontal style={{paddingTop:"5em", paddingBottom:"2em"}}><Header as="h1">Radio Systems<Icon name='rss' /></Header></Divider>
+      if (!states.hasOwnProperty(system.state)) {
-          <Card.Group itemsPerRow={4} stackable={true}>
+        states[system.state] = [];
+      }
+      states[system.state].push(system);
+    } else {
+      other.push(system);
+    }
 
-          {isSuccess&&systems.systems.map((system) =>
-            system.active&&<SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)}/>
-            // <SystemCard system={system} key={system.shortName} onClick={(e) => this.props.changeUrl("/system/" + system.shortName)}/>
-         )}
-          </Card.Group>
-        </Container>
-      </div>
-    );
   }
 
+  let systemsByState = [];
+  let keys = Object.keys(states);
+  keys.sort();
+  for(var i=0; i<keys.length; ++i){
+    const state = keys[i];    
+  
+    systemsByState.push((<Header as="h2">{state}</Header>))
+    systemsByState.push((
+      <Card.Group key={state} itemsPerRow={4} stackable={true}>
+        {
+          states[state].map((system) => {
+            return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} />
+          })}
+      </Card.Group>
+    ))
+  }
+
+  const navigate = useNavigate();
+  return (
+    <div>
+      <NavBar />
+      <Container >
+        <Divider horizontal style={{ paddingTop: "5em", paddingBottom: "2em" }}><Header as="h1">Radio Systems<Icon name='rss' /></Header></Divider>
+        {systemsByState}
+      </Container>
+    </div>
+  );
+}
+
 
 export default ListSystems;

frontend/src/features/api/apiSlice.js

@@ -44,20 +44,5 @@ export const apiSlice = createApi({
     })
 })
 
-export const selectSystemsResult = apiSlice.endpoints.getSystems.select();
-
-const emptySystems = []
-
-export const selectAllSystems = createSelector(
-    selectSystemsResult,
-    systemsResult => systemsResult?.data ?? emptySystems
-) 
-
-export const selectActiveSystems = createSelector(
-    selectAllSystems,
-    (state, userId) => userId,
-    (systems, userId) => systems.find(system => system.active === true)
-)
-
 // Export the auto-generated hook for the `getPosts` query endpoint
 export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetEventsQuery, useGetEventQuery, useAddNewEventMutation } = apiSlice

frontend/src/features/systems/systemsSlice.js

@@ -0,0 +1,26 @@
+
+import {
+    createSlice,
+    createEntityAdapter,
+    createSelector
+  } from '@reduxjs/toolkit'
+import { apiSlice} from '../api/apiSlice'
+
+// Calling `someEndpoint.select(someArg)` generates a new selector that will return
+// the query result object for a query with those parameters.
+// To generate a selector for a specific query argument, call `select(theQueryArg)`.
+// In this case, the users query has no params, so we don't pass anything to select()
+export const selectSystemsResult = apiSlice.endpoints.getSystems.select()
+
+const emptySystems = []
+
+export const selectAllSystems = createSelector(
+  selectSystemsResult,
+  systemsResult => systemsResult.data?systemsResult.data.systems:emptySystems
+)
+
+export const selectActiveSystems = createSelector(
+  selectAllSystems,
+  (state) => null,
+  (systems) => systems.filter(system => system.active === true)
+)