brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

re-worked the terminals page and gateList component for better use with ResponsiveTable

Browse source
This commit is contained in:
csawatzky 2025-03-31 13:43:12 -06:00
parent 6f0921bf95
commit 02cee8623a
5 changed files with 213 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/common/ResponsiveTable.tsx
View file

@ -79,6 +79,7 @@ interface Props<T> {
setPage: (value: React.SetStateAction<number>) => void,
handleRowsPerPageChange: (event: any) => void,
renderGutter?: (row: T) => JSX.Element,
gutterPadding?: number,
setSearchText?: React.Dispatch<React.SetStateAction<string>>,
isLoading?: boolean;
multiGutter?: boolean;
@ -104,6 +105,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
// title,
// subtitle,
renderGutter,
gutterPadding,
setSearchText,
isLoading,
multiGutter,
@ -323,7 +325,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
sx={{
width: "100%",
display: "flex",
justifyContent: "center"
justifyContent: "center",
padding: gutterPadding
}}
onClick={(event) => handleCollapse(index, event)}
// style={{pre}}

276
src/gate/GateList.tsx
View file

@ -1,16 +1,22 @@
import { Gate } from "models/Gate";
import { Box, Card, Theme } from "@mui/material";
import React, { useEffect, useState } from "react";
import { Box, Card, IconButton, List, ListItem, ListItemText, Theme, Typography } from "@mui/material";
import React, { useCallback, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useMobile } from "hooks";
//import MaterialTable from "material-table";
//import { getTableIcons } from "common/ResponsiveTable";
import { Terminal } from "models/Terminal";
import { makeStyles } from "@mui/styles";
import ResponsiveTable, { Column } from "common/ResponsiveTable";
import AddGateFab from "./AddGateFab";
import GateSettings from "./GateSettings";
import { useGateAPI } from "providers";
import { Settings } from "@mui/icons-material";
interface Props {
gates: Gate[];
//gates: Gate[];
terminals: Terminal[];
currentTerminal?: string; //the key of the terminal for the currently selected tab
useMobile: boolean;
//duplicateGate: (gate: Gate) => void;
}
@ -32,12 +38,20 @@ const useStyles = makeStyles((theme: Theme) => ({
}));
export default function GateList(props: Props) {
const { gates, terminals } = props;
const {terminals, currentTerminal } = props;
// const history = useHistory();
const navigate = useNavigate();
const isMobile = useMobile();
const classes = useStyles();
const [gateDialog, setGateDialog] = useState(false);
const [tablePage, setTablePage] = useState(0)
const [pageSize, setPageSize] = useState(5)
const [total, setTotal] = useState(0)
const [terminalMap, setTerminalMap] = useState<Map<string, string>>(new Map<string, string>());
const gateAPI = useGateAPI();
const [gates, setGates] = useState<Gate[]>([])
const [selectedGate, setSelectedGate] = useState<Gate | undefined>()
const [search, setSearch] = useState("")
const goToGate = (gate: Gate) => {
let path = "/terminals/" + gate.key;
@ -52,92 +66,180 @@ export default function GateList(props: Props) {
setTerminalMap(map);
}, [terminals]);
const desktopView = () => {
return (<Box>Desktop table</Box>)
// return (
// <MaterialTable
// columns={[
// {
// title: "Gate",
// field: "name",
// headerStyle: {
// fontWeight: 650,
// fontSize: 20
// }
// },
// {
// title: "Terminals",
// field: "settings.terminal",
// headerStyle: {
// fontWeight: 650,
// fontSize: 20
// },
// render: rowData => terminalMap.get(rowData.terminal())
// },
// {
// title: "Duct Type",
// field: "settings.ductName",
// headerStyle: {
// fontWeight: 650,
// fontSize: 20
// }
// },
// {
// title: "Duct Size(mm)",
// field: "settings.ductDiameter",
// headerStyle: {
// fontWeight: 650,
// fontSize: 20
// }
// },
// {
// title: "Duct Length(m)",
// field: "settings.ductLength",
// headerStyle: {
// fontWeight: 650,
// fontSize: 20
// }
// },
// {
// title: "PCA Unit",
// field: "settings.pcaType",
// headerStyle: {
// fontWeight: 650,
// fontSize: 20
// }
// }
// ]}
// data={gates}
// icons={getTableIcons()}
// onRowClick={(_, gate) => {
// gate && goToGate(gate);
// }}
// title={""}
// options={{
// pageSize: 10
// }}
// />
// );
const loadGates = useCallback(() => {
let keys = undefined
let types = undefined
if(currentTerminal) {
keys = [currentTerminal]
types = ["terminal"]
}
gateAPI.listGates(pageSize, pageSize * tablePage, "asc", "name", search, undefined, keys, types).then(resp => {
setGates(resp.data.gates.map(gate => Gate.create(gate)))
setTotal(resp.data.total)
})
},[currentTerminal, search])
useEffect(() => {
loadGates()
},[currentTerminal, search])
const handleChange = (event: any) => {
setPageSize(event.target.value);
};
const mobileView = () => {
return (
<React.Fragment>
{gates.map((gate, i) => (
<Card
key={i}
className={classes.gateCard}
onClick={() => {
goToGate(gate);
}}>
<Box margin={2} fontSize={20} fontWeight={650}>
const desktopCols = (): Column<Gate>[] => {
return [
{
title: "Gate",
render: gate => (
<Box padding={2}>
<Typography>
{gate.name}
</Box>
</Card>
))}
</React.Fragment>
);
</Typography>
</Box>
)
},
{
title: "Terminal",
render: gate => (
<Box padding={2}>
<Typography>
{terminalMap.get(gate.terminal())}
</Typography>
</Box>
)
},
{
title: "Duct Type",
render: gate => (
<Box padding={2}>
<Typography>
{gate.settings.ductName}
</Typography>
</Box>
)
},
{
title: "Duct Size(mm)",
render: gate => (
<Box padding={2}>
<Typography>
{gate.ductDiameter()}
</Typography>
</Box>
)
},
{
title: "Duct Length(m)",
render: gate => (
<Box padding={2}>
<Typography>
{gate.settings.ductLength}
</Typography>
</Box>
)
},
{
title: "PCA Unit",
render: gate => (
<Box padding={2}>
<Typography>
{gate.settings.pcaType}
</Typography>
</Box>
)
},
]
}
const mobileCols = (): Column<Gate>[] => {
return [{
title: "",
render: gate => {
return (
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography margin="auto" marginLeft={0} fontWeight={650} fontSize={20}>
{gate.name}
</Typography>
<IconButton onClick={(event) => {
event.stopPropagation()
setSelectedGate(gate)
setGateDialog(true)
}}>
<Settings />
</IconButton>
</Box>
)
}
}]
}
const gutter = (gate: Gate) => {
return(
<Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Terminal:</Typography>
<Typography>{terminalMap.get(gate.terminal()) ?? "None"}</Typography>
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Duct Type:</Typography>
<Typography>{gate.ductName() !== "" ? gate.ductName() : "None"}</Typography>
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Duct Size(mm):</Typography>
<Typography>{gate.ductDiameter()}</Typography>
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>DuctLength(m):</Typography>
<Typography>{gate.ductLength()}</Typography>
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>PCA Unit:</Typography>
<Typography>{gate.settings.pcaType !== "" ? gate.settings.pcaType : "None"}</Typography>
</Box>
</Box>
// <Typography variant="body2" color="textSecondary" sx={{ padding: 1 }}>
// </Typography>
)
}
const gateTable = () => {
return (
<ResponsiveTable<Gate>
page={tablePage}
pageSize={pageSize}
columns={isMobile || props.useMobile ? mobileCols() : desktopCols()}
handleRowsPerPageChange={handleChange}
renderGutter={isMobile || props.useMobile ? gutter : undefined}
gutterPadding={0}
rows={gates}
setPage={(page) => {console.log(page)}}
total={total}
onRowClick={(gate) => {goToGate(gate)}}
hideKeys={isMobile || props.useMobile}
setSearchText={(search) => setSearch(search)}
/>
)
};
return isMobile || props.useMobile ? mobileView() : desktopView();
return <Box>
<GateSettings
open={gateDialog}
gate={selectedGate}
close={newGate => {
if (newGate) {
gates.push(newGate)
}
setGateDialog(false);
}}
terminals={terminals}
/>
<AddGateFab
onClick={() => {
setGateDialog(true);
}}
pulse={gates.length < 1}
/>
{gateTable()}
</Box>
}

8
src/models/Gate.ts
View file

@ -64,10 +64,18 @@ export class Gate {
return this.settings.lowerFlow;
}
public ductName(): string {
return this.settings.ductName;
}
public ductDiameter(): number {
return this.settings.ductDiameter;
}
public ductLength(): number {
return this.settings.ductLength;
}
public gateMarkerColour(): string {
switch (this.pcaState) {
case pond.PCAState.PCA_STATE_OFF:

2
src/navigation/Router.tsx
View file

@ -161,7 +161,7 @@ export default function Router(props: Props) {
<Route
key="Terminal page route"
path="" // "/settings/basic"
element={<Terminals key={"Mines page"} />}
element={<Terminals key={"Terminals page"} />}
/>
<Route
path="/:gateKey" // "/settings/basic"

81
src/pages/Terminals.tsx
View file

@ -15,7 +15,6 @@ import {
import { Terminal } from "models";
import { useTerminalAPI, useGlobalState } from "providers";
import React, { useCallback, useEffect, useState } from "react";
import GateSettings from "gate/GateSettings";
import PageContainer from "./PageContainer";
import AddIcon from "@mui/icons-material/Add";
import TerminalSettings from "terminal/TerminalSettings";
@ -24,7 +23,6 @@ import EditIcon from "@mui/icons-material/Edit";
import { blue, green, red } from "@mui/material/colors";
import ResponsiveDialog from "common/ResponsiveDialog";
import { useSnackbar, useUserAPI } from "hooks";
import { Gate } from "models/Gate";
import GateList from "gate/GateList";
import { Scope } from "models";
import { pond } from "protobuf-ts/pond";
@ -34,7 +32,6 @@ import ObjectUsersIcon from "@mui/icons-material/AccountCircle";
import ObjectTeamsIcon from "@mui/icons-material/SupervisedUserCircle";
import ShareObject from "user/ShareObject";
import RemoveSelfFromObject from "user/RemoveSelfFromObject";
import AddGateFab from "gate/AddGateFab";
import { makeStyles } from "@mui/styles";
const parentTab = {
@ -142,19 +139,12 @@ interface Props {
}
export default function Terminals(props: Props) {
const [loading, setLoading] = useState(false);
const terminalAPI = useTerminalAPI();
const [value, setValue] = useState(0);
const [terminals, setTerminals] = useState<Terminal[]>([]);
const [gates, setGates] = useState<Gate[]>([]);
// map using the terminal key and the gates for that terminal
const [gateMap, setGateMap] = useState<Map<string, Gate[]>>(new Map<string, Gate[]>());
const [displayGates, setDisplayGates] = useState<Gate[]>([]);
const [gateDialog, setGateDialog] = useState(false);
const classes = useStyles();
const theme = useTheme();
const [addTerminal, setAddTerminal] = useState(false);
const [tabClick, setTabClick] = useState(true);
const [menuAnchorEl, setMenuAnchorEl] = useState<Element | null>(null);
const [currentTerminal, setCurrentTerminal] = useState<Terminal>();
const [removeTerminal, setRemoveTerminal] = useState(false);
@ -184,44 +174,17 @@ export default function Terminals(props: Props) {
useEffect(() => {
if (props.terminal) {
setCurrentTerminal(props.terminal);
setDisplayGates(gateMap.get(props.terminal.key) ?? []);
}
}, [props.terminal, gateMap]);
}, [props.terminal]);
const load = useCallback(() => {
console.log(loading)
if (loading) return;
console.log("terminal load")
setLoading(true);
terminalAPI
.listTerminalsAndGates(200, 0)
.then(resp => {
console.log(resp)
setTerminals(resp.data.terminals.map(a => Terminal.any(a)));
let allGates = resp.data.gates.map(t => Gate.any(t));
setGates(allGates);
let tMap: Map<string, Gate[]> = new Map<string, Gate[]>();
allGates.forEach(gate => {
let mapEntry = tMap.get(gate.terminal());
if (mapEntry) {
mapEntry.push(gate);
} else {
tMap.set(gate.terminal(), [gate]);
}
setGateMap(tMap);
setDisplayGates(allGates);
});
})
.catch(err => {
openSnack("There was a problem loading your terminals");
})
.finally(() => {
setLoading(false);
});
terminalAPI.listTerminals(200, 0, "asc", "name").then(resp => {
setTerminals(resp.data.terminals.map(a => Terminal.any(a)));
})
}, [terminalAPI, openSnack]); //eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
console.log("load use")
//TODO: will need to figure out a way to prevent multiple api calls when loading the page
load();
}, [load]);
@ -324,12 +287,13 @@ export default function Terminals(props: Props) {
};
const changeTabs = (newValue: number) => {
if (tabClick && newValue <= terminals.length) {
//TODO: change this to just change the selected tab
if (newValue <= terminals.length) {
setValue(newValue);
if (terminals[newValue - 1]) {
setDisplayGates(gateMap.get(terminals[newValue - 1].key) ?? []);
setCurrentTerminal(terminals[newValue -1])
} else {
setDisplayGates(gates);
setCurrentTerminal(undefined)
}
}
};
@ -337,7 +301,7 @@ export default function Terminals(props: Props) {
const gateDisplay = () => {
return (
<GateList
gates={displayGates}
currentTerminal={currentTerminal?.key}
terminals={terminals}
useMobile={props.terminal !== undefined}
/>
@ -370,10 +334,9 @@ export default function Terminals(props: Props) {
<span>
<div className={classes.tabText}>{a.name}</div>
<MoreVert
onMouseEnter={() => setTabClick(false)}
onMouseLeave={() => setTabClick(true)}
className={classes.icon}
onClick={event => {
event.stopPropagation()
let target = event.currentTarget;
setMenuAnchorEl(target);
setCurrentTerminal(terminals[index]);
@ -465,22 +428,6 @@ export default function Terminals(props: Props) {
return (
<PageContainer>
<GateSettings
open={gateDialog}
close={newGate => {
if (newGate) {
if (newGate.terminal() !== "") {
let tMap = gateMap;
tMap.get(newGate.terminal())?.push(newGate);
}
let t = gates;
t.push(newGate);
setGates([...t]);
}
setGateDialog(false);
}}
terminals={terminals}
/>
<TerminalSettings
open={addTerminal}
closeDialog={newTerminal => {
@ -498,12 +445,6 @@ export default function Terminals(props: Props) {
{removeDialog()}
{sharingDialogs()}
{gateDisplay()}
<AddGateFab
onClick={() => {
setGateDialog(true);
}}
pulse={gates.length < 1}
/>
</PageContainer>
);
}