Cleaned up Events

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;