[WIP] style changes, work on error handling and user feedback

typescript/Frontend/src/App.tsx

@@ -1,10 +1,10 @@
 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 NestedList from "./components/NestedList";
+import { Box, Grid, Divider, createTheme, ThemeProvider } from "@mui/material";
+import InstallationList from "./components/InstallationList";
 import BasicTable from "./components/Table";
-import BasicTabs from "./components/Tabs";
+import InstallationTabs from "./components/InstallationTabs";
 import Alarms from "./routes/Alarms";
 import InstallationDetail from "./routes/Installation";
 import Log from "./routes/Log";
@@ -13,11 +13,23 @@ import { IntlProvider } from "react-intl";
 import { useState } from "react";
 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";
 
 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") {
@@ -32,46 +44,62 @@ const App = () => {
 
   return (
     <BrowserRouter>
-      <IntlProvider
-        messages={getTranslations()}
-        locale={language}
-        defaultLocale="en"
-      >
-        <Box sx={{ padding: 2 }}>
-          <Grid container spacing={2}>
-            <Grid item xs={3}>
-              <NavigationButtons />
-              <NestedList />
-            </Grid>
-            <Grid
-              item
-              xs={1}
-              container
-              direction="row"
-              justifyContent="center"
-              alignItems="center"
-            >
-              <Divider orientation="vertical" variant="middle" />
-            </Grid>
-            <Grid item xs={8}>
-              <BasicTabs
-                removeToken={removeToken}
-                language={language}
-                setLanguage={setLanguage}
-              />
-              <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>
+      <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>
-      </IntlProvider>
+          <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>
+            </Grid>
+          </Box>
+        </IntlProvider>
+      </ThemeProvider>
     </BrowserRouter>
   );
 };

typescript/Frontend/src/components/CustomerForm.tsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Snackbar } from "@mui/material";
+import { Alert, Button, Grid, InputLabel, Snackbar } from "@mui/material";
 import { useFormik } from "formik";
 import { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -92,20 +92,25 @@ const CustomerForm = (props: I_CustomerFormProps) => {
         value={formik.values.orderNumbers}
         handleChange={formik.handleChange}
       />
-      <Button variant="outlined" type="submit">
-        <FormattedMessage id="applyChanges" defaultMessage="Apply changes" />
-      </Button>
+      <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
+        <Button variant="outlined" type="submit">
+          <FormattedMessage id="applyChanges" defaultMessage="Apply changes" />
+        </Button>
+      </Grid>
       <Snackbar
         open={open}
         anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "right",
+          vertical: "top",
+          horizontal: "center",
         }}
         autoHideDuration={6000}
         onClose={handleClose}
       >
         <Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
-        <FormattedMessage id="updatedSuccessfully" defaultMessage="Updated successfully" />
+          <FormattedMessage
+            id="updatedSuccessfully"
+            defaultMessage="Updated successfully"
+          />
         </Alert>
       </Snackbar>
     </form>

typescript/Frontend/src/components/InnovenergyTextfield.tsx

