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 en from "./lang/en.json";
import de from "./lang/de.json";
import LanguageSelect from "./components/LanguageSelect";
import LogoutButton from "./components/LogoutButton";
import Installations from "./routes/Installations";
import Groups from "./routes/Groups";
import Installations from "./components/Installations/Installations";
import LanguageSelect from "./components/Layout/LanguageSelect";
import LogoutButton from "./components/Layout/LogoutButton";
import Groups from "./components/Groups/Groups";
const App = () => {
const { token, setToken, removeToken } = useToken();

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

@ -1,8 +1,8 @@
import React, { useState } from "react";
import { Alert, Button, CircularProgress, Grid } from "@mui/material";
import Container from "@mui/material/Container";
import InnovenergyTextfield from "./components/InnovenergyTextfield";
import { axiosConfigWithoutToken } from "./config/axiosConfig";
import InnovenergyTextfield from "./components/Layout/InnovenergyTextfield";
const loginUser = async (username: string, password: string) => {
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 { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import axiosConfig from "../config/axiosConfig";
import { I_Installation } from "../util/types";
import axiosConfig from "../../config/axiosConfig";
import { I_Installation } from "../../util/types";
const Group = () => {
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 Box from "@mui/material/Box";
import { Link } from "react-router-dom";
import routes from "../routes.json";
import useRouteMatch from "../hooks/useRouteMatch";
import routes from "../../routes.json";
import useRouteMatch from "../../hooks/useRouteMatch";
import { useIntl } from "react-intl";
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 { ReactNode, useEffect, useState } from "react";
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 axiosConfig from "../../config/axiosConfig";
import { I_Folder, I_Installation } from "../../util/types";
const GroupTree = () => {
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 { Container } from "@mui/system";
import { Routes, Route } from "react-router";
import GroupTabs from "../components/GroupTabs";
import NavigationButtons from "../components/NavigationButtons";
import UserTree from "../components/GroupTree";
import routes from "../routes.json";
import routes from "../../routes.json";
import NavigationButtons from "../Layout/NavigationButtons";
import Group from "./Group";
import GroupTabs from "./GroupTabs";
import GroupTree from "./GroupTree";
const Groups = () => {
return (
@ -13,7 +13,7 @@ const Groups = () => {
<Grid container spacing={2}>
<Grid item xs={3}>
<NavigationButtons />
<UserTree />
<GroupTree />
</Grid>
<Grid item xs={9}>
<GroupTabs />

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

@ -1,5 +1,5 @@
const Alarms = () => {
return <div>alarms</div>;
};
export default Alarms;
const Alarms = () => {
return <div>alarms</div>;
};
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 { useFormik } from "formik";
import { useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import axiosConfig from "../config/axiosConfig";
import { I_Installation } from "../util/types";
import InnovenergyTextfield from "./InnovenergyTextfield";
interface I_CustomerFormProps {
values: I_Installation;
id: string | undefined;
}
const CustomerForm = (props: I_CustomerFormProps) => {
const { values, id } = props;
const intl = useIntl();
const [open, setOpen] = useState(false);
const formik = useFormik({
initialValues: {
name: values.name,
region: values.region,
location: values.location,
country: values.country,
orderNumbers: values.orderNumbers,
},
onSubmit: (formikValues) => {
axiosConfig
.put("https://localhost:7087/api/UpdateInstallation", {
...formikValues,
id,
})
.then((res) => {
setOpen(true);
});
},
});
const handleClose = () => {
setOpen(false);
};
return (
<form onSubmit={formik.handleSubmit}>
<InnovenergyTextfield
id="name-textfield"
label={intl.formatMessage({
id: "customerName",
defaultMessage: "Customer name",
})}
name="name"
value={formik.values.name}
handleChange={formik.handleChange}
/>
<InnovenergyTextfield
id="region-textfield"
label={intl.formatMessage({
id: "region",
defaultMessage: "Region",
})}
name="region"
value={formik.values.region}
handleChange={formik.handleChange}
/>
<InnovenergyTextfield
id="location-textfield"
label={intl.formatMessage({
id: "location",
defaultMessage: "Location",
})}
name="location"
value={formik.values.location}
handleChange={formik.handleChange}
/>
<InnovenergyTextfield
id="country-textfield"
label={intl.formatMessage({
id: "country",
defaultMessage: "Country",
})}
name="country"
value={formik.values.country}
handleChange={formik.handleChange}
/>
<InnovenergyTextfield
id="orderNumbers-textfield"
label={intl.formatMessage({
id: "orderNumbers",
defaultMessage: "Order number",
})}
name="orderNumbers"
value={formik.values.orderNumbers}
handleChange={formik.handleChange}
/>
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
<Button variant="outlined" type="submit">
<FormattedMessage id="applyChanges" defaultMessage="Apply changes" />
</Button>
</Grid>
<Snackbar
open={open}
anchorOrigin={{
vertical: "top",
horizontal: "center",
}}
autoHideDuration={6000}
onClose={handleClose}
>
<Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
<FormattedMessage
id="updatedSuccessfully"
defaultMessage="Updated successfully"
/>
</Alert>
</Snackbar>
</form>
);
};
export default CustomerForm;
import { Alert, Button, Grid, Snackbar } from "@mui/material";
import { useFormik } from "formik";
import { useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import axiosConfig from "../../config/axiosConfig";
import { I_Installation } from "../../util/types";
import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
interface I_CustomerFormProps {
values: I_Installation;
id: string | undefined;
}
const CustomerForm = (props: I_CustomerFormProps) => {
const { values, id } = props;
const intl = useIntl();
const [open, setOpen] = useState(false);
const formik = useFormik({
initialValues: {
name: values.name,
region: values.region,
location: values.location,
country: values.country,
orderNumbers: values.orderNumbers,
},
onSubmit: (formikValues) => {
axiosConfig
.put("/UpdateInstallation", {
...formikValues,
id,
})
.then((res) => {
setOpen(true);
});
},
});
const handleClose = () => {
setOpen(false);
};
return (
<form onSubmit={formik.handleSubmit}>
<InnovenergyTextfield
id="name-textfield"
label={intl.formatMessage({
id: "customerName",
defaultMessage: "Customer name",
})}
name="name"
value={formik.values.name}
handleChange={formik.handleChange}
/>
<InnovenergyTextfield
id="region-textfield"
label={intl.formatMessage({
id: "region",
defaultMessage: "Region",
})}
name="region"
value={formik.values.region}
handleChange={formik.handleChange}
/>
<InnovenergyTextfield
id="location-textfield"
label={intl.formatMessage({
id: "location",
defaultMessage: "Location",
})}
name="location"
value={formik.values.location}
handleChange={formik.handleChange}
/>
<InnovenergyTextfield
id="country-textfield"
label={intl.formatMessage({
id: "country",
defaultMessage: "Country",
})}
name="country"
value={formik.values.country}
handleChange={formik.handleChange}
/>
<InnovenergyTextfield
id="orderNumbers-textfield"
label={intl.formatMessage({
id: "orderNumbers",
defaultMessage: "Order number",
})}
name="orderNumbers"
value={formik.values.orderNumbers}
handleChange={formik.handleChange}
/>
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
<Button variant="outlined" type="submit">
<FormattedMessage id="applyChanges" defaultMessage="Apply changes" />
</Button>
</Grid>
<Snackbar
open={open}
anchorOrigin={{
vertical: "top",
horizontal: "center",
}}
autoHideDuration={6000}
onClose={handleClose}
>
<Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
<FormattedMessage
id="updatedSuccessfully"
defaultMessage="Updated successfully"
/>
</Alert>
</Snackbar>
</form>
);
};
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 { AxiosError } from "axios";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import CustomerForm from "../components/CustomerForm";
import axiosConfig from "../config/axiosConfig";
import { I_Installation } from "../util/types";
const InstallationDetail = () => {
const { id } = useParams();
const [values, setValues] = useState<I_Installation>();
const [loading, setLoading] = useState(false);
const [error, setError] = useState<AxiosError>();
useEffect(() => {
setLoading(true);
axiosConfig
.get("/GetInstallationById?id=" + id)
.then((res) => {
setValues(res.data);
setLoading(false);
})
.catch((err: AxiosError) => {
setError(err);
setLoading(false);
});
}, [id]);
if (values && values.id && values.id.toString() === id) {
return (
<Box sx={{ py: 3 }}>
<CustomerForm values={values} id={id} />
</Box>
);
} else if (loading) {
return (
<Box
sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
>
<CircularProgress sx={{ m: 2 }} />
</Box>
);
} else if (error) {
return (
<Alert severity="error" sx={{ mt: 1 }}>
{error.message}
</Alert>
);
}
return null;
};
export default InstallationDetail;
import { Alert, Box, CircularProgress } from "@mui/material";
import { AxiosError } from "axios";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import CustomerForm from "./CustomerForm";
import axiosConfig from "../../config/axiosConfig";
import { I_Installation } from "../../util/types";
const InstallationDetail = () => {
const { id } = useParams();
const [values, setValues] = useState<I_Installation>();
const [loading, setLoading] = useState(false);
const [error, setError] = useState<AxiosError>();
useEffect(() => {
setLoading(true);
axiosConfig
.get("/GetInstallationById?id=" + id)
.then((res) => {
setValues(res.data);
setLoading(false);
})
.catch((err: AxiosError) => {
setError(err);
setLoading(false);
});
}, [id]);
if (values && values.id && values.id.toString() === id) {
return (
<Box sx={{ py: 3 }}>
<CustomerForm values={values} id={id} />
</Box>
);
} else if (loading) {
return (
<Box
sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
>
<CircularProgress sx={{ m: 2 }} />
</Box>
);
} else if (error) {
return (
<Alert severity="error" sx={{ mt: 1 }}>
{error.message}
</Alert>
);
}
return null;
};
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 { CircularProgress, Divider, Grid } from "@mui/material";
import { Link } from "react-router-dom";
import useRouteMatch from "../hooks/useRouteMatch";
import routes from "../routes.json";
import useRouteMatch from "../../hooks/useRouteMatch";
import routes from "../../routes.json";
import { Fragment, useEffect, useState } from "react";
import { I_Installation } from "../util/types";
import axiosConfig from "../config/axiosConfig";
import { I_Installation } from "../../util/types";
import axiosConfig from "../../config/axiosConfig";
interface InstallationListProps {
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 Box from "@mui/material/Box";
import { Link } from "react-router-dom";
import routes from "../routes.json";
import useRouteMatch from "../hooks/useRouteMatch";
import routes from "../../routes.json";
import useRouteMatch from "../../hooks/useRouteMatch";
import { useIntl } from "react-intl";
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 { Container } from "@mui/system";
import { Routes, Route } from "react-router";
import InstallationTabs from "../components/InstallationTabs";
import NavigationButtons from "../components/NavigationButtons";
import BasicTable from "../components/Table";
import NavigationButtons from "../Layout/NavigationButtons";
import Sidebar from "../Layout/Sidebar";
import BasicTable from "../Layout/Table";
import Alarms from "./Alarms";
import InstallationDetail from "./Installation";
import InstallationTabs from "./InstallationTabs";
import Log from "./Log";
import routes from "../routes.json";
import Sidebar from "../components/Sidebar";
import routes from "../../routes.json";
const Installations = () => {
return (

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

@ -1,156 +1,156 @@
const Log = () => {
const foo = {
TimeStamp: "1676643900",
Devices: [
{
"TruConvertAc 205330741": {
Ac: {
L1: {
Current: 2.49,
Voltage: 239.4,
Phi: 0.200334842323119592691046359,
},
L2: {
Current: 2.65,
Voltage: 239.6,
Phi: 0.200334842323119592691046359,
},
L3: {
Current: 2.63,
Voltage: 239.8,
Phi: 0,
},
Frequency: 49.98,
},
Dc: {
Current: 2.249388753056234718826405868,
Voltage: 818,
Power: 1840.0,
},
Alarms: [],
},
},
{
"TruConvertDc 3214": {
Dc: {
Current: -2.1173594132029339853300733496,
Voltage: 818,
Power: -1732.0,
},
Dc48: {
Current: -30,
Voltage: 56.0,
Power: -1680.0,
},
Warnings: [],
Alarms: [],
},
},
{
"EmuMeter 123": {
Ac: {
L1: {
Current: 3.212,
Voltage: 239.4,
Phi: 1.1483422646081408626645746948,
},
L2: {
Current: -2.462,
Voltage: 238.9,
Phi: 1.8441893582623698418074097834,
},
L3: {
Current: 2.995,
Voltage: 238.8,
Phi: 0.1415394733244272187457893568,
},
Frequency: 49.9,
},
},
},
{
"EmuMeter 123": {
Ac: {
L1: {
Current: 3.212,
Voltage: 239.4,
Phi: 1.1483422646081408626645746948,
},
L2: {
Current: -2.462,
Voltage: 238.9,
Phi: 1.8441893582623698418074097834,
},
L3: {
Current: 2.995,
Voltage: 238.8,
Phi: 0.1415394733244272187457893568,
},
Frequency: 49.9,
},
},
},
{
Name: "AMPT",
Type: "PvOnDc",
"Current 1": 2.098,
"Current 2": 2.575,
"Voltage 1": 822.989,
"Voltage 2": 823.169,
"Power 1": 1726.630922,
"Power 2": 2119.660175,
},
{
Name: "48TL Battery",
Type: "Battery",
Dc48: {
Current: 14.17,
Voltage: 53.41,
Power: 756.8197,
},
Alarms: [],
Warnings: [],
Soc: 77.4,
HeaterOn: true,
EocReached: false,
BatteryCold: false,
Temperature: 265.4,
},
{
Name: "48TL Battery",
Type: "Battery",
Dc48: {
Current: 11.3,
Voltage: 53.4,
Power: 603.42,
},
Alarms: [],
Warnings: ["bit44:"],
Soc: 77.6,
HeaterOn: true,
EocReached: false,
BatteryCold: false,
Temperature: 264.9,
},
],
};
const flattenObject = (obj: any, prefix = "") =>
Object.keys(obj).reduce((previous: any, current: any) => {
const pre = prefix.length ? prefix + "/" : "";
if (Array.isArray(obj) || typeof obj === "string") {
return previous;
}
if (typeof obj[current] === "object") {
Object.assign(previous, flattenObject(obj[current], pre + current));
} else {
previous[pre + current] = obj[current];
}
return previous;
}, {});
console.log(flattenObject(foo.Devices[0]));
return <div>log</div>;
};
export default Log;
const Log = () => {
const foo = {
TimeStamp: "1676643900",
Devices: [
{
"TruConvertAc 205330741": {
Ac: {
L1: {
Current: 2.49,
Voltage: 239.4,
Phi: 0.200334842323119592691046359,
},
L2: {
Current: 2.65,
Voltage: 239.6,
Phi: 0.200334842323119592691046359,
},
L3: {
Current: 2.63,
Voltage: 239.8,
Phi: 0,
},
Frequency: 49.98,
},
Dc: {
Current: 2.249388753056234718826405868,
Voltage: 818,
Power: 1840.0,
},
Alarms: [],
},
},
{
"TruConvertDc 3214": {
Dc: {
Current: -2.1173594132029339853300733496,
Voltage: 818,
Power: -1732.0,
},
Dc48: {
Current: -30,
Voltage: 56.0,
Power: -1680.0,
},
Warnings: [],
Alarms: [],
},
},
{
"EmuMeter 123": {
Ac: {
L1: {
Current: 3.212,
Voltage: 239.4,
Phi: 1.1483422646081408626645746948,
},
L2: {
Current: -2.462,
Voltage: 238.9,
Phi: 1.8441893582623698418074097834,
},
L3: {
Current: 2.995,
Voltage: 238.8,
Phi: 0.1415394733244272187457893568,
},
Frequency: 49.9,
},
},
},
{
"EmuMeter 123": {
Ac: {
L1: {
Current: 3.212,
Voltage: 239.4,
Phi: 1.1483422646081408626645746948,
},
L2: {
Current: -2.462,
Voltage: 238.9,
Phi: 1.8441893582623698418074097834,
},
L3: {
Current: 2.995,
Voltage: 238.8,
Phi: 0.1415394733244272187457893568,
},
Frequency: 49.9,
},
},
},
{
Name: "AMPT",
Type: "PvOnDc",
"Current 1": 2.098,
"Current 2": 2.575,
"Voltage 1": 822.989,
"Voltage 2": 823.169,
"Power 1": 1726.630922,
"Power 2": 2119.660175,
},
{
Name: "48TL Battery",
Type: "Battery",
Dc48: {
Current: 14.17,
Voltage: 53.41,
Power: 756.8197,
},
Alarms: [],
Warnings: [],
Soc: 77.4,
HeaterOn: true,
EocReached: false,
BatteryCold: false,
Temperature: 265.4,
},
{
Name: "48TL Battery",
Type: "Battery",
Dc48: {
Current: 11.3,
Voltage: 53.4,
Power: 603.42,
},
Alarms: [],
Warnings: ["bit44:"],
Soc: 77.6,
HeaterOn: true,
EocReached: false,
BatteryCold: false,
Temperature: 264.9,
},
],
};
const flattenObject = (obj: any, prefix = "") =>
Object.keys(obj).reduce((previous: any, current: any) => {
const pre = prefix.length ? prefix + "/" : "";
if (Array.isArray(obj) || typeof obj === "string") {
return previous;
}
if (typeof obj[current] === "object") {
Object.assign(previous, flattenObject(obj[current], pre + current));
} else {
previous[pre + current] = obj[current];
}
return previous;
}, {});
console.log(flattenObject(foo.Devices[0]));
return <div>log</div>;
};
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 ReactFlow, {
addEdge,
FitViewOptions,
applyNodeChanges,
applyEdgeChanges,
Node,
Edge,
NodeChange,
EdgeChange,
Connection,
} from "reactflow";
const initialNodes: Node[] = [
{ id: "1", data: { label: "Node 1" }, position: { x: 5, y: 5 } },
{ id: "2", data: { label: "Node 2" }, position: { x: 5, y: 100 } },
];
const initialEdges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }];
const fitViewOptions: FitViewOptions = {
padding: 0.2,
};
function Flow() {
const [nodes, setNodes] = useState<Node[]>(initialNodes);
const [edges, setEdges] = useState<Edge[]>(initialEdges);
const onNodesChange = useCallback(
(changes: NodeChange[]) =>
setNodes((nds) => applyNodeChanges(changes, nds)),
[setNodes]
);
const onEdgesChange = useCallback(
(changes: EdgeChange[]) =>
setEdges((eds) => applyEdgeChanges(changes, eds)),
[setEdges]
);
const onConnect = useCallback(
(connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
[setEdges]
);
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
fitView
fitViewOptions={fitViewOptions}
/>
);
}
export default Flow;
import { useState, useCallback } from "react";
import ReactFlow, {
addEdge,
FitViewOptions,
applyNodeChanges,
applyEdgeChanges,
Node,
Edge,
NodeChange,
EdgeChange,
Connection,
} from "reactflow";
const initialNodes: Node[] = [
{ id: "1", data: { label: "Node 1" }, position: { x: 5, y: 5 } },
{ id: "2", data: { label: "Node 2" }, position: { x: 5, y: 100 } },
];
const initialEdges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }];
const fitViewOptions: FitViewOptions = {
padding: 0.2,
};
function Flow() {
const [nodes, setNodes] = useState<Node[]>(initialNodes);
const [edges, setEdges] = useState<Edge[]>(initialEdges);
const onNodesChange = useCallback(
(changes: NodeChange[]) =>
setNodes((nds) => applyNodeChanges(changes, nds)),
[setNodes]
);
const onEdgesChange = useCallback(
(changes: EdgeChange[]) =>
setEdges((eds) => applyEdgeChanges(changes, eds)),
[setEdges]
);
const onConnect = useCallback(
(connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
[setEdges]
);
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
fitView
fitViewOptions={fitViewOptions}
/>
);
}
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";
interface I_InnovenergyTextfieldProps {
id: string;
label: string;
value: string;
name: string;
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
type?: string;
readOnly?: boolean;
}
const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => {
return (
<Grid container direction="row" alignItems="center" spacing={2}>
<Grid item xs={3}>
<InputLabel>{props.label}</InputLabel>
</Grid>
<Grid item xs={9}>
<TextField
id={props.id}
variant="outlined"
name={props.name}
type={props.type}
fullWidth
sx={{ my: 0.5 }}
value={props.value || ""}
onChange={props.handleChange}
InputProps={{
readOnly: props.readOnly,
}}
/>
</Grid>
</Grid>
);
};
export default InnovenergyTextfield;
import { Grid, InputLabel, TextField } from "@mui/material";
interface I_InnovenergyTextfieldProps {
id: string;
label: string;
value: string;
name: string;
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
type?: string;
readOnly?: boolean;
}
const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => {
return (
<Grid container direction="row" alignItems="center" spacing={2}>
<Grid item xs={3}>
<InputLabel>{props.label}</InputLabel>
</Grid>
<Grid item xs={9}>
<TextField
id={props.id}
variant="outlined"
name={props.name}
type={props.type}
fullWidth
sx={{ my: 0.5 }}
value={props.value || ""}
onChange={props.handleChange}
InputProps={{
readOnly: props.readOnly,
}}
/>
</Grid>
</Grid>
);
};
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 { FormattedMessage } from "react-intl";
import axiosConfig from "../config/axiosConfig";
import { useNavigate } from "react-router-dom";
import axiosConfig from "../../config/axiosConfig";
interface LogoutButtonProps {
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 { FormattedMessage } from "react-intl";
import { Link } from "react-router-dom";
import useRouteMatch from "../hooks/useRouteMatch";
import routes from "../routes.json";
import useRouteMatch from "../../hooks/useRouteMatch";
import routes from "../../routes.json";
const NavigationButtons = () => {
const routeMatch = useRouteMatch([
@ -27,7 +27,11 @@ const NavigationButtons = () => {
defaultMessage="All installations"
/>
</ToggleButton>
<ToggleButton value={routes.groups + "*"} component={Link} to={routes.groups}>
<ToggleButton
value={routes.groups + "*"}
component={Link}
to={routes.groups}
>
<FormattedMessage id="groups" defaultMessage="Groups" />
</ToggleButton>
</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 { useState } from "react";
import { useIntl } from "react-intl";
import InstallationList from "./InstallationList";
import InstallationList from "../Installations/InstallationList";
const Sidebar = () => {
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 Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
const rows = [
{
device: "48TL200",
code: "MSWE",
message: "Main switch error",
severity: "Alarm",
},
{
device: "48TL200",
code: "MSWE",
message: "Main switch error",
severity: "Alarm",
},
{
device: "48TL200",
code: "MSWE",
message: "Main switch error",
severity: "Alarm",
},
{
device: "48TL200",
code: "MSWE",
message: "Main switch error",
severity: "Alarm",
},
];
const BasicTable = () => {
return (
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Device</TableCell>
<TableCell>Code</TableCell>
<TableCell>Message</TableCell>
<TableCell>Severity</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, i) => (
<TableRow
key={i}
>
<TableCell>{row.device}</TableCell>
<TableCell>{row.code}</TableCell>
<TableCell>{row.message}</TableCell>
<TableCell>{row.severity}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
export default BasicTable;
import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
const rows = [
{
device: "48TL200",
code: "MSWE",
message: "Main switch error",
severity: "Alarm",
},
{
device: "48TL200",
code: "MSWE",
message: "Main switch error",
severity: "Alarm",
},
{
device: "48TL200",
code: "MSWE",
message: "Main switch error",
severity: "Alarm",
},
{
device: "48TL200",
code: "MSWE",
message: "Main switch error",
severity: "Alarm",
},
];
const BasicTable = () => {
return (
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Device</TableCell>
<TableCell>Code</TableCell>
<TableCell>Message</TableCell>
<TableCell>Severity</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, i) => (
<TableRow
key={i}
>
<TableCell>{row.device}</TableCell>
<TableCell>{row.code}</TableCell>
<TableCell>{row.message}</TableCell>
<TableCell>{row.severity}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
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;