auto scrolling working!

.gitignore

@@ -3,3 +3,6 @@ prod.env
 test.env
 account/.eslintcache
 account/.eslintcache
+admin/.eslintcache
+frontend/.eslintcache
+admin/.eslintcache

backend/Dockerfile

@@ -22,22 +22,5 @@ RUN mkdir -p /home/app/upload && cp -a /tmp/node_modules /home/app
 WORKDIR $HOME/
 COPY . $HOME/
 
-#ADD sweep.sh $HOME/sweep.sh
-#RUN chmod +x $HOME/sweep.sh
-
-#ADD mycrontab $HOME/mycrontab
-#RUN crontab $HOME/mycrontab
-#RUN update-rc.d cron defaults
-
-# Add crontab file in the cron directory
-#ADD mycrontab /etc/cron.d/sweep-cron
-
-#RUN touch /var/log/cron.log
-
-# Give execution rights on the cron job
-#RUN chmod 0644 /etc/cron.d/sweep-cron
-
 # Run the command on container startup
-#CMD env > $HOME/env.txt && cron
-#CMD cron && node index.js
 CMD node index.js

backend/index.js

@@ -90,14 +90,6 @@ function isUser(req, res, next) {
   }
 }
 
-function isLoggedIn(req, res, next) {
-  if (req.isAuthenticated()) return next();
-  res.status(401).send({
-    success: false,
-    message: "Not Authenticated."
-  });
-};
-
 
 // -------------------------------------------
 
@@ -121,27 +113,11 @@ connect()
 mongoose.connection.on("error", console.error)
 mongoose.connection.on("disconnected", connect)
 
-/*
-const WebSocket = require('ws');
-const wss = new WebSocket.Server({
-    server
-});*/
-
-
 
 var upload = multer({
     dest: config.uploadDirectory
 });
 