@@ -1,4 +1,4 @@
-import { TextField } from "@mui/material";
+import { Grid, InputLabel, TextField } from "@mui/material";
 
 interface I_InnovenergyTextfieldProps {
   id: string;
@@ -7,21 +7,31 @@ interface I_InnovenergyTextfieldProps {
   name: string;
   handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   type?: string;
+  readOnly?: boolean;
 }
 
 const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => {
   return (
-    <TextField
-      id={props.id}
-      label={props.label}
-      variant="outlined"
-      name={props.name}
-      type={props.type}
-      fullWidth
-      sx={{ my: 0.5 }}
-      value={props.value || ""}
-      onChange={props.handleChange}
-    />
+    <Grid container direction="row" alignItems="center" spacing={2}>
+      <Grid item xs={3}>
+        <InputLabel>{props.label}</InputLabel>
+      </Grid>
+      <Grid item xs={9}>
+        <TextField
+          id={props.id}
+          variant="outlined"
+          name={props.name}
+          type={props.type}
+          fullWidth
+          sx={{ my: 0.5 }}
+          value={props.value || ""}
+          onChange={props.handleChange}
+          InputProps={{
+            readOnly: props.readOnly,
+          }}
+        />
+      </Grid>
+    </Grid>
   );
 };
 

typescript/Frontend/src/components/InstallationList.tsx

@@ -1,95 +1,102 @@
-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 { 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 axiosConfig from "../config/axiosConfig";
-import { useIntl } from "react-intl";
-
-const getPathWithoutId = (path?: string) => {
-  if (path) {
-    const splitString = path.split(":");
-    return splitString[0];
-  }
-  return routes.installation;
-};
-
-const filterData = (
-  searchQuery: string,
-  data: I_Installation[] | undefined
-) => {
-  if (data) {
-    return data.filter(
-      (installation) =>
-        installation.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        installation.location.toLowerCase().includes(searchQuery.toLowerCase())
-    );
-  }
-  return data;
-};
-
-const NestedList = () => {
-  const [data, setData] = useState<I_Installation[]>();
-  const [searchQuery, setSearchQuery] = useState("");
-  const intl = useIntl();
-  const filteredData = filterData(searchQuery, data);
-
-  const routeMatch = useRouteMatch([
-    routes.installationWithId,
-    routes.alarmsWithId,
-    routes.usersWithId,
-    routes.logWithId,
-  ]);
-
-  useEffect(() => {
-    console.log("useeffect");
-    axiosConfig.get("/GetAllInstallations", {}).then((res) => {
-      setData(res.data);
-    });
-  }, []);
-
-  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" }}
-        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)}
-              >
-                <ListItemText
-                  primary={installation.location + " | " + installation.name}
-                />
-              </ListItemButton>
-            </Link>
-            <Divider />
-          </Fragment>
-        ))}
-      </List>
-    </>
-  );
-};
-
-export default NestedList;
+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 { 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 axiosConfig from "../config/axiosConfig";
+import { useIntl } from "react-intl";
+
+const getPathWithoutId = (path?: string) => {
+  if (path) {
+    const splitString = path.split(":");
+    return splitString[0];
+  }
+  return routes.installation;
+};
+
+const filterData = (
+  searchQuery: string,
+  data: I_Installation[] | undefined
+) => {
+  if (data) {
+    return data.filter(
+      (installation) =>
+        installation.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        installation.location.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }
+  return data;
+};
+
+const InstallationList = () => {
+  const [data, setData] = useState<I_Installation[]>();
+  const [searchQuery, setSearchQuery] = useState("");
+  const intl = useIntl();
+  const filteredData = filterData(searchQuery, data);
+
+  const routeMatch = useRouteMatch([
+    routes.installationWithId,
+    routes.alarmsWithId,
+    routes.usersWithId,
+    routes.logWithId,
+  ]);
+
+  useEffect(() => {
+    axiosConfig.get("/GetAllInstallations", {}).then((res) => {
+      setData(res.data);
+    });
+  }, []);
+
+  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)}
+              >
+                <ListItemText
+                  primary={installation.location + " | " + installation.name}
+                />
+              </ListItemButton>
+            </Link>
+            <Divider />
+          </Fragment>
+        ))}
+      </List>
+    </>
+  );
+};
+
+export default InstallationList;

typescript/Frontend/src/components/InstallationTabs.tsx

@@ -0,0 +1,73 @@
+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 InstallationTabs = () => {
+  const routeMatch = useRouteMatch([
+    routes.installationWithId,
+    routes.alarmsWithId,
+    routes.usersWithId,
+    routes.logWithId,
+  ]);
+
+  const id = routeMatch?.params?.id;
+  const intl = useIntl();
+
+  if (id) {
+    return (
+      <Box sx={{ width: "100%" }}>
+        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+          <Tabs
+            value={routeMatch?.pattern?.path ?? routes.installationWithId}
+            aria-label="basic tabs example"
+          >
+            <Tab
+              label={intl.formatMessage({
+                id: "installation",
+                defaultMessage: "Installation",
+              })}
+              value={routes.installationWithId}
+              component={Link}
+              to={routes.installation + id}
+            />
+            <Tab
+              label={intl.formatMessage({
+                id: "alarms",
+                defaultMessage: "Alarms",
+              })}
+              value={routes.alarmsWithId}
+              component={Link}
+              to={routes.alarms + id}
+            />
+            <Tab
+              label={intl.formatMessage({
+                id: "users",
+                defaultMessage: "Users",
+              })}
+              value={routes.usersWithId}
+              component={Link}
+              to={routes.users + id}
+            />
+            <Tab
+              label={intl.formatMessage({
+                id: "log",
+                defaultMessage: "Log",
+              })}
+              value={routes.logWithId}
+              component={Link}
+              to={routes.log + id}
+            />
+          </Tabs>
+        </Box>
+      </Box>
+    );
+  }
+  return null;
+};
+
+export default InstallationTabs;

typescript/Frontend/src/components/LanguageSelect.tsx

