Merge remote-tracking branch 'origin/main'
This commit is contained in:
commit
179c2fe0fc
|
|
@ -119,6 +119,10 @@ function App() {
|
|||
path={routes.forgotPassword}
|
||||
element={<ForgotPassword />}
|
||||
></Route>
|
||||
<Route
|
||||
path={'*'}
|
||||
element={<Navigate to={routes.login}></Navigate>}
|
||||
></Route>
|
||||
</Routes>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
|
@ -147,6 +151,10 @@ function App() {
|
|||
path={''}
|
||||
element={<Navigate to={routes.installations}></Navigate>}
|
||||
></Route>
|
||||
<Route
|
||||
path={'login'}
|
||||
element={<Navigate to={routes.installations}></Navigate>}
|
||||
></Route>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
|
|
@ -168,7 +176,10 @@ function App() {
|
|||
/>
|
||||
|
||||
<Route path={routes.users + '*'} element={<Users />} />
|
||||
|
||||
<Route
|
||||
path={'*'}
|
||||
element={<Navigate to={routes.installations}></Navigate>}
|
||||
></Route>
|
||||
<Route path="ResetPassword" element={<ResetPassword />}></Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ function Login() {
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ userSelect: 'none' }}>
|
||||
<Container maxWidth="xl" sx={{ pt: 2 }} className="login">
|
||||
<Grid container>
|
||||
<Grid item xs={3} container justifyContent="flex-start" mb={2}>
|
||||
|
|
@ -263,7 +263,7 @@ function Login() {
|
|||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -104,7 +104,10 @@ function InstallationTabs() {
|
|||
value: 'live',
|
||||
label: <FormattedMessage id="live" defaultMessage="Live" />
|
||||
},
|
||||
|
||||
{
|
||||
value: 'overview',
|
||||
label: <FormattedMessage id="overview" defaultMessage="Overview" />
|
||||
},
|
||||
{
|
||||
value: 'batteryview',
|
||||
label: (
|
||||
|
|
@ -148,12 +151,7 @@ function InstallationTabs() {
|
|||
value: 'overview',
|
||||
label: <FormattedMessage id="overview" defaultMessage="Overview" />
|
||||
},
|
||||
{
|
||||
value: 'batteryview',
|
||||
label: (
|
||||
<FormattedMessage id="batteryview" defaultMessage="Battery View" />
|
||||
)
|
||||
},
|
||||
|
||||
{
|
||||
value: 'log',
|
||||
label: <FormattedMessage id="log" defaultMessage="Log" />
|
||||
|
|
|
|||
|
|
@ -29,10 +29,17 @@ interface LogProps {
|
|||
|
||||
function Log(props: LogProps) {
|
||||
const theme = useTheme();
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
const openModal = searchParams.get('open');
|
||||
|
||||
const [warnings, setWarnings] = useState<ErrorMessage[]>([]);
|
||||
const [errors, setErrors] = useState<ErrorMessage[]>([]);
|
||||
const [errorButtonPressed, setErrorButtonPressed] = useState(false);
|
||||
const [warningButtonPressed, setWarningButtonPressed] = useState(false);
|
||||
const [errorButtonPressed, setErrorButtonPressed] = useState(
|
||||
openModal === 'error' ? true : false
|
||||
);
|
||||
const [warningButtonPressed, setWarningButtonPressed] = useState(
|
||||
openModal === 'warning' ? true : false
|
||||
);
|
||||
const [updateCount, setUpdateCount] = useState(0);
|
||||
const navigate = useNavigate();
|
||||
const tokencontext = useContext(TokenContext);
|
||||
|
|
|
|||
|
|
@ -260,7 +260,7 @@ export const getChartOptions = (
|
|||
: chartInfo.max <= 0
|
||||
? Math.ceil(chartInfo.min / findPower(chartInfo.min).value) *
|
||||
findPower(chartInfo.min).value
|
||||
: Math.abs(chartInfo.min) < 1
|
||||
: Math.abs(chartInfo.min) < 1 || Math.abs(chartInfo.max) < 1
|
||||
? -Math.max(
|
||||
Math.abs(
|
||||
Math.ceil(chartInfo.min / findPower(chartInfo.min).value) *
|
||||
|
|
@ -278,7 +278,7 @@ export const getChartOptions = (
|
|||
).toFixed(2)
|
||||
: chartInfo.max <= 0
|
||||
? 0
|
||||
: Math.abs(chartInfo.min) < 1
|
||||
: Math.abs(chartInfo.min) < 1 || Math.abs(chartInfo.max) < 1
|
||||
? +Math.max(
|
||||
Math.abs(
|
||||
Math.ceil(chartInfo.min / findPower(chartInfo.min).value) *
|
||||
|
|
@ -306,6 +306,17 @@ export const getChartOptions = (
|
|||
}
|
||||
}
|
||||
},
|
||||
annotations: {
|
||||
yaxis: [
|
||||
{
|
||||
y: 0,
|
||||
strokeDashArray: 0,
|
||||
borderColor: '#d3d3d3',
|
||||
borderWidth: 1,
|
||||
yAxisIndex: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
|
|
|
|||
|
|
@ -687,7 +687,7 @@ function Overview(props: OverviewProps) {
|
|||
},
|
||||
{
|
||||
name: 'Net Energy',
|
||||
color: '#666666',
|
||||
color: '#ff3333',
|
||||
type: 'line',
|
||||
data: weeklybalance
|
||||
}
|
||||
|
|
@ -917,7 +917,7 @@ function Overview(props: OverviewProps) {
|
|||
/>
|
||||
)}
|
||||
|
||||
{weeklyData && (
|
||||
{weeklyData && currentUser.hasWriteAccess && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
|
|
@ -930,7 +930,7 @@ function Overview(props: OverviewProps) {
|
|||
series={[
|
||||
{
|
||||
...weeklyDataArray.chartData.dcChargingPower,
|
||||
color: '#69d2e7'
|
||||
color: '#008FFB'
|
||||
},
|
||||
{
|
||||
...weeklyDataArray.chartData.heatingPower,
|
||||
|
|
@ -938,7 +938,7 @@ function Overview(props: OverviewProps) {
|
|||
},
|
||||
{
|
||||
...weeklyDataArray.chartData.dcDischargingPower,
|
||||
color: '#008FFB'
|
||||
color: '#69d2e7'
|
||||
}
|
||||
]}
|
||||
type="bar"
|
||||
|
|
@ -946,7 +946,33 @@ function Overview(props: OverviewProps) {
|
|||
/>
|
||||
)}
|
||||
|
||||
{monthlyData && (
|
||||
{weeklyData && !currentUser.hasWriteAccess && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
weeklyDataArray.chartOverview.dcPowerWithoutHeating,
|
||||
'weekly',
|
||||
weeklyDateList,
|
||||
true
|
||||
)
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...weeklyDataArray.chartData.dcChargingPower,
|
||||
color: '#008FFB'
|
||||
},
|
||||
|
||||
{
|
||||
...weeklyDataArray.chartData.dcDischargingPower,
|
||||
color: '#69d2e7'
|
||||
}
|
||||
]}
|
||||
type="bar"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
|
||||
{monthlyData && currentUser.hasWriteAccess && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
|
|
@ -959,7 +985,7 @@ function Overview(props: OverviewProps) {
|
|||
series={[
|
||||
{
|
||||
...monthlyDataArray.chartData.dcChargingPower,
|
||||
color: '#69d2e7'
|
||||
color: '#008FFB'
|
||||
},
|
||||
{
|
||||
...weeklyDataArray.chartData.heatingPower,
|
||||
|
|
@ -967,7 +993,34 @@ function Overview(props: OverviewProps) {
|
|||
},
|
||||
{
|
||||
...monthlyDataArray.chartData.dcDischargingPower,
|
||||
color: '#69d2e7'
|
||||
}
|
||||
]}
|
||||
type="bar"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
|
||||
{monthlyData && !currentUser.hasWriteAccess && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
monthlyDataArray.chartOverview
|
||||
.dcPowerWithoutHeating,
|
||||
'monthly',
|
||||
monthlyDateList,
|
||||
true
|
||||
)
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...monthlyDataArray.chartData.dcChargingPower,
|
||||
color: '#008FFB'
|
||||
},
|
||||
|
||||
{
|
||||
...monthlyDataArray.chartData.dcDischargingPower,
|
||||
color: '#69d2e7'
|
||||
}
|
||||
]}
|
||||
type="bar"
|
||||
|
|
@ -1106,232 +1159,229 @@ function Overview(props: OverviewProps) {
|
|||
</Grid>
|
||||
)}
|
||||
|
||||
{currentUser.hasWriteAccess && (
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justifyContent="center"
|
||||
alignItems="stretch"
|
||||
spacing={3}
|
||||
>
|
||||
<Grid item md={6} xs={12}>
|
||||
<Card
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justifyContent="center"
|
||||
alignItems="stretch"
|
||||
spacing={3}
|
||||
>
|
||||
<Grid item md={6} xs={12}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginBottom: '30px'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginBottom: '30px'
|
||||
marginLeft: '20px'
|
||||
}}
|
||||
>
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box>
|
||||
<Typography variant="subtitle1" noWrap>
|
||||
<FormattedMessage
|
||||
id="pv_production"
|
||||
defaultMessage="PV Production"
|
||||
/>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
marginLeft: '20px'
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
pt: 3
|
||||
}}
|
||||
>
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box>
|
||||
<Typography variant="subtitle1" noWrap>
|
||||
<FormattedMessage
|
||||
id="pv_production"
|
||||
defaultMessage="PV Production"
|
||||
/>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
pt: 3
|
||||
}}
|
||||
></Box>
|
||||
</Box>
|
||||
></Box>
|
||||
</Box>
|
||||
|
||||
{dailyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
dailyDataArray[chartState].chartOverview
|
||||
.pvProduction,
|
||||
'daily',
|
||||
[],
|
||||
true
|
||||
),
|
||||
chart: {
|
||||
events: {
|
||||
beforeZoom: handleBeforeZoom
|
||||
}
|
||||
{dailyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
dailyDataArray[chartState].chartOverview
|
||||
.pvProduction,
|
||||
'daily',
|
||||
[],
|
||||
true
|
||||
),
|
||||
chart: {
|
||||
events: {
|
||||
beforeZoom: handleBeforeZoom
|
||||
}
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...dailyDataArray[chartState].chartData
|
||||
.pvProduction,
|
||||
color: '#ff9900'
|
||||
}
|
||||
]}
|
||||
type="line"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
|
||||
{weeklyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
weeklyDataArray.chartOverview.pvProduction,
|
||||
'weekly',
|
||||
weeklyDateList,
|
||||
true
|
||||
)
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...weeklyDataArray.chartData.pvProduction,
|
||||
color: '#ff9900'
|
||||
}
|
||||
]}
|
||||
type="bar"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
|
||||
{monthlyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
monthlyDataArray.chartOverview.pvProduction,
|
||||
'monthly',
|
||||
monthlyDateList,
|
||||
true
|
||||
)
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...monthlyDataArray.chartData.pvProduction,
|
||||
color: '#ff9900'
|
||||
}
|
||||
]}
|
||||
type="bar"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item md={6} xs={12}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginBottom: '30px'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
marginLeft: '20px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box>
|
||||
<Typography variant="subtitle1" noWrap>
|
||||
<FormattedMessage
|
||||
id="grid_power"
|
||||
defaultMessage={
|
||||
dailyData ? 'Grid Power' : 'Grid Energy'
|
||||
}
|
||||
/>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
pt: 3
|
||||
}}
|
||||
></Box>
|
||||
</Box>
|
||||
{dailyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
dailyDataArray[chartState].chartOverview
|
||||
.gridPower,
|
||||
'daily',
|
||||
[],
|
||||
true
|
||||
),
|
||||
chart: {
|
||||
events: {
|
||||
beforeZoom: handleBeforeZoom
|
||||
}
|
||||
}
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...dailyDataArray[chartState].chartData.gridPower,
|
||||
color: '#ff3333'
|
||||
}
|
||||
]}
|
||||
type="line"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
{weeklyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
weeklyDataArray.chartOverview.gridPower,
|
||||
'weekly',
|
||||
weeklyDateList,
|
||||
true
|
||||
)
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...weeklyDataArray.chartData.gridImportPower,
|
||||
color: '#b30000'
|
||||
},
|
||||
series={[
|
||||
{
|
||||
...dailyDataArray[chartState].chartData
|
||||
.pvProduction,
|
||||
color: '#ff9900'
|
||||
}
|
||||
]}
|
||||
type="line"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
|
||||
{
|
||||
...weeklyDataArray.chartData.gridExportPower,
|
||||
color: '#ff3333'
|
||||
}
|
||||
]}
|
||||
type="bar"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
{weeklyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
weeklyDataArray.chartOverview.pvProduction,
|
||||
'weekly',
|
||||
weeklyDateList,
|
||||
true
|
||||
)
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...weeklyDataArray.chartData.pvProduction,
|
||||
color: '#ff9900'
|
||||
}
|
||||
]}
|
||||
type="bar"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
|
||||
{monthlyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
monthlyDataArray.chartOverview.gridPower,
|
||||
'monthly',
|
||||
monthlyDateList,
|
||||
true
|
||||
)
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...monthlyDataArray.chartData.gridImportPower,
|
||||
color: '#b30000'
|
||||
},
|
||||
{
|
||||
...monthlyDataArray.chartData.gridExportPower,
|
||||
color: '#ff3333'
|
||||
}
|
||||
]}
|
||||
type="bar"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</Grid>
|
||||
{monthlyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
monthlyDataArray.chartOverview.pvProduction,
|
||||
'monthly',
|
||||
monthlyDateList,
|
||||
true
|
||||
)
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...monthlyDataArray.chartData.pvProduction,
|
||||
color: '#ff9900'
|
||||
}
|
||||
]}
|
||||
type="bar"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</Grid>
|
||||
)}
|
||||
<Grid item md={6} xs={12}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginBottom: '30px'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
marginLeft: '20px'
|
||||
}}
|
||||
>
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box>
|
||||
<Typography variant="subtitle1" noWrap>
|
||||
<FormattedMessage
|
||||
id="grid_power"
|
||||
defaultMessage={
|
||||
dailyData ? 'Grid Power' : 'Grid Energy'
|
||||
}
|
||||
/>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
pt: 3
|
||||
}}
|
||||
></Box>
|
||||
</Box>
|
||||
{dailyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
dailyDataArray[chartState].chartOverview.gridPower,
|
||||
'daily',
|
||||
[],
|
||||
true
|
||||
),
|
||||
chart: {
|
||||
events: {
|
||||
beforeZoom: handleBeforeZoom
|
||||
}
|
||||
}
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...dailyDataArray[chartState].chartData.gridPower,
|
||||
color: '#ff3333'
|
||||
}
|
||||
]}
|
||||
type="line"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
{weeklyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
weeklyDataArray.chartOverview.gridPower,
|
||||
'weekly',
|
||||
weeklyDateList,
|
||||
true
|
||||
)
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...weeklyDataArray.chartData.gridImportPower,
|
||||
color: '#b30000'
|
||||
},
|
||||
|
||||
{
|
||||
...weeklyDataArray.chartData.gridExportPower,
|
||||
color: '#ff3333'
|
||||
}
|
||||
]}
|
||||
type="bar"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
|
||||
{monthlyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
monthlyDataArray.chartOverview.gridPower,
|
||||
'monthly',
|
||||
monthlyDateList,
|
||||
true
|
||||
)
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...monthlyDataArray.chartData.gridImportPower,
|
||||
color: '#b30000'
|
||||
},
|
||||
{
|
||||
...monthlyDataArray.chartData.gridExportPower,
|
||||
color: '#ff3333'
|
||||
}
|
||||
]}
|
||||
type="bar"
|
||||
height={400}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Container, Grid, Switch } from '@mui/material';
|
||||
import { Container, Grid, Switch, Typography } from '@mui/material';
|
||||
import TopologyColumn from './topologyColumn';
|
||||
import {
|
||||
getAmount,
|
||||
|
|
@ -41,16 +41,33 @@ function Topology(props: TopologyProps) {
|
|||
justifyContent: 'right'
|
||||
}}
|
||||
>
|
||||
<Switch
|
||||
edge="start"
|
||||
color="secondary"
|
||||
onChange={handleSwitch()}
|
||||
sx={{
|
||||
'& .MuiSwitch-thumb': {
|
||||
backgroundColor: 'orange'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<Typography sx={{ marginTop: '5px', marginRight: '20px' }}>
|
||||
Display Values
|
||||
</Typography>
|
||||
<Switch
|
||||
edge="start"
|
||||
color="secondary"
|
||||
onChange={handleSwitch()}
|
||||
sx={{
|
||||
'& .MuiSwitch-thumb': {
|
||||
backgroundColor: 'orange'
|
||||
},
|
||||
marginLeft: '20px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/*<Switch*/}
|
||||
{/* edge="start"*/}
|
||||
{/* color="secondary"*/}
|
||||
{/* onChange={handleSwitch()}*/}
|
||||
{/* sx={{*/}
|
||||
{/* '& .MuiSwitch-thumb': {*/}
|
||||
{/* backgroundColor: 'orange'*/}
|
||||
{/* }*/}
|
||||
{/* }}*/}
|
||||
{/*/>*/}
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const isInt = (value: number) => {
|
|||
return value % 1 === 0;
|
||||
};
|
||||
|
||||
function formatPower(value) {
|
||||
function formatPower(value, unit) {
|
||||
if (isNaN(value)) {
|
||||
return 'Invalid';
|
||||
}
|
||||
|
|
@ -47,7 +47,12 @@ function formatPower(value) {
|
|||
magnitude++;
|
||||
}
|
||||
|
||||
const roundedValue = value.toFixed(1);
|
||||
const roundedValue = Math.round(value);
|
||||
|
||||
//Filter all values less than 100 Watts
|
||||
if (magnitude === 0 && value < 100 && unit === 'W') {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return negative === false
|
||||
? `${roundedValue} ${prefixes[magnitude]}`
|
||||
|
|
@ -243,8 +248,12 @@ function TopologyBox(props: TopologyBoxProps) {
|
|||
{props.data.values.map((boxData, index) => {
|
||||
return (
|
||||
<Typography key={index}>
|
||||
{formatPower(boxData.value)}
|
||||
{boxData.unit}
|
||||
{formatPower(boxData.value, boxData.unit) === 0
|
||||
? null
|
||||
: formatPower(boxData.value, boxData.unit)}
|
||||
{formatPower(boxData.value, boxData.unit) === 0
|
||||
? null
|
||||
: boxData.unit}
|
||||
</Typography>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,12 @@ function formatPower(value) {
|
|||
magnitude++;
|
||||
}
|
||||
|
||||
const roundedValue = value.toFixed(1);
|
||||
const roundedValue = Math.round(value);
|
||||
|
||||
//Filter all values less than 100 Watts
|
||||
if (magnitude === 0 && value < 100) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return negative === false
|
||||
? `${roundedValue} ${prefixes[magnitude]}`
|
||||
|
|
@ -113,8 +118,12 @@ function TopologyFlow(props: TopologyFlowProps) {
|
|||
zIndex: 1
|
||||
}}
|
||||
>
|
||||
{formatPower(props.data.values[0].value)}
|
||||
{props.data.values[0].unit}
|
||||
{formatPower(props.data.values[0].value) === 0
|
||||
? null
|
||||
: formatPower(props.data.values[0].value)}
|
||||
{formatPower(props.data.values[0].value) === 0
|
||||
? null
|
||||
: props.data.values[0].unit}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {
|
|||
Grid,
|
||||
IconButton,
|
||||
Modal,
|
||||
Switch,
|
||||
Tab,
|
||||
Tabs,
|
||||
TextField,
|
||||
|
|
@ -22,6 +23,7 @@ import { InnovEnergyUser } from 'src/interfaces/UserTypes';
|
|||
import { TokenContext } from 'src/contexts/tokenContext';
|
||||
import { TabsContainerWrapper } from 'src/layouts/TabsContainerWrapper';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
|
||||
interface singleUserProps {
|
||||
current_user: InnovEnergyUser;
|
||||
|
|
@ -80,6 +82,14 @@ function User(props: singleUserProps) {
|
|||
[name]: value
|
||||
});
|
||||
};
|
||||
|
||||
const handleAdminChange = (event) => {
|
||||
setFormValues({
|
||||
...formValues,
|
||||
['hasWriteAccess']: event.target.checked
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
setLoading(true);
|
||||
setError(false);
|
||||
|
|
@ -94,8 +104,13 @@ function User(props: singleUserProps) {
|
|||
});
|
||||
|
||||
if (res) {
|
||||
setUpdated(true);
|
||||
props.fetchDataAgain();
|
||||
setLoading(false);
|
||||
setUpdated(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setUpdated(false);
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -278,6 +293,34 @@ function User(props: singleUserProps) {
|
|||
fullWidth
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<FormControlLabel
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Switch
|
||||
checked={
|
||||
formValues.hasWriteAccess ? true : false
|
||||
}
|
||||
color="primary"
|
||||
name="hasWriteAccess"
|
||||
onChange={handleAdminChange}
|
||||
sx={{
|
||||
marginLeft: '8px',
|
||||
marginTop: '2px'
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Typography sx={{ marginTop: '4px' }}>
|
||||
Admin
|
||||
</Typography>
|
||||
}
|
||||
sx={{
|
||||
marginLeft: '10px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ function Users() {
|
|||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ userSelect: 'none' }}>
|
||||
<AccessContextProvider>
|
||||
<Container maxWidth="xl" sx={{ marginTop: '20px' }}>
|
||||
<Grid item xs={12}>
|
||||
|
|
@ -19,7 +19,7 @@ function Users() {
|
|||
</Container>
|
||||
<Footer />
|
||||
</AccessContextProvider>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@ import {
|
|||
MenuItem,
|
||||
Modal,
|
||||
Select,
|
||||
Switch,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme
|
||||
} from '@mui/material';
|
||||
import Button from '@mui/material/Button';
|
||||
|
|
@ -17,10 +19,9 @@ import { Close as CloseIcon } from '@mui/icons-material';
|
|||
import { InnovEnergyUser } from 'src/interfaces/UserTypes';
|
||||
import axiosConfig from 'src/Resources/axiosConfig';
|
||||
import { TokenContext } from 'src/contexts/tokenContext';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import { I_Folder, I_Installation } from 'src/interfaces/InstallationTypes';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
|
||||
interface userFormProps {
|
||||
cancel: () => void;
|
||||
|
|
@ -385,16 +386,22 @@ function userForm(props: userFormProps) {
|
|||
|
||||
<div>
|
||||
<FormControlLabel
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Checkbox
|
||||
<Switch
|
||||
color="primary"
|
||||
onChange={handleAdminChange}
|
||||
sx={{
|
||||
marginLeft: '11px'
|
||||
marginLeft: '8px',
|
||||
marginTop: '2px'
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="Admin"
|
||||
sx={{ marginTop: 1 }}
|
||||
label={<Typography sx={{ marginTop: '6px' }}>Admin</Typography>}
|
||||
sx={{
|
||||
marginLeft: '10px',
|
||||
marginTop: '9px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,12 @@
|
|||
import {
|
||||
Box,
|
||||
Card,
|
||||
Typography,
|
||||
Container,
|
||||
Divider,
|
||||
Button,
|
||||
FormControl,
|
||||
Container,
|
||||
OutlinedInput,
|
||||
InputAdornment,
|
||||
styled
|
||||
styled,
|
||||
Typography
|
||||
} from '@mui/material';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import SearchTwoToneIcon from '@mui/icons-material/SearchTwoTone';
|
||||
|
||||
const MainContent = styled(Box)(
|
||||
({ theme }) => `
|
||||
|
|
@ -50,42 +45,14 @@ function Status404() {
|
|||
<Typography variant="h2" sx={{ my: 2 }}>
|
||||
The page you were looking for doesn't exist.
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h4"
|
||||
color="text.secondary"
|
||||
fontWeight="normal"
|
||||
sx={{ mb: 4 }}
|
||||
<Button
|
||||
href="/login"
|
||||
variant="outlined"
|
||||
sx={{ backgroundColor: 'white' }}
|
||||
>
|
||||
It's on us, we moved the content to a different page. The search
|
||||
below should help!
|
||||
</Typography>
|
||||
Go to homepage
|
||||
</Button>
|
||||
</Box>
|
||||
<Container maxWidth="sm">
|
||||
<Card sx={{ textAlign: 'center', mt: 3, p: 4 }}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<OutlinedInputWrapper
|
||||
type="text"
|
||||
placeholder="Search terms here..."
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<ButtonSearch variant="contained" size="small">
|
||||
Search
|
||||
</ButtonSearch>
|
||||
</InputAdornment>
|
||||
}
|
||||
startAdornment={
|
||||
<InputAdornment position="start">
|
||||
<SearchTwoToneIcon />
|
||||
</InputAdornment>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<Divider sx={{ my: 4 }}>OR</Divider>
|
||||
<Button href="/overview" variant="outlined">
|
||||
Go to homepage
|
||||
</Button>
|
||||
</Card>
|
||||
</Container>
|
||||
</Container>
|
||||
</MainContent>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export interface overviewInterface {
|
|||
soc: chartInfoInterface;
|
||||
temperature: chartInfoInterface;
|
||||
dcPower: chartInfoInterface;
|
||||
dcPowerWithoutHeating: chartInfoInterface;
|
||||
gridPower: chartInfoInterface;
|
||||
pvProduction: chartInfoInterface;
|
||||
dcBusVoltage: chartInfoInterface;
|
||||
|
|
@ -78,6 +79,7 @@ export const transformInputToDailyData = async (
|
|||
soc: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
temperature: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
dcPower: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
dcPowerWithoutHeating: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
gridPower: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
pvProduction: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
dcBusVoltage: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
|
|
@ -108,7 +110,7 @@ export const transformInputToDailyData = async (
|
|||
while (startUnixTime < endTimestamp) {
|
||||
timestampPromises.push(fetchData(startUnixTime, s3Credentials));
|
||||
|
||||
startUnixTime = UnixTime.fromTicks(startUnixTime.ticks + diff / 200);
|
||||
startUnixTime = UnixTime.fromTicks(startUnixTime.ticks + diff / 100);
|
||||
if (startUnixTime.ticks % 2 !== 0) {
|
||||
startUnixTime = UnixTime.fromTicks(startUnixTime.ticks + 1);
|
||||
}
|
||||
|
|
@ -280,7 +282,7 @@ export const transformInputToAggregatedData = async (
|
|||
maxsoc: { name: 'max SOC', data: [] },
|
||||
pvProduction: { name: 'Pv Energy', data: [] },
|
||||
dcChargingPower: { name: 'Charging Battery Energy', data: [] },
|
||||
heatingPower: { name: 'Heating Power', data: [] },
|
||||
heatingPower: { name: 'Heating Energy', data: [] },
|
||||
dcDischargingPower: { name: 'Discharging Battery Energy', data: [] },
|
||||
gridImportPower: { name: 'Grid Import Energy', data: [] },
|
||||
gridExportPower: { name: 'Grid Export Energy', data: [] }
|
||||
|
|
@ -290,6 +292,7 @@ export const transformInputToAggregatedData = async (
|
|||
soc: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
temperature: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
dcPower: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
dcPowerWithoutHeating: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
gridPower: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
pvProduction: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
dcBusVoltage: { magnitude: 0, unit: '', min: 0, max: 0 },
|
||||
|
|
@ -329,6 +332,9 @@ export const transformInputToAggregatedData = async (
|
|||
dateList.push(currentDay.format('DD-MM'));
|
||||
pathsToSearch.forEach((path) => {
|
||||
if (result[path]) {
|
||||
if (path === '/GridExportPower') {
|
||||
result[path].value = -result[path].value;
|
||||
}
|
||||
if (result[path].value < overviewData[path].min) {
|
||||
overviewData[path].min = result[path].value;
|
||||
}
|
||||
|
|
@ -336,9 +342,9 @@ export const transformInputToAggregatedData = async (
|
|||
if (result[path].value > overviewData[path].max) {
|
||||
overviewData[path].max = result[path].value;
|
||||
}
|
||||
if (path === '/GridExportPower' && result[path].value < 0.1) {
|
||||
result[path].value = 0.3;
|
||||
}
|
||||
// if (path === '/GridExportPower' && Math.abs(result[path].value) < 0.1) {
|
||||
// result[path].value = -0.3;
|
||||
// }
|
||||
data[path].push(result[path].value as number);
|
||||
}
|
||||
});
|
||||
|
|
@ -395,6 +401,16 @@ export const transformInputToAggregatedData = async (
|
|||
path = '/HeatingPower';
|
||||
chartAggregatedData.heatingPower.data = data[path];
|
||||
|
||||
chartOverview.dcPowerWithoutHeating = {
|
||||
magnitude: Math.max(
|
||||
overviewData['/ChargingBatteryPower'].magnitude,
|
||||
overviewData['/DischargingBatteryPower'].magnitude
|
||||
),
|
||||
unit: '(kWh)',
|
||||
min: overviewData['/DischargingBatteryPower'].min,
|
||||
max: overviewData['/ChargingBatteryPower'].max
|
||||
};
|
||||
|
||||
chartOverview.dcPower = {
|
||||
magnitude: Math.max(
|
||||
overviewData['/ChargingBatteryPower'].magnitude,
|
||||
|
|
@ -420,12 +436,8 @@ export const transformInputToAggregatedData = async (
|
|||
overviewData['/GridExportPower'].magnitude
|
||||
),
|
||||
unit: '(kWh)',
|
||||
min:
|
||||
overviewData['/GridImportPower'].min +
|
||||
overviewData['/GridExportPower'].min,
|
||||
max:
|
||||
overviewData['/GridImportPower'].max +
|
||||
overviewData['/GridExportPower'].max
|
||||
min: overviewData['/GridExportPower'].min,
|
||||
max: overviewData['/GridImportPower'].max
|
||||
};
|
||||
|
||||
chartOverview.overview = {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { styled } from '@mui/material/styles';
|
|||
import ExpandMoreTwoToneIcon from '@mui/icons-material/ExpandMoreTwoTone';
|
||||
import { ThemeContext } from '../../../../theme/ThemeProvider';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import '../../../../App.css';
|
||||
|
||||
interface HeaderButtonsProps {
|
||||
language: string;
|
||||
|
|
@ -106,7 +107,7 @@ function HeaderMenu(props: HeaderButtonsProps) {
|
|||
const isMobile = window.innerWidth <= 1280;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ userSelect: 'none' }}>
|
||||
<ListWrapper
|
||||
sx={{
|
||||
color: isMobile ? 'white' : ''
|
||||
|
|
@ -132,18 +133,22 @@ function HeaderMenu(props: HeaderButtonsProps) {
|
|||
</ListItem>
|
||||
</List>
|
||||
</ListWrapper>
|
||||
<Menu anchorEl={ref.current} onClose={handleClose} open={isOpen}>
|
||||
<MenuItem value="en" onClick={() => handleLanguageSelect('en')}>
|
||||
English
|
||||
</MenuItem>
|
||||
<MenuItem value="de" onClick={() => handleLanguageSelect('de')}>
|
||||
German
|
||||
</MenuItem>
|
||||
<MenuItem value="fr" onClick={() => handleLanguageSelect('fr')}>
|
||||
French
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
<div
|
||||
style={{ userSelect: 'none', pointerEvents: 'none', cursor: 'default' }}
|
||||
>
|
||||
<Menu anchorEl={ref.current} onClose={handleClose} open={isOpen}>
|
||||
<MenuItem value="en" onClick={() => handleLanguageSelect('en')}>
|
||||
English
|
||||
</MenuItem>
|
||||
<MenuItem value="de" onClick={() => handleLanguageSelect('de')}>
|
||||
German
|
||||
</MenuItem>
|
||||
<MenuItem value="fr" onClick={() => handleLanguageSelect('fr')}>
|
||||
French
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import { TokenContext } from 'src/contexts/tokenContext';
|
|||
import { useNavigate } from 'react-router-dom';
|
||||
import routes from 'src/Resources/routes.json';
|
||||
import { WebSocketContext } from '../../../../contexts/WebSocketContextProvider';
|
||||
import '../../../../App.css';
|
||||
|
||||
const UserBoxButton = styled(Button)(
|
||||
({ theme }) => `
|
||||
|
|
@ -86,8 +87,13 @@ function HeaderUserbox() {
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<UserBoxButton color="secondary" ref={ref} onClick={handleOpen}>
|
||||
<div style={{ userSelect: 'none' }}>
|
||||
<UserBoxButton
|
||||
color="secondary"
|
||||
ref={ref}
|
||||
onClick={handleOpen}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<Hidden mdDown>
|
||||
<UserBoxText>
|
||||
<UserBoxLabel variant="body1">{currentUser?.name}</UserBoxLabel>
|
||||
|
|
@ -113,14 +119,16 @@ function HeaderUserbox() {
|
|||
horizontal: 'right'
|
||||
}}
|
||||
>
|
||||
<MenuUserBox sx={{ minWidth: 210 }} display="flex">
|
||||
<UserBoxText>
|
||||
<UserBoxLabel variant="body1">{currentUser?.name}</UserBoxLabel>
|
||||
<UserBoxDescription variant="body2">
|
||||
{currentUser?.email}
|
||||
</UserBoxDescription>
|
||||
</UserBoxText>
|
||||
</MenuUserBox>
|
||||
<div style={{ userSelect: 'none', cursor: 'none' }}>
|
||||
<MenuUserBox sx={{ minWidth: 210 }} display="flex">
|
||||
<UserBoxText>
|
||||
<UserBoxLabel variant="body1">{currentUser?.name}</UserBoxLabel>
|
||||
<UserBoxDescription variant="body2">
|
||||
{currentUser?.email}
|
||||
</UserBoxDescription>
|
||||
</UserBoxText>
|
||||
</MenuUserBox>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
<Box sx={{ m: 1 }}>
|
||||
|
|
@ -130,7 +138,7 @@ function HeaderUserbox() {
|
|||
</Button>
|
||||
</Box>
|
||||
</Popover>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,10 +43,12 @@ const SidebarLayout = (props: SidebarLayoutProps) => {
|
|||
}
|
||||
}}
|
||||
>
|
||||
<Header
|
||||
language={props.language}
|
||||
onSelectLanguage={props.onSelectLanguage}
|
||||
/>
|
||||
<div style={{ userSelect: 'none' }}>
|
||||
<Header
|
||||
language={props.language}
|
||||
onSelectLanguage={props.onSelectLanguage}
|
||||
/>
|
||||
</div>
|
||||
<Sidebar />
|
||||
<Box
|
||||
sx={{
|
||||
|
|
|
|||
Loading…
Reference in New Issue