diff --git a/typescript/Frontend/package-lock.json b/typescript/Frontend/package-lock.json index 88944aeda..b3b2c1d8a 100644 --- a/typescript/Frontend/package-lock.json +++ b/typescript/Frontend/package-lock.json @@ -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", diff --git a/typescript/Frontend/package.json b/typescript/Frontend/package.json index b0f0b125f..0d166a2ae 100644 --- a/typescript/Frontend/package.json +++ b/typescript/Frontend/package.json @@ -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", diff --git a/typescript/Frontend/src/App.tsx b/typescript/Frontend/src/App.tsx index 59d9a6a33..711216363 100644 --- a/typescript/Frontend/src/App.tsx +++ b/typescript/Frontend/src/App.tsx @@ -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 ( - - - - - - - - - - - {currentView === "installations" ? ( - - ) : ( - - )} - - - - - - {currentView === "installations" && ( - <> - - - } - /> - } /> - } - /> - } /> - - - )} - + + + + + + + + + + {currentView === "installations" ? : } - - - + + + + + {currentView === "installations" && ( + <> + + + } + /> + } /> + } /> + } /> + + + )} + + + + ); }; diff --git a/typescript/Frontend/src/components/CustomerForm.tsx b/typescript/Frontend/src/components/CustomerForm.tsx index eb0d6e3c1..a5393c71e 100644 --- a/typescript/Frontend/src/components/CustomerForm.tsx +++ b/typescript/Frontend/src/components/CustomerForm.tsx @@ -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 { diff --git a/typescript/Frontend/src/components/InstallationList.tsx b/typescript/Frontend/src/components/InstallationList.tsx index e3170bfa6..c151fd9aa 100644 --- a/typescript/Frontend/src/components/InstallationList.tsx +++ b/typescript/Frontend/src/components/InstallationList.tsx @@ -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(); - 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 ( <> - setSearchQuery(e.target.value)} - /> - - {filteredData?.map((installation) => ( - - - + + + )} + {data && ( + + {filteredData?.map((installation) => ( + + - - - - - - ))} - + + + + + + + ))} + + )} ); }; diff --git a/typescript/Frontend/src/components/Sidebar.tsx b/typescript/Frontend/src/components/Sidebar.tsx new file mode 100644 index 000000000..00d97c9a3 --- /dev/null +++ b/typescript/Frontend/src/components/Sidebar.tsx @@ -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 ( + <> + setSearchQuery(e.target.value)} + /> + + + ); +}; + +export default Sidebar; diff --git a/typescript/Frontend/src/components/UserTree.tsx b/typescript/Frontend/src/components/UserTree.tsx index 57cb861c4..219b2e8ca 100644 --- a/typescript/Frontend/src/components/UserTree.tsx +++ b/typescript/Frontend/src/components/UserTree.tsx @@ -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
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 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 ( + + {getNodes(element)} + + ); + }); + }; + return ( + } + defaultExpandIcon={} + sx={{ height: 300, flexGrow: 1, maxWidth: 400 }} + > + {renderTree(data)} + + ); }; export default UserList; diff --git a/typescript/Frontend/src/index.tsx b/typescript/Frontend/src/index.tsx index 7d6aef251..c8c69e581 100644 --- a/typescript/Frontend/src/index.tsx +++ b/typescript/Frontend/src/index.tsx @@ -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( + - , + + ); // If you want to start measuring performance in your app, pass a function diff --git a/typescript/Frontend/src/routes.json b/typescript/Frontend/src/routes.json index 5105d9474..311ef8a1c 100644 --- a/typescript/Frontend/src/routes.json +++ b/typescript/Frontend/src/routes.json @@ -1,10 +1,11 @@ { - "installationWithId": "/installation/:id", - "installation": "/installation/", - "alarmsWithId": "/alarms/:id", - "alarms": "/alarms/", - "usersWithId":"/users/:id", - "users":"/users/", - "logWithId": "/log/:id", - "log": "/log/" -} \ No newline at end of file + "installationWithId": "/installation/:id", + "installation": "/installation/", + "alarmsWithId": "/alarms/:id", + "alarms": "/alarms/", + "usersWithId": "/users/:id", + "users": "/users/", + "logWithId": "/log/:id", + "log": "/log/", + "installations": "/installations" +} diff --git a/typescript/Frontend/src/routes/Installation.tsx b/typescript/Frontend/src/routes/Installation.tsx index 8bcd82fed..675d65ca7 100644 --- a/typescript/Frontend/src/routes/Installation.tsx +++ b/typescript/Frontend/src/routes/Installation.tsx @@ -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(); 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 = () => { ); } else if (loading) { - return ; + return ( + + + + ); } else if (error) { return ( diff --git a/typescript/Frontend/src/util/installation.util.tsx b/typescript/Frontend/src/util/types.tsx similarity index 68% rename from typescript/Frontend/src/util/installation.util.tsx rename to typescript/Frontend/src/util/types.tsx index 7f35e1ebd..d77743e4a 100644 --- a/typescript/Frontend/src/util/installation.util.tsx +++ b/typescript/Frontend/src/util/types.tsx @@ -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)[]; +}