diff --git a/typescript/Frontend/public/index.html b/typescript/Frontend/public/index.html index 1ae397d60..1ff97c832 100644 --- a/typescript/Frontend/public/index.html +++ b/typescript/Frontend/public/index.html @@ -1,20 +1,20 @@ - - - - - + + + + + - + - + Innovenergy - - - -
- - + To begin the development, run `npm start` or `yarn start`. + To create a production bundle, use `npm run build` or `yarn build`. +--> + diff --git a/typescript/Frontend/src/App.tsx b/typescript/Frontend/src/App.tsx index 067d09af0..2272c6a3e 100644 --- a/typescript/Frontend/src/App.tsx +++ b/typescript/Frontend/src/App.tsx @@ -2,7 +2,7 @@ import useToken from "./hooks/useToken"; import Login from "./Login"; import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; -import { Container, Grid, colors } from "@mui/material"; +import { Container, Grid, colors, Box } from "@mui/material"; import routes from "./routes.json"; import { IntlProvider, MessageFormatElement } from "react-intl"; import { useContext, useState } from "react"; @@ -12,11 +12,11 @@ import fr from "./lang/fr.json"; import LanguageSelect from "./components/Layout/LanguageSelect"; import LogoutButton from "./components/Layout/LogoutButton"; import Users from "./components/Users/Users"; -import NavigationButtons from "./components/Layout/NavigationButtons"; +import NavigationTabs from "./components/Layout/NavigationTabs"; import InstallationPage from "./components/Installations/InstallationPage"; import { UserContext } from "./components/Context/UserContextProvider"; import ResetPassword from "./ResetPassword"; -import innovenergyLogo from "./resources/test.gif"; +import innovenergyLogo from "./resources/innoveng_logo_on_orange.png"; const App = () => { const { token, setToken, removeToken } = useToken(); @@ -48,9 +48,9 @@ const App = () => { locale={language} defaultLocale="EN" > - - - + + + innovenergy logo { - - - + + + + + - - - } - /> - } - /> - } /> - + + + + + } + /> + } + /> + } /> + + + ); diff --git a/typescript/Frontend/src/components/Context/S3CredentialsContextProvider.tsx b/typescript/Frontend/src/components/Context/S3CredentialsContextProvider.tsx index c3f32d8bd..e41be783d 100644 --- a/typescript/Frontend/src/components/Context/S3CredentialsContextProvider.tsx +++ b/typescript/Frontend/src/components/Context/S3CredentialsContextProvider.tsx @@ -1,29 +1,89 @@ import { createContext, ReactNode, useState } from "react"; import { I_User } from "../../util/user.util"; +import { I_Installation, S3Credentials } from "../../util/types"; +import { UnixTime } from "../../dataCache/time"; +import { FetchResult } from "../../dataCache/dataCache"; +import { DataRecord } from "../../dataCache/data"; +import { S3Access } from "../../dataCache/S3/S3Access"; +import { parseCsv } from "../../util/graph.util"; -interface InstallationContextProviderProps { - s3Credentials?: I_User; - setS3Credentials: (value: I_User) => void; +interface S3CredentialsContextProviderProps { + s3Credentials?: S3Credentials; + saveS3Credentials: (credentials: S3Credentials, id: string) => void; + fetchData: (timestamp: UnixTime) => Promise>; } -export const UserContext = createContext({ - s3Credentials: {} as I_User, - setS3Credentials: () => {}, -}); +export const S3CredentialsContext = + createContext({ + s3Credentials: {} as S3Credentials, + saveS3Credentials: () => {}, + fetchData: () => ({} as Promise>), + }); -const UserContextProvider = ({ children }: { children: ReactNode }) => { - const [s3Credentials, setS3Credentials] = useState(); +const S3CredentialsContextProvider = ({ + children, +}: { + children: ReactNode; +}) => { + const [s3Credentials, setS3Credentials] = useState(); + + console.log("creds", s3Credentials); + const saveS3Credentials = (credentials: S3Credentials, id: string) => { + //const s3Bucket = id + "-3e5b3069-214a-43ee-8d85-57d72000c19d"; + /* const s3Bucket = "saliomameiringen"; + + 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> => { + const s3Path = `${timestamp.ticks}.csv`; + if (s3Credentials && s3Credentials.s3Bucket) { + const s3Access = new S3Access( + s3Credentials.s3Bucket, + s3Credentials.s3Region, + s3Credentials.s3Provider, + s3Credentials.s3Key, + s3Credentials.s3Secret + ); + return s3Access + .get(s3Path) + .then(async (r) => { + if (r.status === 404) { + return Promise.resolve(FetchResult.notAvailable); + } else if (r.status === 200) { + const text = await r.text(); + return parseCsv(text); + } else { + console.error("unexpected status code"); + return Promise.resolve(FetchResult.notAvailable); + } + }) + .catch((e) => { + console.log("catch", e); + return Promise.resolve(FetchResult.tryLater); + }); + } + return Promise.resolve(FetchResult.tryLater); + }; return ( - {children} - + ); }; -export default UserContextProvider; +export default S3CredentialsContextProvider; diff --git a/typescript/Frontend/src/components/Groups/Groups.tsx b/typescript/Frontend/src/components/Groups/Groups.tsx index 9c56e56fd..337bdd205 100644 --- a/typescript/Frontend/src/components/Groups/Groups.tsx +++ b/typescript/Frontend/src/components/Groups/Groups.tsx @@ -7,8 +7,27 @@ import GroupContextProvider from "../Context/GroupContextProvider"; import GroupTree from "./Tree/GroupTree"; import AccessManagement from "./AccessManagement/AccessManagement"; import Installation from "../Installations/Installation"; +import useRouteMatch from "../../hooks/useRouteMatch"; +import useInstallation from "../../hooks/useInstallation"; +import { useEffect } from "react"; const Groups = () => { + const routeMatch = useRouteMatch([ + routes.installations + routes.tree + ":view/:id", + ]); + const { + data: currentInstallation, + loading, + error, + getInstallation, + } = useInstallation(); + + const id = routeMatch?.params?.id; + + useEffect(() => { + // TODO remove if + getInstallation(id); + }, [id]); return ( @@ -25,7 +44,14 @@ const Groups = () => { /> } + element={ + + } /> diff --git a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx index b839a2337..140cb219f 100644 --- a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx +++ b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx @@ -11,6 +11,7 @@ import { instanceOfFolder } from "../../../util/group.util"; import { Grid, CircularProgress, useTheme } from "@mui/material"; import { useIntl } from "react-intl"; import { colors } from "../../.."; +import { color } from "chart.js/helpers"; const GroupTree = () => { const { setCurrentType, fetchData, data, loading } = useContext(GroupContext); @@ -54,7 +55,14 @@ const GroupTree = () => { label={element.name} onClick={() => setCurrentType(element.type)} sx={{ - ".MuiTreeItem-content": { paddingY: "5px" }, + ".MuiTreeItem-content": { py: "10px" }, + ".Mui-selected": { + backgroundColor: theme.palette.secondary.main, + }, + ".Mui-selected:hover": { + backgroundColor: theme.palette.secondary.main, + }, + ".Mui-focused": { backgroundColor: theme.palette.secondary.main }, bgcolor: colors.greyDark, borderRadius: 2, }} @@ -68,7 +76,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 ae6a2973b..a54b3c96b 100644 --- a/typescript/Frontend/src/components/Installations/Installation.tsx +++ b/typescript/Frontend/src/components/Installations/Installation.tsx @@ -1,35 +1,24 @@ import { Alert, Box, CircularProgress, useTheme } from "@mui/material"; import { AxiosError } from "axios"; -import { useEffect, useState } from "react"; +import { useContext, useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import axiosConfig from "../../config/axiosConfig"; import { I_Installation } from "../../util/types"; import InstallationForm from "./InstallationForm"; import { colors } from "../.."; +import { S3CredentialsContext } from "../Context/S3CredentialsContextProvider"; interface I_InstallationProps { + loading?: boolean; + values?: I_Installation; + error?: AxiosError; hasMoveButton?: boolean; } -const Installation = (props: I_InstallationProps) => { - const { id } = useParams(); - const [values, setValues] = useState(); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(); - const theme = useTheme(); - useEffect(() => { - setLoading(true); - axiosConfig - .get("/GetInstallationById?id=" + id) - .then((res) => { - setValues(res.data); - setLoading(false); - }) - .catch((err: AxiosError) => { - setError(err); - setLoading(false); - }); - }, [id]); +const Installation = (props: I_InstallationProps) => { + const { hasMoveButton, values, loading, error } = props; + const { id } = useParams(); + const theme = useTheme(); if (values && values.id && values.id.toString() === id) { return ( @@ -51,7 +40,7 @@ const Installation = (props: I_InstallationProps) => { ); @@ -60,7 +49,7 @@ const Installation = (props: I_InstallationProps) => { - + ); } else if (error) { diff --git a/typescript/Frontend/src/components/Installations/InstallationList.tsx b/typescript/Frontend/src/components/Installations/InstallationList.tsx index 810ea29db..648f2ab62 100644 --- a/typescript/Frontend/src/components/Installations/InstallationList.tsx +++ b/typescript/Frontend/src/components/Installations/InstallationList.tsx @@ -70,13 +70,12 @@ const InstallationList = (props: InstallationListProps) => { { to={ getPathWithoutId(routeMatch?.pattern?.path) + installation.id } - style={{ textDecoration: "none", color: colors.blueBlack }} + style={{ textDecoration: "none", color: colors.black }} > { return ( <> - + } /> - } /> + + + + } + /> ); diff --git a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx index 1ebc80a36..4f69755b8 100644 --- a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx +++ b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx @@ -25,75 +25,71 @@ const InstallationTabs = () => { if (id) { return ( - - - + + - - - - + + + ); } diff --git a/typescript/Frontend/src/components/Installations/Installations.tsx b/typescript/Frontend/src/components/Installations/Installations.tsx index cc53ca86c..6e3b822ad 100644 --- a/typescript/Frontend/src/components/Installations/Installations.tsx +++ b/typescript/Frontend/src/components/Installations/Installations.tsx @@ -13,20 +13,47 @@ import LogContextProvider from "../Context/LogContextProvider"; import useRouteMatch from "../../hooks/useRouteMatch"; import { Background } from "reactflow"; import { red } from "@mui/material/colors"; +import S3CredentialsContextProvider, { + S3CredentialsContext, +} from "../Context/S3CredentialsContextProvider"; +import { UnixTime } from "../../dataCache/time"; +import { FetchResult } from "../../dataCache/dataCache"; +import { DataRecord } from "../../dataCache/data"; +import { S3Access } from "../../dataCache/S3/S3Access"; +import { parseCsv } from "../../util/graph.util"; +import { useParams } from "react-router-dom"; +import { useContext, useEffect, useState } from "react"; +import axiosConfig from "../../config/axiosConfig"; +import { I_Installation } from "../../util/types"; +import { AxiosError } from "axios/index"; +import useInstallation from "../../hooks/useInstallation"; const Installations = () => { const routeMatch = useRouteMatch([ - routes.installations + routes.list + routes.log + ":id", + routes.installations + routes.list + ":view/:id", ]); + const { + data: currentInstallation, + loading, + error, + getInstallation, + } = useInstallation(); + const id = routeMatch?.params?.id; + + useEffect(() => { + // TODO remove if + getInstallation(id); + }, [id]); + return ( - + @@ -35,7 +62,13 @@ const Installations = () => { } + element={ + + } index /> } /> diff --git a/typescript/Frontend/src/components/Installations/LiveView.tsx b/typescript/Frontend/src/components/Installations/LiveView.tsx index 7d01b20e7..c1702d29d 100644 --- a/typescript/Frontend/src/components/Installations/LiveView.tsx +++ b/typescript/Frontend/src/components/Installations/LiveView.tsx @@ -1,7 +1,28 @@ import TopologyView from "./Log/TopologyView"; +import { Box, useTheme } from "@mui/material"; +import { colors } from "../../index"; const LiveView = () => { - return ; + const theme = useTheme(); + return ( + + + + ); }; export default LiveView; diff --git a/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx b/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx index 2caba1254..a06a7488b 100644 --- a/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx +++ b/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx @@ -49,7 +49,6 @@ const CheckboxTree = () => { ) => { event.stopPropagation(); }; - const theme = useTheme(); const renderTree = (data: TreeElement[]): ReactNode => { return data.map((element) => { const checked = checkedToggles.find((toggle) => element.id === toggle); @@ -66,19 +65,20 @@ const CheckboxTree = () => { handleClick(e, element, checked)} - style={{ - color: theme.palette.text.primary, - }} sx={{ paddingY: 0, }} + color="secondary" /> )} {splitName[splitName.length - 1]} } sx={{ - ".MuiTreeItem-content": { paddingY: "5px" }, + "& .MuiTreeItem-content": { + paddingY: "5px", + minHeight: "52px", + }, bgcolor: colors.greyDark, }} > diff --git a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx b/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx index 7cebdd71e..3a25c78d5 100644 --- a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx +++ b/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx @@ -14,6 +14,7 @@ interface DateRangePickerProps { range: Date[]; getCacheSeries: (xaxisRange0: Date, xaxisRange1: Date) => void; } + const DateRangePicker = (props: DateRangePickerProps) => { const theme = useTheme(); const { setRange, range, getCacheSeries } = props; @@ -42,10 +43,6 @@ const DateRangePicker = (props: DateRangePickerProps) => { label="From date" value={dayjs(range[0])} sx={{ - ".MuiInputLabel-root": { - color: colors.blueBlack, - }, - ".Mui-disabled": { color: "red", }, @@ -69,13 +66,12 @@ const DateRangePicker = (props: DateRangePickerProps) => { ".MuiInputLabel-root": { color: colors.blueBlack, }, - ".Mui-disabled": { color: "red", }, ".Mui-focused fieldset.MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.secondary.main, }, - + borderColor: theme.palette.secondary.main, + }, }} onChange={(newValue) => { if (newValue) { diff --git a/typescript/Frontend/src/components/Installations/Log/Log.tsx b/typescript/Frontend/src/components/Installations/Log/Log.tsx index d1156f14e..2cc0cdb1a 100644 --- a/typescript/Frontend/src/components/Installations/Log/Log.tsx +++ b/typescript/Frontend/src/components/Installations/Log/Log.tsx @@ -1,11 +1,28 @@ import React from "react"; import ScalarGraph from "./ScalarGraph"; +import { colors } from "../../../index"; +import { Box, useTheme } from "@mui/material"; const Log = () => { + const theme = useTheme(); return ( - <> + - + ); }; diff --git a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx index e507209aa..81ff0af62 100644 --- a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx +++ b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx @@ -22,40 +22,10 @@ import { FormattedMessage } from "react-intl"; import DateRangePicker from "./DateRangePicker"; import { LocalizationProvider } from "@mui/x-date-pickers"; import { Alert, useTheme } from "@mui/material"; +import { S3CredentialsContext } from "../../Context/S3CredentialsContextProvider"; const NUMBER_OF_NODES = 100; -const s3Access = new S3Access( - "saliomameiringen", - "sos-ch-dk-2", - "exo.io", - "EXO464a9ff62fdfa407aa742855", // key - "f2KtCWN4EHFqtvH2kotdyI0w5SjjdHVPAADdcD3ik8g" // secret -); - -export const fetchData = ( - timestamp: UnixTime -): Promise> => { - const s3Path = `${timestamp.ticks}.csv`; - return s3Access - .get(s3Path) - .then(async (r) => { - if (r.status === 404) { - return Promise.resolve(FetchResult.notAvailable); - } else if (r.status === 200) { - const text = await r.text(); - console.log("parsecsv", text, parseCsv(text)); - return parseCsv(text); - } else { - console.error("unexpected status code"); - return Promise.resolve(FetchResult.notAvailable); - } - }) - .catch((e) => { - return Promise.resolve(FetchResult.tryLater); - }); -}; - const ScalarGraph = () => { const timeRange = createTimes( UnixTime.now() /* .fromTicks(1682085650) */ @@ -70,6 +40,7 @@ const ScalarGraph = () => { const [plotTitles, setPlotTitles] = useState([]); const { toggles, setToggles, checkedToggles } = useContext(LogContext); + const { fetchData } = useContext(S3CredentialsContext); const times$ = useMemo(() => new BehaviorSubject(timeRange), []); @@ -93,10 +64,9 @@ const ScalarGraph = () => { return () => subscription.unsubscribe(); }, [toggles]); - const cache = useMemo( - () => new DataCache(fetchData, TimeSpan.fromSeconds(2)), - [] - ); + const cache = useMemo(() => { + return new DataCache(fetchData, TimeSpan.fromSeconds(2)); + }, []); const transformToGraphData = (input: RecordSeries): GraphData => { const transformedObject: any = {}; diff --git a/typescript/Frontend/src/components/Installations/Log/TopologyBox.tsx b/typescript/Frontend/src/components/Installations/Log/TopologyBox.tsx index 9f6a87ac2..1a6d8c5f8 100644 --- a/typescript/Frontend/src/components/Installations/Log/TopologyBox.tsx +++ b/typescript/Frontend/src/components/Installations/Log/TopologyBox.tsx @@ -20,7 +20,7 @@ const isInt = (value: number) => { return value % 1 === 0; }; -export const BOX_SIZE = 85; +export const BOX_SIZE = 75; const TopologyBox = (props: TopologyBoxProps) => { const { titleColor, boxColor } = getBoxColor(props.title); return ( diff --git a/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx b/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx index de1aed4be..fb5bec340 100644 --- a/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx +++ b/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx @@ -7,13 +7,14 @@ import { getAmount, getHighestConnectionValue, } from "../../../util/graph.util"; -import { fetchData } from "./ScalarGraph"; -import { useEffect, useState } from "react"; +import { useContext, useEffect, useState } from "react"; import { FetchResult } from "../../../dataCache/dataCache"; import { FormattedMessage } from "react-intl"; +import { S3CredentialsContext } from "../../Context/S3CredentialsContextProvider"; const TopologyView = () => { const [values, setValues] = useState(null); + const { fetchData } = useContext(S3CredentialsContext); useEffect(() => { const interval = setInterval(() => { @@ -229,6 +230,7 @@ const TopologyView = () => { /> ); + return
TopologyView
; }; export default TopologyView; diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx index 500058971..49336713e 100644 --- a/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx +++ b/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx @@ -17,13 +17,13 @@ const InnovenergyTab = (props: any) => { marginRight: theme.spacing(1), background: "0 0", border: "2px solid transparent", - bgcolor: theme.palette.primary.light, borderTopLeftRadius: "0.3rem", borderTopRightRadius: "0.3rem", padding: ".5rem 1rem", textDecoration: "none", transition: `color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out`, "&.Mui-selected": { + backgroundColor: "#eaecf1", color: colors.black, borderColor: theme.palette.text.disabled, marginTop: "1px", diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx index 714afad3d..bef153708 100644 --- a/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx +++ b/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx @@ -5,7 +5,7 @@ import { colors } from "index"; interface AntTabsProps { id: string; value?: string; - sx?: SxProps; + sx?: any; children: ReactNode; } @@ -24,7 +24,7 @@ const InnovenergyTabs = (props: AntTabsProps) => { }, "&.Mui-selected": { color: colors.black, - backgroundColor: " #90A7c5", + backgroundColor: "#eaecf1", borderColor: `#90A7c5 #90A7c5 #fff`, }, "& .MuiTabs-indicator": { @@ -34,6 +34,7 @@ const InnovenergyTabs = (props: AntTabsProps) => { }, "&.MuiTabs-root": { width: "100%", + ...(props.sx ? props.sx["&.MuiTabs-root"] : {}), }, }} > diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx index 7e2cd6f1f..c342118e2 100644 --- a/typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx +++ b/typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx @@ -11,6 +11,7 @@ import { TextField, useTheme, } from "@mui/material"; +import { colors } from "../../index"; export interface I_InnovenergyTextfieldProps { id: string; @@ -28,18 +29,6 @@ export interface I_InnovenergyTextfieldProps { export const IePropertyGrid = (props: { rows: I_InnovenergyTextfieldProps[]; }) => { - const theme = useTheme(); - - const findLongestLength = () => { - return ( - 11 * - props.rows.reduce( - (acc, curr) => (acc > curr.label.length ? acc : curr.label.length), - 0 - ) - ); - }; - return (
{props.rows.map((prop) => ( - {prop.label} + {prop.label} ))}
{props.rows.map((element) => { return ( { +const NavigationTabs = () => { const theme = useTheme(); const routeMatch = useRouteMatch([ routes.installations + "*", routes.users + "*", ]); - const intl = useIntl(); return ( <> @@ -25,7 +29,7 @@ const NavigationButtons = () => { sx={{ bgcolor: theme.palette.primary.main, "&.Mui-selected": { - backgroundColor: theme.palette.primary.main, + backgroundColor: "#eaecf1", borderColor: theme.palette.text.disabled, borderBottom: 0, mb: -1 / 8, @@ -46,7 +50,7 @@ const NavigationButtons = () => { sx={{ bgcolor: theme.palette.primary.main, "&.Mui-selected": { - backgroundColor: theme.palette.primary.main, + backgroundColor: "#eaecf1", borderColor: theme.palette.text.disabled, borderBottom: 0, mb: -1 / 8, @@ -63,4 +67,4 @@ const NavigationButtons = () => { ); }; -export default NavigationButtons; +export default NavigationTabs; diff --git a/typescript/Frontend/src/components/Layout/Search.tsx b/typescript/Frontend/src/components/Layout/Search.tsx index 8b510b540..851d0042f 100644 --- a/typescript/Frontend/src/components/Layout/Search.tsx +++ b/typescript/Frontend/src/components/Layout/Search.tsx @@ -10,7 +10,6 @@ import { colors } from "index"; import { FC, useState } from "react"; import { useIntl } from "react-intl"; - interface SearchSidebarProps { listComponent: FC<{ searchQuery: string }>; id: string; @@ -22,7 +21,6 @@ const SearchInputTextfield = styled((props: TextFieldProps) => ( InputProps={{ disableUnderline: true } as Partial} {...props} /> - ))(({ theme }) => ({ "& .MuiFilledInput-root": { overflow: "hidden", @@ -41,11 +39,9 @@ const SearchInputTextfield = styled((props: TextFieldProps) => ( backgroundColor: theme.palette.primary.dark, }, "&.Mui-focused": { - backgroundColor: theme.palette.primary.dark, borderColor: theme.palette.secondary.main, }, - }, })); @@ -55,28 +51,17 @@ const SearchSidebar = (props: SearchSidebarProps) => { const intl = useIntl(); const theme = useTheme(); - - return (
- {/* setSearchQuery(e.target.value)} - /> */} setSearchQuery(e.target.value)} diff --git a/typescript/Frontend/src/config/axiosConfig.tsx b/typescript/Frontend/src/config/axiosConfig.tsx index 21a907f32..75b3924a1 100644 --- a/typescript/Frontend/src/config/axiosConfig.tsx +++ b/typescript/Frontend/src/config/axiosConfig.tsx @@ -1,11 +1,11 @@ import axios from "axios"; export const axiosConfigWithoutToken = axios.create({ - baseURL: "https://monitor.innov.energy:5000/api", + baseURL: "https://localhost:7087/api", }); const axiosConfig = axios.create({ - baseURL: "https://monitor.innov.energy:5000/api", + baseURL: "https://localhost:7087/api", }); axiosConfig.defaults.params = {}; axiosConfig.interceptors.request.use( diff --git a/typescript/Frontend/src/dataCache/dataCache.ts b/typescript/Frontend/src/dataCache/dataCache.ts index 33ba43dab..7a35dd8bb 100644 --- a/typescript/Frontend/src/dataCache/dataCache.ts +++ b/typescript/Frontend/src/dataCache/dataCache.ts @@ -138,10 +138,13 @@ export default class DataCache> { const onSuccess = (data: FetchResult) => { if (data === FetchResult.tryLater) { console.warn(FetchResult.tryLater); - return; } - const value = data === FetchResult.notAvailable ? undefined : data; + const value = + data === FetchResult.notAvailable || data === FetchResult.tryLater + ? undefined + : data; + // @ts-ignore this.cache.insert(value, t); }; diff --git a/typescript/Frontend/src/hooks/useInstallation.tsx b/typescript/Frontend/src/hooks/useInstallation.tsx new file mode 100644 index 000000000..369c611c3 --- /dev/null +++ b/typescript/Frontend/src/hooks/useInstallation.tsx @@ -0,0 +1,43 @@ +import { useContext, useState } from "react"; +import axiosConfig from "../config/axiosConfig"; +import { I_Installation } from "../util/types"; +import { AxiosError } from "axios"; +import { S3CredentialsContext } from "../components/Context/S3CredentialsContextProvider"; + +const useInstallation = () => { + const [data, setData] = useState(); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(); + + const { saveS3Credentials } = useContext(S3CredentialsContext); + + const getInstallation = (id?: string) => { + if (id) { + setLoading(true); + axiosConfig + .get("/GetInstallationById?id=" + id) + .then(({ data }: { data: I_Installation }) => { + const { s3Region, s3Provider, s3Secret, s3Key } = data; + setData(data); + setLoading(false); + // TODO remove if + if (id) { + saveS3Credentials({ s3Region, s3Provider, s3Secret, s3Key }, id); + } + }) + .catch((err: AxiosError) => { + setError(err); + setLoading(false); + }); + } + }; + + return { + data, + loading, + error, + getInstallation, + }; +}; + +export default useInstallation; diff --git a/typescript/Frontend/src/index.tsx b/typescript/Frontend/src/index.tsx index 9f610827c..e4bff8ba6 100644 --- a/typescript/Frontend/src/index.tsx +++ b/typescript/Frontend/src/index.tsx @@ -3,67 +3,66 @@ import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; -import {createTheme, ThemeProvider} from "@mui/material"; +import { createTheme, ThemeProvider } from "@mui/material"; import UserContextProvider from "./components/Context/UserContextProvider"; const root = ReactDOM.createRoot( - document.getElementById("root") as HTMLElement + document.getElementById("root") as HTMLElement ); export const colors = { - black: "#000000", - blueBlack: "#2b3e54", - borderColor: "#a8b0be", + black: "#000000", + blueBlack: "#2b3e54", + borderColor: "#a8b0be", - background: "#f3f4f7", - //change this color in index.css too + background: "#f3f4f7", + //change this color in index.css too - greyDark: "#d1d7de", - greyLight: "#e1e4e7", + greyDark: "#d1d7de", + greyLight: "#e1e4e7", - orangeSelected: "#ffd280", - orangeHover: "#ffe4b3", + orangeSelected: "#f7b34d", + orangeHover: "#fad399", - orangeDark: "#ffc04d", + orangeDark: "#ffc04d", }; const theme = createTheme({ - components: { - MuiButtonBase: { - defaultProps: { - disableRipple: true, - }, - }, + components: { + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, }, - palette: { - text: { - primary: colors.blueBlack, - secondary: "#000000", - disabled: colors.borderColor, - }, - primary: { - main: colors.background, - light: colors.greyLight, - dark: colors.greyDark, - }, - secondary: { - main: colors.orangeSelected, - light: colors.orangeHover, - dark: colors.orangeDark, - }, + }, + palette: { + text: { + primary: colors.black, + disabled: colors.borderColor, }, - typography: { - fontFamily: `"Ubuntu", sans-serif`, - fontWeightRegular: 300, + primary: { + main: colors.background, + light: colors.greyLight, + dark: colors.greyDark, }, + secondary: { + main: colors.orangeSelected, + light: colors.orangeHover, + dark: colors.orangeDark, + }, + }, + typography: { + fontFamily: `"Ubuntu", sans-serif`, + fontWeightRegular: 300, + }, }); root.render( - - - - - + + + + + ); // If you want to start measuring performance in your app, pass a function diff --git a/typescript/Frontend/src/resources/test.gif b/typescript/Frontend/src/resources/test.gif deleted file mode 100644 index 3b135931e..000000000 Binary files a/typescript/Frontend/src/resources/test.gif and /dev/null differ diff --git a/typescript/Frontend/src/util/types.tsx b/typescript/Frontend/src/util/types.tsx index 5b6bfcc25..81ff48c34 100644 --- a/typescript/Frontend/src/util/types.tsx +++ b/typescript/Frontend/src/util/types.tsx @@ -1,5 +1,13 @@ // TODO add if required or not -export interface I_Installation { +export interface S3Credentials { + s3Region: string; + s3Provider: string; + s3Key: string; + s3Secret: string; + s3Bucket?: string; +} + +export interface I_Installation extends S3Credentials { type: string; title?: string; status?: number; @@ -15,12 +23,6 @@ export interface I_Installation { name: string; information: string; parentId: number; - - s3Bucket: string; - s3Region: string; - s3Provider: string; - s3Key: string; - s3Secret: string; } export interface I_Folder {