GitHub/trunk-server
1
0
Fork 0
mirror of https://github.com/openmhz/trunk-server.git synced 2026-11-14 01:37:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

rebased

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

113
frontend/src/Call/components/CallInfo.js
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>
);
}

49
frontend/src/Call/components/PlaylistBuilder.js Normal file
View File

@@ -0,0 +1,49 @@
import { useSelector, useDispatch } from 'react-redux'
import {
Header,
Divider,
List,
Segment,
Statistic,
Icon,
Menu,
Tab
} from "semantic-ui-react";
function PlaylistBuilder(props) {
const { loading: callsLoading, data: callsData } = useSelector((state) => state.calls);
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 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);
console.log("Found: " + callsData.entities[callId].freq);
}
return (
<Tab.Pane attached='bottom'>
<div onDragOver={onDragOver} onDrop={onDrop}>Placeholder</div>
</Tab.Pane>
)
}
export default PlaylistBuilder;