Innovenergy
/
Innovenergy_trunk
2
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Change folder structure

This commit is contained in:
Sina Blattmann 2023-03-06 09:32:43 +01:00
parent 8dd591d752
commit 8112e1ed8b
24 changed files with 531 additions and 601 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
typescript/Frontend/lang/en.json
View File

@ -1,50 +0,0 @@
{
"alarms": {
"defaultMessage": "Alarms"
},
"allInstallations": {
"defaultMessage": "All installations"
},
"applyChanges": {
"defaultMessage": "Apply changes"
},
"country": {
"defaultMessage": "Country"
},
"customerName": {
"defaultMessage": "Customer name"
},
"english": {
"defaultMessage": "English"
},
"german": {
"defaultMessage": "German"
},
"installation": {
"defaultMessage": "Installation"
},
"location": {
"defaultMessage": "Location"
},
"log": {
"defaultMessage": "Log"
},
"logout": {
"defaultMessage": "Logout"
},
"orderNumbers": {
"defaultMessage": "Order number"
},
"region": {
"defaultMessage": "Region"
},
"search": {
"defaultMessage": "Search"
},
"updatedSuccessfully": {
"defaultMessage": "Updated successfully"
},
"users": {
"defaultMessage": "Users"
}
}

9
typescript/Frontend/src/App.tsx
View File

