diff --git a/frontend/src/Call/CallInfo.js b/frontend/src/Call/CallInfo.js
index 71ae3c6..7ba5b48 100644
--- a/frontend/src/Call/CallInfo.js
+++ b/frontend/src/Call/CallInfo.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import {
Header,
Divider,
@@ -6,81 +6,108 @@ import {
Segment,
Statistic,
Icon,
- Menu
+ Menu,
+ Tab
} from "semantic-ui-react";
-
+import PlaylistBuilder from "./PlaylistBuilder"
// ----------------------------------------------------
function CallInfo(props) {
- let srcList = "";
- let callLength = "-";
- let callFreq = "-";
- let callDate = "-";
- let callTime = "-";
- let talkgroupNum = "-";
- let callDownload = "";
- let callTweet = "";
- if (props.call) {
- const currentCall = props.call;
- var time = new Date(currentCall.time);
- callTime = time.toLocaleTimeString();
- callDate = time.toLocaleDateString();
- if (currentCall.freq) {
- var freq = currentCall.freq / 1000000;
- callFreq = Math.round(freq * 1000) / 1000;
- }
- srcList = currentCall.srcList.map((source, index) => {source.src}[{source.pos}]);
- callLength = currentCall.len;
- talkgroupNum = currentCall.talkgroupNum;
- callDownload = currentCall.url;
- callTweet = "https://twitter.com/intent/tweet?url="+encodeURIComponent(document.location.origin+props.link)+"&via="+encodeURIComponent("OpenMHz");
+
+
+ let srcList = "";
+ let callLength = "-";
+ let callFreq = "-";
+ let callDate = "-";
+ let callTime = "-";
+ let talkgroupNum = "-";
+ let callDownload = "";
+ let callTweet = "";
+ if (props.call) {
+ const currentCall = props.call;
+ var time = new Date(currentCall.time);
+ callTime = time.toLocaleTimeString();
+ callDate = time.toLocaleDateString();
+ if (currentCall.freq) {
+ var freq = currentCall.freq / 1000000;
+ callFreq = Math.round(freq * 1000) / 1000;
}
- return (
-
-
-
-
- {srcList}
-
-
-
- Seconds
- {callLength}
-
-
- Talkgroup
- {talkgroupNum}
-
-
-
-
-
-
- {callTime}
-
-
-
-
-
- {callDate}
-
-
-
-
-
- {callFreq} MHz
-
-
-
-
-
-
+
+
+ {srcList}
+
+
+
+ Seconds
+ {callLength}
+
+
+ Talkgroup
+ {talkgroupNum}
+
+
+
+
+
+
+ {callTime}
+
+
+
+
+
+ {callDate}
+
+
+
+
+
+ {callFreq} MHz
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default CallInfo;
diff --git a/frontend/src/Call/CallItem.js b/frontend/src/Call/CallItem.js
index dcfd011..9b3c3fb 100644
--- a/frontend/src/Call/CallItem.js
+++ b/frontend/src/Call/CallItem.js
@@ -34,6 +34,23 @@ const CallItem = (props) => {
var rowSelected = {};
let starButton;
var starClickable = {};
+
+ const onDragStart = (event) => {
+ // It receives a DragEvent
+ // which inherits properties from
+ // MouseEvent and Event
+ // so we can access the element
+ // through event.currentTarget
+
+ // Later, we'll save
+ // in a hook variable
+ // the item being dragged
+ const callId = event.currentTarget.dataset.callid;
+ event.dataTransfer.setData("call-id", callId);
+ console.log("Dragging: " + callId);
+
+ }
+
if (!starClicked) {
starClickable = { link: true };
}
@@ -68,7 +85,7 @@ const CallItem = (props) => {
talkgroup = props.talkgroups[call.talkgroupNum].description;
}
return (
- props.onClick({ call: call }, e)} {...rowSelected}>
+ props.onClick({ call: call }, e)} {...rowSelected} onDragStart={onDragStart} data-callid={call._id}>
{call.len}
{talkgroup}
{time.toLocaleTimeString()}
diff --git a/frontend/src/Call/GroupModal.js b/frontend/src/Call/GroupModal.js
index 59ebcbe..22c23d2 100644
--- a/frontend/src/Call/GroupModal.js
+++ b/frontend/src/Call/GroupModal.js
@@ -1,4 +1,4 @@
-import React, { Component, useState } from "react";
+import React, { useState } from "react";
import { useGetGroupsQuery } from '../features/api/apiSlice'
import { setGroupFilter } from "../features/callPlayer/callPlayerSlice";
import { useSelector, useDispatch } from 'react-redux'
@@ -12,7 +12,6 @@ import {
import "./FilterModal.css";
function GroupModal (props) {
- const shortName = useSelector((state) => state.callPlayer.shortName);
const { data, isError, isLoading, isSuccess,error } = useGetGroupsQuery(props.shortName);
const [open, setOpen] = useState(false);
const [selectedGroup, setSelectedGroup] = useState(false);
diff --git a/frontend/src/Call/PlaylistBuilder.js b/frontend/src/Call/PlaylistBuilder.js
new file mode 100644
index 0000000..1ca25cb
--- /dev/null
+++ b/frontend/src/Call/PlaylistBuilder.js
@@ -0,0 +1,49 @@
+import { useSelector, useDispatch } from 'react-redux'
+
+import {
+ Header,
+ Divider,
+ List,
+ Segment,
+ Statistic,
+ Icon,
+ Menu,
+ Tab
+ } from "semantic-ui-react";
+
+ function PlaylistBuilder(props) {
+
+ const { loading: callsLoading, data: callsData } = useSelector((state) => state.calls);
+
+ const onDragOver = (event) => {
+ // It also receives a DragEvent.
+ // Later, we'll read the position
+ // of the item from event.currentTarget
+ // and store the updated list state
+
+ // We need to prevent the default behavior
+ // of this event, in order for the onDrop
+ // event to fire.
+ // It may sound weird, but the default is
+ // to cancel out the drop.
+
+ 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);
+ }
+
+ return (
+
+ Placeholder
+
+ )
+ }
+
+ export default PlaylistBuilder;
\ No newline at end of file