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

Changes to the frontend: Unable to communicate modal, utc bugs fixed in configuration tab

This commit is contained in:
Noe 2024-04-30 11:41:45 +02:00
parent 453768c709
commit 6acb5e134b
18 changed files with 502 additions and 362 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
typescript/frontend-marios2/src/content/dashboards/BatteryView/BatteryView.tsx
View File

@ -31,6 +31,7 @@ interface BatteryViewProps {
values: TopologyValues; values: TopologyValues;
s3Credentials: I_S3Credentials; s3Credentials: I_S3Credentials;
installationId: number; installationId: number;
productNum: number;
} }
function BatteryView(props: BatteryViewProps) { function BatteryView(props: BatteryViewProps) {
@ -157,6 +158,7 @@ function BatteryView(props: BatteryViewProps) {
s3Credentials={props.s3Credentials} s3Credentials={props.s3Credentials}
batteryData={findBatteryData(battery.BatteryId)} batteryData={findBatteryData(battery.BatteryId)}
installationId={props.installationId} installationId={props.installationId}
productNum={props.productNum}
></DetailedBatteryView> ></DetailedBatteryView>
} }
/> />
@ -272,72 +274,83 @@ function BatteryView(props: BatteryViewProps) {
battery.AverageTemperature.unit} battery.AverageTemperature.unit}
</TableCell> </TableCell>
<TableCell {props.productNum === 0 && (
style={{ <>
width: '20%', <TableCell
textAlign: 'center', style={{
padding: '8px', width: '20%',
fontWeight: textAlign: 'center',
battery.Warnings.value !== '' ? 'bold' : 'inherit', padding: '8px',
backgroundColor: fontWeight:
battery.Warnings.value === '' ? 'inherit' : '#ff9900', battery.Warnings.value !== ''
color: ? 'bold'
battery.Warnings.value != '' ? 'black' : 'inherit' : 'inherit',
}} backgroundColor:
> battery.Warnings.value === ''
{battery.Warnings.value === '' ? ( ? 'inherit'
'None' : '#ff9900',
) : battery.Warnings.value.toString().split('-').length > color:
1 ? ( battery.Warnings.value != '' ? 'black' : 'inherit'
<Link }}
style={{ color: 'black' }}
to={
currentLocation.pathname.substring(
0,
currentLocation.pathname.lastIndexOf('/') + 1
) +
routes.log +
'?open=warning'
}
> >
Multiple Warnings {battery.Warnings.value === '' ? (
</Link> 'None'
) : ( ) : battery.Warnings.value.toString().split('-')
battery.Warnings.value .length > 1 ? (
)} <Link
</TableCell> style={{ color: 'black' }}
<TableCell to={
sx={{ currentLocation.pathname.substring(
width: '20%', 0,
textAlign: 'center', currentLocation.pathname.lastIndexOf('/') + 1
fontWeight: ) +
battery.Alarms.value !== '' ? 'bold' : 'inherit', routes.log +
backgroundColor: '?open=warning'
battery.Alarms.value === '' ? 'inherit' : '#FF033E', }
color: battery.Alarms.value != '' ? 'black' : 'inherit' >
}} Multiple Warnings
> </Link>
{battery.Alarms.value === '' ? ( ) : (
'None' battery.Warnings.value
) : battery.Alarms.value.toString().split('-').length > )}
1 ? ( </TableCell>
<Link <TableCell
style={{ color: 'black' }} sx={{
to={ width: '20%',
currentLocation.pathname.substring( textAlign: 'center',
0, fontWeight:
currentLocation.pathname.lastIndexOf('/') + 1 battery.Alarms.value !== '' ? 'bold' : 'inherit',
) + backgroundColor:
routes.log + battery.Alarms.value === ''
'?open=error' ? 'inherit'
} : '#FF033E',
color:
battery.Alarms.value != '' ? 'black' : 'inherit'
}}
> >
Multiple Alarms {battery.Alarms.value === '' ? (
</Link> 'None'
) : ( ) : battery.Alarms.value.toString().split('-')
battery.Alarms.value .length > 1 ? (
)} <Link
</TableCell> style={{ color: 'black' }}
to={
currentLocation.pathname.substring(
0,
currentLocation.pathname.lastIndexOf('/') + 1
) +
routes.log +
'?open=error'
}
>
Multiple Alarms
</Link>
) : (
battery.Alarms.value
)}
</TableCell>
</>
)}
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>

484
typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx
View File

