Sending network traffic!

frontend/src/Call/components/PlaylistBuilder.js

@@ -1,4 +1,5 @@
 import { useSelector, useDispatch } from 'react-redux'
+import { useParams } from 'react-router-dom';
 import React, { useState } from "react";
 import {
   Header,
@@ -9,13 +10,45 @@ import {
   Statistic,
   Icon,
   Menu,
-  Tab
+  Tab,
+  Table,
+  Modal,
+  Button,
+  Image,
+  Form
 } from "semantic-ui-react";
+import { useAddNewEventMutation, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
 
 function PlaylistBuilder(props) {
-
+  const { shortName } = useParams();
+  const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
+  const [addNewEvent, { isLoading }] = useAddNewEventMutation()
   const { loading: callsLoading, data: callsData } = useSelector((state) => state.calls);
   const [playlist, setPlaylist] = useState([]);
+  const [open, setOpen] = React.useState(false);
+  const [title, setTitle] = useState("")
+  const [description, setDescription] = useState("")
+  const handleTitleChange = (e, { name, value }) => setTitle(value);
+  const handleDescriptionChange = (e, { name, value }) => setDescription(value);
+
+
+  const compareCalls = (a, b) => {
+    const aTimestamp = new Date(a.time).getTime()
+    const bTimestamp = new Date(b.time).getTime()
+    if (aTimestamp > bTimestamp) {
+      return -1
+    } else {
+      return 1
+    }
+  }
+  const addCall = (call) => {
+    const found = playlist.find(c => c._id == call._id);
+    if (!found) {
+      playlist.push(call);
+      setPlaylist([...playlist.sort(compareCalls)])
+    }
+
+  }
 
   const onDragOver = (event) => {
     // It also receives a DragEvent.
@@ -32,30 +65,109 @@ function PlaylistBuilder(props) {
     event.preventDefault();
   }
 
+
   const onDrop = (event) => {
     // Here, we will:
     // - update the rendered list
     // - and reset the DnD state
     var callId = event.dataTransfer.getData("call-id");
     console.log("Dropping: " + callId);
-    console.log("Found: " + callsData.entities[callId].freq);
-    setPlaylist([...playlist, callId]);
+    addCall(callsData.entities[callId])
   }
   let listItems = "";
 
-    listItems = playlist.map((callId, index) => {
-      const call = callsData.entities[callId];
-      return(<li><Icon name="wait" />{call.time}</li>)
-    })
-  
+  listItems = playlist.map((call, index) => {
+    let tgAlpha = "";
+    if (talkgroupsData) {
+      const talkgroup = talkgroupsData.talkgroups[call.talkgroupNum]
+      tgAlpha = talkgroup.alpha
+    }
+    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>
+    )
+  })
+
+  const submitPlaylist = () => {
+    setOpen(true)
+  }
+
+  const handleSubmit = () => {
+    console.log(title)
+    setOpen(false)
+    const callIds = playlist.map( (call) => call._id)
+    const event = {
+      title,
+      description,
+      callIds
+    }
+   addNewEvent(event)
+    setTitle("")
+    setDescription("")
+    setPlaylist([])
+  }
   return (
-    <Tab.Pane attached='bottom' onDragOver={onDragOver} onDrop={onDrop}>
-      <ul>
-        {listItems}
-        <li>test</li>
-      </ul>
-    </Tab.Pane>
+    <>
+        <Modal
+      onClose={() => setOpen(false)}
+      onOpen={() => setOpen(true)}
+      open={open}
+    >
+      <Modal.Header>Submit an Event</Modal.Header>
+      <Modal.Content image>
+        <Image size='medium' src='https://react.semantic-ui.com/images/avatar/large/rachel.png' wrapped />
+        <Modal.Description>
+          <Header>Event</Header>
+          <Form>
+            <Form.Input
+              name="title"
+              value={title}
+              label="Title"
+              onChange={handleTitleChange}
+              />
+            <Form.TextArea
+              name="description"
+              value={description}
+              label="Description"
+              placeholder='Please describe the event'
+              onChange={handleDescriptionChange}
+              />
+
+
+          </Form>
+        </Modal.Description>
+      </Modal.Content>
+      <Modal.Actions>
+        <Button color='black' onClick={() => setOpen(false)}>
+          Nope
+        </Button>
+        <Button
+          content="Submit"
+          labelPosition='right'
+          icon='checkmark'
+          onClick={handleSubmit}
+          positive
+        />
+      </Modal.Actions>
+    </Modal>
+      <Tab.Pane attached='bottom' onDragOver={onDragOver} onDrop={onDrop}>
+        <Table basic="very">
+          <Table.Body>
+          {listItems}
+          </Table.Body>
+        </Table>
+      </Tab.Pane>
+      <Menu>
+        <Menu.Item name="clear" onClick={() => setPlaylist([])}><Icon name='delete' />Clear</Menu.Item>
+        <Menu.Item active name="submit" onClick={submitPlaylist}><Icon name="cloud upload" />Submit</Menu.Item>
+      </Menu>
+    </>
   )
 }
 

frontend/src/features/api/apiSlice.js

@@ -25,6 +25,13 @@ export const apiSlice = createApi({
             // The URL for the request is '/fakeApi/posts'
             query: (shortName) => ({ url: `/${shortName}/talkgroups` })
         }),
+        addNewEvent: builder.mutation({
+            query: initialEvent => ({
+                url: '/events',
+                method: 'POST',
+                body: initialEvent
+            })
+        })
 
     })
 })
@@ -45,4 +52,4 @@ export const selectActiveSystems = createSelector(
 )
 
 // Export the auto-generated hook for the `getPosts` query endpoint
-export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery } = apiSlice
+export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useAddNewEventMutation } = apiSlice