This commit is contained in:
Luke Berndt
2023-01-18 21:50:14 -05:00
parent ca692863fa
commit 5025d37c3c
4 changed files with 68 additions and 47 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

@@ -129,8 +129,6 @@ function CallPlayer(props) {
}, [selectCallId, callsData])
return (
<div ref={positionRef}>
<Container className="main" >

View File

@@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import { useCallLink } from "./CallLinks";
import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
@@ -9,9 +9,10 @@ import {
Segment,
Statistic,
Icon,
Menu
Menu,
Tab
} from "semantic-ui-react";
import PlaylistBuilder from "./PlaylistBuilder"
// ----------------------------------------------------
function CallInfo(props) {
const { shortName } = useParams();
@@ -44,51 +45,73 @@ function CallInfo(props) {
talkgroupNum = currentCall.talkgroupNum;
}
const {callLink,callDownload,callTweet} = useCallLink(props.call)
const { callLink, callDownload, callTweet } = useCallLink(props.call)
const [activeTab, setActiveTab] = useState(0);
const handleTabChange = (e, data) => setActiveTab(data.activeIndex);
const panes = [
{
menuItem: '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>
<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: () => {
return (
<PlaylistBuilder />
)
}
}
]
return (
<div>
<Segment padded attached>
<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>
</Segment>
<Menu attached='bottom'>
<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>
<Tab menu={{ attached: 'top' }} panes={panes} defaultActiveIndex={activeTab} onTabChange={handleTabChange} />
</div>
);
}