From 61efcc44b459bfeffacdb965f3a393caa4a62a88 Mon Sep 17 00:00:00 2001 From: Luke Berndt Date: Sun, 20 Oct 2024 22:28:45 -0400 Subject: [PATCH] Better Event Creation --- docker-compose.yml | 3 + frontend/src/Call/CallPlayer.js | 9 +-- frontend/src/Call/components/CallInfo.js | 12 ++- frontend/src/Call/components/CallItem.js | 34 +++++++- frontend/src/Call/components/ListCalls.js | 3 + .../src/Call/components/PlaylistBuilder.js | 77 +++++++++---------- .../features/callPlayer/callPlayerSlice.js | 7 +- mongo/Dockerfile | 1 + mongo/remove_old_systems.js | 76 ++++++++++++++++++ 9 files changed, 170 insertions(+), 52 deletions(-) create mode 100644 mongo/remove_old_systems.js diff --git a/docker-compose.yml b/docker-compose.yml index a1f00ad..c96b4bd 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -190,6 +190,9 @@ services: - REACT_APP_FRONTEND_SERVER - REACT_APP_SITE_NAME - REACT_APP_GOOGLE_ANALYTICS + - GLIBC_TUNABLES=glibc.pthread.rseq=0 + ulimits: + memlock: -1 depends_on: - mongo networks: diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index 30909de..9ec0a84 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/frontend/src/Call/CallPlayer.js @@ -194,12 +194,8 @@ function CallPlayer(props) { } - - +
-
@@ -213,7 +209,7 @@ function CallPlayer(props) {
-
handleAutoPlay(autoPlay)}>Autoplay
+
handleAutoPlay(autoPlay)}>Autoplay
@@ -225,7 +221,6 @@ function CallPlayer(props) {
-
); } diff --git a/frontend/src/Call/components/CallInfo.js b/frontend/src/Call/components/CallInfo.js index 74935d2..ec677f5 100644 --- a/frontend/src/Call/components/CallInfo.js +++ b/frontend/src/Call/components/CallInfo.js @@ -1,4 +1,5 @@ import React, { useState } from "react"; +import { useDispatch } from 'react-redux' import { useCallLink } from "./CallLinks"; import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../../features/api/apiSlice' import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'; @@ -14,10 +15,12 @@ import { } from "semantic-ui-react"; import PlaylistBuilder from "./PlaylistBuilder" import CallInfoPane from "./CallInfoPane" +import { setBuildingPlaylist } from '../../features/callPlayer/callPlayerSlice'; // ---------------------------------------------------- function CallInfo(props) { const { shortName } = useParams(); const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName); + const dispatch = useDispatch(); let srcList = ""; let callLength = "-"; @@ -48,7 +51,14 @@ function CallInfo(props) { } const { callLink, callDownload, callTweet } = useCallLink(props.call) const [activeTab, setActiveTab] = useState(0); - const handleTabChange = (e, data) => setActiveTab(data.activeIndex); + const handleTabChange = (e, data) => { + if (data.activeIndex == 1) { + dispatch(setBuildingPlaylist(true)); + } else { + dispatch(setBuildingPlaylist(false)); + } + setActiveTab(data.activeIndex); + } const panes = [ { diff --git a/frontend/src/Call/components/CallItem.js b/frontend/src/Call/components/CallItem.js index 338f196..7c182d7 100644 --- a/frontend/src/Call/components/CallItem.js +++ b/frontend/src/Call/components/CallItem.js @@ -1,27 +1,40 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { Table, Icon, - Label + Label, + FormField, + Checkbox } from "semantic-ui-react"; import { addStar, removeStar } from "../../features/calls/callsSlice"; - -import { useDispatch } from 'react-redux' +import { addToPlaylist, removeFromPlaylist } from '../../features/callPlayer/callPlayerSlice'; +import { useDispatch, useSelector } from 'react-redux' const CallItem = (props) => { const call = props.call; + const buildingPlaylist = useSelector((state) => state.callPlayer.buildingPlaylist); + + const playlist = useSelector((state) => state.callPlayer.playlist); const shortName = props.shortName; const talkgroups = props.talkgroups; const activeCall = props.activeCall; const [starVisible, setStarVisible] = useState(false); const [starClicked, setStarClicked] = useState(false); + const [inPlaylist, setInPlaylist] = useState(false); const dispatch = useDispatch(); const time = new Date(call.time); + useEffect(() => { + if (playlist.find((item) => item._id == call._id)) { + setInPlaylist(true); + } else { + setInPlaylist(false); + } + }, [playlist]); const handleStarClicked = (e) => { e.preventDefault(); @@ -56,6 +69,16 @@ const CallItem = (props) => { } + const handlePlaylist = (e) => { + e.preventDefault(); + e.stopPropagation(); + if (inPlaylist) { + dispatch(removeFromPlaylist(call)); + } else { + dispatch(addToPlaylist(call)); + } + } + if (!starClicked) { starClickable = { link: true }; } @@ -111,6 +134,9 @@ const CallItem = (props) => { {talkgroup} {`${time.toLocaleTimeString()} ${time.toLocaleDateString() !== new Date().toLocaleDateString() ? time.getMonth() + 1 + '/' + time.getDate() : ''}`} setStarVisible(true)} onMouseLeave={() => setStarVisible(false)} onClick={handleStarClicked}>{starButton} + {buildingPlaylist && + + } ); } diff --git a/frontend/src/Call/components/ListCalls.js b/frontend/src/Call/components/ListCalls.js index 77895a5..44c24fb 100644 --- a/frontend/src/Call/components/ListCalls.js +++ b/frontend/src/Call/components/ListCalls.js @@ -10,6 +10,7 @@ import "../CallPlayer.css"; import { useGetTalkgroupsQuery } from '../../features/api/apiSlice' import { useSelector } from 'react-redux' + // ---------------------------------------------------- const ListCalls = (props) => { const activeCallRef = useRef(); @@ -17,6 +18,7 @@ const ListCalls = (props) => { const { shortName } = useParams(); const centerCall = useSelector((state) => state.callPlayer.centerCall); const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName); + const buildingPlaylist = useSelector((state) => state.callPlayer.buildingPlaylist); //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 @@ -41,6 +43,7 @@ const ListCalls = (props) => { Talkgroup Time + {buildingPlaylist && } {callsData && diff --git a/frontend/src/Call/components/PlaylistBuilder.js b/frontend/src/Call/components/PlaylistBuilder.js index 941b55d..bfbd6c2 100644 --- a/frontend/src/Call/components/PlaylistBuilder.js +++ b/frontend/src/Call/components/PlaylistBuilder.js @@ -79,8 +79,8 @@ function PlaylistBuilder(props) { let tgAlpha = call.talkgroupNum; if (talkgroupsData) { const talkgroup = talkgroupsData.talkgroups[call.talkgroupNum] - if (talkgroup && talkgroup.alpha!=" ") { - tgAlpha = talkgroup.alpha; + if (talkgroup && talkgroup.alpha != " ") { + tgAlpha = talkgroup.alpha; } } @@ -96,28 +96,28 @@ function PlaylistBuilder(props) { 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 + 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([])); } - 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 = (
Drag Calls Here
) @@ -134,25 +134,24 @@ function PlaylistBuilder(props) { setSuccessModalOpen(false)} size='tiny' - > - Event Successfully Created - Your Event is here:

{eventUrl}

 - - -