-function isLoggedIn(req, res, next) {
-  if (req.isAuthenticated()) return next();
-  res.status(401).send({
-    success: false,
-    message: "Not Authenticated."
-  });
-};
-
-
 var clients = [];
 
 function addSystemClients(req, res, next) {

backend/support/mycrontab

@@ -1,3 +0,0 @@
-# Jobs:
-# m h  dom mon dow   command
-  0 4  *   *   *    root env - `cat /home/app/env.txt` /home/app/sweep.sh >> /var/log/cron.log  2>&1

backend/support/sweep.js

@@ -1,81 +0,0 @@
-var fs = require('fs');
-var path = require('path');
-var config = require('./config/config.json');
-var mongo = require('mongodb');
-var ObjectID = require('mongodb').ObjectID;
-mongo.BSONPure = require('bson').BSONPure;
-var BSON = mongo.BSONPure;
-var MongoClient = require('mongodb').MongoClient,
-    assert = require('assert');
-var db = require('./db');
-var findRemoveSync = require('./find-remove');
-var util = require('util');
-
-
-function sweep(){
-  var base_path = config.mediaDirectory;
-  var total = 0;
-  var sysCount = 0;
-  db.get().collection('systems', function(err, sysCollection) {
-    var cursor = sysCollection.find();
-    cursor.each(function(err, item) {
-        if (item) {
-          var date = new Date();
-          var old;
-          if (item.shortName == "dcfd"){
-            old = 60*60*24*30;
-            date.setMonth(date.getMonth() - 1);
-
-          }  else {
-            old = 60*60*24*5;
-            date.setDate(date.getDate() - 5);
-          }
-        var local_path = config.mediaDirectory + "/" + item.shortName + "/";
-        console.log("Sytems: " + local_path + " Date: " + date + " Seconds: " + old);
-        try {
-        var result = findRemoveSync(local_path, { age: {seconds: old}, removeEmpty:true, files: "*.*"});
-        if (result && result.totals) {
-          result.totals.date = date;
-        } else {
-          result = {totals:{fileSize: 0, deletedSize:0, files: 0, deleted:0, date: date}};
-        }
-        db.get().collection('system_stats', function(err, statsCollection) {
-          statsCollection.update({
-              shortName: item.shortName
-          }, {
-              $set: {
-                  "sweep": result.totals
-              }
-          }, {
-              upsert: true
-          }, function(err, objects) {
-              if (err) console.warn("Problem adding system stats: " + err.message);
-          });
-        });
-
-      } catch (e) {
-        console.log("Error trying to remove: ");
-        console.log(e);
-      }
-        console.log("Deleted: \n");
-        console.log(util.inspect(result));
-        sysCount++;
-      } else {
-        console.log("Clean Sweep - Systems Processed: " + sysCount);
-        db.get().close();
-      }
-
-    });
-  });
-
-}
-// Connect to Mongo on start
-db.connect(function(err) {
-    if (err) {
-        console.log('Unable to connect to Mongo.')
-        process.exit(1)
-    } else {
-
-      sweep();
-    }
-})

backend/support/sweep.sh

@@ -1,2 +0,0 @@
-
-node /home/app/sweep.js > /home/app/sweep.log

frontend/public/index.html

@@ -26,7 +26,7 @@
     -->
 		<script src="%REACT_APP_BACKEND_SERVER%/socket.io/socket.io.js"></script>
 		<script>
-		  const socket = io('%REACT_APP_BACKEND_SERVER%');
+		  window.socket = io('%REACT_APP_BACKEND_SERVER%');
 		</script>
     <title>React Redux App</title>
   </head>

frontend/src/Call/CallItem.js

@@ -49,6 +49,11 @@ sourceString(call) {
     return srcString;
 }
 
+componentDidUpdate(){
+  if (this.props.activeCall) {
+    console.log("Active call mounted")
+  }
+}
 addStar(e) {
  e.preventDefault();
  e.stopPropagation();
@@ -103,7 +108,7 @@ render() {
       talkgroup = this.props.talkgroups[call.talkgroupNum].description;
   }
   return (
-    <Table.Row onClick={(e) => this.props.onClick({call: call}, e)} {...rowSelected}>
+    <Table.Row  onClick={(e) => this.props.onClick({call: call}, e)} {...rowSelected}>
     <Table.Cell>  {call.len} </Table.Cell>
     <Table.Cell> {talkgroup} </Table.Cell>
     <Table.Cell> {time.toLocaleTimeString()} </Table.Cell>

frontend/src/Call/CallPlayer.js

@@ -48,12 +48,10 @@ class CallPlayer extends React.Component {
     this.handleCalendarClose = this.handleCalendarClose.bind(this);
     this.handleLiveToggle = this.handleLiveToggle.bind(this);
     this.getFilter = this.getFilter.bind(this);
-    this.callList = React.createRef();
     this.socket = window.socket;
     this.setupSocket = this.setupSocket.bind(this);
     this.endSocket = this.endSocket.bind(this);
     this.changeUrl = this.changeUrl.bind(this);
-    this.currentCallRef = React.createRef();
     this.audioRef = React.createRef();
     this.state = {
       requestMessage: "",
@@ -69,7 +67,6 @@ class CallPlayer extends React.Component {
       groupVisible: false,
       calendarVisible: false,
       supportVisible: false
-
     }
   }
 
@@ -124,11 +121,14 @@ class CallPlayer extends React.Component {
         filter.type = "group";
         filter.code = this.props.filterGroupId;
       break;
-      default:
       case 2:
         filter.type = "talkgroup";
         filter.code = this.props.filterTalkgroups;
       break;
+      default:
+      case 0:
+        filter.type = "all";
+        filter.code = ""        
     }
     filter.filterStarred = this.props.filterStarred;
     return filter;
@@ -167,8 +167,6 @@ class CallPlayer extends React.Component {
       this.props.callActions.fetchCalls();
       var filter = this.getFilter();
       this.startSocket(this.props.shortName, filter.type, filter.code, filter.filterStarred);
-      //this.socket = setupSocket(this.addCall, this.props.shortName);
-
     }
   }
 
@@ -179,10 +177,13 @@ class CallPlayer extends React.Component {
         case 1:
             search = search + `filter-type=group&filter-code=${props.filterGroupId}`;
             break;
-        default:
         case 2:
             search = search + `filter-type=talkgroup&filter-code=${props.filterTalkgroups}`;
             break;
+        default:
+        case 0:
+          break;
+            
     }
     if (props.filterDate) {
       if (search.length!==1) {
@@ -250,7 +251,6 @@ class CallPlayer extends React.Component {
       const nextCall = this.props.callsById[nextCallId];
       var callUrl = nextCall.url;
 
-
       this.setState({callUrl: callUrl, callId: nextCallId, sourceIndex: 0, isPlaying: true}, () => { audio.playSource(callUrl)}); //scrollToComponent(this.currentCallRef.current);
       this.props.callActions.fetchCallInfo( nextCallId);
     } else {
@@ -294,7 +294,7 @@ class CallPlayer extends React.Component {
     this.props.callActions.setShortName(this.props.shortName);
     var filter = {
       filterDate: false,
-      filterType: "all",
+      filterType: 0,  // this is "all"
       filterTalkgroups: [],
       filterGroupId: false,
       filterStarred: false,
@@ -375,6 +375,7 @@ class CallPlayer extends React.Component {
       }
     return true
   }
+
   componentWillUpdate(nextProps) {
     if (!this.props.groups && nextProps.groups) {
       if (!this.state.urlOptions && (nextProps.groups.length > 0 )) {
@@ -384,8 +385,6 @@ class CallPlayer extends React.Component {
       }
     }
 
-  
-
     const filterChanged = (nextProps.filterType !== this.props.filterType) || !this.compareArray(nextProps.filterTalkgroups, this.props.filterTalkgroups) || (nextProps.filterGroupId !== this.props.filterGroupId) || (nextProps.filterDate !== this.props.filterDate) || (nextProps.filterStarred !== this.props.filterStarred);
     if (filterChanged) {
       var typeString = 'all';
@@ -396,11 +395,15 @@ class CallPlayer extends React.Component {
               typeString = 'group';
               filterCode = nextProps.filterGroupId;
               break;
-          default:
           case 2:
               typeString = 'talkgroup';
               filterCode = nextProps.filterTalkgroups;
               break;
+          default:
+          case 0:
+              typeString = "all";
+              filterCode = '';
+              break;
       }
 
       this.updateUri(nextProps);
@@ -423,17 +426,22 @@ class CallPlayer extends React.Component {
             this.setState({callUrl: call.url });
       }
     }
-
   }
-  componentDidUpdate() {
+  
+  componentDidUpdate(prevProps, prevState) {
     const {contextRef} = this.state
     //console.log( contextRef.clientHeight - this.prevHeight );
     if (this.autoScroll) {
       this.autoScroll = false;
       window.scrollBy(0, contextRef.clientHeight - this.prevHeight);
     }
-
+    if (this.state.callId != prevState.callId) {
-  }
+      /*this.currentCallRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        });*/
+    }
+   }
 
   //https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
   //https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
@@ -467,10 +475,13 @@ class CallPlayer extends React.Component {
       case 1:
         filterLabel = "Group"
         break;
-      default:
+      
       case 2:
         filterLabel = "Talkgroups"
         break;
+      default:
+      case 0:
+        filterLabel = "All"
     }
     /*    if (this.props.calls) {
       var callRows = calls.map((call) =>
@@ -484,10 +495,10 @@ class CallPlayer extends React.Component {
       <GroupModal shortName={this.props.shortName} open={this.state.groupVisible} onClose={this.handleGroupClose}/>
       <SupportModal open={this.state.supportVisible} onClose={this.handleSupportClose}/>
         <Sidebar as={Menu} animation='overlay' inverted vertical visible={sidebarOpened}
-        onClick={this.handlePusherClick} duration={250}>
+        onClick={this.handlePusherClick} duration={50} width='thin'>
-          <Menu.Item>
+          <Menu.Item onClick={this.handlePusherClick} >
-            <span> </span><Icon name="close" onClick={this.handlePusherClick} inverted={true} link={true} size="large"/></Menu.Item>
+            <span> </span><Icon name="close" inverted={true} link={true} size='small'/></Menu.Item>
-          <Link to="/"><Menu.Item>Home</Menu.Item></Link>
+          <Link to="/"><Menu.Item link>Home</Menu.Item></Link>
           <Link to="/systems"><Menu.Item link>Systems</Menu.Item></Link>
           <Link to="/about"><Menu.Item link>About</Menu.Item></Link>
         </Sidebar>
@@ -535,7 +546,7 @@ class CallPlayer extends React.Component {
       </Sidebar.Pusher>
       </Sidebar.Pushable>
         <Waypoint onEnter={this.loadOlderCalls}/>
-        <Rail position='right' className="desktop-only" dimmed={sidebarOpened}>
+        <Rail position='right' className="desktop-only"  dimmed={sidebarOpened ? "true" : "false"} >
           <Sticky context={contextRef} offset={60}>
             <CallInfo call={currentCall} header={callInfoHeader} />
           </Sticky>

frontend/src/Call/FilterModal.js

@@ -66,11 +66,11 @@ handleDone(event) {
   }
   
 }
-componentWillUpdate(nextProps) {
+componentDidUpdate(prevProps) {
 
-  const filterChanged = ((nextProps.selectedTalkgroups !== this.props.selectedTalkgroups) || (nextProps.selectedGroup !== this.props.selectedGroup));
+  const filterChanged = ((prevProps.selectedTalkgroups !== this.props.selectedTalkgroups) || (prevProps.selectedGroup !== this.props.selectedGroup));
   if (filterChanged) {
-    this.setState({selectedTalkgroup: nextProps.selectedTalkgroups,  selectedGroup: nextProps.selectedGroup, activeTab: nextProps.activeTab});
+    this.setState({selectedTalkgroup: prevProps.selectedTalkgroups,  selectedGroup: prevProps.selectedGroup, activeTab: prevProps.activeTab});
   }
 }
 

frontend/src/Call/GroupModal.js

@@ -35,11 +35,11 @@ handleDone(event) {
       }
 
 }
-componentWillUpdate(nextProps) {
+componentDidUpdate(prevProps) {
 
-  const filterChanged = (nextProps.selectedGroup !== this.props.selectedGroup);
+  const filterChanged = (prevProps.selectedGroup !== this.props.selectedGroup);
   if (filterChanged) {
-    this.setState({ selectedGroup: nextProps.selectedGroup});
+    this.setState({ selectedGroup: this.props.selectedGroup});
   }
 }
 

frontend/src/Call/ListCalls.js

@@ -3,19 +3,38 @@ import CallItem from "./CallItem";
 import {
   Icon,
   Table,
+  Ref
 } from "semantic-ui-react";
 import "./CallPlayer.css";
 
 // ----------------------------------------------------
 class ListCalls extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleCurrentCallRef = this.handleCurrentCallRef.bind(this);
 
+    //this.currentCallRef = React.createRef();
+  }
+  handleCurrentCallRef(ref) {
+    this.currentCallRef = ref
+    console.log("Setting it")
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.currentCallRef && this.props.activeCallId && (this.props.activeCallId != prevProps.activeCallId)) {
+      this.currentCallRef.scrollIntoView({
+        behavior: "smooth",
+
+        block: "center",
+        });
+    }
+  }
 
   //https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
   //https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
   render() {
     return (
 
-        <Table id="calls" unstackable>
+        <Table id="calls" unstackable  >
           <Table.Header >
             <Table.Row>
               <Table.HeaderCell>Len</Table.HeaderCell>
@@ -24,9 +43,16 @@ class ListCalls extends React.Component {
               <Table.HeaderCell><Icon name='star' /></Table.HeaderCell>
             </Table.Row>
           </Table.Header>
-          <Table.Body>
+          <Table.Body >
-
+            
-            {this.props.callsAllIds.map((callId, index) => <CallItem activeCall={callId === this.props.activeCallId ? true : false} call={this.props.callsById[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/>)}
+            {this.props.callsAllIds.map((callId, index) => {
+              if (callId === this.props.activeCallId) {
+                return (<Ref innerRef={this.handleCurrentCallRef}><CallItem activeCall={true}  call={this.props.callsById[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/></Ref>)
+              } else {
+                return <CallItem activeCall={false} call={this.props.callsById[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/>
+              }
+            })
+            }
 
           </Table.Body>
         </Table>

frontend/src/Call/MediaPlayer.js

@@ -65,8 +65,8 @@ class MediaPlayer extends React.Component {
     });
   }
 
-componentWillUpdate(nextProps) {
+componentDidUpdate(prevProps) {
-  if (nextProps.call && (nextProps.call !== this.props.call)) {
+  if (this.props.call && (prevProps.call !== this.props.call)) {
     this.setState({
       sourceIndex: 0
     });

frontend/src/redux-router/configureStore.js

@@ -10,10 +10,11 @@ import thunk from 'redux-thunk';
 export const history = createBrowserHistory()
 
 export default function configureStore(preloadedState) {
+  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
   const store = createStore(
     createRootReducer(history), // root reducer with router state
-    preloadedState,
+    preloadedState,  
-    compose(
+    composeEnhancers(
       applyMiddleware(
         routerMiddleware(history), // for dispatching history actions
         thunk,

mongo/Dockerfile

@@ -17,7 +17,6 @@ MAINTAINER Luke Berndt <lukekb@gmail.com>
     
 # Add main NGINX config
 RUN mkdir -p /app
-ADD trim.js /app
 ADD totals.js /app
 ADD init_test_db.js /app
 ADD upgrade_db_admin.js /app

mongo/trim.js

@@ -1,25 +0,0 @@
-db = db.getMongo().getDB( "scanner" );
-
-var bulkRemove = db.calls.initializeUnorderedBulkOp()
-var short_date = new Date();
-
-db.systems.find().forEach(
-  function(system){
-    var date = new Date();
-    var total =0;
-    if (system.planType == 10){
-      date.setMonth(date.getDate() - 30);
-
-    }  else {
-      date.setDate(date.getDate() - 7);
-    }
-      print(system.shortName);
-
-      bulkRemove.find({"time":{$lt: date}, "shortName": system.shortName}).remove();
-
-
-});
-
-//bulkInsert.execute()
-var results = bulkRemove.execute();
-print("Removed: " + results.nRemoved);