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

Systems sorted by State!

Browse Source
This commit is contained in:
Luke Berndt
2023-01-28 10:19:35 -05:00
parent b7e2419109
commit fe91b93a84
5 changed files with 109 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/System/ListSystems.js
View File

@@ -1,6 +1,7 @@
import React, { Component } from "react";
import { Link, useNavigate } from 'react-router-dom'
import { Link, useNavigate } from 'react-router-dom'
import SystemCard from "./SystemCard";
import { useSelector, useDispatch } from 'react-redux'
import {
Container,
Header,
@@ -9,32 +10,58 @@ import {
Menu,
Divider
} from "semantic-ui-react";
import NavBar from "../Common/NavBar"
import { selectAllSystems, selectActiveSystems, useGetSystemsQuery } from "../features/api/apiSlice";
import NavBar from "../Common/NavBar"
import { selectAllSystems, selectActiveSystems, } from "../features/systems/systemsSlice";
import { useGetSystemsQuery, } from '../features/api/apiSlice'
// ----------------------------------------------------
const ListSystems = (props) => {
const {data:systems, isSuccess} = useGetSystemsQuery();
const navigate = useNavigate();
return (
<div>
<NavBar/>
<Container >
<Divider horizontal style={{paddingTop:"5em", paddingBottom:"2em"}}><Header as="h1">Radio Systems<Icon name='rss' /></Header></Divider>
<Card.Group itemsPerRow={4} stackable={true}>
const { data: allSystems, isSuccess } = useGetSystemsQuery();
const systems = useSelector(selectActiveSystems)
let states = {};
let other = []
for (var i = 0; i < systems.length; i++) {
const system = systems[i];
if (system.hasOwnProperty("state")) {
if (!states.hasOwnProperty(system.state)) {
states[system.state] = [];
}
states[system.state].push(system);
} else {
other.push(system);
}
{isSuccess&&systems.systems.map((system) =>
system.active&&<SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)}/>
// <SystemCard system={system} key={system.shortName} onClick={(e) => this.props.changeUrl("/system/" + system.shortName)}/>
)}
</Card.Group>
</Container>
</div>
);
}
let systemsByState = [];
let keys = Object.keys(states);
keys.sort();
for(var i=0; i<keys.length; ++i){
const state = keys[i];
systemsByState.push((<Header as="h2">{state}</Header>))
systemsByState.push((
<Card.Group key={state} itemsPerRow={4} stackable={true}>
{
states[state].map((system) => {
return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} />
})}
</Card.Group>
))
}
const navigate = useNavigate();
return (
<div>
<NavBar />
<Container >
<Divider horizontal style={{ paddingTop: "5em", paddingBottom: "2em" }}><Header as="h1">Radio Systems<Icon name='rss' /></Header></Divider>
{systemsByState}
</Container>
</div>
);
}
export default ListSystems;