@ -25,6 +25,7 @@ interface DetailedBatteryViewProps {
s3Credentials: I_S3Credentials; s3Credentials: I_S3Credentials;
batteryData: Battery; batteryData: Battery;
installationId: number; installationId: number;
productNum: number;
} }
function DetailedBatteryView(props: DetailedBatteryViewProps) { function DetailedBatteryView(props: DetailedBatteryViewProps) {
@ -273,22 +274,24 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
<ArrowBackIcon /> <ArrowBackIcon />
</IconButton> </IconButton>
<Button {props.productNum === 0 && (
variant="contained" <Button
onClick={handleUpdateFirmware} variant="contained"
sx={{ onClick={handleUpdateFirmware}
marginTop: '20px', sx={{
marginLeft: '20px', marginTop: '20px',
backgroundColor: '#ffc04d', marginLeft: '20px',
color: '#000000', backgroundColor: '#ffc04d',
'&:hover': { bgcolor: '#f7b34d' } color: '#000000',
}} '&:hover': { bgcolor: '#f7b34d' }
> }}
<FormattedMessage >
id="update_firmware" <FormattedMessage
defaultMessage="Update Firmware" id="update_firmware"
/> defaultMessage="Update Firmware"
</Button> />
</Button>
)}
</Grid> </Grid>
</Grid> </Grid>
<Grid container> <Grid container>
@ -310,7 +313,8 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
style={{ style={{
...batteryStringStyle, ...batteryStringStyle,
backgroundColor: backgroundColor:
props.batteryData.String1Active.value == 'True' props.batteryData.String1Active.value == 'True' ||
props.batteryData.String4Active.value == 0
? '#32CD32' ? '#32CD32'
: '#FF033E' : '#FF033E'
}} }}
@ -319,7 +323,8 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
style={{ style={{
...batteryStringStyle, ...batteryStringStyle,
backgroundColor: backgroundColor:
props.batteryData.String2Active.value == 'True' props.batteryData.String2Active.value == 'True' ||
props.batteryData.String4Active.value == 0
? '#32CD32' ? '#32CD32'
: '#FF033E' : '#FF033E'
}} }}
@ -328,7 +333,8 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
style={{ style={{
...batteryStringStyle, ...batteryStringStyle,
backgroundColor: backgroundColor:
props.batteryData.String3Active.value == 'True' props.batteryData.String3Active.value == 'True' ||
props.batteryData.String4Active.value == 0
? '#32CD32' ? '#32CD32'
: '#FF033E' : '#FF033E'
}} }}
@ -337,7 +343,8 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
style={{ style={{
...batteryStringStyle, ...batteryStringStyle,
backgroundColor: backgroundColor:
props.batteryData.String4Active.value == 'True' props.batteryData.String4Active.value == 'True' ||
props.batteryData.String4Active.value == 0
? '#32CD32' ? '#32CD32'
: '#FF033E' : '#FF033E'
}} }}
@ -346,7 +353,8 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
style={{ style={{
...batteryStringStyle, ...batteryStringStyle,
backgroundColor: backgroundColor:
props.batteryData.String5Active.value == 'True' props.batteryData.String5Active.value == 'True' ||
props.batteryData.String4Active.value == 0
? '#32CD32' ? '#32CD32'
: '#FF033E' : '#FF033E'
}} }}
@ -514,6 +522,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
props.batteryData.Power.unit} props.batteryData.Power.unit}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell <TableCell
component="th" component="th"
@ -609,196 +618,200 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
</Card> </Card>
</Grid> </Grid>
{/*----------------------------------------------------------------------------------------------------------------------------------*/} {/*----------------------------------------------------------------------------------------------------------------------------------*/}
<Grid item md={3} xs={3}> {props.productNum === 0 && (
<Card <>
sx={{ <Grid item md={3} xs={3}>
overflow: 'visible', <Card
marginTop: '30px', sx={{
marginLeft: '20px', overflow: 'visible',
display: 'flex', marginTop: '30px',
flexDirection: 'column', marginLeft: '20px',
alignItems: 'center', display: 'flex',
border: '2px solid #ccc', flexDirection: 'column',
borderRadius: '12px' alignItems: 'center',
}} border: '2px solid #ccc',
> borderRadius: '12px'
<Typography }}
variant="h6" >
component="div" <Typography
sx={{ variant="h6"
marginTop: '10px', component="div"
borderBottom: '1px solid #ccc', sx={{
fontWeight: 'bold' marginTop: '10px',
}} borderBottom: '1px solid #ccc',
> fontWeight: 'bold'
Temperature }}
</Typography> >
Temperature
</Typography>
<TableContainer <TableContainer
component={Paper} component={Paper}
sx={{ marginTop: '20px', width: '100%' }} sx={{ marginTop: '20px', width: '100%' }}
> >
<Table size="medium" aria-label="a dense table"> <Table size="medium" aria-label="a dense table">
<TableBody> <TableBody>
<TableRow> <TableRow>
<TableCell <TableCell
component="th" component="th"
scope="row" scope="row"
align="left" align="left"
sx={{ fontWeight: 'bold' }} sx={{ fontWeight: 'bold' }}
> >
Heating Heating
</TableCell> </TableCell>
<TableCell <TableCell
align="right" align="right"
sx={{ sx={{
width: '6ch', width: '6ch',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
paddingRight: '12px' paddingRight: '12px'
}} }}
> >
{props.batteryData.HeatingTemperature.value + {props.batteryData.HeatingTemperature.value +
' ' + ' ' +
props.batteryData.HeatingTemperature.unit} props.batteryData.HeatingTemperature.unit}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell <TableCell
component="th" component="th"
scope="row" scope="row"
align="left" align="left"
sx={{ fontWeight: 'bold' }} sx={{ fontWeight: 'bold' }}
> >
Board Temperature Board Temperature
</TableCell> </TableCell>
<TableCell <TableCell
align="right" align="right"
sx={{ sx={{
width: '6ch', width: '6ch',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
paddingRight: '12px' paddingRight: '12px'
}} }}
> >
{props.batteryData.BoardTemperature.value + {props.batteryData.BoardTemperature.value +
' ' + ' ' +
props.batteryData.BoardTemperature.unit} props.batteryData.BoardTemperature.unit}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell <TableCell
component="th" component="th"
scope="row" scope="row"
align="left" align="left"
sx={{ fontWeight: 'bold' }} sx={{ fontWeight: 'bold' }}
> >
Center Cells Temperature Center Cells Temperature
</TableCell> </TableCell>
<TableCell <TableCell
align="right" align="right"
sx={{ sx={{
width: '6ch', width: '6ch',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
paddingRight: '12px' paddingRight: '12px'
}} }}
> >
{props.batteryData.AverageTemperature.value + {props.batteryData.AverageTemperature.value +
' ' + ' ' +
props.batteryData.AverageTemperature.unit} props.batteryData.AverageTemperature.unit}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell <TableCell
component="th" component="th"
scope="row" scope="row"
align="left" align="left"
sx={{ fontWeight: 'bold' }} sx={{ fontWeight: 'bold' }}
> >
Left Cells Temperature Left Cells Temperature
</TableCell> </TableCell>
<TableCell <TableCell
align="right" align="right"
sx={{ sx={{
width: '6ch', width: '6ch',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
paddingRight: '12px' paddingRight: '12px'
}} }}
> >
{props.batteryData.LeftCellsTemperature.value + {props.batteryData.LeftCellsTemperature.value +
' ' + ' ' +
props.batteryData.LeftCellsTemperature.unit} props.batteryData.LeftCellsTemperature.unit}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell <TableCell
component="th" component="th"
scope="row" scope="row"
align="left" align="left"
sx={{ fontWeight: 'bold' }} sx={{ fontWeight: 'bold' }}
> >
Right Cells Temperature Right Cells Temperature
</TableCell> </TableCell>
<TableCell <TableCell
align="right" align="right"
sx={{ sx={{
width: '6ch', width: '6ch',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
paddingRight: '12px' paddingRight: '12px'
}} }}
> >
{props.batteryData.RightCellsTemperature.value + {props.batteryData.RightCellsTemperature.value +
' ' + ' ' +
props.batteryData.RightCellsTemperature.unit} props.batteryData.RightCellsTemperature.unit}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell <TableCell
component="th" component="th"
scope="row" scope="row"
align="left" align="left"
sx={{ fontWeight: 'bold' }} sx={{ fontWeight: 'bold' }}
> >
Average Temperature Average Temperature
</TableCell> </TableCell>
<TableCell <TableCell
align="right" align="right"
sx={{ sx={{
width: '6ch', width: '6ch',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
paddingRight: '12px' paddingRight: '12px'
}} }}
> >
{props.batteryData.AverageTemperature.value + {props.batteryData.AverageTemperature.value +
' ' + ' ' +
props.batteryData.AverageTemperature.unit} props.batteryData.AverageTemperature.unit}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell <TableCell
component="th" component="th"
scope="row" scope="row"
align="left" align="left"
sx={{ fontWeight: 'bold' }} sx={{ fontWeight: 'bold' }}
> >
State State
</TableCell> </TableCell>
<TableCell <TableCell
align="right" align="right"
sx={{ sx={{
width: '6ch', width: '6ch',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
paddingRight: '12px' paddingRight: '12px'
}} }}
> >
{props.batteryData.StateTemperature.value + {props.batteryData.StateTemperature.value +
' ' + ' ' +
props.batteryData.StateTemperature.unit} props.batteryData.StateTemperature.unit}
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
</Card> </Card>
</Grid> </Grid>
</>
)}
{/*----------------------------------------------------------------------------------------------------------------------------------*/} {/*----------------------------------------------------------------------------------------------------------------------------------*/}
<Grid item md={3} xs={3}> <Grid item md={3} xs={3}>
@ -807,6 +820,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
overflow: 'visible', overflow: 'visible',
marginTop: '30px', marginTop: '30px',
marginLeft: '20px', marginLeft: '20px',
marginBottom: '20px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
@ -992,6 +1006,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
</Grid> </Grid>
{/*----------------------------------------------------------------------------------------------------------------------------------*/} {/*----------------------------------------------------------------------------------------------------------------------------------*/}
<Grid item md={3} xs={3}> <Grid item md={3} xs={3}>
<Card <Card
sx={{ sx={{
@ -1044,6 +1059,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
props.batteryData.Eoc.unit} props.batteryData.Eoc.unit}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell <TableCell
component="th" component="th"
@ -1066,6 +1082,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
props.batteryData.SerialNumber.unit} props.batteryData.SerialNumber.unit}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell <TableCell
component="th" component="th"
@ -1110,28 +1127,30 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
props.batteryData.TimeSinceTOC.unit} props.batteryData.TimeSinceTOC.unit}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> {props.productNum === 0 && (
<TableCell <TableRow>
component="th" <TableCell
scope="row" component="th"
align="left" scope="row"
sx={{ fontWeight: 'bold' }} align="left"
> sx={{ fontWeight: 'bold' }}
Calibration Charge Requested >
</TableCell> Calibration Charge Requested
<TableCell </TableCell>
align="right" <TableCell
sx={{ align="right"
width: '6ch', sx={{
whiteSpace: 'nowrap', width: '6ch',
paddingRight: '12px' whiteSpace: 'nowrap',
}} paddingRight: '12px'
> }}
{props.batteryData.CalibrationChargeRequested.value + >
' ' + {props.batteryData.CalibrationChargeRequested.value +
props.batteryData.CalibrationChargeRequested.unit} ' ' +
</TableCell> props.batteryData.CalibrationChargeRequested.unit}
</TableRow> </TableCell>
</TableRow>
)}
<TableRow> <TableRow>
<TableCell <TableCell
component="th" component="th"
@ -1181,6 +1200,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
</TableContainer> </TableContainer>
</Card> </Card>
</Grid> </Grid>
{/*----------------------------------------------------------------------------------------------------------------------------------*/} {/*----------------------------------------------------------------------------------------------------------------------------------*/}
{/*<Grid item md={1.5} xs={1.5}>*/} {/*<Grid item md={1.5} xs={1.5}>*/}

