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

add loading indicators, clean up code, add user tree prototype

This commit is contained in:
Sina Blattmann 2023-02-24 13:31:53 +01:00
parent 633c3de5bc
commit cc31922ba4
11 changed files with 484 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
typescript/Frontend/package-lock.json generated
View File

@ -11,6 +11,7 @@
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.11.0",
"@mui/lab": "^5.0.0-alpha.120",
"@mui/material": "^5.11.7",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
@ -3256,6 +3257,79 @@
}
}
},
"node_modules/@mui/lab": {
"version": "5.0.0-alpha.120",
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.120.tgz",
"integrity": "sha512-vjlF2jTKSZnNxtUO0xxHEDfpL5cG0LLNRsfKv8TYOiPs0Q1bbqO3YfqJsqxv8yh+wx7EFZc8lwJ4NSAQdenW3A==",
"dependencies": {
"@babel/runtime": "^7.20.13",
"@mui/base": "5.0.0-alpha.118",
"@mui/system": "^5.11.9",
"@mui/types": "^7.2.3",
"@mui/utils": "^5.11.9",
"clsx": "^1.2.1",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/material": "^5.0.0",
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
"optional": true
},
"@emotion/styled": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/lab/node_modules/@mui/base": {
"version": "5.0.0-alpha.118",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.118.tgz",
"integrity": "sha512-GAEpqhnuHjRaAZLdxFNuOf2GDTp9sUawM46oHZV4VnYPFjXJDkIYFWfIQLONb0nga92OiqS5DD/scGzVKCL0Mw==",
"dependencies": {
"@babel/runtime": "^7.20.13",
"@emotion/is-prop-valid": "^1.2.0",
"@mui/types": "^7.2.3",
"@mui/utils": "^5.11.9",
"@popperjs/core": "^2.11.6",
"clsx": "^1.2.1",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/material": {
"version": "5.11.8",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.8.tgz",
@ -3301,12 +3375,12 @@
}
},
"node_modules/@mui/private-theming": {
"version": "5.11.7",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.7.tgz",
"integrity": "sha512-XzRTSZdc8bhuUdjablTNv3kFkZ/XIMlKkOqqJCU0G8W3tWGXpau2DXkafPd1ddjPhF9zF3qLKNGgKCChYItjgA==",
"version": "5.11.9",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.9.tgz",
"integrity": "sha512-XMyVIFGomVCmCm92EvYlgq3zrC9K+J6r7IKl/rBJT2/xVYoRY6uM7jeB+Wxh7kXxnW9Dbqsr2yL3cx6wSD1sAg==",
"dependencies": {
"@babel/runtime": "^7.20.7",
"@mui/utils": "^5.11.7",
"@babel/runtime": "^7.20.13",
"@mui/utils": "^5.11.9",
"prop-types": "^15.8.1"
},
"engines": {
@ -3327,11 +3401,11 @@
}
},
"node_modules/@mui/styled-engine": {
"version": "5.11.8",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.8.tgz",
"integrity": "sha512-iSpZp9AoeictsDi5xAQ4PGXu7mKtQyzMl7ZaWpHIGMFpsNnfY3NQNg+wkj/gpsAZ+Zg+IIyD+t+ig71Kr9fa0w==",
"version": "5.11.9",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.9.tgz",
"integrity": "sha512-bkh2CjHKOMy98HyOc8wQXEZvhOmDa/bhxMUekFX5IG0/w4f5HJ8R6+K6nakUUYNEgjOWPYzNPrvGB8EcGbhahQ==",
"dependencies": {
"@babel/runtime": "^7.20.7",
"@babel/runtime": "^7.20.13",
"@emotion/cache": "^11.10.5",
"csstype": "^3.1.1",
"prop-types": "^15.8.1"
@ -3358,15 +3432,15 @@
}
},
"node_modules/@mui/system": {
"version": "5.11.8",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.8.tgz",
"integrity": "sha512-zhroUcxAw2x/dISBJKhGbD70DOYCwMFRo7o/LUYTiUfQkfmLhRfEf1bopWgY9nYstn7QOxOq9fA3aR3pHrUTbw==",
"version": "5.11.9",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.9.tgz",
"integrity": "sha512-h6uarf+l3FO6l75Nf7yO+qDGrIoa1DM9nAMCUFZQsNCDKOInRzcptnm8M1w/Z3gVetfeeGoIGAYuYKbft6KZZA==",
"dependencies": {
"@babel/runtime": "^7.20.7",
"@mui/private-theming": "^5.11.7",
"@mui/styled-engine": "^5.11.8",
"@babel/runtime": "^7.20.13",
"@mui/private-theming": "^5.11.9",
"@mui/styled-engine": "^5.11.9",
"@mui/types": "^7.2.3",
"@mui/utils": "^5.11.7",
"@mui/utils": "^5.11.9",
"clsx": "^1.2.1",
"csstype": "^3.1.1",
"prop-types": "^15.8.1"
@ -3410,11 +3484,11 @@
}
},
"node_modules/@mui/utils": {
"version": "5.11.7",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.7.tgz",
"integrity": "sha512-8uyNDeVHZA804Ego20Erv8TpxlbqTe/EbhTI2H1UYr4/RiIbBprat8W4Qqr2UQIsC/b3DLz+0RQ6R/E5BxEcLA==",
"version": "5.11.9",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.9.tgz",
"integrity": "sha512-eOJaqzcEs4qEwolcvFAmXGpln+uvouvOS9FUX6Wkrte+4I8rZbjODOBDVNlK+V6/ziTfD4iNKC0G+KfOTApbqg==",
"dependencies": {
"@babel/runtime": "^7.20.7",
"@babel/runtime": "^7.20.13",
"@types/prop-types": "^15.7.5",
"@types/react-is": "^16.7.1 || ^17.0.0",
"prop-types": "^15.8.1",
@ -20422,6 +20496,38 @@
"@babel/runtime": "^7.20.6"
}
},
"@mui/lab": {
"version": "5.0.0-alpha.120",
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.120.tgz",
"integrity": "sha512-vjlF2jTKSZnNxtUO0xxHEDfpL5cG0LLNRsfKv8TYOiPs0Q1bbqO3YfqJsqxv8yh+wx7EFZc8lwJ4NSAQdenW3A==",
"requires": {
"@babel/runtime": "^7.20.13",
"@mui/base": "5.0.0-alpha.118",
"@mui/system": "^5.11.9",
"@mui/types": "^7.2.3",
"@mui/utils": "^5.11.9",
"clsx": "^1.2.1",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
},
"dependencies": {
"@mui/base": {
"version": "5.0.0-alpha.118",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.118.tgz",
"integrity": "sha512-GAEpqhnuHjRaAZLdxFNuOf2GDTp9sUawM46oHZV4VnYPFjXJDkIYFWfIQLONb0nga92OiqS5DD/scGzVKCL0Mw==",
"requires": {
"@babel/runtime": "^7.20.13",
"@emotion/is-prop-valid": "^1.2.0",
"@mui/types": "^7.2.3",
"@mui/utils": "^5.11.9",
"@popperjs/core": "^2.11.6",
"clsx": "^1.2.1",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
}
}
}
},
"@mui/material": {
"version": "5.11.8",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.8.tgz",
@ -20442,36 +20548,36 @@
}
},
"@mui/private-theming": {
"version": "5.11.7",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.7.tgz",
"integrity": "sha512-XzRTSZdc8bhuUdjablTNv3kFkZ/XIMlKkOqqJCU0G8W3tWGXpau2DXkafPd1ddjPhF9zF3qLKNGgKCChYItjgA==",
"version": "5.11.9",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.9.tgz",
"integrity": "sha512-XMyVIFGomVCmCm92EvYlgq3zrC9K+J6r7IKl/rBJT2/xVYoRY6uM7jeB+Wxh7kXxnW9Dbqsr2yL3cx6wSD1sAg==",
"requires": {
"@babel/runtime": "^7.20.7",
"@mui/utils": "^5.11.7",
"@babel/runtime": "^7.20.13",
"@mui/utils": "^5.11.9",
"prop-types": "^15.8.1"
}
},
"@mui/styled-engine": {
"version": "5.11.8",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.8.tgz",
"integrity": "sha512-iSpZp9AoeictsDi5xAQ4PGXu7mKtQyzMl7ZaWpHIGMFpsNnfY3NQNg+wkj/gpsAZ+Zg+IIyD+t+ig71Kr9fa0w==",
"version": "5.11.9",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.9.tgz",
"integrity": "sha512-bkh2CjHKOMy98HyOc8wQXEZvhOmDa/bhxMUekFX5IG0/w4f5HJ8R6+K6nakUUYNEgjOWPYzNPrvGB8EcGbhahQ==",
"requires": {
"@babel/runtime": "^7.20.7",
"@babel/runtime": "^7.20.13",
"@emotion/cache": "^11.10.5",
"csstype": "^3.1.1",
"prop-types": "^15.8.1"
}
},
"@mui/system": {
"version": "5.11.8",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.8.tgz",
"integrity": "sha512-zhroUcxAw2x/dISBJKhGbD70DOYCwMFRo7o/LUYTiUfQkfmLhRfEf1bopWgY9nYstn7QOxOq9fA3aR3pHrUTbw==",
"version": "5.11.9",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.9.tgz",
"integrity": "sha512-h6uarf+l3FO6l75Nf7yO+qDGrIoa1DM9nAMCUFZQsNCDKOInRzcptnm8M1w/Z3gVetfeeGoIGAYuYKbft6KZZA==",
"requires": {
"@babel/runtime": "^7.20.7",
"@mui/private-theming": "^5.11.7",
"@mui/styled-engine": "^5.11.8",
"@babel/runtime": "^7.20.13",
"@mui/private-theming": "^5.11.9",
"@mui/styled-engine": "^5.11.9",
"@mui/types": "^7.2.3",
"@mui/utils": "^5.11.7",
"@mui/utils": "^5.11.9",
"clsx": "^1.2.1",
"csstype": "^3.1.1",
"prop-types": "^15.8.1"
@ -20484,11 +20590,11 @@
"requires": {}
},
"@mui/utils": {
"version": "5.11.7",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.7.tgz",
"integrity": "sha512-8uyNDeVHZA804Ego20Erv8TpxlbqTe/EbhTI2H1UYr4/RiIbBprat8W4Qqr2UQIsC/b3DLz+0RQ6R/E5BxEcLA==",
"version": "5.11.9",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.9.tgz",
"integrity": "sha512-eOJaqzcEs4qEwolcvFAmXGpln+uvouvOS9FUX6Wkrte+4I8rZbjODOBDVNlK+V6/ziTfD4iNKC0G+KfOTApbqg==",
"requires": {
"@babel/runtime": "^7.20.7",
"@babel/runtime": "^7.20.13",
"@types/prop-types": "^15.7.5",
"@types/react-is": "^16.7.1 || ^17.0.0",
"prop-types": "^15.8.1",

1
typescript/Frontend/package.json
View File

@ -6,6 +6,7 @@
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.11.0",
"@mui/lab": "^5.0.0-alpha.120",
"@mui/material": "^5.11.7",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",

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

@ -1,8 +1,7 @@
import useToken from "./hooks/useToken";
import Login from "./Login";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Box, Grid, Divider, createTheme, ThemeProvider } from "@mui/material";
import InstallationList from "./components/InstallationList";
import { Box, Grid, Divider } from "@mui/material";
import BasicTable from "./components/Table";
import InstallationTabs from "./components/InstallationTabs";
import Alarms from "./routes/Alarms";
@ -17,20 +16,13 @@ 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";
const App = () => {
const { token, setToken, removeToken } = useToken();
const [language, setLanguage] = useState("en");
const [currentView, setCurrentView] = useState("installations");
const theme = createTheme({
palette: {
primary: {
main: "#F59100",
},
},
});
const getTranslations = () => {
if (language === "de") {
return de;
@ -44,62 +36,53 @@ const App = () => {
return (
<BrowserRouter>
<ThemeProvider theme={theme}>
<IntlProvider
messages={getTranslations()}
locale={language}
defaultLocale="en"
>
<Grid container justifyContent="flex-end" sx={{ px: 1, pt: 1 }}>
<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" ? (
<InstallationList />
) : (
<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 />}
/>
<Route path={routes.alarmsWithId} element={<Alarms />} />
<Route
path={routes.usersWithId}
element={<BasicTable />}
/>
<Route path={routes.logWithId} element={<Log />} />
</Routes>
</>
)}
</Grid>
<IntlProvider
messages={getTranslations()}
locale={language}
defaultLocale="en"
>
<Grid container justifyContent="flex-end" sx={{ px: 1, pt: 1 }}>
<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>
</Box>
</IntlProvider>
</ThemeProvider>
<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 />}
/>
<Route path={routes.alarmsWithId} element={<Alarms />} />
<Route path={routes.usersWithId} element={<BasicTable />} />
<Route path={routes.logWithId} element={<Log />} />
</Routes>
</>
)}
</Grid>
</Grid>
</Box>
</IntlProvider>
</BrowserRouter>
);
};

