cleans up the group modal and the center call

frontend/src/Call/CallPlayer.js

@@ -134,7 +134,7 @@ function CallPlayer(props) {
             style={{ minHeight: '100vh' }}
           >
             <div ref={loadNewerRef} />
-            <ListCalls callsData={callsData} activeCallId={isPlaying ? currentCallId : false} talkgroups={talkgroupsData ? talkgroupsData.talkgroups : false} playCall={playCall} />
+            <ListCalls callsData={callsData} activeCallId={currentCallId} talkgroups={talkgroupsData ? talkgroupsData.talkgroups : false} playCall={playCall} />
             <div ref={loadOlderRef} style={{ height: 50 }} />
           </Sidebar.Pusher>
         </Sidebar.Pushable>

frontend/src/Call/components/CallItem.js

@@ -90,12 +90,18 @@ const CallItem = (props) => {
     talkgroup = talkgroups.talkgroups[call.talkgroupNum].description;
   }
 
+  const cirlceStyle = {width:"4px",
+              margin:"6px",
+              height: "4px",
+              borderRadius:"50%",
+              background: "#09f"}
+
   let playStatus = (<></>)
   if (activeCall) {
     playStatus = (<Icon name="play"  size='small' color="green"/>)
     
   } else if (!call.played) {
-    playStatus = (<Icon name="chevron right" size='small' disabled/>)
+    playStatus = (<div style={cirlceStyle}/>)
   } 
 
   return (

frontend/src/Call/components/GroupModal.js

@@ -1,66 +1,99 @@
-import React, { Component, useState } from "react";
-import { useGetGroupsQuery } from '../../features/api/apiSlice'
-import { setGroupFilter } from "../../features/callPlayer/callPlayerSlice";
+import React, { Component, useState, useEffect } from "react";
+import { useGetGroupsQuery, useGetSystemsQuery, } from '../../features/api/apiSlice'
+import { setGroupFilter, setCenterCall } from "../../features/callPlayer/callPlayerSlice";
 import { useSelector, useDispatch } from 'react-redux'
 
 import {
   Modal,
   Button,
   Icon,
-  Dropdown
+  Dropdown,
+  Grid,
+  Form
 } from "semantic-ui-react";
 import "./FilterModal.css";
 
-function GroupModal (props) {
+function GroupModal(props) {
   const shortName = useSelector((state) => state.callPlayer.shortName);
-  const { data, isError, isLoading, isSuccess,error } = useGetGroupsQuery(props.shortName);
+  const { data: groupData, isSuccess } = useGetGroupsQuery(props.shortName);
+  const { data: allSystems } = useGetSystemsQuery();
   const [selectedGroup, setSelectedGroup] = useState(false);
+  const [groupOptions, setGroupOptions] = useState([]);
+  const [centerCall, setLocalCenterCall] = useState(true);
   const dispatch = useDispatch()
   const onClose = props.onClose;
+  let system = false;
+
+
+  if (allSystems) {
+    system = allSystems.systems.find((system) => system.shortName === shortName)
+  }
 
   function handleDone(onClose) {
-
-    if (selectedGroup) {
+    dispatch(setCenterCall(centerCall));
+    if (selectedGroup && (selectedGroup!="all")) {
       dispatch(setGroupFilter(selectedGroup))
+      
       //dispatch({type: types.SET_GROUP_FILTER, groupId: selectedGroup  })
       onClose(true);
     } else {
       onClose(false);
     }
-}  
+  }
 
 
-  let groupOptions = []
-
-  if (isSuccess) {
-
-    for (const num in data) {
-      const group = data[num];
-      const obj = {
-        key: group._id,
-        value: group._id,
-        text: group.groupName
+  useEffect(() => {
+    if (isSuccess) {
+      let temp = [{
+        key: "all",
+        value: "all",
+        text: "All Calls"
+      }];
+      for (const num in groupData) {
+        const group = groupData[num];
+        const obj = {
+          key: group._id,
+          value: group._id,
+          text: group.groupName
+        }
+        temp.push(obj);
       }
-      groupOptions.push(obj);
+      setGroupOptions(temp);
     }
-}
+  }, [groupData]);
+
+
+
 
 
   return (
 
     <Modal open={props.open} onClose={onClose} size='tiny'>
-   
-      <Modal.Header>Select a Group</Modal.Header>
+
+      <Modal.Header>{system && system.name}</Modal.Header>
       <Modal.Content >
         <Modal.Description>
-          <p>Choose the type of calls you want to listen to</p>
-          <Dropdown placeholder='Group...' fluid selection options={groupOptions}  name='selectedGroup' onChange={(e, data) => setSelectedGroup(data.value)} />
+
+          <Grid >
+            <Grid.Row>
+              <Grid.Column width={8}>
+                {system && system.description}
+              </Grid.Column>
+              <Grid.Column width={8}>
+                <p>Choose the type of calls you want to listen to</p>
+                <Form>
+                <Form.Select placeholder='All Calls' fluid selection options={groupOptions} name='selectedGroup' onChange={(e, data) => setSelectedGroup(data.value)} />
+                <Form.Checkbox label='Center playing call ' checked={centerCall} onChange={(e, data) => setLocalCenterCall(data.value)} />
+                </Form>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
 
         </Modal.Description>
 
       </Modal.Content>
       <Modal.Actions>
-        <Button onClick={()=> handleDone(onClose)} >
+        <Button onClick={() => handleDone(onClose)} >
           <Icon name='headphones' /> Listen
         </Button>
       </Modal.Actions>

frontend/src/Call/components/ListCalls.js

@@ -8,24 +8,27 @@ import {
 } from "semantic-ui-react";
 import "../CallPlayer.css";
 import { useGetTalkgroupsQuery } from '../../features/api/apiSlice'
+import { useSelector } from 'react-redux'
 
 // ----------------------------------------------------
 const ListCalls = (props) => {
     const activeCallRef  = useRef();
+    const activeCallId = props.activeCallId;
     const { shortName } = useParams();
+    const centerCall = useSelector((state) => state.callPlayer.centerCall);
     const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
   //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
 
 
-  /*
-    useEffect(() => {
-      if (activeCallRef.current) {
+  
+  useEffect(() => {
+      if (activeCallRef.current && centerCall) {
         activeCallRef.current.scrollIntoView({
           block: "center",
         });
     }
-  });*/
+  },[activeCallId]);
 
     const callsData = props.callsData;
     return (
@@ -45,7 +48,7 @@ const ListCalls = (props) => {
             
             {
               props.callsData.ids.map((callId, index) => {
-              if (callId === props.activeCallId) {
+              if (callId === activeCallId) {
                 return (<Ref innerRef={activeCallRef} key={index} ><CallItem activeCall={true}  call={props.callsData.entities[callId]} talkgroups={talkgroupsData} key={index} onClick={props.playCall}/></Ref>)
               } else {
                 return <CallItem activeCall={false} call={props.callsData.entities[callId]} talkgroups={talkgroupsData} key={index} onClick={props.playCall}/>

frontend/src/features/callPlayer/callPlayerSlice.js

@@ -14,7 +14,8 @@ const initialState = {
   filterStarred: false,
   currentCallId: false,
   playlist: [],
-  live: false
+  live: false,
+  centerCall: true
 }
 
 const compareCalls = (a, b) => {
@@ -73,6 +74,9 @@ export const callPlayerSlice = createSlice({
     setLive: (state,action) => {
       state.live = action.payload;
     },
+    setCenterCall: (state,action) => {
+      state.centerCall = action.payload;
+    },
     setShortName: (state, action) => {
       state.shortName = action.payload;
     },
@@ -102,7 +106,7 @@ export const callPlayerSlice = createSlice({
 })
 
 // Action creators are generated for each case reducer function
-export const { setCurrentCallId, setCallTime, setFilter, setLive, setPlaylist, removeFromPLaylist, addToPlaylist, setShortName, setDateFilter, setStarredFilter, setAllFilter, setGroupFilter, setTalkgroupFilter } = callPlayerSlice.actions
+export const { setCurrentCallId, setCallTime, setFilter, setLive, setCenterCall, setPlaylist, removeFromPLaylist, addToPlaylist, setShortName, setDateFilter, setStarredFilter, setAllFilter, setGroupFilter, setTalkgroupFilter } = callPlayerSlice.actions
 
 export default callPlayerSlice.reducer