baby steps

frontend/src/Call/components/CallInfo.js

@@ -13,6 +13,7 @@ import {
   Tab
 } from "semantic-ui-react";
 import PlaylistBuilder from "./PlaylistBuilder"
+import CallInfoPane from "./CallInfoPane"
 // ----------------------------------------------------
 function CallInfo(props) {
   const { shortName } = useParams();
@@ -51,56 +52,18 @@ function CallInfo(props) {
 
   const panes = [
     {
-      menuItem: 'Call Info', render: () => {
+      menuItem: { key: 'info', icon: 'info', content: 'Call Info' }, render: () => {
         return (
-          <div>
-            <Tab.Pane attached='bottom'>
-              <Header as='h1'>{header}</Header>
-              <List bulleted horizontal link>
-                {srcList}
-              </List>
-              <Divider />
-              <Statistic size='small'>
-                <Statistic.Label>Seconds</Statistic.Label>
-                <Statistic.Value>{callLength}</Statistic.Value>
-              </Statistic>
-              <Statistic size='small'>
-                <Statistic.Label>Talkgroup</Statistic.Label>
-                <Statistic.Value>{talkgroupNum}</Statistic.Value>
-              </Statistic>
 
-              <List divided verticalAlign='middle'>
-                <List.Item>
-                  <Icon name="wait" />
-                  <List.Content>
-                    {callTime}
-                  </List.Content>
-                </List.Item>
-                <List.Item>
-                  <Icon name="calendar outline" />
-                  <List.Content>
-                    {callDate}
-                  </List.Content>
-                </List.Item>
-                <List.Item>
-                  <Icon name="cubes" />
-                  <List.Content>
-                    {callFreq} MHz
-                  </List.Content>
-                </List.Item>
-              </List>
+            <Tab.Pane attached='bottom'>
+                <CallInfoPane call={props.call} />
             </Tab.Pane>
-            <Menu>
-              <a href={callTweet}><Menu.Item name="tweet" ><Icon name='twitter' />Tweet</Menu.Item></a>
-              <a href={callDownload}><Menu.Item name="download"><Icon name="download" />Download</Menu.Item></a>
-              <a href={callLink}><Menu.Item name="link"><Icon name="at" />Link</Menu.Item></a>
-            </Menu>
-          </div>
+
         )
       }
     },
     {
-      menuItem: 'Playlist', render: () => {
+      menuItem: { key: 'list', icon: 'list', content: 'Create Event' }, render: () => {
         return (
           <PlaylistBuilder />
         )
@@ -111,7 +74,7 @@ function CallInfo(props) {
 
   return (
     <div>
-      <Tab menu={{ attached: 'top' }} panes={panes} defaultActiveIndex={activeTab} onTabChange={handleTabChange} />
+      <Tab menu={{ attached: 'top', fluid: true, widths: 2 }} panes={panes} defaultActiveIndex={activeTab} onTabChange={handleTabChange} />
     </div>
   );
 }

frontend/src/Call/components/CallInfoPane.js

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import { useCallLink } from "./CallLinks";
+import {skipToken} from '@reduxjs/toolkit/query'
+import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
+import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
+import {
+  Header,
+  Divider,
+  List,
+  Segment,
+  Statistic,
+  Icon,
+  Menu,
+  Tab
+} from "semantic-ui-react";
+import PlaylistBuilder from "./PlaylistBuilder"
+// ----------------------------------------------------
+function CallInfoPane(props) {
+
+
+  let srcList = "";
+  let callLength = "-";
+  let callFreq = "-";
+  let callDate = "-";
+  let callTime = "-";
+  let talkgroupNum = "-";
+  let header = "Call Info"
+  const currentCall = props.call?props.call:false;
+
+
+
+    const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(currentCall?currentCall.shortName:skipToken);
+   
+   if (currentCall) {
+    if ((talkgroupsData) && talkgroupsData.talkgroups[currentCall.talkgroupNum]) {
+      header = talkgroupsData.talkgroups[currentCall.talkgroupNum].description;
+    }
+    const time = new Date(currentCall.time);
+    callTime = time.toLocaleTimeString();
+    callDate = time.toLocaleDateString();
+    if (currentCall.freq) {
+      const freq = currentCall.freq / 1000000;
+      callFreq = Math.round(freq * 1000) / 1000;
+    }
+    srcList = currentCall.srcList.map((source, index) => <List.Item key={index}>{source.src}[{source.pos}]</List.Item>);
+    callLength = currentCall.len;
+    talkgroupNum = currentCall.talkgroupNum;
+
+  }
+  const { callLink, callDownload, callTweet } = useCallLink(props.call)
+
+
+  return (
+    <>
+    <Header as='h1'>{header}</Header>
+    <List bulleted horizontal link>
+      {srcList}
+    </List>
+    <Divider />
+    <Statistic size='small'>
+      <Statistic.Label>Seconds</Statistic.Label>
+      <Statistic.Value>{callLength}</Statistic.Value>
+    </Statistic>
+    <Statistic size='small'>
+      <Statistic.Label>Talkgroup</Statistic.Label>
+      <Statistic.Value>{talkgroupNum}</Statistic.Value>
+    </Statistic>
+
+    <List divided verticalAlign='middle'>
+      <List.Item>
+        <Icon name="wait" />
+        <List.Content>
+          {callTime}
+        </List.Content>
+      </List.Item>
+      <List.Item>
+        <Icon name="calendar outline" />
+        <List.Content>
+          {callDate}
+        </List.Content>
+      </List.Item>
+      <List.Item>
+        <Icon name="cubes" />
+        <List.Content>
+          {callFreq} MHz
+        </List.Content>
+      </List.Item>
+    </List>
+    <Divider />
+  <Menu secondary fluid widths={2}>
+    <Menu.Item name="download" href={callDownload}><Icon name="download" />Download</Menu.Item>
+    <Menu.Item name="link" href={callLink}><Icon name="at" />Link</Menu.Item>
+  </Menu>
+  </>
+  );
+}
+
+export default CallInfoPane;

frontend/src/Call/components/PlaylistBuilder.js

@@ -164,7 +164,7 @@ function PlaylistBuilder(props) {
           </Table.Body>
         </Table>
       </Tab.Pane>
-      <Menu>
+      <Menu fluid widths={2}>
         <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/Event/EventCallInfo.js

@@ -0,0 +1,28 @@
+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 (
+    <Segment>
+        <CallInfoPane call={props.call} />
+    </Segment>
+   
+  );
+}
+
+export default EventCallInfo;

frontend/src/Event/EventPlayer.js

@@ -5,7 +5,7 @@ import MediaPlayer from "../Call/components/MediaPlayer";
 
 import SupportModal from "../Call/components/SupportModal";
 
-import CallInfo from "../Call/components/CallInfo";
+import EventCallInfo from "./EventCallInfo";
 import ListEventCalls from "./ListEventCalls";
 import { useSelector, useDispatch } from 'react-redux'
 
@@ -110,7 +110,7 @@ function EventPlayer(props) {
         </Sidebar.Pushable>
         <Rail position='right' className="desktop-only"  >
           <Sticky offset={60} context={positionRef}>
-            <CallInfo call={currentCall} />
+            <EventCallInfo call={currentCall} />
           </Sticky>
         </Rail>
       </Container>

frontend/src/Event/ViewEvent.js

@@ -123,7 +123,7 @@ function ViewEvent(props) {
         </Container>
       </Menu>
       <Grid style={{ paddingTop: '4em' }}>
-        <Grid.Column mobile={0} tablet={0} computer={1} ></Grid.Column>
+        <Grid.Column mobile={1} tablet={1} computer={1} ></Grid.Column>
         <Grid.Column mobile={16} tablet={8} computer={4}>
           <Container text >
             {eventData && eventData.description}
@@ -135,15 +135,15 @@ function ViewEvent(props) {
         <Grid.Column mobile={8} tablet={8} computer={2}>
         
           <Statistic>
-            <Statistic.Value>{eventData.numCalls}</Statistic.Value>
+            <Statistic.Value>{eventData && eventData.numCalls}</Statistic.Value>
             <Statistic.Label>Calls</Statistic.Label>
           </Statistic>
           </Grid.Column>
 
-        <Grid.Column mobile={0} tablet={0} computer={5}>
+        <Grid.Column mobile={1} tablet={1} computer={5}>
         </Grid.Column>
       </Grid>
-      <EventPlayer eventData={eventData} selectCallId={selectCallId} />
+      {eventData && <EventPlayer eventData={eventData} selectCallId={selectCallId} />}
     </div>
   );
 }