}
})
diff --git a/frontend/src/Common/NavBar.js b/frontend/src/Common/NavBar.js
new file mode 100644
index 0000000..511f7f9
--- /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 (
+
+ );
+ }
+
+
+ export default NavBar;
\ No newline at end of file
diff --git a/frontend/src/Event/EventPlayer.js b/frontend/src/Event/EventPlayer.js
new file mode 100644
index 0000000..bd2c20a
--- /dev/null
+++ b/frontend/src/Event/EventPlayer.js
@@ -0,0 +1,133 @@
+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 CallInfo from "../Call/components/CallInfo";
+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) => {
+ 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];
+
+ 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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Len
+ Talkgroup
+ Time
+
+
+
+ {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..b6c61a7
--- /dev/null
+++ b/frontend/src/Event/ListEvents.js
@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import { Link, useNavigate } from 'react-router-dom'
+
+import {
+ Container,
+ Header,
+ Card,
+ Icon,
+ Menu,
+ Divider,
+ Table
+} 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();
+ return (
+
+
+
+
+
+
+
+ {isSuccess&&events.map((event, index) =>
+
+
+ {event.description}
+ {event.numCalls} Calls
+ {dateRange(new Date(event.startTime),new Date(event.endTime))}
+
+ )}
+
+
+
+
+
+
+
+ Home
+ Systems
+ Events
+ About
+
+
+
+
+
+
+ {eventData && eventData.description}
+
+
+
+ {dates.part1} →
{dates.part2}
+
+
+
+
+ {eventData.numCalls}
+ Calls
+
+
+
+
+
+
+
+
+ );
+}
+
+
+export default ViewEvent;
diff --git a/frontend/src/System/ListSystems.js b/frontend/src/System/ListSystems.js
index 79772e6..de92381 100644
--- a/frontend/src/System/ListSystems.js
+++ b/frontend/src/System/ListSystems.js
@@ -9,7 +9,7 @@ import {
Menu,
Divider
} from "semantic-ui-react";
-
+import NavBar from "../Common/NavBar"
import { selectAllSystems, selectActiveSystems, useGetSystemsQuery } from "../features/api/apiSlice";
// ----------------------------------------------------
@@ -21,10 +21,7 @@ const ListSystems = (props) => {
const navigate = useNavigate();
return (
-
+
diff --git a/frontend/src/features/api/apiSlice.js b/frontend/src/features/api/apiSlice.js
index 29e98e4..c76b23c 100644
--- a/frontend/src/features/api/apiSlice.js
+++ b/frontend/src/features/api/apiSlice.js
@@ -21,6 +21,14 @@ export const apiSlice = createApi({
// The URL for the request is '/fakeApi/posts'
query: () => ({ url: '/systems' })
}),
+ getEvents: builder.query({
+ // The URL for the request is '/fakeApi/posts'
+ query: () => ({ url: '/events' })
+ }),
+ getEvent: builder.query({
+ // The URL for the request is '/fakeApi/posts'
+ query: (eventId) => ({ url: `/events/${eventId}` })
+ }),
getTalkgroups: builder.query({
// The URL for the request is '/fakeApi/posts'
query: (shortName) => ({ url: `/${shortName}/talkgroups` })
@@ -52,4 +60,4 @@ export const selectActiveSystems = createSelector(
)
// Export the auto-generated hook for the `getPosts` query endpoint
-export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useAddNewEventMutation } = apiSlice
+export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetEventsQuery, useGetEventQuery, useAddNewEventMutation } = apiSlice
diff --git a/frontend/src/index.js b/frontend/src/index.js
index a2cd078..9790773 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -21,6 +21,10 @@ import Calls from "./Call/Calls"
import AboutComponent from "./About/AboutComponent"
+// Event
+
+import ListEvents from "./Event/ListEvents"
+import ViewEvent from "./Event/ViewEvent"
const store = configureStore(/* provide initial state if any */)
@@ -33,6 +37,8 @@ root.render(
} />
} />
} />
+ } />
+ } />
} />