4
typescript/Frontend/src/components/CustomerForm.tsx
View File

@ -1,9 +1,9 @@
import { Alert, Button, Grid, InputLabel, Snackbar } from "@mui/material";
import { Alert, Button, Grid, Snackbar } from "@mui/material";
import { useFormik } from "formik";
import { useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import axiosConfig from "../config/axiosConfig";
import { I_Installation } from "../util/installation.util";
import { I_Installation } from "../util/types";
import InnovenergyTextfield from "./InnovenergyTextfield";
interface I_CustomerFormProps {

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

@ -1,14 +1,17 @@
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import { Divider, TextField } from "@mui/material";
import { CircularProgress, Divider, Grid } from "@mui/material";
import { Link } from "react-router-dom";
import useRouteMatch from "../hooks/useRouteMatch";
import routes from "../routes.json";
import { Fragment, useEffect, useState } from "react";
import { I_Installation } from "../util/installation.util";
import { I_Installation } from "../util/types";
import axiosConfig from "../config/axiosConfig";
import { useIntl } from "react-intl";
interface InstallationListProps {
searchQuery: string;
}
const getPathWithoutId = (path?: string) => {
if (path) {
@ -32,11 +35,10 @@ const filterData = (
return data;
};
const InstallationList = () => {
const InstallationList = (props: InstallationListProps) => {
const [data, setData] = useState<I_Installation[]>();
const [searchQuery, setSearchQuery] = useState("");
const intl = useIntl();
const filteredData = filterData(searchQuery, data);
const [loading, setLoading] = useState(false);
const filteredData = filterData(props.searchQuery, data);
const routeMatch = useRouteMatch([
routes.installationWithId,
@ -46,55 +48,55 @@ const InstallationList = () => {
]);
useEffect(() => {
setLoading(true);
axiosConfig.get("/GetAllInstallations", {}).then((res) => {
setData(res.data);
setLoading(false);
});
}, []);
return (
<>
<TextField
id="outlined-search"
label={intl.formatMessage({
id: "search",
defaultMessage: "Search",
})}
type="search"
fullWidth
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<List
sx={{
width: "100%",
bgcolor: "background.paper",
position: "relative",
overflow: "auto",
maxHeight: 400,
py: 0,
mt: 1,
}}
component="nav"
aria-labelledby="nested-list-subheader"
>
{filteredData?.map((installation) => (
<Fragment key={installation.id}>
<Link
to={getPathWithoutId(routeMatch?.pattern?.path) + installation.id}
style={{ textDecoration: "none", color: "black" }}
>
<ListItemButton
selected={installation.id === Number(routeMatch?.params.id)}
{loading && (
<Grid container justifyContent="center" width="100%">
<CircularProgress sx={{ m: 6 }} />
</Grid>
)}
{data && (
<List
sx={{
width: "100%",
bgcolor: "background.paper",
position: "relative",
overflow: "auto",
maxHeight: 400,
py: 0,
mt: 1,
}}
component="nav"
aria-labelledby="nested-list-subheader"
>
{filteredData?.map((installation) => (
<Fragment key={installation.id}>
<Link
to={
getPathWithoutId(routeMatch?.pattern?.path) + installation.id
}
style={{ textDecoration: "none", color: "black" }}
>
<ListItemText
primary={installation.location + " | " + installation.name}
/>
</ListItemButton>
</Link>
<Divider />
</Fragment>
))}
</List>
<ListItemButton
selected={installation.id === Number(routeMatch?.params.id)}
>
<ListItemText
primary={installation.location + " | " + installation.name}
/>
</ListItemButton>
</Link>
<Divider />
</Fragment>
))}
</List>
)}
</>
);
};

28
typescript/Frontend/src/components/Sidebar.tsx Normal file
View File

@ -0,0 +1,28 @@
import { TextField } from "@mui/material";
import { useState } from "react";
import { useIntl } from "react-intl";
import InstallationList from "./InstallationList";
const Sidebar = () => {
const [searchQuery, setSearchQuery] = useState("");
const intl = useIntl();
return (
<>
<TextField
id="outlined-search"
label={intl.formatMessage({
id: "search",
defaultMessage: "Search",
})}
type="search"
fullWidth
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<InstallationList searchQuery={searchQuery} />
</>
);
};
export default Sidebar;

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

@ -1,5 +1,137 @@
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 { TreeItem } from "@mui/lab";
import { I_Folder, I_Installation } from "../util/types";
const UserList = () => {
return <div>Userlist</div>;
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 instanceOfFolder = (object: any): object is I_Folder => {
return "children" in object;
};
const getNodes = (element: I_Folder | I_Installation): null | ReactNode => {
if (instanceOfFolder(element)) {
return element.children ? renderTree(element.children) : null;
}
return null;
};
const renderTree = (data: (I_Folder | I_Installation)[]): ReactNode => {
return data.map((element) => {
return (
<TreeItem
key={element.id}
nodeId={element.id.toString()}
label={element.name}
>
{getNodes(element)}
</TreeItem>
);
});
};
return (
<TreeView
aria-label="rich object"
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
sx={{ height: 300, flexGrow: 1, maxWidth: 400 }}
>
{renderTree(data)}
</TreeView>
);
};
export default UserList;

26
typescript/Frontend/src/index.tsx
View File

@ -1,16 +1,28 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { createTheme, ThemeProvider } from "@mui/material";
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
document.getElementById("root") as HTMLElement
);
const theme = createTheme({
palette: {
primary: {
main: "#F59100",
},
},
});
root.render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<App />
</React.StrictMode>,
</ThemeProvider>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function

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

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

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

@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import CustomerForm from "../components/CustomerForm";
import axiosConfig from "../config/axiosConfig";
import { I_Installation } from "../util/installation.util";
import { I_Installation } from "../util/types";
const InstallationDetail = () => {
const { id } = useParams();
@ -13,20 +13,17 @@ const InstallationDetail = () => {
const [error, setError] = useState<AxiosError>();
useEffect(() => {
if (id !== "undefined") {
console.log(id);
setLoading(true);
axiosConfig
.get("/GetInstallationById?id=" + id)
.then((res) => {
setValues(res.data);
setLoading(false);
})
.catch((err: AxiosError) => {
setError(err);
setLoading(false);
});
}
setLoading(true);
axiosConfig
.get("/GetInstallationById?id=" + id)
.then((res) => {
setValues(res.data);
setLoading(false);
})
.catch((err: AxiosError) => {
setError(err);
setLoading(false);
});
}, [id]);
if (values && values.id && values.id.toString() === id) {
@ -36,7 +33,13 @@ const InstallationDetail = () => {
</Box>
);
} else if (loading) {
return <CircularProgress sx={{ m: 2 }} />;
return (
<Box
sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
>
<CircularProgress sx={{ m: 2 }} />
</Box>
);
} else if (error) {
return (
<Alert severity="error" sx={{ mt: 1 }}>

47
typescript/Frontend/src/util/installation.util.tsx → typescript/Frontend/src/util/types.tsx
View File

@ -1,19 +1,28 @@
// TODO add if required or not
export interface I_Installation {
type: string;
title: string;
status: number;
detail: string;
instance: string;
location: string;
region: string;
country: string;
orderNumbers: string;
lat: number;
long: number;
s3Bucket: string;
id: number;
name: string;
information: string;
parentId: number;
}
// TODO add if required or not
export interface I_Installation {
type: string;
title: string;
status: number;
detail: string;
instance: string;
location: string;
region: string;
country: string;
orderNumbers: string;
lat: number;
long: number;
s3Bucket: string;
id: number;
name: string;
information: string;
parentId: number;
}
export interface I_Folder {
id: number;
name: string;
information: string;
parentId: number;
type: string;
children?: (I_Installation | I_Folder)[];
}