42
typescript/frontend-marios2/src/content/dashboards/Configuration/Configuration.tsx
View File

@ -43,7 +43,7 @@ function Configuration(props: ConfigurationProps) {
const CalibrationChargeOptions = [ const CalibrationChargeOptions = [
'Repetitive Calibration', 'Repetitive Calibration',
'Additional Calibration', 'Additional Calibration',
'Force Calibration Now' 'Force Permanent Calibration Now'
]; ];
const CalibrationChargeOptionsController = [ const CalibrationChargeOptionsController = [
@ -93,13 +93,11 @@ function Configuration(props: ConfigurationProps) {
CalibrationChargeOptionsController.indexOf( CalibrationChargeOptionsController.indexOf(
props.values.calibrationChargeState[0].value.toString() props.values.calibrationChargeState[0].value.toString()
) == 0 ) == 0
? dayjs ? dayjs(props.values.repetitiveCalibrationChargeDate[0].value)
.utc(props.values.repetitiveCalibrationChargeDate[0].value) // .add(localOffset, 'minute')
.add(localOffset, 'minute')
.toDate() .toDate()
: dayjs : dayjs(props.values.additionalCalibrationChargeDate[0].value)
.utc(props.values.additionalCalibrationChargeDate[0].value) // .add(localOffset, 'minute')
.add(localOffset, 'minute')
.toDate() .toDate()
}); });
@ -124,14 +122,19 @@ function Configuration(props: ConfigurationProps) {
setErrorDateModalOpen(true); setErrorDateModalOpen(true);
return; return;
} else { } else {
//console.log('asked for', dayjs(formValues.calibrationChargeDate)); // console.log('asked for', dayjs(formValues.calibrationChargeDate));
const configurationToSend: ConfigurationValues = { const configurationToSend: ConfigurationValues = {
minimumSoC: formValues.minimumSoC, minimumSoC: formValues.minimumSoC,
gridSetPoint: formValues.gridSetPoint, gridSetPoint: formValues.gridSetPoint,
CalibrationChargeState: formValues.CalibrationChargeState, CalibrationChargeState: formValues.CalibrationChargeState,
calibrationChargeDate: dayjs(formValues.calibrationChargeDate).toDate() calibrationChargeDate: dayjs
.utc(formValues.calibrationChargeDate)
.add(localOffset, 'minute')
.toDate()
}; };
// console.log('will send ', dayjs(formValues.calibrationChargeDate));
setLoading(true); setLoading(true);
const res = await axiosConfig const res = await axiosConfig
.post( .post(
@ -157,9 +160,11 @@ function Configuration(props: ConfigurationProps) {
}; };
const handleConfirm = (newDate) => { const handleConfirm = (newDate) => {
//console.log('non adapted day is ', newDate);
//console.log('adapted day is ', dayjs.utc(newDate).toDate());
setFormValues({ setFormValues({
...formValues, ...formValues,
['calibrationChargeDate']: dayjs.utc(newDate).toDate() ['calibrationChargeDate']: dayjs(newDate).toDate()
}); });
}; };
@ -170,6 +175,7 @@ function Configuration(props: ConfigurationProps) {
if (difference < 0) { if (difference < 0) {
difference += 7; difference += 7;
} }
const adjustedDate = currentDate.add(difference, 'day'); const adjustedDate = currentDate.add(difference, 'day');
setFormValues({ setFormValues({
...formValues, ...formValues,
@ -185,13 +191,11 @@ function Configuration(props: ConfigurationProps) {
), ),
['calibrationChargeDate']: ['calibrationChargeDate']:
CalibrationChargeOptions.indexOf(event.target.value) == 0 CalibrationChargeOptions.indexOf(event.target.value) == 0
? dayjs ? dayjs(props.values.repetitiveCalibrationChargeDate[0].value)
.utc(props.values.repetitiveCalibrationChargeDate[0].value) // .add(localOffset, 'minute')
.add(localOffset, 'minute')
.toDate() .toDate()
: dayjs : dayjs(props.values.additionalCalibrationChargeDate[0].value)
.utc(props.values.additionalCalibrationChargeDate[0].value) // .add(localOffset, 'minute')
.add(localOffset, 'minute')
.toDate() .toDate()
}); });
}; };
@ -349,7 +353,7 @@ function Configuration(props: ConfigurationProps) {
format="DD/MM/YYYY HH:mm" format="DD/MM/YYYY HH:mm"
ampm={false} ampm={false}
label="Select Next Calibration Charge Date" label="Select Next Calibration Charge Date"
value={dayjs.utc(formValues.calibrationChargeDate)} value={dayjs(formValues.calibrationChargeDate)}
onChange={handleConfirm} onChange={handleConfirm}
sx={{ sx={{
marginTop: 2 marginTop: 2
@ -397,8 +401,8 @@ function Configuration(props: ConfigurationProps) {
<TimePicker <TimePicker
ampm={false} ampm={false}
label="Calibration Charge Hour" label="Calibration Charge Hour"
value={dayjs.utc(formValues.calibrationChargeDate)} value={dayjs(formValues.calibrationChargeDate)}
onChange={handleConfirm} onChange={(newTime) => handleConfirm(dayjs(newTime))}
/> />
</LocalizationProvider> </LocalizationProvider>
</div> </div>

2
typescript/frontend-marios2/src/content/dashboards/Information/Information.tsx
View File

@ -307,7 +307,7 @@ function Information(props: InformationProps) {
label="S3 Bucket Name" label="S3 Bucket Name"
name="s3writesecretkey" name="s3writesecretkey"
value={ value={
formValues.id + formValues.s3BucketId +
'-3e5b3069-214a-43ee-8d85-57d72000c19d' '-3e5b3069-214a-43ee-8d85-57d72000c19d'
} }
variant="outlined" variant="outlined"

7
typescript/frontend-marios2/src/content/dashboards/Information/InformationSalidomo.tsx
View File

@ -37,7 +37,7 @@ function InformationSalidomo(props: InformationSalidomoProps) {
const { currentUser } = context; const { currentUser } = context;
const theme = useTheme(); const theme = useTheme();
const [formValues, setFormValues] = useState(props.values); const [formValues, setFormValues] = useState(props.values);
const requiredFields = ['name', 'region', 'location', 'country']; const requiredFields = ['installationName', 'region', 'location', 'country'];
const [openModalDeleteInstallation, setOpenModalDeleteInstallation] = const [openModalDeleteInstallation, setOpenModalDeleteInstallation] =
useState(false); useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
@ -194,7 +194,7 @@ function InformationSalidomo(props: InformationSalidomoProps) {
/> />
} }
name="installationName" name="installationName"
value={formValues.name} value={formValues.installationName}
onChange={handleChange} onChange={handleChange}
variant="outlined" variant="outlined"
fullWidth fullWidth
@ -280,7 +280,8 @@ function InformationSalidomo(props: InformationSalidomoProps) {
label="S3 Bucket Name" label="S3 Bucket Name"
name="s3writesecretkey" name="s3writesecretkey"
value={ value={
formValues.id + '-c0436b6a-d276-4cd8-9c44-1eae86cf5d0e' formValues.s3BucketId +
'-c0436b6a-d276-4cd8-9c44-1eae86cf5d0e'
} }
variant="outlined" variant="outlined"
fullWidth fullWidth

12
typescript/frontend-marios2/src/content/dashboards/Installations/FlatInstallationView.tsx
View File

@ -102,11 +102,11 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => {
<TableBody> <TableBody>
{props.installations.map((installation) => { {props.installations.map((installation) => {
const isInstallationSelected = const isInstallationSelected =
installation.id === selectedInstallation; installation.s3BucketId === selectedInstallation;
const status = getStatus(installation.id); const status = getStatus(installation.id);
const rowStyles = const rowStyles =
isRowHovered === installation.id isRowHovered === installation.s3BucketId
? { ? {
cursor: 'pointer', cursor: 'pointer',
backgroundColor: theme.colors.primary.lighter backgroundColor: theme.colors.primary.lighter
@ -116,13 +116,15 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => {
return ( return (
<TableRow <TableRow
hover hover
key={installation.id} key={installation.s3BucketId}
selected={isInstallationSelected} selected={isInstallationSelected}
style={rowStyles} style={rowStyles}
onClick={() => onClick={() =>
handleSelectOneInstallation(installation.id) handleSelectOneInstallation(installation.s3BucketId)
}
onMouseEnter={() =>
handleRowMouseEnter(installation.s3BucketId)
} }
onMouseEnter={() => handleRowMouseEnter(installation.id)}
onMouseLeave={() => handleRowMouseLeave()} onMouseLeave={() => handleRowMouseLeave()}
> >
<TableCell> <TableCell>

70
typescript/frontend-marios2/src/content/dashboards/Installations/Installation.tsx
View File

@ -1,5 +1,11 @@
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { Card, CircularProgress, Grid, Typography } from '@mui/material'; import {
Card,
CircularProgress,
Container,
Grid,
Typography
} from '@mui/material';
import { I_Installation } from 'src/interfaces/InstallationTypes'; import { I_Installation } from 'src/interfaces/InstallationTypes';
import { UserContext } from 'src/contexts/userContext'; import { UserContext } from 'src/contexts/userContext';
import AccessContextProvider from 'src/contexts/AccessContextProvider'; import AccessContextProvider from 'src/contexts/AccessContextProvider';
@ -39,6 +45,14 @@ function Installation(props: singleInstallationProps) {
const [currentTab, setCurrentTab] = useState<string>(undefined); const [currentTab, setCurrentTab] = useState<string>(undefined);
const [values, setValues] = useState<TopologyValues | null>(null); const [values, setValues] = useState<TopologyValues | null>(null);
const status = getStatus(props.current_installation.id); const status = getStatus(props.current_installation.id);
const [
failedToCommunicateWithInstallation,
setFailedToCommunicateWithInstallation
] = useState(0);
const [
openModalUnableToCommunicateWIthInstallation,
setOpenModalUnableToCommunicateWIthInstallation
] = useState(false);
if (props.current_installation == undefined) { if (props.current_installation == undefined) {
return null; return null;
@ -48,14 +62,15 @@ function Installation(props: singleInstallationProps) {
s3Region: props.current_installation.s3Region, s3Region: props.current_installation.s3Region,
s3Provider: props.current_installation.s3Provider, s3Provider: props.current_installation.s3Provider,
s3Key: props.current_installation.s3Key, s3Key: props.current_installation.s3Key,
s3Secret: props.current_installation.s3Secret s3Secret: props.current_installation.s3Secret,
s3BucketId: props.current_installation.s3BucketId
}; };
const s3Bucket = const s3Bucket =
props.current_installation.product === 0 props.current_installation.product === 0
? props.current_installation.id.toString() + ? props.current_installation.s3BucketId.toString() +
'-3e5b3069-214a-43ee-8d85-57d72000c19d' '-3e5b3069-214a-43ee-8d85-57d72000c19d'
: props.current_installation.id.toString() + : props.current_installation.s3BucketId.toString() +
'-c0436b6a-d276-4cd8-9c44-1eae86cf5d0e'; '-c0436b6a-d276-4cd8-9c44-1eae86cf5d0e';
const s3Credentials = { s3Bucket, ...S3data }; const s3Credentials = { s3Bucket, ...S3data };
@ -67,6 +82,8 @@ function Installation(props: singleInstallationProps) {
const res = await fetchData(now, s3Credentials); const res = await fetchData(now, s3Credentials);
if (res != FetchResult.notAvailable && res != FetchResult.tryLater) { if (res != FetchResult.notAvailable && res != FetchResult.tryLater) {
setFailedToCommunicateWithInstallation(0);
setOpenModalUnableToCommunicateWIthInstallation(false);
setValues( setValues(
extractValues({ extractValues({
time: now, time: now,
@ -74,6 +91,13 @@ function Installation(props: singleInstallationProps) {
}) })
); );
return true; return true;
} else {
setFailedToCommunicateWithInstallation((prevCount) => {
if (prevCount + 1 >= 3) {
setOpenModalUnableToCommunicateWIthInstallation(true);
}
return prevCount + 1;
});
} }
} catch (err) { } catch (err) {
return false; return false;
@ -99,6 +123,12 @@ function Installation(props: singleInstallationProps) {
setCurrentTab(path[path.length - 1]); setCurrentTab(path[path.length - 1]);
}, [location]); }, [location]);
useEffect(() => {
if (status === -1) {
setOpenModalUnableToCommunicateWIthInstallation(true);
}
}, [status]);
useEffect(() => { useEffect(() => {
if ( if (
currentTab == 'live' || currentTab == 'live' ||
@ -118,7 +148,7 @@ function Installation(props: singleInstallationProps) {
fetchDataOnlyOneTime(); fetchDataOnlyOneTime();
} }
// Cleanup function to cancel interval and update isMounted when unmounted // Cleanup function to cancel interval
return () => { return () => {
if ( if (
currentTab == 'live' || currentTab == 'live' ||
@ -130,6 +160,10 @@ function Installation(props: singleInstallationProps) {
} }
}, [currentTab, location]); }, [currentTab, location]);
const UnableToCommunicateModalHandleOk = () => {
setOpenModalUnableToCommunicateWIthInstallation(false);
};
return ( return (
<> <>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
@ -264,6 +298,31 @@ function Installation(props: singleInstallationProps) {
alignItems="stretch" alignItems="stretch"
spacing={0} spacing={0}
> >
{openModalUnableToCommunicateWIthInstallation && (
<Container
maxWidth="xl"
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
height: '70vh'
}}
>
<CircularProgress size={60} style={{ color: '#ffc04d' }} />
<Typography
variant="body2"
style={{ color: 'black', fontWeight: 'bold' }}
mt={2}
>
Unable to communicate with the installation
</Typography>
<Typography variant="body2" style={{ color: 'black' }}>
Please wait or refresh the page
</Typography>
</Container>
)}
<Routes> <Routes>
<Route <Route
path={routes.information} path={routes.information}
@ -283,6 +342,7 @@ function Installation(props: singleInstallationProps) {
values={values} values={values}
s3Credentials={s3Credentials} s3Credentials={s3Credentials}
installationId={props.current_installation.id} installationId={props.current_installation.id}
productNum={props.current_installation.product}
></BatteryView> ></BatteryView>
} }
></Route> ></Route>

6
typescript/frontend-marios2/src/content/dashboards/Installations/InstallationSearch.tsx
View File

@ -63,11 +63,11 @@ function InstallationSearch(props: installationSearchProps) {
{filteredData.map((installation) => { {filteredData.map((installation) => {
return ( return (
<Route <Route
key={installation.id} key={installation.s3BucketId}
path={routes.installation + installation.id + '*'} path={routes.installation + installation.s3BucketId + '*'}
element={ element={
<Installation <Installation
key={installation.id} key={installation.s3BucketId}
current_installation={installation} current_installation={installation}
type="installation" type="installation"
></Installation> ></Installation>

26
typescript/frontend-marios2/src/content/dashboards/Installations/installationForm.tsx
View File

@ -25,6 +25,7 @@ function installationForm(props: installationFormProps) {
const theme = useTheme(); const theme = useTheme();
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const [formValues, setFormValues] = useState<Partial<I_Installation>>({ const [formValues, setFormValues] = useState<Partial<I_Installation>>({
installationName: '',
name: '', name: '',
region: '', region: '',
location: '', location: '',
@ -32,7 +33,14 @@ function installationForm(props: installationFormProps) {
vpnIp: '', vpnIp: '',
orderNumbers: '' orderNumbers: ''
}); });
const requiredFields = ['name', 'region', 'location', 'country', 'vpnIp']; const requiredFields = [
'installationName',
'name',
'region',
'location',
'country',
'vpnIp'
];
const tokencontext = useContext(TokenContext); const tokencontext = useContext(TokenContext);
const { removeToken } = tokencontext; const { removeToken } = tokencontext;
@ -105,6 +113,21 @@ function installationForm(props: installationFormProps) {
noValidate noValidate
autoComplete="off" autoComplete="off"
> >
<div>
<TextField
label={
<FormattedMessage
id="installationName"
defaultMessage="Installation Name"
/>
}
name="installationName"
value={formValues.installationName}
onChange={handleChange}
required
error={formValues.installationName === ''}
/>
</div>
<div> <div>
<TextField <TextField
label={ label={
@ -120,6 +143,7 @@ function installationForm(props: installationFormProps) {
error={formValues.name === ''} error={formValues.name === ''}
/> />
</div> </div>
<div> <div>
<TextField <TextField
label={<FormattedMessage id="region" defaultMessage="Region" />} label={<FormattedMessage id="region" defaultMessage="Region" />}

3
typescript/frontend-marios2/src/content/dashboards/Log/graph.util.tsx
View File

@ -174,7 +174,6 @@ const batteryPaths = [
'/Battery/Devices/%id%/Dc/Voltage', '/Battery/Devices/%id%/Dc/Voltage',
'/Battery/Devices/%id%/Soc', '/Battery/Devices/%id%/Soc',
'/Battery/Devices/%id%/Temperatures/Cells/Average', '/Battery/Devices/%id%/Temperatures/Cells/Average',
//'/Log/SalimaxWarnings/Battery/%id%',
'/Battery/Devices/%id%/Warnings', '/Battery/Devices/%id%/Warnings',
'/Battery/Devices/%id%/Alarms', '/Battery/Devices/%id%/Alarms',
@ -319,6 +318,8 @@ export const extractValues = (
): TopologyValues | null => { ): TopologyValues | null => {
const extractedValues: TopologyValues = {} as TopologyValues; const extractedValues: TopologyValues = {} as TopologyValues;
// console.log('timeSeriesData=', timeSeriesData);
for (const topologyKey of Object.keys(topologyPaths)) { for (const topologyKey of Object.keys(topologyPaths)) {
//Each topologykey may have more than one paths (for example inverter) //Each topologykey may have more than one paths (for example inverter)
const paths = topologyPaths[topologyKey]; const paths = topologyPaths[topologyKey];

14
typescript/frontend-marios2/src/content/dashboards/SalidomoInstallations/FlatInstallationView.tsx
View File

@ -100,11 +100,11 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => {
<TableBody> <TableBody>
{props.installations.map((installation) => { {props.installations.map((installation) => {
const isInstallationSelected = const isInstallationSelected =
installation.id === selectedInstallation; installation.s3BucketId === selectedInstallation;
const status = getStatus(installation.id); const status = getStatus(installation.id);
const rowStyles = const rowStyles =
isRowHovered === installation.id isRowHovered === installation.s3BucketId
? { ? {
cursor: 'pointer', cursor: 'pointer',
backgroundColor: theme.colors.primary.lighter backgroundColor: theme.colors.primary.lighter
@ -114,13 +114,15 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => {
return ( return (
<TableRow <TableRow
hover hover
key={installation.id} key={installation.s3BucketId}
selected={isInstallationSelected} selected={isInstallationSelected}
style={rowStyles} style={rowStyles}
onClick={() => onClick={() =>
handleSelectOneInstallation(installation.id) handleSelectOneInstallation(installation.s3BucketId)
}
onMouseEnter={() =>
handleRowMouseEnter(installation.s3BucketId)
} }
onMouseEnter={() => handleRowMouseEnter(installation.id)}
onMouseLeave={() => handleRowMouseLeave()} onMouseLeave={() => handleRowMouseLeave()}
> >
<TableCell> <TableCell>
@ -132,7 +134,7 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => {
noWrap noWrap
sx={{ marginTop: '10px', fontSize: 'small' }} sx={{ marginTop: '10px', fontSize: 'small' }}
> >
{installation.name} {installation.installationName}
</Typography> </Typography>
</TableCell> </TableCell>

11
typescript/frontend-marios2/src/content/dashboards/SalidomoInstallations/Installation.tsx
View File

@ -10,7 +10,6 @@ import {
} from 'src/content/dashboards/Log/graph.util'; } from 'src/content/dashboards/Log/graph.util';
import { WebSocketContext } from 'src/contexts/WebSocketContextProvider'; import { WebSocketContext } from 'src/contexts/WebSocketContextProvider';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import Overview from '../Overview/overview';
import { fetchData } from 'src/content/dashboards/Installations/fetchData'; import { fetchData } from 'src/content/dashboards/Installations/fetchData';
import { Navigate, Route, Routes, useLocation } from 'react-router-dom'; import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
import routes from '../../../Resources/routes.json'; import routes from '../../../Resources/routes.json';
@ -41,11 +40,12 @@ function Installation(props: singleInstallationProps) {
s3Region: props.current_installation.s3Region, s3Region: props.current_installation.s3Region,
s3Provider: props.current_installation.s3Provider, s3Provider: props.current_installation.s3Provider,
s3Key: props.current_installation.s3Key, s3Key: props.current_installation.s3Key,
s3Secret: props.current_installation.s3Secret s3Secret: props.current_installation.s3Secret,
s3BucketId: props.current_installation.s3BucketId
}; };
const s3Bucket = const s3Bucket =
props.current_installation.id.toString() + props.current_installation.s3BucketId.toString() +
'-' + '-' +
'c0436b6a-d276-4cd8-9c44-1eae86cf5d0e'; 'c0436b6a-d276-4cd8-9c44-1eae86cf5d0e';
@ -182,13 +182,10 @@ function Installation(props: singleInstallationProps) {
values={values} values={values}
s3Credentials={s3Credentials} s3Credentials={s3Credentials}
installationId={props.current_installation.id} installationId={props.current_installation.id}
productNum={props.current_installation.product}
></BatteryView> ></BatteryView>
} }
></Route> ></Route>
<Route
path={routes.overview}
element={<Overview s3Credentials={s3Credentials}></Overview>}
/>
<Route <Route
path={'*'} path={'*'}

6
typescript/frontend-marios2/src/content/dashboards/SalidomoInstallations/InstallationSearch.tsx
View File

@ -107,11 +107,11 @@ function InstallationSearch(props: installationSearchProps) {
{filteredData.map((installation) => { {filteredData.map((installation) => {
return ( return (
<Route <Route
key={installation.id} key={installation.s3BucketId}
path={routes.installation + installation.id + '*'} path={routes.installation + installation.s3BucketId + '*'}
element={ element={
<Installation <Installation
key={installation.id} key={installation.s3BucketId}
current_installation={installation} current_installation={installation}
type="installation" type="installation"
></Installation> ></Installation>

16
typescript/frontend-marios2/src/content/dashboards/SalidomoInstallations/SalidomoInstallationForm.tsx
View File

@ -23,14 +23,20 @@ function SalidomonstallationForm(props: SalidomoInstallationFormProps) {
const theme = useTheme(); const theme = useTheme();
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const [formValues, setFormValues] = useState<Partial<I_Installation>>({ const [formValues, setFormValues] = useState<Partial<I_Installation>>({
name: '', installationName: '',
region: '', region: '',
location: '', location: '',
country: '', country: '',
vpnIp: '', vpnIp: '',
vrmLink: '' vrmLink: ''
}); });
const requiredFields = ['name', 'location', 'country', 'vpnIp', 'vrmLink']; const requiredFields = [
'installationName',
'location',
'country',
'vpnIp',
'vrmLink'
];
const installationContext = useContext(InstallationsContext); const installationContext = useContext(InstallationsContext);
const { createInstallation, loading, setLoading, error, setError } = const { createInstallation, loading, setLoading, error, setError } =
installationContext; installationContext;
@ -108,11 +114,11 @@ function SalidomonstallationForm(props: SalidomoInstallationFormProps) {
defaultMessage="Installation Name" defaultMessage="Installation Name"
/> />
} }
name="name" name="installationName"
value={formValues.name} value={formValues.installationName}
onChange={handleChange} onChange={handleChange}
required required
error={formValues.name === ''} error={formValues.installationName === ''}
/> />
</div> </div>
<div> <div>

2
typescript/frontend-marios2/src/content/dashboards/Tree/CustomTreeItem.tsx
View File

@ -52,7 +52,7 @@ function CustomTreeItem(props: CustomTreeItemProps) {
routes.installations + routes.installations +
routes.tree + routes.tree +
routes.installation + routes.installation +
installation.id + installation.s3BucketId +
'/' + '/' +
routes.live, routes.live,
{ {

18
typescript/frontend-marios2/src/content/dashboards/Tree/InstallationTree.tsx
View File

@ -28,7 +28,11 @@ function InstallationTree() {
subnode != node && subnode != node &&
subnode.parentId == node.id && ( subnode.parentId == node.id && (
<TreeNode <TreeNode
key={subnode.id.toString() + subnode.type} key={
subnode.type == 'Installation'
? subnode.s3BucketId.toString() + subnode.type
: subnode.id.toString() + subnode.type
}
node={subnode} node={subnode}
parent_id={node.id} parent_id={node.id}
/> />
@ -58,7 +62,11 @@ function InstallationTree() {
{foldersAndInstallations.map((node, index) => { {foldersAndInstallations.map((node, index) => {
return ( return (
<TreeNode <TreeNode
key={node.id.toString() + node.type} key={
node.type == 'Installation'
? node.s3BucketId.toString() + node.type
: node.id.toString() + node.type
}
node={node} node={node}
parent_id={'0'} parent_id={'0'}
/> />
@ -72,11 +80,11 @@ function InstallationTree() {
if (installation.type == 'Installation') { if (installation.type == 'Installation') {
return ( return (
<Route <Route
key={installation.id} key={installation.s3BucketId}
path={routes.installation + installation.id + '*'} path={routes.installation + installation.s3BucketId + '*'}
element={ element={
<Installation <Installation
key={installation.id} key={installation.s3BucketId}
current_installation={installation} current_installation={installation}
type="installation" type="installation"
></Installation> ></Installation>

1
typescript/frontend-marios2/src/interfaces/InstallationTypes.tsx
View File

@ -25,5 +25,6 @@ export interface I_Folder {
information: string; information: string;
parentId: number; parentId: number;
type: string; type: string;
s3BucketId: number;
children?: (I_Installation | I_Folder)[]; children?: (I_Installation | I_Folder)[];
} }

3
typescript/frontend-marios2/src/interfaces/S3Types.tsx
View File

@ -3,7 +3,8 @@ export interface I_S3Credentials {
s3Provider: string; s3Provider: string;
s3Key: string; s3Key: string;
s3Secret: string; s3Secret: string;
s3Bucket?: string; s3Bucket: string;
s3BucketId: number;
} }
export interface ErrorMessage { export interface ErrorMessage {