Cleaned up Events

README.md

@@ -194,7 +194,7 @@ Then switch to the scanner db: `use scanner`
 And then add an index:
 
 ```
-db.calls.createIndex( {shortName: 1, time: -1,  star: -1, talkgroupNum: 1})
+db.calls.createIndex( {shortName: 1, time: -1, talkgroupNum: 1})
 ```
 
 ### Upgrading MongoDB

backend/controllers/events.js

@@ -69,7 +69,8 @@ exports.addNewEvent = async function (req, res, next) {
             calls = calls.sort(compareCalls);
             event.startTime = new Date(calls[0].time);
             event.endTime = new Date(calls[calls.length - 1].time);
-            event.expireTime = event.startTime;
+            event.expireTime = new Date();
+            event.expireTime.setDate(event.startTime.getDate() + 29);
             calls.forEach((call) => {
                 if (event.shortNames.indexOf(call.shortName) === -1) {
                     event.shortNames.push(call.shortName);

frontend/src/Call/components/PlaylistBuilder.js

@@ -19,6 +19,7 @@ import {
   Message
 } from "semantic-ui-react";
 import { useAddNewEventMutation, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
+import PlaylistItem from "./PlaylistItem"
 
 function PlaylistBuilder(props) {
   const { shortName } = useParams();
@@ -75,6 +76,17 @@ function PlaylistBuilder(props) {
     console.log("Dropping: " + callId);
     addCall(callsData.entities[callId])
   }
+
+const removeItem = (call) => {
+  if (call) {
+    const found = playlist.findIndex(c => c._id == call._id);
+    if (found!=-1) {
+      playlist.splice(found,1)
+      setPlaylist([...playlist.sort(compareCalls)])
+    }
+  }
+}
+
   let listItems = "";
 
   listItems = playlist.map((call, index) => {
@@ -84,16 +96,7 @@ function PlaylistBuilder(props) {
       tgAlpha = talkgroup.alpha?talkgroup.alpha:tgAlpha;
     }
 
-    const time = new Date(call.time);
-    const callTime = time.toLocaleTimeString();
-    const callDate = time.toLocaleDateString();
-
-    return ( <Table.Row key={index}>
-      <Table.Cell>{call.len} </Table.Cell>
-      <Table.Cell>{tgAlpha}</Table.Cell>
-      <Table.Cell>{callTime}</Table.Cell>
-    </Table.Row>
-    )
+    return ( <PlaylistItem call={call} tgAlpha={tgAlpha} index={index} removeItem={removeItem}/> )
   })
 
   const submitPlaylist = () => {

frontend/src/Call/components/PlaylistItem.js

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import {
+  Table,
+  Icon,
+  Label
+} from "semantic-ui-react";
+
+
+
+const PlaylistItem = (props) => {
+  const call = props.call;
+  const tgAlpha = props.tgAlpha;
+  const removeItem = props.removeItem;
+  const index = props.index;
+  const [removeVisible, setRemoveVisible] = useState(false);
+
+
+
+  const handleRemoveClicked = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+    removeItem(call);
+  }
+
+  let removeButton;
+
+
+
+
+  if (removeVisible) {
+    removeButton = <Icon name='delete' color="red"/>
+  } else {
+    removeButton = <Icon name='delete' color="grey"/>
+  }
+
+
+
+  const time = new Date(call.time);
+  const callTime = time.toLocaleTimeString();
+  return (
+    <Table.Row key={index} onClick={(e) => props.onClick({ call: call }, e)}>
+      <Table.Cell>{call.len} </Table.Cell>
+      <Table.Cell>{tgAlpha}</Table.Cell>
+      <Table.Cell>{callTime}</Table.Cell>
+      <Table.Cell onMouseEnter={() => setRemoveVisible(true)} onMouseLeave={() => setRemoveVisible(false)} onClick={handleRemoveClicked}>{removeButton}</Table.Cell>
+    </Table.Row>
+
+
+  );
+}
+
+export default PlaylistItem;

frontend/src/Event/ViewEvent.js

@@ -127,14 +127,14 @@ function ViewEvent(props) {
       <Grid style={{ paddingTop: '4em' }}>
         <Grid.Column mobile={1} tablet={1} computer={1} ></Grid.Column>
         <Grid.Column mobile={16} tablet={8} computer={4}>
-          <Container text >
+          
             {eventData&& 
             <>
             <p>{eventData.description}</p>
             <Header size='tiny'>Expires {expirationDate}</Header>
             </>
           }
-          </Container>
+          
         </Grid.Column>
         <Grid.Column mobile={8} tablet={8} computer={4}>
           <Header as="h2">{dates.part1} <br/>→ {dates.part2}</Header>