GitHub/trunk-server
1
0
Fork 0
mirror of https://github.com/openmhz/trunk-server.git synced 2026-11-13 09:17:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

I think it is ready...

Browse Source
This commit is contained in:
Luke Berndt
2023-01-23 22:12:54 -05:00
parent a002fb1fe4
commit aa4d343039
11 changed files with 108 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/Call/components/CallItem.js
View File

@@ -7,15 +7,17 @@ import {
import { addStar, removeStar } from "../../features/calls/callsSlice";
import { useGetTalkgroupsQuery } from '../../features/api/apiSlice'
import { useDispatch } from 'react-redux'
const CallItem = (props) => {
const call = props.call;
const shortName = props.shortName;
const talkgroups = props.talkgroups;
const activeCall = props.activeCall;
const [starVisible, setStarVisible] = useState(false);
const [starClicked, setStarClicked] = useState(false);
const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(call.shortName);
const dispatch = useDispatch();
const time = new Date(call.time);
@@ -82,10 +84,10 @@ const CallItem = (props) => {
}
}
let talkgroup;
if ((typeof talkgroupsData == 'undefined') || (typeof talkgroupsData.talkgroups[call.talkgroupNum] == 'undefined')) {
if ((typeof talkgroups== 'undefined') || (typeof talkgroups.talkgroups[call.talkgroupNum] == 'undefined')) {
talkgroup = call.talkgroupNum;
} else {
talkgroup = talkgroupsData.talkgroups[call.talkgroupNum].description;
talkgroup = talkgroups.talkgroups[call.talkgroupNum].description;
}
return (
<Table.Row draggable="true" onClick={(e) => props.onClick({ call: call }, e)} {...rowSelected} onDragStart={onDragStart} data-callid={call._id}>
@@ -94,8 +96,6 @@ const CallItem = (props) => {
<Table.Cell> {time.toLocaleTimeString()} </Table.Cell>
<Table.Cell onMouseEnter={() => setStarVisible(true)} onMouseLeave={() => setStarVisible(false)} onClick={handleStarClicked}>{starButton}</Table.Cell>
</Table.Row>
);
}

9
frontend/src/Call/components/ListCalls.js
View File

@@ -1,4 +1,5 @@
import React, { useEffect, useRef } from "react";
import { useParams } from 'react-router-dom';
import CallItem from "./CallItem";
import {
Icon,
@@ -6,11 +7,13 @@ import {
Ref
} from "semantic-ui-react";
import "../CallPlayer.css";
import { useGetTalkgroupsQuery } from '../../features/api/apiSlice'
// ----------------------------------------------------
const ListCalls = (props) => {
const activeCallRef = useRef();
const { shortName } = useParams();
const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
//https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
//https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
@@ -40,9 +43,9 @@ const ListCalls = (props) => {
{
props.callsData.ids.map((callId, index) => {
if (callId === props.activeCallId) {
return (<Ref innerRef={activeCallRef} key={index} ><CallItem activeCall={true} call={props.callsData.entities[callId]} key={index} onClick={props.playCall}/></Ref>)
return (<Ref innerRef={activeCallRef} key={index} ><CallItem activeCall={true} call={props.callsData.entities[callId]} talkgroups={talkgroupsData} key={index} onClick={props.playCall}/></Ref>)
} else {
return <CallItem activeCall={false} call={props.callsData.entities[callId]} key={index} onClick={props.playCall}/>
return <CallItem activeCall={false} call={props.callsData.entities[callId]} talkgroups={talkgroupsData} key={index} onClick={props.playCall}/>
}
})

30
frontend/src/Call/components/PlaylistBuilder.js
View File

@@ -15,7 +15,8 @@ import {
Modal,
Button,
Image,
Form
Form,
Message
} from "semantic-ui-react";
import { useAddNewEventMutation, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
@@ -113,6 +114,16 @@ function PlaylistBuilder(props) {
setDescription("")
setPlaylist([])
}
let content = (<Header as="h3" icon textAlign='center' style={{paddingTop: "3em"}}><Icon name='target' />Drag Calls Here</Header>)
if (playlist.length > 0) {
content = (<Table basic="very">
<Table.Body>
{listItems}
</Table.Body>
</Table>)
}
return (
<>
<Modal
@@ -121,11 +132,16 @@ function PlaylistBuilder(props) {
open={open}
>
<Modal.Header>Submit an Event</Modal.Header>
<Modal.Content image>
<Image size='medium' src='https://react.semantic-ui.com/images/avatar/large/rachel.png' wrapped />
<Modal.Content>
<Modal.Description>
<Message icon>
<Icon name='warning sign' />
<Message.Content>The Events feature is a work in progress! Things may break, change, or get deleted. Contact me with ideas or problems: luke@robotastic.com</Message.Content>
</Message>
<Header>Event</Header>
<Form>
<Form.Input
name="title"
value={title}
@@ -139,8 +155,6 @@ function PlaylistBuilder(props) {
placeholder='Please describe the event'
onChange={handleDescriptionChange}
/>
</Form>
</Modal.Description>
</Modal.Content>
@@ -158,11 +172,7 @@ function PlaylistBuilder(props) {
</Modal.Actions>
</Modal>
<Tab.Pane attached='bottom' onDragOver={onDragOver} onDrop={onDrop}>
<Table basic="very">
<Table.Body>
{listItems}
</Table.Body>
</Table>
{content}
</Tab.Pane>
<Menu fluid widths={2}>
<Menu.Item name="clear" onClick={() => setPlaylist([])}><Icon name='delete' />Clear</Menu.Item>

4
frontend/src/Event/EventCallInfo.js
View File

@@ -13,10 +13,6 @@ import {
import CallInfoPane from "../Call/components/CallInfoPane"
// ----------------------------------------------------
function EventCallInfo(props) {
return (
<Segment>
<CallInfoPane call={props.call} />

52
frontend/src/Event/EventCallItem.js Normal file
View File

@@ -0,0 +1,52 @@
import React, { useState } from "react";
import {
Table,
Icon,
Label
} from "semantic-ui-react";
import { useGetTalkgroupsQuery } from '../features/api/apiSlice'
const EventCallItem = (props) => {
const call = props.call;
const activeCall = props.activeCall;
const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(call.shortName);
const time = new Date(call.time);
let rowSelected = {};
if (activeCall) {
rowSelected = {
positive: true,
color: "blue",
key: "blue",
inverted: "true"
}
}
let talkgroup;
if ((typeof talkgroupsData == 'undefined') || (typeof talkgroupsData.talkgroups[call.talkgroupNum] == 'undefined')) {
talkgroup = call.talkgroupNum;
} else {
talkgroup = talkgroupsData.talkgroups[call.talkgroupNum].description;
}
return (
<Table.Row onClick={(e) => props.onClick({ call: call }, e)} {...rowSelected}>
<Table.Cell> {call.len} </Table.Cell>
<Table.Cell> {talkgroup} </Table.Cell>
<Table.Cell> {time.toLocaleTimeString()} </Table.Cell>
<Table.Cell> {call.shortName}</Table.Cell>
</Table.Row>
);
}
export default EventCallItem;

8
frontend/src/Event/ListEventCalls.js
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useRef } from "react";
import CallItem from "../Call/components/CallItem";
import EventCallItem from "./EventCallItem";
import {
Icon,
Table,
@@ -31,7 +31,7 @@ const ListEventCalls = (props) => {
<Table.HeaderCell>Len</Table.HeaderCell>
<Table.HeaderCell>Talkgroup</Table.HeaderCell>
<Table.HeaderCell>Time</Table.HeaderCell>
<Table.HeaderCell><Icon name='star' /></Table.HeaderCell>
<Table.HeaderCell>System</Table.HeaderCell>
</Table.Row>
</Table.Header>
{props.eventData &&
@@ -39,9 +39,9 @@ const ListEventCalls = (props) => {
{ props.eventData.calls.map((call, index) => {
if (call._id === props.activeCallId) {
return (<Ref innerRef={activeCallRef} key={index} ><CallItem activeCall={true} call={call} key={index} onClick={props.playCall}/></Ref>)
return (<Ref innerRef={activeCallRef} key={index} ><EventCallItem activeCall={true} call={call} key={index} onClick={props.playCall} showStar={false}/></Ref>)
} else {
return <CallItem activeCall={false} call={call} key={index} onClick={props.playCall}/>
return <EventCallItem activeCall={false} call={call} key={index} onClick={props.playCall} showStar={false}/>
}
})

19
frontend/src/Event/ViewEvent.js
View File

@@ -68,21 +68,23 @@ function ViewEvent(props) {
const dateRange = (start, end) => {
if (start.getYear() != end.getYear()) {
return {"part1": start.toLocaleDateString('en-us', { weekday:"short", year:"numeric", month:"short", day:"numeric"}) + " " + start.toLocaleTimeString(), "part2": end.toLocaleDateString('en-us', { weekday:"short", year:"numeric", month:"short", day:"numeric"}) + " " + end.toLocaleTimeString()};
return {"part1": start.toLocaleDateString('en-us', { weekday:"short", year:"numeric", month:"short", day:"numeric"}) + " " + start.toLocaleTimeString([], {hour: 'numeric', minute:'2-digit'}), "part2": end.toLocaleDateString('en-us', { weekday:"short", year:"numeric", month:"short", day:"numeric"}) + " " + end.toLocaleTimeString([], {hour: 'numeric', minute:'2-digit'})};
} else if (start.getMonth() != end.getMonth()) {
return {"part1": start.toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"}) + " " + start.toLocaleTimeString(), "part2": end.toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"}) + " " + end.toLocaleTimeString()};
return {"part1": start.toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"}) + " " + start.toLocaleTimeString([], {hour: 'numeric', minute:'2-digit'}), "part2": end.toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"}) + " " + end.toLocaleTimeString([], {hour: 'numeric', minute:'2-digit'})};
} else if (start.getDay() != end.getDay()) {
return {"part1": start.toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"}) + " " + start.toLocaleTimeString(), "part2": end.toLocaleDateString('en-us', { weekday:"short", day:"numeric"}) + " " + end.toLocaleTimeString()};
return {"part1": start.toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"}) + " " + start.toLocaleTimeString([], {hour: 'numeric', minute:'2-digit'}), "part2": end.toLocaleDateString('en-us', { weekday:"short", day:"numeric"}) + " " + end.toLocaleTimeString([], {hour: 'numeric', minute:'2-digit'})};
} else {
return {"part1": start.toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"}) + " " + start.toLocaleTimeString(), "part2": end.toLocaleTimeString()};
return {"part1": start.toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"}) + " " + start.toLocaleTimeString([], {hour: 'numeric', minute:'2-digit'}), "part2": end.toLocaleTimeString([], {hour: 'numeric', minute:'2-digit'})};
}
}
let dates = {part1: "", part2: ""}
let expirationDate = ""
if (eventData) {
dates = dateRange(new Date(eventData.startTime),new Date(eventData.endTime))
expirationDate = new Date(eventData.expireTime).toLocaleDateString('en-us', { weekday:"short", month:"short", day:"numeric"})
}
/*
const dateRange = (start, end) => {
@@ -126,11 +128,16 @@ function ViewEvent(props) {
<Grid.Column mobile={1} tablet={1} computer={1} ></Grid.Column>
<Grid.Column mobile={16} tablet={8} computer={4}>
<Container text >
{eventData && eventData.description}
{eventData&&
<>
<p>{eventData.description}</p>
<Header size='tiny'>Expires {expirationDate}</Header>
</>
}
</Container>
</Grid.Column>
<Grid.Column mobile={8} tablet={8} computer={4}>
<Header as="h2">{dates.part1} → <br/>{dates.part2}</Header>
<Header as="h2">{dates.part1} <br/>→ {dates.part2}</Header>
</Grid.Column>
<Grid.Column mobile={8} tablet={8} computer={2}>

0
frontend/src/features/call/callSlice.js
View File

6
frontend/src/features/calls/callsSlice.js
View File

@@ -129,8 +129,7 @@ const initialState = {
export const addStar = createAsyncThunk(
'calls/addStar',
async(callId,{getState, requestIdleCallback}) => {
const {shortName} = getState().callPlayer;
const url = process.env.REACT_APP_BACKEND_SERVER + "/" + shortName.toLowerCase() + "/star/" + callId
const url = process.env.REACT_APP_BACKEND_SERVER + "/add_star/" + callId
const res = await fetch(url, {
method: 'POST',
headers: {
@@ -148,8 +147,7 @@ export const addStar = createAsyncThunk(
export const removeStar = createAsyncThunk(
'calls/removeStar',
async(callId,{getState, requestIdleCallback}) => {
const {shortName} = getState().callPlayer;
const url = process.env.REACT_APP_BACKEND_SERVER + "/" + shortName.toLowerCase() + "/removeStar/" + callId
const url = process.env.REACT_APP_BACKEND_SERVER + "/remove_star/" + callId
const res = await fetch(url, {
method: 'POST',
headers: {