play icon to events, fixing call-id

frontend/server/index.js

@@ -127,7 +127,7 @@ async function getCalls(req, res, next) {
       return;
     }
 
-  
+    try {
     db.get().collection('calls', function (err, transCollection) {
       transCollection.findOne({
         '_id': o_id
@@ -168,7 +168,11 @@ async function getCalls(req, res, next) {
         });
     });
   
-
+  } catch (err) {
+    console.error(err);
+    next()
+    return;
+  }
 
 
   } else {
@@ -179,8 +183,8 @@ async function getCalls(req, res, next) {
 // -------------------------------------------
 app.use(express.static(path.join(__dirname, "public")));
 
-app.get("/system/:shortName", getCalls)
+//app.get("/system/:shortName", getCalls)
-app.get("/cards/:id", getCard)
+//app.get("/cards/:id", getCard)
 
 app.get("*", (req, res, next) => {
   res.sendFile(__dirname + '/public/index.html');

frontend/src/Event/EventCallItem.js

@@ -39,8 +39,24 @@ const EventCallItem = (props) => {
   } else {
     talkgroup = talkgroupsData.talkgroups[call.talkgroupNum].description;
   }
+
+  const cirlceStyle = {width:"4px",
+              margin:"6px",
+              height: "4px",
+              borderRadius:"50%"}
+
+
+  let playStatus = (<></>)
+  if (activeCall) {
+    playStatus = (<Icon name="play"  size='small' color="green"/>)
+    
+  } else {
+    playStatus = (<div style={cirlceStyle}/>)
+  } 
+
   return (
     <Table.Row  onClick={(e) => props.onClick({ call: call }, e)} {...rowSelected}>
+      <Table.Cell>{playStatus}</Table.Cell>
       <Table.Cell>  {call.len} </Table.Cell>
       <Table.Cell> {talkgroup} </Table.Cell>
       <Table.Cell> {time.toLocaleTimeString()} </Table.Cell>

frontend/src/Event/EventPlayer.js

@@ -1,10 +1,9 @@
 import React, { useEffect, useLayoutEffect, useState, useRef } from "react";
 import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
-import {skipToken} from '@reduxjs/toolkit/query'
+import { skipToken } from '@reduxjs/toolkit/query'
 import MediaPlayer from "../Call/components/MediaPlayer";
 
 import SupportModal from "../Call/components/SupportModal";
-
 import EventCallInfo from "./EventCallInfo";
 import ListEventCalls from "./ListEventCalls";
 import { useSelector, useDispatch } from 'react-redux'
@@ -38,13 +37,13 @@ function EventPlayer(props) {
   const [isPlaying, setIsPlaying] = useState(false);
 
 
-  const {callLink,callDownload,callTweet} = useCallLink(currentCall)
+  const { callLink, callDownload, callTweet } = useCallLink(currentCall)
 
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const positionRef = useRef(); // lets us get the Y Scroll offset for the Call List
   const shouldPlayAddCallRef = useRef(); // we need to do this to make the current value of isPlaying available in the socket message callback
-  shouldPlayAddCallRef.current = (!isPlaying && autoPlay)?true:false;
+  shouldPlayAddCallRef.current = (!isPlaying && autoPlay) ? true : false;
 
   let currentCallId = false;
 
@@ -62,7 +61,9 @@ function EventPlayer(props) {
   }
 
   const playCall = (data) => {
+    //data.call.played = true;
     setCurrentCall(data.call);
+
     setIsPlaying(true);
   }
 
@@ -71,9 +72,9 @@ function EventPlayer(props) {
     if (eventData) {
       const currentIndex = eventData.calls.findIndex(call => call._id === currentCallId);
       if (autoPlay && (currentIndex > 0)) {
-        
-        const nextCall = eventData.calls[currentIndex - 1];
 
+        const nextCall = eventData.calls[currentIndex - 1];
+        //eventData.calls[currentIndex].played = true;
         setCurrentCall(nextCall);
         setIsPlaying(true);
       } else {
@@ -87,8 +88,8 @@ function EventPlayer(props) {
 
 
   useEffect(() => {
-    if ( selectCallId && eventData && !currentCall) {
+    if (selectCallId && eventData && !currentCall) {
-      const call = eventData.calls.find( (call) => call._id == selectCallId);
+      const call = eventData.calls.find((call) => call._id == selectCallId);
       if (call) {
         setCurrentCall(call);
       }
@@ -103,9 +104,7 @@ function EventPlayer(props) {
           <Sidebar.Pusher
             style={{ minHeight: '100vh' }}
           >
-
+            <ListEventCalls eventData={eventData} activeCallId={isPlaying ? currentCallId : false} playCall={playCall} />
-            <ListEventCalls eventData={eventData} activeCallId={isPlaying?currentCallId:false} playCall={playCall} />
-
           </Sidebar.Pusher>
         </Sidebar.Pushable>
         <Rail position='right' className="desktop-only"  >

frontend/src/Event/ListEventCalls.js

@@ -28,6 +28,7 @@ const ListEventCalls = (props) => {
         <Table id="calls" unstackable  >
           <Table.Header >
             <Table.Row>
+            <Table.HeaderCell> </Table.HeaderCell>
               <Table.HeaderCell>Len</Table.HeaderCell>
               <Table.HeaderCell>Talkgroup</Table.HeaderCell>
               <Table.HeaderCell>Time</Table.HeaderCell>

frontend/src/features/api/apiSlice.js

@@ -25,13 +25,20 @@ export const apiSlice = createApi({
             // The URL for the request is '/fakeApi/posts'
             query: () => ({ url: '/events' }),
             transformResponse: responseData => {
-                return responseData.sort(function compareFn(a, b) { if (a.createdAt < b.createdAt) return 1; else return -1; })
+                return responseData.sort(function compareFn(a, b) { if (a.createdAt < b.createdAt) return 1; else return -1; });
               }
         }),
         getEvent: builder.query({
             // The URL for the request is '/fakeApi/posts'
             query: (eventId) => ({ url: `/events/${eventId}` }),
-
+            transformResponse: responseData => {
+        
+                //let temp = responseData.sort(function compareFn(a, b) { if (a.createdAt < b.createdAt) return 1; else return -1; })
+                responseData.calls.forEach(function (call) {
+                    call.played = false;
+                  });
+                return responseData;
+              }
         }),
         getTalkgroups: builder.query({
             // The URL for the request is '/fakeApi/posts'