update titles in battery view
This commit is contained in:
Noe
parent
ca3c9d2903
commit
d88a18c982
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { I_S3Credentials } from '../../../interfaces/S3Types';
|
||||
import {
|
||||
Card,
|
||||
|
|
@ -8,7 +8,8 @@ import {
|
|||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableRow
|
||||
TableRow,
|
||||
Typography
|
||||
} from '@mui/material';
|
||||
import { Battery } from '../Log/graph.util';
|
||||
import Button from '@mui/material/Button';
|
||||
|
|
@ -38,6 +39,64 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
|||
);
|
||||
};
|
||||
|
||||
const [GreenisBlinking, setGreenisBlinking] = useState(
|
||||
props.batteryData.GreenLeds.value === 'Blinking'
|
||||
);
|
||||
|
||||
const [AmberisBlinking, setAmberisBlinking] = useState(
|
||||
props.batteryData.AmberLeds.value === 'Blinking'
|
||||
);
|
||||
const [RedisBlinking, setRedisBlinking] = useState(
|
||||
props.batteryData.RedLeds.value === 'Blinking'
|
||||
);
|
||||
|
||||
const [BlueisBlinking, setBlueisBlinking] = useState(
|
||||
props.batteryData.BlueLeds.value === 'Blinking'
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const intervalId = setInterval(() => {
|
||||
if (props.batteryData.AmberLeds.value === 'Blinking') {
|
||||
setAmberisBlinking((prevIsBlinking) => !prevIsBlinking);
|
||||
}
|
||||
|
||||
if (props.batteryData.RedLeds.value === 'Blinking') {
|
||||
setRedisBlinking((prevIsBlinking) => !prevIsBlinking);
|
||||
}
|
||||
|
||||
if (props.batteryData.BlueLeds.value === 'Blinking') {
|
||||
setBlueisBlinking((prevIsBlinking) => !prevIsBlinking);
|
||||
}
|
||||
|
||||
if (props.batteryData.GreenLeds.value === 'Blinking') {
|
||||
setGreenisBlinking((prevIsBlinking) => !prevIsBlinking);
|
||||
}
|
||||
}, 500); // Blink every 500 milliseconds
|
||||
|
||||
// Cleanup the interval on component unmount
|
||||
return () => clearInterval(intervalId);
|
||||
}, []);
|
||||
|
||||
const batteryStyle = {
|
||||
borderRadius: '15px',
|
||||
padding: '10px',
|
||||
backgroundColor: 'lightgray',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '150px',
|
||||
marginTop: '30px'
|
||||
};
|
||||
|
||||
const batteryStringStyle = {
|
||||
flex: 1,
|
||||
border: '1px solid #000',
|
||||
height: '97%',
|
||||
width: '30px',
|
||||
borderRadius: '7px',
|
||||
backgroundColor: '#bfbfbf'
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid container>
|
||||
|
|
@ -70,18 +129,149 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
|||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item md={2} xs={2}>
|
||||
<Grid container>
|
||||
<Grid item md={4.9} xs={4.9}></Grid>
|
||||
<Grid item md={2.2} xs={2.2}>
|
||||
<div style={batteryStyle}>
|
||||
<div
|
||||
style={{
|
||||
...batteryStringStyle,
|
||||
backgroundColor:
|
||||
props.batteryData.String1Active.value == 'True'
|
||||
? '#32CD32'
|
||||
: '#FF033E'
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
...batteryStringStyle,
|
||||
backgroundColor:
|
||||
props.batteryData.String2Active.value == 'True'
|
||||
? '#32CD32'
|
||||
: '#FF033E'
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
...batteryStringStyle,
|
||||
backgroundColor:
|
||||
props.batteryData.String3Active.value == 'True'
|
||||
? '#32CD32'
|
||||
: '#FF033E'
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
...batteryStringStyle,
|
||||
backgroundColor:
|
||||
props.batteryData.String4Active.value == 'True'
|
||||
? '#32CD32'
|
||||
: '#FF033E'
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
...batteryStringStyle,
|
||||
backgroundColor:
|
||||
props.batteryData.String5Active.value == 'True'
|
||||
? '#32CD32'
|
||||
: '#FF033E'
|
||||
}}
|
||||
></div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
marginLeft: '10px',
|
||||
marginTop: '-10px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor:
|
||||
props.batteryData.GreenLeds.value === 'On' ||
|
||||
GreenisBlinking
|
||||
? 'green'
|
||||
: 'transparent'
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
marginLeft: '10px',
|
||||
marginTop: '10px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor:
|
||||
props.batteryData.AmberLeds.value === 'On' ||
|
||||
AmberisBlinking
|
||||
? 'orange'
|
||||
: 'transparent'
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
marginLeft: '10px',
|
||||
marginTop: '10px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor:
|
||||
props.batteryData.BlueLeds.value === 'On' || BlueisBlinking
|
||||
? '#00ccff'
|
||||
: 'transparent'
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
marginLeft: '10px',
|
||||
marginTop: '10px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor:
|
||||
props.batteryData.RedLeds.value === 'On' || RedisBlinking
|
||||
? 'red'
|
||||
: 'transparent'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
<Grid item md={4.9} xs={4.9}></Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item md={3} xs={3}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginBottom: '30px',
|
||||
backgroundColor: 'red'
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
border: '2px solid #ccc',
|
||||
borderRadius: '12px'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
component="div"
|
||||
sx={{
|
||||
marginTop: '10px',
|
||||
borderBottom: '1px solid #ccc',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
Battery Information
|
||||
</Typography>
|
||||
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
|
||||
sx={{ marginTop: '20px', width: '100%' }}
|
||||
>
|
||||
<Table size="medium" aria-label="a dense table">
|
||||
<TableBody>
|
||||
|
|
@ -217,28 +407,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
|||
props.batteryData.HeatingCurrent.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Heating Power
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.HeatingPower.value +
|
||||
' ' +
|
||||
props.batteryData.HeatingPower.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
|
|
@ -261,47 +430,40 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
|||
props.batteryData.Soc.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
SOCAh
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
{props.batteryData.SOCAh.value +
|
||||
' ' +
|
||||
props.batteryData.SOCAh.unit}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</Grid>
|
||||
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
||||
<Grid item md={2.9} xs={2.9}>
|
||||
<Grid item md={3} xs={3}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginLeft: '20px',
|
||||
marginBottom: '30px',
|
||||
backgroundColor: 'red'
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
border: '2px solid #ccc',
|
||||
borderRadius: '12px'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
component="div"
|
||||
sx={{
|
||||
marginTop: '10px',
|
||||
borderBottom: '1px solid #ccc',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
Temperature
|
||||
</Typography>
|
||||
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
|
||||
sx={{ marginTop: '20px', width: '100%' }}
|
||||
>
|
||||
<Table size="medium" aria-label="a dense table">
|
||||
<TableBody>
|
||||
|
|
@ -466,19 +628,33 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
|||
</Grid>
|
||||
|
||||
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
||||
<Grid item md={2.7} xs={2.7}>
|
||||
<Grid item md={3} xs={3}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginLeft: '20px',
|
||||
marginBottom: '30px',
|
||||
backgroundColor: 'red'
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
border: '2px solid #ccc',
|
||||
borderRadius: '12px'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
component="div"
|
||||
sx={{
|
||||
marginTop: '10px',
|
||||
borderBottom: '1px solid #ccc',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
Io Status
|
||||
</Typography>
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
|
||||
sx={{ marginTop: '20px', width: '100%' }}
|
||||
>
|
||||
<Table size="medium" aria-label="a dense table">
|
||||
<TableBody>
|
||||
|
|
@ -643,19 +819,33 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
|||
</Grid>
|
||||
|
||||
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
||||
<Grid item md={2.9} xs={2.9}>
|
||||
<Grid item md={3} xs={3}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginLeft: '20px',
|
||||
marginBottom: '30px',
|
||||
backgroundColor: 'red'
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
border: '2px solid #ccc',
|
||||
borderRadius: '12px'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
component="div"
|
||||
sx={{
|
||||
marginTop: '10px',
|
||||
borderBottom: '1px solid #ccc',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
Specification
|
||||
</Typography>
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
|
||||
sx={{ marginTop: '20px', width: '100%' }}
|
||||
>
|
||||
<Table size="medium" aria-label="a dense table">
|
||||
<TableBody>
|
||||
|
|
@ -819,151 +1009,109 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
|||
</Card>
|
||||
</Grid>
|
||||
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
||||
<Grid item md={1.5} xs={1.5}>
|
||||
<Card
|
||||
sx={{
|
||||
overflow: 'visible',
|
||||
marginTop: '30px',
|
||||
marginLeft: '20px',
|
||||
marginBottom: '30px',
|
||||
backgroundColor: 'red'
|
||||
}}
|
||||
>
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
|
||||
>
|
||||
<Table size="medium" aria-label="a dense table">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Blue Led
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
marginLeft: '2px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor:
|
||||
props.batteryData.BlueLeds.value === 'On'
|
||||
? '#00ccff'
|
||||
: 'transparent'
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Green Led
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
marginLeft: '2px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor:
|
||||
props.batteryData.GreenLeds.value === 'On'
|
||||
? 'green'
|
||||
: 'transparent'
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Red Led
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
marginLeft: '2px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor:
|
||||
props.batteryData.RedLeds.value === 'On'
|
||||
? 'red'
|
||||
: 'transparent'
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
align="left"
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
>
|
||||
Amber Led
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
width: '6ch',
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: '12px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
marginLeft: '2px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor:
|
||||
props.batteryData.AmberLeds.value === 'On'
|
||||
? 'orange'
|
||||
: 'transparent'
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
{/*<Grid item md={1.5} xs={1.5}>*/}
|
||||
{/* <Card*/}
|
||||
{/* sx={{*/}
|
||||
{/* overflow: 'visible',*/}
|
||||
{/* marginTop: '30px',*/}
|
||||
{/* marginLeft: '20px',*/}
|
||||
{/* marginBottom: '30px',*/}
|
||||
{/* backgroundColor: 'red'*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* <TableContainer*/}
|
||||
{/* component={Paper}*/}
|
||||
{/* sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}*/}
|
||||
{/* >*/}
|
||||
{/* <Table size="medium" aria-label="a dense table">*/}
|
||||
{/* <TableBody>*/}
|
||||
{/* <TableRow>*/}
|
||||
{/* <TableCell*/}
|
||||
{/* component="th"*/}
|
||||
{/* scope="row"*/}
|
||||
{/* align="left"*/}
|
||||
{/* sx={{ fontWeight: 'bold' }}*/}
|
||||
{/* >*/}
|
||||
{/* Green Led*/}
|
||||
{/* </TableCell>*/}
|
||||
{/* <TableCell*/}
|
||||
{/* align="right"*/}
|
||||
{/* sx={{*/}
|
||||
{/* width: '6ch',*/}
|
||||
{/* whiteSpace: 'nowrap',*/}
|
||||
{/* paddingRight: '12px'*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* {props.batteryData.GreenLeds.value}*/}
|
||||
{/* </TableCell>*/}
|
||||
{/* </TableRow>*/}
|
||||
{/* <TableRow>*/}
|
||||
{/* <TableCell*/}
|
||||
{/* component="th"*/}
|
||||
{/* scope="row"*/}
|
||||
{/* align="left"*/}
|
||||
{/* sx={{ fontWeight: 'bold' }}*/}
|
||||
{/* >*/}
|
||||
{/* Amber Led*/}
|
||||
{/* </TableCell>*/}
|
||||
{/* <TableCell*/}
|
||||
{/* align="right"*/}
|
||||
{/* sx={{*/}
|
||||
{/* width: '6ch',*/}
|
||||
{/* whiteSpace: 'nowrap',*/}
|
||||
{/* paddingRight: '12px'*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* {props.batteryData.AmberLeds.value}*/}
|
||||
{/* </TableCell>*/}
|
||||
{/* </TableRow>*/}
|
||||
{/* <TableRow>*/}
|
||||
{/* <TableCell*/}
|
||||
{/* component="th"*/}
|
||||
{/* scope="row"*/}
|
||||
{/* align="left"*/}
|
||||
{/* sx={{ fontWeight: 'bold' }}*/}
|
||||
{/* >*/}
|
||||
{/* Blue Led*/}
|
||||
{/* </TableCell>*/}
|
||||
{/* <TableCell*/}
|
||||
{/* align="right"*/}
|
||||
{/* sx={{*/}
|
||||
{/* width: '6ch',*/}
|
||||
{/* whiteSpace: 'nowrap',*/}
|
||||
{/* paddingRight: '12px'*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* {props.batteryData.BlueLeds.value}*/}
|
||||
{/* </TableCell>*/}
|
||||
{/* </TableRow>*/}
|
||||
|
||||
{/* <TableRow>*/}
|
||||
{/* <TableCell*/}
|
||||
{/* component="th"*/}
|
||||
{/* scope="row"*/}
|
||||
{/* align="left"*/}
|
||||
{/* sx={{ fontWeight: 'bold' }}*/}
|
||||
{/* >*/}
|
||||
{/* Red Led*/}
|
||||
{/* </TableCell>*/}
|
||||
{/* <TableCell*/}
|
||||
{/* align="right"*/}
|
||||
{/* sx={{*/}
|
||||
{/* width: '6ch',*/}
|
||||
{/* whiteSpace: 'nowrap',*/}
|
||||
{/* paddingRight: '12px'*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* {props.batteryData.RedLeds.value}*/}
|
||||
{/* </TableCell>*/}
|
||||
{/* </TableRow>*/}
|
||||
{/* </TableBody>*/}
|
||||
{/* </Table>*/}
|
||||
{/* </TableContainer>*/}
|
||||
{/* </Card>*/}
|
||||
{/*</Grid>*/}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue