GitHub/trunk-server
1
0
Fork 0
mirror of https://github.com/openmhz/trunk-server.git synced 2026-11-13 01:07:42 -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

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}>