)
+ }
+
+ return (
+
props.onClick({ call: call }, e)} {...rowSelected} onDragStart={onDragStart} data-callid={call._id}>
+ {playStatus}
+ {call.len}
+ {talkgroup}
+ {time.toLocaleTimeString()}
+ setStarVisible(true)} onMouseLeave={() => setStarVisible(false)} onClick={handleStarClicked}>{starButton}
+
+ );
+}
+
+export default CallItem;
diff --git a/frontend/src/Call/components/CallLinks.js b/frontend/src/Call/components/CallLinks.js
new file mode 100644
index 0000000..23a5276
--- /dev/null
+++ b/frontend/src/Call/components/CallLinks.js
@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+export function useCallLink(currentCall) {
+ const filterType = useSelector((state) => state.callPlayer.filterType);
+ const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId);
+ const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups);
+ const shortName = useSelector((state) => state.callPlayer.shortName);
+ if (currentCall) {
+ let search = ""
+ const time = new Date(currentCall.time);
+ const callTime = time.toLocaleTimeString();
+ const callDate = time.toLocaleDateString();
+
+ switch (filterType) {
+
+ case 1:
+ search = `filter-type=group&filter-code=${filterGroupId}&`;
+ break;
+ case 2:
+ search = `filter-type=talkgroup&filter-code=${filterTalkgroups}&`;
+ break;
+ default:
+ case 0:
+ break;
+
+ }
+ const callLink = "/system/" + shortName + "?" + search + "call-id=" + currentCall._id + "&time=" + (time.getTime() + 1);
+ const callDownload = currentCall.url;
+ const callTweet = "https://twitter.com/intent/tweet?url=" + encodeURIComponent(document.location.origin + callLink) + "&via=" + encodeURIComponent("OpenMHz");
+
+ return { callLink, callDownload, callTweet }
+ } else {
+ return { callLink: "", callDownload: "", callTweet: "" }
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/client/Call/FilterModal.css b/frontend/src/Call/components/FilterModal.css
similarity index 100%
rename from frontend/src/client/Call/FilterModal.css
rename to frontend/src/Call/components/FilterModal.css
diff --git a/frontend/src/Call/components/FilterModal.js b/frontend/src/Call/components/FilterModal.js
new file mode 100644
index 0000000..8bbb7fa
--- /dev/null
+++ b/frontend/src/Call/components/FilterModal.js
@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+import { setGroupFilter, setTalkgroupFilter, setAllFilter, setStarredFilter } from "../../features/callPlayer/callPlayerSlice";
+import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+ Modal,
+ Button,
+ Icon,
+ Tab,
+ Header,
+ Dropdown,
+ Checkbox,
+ Divider
+} from "semantic-ui-react";
+import "./FilterModal.css";
+
+
+function FilterModal(props) {
+ const globalFilterStarred = useSelector((state) => state.callPlayer.filterStarred);
+ const { data:groupsData, isSuccess:isGroupsSuccess } = useGetGroupsQuery(props.shortName);
+ const { data:talkgroupsData, isSuccess:isTalkgroupsSuccess } = useGetTalkgroupsQuery(props.shortName);
+ const [selectedTalkgroup, setSelectedTalkgroup] = useState([]);
+ const [selectedGroup, setSelectedGroup] = useState(false);
+ const [filterStarred, setFilterStarred] = useState(false);
+ const [activeTab, setActiveTab] = useState(0);
+ const dispatch = useDispatch()
+
+ const handleTabChange = (e, data) => setActiveTab(data.activeIndex);
+ const handleGroupChange = (e, { name, value }) => setSelectedGroup(value);
+ const handleTalkgroupChange = (e, { name, value }) => setSelectedTalkgroup(value);
+ const toggleStarred = () => setFilterStarred(!filterStarred);
+ const handleClose = () => props.onClose(false);
+ const onClose = props.onClose;
+
+ function handleDone(onClose) {
+ switch (activeTab) {
+
+ case 1:
+ if (selectedGroup) {
+ dispatch(setGroupFilter(selectedGroup));
+ props.onClose(true);
+ } else {
+ props.onClose(false);
+ }
+ break;
+ case 2:
+ if (selectedTalkgroup) {
+ dispatch(setTalkgroupFilter(selectedTalkgroup))
+ props.onClose(true);
+ } else {
+ props.onClose(false);
+ }
+ break;
+ default:
+ case 0:
+ dispatch(setAllFilter());
+ props.onClose(true);
+ break;
+ }
+ if (globalFilterStarred !== filterStarred) {
+ dispatch(setStarredFilter(filterStarred));
+ }
+
+ }
+
+
+
+ let talkgroupList = [];
+ if (isTalkgroupsSuccess) {
+ for (const num in talkgroupsData["talkgroups"]) {
+ const talkgroup = talkgroupsData["talkgroups"][num];
+ const obj = {
+ key: talkgroup.num,
+ value: talkgroup.num,
+ text: talkgroup.description
+ }
+ talkgroupList.push(obj);
+ }
+ }
+
+ let groupList = [];
+ if (isGroupsSuccess) {
+ for (const num in groupsData) {
+ const group = groupsData[num]
+ const obj = {
+ key: group._id,
+ value: group._id,
+ text: group.groupName
+ }
+ groupList.push(obj);
+ }
+ }
+
+ const panes = [
+ {
+ menuItem: 'All', render: () => {
+ return (
+
+
+ Dispaly all of the calls.
+
+ )
+ }
+ },
+ {
+ menuItem: 'Groups', render: () => {
+ return (
+
+
+ )
+ }
+ },
+ {
+ menuItem: 'Talkgroups', render: () => {
+ return (
+
+
+ )
+ }
+ },
+ ]
+ return (
+
+
+ Select a Filter
+
+
+
+
+
+ handleDone(onClose)} >
+
+
+
+
+ )
+}
+
+export default FilterModal;
diff --git a/frontend/src/Call/components/GroupModal.js b/frontend/src/Call/components/GroupModal.js
new file mode 100644
index 0000000..da70d4b
--- /dev/null
+++ b/frontend/src/Call/components/GroupModal.js
@@ -0,0 +1,110 @@
+import React, { Component, useState, useEffect } from "react";
+import { useGetGroupsQuery, useGetSystemsQuery, } from '../../features/api/apiSlice'
+import { setGroupFilter, setCenterCall, setBackgroundAutoplay } from "../../features/callPlayer/callPlayerSlice";
+import { useSelector, useDispatch } from 'react-redux'
+
+import {
+ Modal,
+ Button,
+ Icon,
+ Dropdown,
+ Grid,
+ Form
+} from "semantic-ui-react";
+import "./FilterModal.css";
+
+function GroupModal(props) {
+ const shortName = useSelector((state) => state.callPlayer.shortName);
+ const backgroundAutoplay = useSelector((state) => state.callPlayer.backgroundAutoplay);
+ const centerCall = useSelector((state) => state.callPlayer.centerCall);
+ const { data: groupData, isSuccess } = useGetGroupsQuery(props.shortName);
+ const { data: allSystems } = useGetSystemsQuery();
+ const [selectedGroup, setSelectedGroup] = useState(false);
+ const [groupOptions, setGroupOptions] = useState([]);
+ const [localCenterCall, setLocalCenterCall] = useState(centerCall);
+ const [localBackgroundAutoplay, setLocalBackgroundAutoplay] = useState(backgroundAutoplay);
+ const dispatch = useDispatch()
+ const onClose = props.onClose;
+ let system = false;
+
+
+ if (allSystems) {
+ system = allSystems.systems.find((system) => system.shortName === shortName)
+ }
+
+ function handleDone(onClose) {
+ dispatch(setCenterCall(localCenterCall));
+ dispatch(setBackgroundAutoplay(localBackgroundAutoplay));
+ if (selectedGroup && (selectedGroup!="all")) {
+ dispatch(setGroupFilter(selectedGroup))
+
+ //dispatch({type: types.SET_GROUP_FILTER, groupId: selectedGroup })
+ onClose(true);
+ } else {
+ onClose(false);
+ }
+ }
+
+
+ useEffect(() => {
+ if (isSuccess) {
+ let temp = [{
+ key: "all",
+ value: "all",
+ text: "All Calls"
+ }];
+ for (const num in groupData) {
+ const group = groupData[num];
+ const obj = {
+ key: group._id,
+ value: group._id,
+ text: group.groupName
+ }
+ temp.push(obj);
+ }
+ setGroupOptions(temp);
+ }
+ }, [groupData]);
+
+
+
+
+
+ return (
+
+
+
+ {system && system.name}
+
+
+
+
+
+
+ {system && system.description}
+
+
+ Choose the type of calls you want to listen to
+
+
+
+
+
+
+
+
+
+ handleDone(onClose)} >
+
+
+
+
+ )
+}
+
+export default GroupModal;
diff --git a/frontend/src/Call/components/ListCalls.js b/frontend/src/Call/components/ListCalls.js
new file mode 100644
index 0000000..5a70e19
--- /dev/null
+++ b/frontend/src/Call/components/ListCalls.js
@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from "react";
+import { useParams } from 'react-router-dom';
+import CallItem from "./CallItem";
+import {
+ Icon,
+ Table,
+ Ref
+} from "semantic-ui-react";
+import "../CallPlayer.css";
+import { useGetTalkgroupsQuery } from '../../features/api/apiSlice'
+import { useSelector } from 'react-redux'
+
+// ----------------------------------------------------
+const ListCalls = (props) => {
+ const activeCallRef = useRef();
+ const activeCallId = props.activeCallId;
+ const { shortName } = useParams();
+ const centerCall = useSelector((state) => state.callPlayer.centerCall);
+ const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
+ //https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
+ //https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
+
+
+
+ useEffect(() => {
+ if (activeCallRef.current && centerCall) {
+ activeCallRef.current.scrollIntoView({
+ block: "center",
+ });
+ }
+ },[activeCallId]);
+
+ const callsData = props.callsData;
+ return (
+
+
+
+
+
+ Len
+ Talkgroup
+ Time
+
+
+ {callsData &&
+
+
+ {
+ props.callsData.ids.map((callId, index) => {
+ if (callId === activeCallId) {
+ return (
+ }
+ })
+
+ }
+
+
+ }
+
+
+
+ );
+
+}
+
+export default ListCalls;
diff --git a/frontend/src/Call/components/MediaPlayer.js b/frontend/src/Call/components/MediaPlayer.js
new file mode 100644
index 0000000..0c16882
--- /dev/null
+++ b/frontend/src/Call/components/MediaPlayer.js
@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from "react";
+import {
+ Menu,
+ Icon,
+ Progress,
+ Label
+} from "semantic-ui-react";
+import ReactAudioPlayer from 'react-audio-player'
+
+
+
+const MediaPlayer = (props) => {
+
+ const audioRef = React.createRef();
+ const [sourceIndex, setSourceIndex] = useState(0);
+ const [playProgress, setPlayProgress] = useState(0);
+ const [playTime, setPlayTime] = useState(0);
+ const [isPlaying, setIsPlaying] = useState(false);
+ const parentHandlePlayPause = props.onPlayPause
+ const playSilence = props.playSilence;
+
+ const handlePause = () => { setIsPlaying(false); }
+ const handlePlay = () => { setIsPlaying(true); }
+ const playPause = () => {
+ const audio = audioRef.current.audioEl.current;
+ if (isPlaying) {
+ setIsPlaying(false);
+ parentHandlePlayPause(false);
+ audio.pause();
+ } else {
+ setIsPlaying(true);
+ parentHandlePlayPause(true);
+ audio.play();
+ }
+ }
+
+ const call = props.call;
+
+ useEffect(() => {
+
+ const audio = audioRef.current.audioEl.current;
+ const onEnded = props.onEnded;
+ setSourceIndex(0);
+ if (call) {
+ audio.src = call.url;
+ const playPromise = audio.play();
+
+ // In browsers that don’t yet support this functionality,
+ // playPromise won’t be defined.
+ if (playPromise !== undefined) {
+ playPromise.then(function () {
+
+ }).catch(function (error) {
+ console.log("Automatic playback failed: " + error);
+ handlePause();
+ onEnded();
+ // Show a UI element to let the user manually start playback.
+ });
+ } else {
+ audio.src = false;
+ }
+ }
+ }, [call]);
+
+ useEffect(() => {
+ const audio = audioRef.current.audioEl.current;
+
+ setSourceIndex(0);
+ navigator.mediaSession.metadata = new MediaMetadata({
+ title: "Waiting for Call...",
+ album: 'OpenMHz',
+ artwork: [
+ { src: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+ { src: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
+ { src: '/android-chrome-192x192.png', sizes: '512x512', type: 'image/png' },
+ ]
+ });
+ audio.src = "data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV////////////////////////////////////////////AAAAAExhdmM1OC4xMwAAAAAAAAAAAAAAACQDkAAAAAAAAAGw9wrNaQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+MYxAAAAANIAAAAAExBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDsAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxHYAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";
+ const playPromise = audio.play();
+
+ // In browsers that don’t yet support this functionality,
+ // playPromise won’t be defined.
+ if (playPromise !== undefined) {
+ playPromise.then(function () {
+
+ }).catch(function (error) {
+ console.log("Automatic playback failed: " + error);
+ // Show a UI element to let the user manually start playback.
+ });
+ } else {
+ audio.src = false;
+ }
+
+ }, [playSilence]);
+
+
+ const updatePlayProgress = () => {
+ const audio = audioRef.current.audioEl.current;
+ const { currentTime, duration } = audio;
+
+
+ // this checks to see if it should display the next Source ID
+ if (call && ((call.srcList.length - 1) >= (sourceIndex + 1)) && (currentTime > call.srcList[sourceIndex + 1].pos)) {
+ setSourceIndex(sourceIndex + 1);
+ }
+
+ // updates the play percentage progress and current playing time
+ setPlayProgress(currentTime / duration * 100);
+ setPlayTime(Math.floor(currentTime));
+
+
+ }
+
+
+
+
+ let playEnabled = { "disabled": true }
+ let sourceId = "-";
+
+ if (call) {
+ if (call.srcList.length > sourceIndex) {
+ sourceId = call.srcList[sourceIndex].src;
+ }
+ playEnabled = {};
+ }
+ return (
+
+
+
+ {
+ isPlaying
+ ? (
+
+
+ {playTime}
+ Sec
+
+
+ {sourceId}
+
+
+
+
+ )
+}
+
+export default MediaPlayer;
diff --git a/frontend/src/Call/components/PlaylistBuilder.js b/frontend/src/Call/components/PlaylistBuilder.js
new file mode 100644
index 0000000..941b55d
--- /dev/null
+++ b/frontend/src/Call/components/PlaylistBuilder.js
@@ -0,0 +1,209 @@
+import { useSelector, useDispatch } from 'react-redux'
+import { Link, useParams } from 'react-router-dom';
+import React, { useState } from "react";
+import {
+ Header,
+ Divider,
+ List,
+ ListItem,
+ Segment,
+ Statistic,
+ Icon,
+ Menu,
+ Tab,
+ Table,
+ Modal,
+ Button,
+ Image,
+ Form,
+ Message
+} from "semantic-ui-react";
+import { useAddNewEventMutation, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
+import { setPlaylist, addToPlaylist, removeFromPlaylist } from '../../features/callPlayer/callPlayerSlice';
+import PlaylistItem from "./PlaylistItem"
+
+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 [open, setOpen] = React.useState(false);
+ const [successModalOpen, setSuccessModalOpen] = useState(false);
+ const [eventUrl, setEventUrl] = useState("");
+ const [eventPath, setEventPath] = useState("");
+ const [submitMessage, setSubmitMessage] = 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 playlist = useSelector((state) => state.callPlayer.playlist);
+
+ const dispatch = useDispatch();
+
+
+
+
+ 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 removeItem = (call) => {
+ dispatch(removeFromPlaylist(call))
+ }
+
+ 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);
+ dispatch(addToPlaylist(callsData.entities[callId]))
+ }
+
+
+
+ let listItems = "";
+
+ listItems = playlist.map((call, index) => {
+ let tgAlpha = call.talkgroupNum;
+ if (talkgroupsData) {
+ const talkgroup = talkgroupsData.talkgroups[call.talkgroupNum]
+ if (talkgroup && talkgroup.alpha!=" ") {
+ tgAlpha = talkgroup.alpha;
+ }
+ }
+
+ return (
)
+ })
+
+ const submitPlaylist = () => {
+ setSubmitMessage(false);
+ setOpen(true)
+ }
+
+ const handleSubmit = async () => {
+ if ((title.length < 3) || (description.length < 3)) {
+ setSubmitMessage("Please fill out the title and description with something useful");
+ } else {
+ setOpen(false);
+ const callIds = playlist.map((call) => call._id)
+ const event = {
+ title,
+ description,
+ callIds
+ }
+ try {
+ const returned = await addNewEvent(event).unwrap();
+ console.log(returned);
+ setEventUrl(new URL(returned.url, document.baseURI).href)
+ setEventPath(returned.url);
+ setSuccessModalOpen(true);
+ } catch (error) {
+ console.error(error)
+ // you can handle errors here if you want to
+ }
+
+ setTitle("");
+ setDescription("");
+ dispatch(setPlaylist([]));
+ }
+ }
+
+ let content = (
)
+ if (playlist.length > 0) {
+ content = (
)
+ }
+
+ return (
+ <>
+
setSuccessModalOpen(false)}
+ size='tiny'
+ >
+ Event Successfully Created
+ Your Event is here:
+
+
+ setSuccessModalOpen(false)}
+ positive
+ />
+
+
+
setOpen(false)}
+ onOpen={() => setOpen(true)}
+ open={open}
+
+ >
+ Submit an Event
+
+
+
+
+ The Events feature is a work in progress! Things may break, change, or get deleted. Contact me with ideas or problems: luke@robotastic.com
+
+
+
+ {submitMessage&& {submitMessage} }
+
+
+
+ setOpen(false)}>
+ Nope
+
+
+
+
+ {content}
+
+
+ dispatch(setPlaylist([]))}>
+
+
+ )
+}
+
+export default PlaylistBuilder;
\ No newline at end of file
diff --git a/frontend/src/Call/components/PlaylistItem.js b/frontend/src/Call/components/PlaylistItem.js
new file mode 100644
index 0000000..fdf647b
--- /dev/null
+++ b/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 =
+ } else {
+ removeButton =
+ }
+
+
+
+ const time = new Date(call.time);
+ const callTime = time.toLocaleTimeString();
+ return (
+
+ {call.len}
+ {tgAlpha}
+ {callTime}
+ setRemoveVisible(true)} onMouseLeave={() => setRemoveVisible(false)} onClick={handleRemoveClicked}>{removeButton}
+
+
+
+ );
+}
+
+export default PlaylistItem;
diff --git a/frontend/src/Call/components/SupportModal.js b/frontend/src/Call/components/SupportModal.js
new file mode 100644
index 0000000..6226040
--- /dev/null
+++ b/frontend/src/Call/components/SupportModal.js
@@ -0,0 +1,41 @@
+import {useState} from 'react';
+import {
+ Modal,
+ Button,
+ Icon
+} from "semantic-ui-react";
+import "./FilterModal.css";
+
+
+function SupportModal(props) {
+
+ const [open, setOpen] = useState(false);
+
+ const handleClose = () => props.onClose();
+
+ return (
+
setOpen(false)} onOpen={() => setOpen(true)} trigger={
} size='tiny' >
+ Support OpenMHz
+
+
+ If OpenMHz brings you joy, think about becoming a supporter! It will cover hosting costs and help keep me focused on development.
+ No worries if not, I am not having problems keeping it going.
+
+ Support
+
+
+
+
+ setOpen(false)} >
+ Done
+
+
+
+
+ )
+
+}
+
+export default SupportModal;
diff --git a/frontend/src/Common/NavBar.js b/frontend/src/Common/NavBar.js
new file mode 100644
index 0000000..3c1a65c
--- /dev/null
+++ b/frontend/src/Common/NavBar.js
@@ -0,0 +1,27 @@
+import {
+ Container,
+ Header,
+ Card,
+ Icon,
+ Menu,
+ Divider
+ } from "semantic-ui-react";
+ import { Link, useNavigate } from 'react-router-dom'
+
+
+ const NavBar = (props) => {
+
+
+ const navigate = useNavigate();
+ return (
+
+ Systems
+ Events
+ About
+
+ );
+ }
+
+
+ export default NavBar;
\ No newline at end of file
diff --git a/frontend/src/Event/EventCallInfo.js b/frontend/src/Event/EventCallInfo.js
new file mode 100644
index 0000000..4b75c6b
--- /dev/null
+++ b/frontend/src/Event/EventCallInfo.js
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
+import {
+ Header,
+ Divider,
+ List,
+ Segment,
+ Statistic,
+ Icon,
+ Menu,
+ Tab
+} from "semantic-ui-react";
+import CallInfoPane from "../Call/components/CallInfoPane"
+// ----------------------------------------------------
+function EventCallInfo(props) {
+ return (
+
+
+
+ );
+}
+
+export default EventCallInfo;
diff --git a/frontend/src/Event/EventCallItem.js b/frontend/src/Event/EventCallItem.js
new file mode 100644
index 0000000..796667a
--- /dev/null
+++ b/frontend/src/Event/EventCallItem.js
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import {
+ Table,
+ Icon,
+ Label
+} from "semantic-ui-react";
+
+import { useGetTalkgroupsQuery } from '../features/api/apiSlice'
+
+
+const EventCallItem = (props) => {
+ const call = props.call;
+ const activeCall = props.activeCall;
+ const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(call.shortName);
+
+
+ const time = new Date(call.time);
+
+
+
+ let rowSelected = {};
+
+
+
+
+
+
+ if (activeCall) {
+ rowSelected = {
+ positive: true,
+ color: "blue",
+ key: "blue",
+ inverted: "true"
+ }
+ }
+ let talkgroup;
+ if ((typeof talkgroupsData == 'undefined') || (typeof talkgroupsData.talkgroups[call.talkgroupNum] == 'undefined')) {
+ talkgroup = call.talkgroupNum;
+ } else {
+ talkgroup = talkgroupsData.talkgroups[call.talkgroupNum].description;
+ }
+
+ const cirlceStyle = {width:"4px",
+ margin:"6px",
+ height: "4px",
+ borderRadius:"50%"}
+
+
+ let playStatus = (<>)
+ if (activeCall) {
+ playStatus = (
)
+
+ } else {
+ playStatus = (
)
+ }
+
+ return (
+
props.onClick({ call: call }, e)} {...rowSelected}>
+ {playStatus}
+ {call.len}
+ {talkgroup}
+ {time.toLocaleTimeString()}
+ {call.shortName}
+
+ );
+}
+
+export default EventCallItem;
diff --git a/frontend/src/Event/EventPlayer.js b/frontend/src/Event/EventPlayer.js
new file mode 100644
index 0000000..9c10606
--- /dev/null
+++ b/frontend/src/Event/EventPlayer.js
@@ -0,0 +1,132 @@
+import React, { useEffect, useLayoutEffect, useState, useRef } from "react";
+import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
+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'
+
+import {
+ Container,
+ Label,
+ Rail,
+ Sticky,
+ Menu,
+ Icon,
+ Sidebar
+} from "semantic-ui-react";
+
+
+import { useCallLink } from "../Call/components/CallLinks";
+import "../Call/CallPlayer.css";
+
+
+
+// ----------------------------------------------------
+function EventPlayer(props) {
+
+
+ const eventData = props.eventData;
+ const selectCallId = props.selectCallId;
+
+
+ const [autoPlay, setAutoPlay] = useState(true);
+ const [currentCall, setCurrentCall] = useState(false);
+ const [isPlaying, setIsPlaying] = useState(false);
+
+
+ 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;
+
+ let currentCallId = false;
+
+ if (currentCall) {
+ currentCallId = currentCall._id;
+ }
+
+ const handlePlayPause = (playing) => {
+ setIsPlaying(playing);
+ }
+
+
+ const handleAutoPlay = (currentAutoPlay) => {
+ setAutoPlay(!currentAutoPlay);
+ }
+
+ const playCall = (data) => {
+ //data.call.played = true;
+ setCurrentCall(data.call);
+
+ setIsPlaying(true);
+ }
+
+
+ const callEnded = () => {
+ if (eventData) {
+ const currentIndex = eventData.calls.findIndex(call => call._id === currentCallId);
+ if (autoPlay && (currentIndex > 0)) {
+
+ const nextCall = eventData.calls[currentIndex - 1];
+ //eventData.calls[currentIndex].played = true;
+ setCurrentCall(nextCall);
+ setIsPlaying(true);
+ } else {
+ setIsPlaying(false);
+ }
+ } else {
+ console.log("Somehow called, callEnded() but callsData was false");
+ }
+ }
+
+
+
+ useEffect(() => {
+ if (selectCallId && eventData && !currentCall) {
+ const call = eventData.calls.find((call) => call._id == selectCallId);
+ if (call) {
+ setCurrentCall(call);
+ }
+ }
+ }, [selectCallId, eventData])
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ handleAutoPlay(autoPlay)}>Autoplay
+
+
+
+
+
+ );
+}
+
+
+export default EventPlayer;
diff --git a/frontend/src/Event/ListEventCalls.js b/frontend/src/Event/ListEventCalls.js
new file mode 100644
index 0000000..9581c3d
--- /dev/null
+++ b/frontend/src/Event/ListEventCalls.js
@@ -0,0 +1,60 @@
+import React, { useEffect, useRef } from "react";
+import EventCallItem from "./EventCallItem";
+import {
+ Icon,
+ Table,
+ Ref
+} from "semantic-ui-react";
+import "../Call/CallPlayer.css";
+
+// ----------------------------------------------------
+const ListEventCalls = (props) => {
+ const activeCallRef = useRef();
+
+ //https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
+ //https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
+
+ useEffect(() => {
+ if (activeCallRef.current) {
+ activeCallRef.current.scrollIntoView({
+ block: "center",
+ });
+ }
+ });
+
+
+ return (
+
+
+
+
+
+ Len
+ Talkgroup
+ Time
+ System
+
+
+ {props.eventData &&
+
+
+ { props.eventData.calls.map((call, index) => {
+ if (call._id === props.activeCallId) {
+ return (
+ }
+ })
+
+ }
+
+
+ }
+
+
+
+ );
+
+}
+
+export default ListEventCalls;
diff --git a/frontend/src/Event/ListEvents.js b/frontend/src/Event/ListEvents.js
new file mode 100644
index 0000000..68143bb
--- /dev/null
+++ b/frontend/src/Event/ListEvents.js
@@ -0,0 +1,66 @@
+import React, { Component } from "react";
+import { Link, useNavigate } from 'react-router-dom'
+
+import {
+ Container,
+ Header,
+ Card,
+ Icon,
+ Menu,
+ Divider,
+ Table,
+ List
+} from "semantic-ui-react";
+import NavBar from "../Common/NavBar"
+import { useGetEventsQuery } from "../features/api/apiSlice";
+
+// ----------------------------------------------------
+
+const ListEvents = (props) => {
+
+ const dateRange = (start, end) => {
+ if (start.getYear() != end.getYear()) {
+ return start.toLocaleDateString('en-us', { weekday: "short", year: "numeric", month: "short", day: "numeric" }) + " " + start.toLocaleTimeString() + " - " + end.toLocaleDateString('en-us', { weekday: "short", year: "numeric", month: "short", day: "numeric" }) + " " + end.toLocaleTimeString();
+ } else if (start.getMonth() != end.getMonth()) {
+ return start.toLocaleDateString('en-us', { weekday: "short", month: "short", day: "numeric" }) + " " + start.toLocaleTimeString() + " - " + end.toLocaleDateString('en-us', { weekday: "short", month: "short", day: "numeric" }) + " " + end.toLocaleTimeString();
+
+ } else if (start.getDay() != end.getDay()) {
+ return start.toLocaleDateString('en-us', { weekday: "short", month: "short", day: "numeric" }) + " " + start.toLocaleTimeString() + " - " + end.toLocaleDateString('en-us', { weekday: "short", day: "numeric" }) + " " + end.toLocaleTimeString();
+
+ } else {
+ return start.toLocaleDateString('en-us', { weekday: "short", month: "short", day: "numeric" }) + " " + start.toLocaleTimeString() + " - " + end.toLocaleTimeString();
+
+ }
+
+
+ }
+
+ const { data: events, isSuccess } = useGetEventsQuery();
+ const navigate = useNavigate();
+ //
{event.shortNames.map( shortName => }
+ return (
+
+
+
+
+
+
+ {isSuccess && events.map((event, index) =>
+
+ {event.shortNames.map( shortName =>
{event.description}
+ {event.numCalls} Calls
+ {dateRange(new Date(event.startTime), new Date(event.endTime))}
+
+ )}
+
+
+
+
+ );
+}
+
+
+export default ListEvents;
diff --git a/frontend/src/Event/ViewEvent.js b/frontend/src/Event/ViewEvent.js
new file mode 100644
index 0000000..7f6dcbb
--- /dev/null
+++ b/frontend/src/Event/ViewEvent.js
@@ -0,0 +1,172 @@
+import React, { useEffect, useLayoutEffect, useState, useRef } from "react";
+import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
+import EventPlayer from "./EventPlayer";
+import { useSelector, useDispatch } from 'react-redux'
+import { useGetEventQuery } from '../features/api/apiSlice'
+import queryString from '../query-string';
+import {
+ Container,
+ Label,
+ Menu,
+ Icon,
+ Sidebar,
+ Grid,
+ Statistic,
+ Header
+
+} from "semantic-ui-react";
+import "../Call/CallPlayer.css";
+
+
+
+
+
+
+
+// ----------------------------------------------------
+function ViewEvent(props) {
+
+ const { id } = useParams();
+
+ const { data: eventData, isSuccess: isEventSuccess } = useGetEventQuery(id);
+ const [autoPlay, setAutoPlay] = useState(true);
+ const [currentCall, setCurrentCall] = useState(false);
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [sidebarOpened, setSidebarOpened] = useState(false);
+ const [selectCallId, setSelectCallId] = useState(false);
+
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+
+
+
+ const uri = queryString.parse(useLocation().search);
+ const pathname = useLocation().pathname;
+
+ let currentCallId = false;
+
+ if (currentCall) {
+ currentCallId = currentCall._id;
+ }
+
+
+ const handlePusherClick = () => {
+ if (sidebarOpened) setSidebarOpened(false);
+ }
+
+ const handleSidebarToggle = () => setSidebarOpened(!sidebarOpened);
+
+
+ const setStateFromUri = async () => {
+
+ // is this just for one call?
+ if (uri.hasOwnProperty('call-id')) {
+ const _id = uri['call-id'];
+ setSelectCallId(_id);
+ }
+ }
+
+ const dateRange = (start, end) => {
+ if (start.getYear() != end.getYear()) {
+ return { "part1": start.toLocaleDateString('en-us', { weekday: "short", year: "numeric", month: "short", day: "numeric" }) + " " + start.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }), "part2": end.toLocaleDateString('en-us', { weekday: "short", year: "numeric", month: "short", day: "numeric" }) + " " + end.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) };
+ } else if (start.getMonth() != end.getMonth()) {
+ return { "part1": start.toLocaleDateString('en-us', { weekday: "short", month: "short", day: "numeric" }) + " " + start.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }), "part2": end.toLocaleDateString('en-us', { weekday: "short", month: "short", day: "numeric" }) + " " + end.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) };
+
+ } else if (start.getDay() != end.getDay()) {
+ return { "part1": start.toLocaleDateString('en-us', { weekday: "short", month: "short", day: "numeric" }) + " " + start.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }), "part2": end.toLocaleDateString('en-us', { weekday: "short", day: "numeric" }) + " " + end.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) };
+
+ } else {
+ return { "part1": start.toLocaleDateString('en-us', { weekday: "short", month: "short", day: "numeric" }) + " " + start.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }), "part2": end.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) };
+
+ }
+ }
+ let dates = { part1: "", part2: "" }
+ let expirationDate = ""
+ let downloadUrl = false
+ if (eventData) {
+ downloadUrl = eventData.downloadUrl;
+ dates = dateRange(new Date(eventData.startTime), new Date(eventData.endTime))
+ expirationDate = new Date(eventData.expireTime).toLocaleDateString('en-us', { weekday: "short", month: "short", day: "numeric" })
+ }
+
+ /*
+ const dateRange = (start, end) => {
+ if (start.getYear() != end.getYear()) {
+ return start.toLocaleDateString('en-us', { weekday:"short", year:"numeric", month:"short", day:"numeric"}) + " " + start.toLocaleTimeString() + " - " + end.toLocaleDateString('en-us', { weekday:"short", year:"numeric", month:"short", day:"numeric"}) + " " + end.toLocaleTimeString();
+ } else if (start.getMonth() != end.getMonth()) {
+ return start.toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"}) + " " + start.toLocaleTimeString() + " - " + end.toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"}) + " " + end.toLocaleTimeString();
+
+ } else if (start.getDay() != end.getDay()) {
+ return start.toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"}) + " " + start.toLocaleTimeString() + " - " + end.toLocaleDateString('en-us', { weekday:"short", day:"numeric"}) + " " + end.toLocaleTimeString();
+
+ } else {
+ return start.toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"}) + " " + start.toLocaleTimeString() + " - " + end.toLocaleTimeString();
+
+ }
+ }
+ let dates = "";
+ if (eventData) {
+ dates = dateRange(new Date(eventData.startTime),new Date(eventData.endTime));
+ }*/
+ return (
+
+
+
+
+ Home
+ Systems
+ Events
+ About
+
+
+
+
+
+ {eventData && eventData.title}
+
+
+
+
+
+ {eventData &&
+ <>
+ {eventData.description}
+
+
+ }
+
+
+
+ {dates.part1}
+
+
+
+
+ {eventData && eventData.numCalls}
+ Calls
+
+
+
+
+ {downloadUrl &&
+
+
+ Download Event
+
+
+ }
+
+
+
+
+ {eventData &&
}
+
+ );
+}
+
+
+export default ViewEvent;
diff --git a/frontend/src/client/Main/Main.css b/frontend/src/Main/Main.css
similarity index 96%
rename from frontend/src/client/Main/Main.css
rename to frontend/src/Main/Main.css
index 2b694ea..06cc17c 100644
--- a/frontend/src/client/Main/Main.css
+++ b/frontend/src/Main/Main.css
@@ -1,6 +1,6 @@
@font-face {
font-family: didact;
- src: url("../../resources/DidactGothic-Regular.ttf");
+ src: url("../resources/DidactGothic-Regular.ttf");
}
#menu-bar {
diff --git a/frontend/src/client/Main/Main.js b/frontend/src/Main/Main.js
similarity index 70%
rename from frontend/src/client/Main/Main.js
rename to frontend/src/Main/Main.js
index 52dc524..feb5e5d 100644
--- a/frontend/src/client/Main/Main.js
+++ b/frontend/src/Main/Main.js
@@ -1,27 +1,40 @@
-import React, { Component } from "react";
-import ReactDOM from "react-dom";
-import { Link } from 'react-router-dom'
+import React, { useState, useEffect, useRef } from "react";
+import { Link, useNavigate } from 'react-router-dom'
import SystemCard from "../System/SystemCard";
import "./Main.css";
+import { createMedia } from "@artsy/fresnel";
import {
Button,
- Card,
Container,
Divider,
Grid,
Header,
Icon,
- Image,
- List,
Menu,
- Responsive,
Segment,
Sidebar,
Transition,
- Visibility,
} from 'semantic-ui-react'
+import { useDispatch } from 'react-redux'
+import { useGetSystemsQuery } from "../features/api/apiSlice";
+
+/* Responsive component was removed from Semantic UI. This is discussed here: https://github.com/Semantic-Org/Semantic-UI-React/pull/4008 */
+
+const AppMedia = createMedia({
+ breakpoints: {
+ mobile: 320,
+ tablet: 768,
+ computer: 992,
+ largeScreen: 1200,
+ widescreen: 1920
+ }
+});
+
+const mediaStyles = AppMedia.createMediaStyle();
+const { Media } = AppMedia;
+
/* eslint-disable react/no-multi-comp */
/* Heads up! HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled components for
* such things.
@@ -62,18 +75,23 @@ HomepageHeading.propTypes = {
* Neither Semantic UI nor Semantic UI React offer a responsive navbar, however, it can be implemented easily.
* It can be more complicated, but you can create really flexible markup.
*/
-class DesktopContainer extends Component {
- state = {}
- hideFixedMenu = () => this.setState({ fixed: false })
- showFixedMenu = () => this.setState({ fixed: true })
- render() {
- const { children } = this.props
- const { fixed } = this.state
+/*
+General flow:
+
+- componentDidMount(): it will call fetchSystem() this will perform an HTTP request if Systems does not exist, and then add System to Props
+*/
+
+const DesktopContainer = (props) => {
+ const [fixed, setFixed] = useState(false);
+ const hideFixedMenu = () => setFixed(false)
+ const showFixedMenu = () => setFixed(true)
+
+ const { children } = props
return (
-
+
@@ -97,8 +115,9 @@ class DesktopContainer extends Component {
style={{ marginRight: '0px'}}
>
- {process.env.REACT_APP_SITE_NAME} Listen
+ Events
About
@@ -107,32 +126,30 @@ class DesktopContainer extends Component {
{children}
-
+
)
}
-}
+
/*
DesktopContainer.propTypes = {
children: PropTypes.node,
}
*/
-class MobileContainer extends Component {
- state = {}
+const MobileContainer = (props) => {
- handlePusherClick = () => {
- const { sidebarOpened } = this.state
+ const [sidebarOpened, setSidebarOpened] = useState(false);
- if (sidebarOpened) this.setState({ sidebarOpened: false })
+ const handlePusherClick = () => {
+ setSidebarOpened(!sidebarOpened)
}
- handleToggle = () => this.setState({ sidebarOpened: !this.state.sidebarOpened })
+ const handleToggle = () => setSidebarOpened(!sidebarOpened)
- render() {
- const { children } = this.props
- const { sidebarOpened } = this.state
+
+ const { children } = props
return (
-
+