From 7cb055bc7b85a96a55796e0edc189048e8ee4bdb Mon Sep 17 00:00:00 2001 From: Noe Date: Fri, 30 Jun 2023 08:58:50 +0200 Subject: [PATCH] styling of website --- csharp/App/Backend/Controller.cs | 7 +- typescript/Frontend/src/App.tsx | 14 +- typescript/Frontend/src/Login.tsx | 2 +- typescript/Frontend/src/ResetPassword.tsx | 2 +- .../AccessManagement/AccessManagement.tsx | 4 +- .../AccessManagement/AvailableUserDialog.tsx | 2 + .../AccessManagement/InnovenergyList.tsx | 4 +- .../Frontend/src/components/Groups/Folder.tsx | 20 ++- .../src/components/Groups/FolderForm.tsx | 2 +- .../src/components/Groups/GroupTabs.tsx | 17 ++- .../src/components/Groups/Tree/GroupTree.scss | 4 + .../src/components/Groups/Tree/GroupTree.tsx | 4 +- .../components/Installations/Installation.tsx | 19 ++- .../Installations/InstallationList.tsx | 22 +++- .../Installations/InstallationTabs.tsx | 18 ++- .../Installations/Installations.tsx | 4 +- .../Installations/Log/CheckboxTree.tsx | 8 +- .../Installations/Log/DateRangePicker.tsx | 1 + .../Installations/Log/ShortcutButton.tsx | 2 + .../Installations/Log/TopologyBox.scss | 10 ++ .../Installations/Log/TopologyView.tsx | 13 +- .../Frontend/src/components/Layout/Detail.tsx | 2 +- .../components/Layout/InnovenergyButton.tsx | 5 +- .../Layout/InnovenergyTextfield.tsx | 14 +- .../src/components/Layout/LanguageSelect.tsx | 1 + .../src/components/Layout/ModeButtons.tsx | 2 + .../components/Layout/NavigationButtons.tsx | 16 ++- .../Frontend/src/components/Layout/Search.tsx | 55 +++++++- .../Frontend/src/components/Users/AddUser.tsx | 4 +- .../Frontend/src/components/Users/User.tsx | 19 ++- .../src/components/Users/UserForm.tsx | 2 +- .../src/components/Users/UserList.tsx | 14 ++ .../src/components/Users/UserTabs.tsx | 8 +- .../Frontend/src/components/Users/Users.tsx | 2 +- typescript/Frontend/src/index.css | 5 + typescript/Frontend/src/index.tsx | 27 ++-- .../innovenergy_Logo_onOrange-2.png(1).png | Bin 0 -> 12166 bytes .../innovenergy_Logo_onOrange-2.png.png | Bin 0 -> 12031 bytes .../Frontend/src/util/installation.util.tsx | 122 ++++++++++++++++-- typescript/Web/dist/server.js.map | 7 + typescript/Web/dist/www/client.js.map | 7 + 41 files changed, 412 insertions(+), 79 deletions(-) create mode 100644 typescript/Frontend/src/components/Groups/Tree/GroupTree.scss create mode 100644 typescript/Frontend/src/components/Installations/Log/TopologyBox.scss create mode 100644 typescript/Frontend/src/resources/innovenergy_Logo_onOrange-2.png(1).png create mode 100644 typescript/Frontend/src/resources/innovenergy_Logo_onOrange-2.png.png create mode 100644 typescript/Web/dist/server.js.map create mode 100644 typescript/Web/dist/www/client.js.map diff --git a/csharp/App/Backend/Controller.cs b/csharp/App/Backend/Controller.cs index f6366cd97..2c54fd319 100644 --- a/csharp/App/Backend/Controller.cs +++ b/csharp/App/Backend/Controller.cs @@ -206,7 +206,10 @@ public class Controller : ControllerBase if (user is null) return Unauthorized(); - return user.AccessibleInstallations().Select(i => i.FillOrderNumbers().HideParentIfUserHasNoAccessToParent(user)).ToList(); + return user + .AccessibleInstallations() + .Select(i => i.FillOrderNumbers().HideParentIfUserHasNoAccessToParent(user)) + .ToList(); } @@ -228,6 +231,8 @@ public class Controller : ControllerBase { var user = Db.GetSession(authToken)?.User; + "GetAllFoldersAndInstallations".WriteLine(); + if (user is null) return Unauthorized(); diff --git a/typescript/Frontend/src/App.tsx b/typescript/Frontend/src/App.tsx index 8847fb18a..4c26149fa 100644 --- a/typescript/Frontend/src/App.tsx +++ b/typescript/Frontend/src/App.tsx @@ -1,7 +1,8 @@ import useToken from "./hooks/useToken"; import Login from "./Login"; import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; -import { Container, Grid } from "@mui/material"; + +import { Container, Grid, colors } from "@mui/material"; import routes from "./routes.json"; import { IntlProvider } from "react-intl"; import { useContext, useState } from "react"; @@ -14,7 +15,8 @@ import NavigationButtons from "./components/Layout/NavigationButtons"; import InstallationPage from "./components/Installations/InstallationPage"; import { UserContext } from "./components/Context/UserContextProvider"; import ResetPassword from "./ResetPassword"; -import innovenergyLogo from "./resources/innovenergy_Logo_onOrange.png"; +import innovenergyLogo from "./resources/innovenergy_Logo_onOrange-2.png(1).png"; +import { Background } from "reactflow"; const App = () => { const { token, setToken, removeToken } = useToken(); @@ -43,9 +45,13 @@ const App = () => { defaultLocale="EN" > - + - innovenergy logo + innovenergy logo diff --git a/typescript/Frontend/src/Login.tsx b/typescript/Frontend/src/Login.tsx index 7d0b5104f..a63dc349b 100644 --- a/typescript/Frontend/src/Login.tsx +++ b/typescript/Frontend/src/Login.tsx @@ -80,7 +80,7 @@ const Login = ({ setToken, setLanguage }: I_LoginProps) => { Login - {loading && } + {loading && } ); }; diff --git a/typescript/Frontend/src/ResetPassword.tsx b/typescript/Frontend/src/ResetPassword.tsx index ea893289a..916c13e43 100644 --- a/typescript/Frontend/src/ResetPassword.tsx +++ b/typescript/Frontend/src/ResetPassword.tsx @@ -72,7 +72,7 @@ const ResetPassword = () => { Submit - {loading && } + {loading && } ); diff --git a/typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx b/typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx index 733784022..516d82a34 100644 --- a/typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx +++ b/typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx @@ -12,8 +12,8 @@ const AccessManagement = () => { return ( - - + + {getCurrentUser().hasWriteAccess && } diff --git a/typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx b/typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx index 0fa267e85..4d1fe7209 100644 --- a/typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx +++ b/typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx @@ -4,6 +4,7 @@ import { DialogContent, DialogTitle, TextField, + colors, } from "@mui/material"; import DialogActions from "@mui/material/DialogActions"; import { useContext, useState } from "react"; @@ -98,6 +99,7 @@ const AvailableUserDialog = () => { id="available-user-dialog-submit-button" type="submit" onClick={() => setOpen(true)} + sx={{ m: 2 }} > diff --git a/typescript/Frontend/src/components/Groups/AccessManagement/InnovenergyList.tsx b/typescript/Frontend/src/components/Groups/AccessManagement/InnovenergyList.tsx index ddf0607a7..edff85f47 100644 --- a/typescript/Frontend/src/components/Groups/AccessManagement/InnovenergyList.tsx +++ b/typescript/Frontend/src/components/Groups/AccessManagement/InnovenergyList.tsx @@ -10,11 +10,11 @@ const InnovenergyList = (props: InnovenergyListProps) => { return ( { return ( <> - + { - + ); } else if (error) { diff --git a/typescript/Frontend/src/components/Groups/FolderForm.tsx b/typescript/Frontend/src/components/Groups/FolderForm.tsx index 24c11f99e..dcdcf527e 100644 --- a/typescript/Frontend/src/components/Groups/FolderForm.tsx +++ b/typescript/Frontend/src/components/Groups/FolderForm.tsx @@ -79,7 +79,7 @@ const FolderForm = (props: I_CustomerFormProps) => { handleChange={formik.handleChange} /> - {loading && } + {loading && } {!readOnly && additionalButtons && additionalButtons.map((button) => button)} diff --git a/typescript/Frontend/src/components/Groups/GroupTabs.tsx b/typescript/Frontend/src/components/Groups/GroupTabs.tsx index 573a36594..7bddabd7a 100644 --- a/typescript/Frontend/src/components/Groups/GroupTabs.tsx +++ b/typescript/Frontend/src/components/Groups/GroupTabs.tsx @@ -5,7 +5,11 @@ import useRouteMatch from "../../hooks/useRouteMatch"; import { useIntl } from "react-intl"; import { GroupContext } from "../Context/GroupContextProvider"; import { useContext } from "react"; -import { AntTabs, StyledTab } from "../../util/installation.util"; +import { + AntTabs, + StyledTab, + StyledTabBlue, +} from "../../util/installation.util"; const GroupTabs = () => { const routeMatch = useRouteMatch([ @@ -21,7 +25,7 @@ const GroupTabs = () => { if (id) { return ( - + { })} > {currentType === "Folder" ? ( - { to={routes.folder + id} /> ) : ( - { /> )} - { onClick={() => setCurrentType(element.type)} sx={{ ".MuiTreeItem-content": { paddingY: "12px" }, + bgcolor: "#CCD6E4", + borderRadius: 2, }} > {getNodes(element)} @@ -64,7 +66,7 @@ const GroupTree = () => { if (loading) { return ( - + ); } diff --git a/typescript/Frontend/src/components/Installations/Installation.tsx b/typescript/Frontend/src/components/Installations/Installation.tsx index a73fef895..7c622bf6e 100644 --- a/typescript/Frontend/src/components/Installations/Installation.tsx +++ b/typescript/Frontend/src/components/Installations/Installation.tsx @@ -31,7 +31,22 @@ const Installation = (props: I_InstallationProps) => { if (values && values.id && values.id.toString() === id) { return ( - + { - + ); } else if (error) { diff --git a/typescript/Frontend/src/components/Installations/InstallationList.tsx b/typescript/Frontend/src/components/Installations/InstallationList.tsx index 77673bbab..7cce7cbc5 100644 --- a/typescript/Frontend/src/components/Installations/InstallationList.tsx +++ b/typescript/Frontend/src/components/Installations/InstallationList.tsx @@ -53,7 +53,7 @@ const InstallationList = (props: InstallationListProps) => { if (loading) { return ( - + ); } else if (data && data.length) { @@ -66,12 +66,11 @@ const InstallationList = (props: InstallationListProps) => { overflow: "auto", py: 0, mt: 1, - maxHeight: "70vh", height: routeMatch?.pattern.path === routes.installations + routes.list + routes.log + ":id" ? "130px" - : "80vh", + : "500px", }} component="nav" aria-labelledby="nested-list-subheader" @@ -84,11 +83,25 @@ const InstallationList = (props: InstallationListProps) => { to={ getPathWithoutId(routeMatch?.pattern?.path) + installation.id } - style={{ textDecoration: "none", color: "black" }} + style={{ textDecoration: "none", color: "#2b3e54" }} > { /> - ); })} diff --git a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx index 0d20be0b5..63a57e2b5 100644 --- a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx +++ b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx @@ -4,7 +4,14 @@ import { Link } from "react-router-dom"; import routes from "../../routes.json"; import useRouteMatch from "../../hooks/useRouteMatch"; import { useIntl } from "react-intl"; -import { AntTabs, StyledTab } from "../../util/installation.util"; +import { + AntTabs, + StyledTab, + StyledTabBlue, + StyledTabWhite, +} from "../../util/installation.util"; +import { colors } from "@mui/material"; +import { Background } from "reactflow"; const InstallationTabs = () => { const routeMatch = useRouteMatch([ @@ -19,7 +26,7 @@ const InstallationTabs = () => { if (id) { return ( - + { defaultMessage: "Installation tabs", })} > - { component={Link} to={routes.installation + id} /> - { to={routes.liveView + id} /> { const routeMatch = useRouteMatch([ diff --git a/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx b/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx index f9d658042..81fe3b22d 100644 --- a/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx +++ b/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx @@ -1,5 +1,5 @@ import { TreeItem, TreeView } from "@mui/lab"; -import { Checkbox, Divider } from "@mui/material"; +import { Checkbox, Divider, colors } from "@mui/material"; import { useContext, ReactNode } from "react"; import { LogContext } from "../../Context/LogContextProvider"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; @@ -7,6 +7,7 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import useRouteMatch from "../../../hooks/useRouteMatch"; import routes from "../../../routes.json"; import React from "react"; +import { blueGrey } from "@mui/material/colors"; export interface ToggleElement { [key: string]: boolean; @@ -81,6 +82,7 @@ const CheckboxTree = () => { } sx={{ ".MuiTreeItem-content": { paddingY: "5px" }, + bgcolor: "#CCD6E4", }} > {getNodes(element)} @@ -98,12 +100,14 @@ const CheckboxTree = () => { defaultCollapseIcon={} defaultExpandIcon={} sx={{ - flexGrow: 1, + flexGrow: 100, overflow: "auto", overflowX: "hidden", position: ["sticky", "-webkit-sticky"], top: 1, maxHeight: "90vh", + borderBottomLeftRadius: 5, + borderBottomRightRadius: 5, }} > {renderTree(toggles)} diff --git a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx b/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx index 8c6971914..e6fe2b1f1 100644 --- a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx +++ b/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx @@ -6,6 +6,7 @@ import { FormattedMessage } from "react-intl"; import ShortcutButton from "./ShortcutButton"; import { createTimes } from "../../../util/graph.util"; import { TimeRange, UnixTime } from "../../../dataCache/time"; +import { TextField } from "@mui/material"; interface DateRangePickerProps { setRange: (value: Date[]) => void; diff --git a/typescript/Frontend/src/components/Installations/Log/ShortcutButton.tsx b/typescript/Frontend/src/components/Installations/Log/ShortcutButton.tsx index c02bbc51d..31c5b3cff 100644 --- a/typescript/Frontend/src/components/Installations/Log/ShortcutButton.tsx +++ b/typescript/Frontend/src/components/Installations/Log/ShortcutButton.tsx @@ -1,6 +1,8 @@ +import { colors } from "@mui/material"; import { UnixTime, TimeSpan } from "../../../dataCache/time"; import { createTimes } from "../../../util/graph.util"; import InnovenergyButton from "../../Layout/InnovenergyButton"; +import { red } from "@mui/material/colors"; interface ShortcutButtonProps { setRange: (value: Date[]) => void; diff --git a/typescript/Frontend/src/components/Installations/Log/TopologyBox.scss b/typescript/Frontend/src/components/Installations/Log/TopologyBox.scss new file mode 100644 index 000000000..ea381ae6c --- /dev/null +++ b/typescript/Frontend/src/components/Installations/Log/TopologyBox.scss @@ -0,0 +1,10 @@ +.topologyBoxTitle{ + margin-block-start: "0"; + margin-block-end: "0"; + background-color: titleColor; + padding: "5px"; + border-top-left-radius: "4px"; + border-top-right-radius: "4px"; + display: "flex"; + justify-content: "center"; + } \ No newline at end of file diff --git a/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx b/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx index 91dd1e85f..1d7c757e9 100644 --- a/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx +++ b/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx @@ -45,7 +45,18 @@ const TopologyView = () => { sx={{ display: "flex", flexDirection: "row", - padding: 2, + paddingTop: 3, + paddingBottom: 3, + bgcolor: "white", + px: 3 / 8, + border: 1, + borderTopLeftRadius: 0, + WebkitBorderTopRightRadius: 0, + borderBottomLeftRadius: 4, + borderBottomRightRadius: 4, + borderColor: "#CCD6E4", + borderTopColor: "white", + marginTop: 0.05, fontFamily: `"Ubuntu", sans-serif`, fontSize: "12px", }} diff --git a/typescript/Frontend/src/components/Layout/Detail.tsx b/typescript/Frontend/src/components/Layout/Detail.tsx index d36e0515e..1e86385f9 100644 --- a/typescript/Frontend/src/components/Layout/Detail.tsx +++ b/typescript/Frontend/src/components/Layout/Detail.tsx @@ -43,7 +43,7 @@ const Detail = (props: I_DetailProps) => { - + ); } else if (error) { diff --git a/typescript/Frontend/src/components/Layout/InnovenergyButton.tsx b/typescript/Frontend/src/components/Layout/InnovenergyButton.tsx index c9dfc8daa..0a893c1a2 100644 --- a/typescript/Frontend/src/components/Layout/InnovenergyButton.tsx +++ b/typescript/Frontend/src/components/Layout/InnovenergyButton.tsx @@ -1,5 +1,7 @@ -import { Button, SxProps, Theme } from "@mui/material"; +import { Button, SxProps, Theme, colors } from "@mui/material"; +import { DAY_MARGIN } from "@mui/x-date-pickers/internals"; import { ReactNode } from "react"; +import { Background } from "reactflow"; interface I_InnovenergyButtonProps { children?: ReactNode; @@ -12,6 +14,7 @@ interface I_InnovenergyButtonProps { const InnovenergyButton = (props: I_InnovenergyButtonProps) => { return (