Innovenergy
/
Innovenergy_trunk
2
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

fix nested routing, create tree with data from backend

This commit is contained in:
Sina Blattmann 2023-02-28 11:06:26 +01:00
parent 599b23da2c
commit 6edba78845
9 changed files with 168 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
typescript/Frontend/src/App.tsx
View File

@ -1,12 +1,7 @@
import useToken from "./hooks/useToken";
import Login from "./Login";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Box, Grid, Divider } from "@mui/material";
import BasicTable from "./components/Table";
import InstallationTabs from "./components/InstallationTabs";
import Alarms from "./routes/Alarms";
import InstallationDetail from "./routes/Installation";
import Log from "./routes/Log";
import { Grid } from "@mui/material";
import routes from "./routes.json";
import { IntlProvider } from "react-intl";
import { useState } from "react";
@ -14,14 +9,13 @@ import en from "./lang/en.json";
import de from "./lang/de.json";
import LanguageSelect from "./components/LanguageSelect";
import LogoutButton from "./components/LogoutButton";
import NavigationButtons from "./components/NavigationButtons";
import UserList from "./components/UserTree";
import Sidebar from "./components/Sidebar";
import Installations from "./routes/Installations";
import Users from "./routes/Users";
const App = () => {
const { token, setToken, removeToken } = useToken();
const [language, setLanguage] = useState("en");
const [currentView, setCurrentView] = useState("installations");
const getTranslations = () => {
if (language === "de") {
@ -45,43 +39,13 @@ const App = () => {
<LanguageSelect language={language} setLanguage={setLanguage} />
<LogoutButton removeToken={removeToken} />
</Grid>
<Box sx={{ p: 1 }}>
<Grid container spacing={2}>
<Grid item xs={3}>
<NavigationButtons
currentView={currentView}
setCurrentView={setCurrentView}
/>
{currentView === "installations" ? <Sidebar /> : <UserList />}
</Grid>
<Grid
item
xs={1}
container
direction="row"
justifyContent="center"
alignItems="center"
>
<Divider orientation="vertical" variant="middle" />
</Grid>
<Grid item xs={8}>
{currentView === "installations" && (
<>
<InstallationTabs />
<Routes>
<Route
path={routes.installationWithId}
element={<InstallationDetail />}
path={routes.installations + "*"}
element={<Installations />}
/>
<Route path={routes.alarmsWithId} element={<Alarms />} />
<Route path={routes.usersWithId} element={<BasicTable />} />
<Route path={routes.logWithId} element={<Log />} />
<Route path={routes.tree} element={<Users />} />
</Routes>
</>
)}
</Grid>
</Grid>
</Box>
</IntlProvider>
</BrowserRouter>
);

22
typescript/Frontend/src/components/InstallationList.tsx
View File

@ -41,10 +41,10 @@ const InstallationList = (props: InstallationListProps) => {
const filteredData = filterData(props.searchQuery, data);
const routeMatch = useRouteMatch([
routes.installationWithId,
routes.alarmsWithId,
routes.usersWithId,
routes.logWithId,
routes.installations + routes.installation + ":id",
routes.installations + routes.alarms + ":id",
routes.installations + routes.users + ":id",
routes.installations + routes.log + ":id",
]);
useEffect(() => {
@ -76,11 +76,14 @@ const InstallationList = (props: InstallationListProps) => {
component="nav"
aria-labelledby="nested-list-subheader"
>
{filteredData?.map((installation) => (
{filteredData?.map((installation) => {
console.log(routeMatch);
return (
<Fragment key={installation.id}>
<Link
to={
getPathWithoutId(routeMatch?.pattern?.path) + installation.id
getPathWithoutId(routeMatch?.pattern?.path) +
installation.id
}
style={{ textDecoration: "none", color: "black" }}
>
@ -88,13 +91,16 @@ const InstallationList = (props: InstallationListProps) => {
selected={installation.id === Number(routeMatch?.params.id)}
>
<ListItemText
primary={installation.location + " | " + installation.name}
primary={
installation.location + " | " + installation.name
}
/>
</ListItemButton>
</Link>
<Divider />
</Fragment>
))}
);
})}
</List>
)}
</>

20
typescript/Frontend/src/components/InstallationTabs.tsx
View File

@ -9,10 +9,10 @@ import { useIntl } from "react-intl";
const InstallationTabs = () => {
const routeMatch = useRouteMatch([
routes.installationWithId,
routes.alarmsWithId,
routes.usersWithId,
routes.logWithId,
routes.installations + routes.installation + ":id",
routes.installations + routes.alarms + ":id",
routes.installations + routes.users + ":id",
routes.installations + routes.log + ":id",
]);
const id = routeMatch?.params?.id;
@ -23,7 +23,7 @@ const InstallationTabs = () => {
<Box sx={{ width: "100%" }}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs
value={routeMatch?.pattern?.path ?? routes.installationWithId}
value={routeMatch?.pattern?.path ?? routes.installation + ":id"}
aria-label="basic tabs example"
>
<Tab
@ -31,7 +31,9 @@ const InstallationTabs = () => {
id: "installation",
defaultMessage: "Installation",
})}
value={routes.installationWithId}
value={
routes.installations + routes.installation + ":id"
}
component={Link}
to={routes.installation + id}
/>
@ -40,7 +42,7 @@ const InstallationTabs = () => {
id: "alarms",
defaultMessage: "Alarms",
})}
value={routes.alarmsWithId}
value={routes.installations + routes.alarms + ":id"}
component={Link}
to={routes.alarms + id}
/>
@ -49,7 +51,7 @@ const InstallationTabs = () => {
id: "users",
defaultMessage: "Users",
})}
value={routes.usersWithId}
value={routes.installations + routes.users + ":id"}
component={Link}
to={routes.users + id}
/>
@ -58,7 +60,7 @@ const InstallationTabs = () => {
id: "log",
defaultMessage: "Log",
})}
value={routes.logWithId}
value={routes.installations + routes.log + ":id"}
component={Link}
to={routes.log + id}
/>

