diff --git a/typescript/Frontend/src/App.tsx b/typescript/Frontend/src/App.tsx
index 5a482cdda..f33d0aafd 100644
--- a/typescript/Frontend/src/App.tsx
+++ b/typescript/Frontend/src/App.tsx
@@ -1,6 +1,6 @@
import useToken from "./hooks/useToken";
import Login from "./Login";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import { Grid } from "@mui/material";
import routes from "./routes.json";
import { IntlProvider } from "react-intl";
@@ -11,7 +11,7 @@ import LanguageSelect from "./components/LanguageSelect";
import LogoutButton from "./components/LogoutButton";
import Installations from "./routes/Installations";
-import Users from "./routes/Users";
+import Groups from "./routes/Groups";
const App = () => {
const { token, setToken, removeToken } = useToken();
@@ -40,11 +40,15 @@ const App = () => {
+ }
+ />
}
/>
- } />
+ } />
diff --git a/typescript/Frontend/src/Login.tsx b/typescript/Frontend/src/Login.tsx
index 72e8157e1..10939760d 100644
--- a/typescript/Frontend/src/Login.tsx
+++ b/typescript/Frontend/src/Login.tsx
@@ -1,5 +1,5 @@
import React, { useState } from "react";
-import { Alert, Button, CircularProgress } from "@mui/material";
+import { Alert, Button, CircularProgress, Grid } from "@mui/material";
import Container from "@mui/material/Container";
import InnovenergyTextfield from "./components/InnovenergyTextfield";
import { axiosConfigWithoutToken } from "./config/axiosConfig";
@@ -47,11 +47,11 @@ const Login = ({ setToken }: { setToken: any }) => {
handleChange={(e) => setPassword(e.target.value)}
/>
{error && Incorrect username or password}
-
+
-
+
{loading && }
);
diff --git a/typescript/Frontend/src/components/GroupTabs.tsx b/typescript/Frontend/src/components/GroupTabs.tsx
new file mode 100644
index 000000000..dee0b92dd
--- /dev/null
+++ b/typescript/Frontend/src/components/GroupTabs.tsx
@@ -0,0 +1,50 @@
+import * as React from "react";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+import { Link } from "react-router-dom";
+import routes from "../routes.json";
+import useRouteMatch from "../hooks/useRouteMatch";
+import { useIntl } from "react-intl";
+
+const GroupTabs = () => {
+ const routeMatch = useRouteMatch([
+ routes.groups + routes.group + ":id",
+ routes.groups + routes.users + ":id",
+ ]);
+
+ const id = routeMatch?.params?.id;
+ const intl = useIntl();
+
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default GroupTabs;
diff --git a/typescript/Frontend/src/components/UserTree.tsx b/typescript/Frontend/src/components/GroupTree.tsx
similarity index 70%
rename from typescript/Frontend/src/components/UserTree.tsx
rename to typescript/Frontend/src/components/GroupTree.tsx
index 0e9a7694a..cd400e398 100644
--- a/typescript/Frontend/src/components/UserTree.tsx
+++ b/typescript/Frontend/src/components/GroupTree.tsx
@@ -5,8 +5,9 @@ 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, setData] = useState();
+import { Link } from "react-router-dom";
+const GroupTree = () => {
+ const [data, setData] = useState<(I_Folder | I_Installation)[]>();
useEffect(() => {
axiosConfig.get("/GetTree").then((res) => {
@@ -14,11 +15,6 @@ const UserList = () => {
});
}, []);
- const handleClick = (e: any, nodes: any) => {
- console.log(e);
- console.log(nodes);
- };
-
const instanceOfFolder = (object: any): object is I_Folder => {
return "children" in object;
};
@@ -33,13 +29,18 @@ const UserList = () => {
const renderTree = (data: (I_Folder | I_Installation)[]): ReactNode => {
return data.map((element) => {
return (
-
- {getNodes(element)}
-
+
+ {getNodes(element)}
+
+
);
});
};
@@ -49,11 +50,10 @@ const UserList = () => {
defaultCollapseIcon={}
defaultExpandIcon={}
sx={{ height: 300, flexGrow: 1, maxWidth: 400 }}
- onNodeToggle={handleClick}
>
{data && renderTree(data)}
);
};
-export default UserList;
+export default GroupTree;
diff --git a/typescript/Frontend/src/components/InstallationList.tsx b/typescript/Frontend/src/components/InstallationList.tsx
index 07ff648fe..082202e7c 100644
--- a/typescript/Frontend/src/components/InstallationList.tsx
+++ b/typescript/Frontend/src/components/InstallationList.tsx
@@ -77,7 +77,6 @@ const InstallationList = (props: InstallationListProps) => {
aria-labelledby="nested-list-subheader"
>
{filteredData?.map((installation) => {
- console.log(routeMatch);
return (
{
id: "installation",
defaultMessage: "Installation",
})}
- value={
- routes.installations + routes.installation + ":id"
- }
+ value={routes.installations + routes.installation + ":id"}
component={Link}
to={routes.installation + id}
/>
diff --git a/typescript/Frontend/src/components/NavigationButtons.tsx b/typescript/Frontend/src/components/NavigationButtons.tsx
index 096061cb0..0283785e2 100644
--- a/typescript/Frontend/src/components/NavigationButtons.tsx
+++ b/typescript/Frontend/src/components/NavigationButtons.tsx
@@ -7,7 +7,7 @@ import routes from "../routes.json";
const NavigationButtons = () => {
const routeMatch = useRouteMatch([
routes.installations + "*",
- routes.tree + "*",
+ routes.groups + "*",
]);
return (
@@ -27,8 +27,8 @@ const NavigationButtons = () => {
defaultMessage="All installations"
/>
-
-
+
+
);
diff --git a/typescript/Frontend/src/lang/de.json b/typescript/Frontend/src/lang/de.json
index 21a9804f7..6af37ed1d 100644
--- a/typescript/Frontend/src/lang/de.json
+++ b/typescript/Frontend/src/lang/de.json
@@ -14,5 +14,7 @@
"search": "Suche",
"users": "Benutzer",
"logout": "Logout",
- "updatedSuccessfully": "Erfolgreich aktualisiert"
+ "updatedSuccessfully": "Erfolgreich aktualisiert",
+ "groups": "Gruppen",
+ "group": "Gruppe"
}
diff --git a/typescript/Frontend/src/lang/en.json b/typescript/Frontend/src/lang/en.json
index 8d6940a56..a0d76620b 100644
--- a/typescript/Frontend/src/lang/en.json
+++ b/typescript/Frontend/src/lang/en.json
@@ -14,5 +14,7 @@
"search": "Search",
"users": "Users",
"logout": "Logout",
- "updatedSuccessfully": "Updated successfully"
+ "updatedSuccessfully": "Updated successfully",
+ "groups": "Groups",
+ "group": "Group"
}
diff --git a/typescript/Frontend/src/routes.json b/typescript/Frontend/src/routes.json
index c65eb635d..0aba4fef1 100644
--- a/typescript/Frontend/src/routes.json
+++ b/typescript/Frontend/src/routes.json
@@ -4,5 +4,6 @@
"users": "users/",
"log": "log/",
"installations": "/installations/",
- "tree": "/users/*"
+ "groups": "/groups/",
+ "group": "group/"
}
diff --git a/typescript/Frontend/src/routes/Group.tsx b/typescript/Frontend/src/routes/Group.tsx
new file mode 100644
index 000000000..fe1d53cde
--- /dev/null
+++ b/typescript/Frontend/src/routes/Group.tsx
@@ -0,0 +1,48 @@
+import { Box, CircularProgress, Alert } from "@mui/material";
+import { AxiosError } from "axios";
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import axiosConfig from "../config/axiosConfig";
+import { I_Installation } from "../util/types";
+
+const Group = () => {
+ const { id } = useParams();
+ const [values, setValues] = useState();
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState();
+
+ useEffect(() => {
+ setLoading(true);
+ axiosConfig
+ .get("/GetFolderById?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) {
+ return {id};
+ } else if (loading) {
+ return (
+
+
+
+ );
+ } else if (error) {
+ return (
+
+ {error.message}
+
+ );
+ }
+ return null;
+};
+
+export default Group;
diff --git a/typescript/Frontend/src/routes/Groups.tsx b/typescript/Frontend/src/routes/Groups.tsx
new file mode 100644
index 000000000..d5eb782c9
--- /dev/null
+++ b/typescript/Frontend/src/routes/Groups.tsx
@@ -0,0 +1,30 @@
+import { Grid } from "@mui/material";
+import { Container } from "@mui/system";
+import { Routes, Route } from "react-router";
+import GroupTabs from "../components/GroupTabs";
+import NavigationButtons from "../components/NavigationButtons";
+import UserTree from "../components/GroupTree";
+import routes from "../routes.json";
+import Group from "./Group";
+
+const Groups = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ } index />
+ Users} />
+
+
+
+
+ );
+};
+
+export default Groups;
diff --git a/typescript/Frontend/src/routes/Installations.tsx b/typescript/Frontend/src/routes/Installations.tsx
index f412a2934..2670ce302 100644
--- a/typescript/Frontend/src/routes/Installations.tsx
+++ b/typescript/Frontend/src/routes/Installations.tsx
@@ -1,4 +1,4 @@
-import { Grid, Divider } from "@mui/material";
+import { Grid } from "@mui/material";
import { Container } from "@mui/system";
import { Routes, Route } from "react-router";
import InstallationTabs from "../components/InstallationTabs";
@@ -13,22 +13,12 @@ import Sidebar from "../components/Sidebar";
const Installations = () => {
return (
-
+
-
-
-
-
+
{
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default Users;