diff --git a/typescript/Frontend/lang/de.json b/typescript/Frontend/lang/de.json deleted file mode 100644 index 903777cdf..000000000 --- a/typescript/Frontend/lang/de.json +++ /dev/null @@ -1,136 +0,0 @@ -{ - "Information": { - "defaultMessage": "Information" - }, - "addNewChild": { - "defaultMessage": "Neues Kind hinzufügen" - }, - "addNewDialogButton": { - "defaultMessage": "Neue Dialogschaltfläche hinzufügen" - }, - "addUser": { - "defaultMessage": "Nutzer erstellen" - }, - "alarms": { - "defaultMessage": "Alarme" - }, - "applyChanges": { - "defaultMessage": "Änderungen speichern" - }, - "country": { - "defaultMessage": "Land" - }, - "createNewFolder": { - "defaultMessage": "Neuen Ordner erstellen" - }, - "createNewUser": { - "defaultMessage": "Neuen Nutzer erstellen" - }, - "customerName": { - "defaultMessage": "Kundenname" - }, - "email": { - "defaultMessage": "Email" - }, - "english": { - "defaultMessage": "Englisch" - }, - "error": { - }, - "folder": { - "defaultMessage": "Ordner" - }, - "german": { - "defaultMessage": "Deutsch" - }, - "groupTabs": { - "defaultMessage": "Gruppen" - }, - "groupTree": { - "defaultMessage": "Gruppenbaum" - }, - "information": { - "defaultMessage": "Information" - }, - "inheritedAccess": { - "defaultMessage": "Vererbter Zugriff von" - }, - "installation": { - "defaultMessage": "Installation" - }, - "installationTabs": { - "defaultMessage": "Installationen" - }, - "installations": { - "defaultMessage": "Installationen" - }, - "lastWeek": { - "defaultMessage": "Letzte Woche" - }, - "location": { - "defaultMessage": "Standort" - }, - "log": { - "defaultMessage": "Logbuch" - }, - "logout": { - "defaultMessage": "Abmelden" - }, - "makeASelection": { - "defaultMessage": "Bitte wählen Sie links eine Auswahl" - }, - "manageAccess": { - "defaultMessage": "Zugriff verwalten" - }, - "move": { - "defaultMessage": "Verschieben" - }, - "moveTo": { - "defaultMessage": "Verschieben zu" - }, - "moveTree": { - "defaultMessage": "Baum verschieben" - }, - "name": { - "defaultMessage": "Name" - }, - "navigationTabs": { - "defaultMessage": "Navigation" - }, - "orderNumbers": { - "defaultMessage": "Bestellnummer" - }, - "region": { - "defaultMessage": "Region" - }, - "requiredLocation": { - "defaultMessage": "Standort ist erforderlich" - }, - "requiredName": { - "defaultMessage": "Name ist erforderlich" - }, - "requiredRegion": { - "defaultMessage": "Region ist erforderlich" - }, - "search": { - "defaultMessage": "Suche" - }, - "submit": { - "defaultMessage": "Senden" - }, - "updateFolderErrorMessage": { - "defaultMessage": "Fehler, Ordner kann nicht aktualisiert werden" - }, - "updatedSuccessfully": { - "defaultMessage": "Erfolgreich aktualisiert" - }, - "user": { - "defaultMessage": "Nutzer" - }, - "userTabs": { - "defaultMessage": "Nutzer" - }, - "users": { - "defaultMessage": "Nutzer" - } -} diff --git a/typescript/Frontend/lang/en.json b/typescript/Frontend/lang/en.json deleted file mode 100644 index 57cfe6a64..000000000 --- a/typescript/Frontend/lang/en.json +++ /dev/null @@ -1,47 +0,0 @@ -{ - "Information": "Information", - "addNewChild": "Add new child", - "addNewDialogButton": "Add new dialog button", - "addUser": "Create user", - "alarms": "Alarms", - "applyChanges": "Apply changes", - "country": "Country", - "createNewFolder": "Create new folder", - "createNewUser": "Create new user", - "customerName": "Customer", - "email": "Email", - "english": "English", - "error": {}, - "folder": "Folder", - "german": "German", - "groupTabs": "Group tabs", - "groupTree": "Group tree", - "information": "Information", - "inheritedAccess": "Inherited access from", - "installation": "Installation", - "installationTabs": "Installation tabs", - "installations": "Installations", - "lastWeek": "Last week", - "location": "Location", - "log": "Log", - "logout": "Logout", - "makeASelection": "Please make a selection on the left", - "manageAccess": "Manage access", - "move": "Move", - "moveTo": "Move to", - "moveTree": "Move tree", - "name": "Name", - "navigationTabs": "Navigation tabs", - "orderNumbers": "Order number", - "region": "Region", - "requiredLocation": "Location is required", - "requiredName": "Name is required", - "requiredRegion": "Region is required", - "search": "Search", - "submit": "Submit", - "updateFolderErrorMessage": "Couldn't update folder, an error occured", - "updatedSuccessfully": "Updated successfully", - "user": "User", - "userTabs": "user tabs", - "users": "Users" -} diff --git a/typescript/Frontend/lang/fr.json b/typescript/Frontend/lang/fr.json deleted file mode 100644 index a1178e87d..000000000 --- a/typescript/Frontend/lang/fr.json +++ /dev/null @@ -1,136 +0,0 @@ -{ - "Information": { - "defaultMessage": "Informations" - }, - "addNewChild": { - "defaultMessage": "Ajouter un nouvel enfant" - }, - "addNewDialogButton": { - "defaultMessage": "Ajouter un nouveau bouton de dialogue" - }, - "addUser": { - "defaultMessage": "Créer un utilisateur" - }, - "alarms": { - "defaultMessage": "Alarmes" - }, - "applyChanges": { - "defaultMessage": "Appliquer les modifications" - }, - "country": { - "defaultMessage": "Pays" - }, - "createNewFolder": { - "defaultMessage": "Créer un nouveau dossier" - }, - "createNewUser": { - "defaultMessage": "Créer un nouvel utilisateur" - }, - "customerName": { - "defaultMessage": "Nom du client" - }, - "email": { - "defaultMessage": "E-mail" - }, - "english": { - "defaultMessage": "Anglais" - }, - "error": { - }, - "folder": { - "defaultMessage": "Dossier" - }, - "german": { - "defaultMessage": "Allemand" - }, - "groupTabs": { - "defaultMessage": "Onglets de groupe" - }, - "groupTree": { - "defaultMessage": "Arbre de groupe" - }, - "information": { - "defaultMessage": "Informations" - }, - "inheritedAccess": { - "defaultMessage": "Accès hérité de" - }, - "installation": { - "defaultMessage": "Installation" - }, - "installationTabs": { - "defaultMessage": "Onglets d'installation" - }, - "installations": { - "defaultMessage": "Installations" - }, - "lastWeek": { - "defaultMessage": "La semaine dernière" - }, - "location": { - "defaultMessage": "Localisation" - }, - "log": { - "defaultMessage": "Journal" - }, - "logout": { - "defaultMessage": "Déconnexion" - }, - "makeASelection": { - "defaultMessage": "Veuillez faire une sélection à gauche" - }, - "manageAccess": { - "defaultMessage": "Gérer l'accès" - }, - "move": { - "defaultMessage": "Déplacer" - }, - "moveTo": { - "defaultMessage": "Déplacer à" - }, - "moveTree": { - "defaultMessage": "Déplacer l'arbre" - }, - "name": { - "defaultMessage": "Nom" - }, - "navigationTabs": { - "defaultMessage": "Onglets de navigation" - }, - "orderNumbers": { - "defaultMessage": "Numéro de commande" - }, - "region": { - "defaultMessage": "Région" - }, - "requiredLocation": { - "defaultMessage": "L'emplacement est requis" - }, - "requiredName": { - "defaultMessage": "Le nom est obligatoire" - }, - "requiredRegion": { - "defaultMessage": "La région est obligatoire" - }, - "search": { - "defaultMessage": "Recherche" - }, - "submit": { - "defaultMessage": "Soumettre" - }, - "updateFolderErrorMessage": { - "defaultMessage": "Une erreur s'est produite, impossible de mettre à jour le dossier." - }, - "updatedSuccessfully": { - "defaultMessage": "Mise à jour réussie" - }, - "user": { - "defaultMessage": "Utilisateur" - }, - "userTabs": { - "defaultMessage": "Onglets utilisateurs" - }, - "users": { - "defaultMessage": "Utilisateurs" - } -} diff --git a/typescript/Frontend/src/App.css b/typescript/Frontend/src/App.css deleted file mode 100644 index cde4cdc47..000000000 --- a/typescript/Frontend/src/App.css +++ /dev/null @@ -1,39 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/typescript/Frontend/src/App.test.tsx b/typescript/Frontend/src/App.test.tsx deleted file mode 100644 index 2a68616d9..000000000 --- a/typescript/Frontend/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/typescript/Frontend/src/App.tsx b/typescript/Frontend/src/App.tsx index 52117d18a..0df1873f1 100644 --- a/typescript/Frontend/src/App.tsx +++ b/typescript/Frontend/src/App.tsx @@ -4,7 +4,7 @@ import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; import { Container, Grid, Box } from "@mui/material"; import routes from "./routes.json"; -import { IntlProvider, MessageFormatElement } from "react-intl"; +import { IntlProvider } from "react-intl"; import { useContext, useState } from "react"; import en from "./lang/en.json"; import de from "./lang/de.json"; @@ -28,9 +28,9 @@ const App = () => { const getTranslations = () => { switch (language) { case "en": - return de; - case "de": return en; + case "de": + return de; case "fr": return fr; } @@ -78,7 +78,7 @@ const App = () => { bgcolor={colors.greyLight} pt={3} borderTop="2px solid" - borderColor=" #a8b0be" + borderColor={colors.darkGrey} flex="1 0 auto" > diff --git a/typescript/Frontend/src/Login.tsx b/typescript/Frontend/src/Login.tsx index f23bcb958..8718f5ef1 100644 --- a/typescript/Frontend/src/Login.tsx +++ b/typescript/Frontend/src/Login.tsx @@ -1,11 +1,5 @@ import React, { useContext, useState } from "react"; -import { - Alert, - CircularProgress, - Grid, - Typography, - useTheme, -} from "@mui/material"; +import { Alert, CircularProgress, Grid, useTheme } from "@mui/material"; import Container from "@mui/material/Container"; import { axiosConfigWithoutToken } from "./config/axiosConfig"; import InnovenergyTextfield from "./components/Layout/InnovenergyTextfield"; diff --git a/typescript/Frontend/src/components/Context/S3CredentialsContextProvider.tsx b/typescript/Frontend/src/components/Context/S3CredentialsContextProvider.tsx index ae072a2c8..bef707611 100644 --- a/typescript/Frontend/src/components/Context/S3CredentialsContextProvider.tsx +++ b/typescript/Frontend/src/components/Context/S3CredentialsContextProvider.tsx @@ -30,13 +30,6 @@ const S3CredentialsContextProvider = ({ const saveS3Credentials = (credentials: S3Credentials, id: string) => { const s3Bucket = id + "-3e5b3069-214a-43ee-8d85-57d72000c19d"; setS3Credentials({ s3Bucket, ...credentials }); - /* setS3Credentials({ - s3Region: "sos-ch-dk-2", - s3Provider: "exo.io", - s3Key: "EXO15c0bf710e158e9b83270f0a", - s3Secret: "Dd5jYSiZtt_Zt5Ba5mDmaiLCdASUaKLfduSKY-SU-lg", - s3Bucket: "saliomameiringen", - });*/ }; const fetchData = (timestamp: UnixTime): Promise> => { diff --git a/typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx b/typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx index fa8c5da02..c2ba3a750 100644 --- a/typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx +++ b/typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx @@ -1,7 +1,7 @@ import { Grid } from "@mui/material"; import UsersContextProvider from "../../Context/UsersContextProvider"; import AvailableUserDialog from "./AvailableUserDialog"; -import InnovenergyList from "./InnovenergyList"; +import InnovenergyList from "../../Layout/InnovenergyList"; import UsersWithDirectAccess from "./UsersWithDirectAccess"; import UsersWithInheritedAccess from "./UsersWithInheritedAccess"; import { useContext } from "react"; diff --git a/typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx b/typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx index 9d576d323..cbdf00408 100644 --- a/typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx +++ b/typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx @@ -4,7 +4,6 @@ import { DialogContent, DialogTitle, TextField, - colors, Alert, } from "@mui/material"; import DialogActions from "@mui/material/DialogActions"; diff --git a/typescript/Frontend/src/components/Groups/AccessManagement/UsersWithDirectAccess.tsx b/typescript/Frontend/src/components/Groups/AccessManagement/UsersWithDirectAccess.tsx index 360d2727f..79ddc89ce 100644 --- a/typescript/Frontend/src/components/Groups/AccessManagement/UsersWithDirectAccess.tsx +++ b/typescript/Frontend/src/components/Groups/AccessManagement/UsersWithDirectAccess.tsx @@ -18,11 +18,11 @@ import { UserContext } from "../../Context/UserContextProvider"; import { FormattedMessage } from "react-intl"; const UsersWithDirectAccess = () => { + const { id } = useParams(); + const [error, setError] = useState(); const { fetchUsersWithDirectAccessForResource, directAccessUsers } = useContext(UsersContext); - const [error, setError] = useState(); const { currentType } = useContext(GroupContext); - const { id } = useParams(); const { getCurrentUser } = useContext(UserContext); useEffect(() => { diff --git a/typescript/Frontend/src/components/Groups/AddNewButtons.tsx b/typescript/Frontend/src/components/Groups/AddNewButtons.tsx index 7f43adee0..a4522e34a 100644 --- a/typescript/Frontend/src/components/Groups/AddNewButtons.tsx +++ b/typescript/Frontend/src/components/Groups/AddNewButtons.tsx @@ -1,13 +1,10 @@ -import { Dialog, DialogContent, DialogTitle, IconButton } from "@mui/material"; import { useState } from "react"; import { FormattedMessage, useIntl } from "react-intl"; import axiosConfig from "../../config/axiosConfig"; import { I_Folder, I_Installation } from "../../util/types"; -import FolderForm from "./FolderForm"; -import CloseIcon from "@mui/icons-material/Close"; -import InnovenergyButton from "../Layout/InnovenergyButton"; -import InstallationForm from "../Installations/InstallationForm"; -import AddNewDialog from "./AddNew"; +import FolderForm from "./Detail/FolderForm"; +import InstallationForm from "../Installations/Detail/InstallationForm"; +import AddNewDialog from "./AddNewDialog"; interface AddNewDialogProps { values: I_Folder | I_Installation; @@ -15,8 +12,6 @@ interface AddNewDialogProps { } const AddNewButtons = (props: AddNewDialogProps) => { - const [open, setOpen] = useState(false); - const handleFolderSubmit = (data: I_Folder, childData: Partial) => { return axiosConfig .post("/CreateFolder", { @@ -24,7 +19,6 @@ const AddNewButtons = (props: AddNewDialogProps) => { parentId: data.id, }) .then((res) => { - setOpen(false); return res; }); }; @@ -39,7 +33,6 @@ const AddNewButtons = (props: AddNewDialogProps) => { parentId: data.id, }) .then((res) => { - setOpen(false); return res; }); }; diff --git a/typescript/Frontend/src/components/Groups/AddNew.tsx b/typescript/Frontend/src/components/Groups/AddNewDialog.tsx similarity index 100% rename from typescript/Frontend/src/components/Groups/AddNew.tsx rename to typescript/Frontend/src/components/Groups/AddNewDialog.tsx index 9215ee72b..9c3efadda 100644 --- a/typescript/Frontend/src/components/Groups/AddNew.tsx +++ b/typescript/Frontend/src/components/Groups/AddNewDialog.tsx @@ -12,8 +12,8 @@ interface AddNewDialogProps { } const AddNewDialog = (props: AddNewDialogProps) => { - const [open, setOpen] = useState(false); const { form, id, message } = props; + const [open, setOpen] = useState(false); const intl = useIntl(); return ( <> diff --git a/typescript/Frontend/src/components/Groups/Folder.tsx b/typescript/Frontend/src/components/Groups/Detail/Folder.tsx similarity index 89% rename from typescript/Frontend/src/components/Groups/Folder.tsx rename to typescript/Frontend/src/components/Groups/Detail/Folder.tsx index 991d7d2a4..fdbc87c92 100644 --- a/typescript/Frontend/src/components/Groups/Folder.tsx +++ b/typescript/Frontend/src/components/Groups/Detail/Folder.tsx @@ -2,12 +2,11 @@ import { Box, CircularProgress, Alert, useTheme } 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_Folder } from "../../util/types"; -import AddNewButtons from "./AddNewButtons"; +import axiosConfig from "../../../config/axiosConfig"; +import { I_Folder } from "../../../util/types"; +import AddNewButtons from "../AddNewButtons"; import FolderForm from "./FolderForm"; -import MoveDialog from "./Tree/MoveDialog"; -import { colors } from "index"; +import MoveDialog from "./MoveDialog"; const Folder = () => { const { id } = useParams(); @@ -43,7 +42,7 @@ const Folder = () => { { const { values, additionalButtons, handleSubmit } = props; - const intl = useIntl(); - const { fetchData } = useContext(GroupContext); - const { getCurrentUser } = useContext(UserContext); const [snackbarOpen, setSnackbarOpen] = useState(false); const [error, setError] = useState(); const [loading, setLoading] = useState(false); + const intl = useIntl(); + const theme = useTheme(); + const { fetchData } = useContext(GroupContext); + const { getCurrentUser } = useContext(UserContext); + const readOnly = !getCurrentUser().hasWriteAccess; const formik = useFormik({ @@ -55,7 +55,6 @@ const FolderForm = (props: I_CustomerFormProps) => { }); }, }); - const theme = useTheme(); const rows: I_InnovenergyTextfieldProps[] = [ { @@ -83,33 +82,31 @@ const FolderForm = (props: I_CustomerFormProps) => { ]; return ( - <> -
- - - {loading && ( - - )} - {!readOnly && - additionalButtons && - additionalButtons.map((button) => button)} - {!readOnly && ( - - - - )} - - - - +
+ + + {loading && ( + + )} + {!readOnly && + additionalButtons && + additionalButtons.map((button) => button)} + {!readOnly && ( + + + + )} + + + ); }; diff --git a/typescript/Frontend/src/components/Groups/Tree/MoveDialog.tsx b/typescript/Frontend/src/components/Groups/Detail/MoveDialog.tsx similarity index 100% rename from typescript/Frontend/src/components/Groups/Tree/MoveDialog.tsx rename to typescript/Frontend/src/components/Groups/Detail/MoveDialog.tsx index 8df1da56d..650dc2937 100644 --- a/typescript/Frontend/src/components/Groups/Tree/MoveDialog.tsx +++ b/typescript/Frontend/src/components/Groups/Detail/MoveDialog.tsx @@ -17,13 +17,13 @@ const MoveDialog = (props: MoveDialogProps) => { const { values } = props; const [open, setOpen] = useState(false); - const [selectedParentId, setSelectedParentId] = useState( values.parentId ); + const [error, setError] = useState(); + const { fetchData, currentType } = useContext(GroupContext); const { id } = useParams(); - const [error, setError] = useState(); const handleMove = () => { const route = diff --git a/typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx b/typescript/Frontend/src/components/Groups/Detail/MoveTree.tsx similarity index 93% rename from typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx rename to typescript/Frontend/src/components/Groups/Detail/MoveTree.tsx index bf7b5744e..4210f339f 100644 --- a/typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx +++ b/typescript/Frontend/src/components/Groups/Detail/MoveTree.tsx @@ -6,7 +6,7 @@ import { I_Folder, I_Installation } from "../../../util/types"; import { GroupContext } from "../../Context/GroupContextProvider"; import { instanceOfFolder } from "../../../util/group.util"; import { useIntl } from "react-intl"; -import InnovEnergyTreeItem from "../../Layout/InnovEnergyTreeItem"; +import InnovenergyTreeItem from "../../Layout/InnovenergyTreeItem"; interface MoveTreeProps { setSelectedParentId: (value: number) => void; @@ -29,7 +29,7 @@ const MoveTree = (props: MoveTreeProps) => { .filter((element) => element.type === "Folder") .map((element) => { return ( - { label={element.name} > {getNodes(element)} - + ); }); }; diff --git a/typescript/Frontend/src/components/Groups/GroupTabs.tsx b/typescript/Frontend/src/components/Groups/GroupTabs.tsx index e53311afa..9e1ec6d73 100644 --- a/typescript/Frontend/src/components/Groups/GroupTabs.tsx +++ b/typescript/Frontend/src/components/Groups/GroupTabs.tsx @@ -12,6 +12,8 @@ import { useTheme } from "@mui/material"; const GroupTabs = () => { const theme = useTheme(); + const intl = useIntl(); + const { currentType } = useContext(GroupContext); const routeMatch = useRouteMatch([ routes.installations + routes.tree + routes.folder + ":id", routes.installations + routes.tree + routes.manageAccess + ":id", @@ -19,8 +21,6 @@ const GroupTabs = () => { ]); const id = routeMatch?.params?.id; - const intl = useIntl(); - const { currentType } = useContext(GroupContext); if (id) { return ( @@ -29,14 +29,15 @@ const GroupTabs = () => { {currentType === "Folder" ? ( { to={routes.folder + id} /> ) : ( - { sx={{ "&.Mui-selected": { color: colors.black, - backgroundColor: theme.palette.primary.dark, + backgroundColor: theme.palette.primary.dark, borderColor: theme.palette.text.disabled, borderBottom: 0, - mb:-1/8, - }}} + mb: -1 / 8, + }, + }} id="styled-tab-manage-access" label={intl.formatMessage({ id: "manageAccess", diff --git a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx b/typescript/Frontend/src/components/Groups/GroupTree.tsx similarity index 83% rename from typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx rename to typescript/Frontend/src/components/Groups/GroupTree.tsx index 26c85dc8a..4c2084fbb 100644 --- a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx +++ b/typescript/Frontend/src/components/Groups/GroupTree.tsx @@ -2,16 +2,15 @@ import TreeView from "@mui/lab/TreeView"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import { ReactNode, useContext, useEffect, useState } from "react"; -import { TreeItem } from "@mui/lab"; -import { I_Folder, I_Installation } from "../../../util/types"; +import { I_Folder, I_Installation } from "../../util/types"; import { Link } from "react-router-dom"; -import routes from "../../../routes.json"; -import { GroupContext } from "../../Context/GroupContextProvider"; -import { instanceOfFolder } from "../../../util/group.util"; +import routes from "../../routes.json"; +import { GroupContext } from "../Context/GroupContextProvider"; +import { instanceOfFolder } from "../../util/group.util"; import { Grid, CircularProgress, useTheme } from "@mui/material"; import { useIntl } from "react-intl"; -import { colors } from "../../.."; -import InnovEnergyTreeItem from "../../Layout/InnovEnergyTreeItem"; +import InnovenergyTreeItem from "../Layout/InnovenergyTreeItem"; +import TypeIcon from "./TypeIcon"; const GroupTree = () => { const { setCurrentType, fetchData, data, loading } = useContext(GroupContext); @@ -48,19 +47,24 @@ const GroupTree = () => { }} draggable={false} > - + {element.name} + + } onClick={() => setCurrentType(element.type)} > {getNodes(element)} - + ); }); }; + if (loading) { return ( diff --git a/typescript/Frontend/src/components/Groups/Groups.tsx b/typescript/Frontend/src/components/Groups/Groups.tsx index 337bdd205..952a20d8e 100644 --- a/typescript/Frontend/src/components/Groups/Groups.tsx +++ b/typescript/Frontend/src/components/Groups/Groups.tsx @@ -1,12 +1,12 @@ import { Grid } from "@mui/material"; import { Routes, Route } from "react-router"; import routes from "../../routes.json"; -import Folder from "./Folder"; +import Folder from "./Detail/Folder"; import GroupTabs from "./GroupTabs"; import GroupContextProvider from "../Context/GroupContextProvider"; -import GroupTree from "./Tree/GroupTree"; +import GroupTree from "./GroupTree"; import AccessManagement from "./AccessManagement/AccessManagement"; -import Installation from "../Installations/Installation"; +import Installation from "../Installations/Detail/Installation"; import useRouteMatch from "../../hooks/useRouteMatch"; import useInstallation from "../../hooks/useInstallation"; import { useEffect } from "react"; @@ -25,7 +25,6 @@ const Groups = () => { const id = routeMatch?.params?.id; useEffect(() => { - // TODO remove if getInstallation(id); }, [id]); return ( diff --git a/typescript/Frontend/src/components/Groups/Tree/GroupTree.scss b/typescript/Frontend/src/components/Groups/Tree/GroupTree.scss deleted file mode 100644 index 2c7cc8fa1..000000000 --- a/typescript/Frontend/src/components/Groups/Tree/GroupTree.scss +++ /dev/null @@ -1,4 +0,0 @@ -.groupTreeLink { - text-decoration: "none"; - color: "red"; -} \ No newline at end of file diff --git a/typescript/Frontend/src/components/Groups/TypeIcon.tsx b/typescript/Frontend/src/components/Groups/TypeIcon.tsx index c86b4afd7..bf8fb7397 100644 --- a/typescript/Frontend/src/components/Groups/TypeIcon.tsx +++ b/typescript/Frontend/src/components/Groups/TypeIcon.tsx @@ -4,11 +4,16 @@ import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile"; interface TypeIconProps { type: string | undefined; } + const TypeIcon = (props: TypeIconProps) => { return ( -
- {props.type === "Folder" ? : } -
+ <> + {props.type === "Folder" ? ( + + ) : ( + + )} + ); }; diff --git a/typescript/Frontend/src/components/Installations/Installation.tsx b/typescript/Frontend/src/components/Installations/Detail/Installation.tsx similarity index 85% rename from typescript/Frontend/src/components/Installations/Installation.tsx rename to typescript/Frontend/src/components/Installations/Detail/Installation.tsx index c1b1b2eae..f620b342b 100644 --- a/typescript/Frontend/src/components/Installations/Installation.tsx +++ b/typescript/Frontend/src/components/Installations/Detail/Installation.tsx @@ -2,12 +2,12 @@ import { Alert, Box, CircularProgress, useTheme } from "@mui/material"; import { AxiosError } from "axios"; import { useContext, useEffect, useState } from "react"; import { useParams } from "react-router-dom"; -import axiosConfig from "../../config/axiosConfig"; -import { I_Folder, I_Installation } from "../../util/types"; +import axiosConfig from "../../../config/axiosConfig"; +import { I_Folder, I_Installation } from "../../../util/types"; import InstallationForm from "./InstallationForm"; -import { colors } from "../.."; -import { S3CredentialsContext } from "../Context/S3CredentialsContextProvider"; -import MoveDialog from "../Groups/Tree/MoveDialog"; +import { colors } from "../../../index"; +import { S3CredentialsContext } from "../../Context/S3CredentialsContextProvider"; +import MoveDialog from "../../Groups/Detail/MoveDialog"; interface I_InstallationProps { loading?: boolean; @@ -31,7 +31,7 @@ const Installation = (props: I_InstallationProps) => { { return (
- + {/*{hasMoveButton && !readOnly && }*/} {!readOnly && diff --git a/typescript/Frontend/src/components/Installations/ExampleLogData.tsx b/typescript/Frontend/src/components/Installations/ExampleLogData.tsx deleted file mode 100644 index 643386b7b..000000000 --- a/typescript/Frontend/src/components/Installations/ExampleLogData.tsx +++ /dev/null @@ -1,492 +0,0 @@ -import { I_GraphData } from "../../util/types"; - -export type Datum = string | number | boolean | Array; -type LogData = Record; - -export type TimeSeries = Record; - -export const timeSeries: TimeSeries = { - 1673427378: { - "TruConvertAc/Ac/Current": 124, - "TruConvertAc/Ac/Voltage": 200, - "TruConvertAc/Ac/Phi": 2.89, - "TruConvertAc/Frequency": 2.89, - }, - 1674427380: { - "TruConvertAc/Ac/Current": 150, - "TruConvertAc/Ac/Voltage": 120, - "TruConvertAc/Ac/Phi": 3.21, - "TruConvertAc/Frequency": 2.41, - }, - 1675427382: { - "TruConvertAc/Ac/Current": 153, - "TruConvertAc/Ac/Voltage": 140, - "TruConvertAc/Ac/Phi": 3.9, - "TruConvertAc/Frequency": 4.41, - }, -}; - -const exampleLogData: I_GraphData[] = [ - { - TimeStamp: "1673427378", - Devices: [ - { - Name: "TruConvertAc", - Type: "Inverter", - Ac: [ - { - Current: 2.85, - Voltage: 236.2, - Phi: 2.896, - }, - { - Current: 2.87, - Voltage: 234.5, - Phi: 2.793, - }, - { - Current: 2.65, - Voltage: 240.6, - Phi: 2.941, - }, - ], - Frequency: 50.02, - Dc: { - Current: -2.254, - Voltage: 869, - }, - Alarms: [], - MainState: "Operation", - }, - { - Name: "TruConvertDc", - Type: "DcDc", - Dc: { - Current: -2.017, - Voltage: 868, - }, - Dc48: { - Current: -31, - Voltage: 55.9, - }, - Warnings: [], - Alarms: [], - "DC Power": -1751, - }, - { - Name: "EmuMeter", - Type: "Grid", - Ac: [ - { - Current: 15.658, - Voltage: 236.3, - Phi: 0.318, - }, - { - Current: 14.052, - Voltage: 234.8, - Phi: 0.2, - }, - { - Current: 9.046, - Voltage: 240.4, - Phi: 0.142, - }, - ], - Frequency: 50, - }, - { - Name: "EmuMeter", - Type: "AcInToAcOut", - Ac: [ - { - Current: 15.658, - Voltage: 236.3, - Phi: 0.318, - }, - { - Current: 14.052, - Voltage: 234.8, - Phi: 0.2, - }, - { - Current: 9.046, - Voltage: 240.4, - Phi: 0.142, - }, - ], - Frequency: 50, - }, - { - Name: "AMPT", - Type: "PvOnDc", - Dc: { - Current: 0.229, - Voltage: 921.855, - }, - }, - { - Name: "48TL Battery", - Type: "Battery", - Dc48: { - Current: 38.56, - Voltage: 53.29, - }, - Alarms: [], - Warnings: [], - Soc: 21.6, - HeaterOn: true, - EocReached: false, - BatteryCold: false, - Temperature: 265.3, - }, - ], - }, - { - TimeStamp: "1673427380", - Devices: [ - { - Name: "TruConvertAc", - Type: "Inverter", - Ac: [ - { - Current: 3.01, - Voltage: 235.6, - Phi: 2.941, - }, - { - Current: 3.04, - Voltage: 234.4, - Phi: 2.739, - }, - { - Current: 2.48, - Voltage: 241.1, - Phi: 2.765, - }, - ], - Frequency: 50.02, - Dc: { - Current: -2.215, - Voltage: 868, - }, - Alarms: [], - MainState: "Operation", - }, - { - Name: "TruConvertDc", - Type: "DcDc", - Dc: { - Current: -1.953, - Voltage: 868, - }, - Dc48: { - Current: -30, - Voltage: 55.9, - }, - Warnings: [], - Alarms: [], - "DC Power": -1695, - }, - { - Name: "EmuMeter", - Type: "Grid", - Ac: [ - { - Current: 15.658, - Voltage: 236.3, - Phi: 0.318, - }, - { - Current: 14.052, - Voltage: 234.8, - Phi: 0.2, - }, - { - Current: 9.046, - Voltage: 240.4, - Phi: 0.142, - }, - ], - Frequency: 50, - }, - { - Name: "EmuMeter", - Type: "AcInToAcOut", - Ac: [ - { - Current: 15.658, - Voltage: 236.3, - Phi: 0.318, - }, - { - Current: 14.052, - Voltage: 234.8, - Phi: 0.2, - }, - { - Current: 9.046, - Voltage: 240.4, - Phi: 0.142, - }, - ], - Frequency: 50, - }, - { - Name: "AMPT", - Type: "PvOnDc", - Dc: { - Current: 0.229, - Voltage: 921.855, - }, - }, - { - Name: "48TL Battery", - Type: "Battery", - Dc48: { - Current: 38.51, - Voltage: 53.29, - }, - Alarms: [], - Warnings: [], - Soc: 21.6, - HeaterOn: true, - EocReached: false, - BatteryCold: false, - Temperature: 265.3, - }, - ], - }, - { - TimeStamp: "1673427381", - Devices: [ - { - Name: "TruConvertAc", - Type: "Inverter", - Ac: [ - { - Current: 0.4, - Voltage: 237.2, - Phi: 1.4, - }, - { - Current: 0.55, - Voltage: 235.6, - Phi: 1.551, - }, - { - Current: 0.44, - Voltage: 241.7, - Phi: 1.501, - }, - ], - Frequency: 50.02, - Dc: { - Current: 0.007, - Voltage: 849, - }, - Alarms: [], - MainState: "Operation", - }, - { - Name: "TruConvertDc", - Type: "DcDc", - Dc: { - Current: 0.153, - Voltage: 849, - }, - Dc48: { - Current: 3, - Voltage: 52.0, - }, - Warnings: [], - Alarms: [], - "DC Power": 130, - }, - { - Name: "EmuMeter", - Type: "Grid", - Ac: [ - { - Current: 15.658, - Voltage: 236.3, - Phi: 0.318, - }, - { - Current: 14.052, - Voltage: 234.8, - Phi: 0.2, - }, - { - Current: 9.046, - Voltage: 240.4, - Phi: 0.142, - }, - ], - Frequency: 50, - }, - { - Name: "EmuMeter", - Type: "AcInToAcOut", - Ac: [ - { - Current: 15.658, - Voltage: 236.3, - Phi: 0.318, - }, - { - Current: 14.052, - Voltage: 234.8, - Phi: 0.2, - }, - { - Current: 9.046, - Voltage: 240.4, - Phi: 0.142, - }, - ], - Frequency: 50, - }, - { - Name: "AMPT", - Type: "PvOnDc", - Dc: { - Current: 0.229, - Voltage: 921.855, - }, - }, - { - Name: "48TL Battery", - Type: "Battery", - Dc48: { - Current: 6.14, - Voltage: 51.96, - }, - Alarms: [], - Warnings: [], - Soc: 21.6, - HeaterOn: true, - EocReached: false, - BatteryCold: false, - Temperature: 265.3, - }, - ], - }, - { - TimeStamp: "1673427383", - Devices: [ - { - Name: "TruConvertAc", - Type: "Inverter", - Ac: [ - { - Current: 1.16, - Voltage: 237.7, - Phi: 0.376, - }, - { - Current: 1.25, - Voltage: 236.0, - Phi: 0.707, - }, - { - Current: 0.98, - Voltage: 242.1, - Phi: 0.246, - }, - ], - Frequency: 50.02, - Dc: { - Current: 0.847, - Voltage: 847, - }, - Alarms: [], - MainState: "Operation", - }, - { - Name: "TruConvertDc", - Type: "DcDc", - Dc: { - Current: 0.979, - Voltage: 846, - }, - Dc48: { - Current: 18, - Voltage: 51.2, - }, - Warnings: [], - Alarms: [], - "DC Power": 828, - }, - { - Name: "EmuMeter", - Type: "Grid", - Ac: [ - { - Current: 12.563, - Voltage: 237.2, - Phi: 0.376, - }, - { - Current: 10.913, - Voltage: 235.6, - Phi: 0.246, - }, - { - Current: 5.983, - Voltage: 241.2, - Phi: 0.142, - }, - ], - Frequency: 50, - }, - { - Name: "EmuMeter", - Type: "AcInToAcOut", - Ac: [ - { - Current: 12.563, - Voltage: 237.2, - Phi: 0.376, - }, - { - Current: 10.913, - Voltage: 235.6, - Phi: 0.246, - }, - { - Current: 5.983, - Voltage: 241.2, - Phi: 0.142, - }, - ], - Frequency: 50, - }, - { - Name: "AMPT", - Type: "PvOnDc", - Dc: { - Current: 0.229, - Voltage: 921.855, - }, - }, - { - Name: "48TL Battery", - Type: "Battery", - Dc48: { - Current: -7.99, - Voltage: 51.31, - }, - Alarms: [], - Warnings: [], - Soc: 21.6, - HeaterOn: true, - EocReached: false, - BatteryCold: false, - Temperature: 265.3, - }, - ], - }, -]; - -export default exampleLogData; diff --git a/typescript/Frontend/src/components/Installations/InstallationList.tsx b/typescript/Frontend/src/components/Installations/InstallationList.tsx index 2b19404a0..b0093af8c 100644 --- a/typescript/Frontend/src/components/Installations/InstallationList.tsx +++ b/typescript/Frontend/src/components/Installations/InstallationList.tsx @@ -1,13 +1,7 @@ import List from "@mui/material/List"; import ListItemButton from "@mui/material/ListItemButton"; import ListItemText from "@mui/material/ListItemText"; -import { - Alert, - CircularProgress, - Divider, - Grid, - useTheme, -} from "@mui/material"; +import { Alert, CircularProgress, Grid, useTheme } from "@mui/material"; import { Link } from "react-router-dom"; import useRouteMatch from "../../hooks/useRouteMatch"; import routes from "../../routes.json"; @@ -21,14 +15,6 @@ interface InstallationListProps { searchQuery: string; } -const getPathWithoutId = (path?: string) => { - if (path) { - const splitString = path.split(":"); - return splitString[0]; - } - return routes.installation; -}; - const filterData = ( searchQuery: string, data: I_Installation[] | undefined @@ -45,15 +31,12 @@ const filterData = ( const InstallationList = (props: InstallationListProps) => { const { fetchData, data, loading, error } = useContext(InstallationsContext); - const filteredData = filterData(props.searchQuery, data); - const routeMatch = useRouteMatch([ routes.installations + routes.list + routes.installation + ":id", routes.installations + routes.list + routes.liveView + ":id", routes.installations + routes.list + routes.log + ":id", ]); - const theme = useTheme(); useEffect(() => { @@ -108,13 +91,13 @@ const InstallationList = (props: InstallationListProps) => { borderStyle: "solid", backgroundColor: theme.palette.primary.dark, "&.Mui-selected": { - backgroundColor: colors.orangeSelected, + backgroundColor: theme.palette.secondary.main, }, ":hover": { - backgroundColor: colors.orangeHover, + backgroundColor: theme.palette.secondary.light, }, "&.Mui-selected:hover": { - backgroundColor: colors.orangeSelected, + backgroundColor: theme.palette.secondary.main, }, }} > diff --git a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx index 4f69755b8..2799f61e0 100644 --- a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx +++ b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx @@ -5,14 +5,13 @@ import routes from "../../routes.json"; import useRouteMatch from "../../hooks/useRouteMatch"; import { useIntl } from "react-intl"; import InnovenergyTab from "../Layout/InnovenergyTab"; -import InnovenergyTabBorder from "../Layout/InnovenergyTab"; import InnovenergyTabs from "components/Layout/InnovenergyTabs"; import { useTheme } from "@mui/material"; -import { red } from "@mui/material/colors"; import { colors } from "index"; const InstallationTabs = () => { const theme = useTheme(); + const intl = useIntl(); const routeMatch = useRouteMatch([ routes.installations + routes.list + routes.installation + ":id", routes.installations + routes.list + routes.liveView + ":id", @@ -20,7 +19,6 @@ const InstallationTabs = () => { ]); const id = routeMatch?.params?.id; - const intl = useIntl(); if (id) { return ( diff --git a/typescript/Frontend/src/components/Installations/Installations.tsx b/typescript/Frontend/src/components/Installations/Installations.tsx index 3106c2779..e77417de0 100644 --- a/typescript/Frontend/src/components/Installations/Installations.tsx +++ b/typescript/Frontend/src/components/Installations/Installations.tsx @@ -1,13 +1,13 @@ import { Grid, colors } from "@mui/material"; import { Routes, Route } from "react-router"; -import LiveView from "./LiveView"; +import LiveView from "./LiveView/LiveView"; import InstallationTabs from "./InstallationTabs"; import Log from "./Log/Log"; import routes from "../../routes.json"; import InstallationsContextProvider from "../Context/InstallationsContextProvider"; import SearchSidebar from "../Layout/Search"; import InstallationList from "./InstallationList"; -import Installation from "./Installation"; +import Installation from "./Detail/Installation"; import CheckboxTree from "./Log/CheckboxTree"; import LogContextProvider from "../Context/LogContextProvider"; import useRouteMatch from "../../hooks/useRouteMatch"; @@ -27,7 +27,6 @@ const Installations = () => { const id = routeMatch?.params?.id; useEffect(() => { - // TODO remove if getInstallation(id); }, [id]); diff --git a/typescript/Frontend/src/components/Installations/LiveView.tsx b/typescript/Frontend/src/components/Installations/LiveView/LiveView.tsx similarity index 80% rename from typescript/Frontend/src/components/Installations/LiveView.tsx rename to typescript/Frontend/src/components/Installations/LiveView/LiveView.tsx index 7091cb9e6..92fde3f08 100644 --- a/typescript/Frontend/src/components/Installations/LiveView.tsx +++ b/typescript/Frontend/src/components/Installations/LiveView/LiveView.tsx @@ -1,6 +1,6 @@ -import TopologyView from "./Log/TopologyView"; +import TopologyView from "./TopologyView"; import { Box, useTheme } from "@mui/material"; -import { colors } from "../../index"; +import { colors } from "../../../index"; const LiveView = () => { const theme = useTheme(); @@ -8,7 +8,7 @@ const LiveView = () => { { const [values, setValues] = useState(null); const { fetchData } = useContext(S3CredentialsContext); - const theme = useTheme(); useEffect(() => { const interval = setInterval(() => { diff --git a/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx b/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx index e0f833799..fe43470ca 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, useTheme } from "@mui/material"; +import { TreeView } from "@mui/lab"; +import { Checkbox } from "@mui/material"; import { useContext, ReactNode } from "react"; import { LogContext } from "../../Context/LogContextProvider"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; @@ -7,12 +7,7 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import useRouteMatch from "../../../hooks/useRouteMatch"; import routes from "../../../routes.json"; import React from "react"; -import { colors } from "index"; -import InnovEnergyTreeItem from "../../Layout/InnovEnergyTreeItem"; - -export interface ToggleElement { - [key: string]: boolean; -} +import InnovenergyTreeItem from "../../Layout/InnovenergyTreeItem"; export interface TreeElement { id: string; @@ -50,12 +45,13 @@ const CheckboxTree = () => { ) => { event.stopPropagation(); }; + const renderTree = (data: TreeElement[]): ReactNode => { return data.map((element) => { const checked = checkedToggles.find((toggle) => element.id === toggle); const splitName = element.name.split("/"); return ( - { } > {getNodes(element)} - + ); }); }; diff --git a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx b/typescript/Frontend/src/components/Installations/Log/DatePicker/DateRangePicker.tsx similarity index 93% rename from typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx rename to typescript/Frontend/src/components/Installations/Log/DatePicker/DateRangePicker.tsx index 3a25c78d5..61338af1c 100644 --- a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx +++ b/typescript/Frontend/src/components/Installations/Log/DatePicker/DateRangePicker.tsx @@ -3,11 +3,11 @@ import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import dayjs from "dayjs"; import { FormattedMessage } from "react-intl"; +import { createTimes } from "../../../../util/graph.util"; +import { TimeRange, UnixTime } from "../../../../dataCache/time"; +import { useTheme } from "@mui/material"; +import { colors } from "../../../../index"; import ShortcutButton from "./ShortcutButton"; -import { createTimes } from "../../../util/graph.util"; -import { TimeRange, UnixTime } from "../../../dataCache/time"; -import { TextField, useTheme } from "@mui/material"; -import { colors } from "../../.."; interface DateRangePickerProps { setRange: (value: Date[]) => void; @@ -16,8 +16,8 @@ interface DateRangePickerProps { } const DateRangePicker = (props: DateRangePickerProps) => { - const theme = useTheme(); const { setRange, range, getCacheSeries } = props; + const theme = useTheme(); const handleChange = (fromDate: Date, toDate: Date) => { const timeRange = createTimes( diff --git a/typescript/Frontend/src/components/Installations/Log/ShortcutButton.tsx b/typescript/Frontend/src/components/Installations/Log/DatePicker/ShortcutButton.tsx similarity index 74% rename from typescript/Frontend/src/components/Installations/Log/ShortcutButton.tsx rename to typescript/Frontend/src/components/Installations/Log/DatePicker/ShortcutButton.tsx index 31c5b3cff..b34147905 100644 --- a/typescript/Frontend/src/components/Installations/Log/ShortcutButton.tsx +++ b/typescript/Frontend/src/components/Installations/Log/DatePicker/ShortcutButton.tsx @@ -1,8 +1,6 @@ -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"; +import { UnixTime, TimeSpan } from "../../../../dataCache/time"; +import { createTimes } from "../../../../util/graph.util"; +import InnovenergyButton from "../../../Layout/InnovenergyButton"; interface ShortcutButtonProps { setRange: (value: Date[]) => void; diff --git a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx index 5287a2ef1..a0d024f39 100644 --- a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx +++ b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx @@ -1,25 +1,23 @@ import Plot from "react-plotly.js"; -import { DataRecord, RecordSeries } from "../../../dataCache/data"; +import { RecordSeries } from "../../../dataCache/data"; import { GraphData, createTimes, getTreeElements, isNumeric, - parseCsv, stringToColor, transformToBarGraphData, } from "../../../util/graph.util"; import { TimeRange, TimeSpan, UnixTime } from "../../../dataCache/time"; import { useCallback, useContext, useEffect, useMemo, useState } from "react"; import { BehaviorSubject, startWith, throttleTime, withLatestFrom } from "rxjs"; -import { S3Access } from "../../../dataCache/S3/S3Access"; import DataCache, { FetchResult } from "../../../dataCache/dataCache"; import { LogContext } from "../../Context/LogContextProvider"; import { isDefined } from "../../../dataCache/utils/maybe"; -import { Data, Icons, Layout, PlotRelayoutEvent, relayout } from "plotly.js"; +import { Data, Icons, Layout, PlotRelayoutEvent } from "plotly.js"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { FormattedMessage } from "react-intl"; -import DateRangePicker from "./DateRangePicker"; +import DateRangePicker from "./DatePicker/DateRangePicker"; import { LocalizationProvider } from "@mui/x-date-pickers"; import { Alert, useTheme } from "@mui/material"; import { S3CredentialsContext } from "../../Context/S3CredentialsContextProvider"; @@ -28,23 +26,26 @@ const NUMBER_OF_NODES = 100; const ScalarGraph = () => { const timeRange = createTimes( - UnixTime.now() - /* .fromTicks(1682085650) */ - .rangeBefore(TimeSpan.fromDays(1)), + UnixTime.now().rangeBefore(TimeSpan.fromDays(1)), NUMBER_OF_NODES ); + const [timeSeries, setTimeSeries] = useState([]); + const [plotTitles, setPlotTitles] = useState([]); const [range, setRange] = useState([ timeRange[0].toDate(), timeRange[timeRange.length - 1].toDate(), ]); - const [plotTitles, setPlotTitles] = useState([]); const { toggles, setToggles, checkedToggles } = useContext(LogContext); const { fetchData } = useContext(S3CredentialsContext); const times$ = useMemo(() => new BehaviorSubject(timeRange), []); + const cache = useMemo(() => { + return new DataCache(fetchData, TimeSpan.fromSeconds(2)); + }, []); + useEffect(() => { const subscription = cache.gotData .pipe( @@ -57,8 +58,6 @@ const ScalarGraph = () => { setTimeSeries(timeSeries); const toggleValues = timeSeries.find((timeStamp) => timeStamp.value); - console.log("toggles", timeSeries, toggleValues); - if (toggles === null && toggleValues && toggleValues.value) { const treeElements = getTreeElements(toggleValues.value); setToggles(treeElements); @@ -67,10 +66,6 @@ const ScalarGraph = () => { return () => subscription.unsubscribe(); }, [toggles]); - const cache = useMemo(() => { - return new DataCache(fetchData, TimeSpan.fromSeconds(2)); - }, []); - const transformToGraphData = (input: RecordSeries): GraphData => { const transformedObject: any = {}; @@ -95,6 +90,7 @@ const ScalarGraph = () => { setPlotTitles(Object.keys(transformedObject)); } }); + return Object.keys(transformedObject).length > 0 ? transformedObject : plotTitles.reduce( @@ -138,9 +134,7 @@ const ScalarGraph = () => { [getCacheSeries] ); - const theme = useTheme(); const renderGraphs = () => { - console.log("toggles", toggles); if (checkedToggles.length > 0) { const coordinateTimeSeries = transformToGraphData(timeSeries); const visibleGraphs = Object.keys(coordinateTimeSeries).filter((path) => { diff --git a/typescript/Frontend/src/components/Installations/Log/TopologyBox.scss b/typescript/Frontend/src/components/Installations/Log/TopologyBox.scss deleted file mode 100644 index ea381ae6c..000000000 --- a/typescript/Frontend/src/components/Installations/Log/TopologyBox.scss +++ /dev/null @@ -1,10 +0,0 @@ -.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/Layout/Detail.tsx b/typescript/Frontend/src/components/Layout/Detail.tsx deleted file mode 100644 index c71b1eaae..000000000 --- a/typescript/Frontend/src/components/Layout/Detail.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { Box, CircularProgress, Alert, useTheme } from "@mui/material"; -import { AxiosError } from "axios"; -import { useState, useEffect, FC } from "react"; -import { useParams } from "react-router-dom"; -import axiosConfig from "../../config/axiosConfig"; -export interface I_FormProps { - values: T; - id: string; - hasMoveButton?: boolean; -} -interface I_DetailProps { - formComponent: FC>; - route: string; - hasMoveButton?: boolean; -} -const Detail = (props: I_DetailProps) => { - const { id } = useParams(); - const { formComponent: FormComponent, route, hasMoveButton } = props; - const [values, setValues] = useState(); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(); - - useEffect(() => { - setLoading(true); - axiosConfig - .get(route + id) - .then((res) => { - setValues(res.data); - setLoading(false); - }) - .catch((err: AxiosError) => { - setError(err); - setLoading(false); - }); - }, [id, route]); - const theme = useTheme(); - - if (values && values.id && values.id.toString() === id) { - return ( - - ); - } else if (loading) { - return ( - - - - ); - } else if (error) { - return ( - - {error.message} - - ); - } - return null; -}; - -export default Detail; diff --git a/typescript/Frontend/src/components/Groups/AccessManagement/InnovenergyList.tsx b/typescript/Frontend/src/components/Layout/InnovenergyList.tsx similarity index 92% rename from typescript/Frontend/src/components/Groups/AccessManagement/InnovenergyList.tsx rename to typescript/Frontend/src/components/Layout/InnovenergyList.tsx index 7bdff47da..d0c67bb0a 100644 --- a/typescript/Frontend/src/components/Groups/AccessManagement/InnovenergyList.tsx +++ b/typescript/Frontend/src/components/Layout/InnovenergyList.tsx @@ -18,7 +18,6 @@ const InnovenergyList = (props: InnovenergyListProps) => { pb: 0, }} component="nav" - aria-labelledby="nested-list-subheader" > {props.children} diff --git a/typescript/Frontend/src/components/Layout/InnovenergyPropertyGrid.tsx b/typescript/Frontend/src/components/Layout/InnovenergyPropertyGrid.tsx new file mode 100644 index 000000000..a4b49e33b --- /dev/null +++ b/typescript/Frontend/src/components/Layout/InnovenergyPropertyGrid.tsx @@ -0,0 +1,68 @@ +import { InputLabel, TextField } from "@mui/material"; +import { colors } from "../../index"; +import { I_InnovenergyTextfieldProps } from "./InnovenergyTextfield"; + +interface InnovenergyPropertyGridProps { + rows: I_InnovenergyTextfieldProps[]; +} + +export const InnovenergyPropertyGrid = ( + props: InnovenergyPropertyGridProps +) => { + return ( +
+
+ {props.rows.map((prop) => ( + {prop.label} + ))} +
+
+ {props.rows.map((element) => { + return ( + + ); + })} +
+
+ ); +}; + +export default InnovenergyPropertyGrid; diff --git a/typescript/Frontend/src/components/InnovenergySnackbar.tsx b/typescript/Frontend/src/components/Layout/InnovenergySnackbar.tsx similarity index 100% rename from typescript/Frontend/src/components/InnovenergySnackbar.tsx rename to typescript/Frontend/src/components/Layout/InnovenergySnackbar.tsx diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx index 1d56e376b..17b70ce73 100644 --- a/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx +++ b/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx @@ -1,4 +1,4 @@ -import { SxProps, Tabs, Theme, useTheme } from "@mui/material"; +import { SxProps, Tabs, useTheme } from "@mui/material"; import { ReactNode } from "react"; import { colors } from "index"; @@ -25,7 +25,6 @@ const InnovenergyTabs = (props: AntTabsProps) => { "&.Mui-selected": { color: colors.black, backgroundColor: theme.palette.primary.light, - borderColor: `#90A7c5 #90A7c5 #fff`, }, "& .MuiTabs-indicator": { display: "flex", diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx index c342118e2..14abdfb7d 100644 --- a/typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx +++ b/typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx @@ -1,17 +1,4 @@ -import { - Grid, - InputLabel, - Paper, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - TextField, - useTheme, -} from "@mui/material"; -import { colors } from "../../index"; +import { Grid, InputLabel, TextField } from "@mui/material"; export interface I_InnovenergyTextfieldProps { id: string; @@ -26,67 +13,7 @@ export interface I_InnovenergyTextfieldProps { error?: boolean; } -export const IePropertyGrid = (props: { - rows: I_InnovenergyTextfieldProps[]; -}) => { - return ( -
-
- {props.rows.map((prop) => ( - {prop.label} - ))} -
-
- {props.rows.map((element) => { - return ( - - ); - })} -
-
- ); -}; - const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => { - const theme = useTheme(); return ( @@ -107,7 +34,6 @@ const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => { borderRadius: 1, }, my: 0.5, - borderColor: "red", }} value={props.value || ""} onChange={props.handleChange} diff --git a/typescript/Frontend/src/components/Layout/InnovEnergyTreeItem.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTreeItem.tsx similarity index 91% rename from typescript/Frontend/src/components/Layout/InnovEnergyTreeItem.tsx rename to typescript/Frontend/src/components/Layout/InnovenergyTreeItem.tsx index 28753d649..a66bd7b1b 100644 --- a/typescript/Frontend/src/components/Layout/InnovEnergyTreeItem.tsx +++ b/typescript/Frontend/src/components/Layout/InnovenergyTreeItem.tsx @@ -2,7 +2,7 @@ import { TreeItem, TreeItemProps } from "@mui/lab"; import { colors } from "../../index"; import { useTheme } from "@mui/material"; -const InnovEnergyTreeItem = (props: TreeItemProps) => { +const InnovenergyTreeItem = (props: TreeItemProps) => { const theme = useTheme(); return ( { ); }; -export default InnovEnergyTreeItem; +export default InnovenergyTreeItem; diff --git a/typescript/Frontend/src/components/Layout/LogoutButton.tsx b/typescript/Frontend/src/components/Layout/LogoutButton.tsx index 779fb8768..ff087a072 100644 --- a/typescript/Frontend/src/components/Layout/LogoutButton.tsx +++ b/typescript/Frontend/src/components/Layout/LogoutButton.tsx @@ -2,7 +2,7 @@ import { FormattedMessage } from "react-intl"; import { useNavigate } from "react-router-dom"; import axiosConfig from "../../config/axiosConfig"; import InnovenergyButton from "./InnovenergyButton"; -import { colors } from "index"; +import { useTheme } from "@mui/material"; interface LogoutButtonProps { removeToken: () => void; @@ -10,6 +10,7 @@ interface LogoutButtonProps { const LogoutButton = (props: LogoutButtonProps) => { const navigate = useNavigate(); + const theme = useTheme(); return ( { props.removeToken(); }); }} - sx={{ mx: 1, bgcolor: colors.orangeSelected, textTransform: "none" }} + sx={{ + mx: 1, + bgcolor: theme.palette.secondary.main, + textTransform: "none", + }} > diff --git a/typescript/Frontend/src/components/Layout/ModeButtons.tsx b/typescript/Frontend/src/components/Layout/ModeButtons.tsx index 322eae885..cc3032630 100644 --- a/typescript/Frontend/src/components/Layout/ModeButtons.tsx +++ b/typescript/Frontend/src/components/Layout/ModeButtons.tsx @@ -27,10 +27,14 @@ const ModeButtons = () => { > { { <> setOpen(true)} > @@ -37,7 +43,6 @@ const AddUser = () => { ".MuiDialogContent-root": { overflowX: "hidden" }, maxHeight: 500, }} - scroll="paper" fullWidth maxWidth="sm" > diff --git a/typescript/Frontend/src/components/Users/User.tsx b/typescript/Frontend/src/components/Users/User.tsx index c12f9cc8b..debb6787d 100644 --- a/typescript/Frontend/src/components/Users/User.tsx +++ b/typescript/Frontend/src/components/Users/User.tsx @@ -1,4 +1,10 @@ -import { Box, CircularProgress, Alert, collapseClasses, useTheme } from "@mui/material"; +import { + Box, + CircularProgress, + Alert, + collapseClasses, + useTheme, +} from "@mui/material"; import { AxiosError } from "axios"; import { useState, useEffect } from "react"; import { useParams } from "react-router-dom"; @@ -8,10 +14,11 @@ import UserForm from "./UserForm"; import { useIntl } from "react-intl"; import { colors } from "../.."; -interface I_DetailProps { +interface I_UserProps { hasMoveButton?: boolean; } -const Detail = (props: I_DetailProps) => { + +const User = (props: I_UserProps) => { const { id } = useParams(); const { locale } = useIntl(); const [values, setValues] = useState(); @@ -56,7 +63,7 @@ const Detail = (props: I_DetailProps) => { borderTopLeftRadius: 0, WebkitBorderTopRightRadius: 0, borderBottomLeftRadius: 4, - borderBottomRightRadius: 4, + borderBottomRightRadius: 4, borderColor: theme.palette.text.disabled, }} > @@ -68,7 +75,7 @@ const Detail = (props: I_DetailProps) => { - + ); } else if (error) { @@ -81,4 +88,4 @@ const Detail = (props: I_DetailProps) => { return null; }; -export default Detail; +export default User; diff --git a/typescript/Frontend/src/components/Users/UserForm.tsx b/typescript/Frontend/src/components/Users/UserForm.tsx index 59fffa162..4904e0054 100644 --- a/typescript/Frontend/src/components/Users/UserForm.tsx +++ b/typescript/Frontend/src/components/Users/UserForm.tsx @@ -11,17 +11,16 @@ import { useContext, useState } from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { I_User } from "../../util/user.util"; import InnovenergyButton from "../Layout/InnovenergyButton"; -import InnovenergyTextfield, { - I_InnovenergyTextfieldProps, - IePropertyGrid, -} from "../Layout/InnovenergyTextfield"; +import { I_InnovenergyTextfieldProps } from "../Layout/InnovenergyTextfield"; import { UserContext } from "../Context/UserContextProvider"; import { UsersContext } from "../Context/UsersContextProvider"; +import InnovenergyPropertyGrid from "../Layout/InnovenergyPropertyGrid"; interface I_UserFormProps { handleSubmit: (formikValues: Partial) => Promise; values?: I_User; } + const UserForm = (props: I_UserFormProps) => { const { values, handleSubmit } = props; const [open, setOpen] = useState(false); @@ -100,7 +99,7 @@ const UserForm = (props: I_UserFormProps) => { return ( - + {loading && ( @@ -125,7 +124,6 @@ const UserForm = (props: I_UserFormProps) => { severity={error ? "error" : "success"} sx={{ width: "100%" }} > - {/* TODO how to handle err translation? */} {error ? ( ) : ( diff --git a/typescript/Frontend/src/components/Users/UserList.tsx b/typescript/Frontend/src/components/Users/UserList.tsx index e562b7fdb..28dfdd48d 100644 --- a/typescript/Frontend/src/components/Users/UserList.tsx +++ b/typescript/Frontend/src/components/Users/UserList.tsx @@ -44,7 +44,6 @@ const UserList = (props: UserListProps) => { \ No newline at end of file diff --git a/typescript/Frontend/src/resources/innovenergy_Logo_onOrange-2.png(1).png b/typescript/Frontend/src/resources/innovenergy_Logo_onOrange-2.png(1).png deleted file mode 100644 index 57ee2dc8e..000000000 Binary files a/typescript/Frontend/src/resources/innovenergy_Logo_onOrange-2.png(1).png and /dev/null differ diff --git a/typescript/Frontend/src/resources/innovenergy_Logo_onOrange-2.png.png b/typescript/Frontend/src/resources/innovenergy_Logo_onOrange-2.png.png deleted file mode 100644 index 386f16e40..000000000 Binary files a/typescript/Frontend/src/resources/innovenergy_Logo_onOrange-2.png.png and /dev/null differ diff --git a/typescript/Frontend/src/resources/innovenergy_Logo_onOrange.png b/typescript/Frontend/src/resources/innovenergy_Logo_onOrange.png deleted file mode 100644 index 22e9c6412..000000000 Binary files a/typescript/Frontend/src/resources/innovenergy_Logo_onOrange.png and /dev/null differ diff --git a/typescript/Frontend/src/util/graph.util.tsx b/typescript/Frontend/src/util/graph.util.tsx index 9a5d0f246..7a42d4dd9 100644 --- a/typescript/Frontend/src/util/graph.util.tsx +++ b/typescript/Frontend/src/util/graph.util.tsx @@ -6,7 +6,7 @@ import { isDefined } from "../dataCache/utils/maybe"; import { BoxData, BoxDataValue, -} from "../components/Installations/Log/TopologyBox"; +} from "../components/Installations/LiveView/TopologyBox"; export interface GraphCoordinates { x: Datum[] | Datum[][] | TypedArray; @@ -146,6 +146,7 @@ export const extractTopologyValues = ( (topologyPath) => timeSeriesValue[topologyPath] ); switch (topologyKey as keyof TopologyValues) { + // special cases for certain connections should be extracted accordingly in this switch case "gridToAcInConnection": topologyValues = [ values.reduce( @@ -215,11 +216,6 @@ export const parseCsv = (text: string): DataRecord => { }); return y .map((fields) => { - if (fields[0].includes("LoadOnAcIsland")) { - console.log("fields", fields, { - [fields[0]]: { value: parseFloat(fields[1]), unit: fields[2] }, - }); - } if (isNaN(Number(fields[1])) || fields[1] === "") { return { [fields[0]]: { value: fields[1], unit: fields[2] } }; }