@ -7,11 +7,10 @@ import { IntlProvider } from "react-intl";
import { useState } from "react"; import { useState } from "react";
import en from "./lang/en.json"; import en from "./lang/en.json";
import de from "./lang/de.json"; import de from "./lang/de.json";
import LanguageSelect from "./components/LanguageSelect"; import Installations from "./components/Installations/Installations";
import LogoutButton from "./components/LogoutButton"; import LanguageSelect from "./components/Layout/LanguageSelect";
import Installations from "./routes/Installations"; import LogoutButton from "./components/Layout/LogoutButton";
import Groups from "./components/Groups/Groups";
import Groups from "./routes/Groups";
const App = () => { const App = () => {
const { token, setToken, removeToken } = useToken(); const { token, setToken, removeToken } = useToken();

2
typescript/Frontend/src/Login.tsx
View File

@ -1,8 +1,8 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Alert, Button, CircularProgress, Grid } from "@mui/material"; import { Alert, Button, CircularProgress, Grid } from "@mui/material";
import Container from "@mui/material/Container"; import Container from "@mui/material/Container";
import InnovenergyTextfield from "./components/InnovenergyTextfield";
import { axiosConfigWithoutToken } from "./config/axiosConfig"; import { axiosConfigWithoutToken } from "./config/axiosConfig";
import InnovenergyTextfield from "./components/Layout/InnovenergyTextfield";
const loginUser = async (username: string, password: string) => { const loginUser = async (username: string, password: string) => {
return axiosConfigWithoutToken.post("/Login", { return axiosConfigWithoutToken.post("/Login", {

5
typescript/Frontend/src/api.tsx
View File

@ -1,5 +0,0 @@
import axios from 'axios';
export const API = axios.create({
baseURL: `https://localhost:7291/`
});

4
typescript/Frontend/src/routes/Group.tsx → typescript/Frontend/src/components/Groups/Group.tsx
View File

@ -2,8 +2,8 @@ import { Box, CircularProgress, Alert } from "@mui/material";
import { AxiosError } from "axios"; import { AxiosError } from "axios";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import axiosConfig from "../config/axiosConfig"; import axiosConfig from "../../config/axiosConfig";
import { I_Installation } from "../util/types"; import { I_Installation } from "../../util/types";
const Group = () => { const Group = () => {
const { id } = useParams(); const { id } = useParams();

4
typescript/Frontend/src/components/GroupTabs.tsx → typescript/Frontend/src/components/Groups/GroupTabs.tsx
View File

@ -3,8 +3,8 @@ import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab"; import Tab from "@mui/material/Tab";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import routes from "../routes.json"; import routes from "../../routes.json";
import useRouteMatch from "../hooks/useRouteMatch"; import useRouteMatch from "../../hooks/useRouteMatch";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
const GroupTabs = () => { const GroupTabs = () => {

5
typescript/Frontend/src/components/GroupTree.tsx → typescript/Frontend/src/components/Groups/GroupTree.tsx
View File

@ -3,9 +3,10 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import { ReactNode, useEffect, useState } from "react"; import { ReactNode, useEffect, useState } from "react";
import { TreeItem } from "@mui/lab"; import { TreeItem } from "@mui/lab";
import { I_Folder, I_Installation } from "../util/types";
import axiosConfig from "../config/axiosConfig";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import axiosConfig from "../../config/axiosConfig";
import { I_Folder, I_Installation } from "../../util/types";
const GroupTree = () => { const GroupTree = () => {
const [data, setData] = useState<(I_Folder | I_Installation)[]>(); const [data, setData] = useState<(I_Folder | I_Installation)[]>();

10
typescript/Frontend/src/routes/Groups.tsx → typescript/Frontend/src/components/Groups/Groups.tsx
View File

@ -1,11 +1,11 @@
import { Grid } from "@mui/material"; import { Grid } from "@mui/material";
import { Container } from "@mui/system"; import { Container } from "@mui/system";
import { Routes, Route } from "react-router"; import { Routes, Route } from "react-router";
import GroupTabs from "../components/GroupTabs"; import routes from "../../routes.json";
import NavigationButtons from "../components/NavigationButtons"; import NavigationButtons from "../Layout/NavigationButtons";
import UserTree from "../components/GroupTree";
import routes from "../routes.json";
import Group from "./Group"; import Group from "./Group";
import GroupTabs from "./GroupTabs";
import GroupTree from "./GroupTree";
const Groups = () => { const Groups = () => {
return ( return (
@ -13,7 +13,7 @@ const Groups = () => {
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={3}> <Grid item xs={3}>
<NavigationButtons /> <NavigationButtons />
<UserTree /> <GroupTree />
</Grid> </Grid>
<Grid item xs={9}> <Grid item xs={9}>
<GroupTabs /> <GroupTabs />

10
typescript/Frontend/src/routes/Alarms.tsx → typescript/Frontend/src/components/Installations/Alarms.tsx
View File

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

240
typescript/Frontend/src/components/CustomerForm.tsx → typescript/Frontend/src/components/Installations/CustomerForm.tsx
View File

@ -1,120 +1,120 @@
import { Alert, Button, Grid, Snackbar } from "@mui/material"; import { Alert, Button, Grid, Snackbar } from "@mui/material";
import { useFormik } from "formik"; import { useFormik } from "formik";
import { useState } from "react"; import { useState } from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import axiosConfig from "../config/axiosConfig"; import axiosConfig from "../../config/axiosConfig";
import { I_Installation } from "../util/types"; import { I_Installation } from "../../util/types";
import InnovenergyTextfield from "./InnovenergyTextfield"; import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
interface I_CustomerFormProps { interface I_CustomerFormProps {
values: I_Installation; values: I_Installation;
id: string | undefined; id: string | undefined;
} }
const CustomerForm = (props: I_CustomerFormProps) => { const CustomerForm = (props: I_CustomerFormProps) => {
const { values, id } = props; const { values, id } = props;
const intl = useIntl(); const intl = useIntl();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const formik = useFormik({ const formik = useFormik({
initialValues: { initialValues: {
name: values.name, name: values.name,
region: values.region, region: values.region,
location: values.location, location: values.location,
country: values.country, country: values.country,
orderNumbers: values.orderNumbers, orderNumbers: values.orderNumbers,
}, },
onSubmit: (formikValues) => { onSubmit: (formikValues) => {
axiosConfig axiosConfig
.put("https://localhost:7087/api/UpdateInstallation", { .put("/UpdateInstallation", {
...formikValues, ...formikValues,
id, id,
}) })
.then((res) => { .then((res) => {
setOpen(true); setOpen(true);
}); });
}, },
}); });
const handleClose = () => { const handleClose = () => {
setOpen(false); setOpen(false);
}; };
return ( return (
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
<InnovenergyTextfield <InnovenergyTextfield
id="name-textfield" id="name-textfield"
label={intl.formatMessage({ label={intl.formatMessage({
id: "customerName", id: "customerName",
defaultMessage: "Customer name", defaultMessage: "Customer name",
})} })}
name="name" name="name"
value={formik.values.name} value={formik.values.name}
handleChange={formik.handleChange} handleChange={formik.handleChange}
/> />
<InnovenergyTextfield <InnovenergyTextfield
id="region-textfield" id="region-textfield"
label={intl.formatMessage({ label={intl.formatMessage({
id: "region", id: "region",
defaultMessage: "Region", defaultMessage: "Region",
})} })}
name="region" name="region"
value={formik.values.region} value={formik.values.region}
handleChange={formik.handleChange} handleChange={formik.handleChange}
/> />
<InnovenergyTextfield <InnovenergyTextfield
id="location-textfield" id="location-textfield"
label={intl.formatMessage({ label={intl.formatMessage({
id: "location", id: "location",
defaultMessage: "Location", defaultMessage: "Location",
})} })}
name="location" name="location"
value={formik.values.location} value={formik.values.location}
handleChange={formik.handleChange} handleChange={formik.handleChange}
/> />
<InnovenergyTextfield <InnovenergyTextfield
id="country-textfield" id="country-textfield"
label={intl.formatMessage({ label={intl.formatMessage({
id: "country", id: "country",
defaultMessage: "Country", defaultMessage: "Country",
})} })}
name="country" name="country"
value={formik.values.country} value={formik.values.country}
handleChange={formik.handleChange} handleChange={formik.handleChange}
/> />
<InnovenergyTextfield <InnovenergyTextfield
id="orderNumbers-textfield" id="orderNumbers-textfield"
label={intl.formatMessage({ label={intl.formatMessage({
id: "orderNumbers", id: "orderNumbers",
defaultMessage: "Order number", defaultMessage: "Order number",
})} })}
name="orderNumbers" name="orderNumbers"
value={formik.values.orderNumbers} value={formik.values.orderNumbers}
handleChange={formik.handleChange} handleChange={formik.handleChange}
/> />
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}> <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
<Button variant="outlined" type="submit"> <Button variant="outlined" type="submit">
<FormattedMessage id="applyChanges" defaultMessage="Apply changes" /> <FormattedMessage id="applyChanges" defaultMessage="Apply changes" />
</Button> </Button>
</Grid> </Grid>
<Snackbar <Snackbar
open={open} open={open}
anchorOrigin={{ anchorOrigin={{
vertical: "top", vertical: "top",
horizontal: "center", horizontal: "center",
}} }}
autoHideDuration={6000} autoHideDuration={6000}
onClose={handleClose} onClose={handleClose}
> >
<Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}> <Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
<FormattedMessage <FormattedMessage
id="updatedSuccessfully" id="updatedSuccessfully"
defaultMessage="Updated successfully" defaultMessage="Updated successfully"
/> />
</Alert> </Alert>
</Snackbar> </Snackbar>
</form> </form>
); );
}; };
export default CustomerForm; export default CustomerForm;

106
typescript/Frontend/src/routes/Installation.tsx → typescript/Frontend/src/components/Installations/Installation.tsx
View File

@ -1,53 +1,53 @@
import { Alert, Box, CircularProgress } from "@mui/material"; import { Alert, Box, CircularProgress } from "@mui/material";
import { AxiosError } from "axios"; import { AxiosError } from "axios";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import CustomerForm from "../components/CustomerForm"; import CustomerForm from "./CustomerForm";
import axiosConfig from "../config/axiosConfig"; import axiosConfig from "../../config/axiosConfig";
import { I_Installation } from "../util/types"; import { I_Installation } from "../../util/types";
const InstallationDetail = () => { const InstallationDetail = () => {
const { id } = useParams(); const { id } = useParams();
const [values, setValues] = useState<I_Installation>(); const [values, setValues] = useState<I_Installation>();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState<AxiosError>(); const [error, setError] = useState<AxiosError>();
useEffect(() => { useEffect(() => {
setLoading(true); setLoading(true);
axiosConfig axiosConfig
.get("/GetInstallationById?id=" + id) .get("/GetInstallationById?id=" + id)
.then((res) => { .then((res) => {
setValues(res.data); setValues(res.data);
setLoading(false); setLoading(false);
}) })
.catch((err: AxiosError) => { .catch((err: AxiosError) => {
setError(err); setError(err);
setLoading(false); setLoading(false);
}); });
}, [id]); }, [id]);
if (values && values.id && values.id.toString() === id) { if (values && values.id && values.id.toString() === id) {
return ( return (
<Box sx={{ py: 3 }}> <Box sx={{ py: 3 }}>
<CustomerForm values={values} id={id} /> <CustomerForm values={values} id={id} />
</Box> </Box>
); );
} else if (loading) { } else if (loading) {
return ( return (
<Box <Box
sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }} sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
> >
<CircularProgress sx={{ m: 2 }} /> <CircularProgress sx={{ m: 2 }} />
</Box> </Box>
); );
} else if (error) { } else if (error) {
return ( return (
<Alert severity="error" sx={{ mt: 1 }}> <Alert severity="error" sx={{ mt: 1 }}>
{error.message} {error.message}
</Alert> </Alert>
); );
} }
return null; return null;
}; };
export default InstallationDetail; export default InstallationDetail;

8
typescript/Frontend/src/components/InstallationList.tsx → typescript/Frontend/src/components/Installations/InstallationList.tsx
View File

@ -3,11 +3,11 @@ import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText"; import ListItemText from "@mui/material/ListItemText";
import { CircularProgress, Divider, Grid } from "@mui/material"; import { CircularProgress, Divider, Grid } from "@mui/material";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import useRouteMatch from "../hooks/useRouteMatch"; import useRouteMatch from "../../hooks/useRouteMatch";
import routes from "../routes.json"; import routes from "../../routes.json";
import { Fragment, useEffect, useState } from "react"; import { Fragment, useEffect, useState } from "react";
import { I_Installation } from "../util/types"; import { I_Installation } from "../../util/types";
import axiosConfig from "../config/axiosConfig"; import axiosConfig from "../../config/axiosConfig";
interface InstallationListProps { interface InstallationListProps {
searchQuery: string; searchQuery: string;

4
typescript/Frontend/src/components/InstallationTabs.tsx → typescript/Frontend/src/components/Installations/InstallationTabs.tsx
View File

@ -3,8 +3,8 @@ import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab"; import Tab from "@mui/material/Tab";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import routes from "../routes.json"; import routes from "../../routes.json";
import useRouteMatch from "../hooks/useRouteMatch"; import useRouteMatch from "../../hooks/useRouteMatch";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
const InstallationTabs = () => { const InstallationTabs = () => {

10
typescript/Frontend/src/routes/Installations.tsx → typescript/Frontend/src/components/Installations/Installations.tsx
View File

@ -1,14 +1,14 @@
import { Grid } from "@mui/material"; import { Grid } from "@mui/material";
import { Container } from "@mui/system"; import { Container } from "@mui/system";
import { Routes, Route } from "react-router"; import { Routes, Route } from "react-router";
import InstallationTabs from "../components/InstallationTabs"; import NavigationButtons from "../Layout/NavigationButtons";
import NavigationButtons from "../components/NavigationButtons"; import Sidebar from "../Layout/Sidebar";
import BasicTable from "../components/Table"; import BasicTable from "../Layout/Table";
import Alarms from "./Alarms"; import Alarms from "./Alarms";
import InstallationDetail from "./Installation"; import InstallationDetail from "./Installation";
import InstallationTabs from "./InstallationTabs";
import Log from "./Log"; import Log from "./Log";
import routes from "../routes.json"; import routes from "../../routes.json";
import Sidebar from "../components/Sidebar";
const Installations = () => { const Installations = () => {
return ( return (

312
typescript/Frontend/src/routes/Log.tsx → typescript/Frontend/src/components/Installations/Log.tsx
View File

@ -1,156 +1,156 @@
const Log = () => { const Log = () => {
const foo = { const foo = {
TimeStamp: "1676643900", TimeStamp: "1676643900",
Devices: [ Devices: [
{ {
"TruConvertAc 205330741": { "TruConvertAc 205330741": {
Ac: { Ac: {
L1: { L1: {
Current: 2.49, Current: 2.49,
Voltage: 239.4, Voltage: 239.4,
Phi: 0.200334842323119592691046359, Phi: 0.200334842323119592691046359,
}, },
L2: { L2: {
Current: 2.65, Current: 2.65,
Voltage: 239.6, Voltage: 239.6,
Phi: 0.200334842323119592691046359, Phi: 0.200334842323119592691046359,
}, },
L3: { L3: {
Current: 2.63, Current: 2.63,
Voltage: 239.8, Voltage: 239.8,
Phi: 0, Phi: 0,
}, },
Frequency: 49.98, Frequency: 49.98,
}, },
Dc: { Dc: {
Current: 2.249388753056234718826405868, Current: 2.249388753056234718826405868,
Voltage: 818, Voltage: 818,
Power: 1840.0, Power: 1840.0,
}, },
Alarms: [], Alarms: [],
}, },
}, },
{ {
"TruConvertDc 3214": { "TruConvertDc 3214": {
Dc: { Dc: {
Current: -2.1173594132029339853300733496, Current: -2.1173594132029339853300733496,
Voltage: 818, Voltage: 818,
Power: -1732.0, Power: -1732.0,
}, },
Dc48: { Dc48: {
Current: -30, Current: -30,
Voltage: 56.0, Voltage: 56.0,
Power: -1680.0, Power: -1680.0,
}, },
Warnings: [], Warnings: [],
Alarms: [], Alarms: [],
}, },
}, },
{ {
"EmuMeter 123": { "EmuMeter 123": {
Ac: { Ac: {
L1: { L1: {
Current: 3.212, Current: 3.212,
Voltage: 239.4, Voltage: 239.4,
Phi: 1.1483422646081408626645746948, Phi: 1.1483422646081408626645746948,
}, },
L2: { L2: {
Current: -2.462, Current: -2.462,
Voltage: 238.9, Voltage: 238.9,
Phi: 1.8441893582623698418074097834, Phi: 1.8441893582623698418074097834,
}, },
L3: { L3: {
Current: 2.995, Current: 2.995,
Voltage: 238.8, Voltage: 238.8,
Phi: 0.1415394733244272187457893568, Phi: 0.1415394733244272187457893568,
}, },
Frequency: 49.9, Frequency: 49.9,
}, },
}, },
}, },
{ {
"EmuMeter 123": { "EmuMeter 123": {
Ac: { Ac: {
L1: { L1: {
Current: 3.212, Current: 3.212,
Voltage: 239.4, Voltage: 239.4,
Phi: 1.1483422646081408626645746948, Phi: 1.1483422646081408626645746948,
}, },
L2: { L2: {
Current: -2.462, Current: -2.462,
Voltage: 238.9, Voltage: 238.9,
Phi: 1.8441893582623698418074097834, Phi: 1.8441893582623698418074097834,
}, },
L3: { L3: {
Current: 2.995, Current: 2.995,
Voltage: 238.8, Voltage: 238.8,
Phi: 0.1415394733244272187457893568, Phi: 0.1415394733244272187457893568,
}, },
Frequency: 49.9, Frequency: 49.9,
}, },
}, },
}, },
{ {
Name: "AMPT", Name: "AMPT",
Type: "PvOnDc", Type: "PvOnDc",
"Current 1": 2.098, "Current 1": 2.098,
"Current 2": 2.575, "Current 2": 2.575,
"Voltage 1": 822.989, "Voltage 1": 822.989,
"Voltage 2": 823.169, "Voltage 2": 823.169,
"Power 1": 1726.630922, "Power 1": 1726.630922,
"Power 2": 2119.660175, "Power 2": 2119.660175,
}, },
{ {
Name: "48TL Battery", Name: "48TL Battery",
Type: "Battery", Type: "Battery",
Dc48: { Dc48: {
Current: 14.17, Current: 14.17,
Voltage: 53.41, Voltage: 53.41,
Power: 756.8197, Power: 756.8197,
}, },
Alarms: [], Alarms: [],
Warnings: [], Warnings: [],
Soc: 77.4, Soc: 77.4,
HeaterOn: true, HeaterOn: true,
EocReached: false, EocReached: false,
BatteryCold: false, BatteryCold: false,
Temperature: 265.4, Temperature: 265.4,
}, },
{ {
Name: "48TL Battery", Name: "48TL Battery",
Type: "Battery", Type: "Battery",
Dc48: { Dc48: {
Current: 11.3, Current: 11.3,
Voltage: 53.4, Voltage: 53.4,
Power: 603.42, Power: 603.42,
}, },
Alarms: [], Alarms: [],
Warnings: ["bit44:"], Warnings: ["bit44:"],
Soc: 77.6, Soc: 77.6,
HeaterOn: true, HeaterOn: true,
EocReached: false, EocReached: false,
BatteryCold: false, BatteryCold: false,
Temperature: 264.9, Temperature: 264.9,
}, },
], ],
}; };
const flattenObject = (obj: any, prefix = "") => const flattenObject = (obj: any, prefix = "") =>
Object.keys(obj).reduce((previous: any, current: any) => { Object.keys(obj).reduce((previous: any, current: any) => {
const pre = prefix.length ? prefix + "/" : ""; const pre = prefix.length ? prefix + "/" : "";
if (Array.isArray(obj) || typeof obj === "string") { if (Array.isArray(obj) || typeof obj === "string") {
return previous; return previous;
} }
if (typeof obj[current] === "object") { if (typeof obj[current] === "object") {
Object.assign(previous, flattenObject(obj[current], pre + current)); Object.assign(previous, flattenObject(obj[current], pre + current));
} else { } else {
previous[pre + current] = obj[current]; previous[pre + current] = obj[current];
} }
return previous; return previous;
}, {}); }, {});
console.log(flattenObject(foo.Devices[0])); console.log(flattenObject(foo.Devices[0]));
return <div>log</div>; return <div>log</div>;
}; };
export default Log; export default Log;

114
typescript/Frontend/src/components/FlowComp.tsx → typescript/Frontend/src/components/Layout/FlowComp.tsx
View File

@ -1,57 +1,57 @@
import { useState, useCallback } from "react"; import { useState, useCallback } from "react";
import ReactFlow, { import ReactFlow, {
addEdge, addEdge,
FitViewOptions, FitViewOptions,
applyNodeChanges, applyNodeChanges,
applyEdgeChanges, applyEdgeChanges,
Node, Node,
Edge, Edge,
NodeChange, NodeChange,
EdgeChange, EdgeChange,
Connection, Connection,
} from "reactflow"; } from "reactflow";
const initialNodes: Node[] = [ const initialNodes: Node[] = [
{ id: "1", data: { label: "Node 1" }, position: { x: 5, y: 5 } }, { id: "1", data: { label: "Node 1" }, position: { x: 5, y: 5 } },
{ id: "2", data: { label: "Node 2" }, position: { x: 5, y: 100 } }, { id: "2", data: { label: "Node 2" }, position: { x: 5, y: 100 } },
]; ];
const initialEdges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }]; const initialEdges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }];
const fitViewOptions: FitViewOptions = { const fitViewOptions: FitViewOptions = {
padding: 0.2, padding: 0.2,
}; };
function Flow() { function Flow() {
const [nodes, setNodes] = useState<Node[]>(initialNodes); const [nodes, setNodes] = useState<Node[]>(initialNodes);
const [edges, setEdges] = useState<Edge[]>(initialEdges); const [edges, setEdges] = useState<Edge[]>(initialEdges);
const onNodesChange = useCallback( const onNodesChange = useCallback(
(changes: NodeChange[]) => (changes: NodeChange[]) =>
setNodes((nds) => applyNodeChanges(changes, nds)), setNodes((nds) => applyNodeChanges(changes, nds)),
[setNodes] [setNodes]
); );
const onEdgesChange = useCallback( const onEdgesChange = useCallback(
(changes: EdgeChange[]) => (changes: EdgeChange[]) =>
setEdges((eds) => applyEdgeChanges(changes, eds)), setEdges((eds) => applyEdgeChanges(changes, eds)),
[setEdges] [setEdges]
); );
const onConnect = useCallback( const onConnect = useCallback(
(connection: Connection) => setEdges((eds) => addEdge(connection, eds)), (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
[setEdges] [setEdges]
); );
return ( return (
<ReactFlow <ReactFlow
nodes={nodes} nodes={nodes}
edges={edges} edges={edges}
onNodesChange={onNodesChange} onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange} onEdgesChange={onEdgesChange}
onConnect={onConnect} onConnect={onConnect}
fitView fitView
fitViewOptions={fitViewOptions} fitViewOptions={fitViewOptions}
/> />
); );
} }
export default Flow; export default Flow;

76
typescript/Frontend/src/components/InnovenergyTextfield.tsx → typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx
View File

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

0
typescript/Frontend/src/components/LanguageSelect.tsx → typescript/Frontend/src/components/Layout/LanguageSelect.tsx
View File

2
typescript/Frontend/src/components/LogoutButton.tsx → typescript/Frontend/src/components/Layout/LogoutButton.tsx
View File

@ -1,7 +1,7 @@
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
import axiosConfig from "../config/axiosConfig";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import axiosConfig from "../../config/axiosConfig";
interface LogoutButtonProps { interface LogoutButtonProps {
removeToken: () => void; removeToken: () => void;

10
typescript/Frontend/src/components/NavigationButtons.tsx → typescript/Frontend/src/components/Layout/NavigationButtons.tsx
View File

@ -1,8 +1,8 @@
import { ToggleButton, ToggleButtonGroup } from "@mui/material"; import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import useRouteMatch from "../hooks/useRouteMatch"; import useRouteMatch from "../../hooks/useRouteMatch";
import routes from "../routes.json"; import routes from "../../routes.json";
const NavigationButtons = () => { const NavigationButtons = () => {
const routeMatch = useRouteMatch([ const routeMatch = useRouteMatch([
@ -27,7 +27,11 @@ const NavigationButtons = () => {
defaultMessage="All installations" defaultMessage="All installations"
/> />
</ToggleButton> </ToggleButton>
<ToggleButton value={routes.groups + "*"} component={Link} to={routes.groups}> <ToggleButton
value={routes.groups + "*"}
component={Link}
to={routes.groups}
>
<FormattedMessage id="groups" defaultMessage="Groups" /> <FormattedMessage id="groups" defaultMessage="Groups" />
</ToggleButton> </ToggleButton>
</ToggleButtonGroup> </ToggleButtonGroup>

2
typescript/Frontend/src/components/Sidebar.tsx → typescript/Frontend/src/components/Layout/Sidebar.tsx
View File

@ -1,7 +1,7 @@
import { TextField } from "@mui/material"; import { TextField } from "@mui/material";
import { useState } from "react"; import { useState } from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import InstallationList from "./InstallationList"; import InstallationList from "../Installations/InstallationList";
const Sidebar = () => { const Sidebar = () => {
const [searchQuery, setSearchQuery] = useState(""); const [searchQuery, setSearchQuery] = useState("");

130
typescript/Frontend/src/components/Table.tsx → typescript/Frontend/src/components/Layout/Table.tsx
View File

@ -1,65 +1,65 @@
import * as React from "react"; import * as React from "react";
import Table from "@mui/material/Table"; import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody"; import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell"; import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer"; import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead"; import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow"; import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
const rows = [ const rows = [
{ {
device: "48TL200", device: "48TL200",
code: "MSWE", code: "MSWE",
message: "Main switch error", message: "Main switch error",
severity: "Alarm", severity: "Alarm",
}, },
{ {
device: "48TL200", device: "48TL200",
code: "MSWE", code: "MSWE",
message: "Main switch error", message: "Main switch error",
severity: "Alarm", severity: "Alarm",
}, },
{ {
device: "48TL200", device: "48TL200",
code: "MSWE", code: "MSWE",
message: "Main switch error", message: "Main switch error",
severity: "Alarm", severity: "Alarm",
}, },
{ {
device: "48TL200", device: "48TL200",
code: "MSWE", code: "MSWE",
message: "Main switch error", message: "Main switch error",
severity: "Alarm", severity: "Alarm",
}, },
]; ];
const BasicTable = () => { const BasicTable = () => {
return ( return (
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table aria-label="simple table"> <Table aria-label="simple table">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell>Device</TableCell> <TableCell>Device</TableCell>
<TableCell>Code</TableCell> <TableCell>Code</TableCell>
<TableCell>Message</TableCell> <TableCell>Message</TableCell>
<TableCell>Severity</TableCell> <TableCell>Severity</TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{rows.map((row, i) => ( {rows.map((row, i) => (
<TableRow <TableRow
key={i} key={i}
> >
<TableCell>{row.device}</TableCell> <TableCell>{row.device}</TableCell>
<TableCell>{row.code}</TableCell> <TableCell>{row.code}</TableCell>
<TableCell>{row.message}</TableCell> <TableCell>{row.message}</TableCell>
<TableCell>{row.severity}</TableCell> <TableCell>{row.severity}</TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
); );
}; };
export default BasicTable; export default BasicTable;

3
typescript/Frontend/src/components/Navigation.scss
View File

@ -1,3 +0,0 @@
.link {
text-decoration: none;
}

16
typescript/Frontend/src/components/Navigation.tsx
View File

@ -1,16 +0,0 @@
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import { Link } from 'react-router-dom';
function Navigation() {
return (
<AppBar position="static">
<Toolbar disableGutters>
<Link to="/" >All installations</Link>
<Link to="/anotherPath">Users</Link>
</Toolbar>
</AppBar>
);
}
export default Navigation;