mirror of
https://github.com/openmhz/trunk-server.git
synced 2026-11-12 08:47:40 -05:00
moved the links stuff to a component
This commit is contained in:
Luke Berndt
@@ -1,4 +1,7 @@
|
||||
import React from "react";
|
||||
import { useCallLink } from "./CallLinks";
|
||||
import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice'
|
||||
import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Header,
|
||||
Divider,
|
||||
@@ -11,39 +14,46 @@ import {
|
||||
|
||||
// ----------------------------------------------------
|
||||
function CallInfo(props) {
|
||||
let srcList = "";
|
||||
let callLength = "-";
|
||||
let callFreq = "-";
|
||||
let callDate = "-";
|
||||
let callTime = "-";
|
||||
let talkgroupNum = "-";
|
||||
let callDownload = "";
|
||||
let callTweet = "";
|
||||
if (props.call) {
|
||||
const currentCall = props.call;
|
||||
var time = new Date(currentCall.time);
|
||||
callTime = time.toLocaleTimeString();
|
||||
callDate = time.toLocaleDateString();
|
||||
if (currentCall.freq) {
|
||||
var freq = currentCall.freq / 1000000;
|
||||
callFreq = Math.round(freq * 1000) / 1000;
|
||||
}
|
||||
const { shortName } = useParams();
|
||||
const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
|
||||
|
||||
srcList = currentCall.srcList.map((source, index) => <List.Item key={index}>{source.src}[{source.pos}]</List.Item>);
|
||||
callLength = currentCall.len;
|
||||
talkgroupNum = currentCall.talkgroupNum;
|
||||
callDownload = currentCall.url;
|
||||
callTweet = "https://twitter.com/intent/tweet?url="+encodeURIComponent(document.location.origin+props.link)+"&via="+encodeURIComponent("OpenMHz");
|
||||
let srcList = "";
|
||||
let callLength = "-";
|
||||
let callFreq = "-";
|
||||
let callDate = "-";
|
||||
let callTime = "-";
|
||||
let talkgroupNum = "-";
|
||||
let header = "Call Info"
|
||||
|
||||
if (props.call) {
|
||||
const currentCall = props.call;
|
||||
if ((talkgroupsData) && talkgroupsData.talkgroups[currentCall.talkgroupNum]) {
|
||||
header = talkgroupsData.talkgroups[currentCall.talkgroupNum].description;
|
||||
}
|
||||
var time = new Date(currentCall.time);
|
||||
callTime = time.toLocaleTimeString();
|
||||
callDate = time.toLocaleDateString();
|
||||
if (currentCall.freq) {
|
||||
var freq = currentCall.freq / 1000000;
|
||||
callFreq = Math.round(freq * 1000) / 1000;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
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 (
|
||||
<div>
|
||||
<Segment padded attached>
|
||||
<Header as='h1'>{props.header}</Header>
|
||||
<List bulleted horizontal link>
|
||||
{srcList}
|
||||
</List>
|
||||
<Divider/>
|
||||
<Divider />
|
||||
<Statistic size='small'>
|
||||
<Statistic.Label>Seconds</Statistic.Label>
|
||||
<Statistic.Value>{callLength}</Statistic.Value>
|
||||
@@ -55,32 +65,32 @@ function CallInfo(props) {
|
||||
|
||||
<List divided verticalAlign='middle'>
|
||||
<List.Item>
|
||||
<Icon name="wait"/>
|
||||
<Icon name="wait" />
|
||||
<List.Content>
|
||||
{callTime}
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Icon name="calendar outline"/>
|
||||
<Icon name="calendar outline" />
|
||||
<List.Content>
|
||||
{callDate}
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Icon name="cubes"/>
|
||||
<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={props.link}><Menu.Item name="link"><Icon name="at" />Link</Menu.Item></a>
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CallInfo;
|
||||
export default CallInfo;
|
||||
|
||||
36
frontend/src/Call/CallLinks.js
Normal file
36
frontend/src/Call/CallLinks.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
|
||||
export function useCallLink(currentCall) {
|
||||
const filterType = useSelector((state) => state.callPlayer.filterType);
|
||||
const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId);
|
||||
const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups);
|
||||
const shortName = useSelector((state) => state.callPlayer.shortName);
|
||||
if (currentCall) {
|
||||
let search = ""
|
||||
const time = new Date(currentCall.time);
|
||||
const callTime = time.toLocaleTimeString();
|
||||
const callDate = time.toLocaleDateString();
|
||||
|
||||
switch (filterType) {
|
||||
|
||||
case 1:
|
||||
search = `filter-type=group&filter-code=${filterGroupId}&`;
|
||||
break;
|
||||
case 2:
|
||||
search = `filter-type=talkgroup&filter-code=${filterTalkgroups}&`;
|
||||
break;
|
||||
default:
|
||||
case 0:
|
||||
break;
|
||||
|
||||
}
|
||||
const callLink = "/system/" + shortName + "?" + search + "call-id=" + currentCall._id + "&time=" + (time.getTime() + 1);
|
||||
const callDownload = currentCall.url;
|
||||
const callTweet = "https://twitter.com/intent/tweet?url=" + encodeURIComponent(document.location.origin + callLink) + "&via=" + encodeURIComponent("OpenMHz");
|
||||
|
||||
return { callLink, callDownload, callTweet }
|
||||
} else {
|
||||
return { callLink: "", callDownload: "", callTweet: "" }
|
||||
}
|
||||
}
|
||||
@@ -24,7 +24,7 @@ import {
|
||||
import "./CallPlayer.css";
|
||||
import queryString from '../query-string';
|
||||
import io from 'socket.io-client';
|
||||
|
||||
import { useCallLink } from "./CallLinks";
|
||||
|
||||
|
||||
const socket = io(process.env.REACT_APP_BACKEND_SERVER);
|
||||
@@ -55,9 +55,7 @@ function CallPlayer(props) {
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
|
||||
|
||||
const filterType = useSelector((state) => state.callPlayer.filterType);
|
||||
const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId);
|
||||
const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups);
|
||||
const {callLink,callDownload,callTweet} = useCallLink(props.call)
|
||||
|
||||
|
||||
|
||||
@@ -109,9 +107,6 @@ function CallPlayer(props) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (loadNewerInView && callsData && (callsData.ids.length > 0)) {
|
||||
dispatch(getNewerCalls({}));
|
||||
@@ -142,40 +137,6 @@ function CallPlayer(props) {
|
||||
}
|
||||
}, [callsData])
|
||||
|
||||
/*
|
||||
useEffect(() => {
|
||||
|
||||
}, [callsData]);
|
||||
*/
|
||||
|
||||
|
||||
var callInfoHeader = "Call Info";
|
||||
var callLink = ""
|
||||
var callDownload = ""
|
||||
if (currentCall) {
|
||||
if ((talkgroupsData) && talkgroupsData[currentCall.talkgroupNum]) {
|
||||
callInfoHeader = talkgroupsData[currentCall.talkgroupNum].description;
|
||||
}
|
||||
const callDate = new Date(currentCall.time);
|
||||
var search = ""
|
||||
switch (filterType) {
|
||||
|
||||
case 1:
|
||||
search = `filter-type=group&filter-code=${filterGroupId}&`;
|
||||
break;
|
||||
case 2:
|
||||
search = `filter-type=talkgroup&filter-code=${filterTalkgroups}&`;
|
||||
break;
|
||||
default:
|
||||
case 0:
|
||||
break;
|
||||
|
||||
}
|
||||
callLink = "/system/" + shortName + "?" + search + "call-id=" + currentCall._id + "&time=" + (callDate.getTime() + 1);
|
||||
callDownload = currentCall.url;
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div ref={positionRef}>
|
||||
@@ -187,13 +148,11 @@ function CallPlayer(props) {
|
||||
<div ref={loadNewerRef} />
|
||||
<ListCalls callsData={callsData} activeCallId={isPlaying?currentCallId:false} talkgroups={talkgroupsData?talkgroupsData.talkgroups:false} playCall={playCall} />
|
||||
<div ref={loadOlderRef} style={{ height: 50 }} />
|
||||
|
||||
|
||||
</Sidebar.Pusher>
|
||||
</Sidebar.Pushable>
|
||||
<Rail position='right' className="desktop-only" >
|
||||
<Sticky offset={60} context={positionRef}>
|
||||
<CallInfo call={currentCall} header={callInfoHeader} link={callLink} />
|
||||
<CallInfo call={currentCall} />
|
||||
</Sticky>
|
||||
</Rail>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user