30
typescript/Frontend/src/components/NavigationButtons.tsx
View File

@ -1,33 +1,33 @@
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import { FormattedMessage } from "react-intl";
import { Link } from "react-router-dom";
import useRouteMatch from "../hooks/useRouteMatch";
import routes from "../routes.json";
interface NavigationButtonsProps {
currentView: string;
setCurrentView: (value: string) => void;
}
const NavigationButtons = (props: NavigationButtonsProps) => {
const handleChange = (
event: React.MouseEvent<HTMLElement>,
newAlignment: string
) => {
props.setCurrentView(newAlignment);
};
const NavigationButtons = () => {
const routeMatch = useRouteMatch([
routes.installations + "*",
routes.tree + "*",
]);
return (
<ToggleButtonGroup
color="primary"
value={props.currentView}
value={routeMatch?.pattern?.path}
exclusive
onChange={handleChange}
sx={{ mb: 1 }}
>
<ToggleButton value="installations">
<ToggleButton
value={routes.installations + "*"}
component={Link}
to={routes.installations}
>
<FormattedMessage
id="allInstallations"
defaultMessage="All installations"
/>
</ToggleButton>
<ToggleButton value="users">
<ToggleButton value={routes.tree + "*"} component={Link} to={routes.tree}>
<FormattedMessage id="users" defaultMessage="Users" />
</ToggleButton>
</ToggleButtonGroup>

112
typescript/Frontend/src/components/UserTree.tsx
View File

@ -1,102 +1,23 @@
import TreeView from "@mui/lab/TreeView";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import { ReactNode } from "react";
import { ReactNode, useEffect, useState } from "react";
import { TreeItem } from "@mui/lab";
import { I_Folder, I_Installation } from "../util/types";
import axiosConfig from "../config/axiosConfig";
const UserList = () => {
const data: I_Folder[] = [
{
id: 107,
name: "Bruen-Tromp",
information: "05 Burrows Terrace",
parentId: 75,
type: "Folder",
children: [
{
id: 100,
name: "Sporer and Sons",
information: "820 Helena Terrace",
parentId: 107,
type: "Folder",
},
{
id: 101,
name: "Hahn-Heaney",
information: "144 Di Loreto Center",
parentId: 107,
type: "Folder",
},
],
},
{
id: 125,
name: "Sporer and Sons",
information: "820 Helena Terrace",
parentId: 107,
type: "Folder",
children: [
{
location: "Säffle",
region: "SG",
country: "SE",
orderNumbers: "1LWDGmdXCLmCRFJHTKwcmpoP7bcNeaWJuj",
lat: 0,
long: 0,
s3Bucket: "",
id: 632,
name: "Nikolas Scholz",
information: "",
parentId: 125,
type: "Installation",
},
{
location: "Krasnoye",
region: "ZH",
country: "RU",
orderNumbers: "1M4Rw8toMSJn3d8ULouDd1gYKzANFXeMWh",
lat: 0,
long: 0,
s3Bucket: "",
id: 248,
name: "Judye Goldson",
information: "",
parentId: 125,
type: "Installation",
},
{
id: 103,
name: "Bruen-Tromp",
information: "05 Burrows Terrace",
parentId: 75,
type: "Folder",
children: [
{
id: 100,
name: "Sporer and Sons",
information: "820 Helena Terrace",
parentId: 107,
type: "Folder",
},
{
id: 101,
name: "Hahn-Heaney",
information: "144 Di Loreto Center",
parentId: 107,
type: "Folder",
},
],
},
],
},
{
id: 135,
name: "Hahn-Heaney",
information: "144 Di Loreto Center",
parentId: 107,
type: "Folder",
},
];
const [data, setData] = useState<I_Folder[]>();
useEffect(() => {
axiosConfig.get("/GetTree").then((res) => {
setData(res.data);
});
}, []);
const handleClick = (e: any, nodes: any) => {
console.log(e);
console.log(nodes);
};
const instanceOfFolder = (object: any): object is I_Folder => {
return "children" in object;
@ -122,14 +43,15 @@ const UserList = () => {
);
});
};
return (
<TreeView
aria-label="rich object"
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
sx={{ height: 300, flexGrow: 1, maxWidth: 400 }}
onNodeToggle={handleClick}
>
{renderTree(data)}
{data && renderTree(data)}
</TreeView>
);
};

15
typescript/Frontend/src/routes.json
View File

@ -1,11 +1,8 @@
{
"installationWithId": "/installation/:id",
"installation": "/installation/",
"alarmsWithId": "/alarms/:id",
"alarms": "/alarms/",
"usersWithId": "/users/:id",
"users": "/users/",
"logWithId": "/log/:id",
"log": "/log/",
"installations": "/installations"
"installation": "installation/",
"alarms": "alarms/",
"users": "users/",
"log": "log/",
"installations": "/installations/",
"tree": "/users/*"
}

2
typescript/Frontend/src/routes/Installation.tsx
View File

@ -28,7 +28,7 @@ const InstallationDetail = () => {
if (values && values.id && values.id.toString() === id) {
return (
<Box sx={{ py: 3, width: 1 / 2 }}>
<Box sx={{ py: 3 }}>
<CustomerForm values={values} id={id} />
</Box>
);

49
typescript/Frontend/src/routes/Installations.tsx Normal file
View File

@ -0,0 +1,49 @@
import { Grid, Divider } from "@mui/material";
import { Container } from "@mui/system";
import { Routes, Route } from "react-router";
import InstallationTabs from "../components/InstallationTabs";
import NavigationButtons from "../components/NavigationButtons";
import BasicTable from "../components/Table";
import Alarms from "./Alarms";
import InstallationDetail from "./Installation";
import Log from "./Log";
import routes from "../routes.json";
import Sidebar from "../components/Sidebar";
const Installations = () => {
return (
<Container maxWidth="xl">
<Grid container spacing={2}>
<Grid item xs={3}>
<NavigationButtons />
<Sidebar />
</Grid>
<Grid
item
xs={1}
container
direction="row"
justifyContent="center"
alignItems="center"
>
<Divider orientation="vertical" variant="middle" />
</Grid>
<Grid item xs={8}>
<InstallationTabs />
<Routes>
<Route
path={routes.installation + ":id"}
element={<InstallationDetail />}
index
/>
<Route path={routes.alarms + ":id"} element={<Alarms />} />
<Route path={routes.users + ":id"} element={<BasicTable />} />
<Route path={routes.log + ":id"} element={<Log />} />
</Routes>
</Grid>
</Grid>
</Container>
);
};
export default Installations;

30
typescript/Frontend/src/routes/Users.tsx Normal file
View File

@ -0,0 +1,30 @@
import { Grid, Divider } from "@mui/material";
import { Container } from "@mui/system";
import NavigationButtons from "../components/NavigationButtons";
import UserTree from "../components/UserTree";
const Users = () => {
return (
<Container maxWidth="xl">
<Grid container spacing={2}>
<Grid item xs={3}>
<NavigationButtons />
<UserTree />
</Grid>
<Grid
item
xs={1}
container
direction="row"
justifyContent="center"
alignItems="center"
>
<Divider orientation="vertical" variant="middle" />
</Grid>
<Grid item xs={8}></Grid>
</Grid>
</Container>
);
};
export default Users;