@@ -13,7 +13,6 @@ const LanguageSelect = (props: LanguageSelectProps) => {
       value={props.language}
       label="Age"
       onChange={(e) => props.setLanguage(e.target.value)}
-      sx={{ ml: "auto" }}
     >
       <MenuItem value="en">
         <FormattedMessage id="english" defaultMessage="English" />

typescript/Frontend/src/components/NavigationButtons.tsx

@@ -1,23 +1,36 @@
-import { Button, ButtonGroup } from "@mui/material";
+import { ToggleButton, ToggleButtonGroup } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 
-const NavigationButtons = () => {
+interface NavigationButtonsProps {
+  currentView: string;
+  setCurrentView: (value: string) => void;
+}
+const NavigationButtons = (props: NavigationButtonsProps) => {
+  const handleChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newAlignment: string
+  ) => {
+    props.setCurrentView(newAlignment);
+  };
+
   return (
-    <ButtonGroup
-      variant="outlined"
-      aria-label="outlined primary button group"
-      sx={{ paddingBottom: 3 }}
+    <ToggleButtonGroup
+      color="primary"
+      value={props.currentView}
+      exclusive
+      onChange={handleChange}
+      sx={{ mb: 1 }}
     >
-      <Button>
+      <ToggleButton value="installations">
         <FormattedMessage
           id="allInstallations"
           defaultMessage="All installations"
         />
-      </Button>
-      <Button>
+      </ToggleButton>
+      <ToggleButton value="users">
         <FormattedMessage id="users" defaultMessage="Users" />
-      </Button>
-    </ButtonGroup>
+      </ToggleButton>
+    </ToggleButtonGroup>
   );
 };
 

typescript/Frontend/src/components/Tabs.tsx

@@ -1,82 +0,0 @@
-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";
-import LogoutButton from "./LogoutButton";
-import LanguageSelect from "./LanguageSelect";
-
-interface BasicTabsProps {
-  removeToken: () => void;
-  language: string;
-  setLanguage: (language: string) => void;
-}
-const BasicTabs = (props: BasicTabsProps) => {
-  const routeMatch = useRouteMatch([
-    routes.installationWithId,
-    routes.alarmsWithId,
-    routes.usersWithId,
-    routes.logWithId,
-  ]);
-
-  const id = routeMatch?.params?.id;
-  const intl = useIntl();
-
-  return (
-    <Box sx={{ width: "100%" }}>
-      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-        <Tabs
-          value={routeMatch?.pattern?.path ?? routes.installationWithId}
-          aria-label="basic tabs example"
-        >
-          <Tab
-            label={intl.formatMessage({
-              id: "installation",
-              defaultMessage: "Installation",
-            })}
-            value={routes.installationWithId}
-            component={Link}
-            to={routes.installation + id}
-          />
-          <Tab
-            label={intl.formatMessage({
-              id: "alarms",
-              defaultMessage: "Alarms",
-            })}
-            value={routes.alarmsWithId}
-            component={Link}
-            to={routes.alarms + id}
-          />
-          <Tab
-            label={intl.formatMessage({
-              id: "users",
-              defaultMessage: "Users",
-            })}
-            value={routes.usersWithId}
-            component={Link}
-            to={routes.users + id}
-          />
-          <Tab
-            label={intl.formatMessage({
-              id: "log",
-              defaultMessage: "Log",
-            })}
-            value={routes.logWithId}
-            component={Link}
-            to={routes.log + id}
-          />
-          <LanguageSelect
-            language={props.language}
-            setLanguage={props.setLanguage}
-          />
-          <LogoutButton removeToken={props.removeToken} />
-        </Tabs>
-      </Box>
-    </Box>
-  );
-};
-
-export default BasicTabs;

typescript/Frontend/src/components/UserTree.tsx

@@ -0,0 +1,5 @@
+const UserList = () => {
+  return <div>Userlist</div>;
+};
+
+export default UserList;

typescript/Frontend/src/lang/en.json

@@ -2,7 +2,7 @@
   "alarms": "Alarms",
   "allInstallations": "All installations",
   "applyChanges": "Apply changes",
-  "country": "country",
+  "country": "Country",
   "customerName": "Customer name",
   "english": "English",
   "german": "German",
@@ -15,4 +15,4 @@
   "users": "Users",
   "logout": "Logout",
   "updatedSuccessfully": "Updated successfully"
-}
+}

typescript/Frontend/src/routes/Installation.tsx

@@ -13,26 +13,23 @@ const InstallationDetail = () => {
   const [error, setError] = useState<AxiosError>();
 
   useEffect(() => {
-    setLoading(true);
-    axiosConfig
-      .get("/GetInstallationById?id=" + id)
-      .then((res) => {
-        setValues(res.data);
-        setLoading(false);
-      })
-      .catch((err: AxiosError) => {
-        setError(err);
-        setLoading(false);
-      });
+    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);
+        });
+    }
   }, [id]);
 
-  if (error) {
-    return (
-      <Alert severity="error" sx={{ mt: 1 }}>
-        {error.message}
-      </Alert>
-    );
-  } else if (values && values.id.toString() === id) {
+  if (values && values.id && values.id.toString() === id) {
     return (
       <Box sx={{ py: 3, width: 1 / 2 }}>
         <CustomerForm values={values} id={id} />
@@ -40,6 +37,12 @@ const InstallationDetail = () => {
     );
   } else if (loading) {
     return <CircularProgress sx={{ m: 2 }} />;
+  } else if (error) {
+    return (
+      <Alert severity="error" sx={{ mt: 1 }}>
+        {error.message}
+      </Alert>
+    );
   }
   return null;
 };