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 { I_S3Credentials } from '../../../interfaces/S3Types';
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
|
|
@ -8,7 +8,8 @@ import {
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCell,
|
TableCell,
|
||||||
TableContainer,
|
TableContainer,
|
||||||
TableRow
|
TableRow,
|
||||||
|
Typography
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import { Battery } from '../Log/graph.util';
|
import { Battery } from '../Log/graph.util';
|
||||||
import Button from '@mui/material/Button';
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Grid container>
|
<Grid container>
|
||||||
|
|
@ -70,18 +129,149 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
||||||
</Button>
|
</Button>
|
||||||
</Grid>
|
</Grid>
|
||||||
</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
|
<Card
|
||||||
sx={{
|
sx={{
|
||||||
overflow: 'visible',
|
overflow: 'visible',
|
||||||
marginTop: '30px',
|
marginTop: '30px',
|
||||||
marginBottom: '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
|
<TableContainer
|
||||||
component={Paper}
|
component={Paper}
|
||||||
sx={{ marginTop: '20px', marginBottom: '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>
|
||||||
|
|
@ -217,28 +407,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
||||||
props.batteryData.HeatingCurrent.unit}
|
props.batteryData.HeatingCurrent.unit}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</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>
|
<TableRow>
|
||||||
<TableCell
|
<TableCell
|
||||||
component="th"
|
component="th"
|
||||||
|
|
@ -261,47 +430,40 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
||||||
props.batteryData.Soc.unit}
|
props.batteryData.Soc.unit}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</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>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
</TableContainer>
|
</TableContainer>
|
||||||
</Card>
|
</Card>
|
||||||
</Grid>
|
</Grid>
|
||||||
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
||||||
<Grid item md={2.9} xs={2.9}>
|
<Grid item md={3} xs={3}>
|
||||||
<Card
|
<Card
|
||||||
sx={{
|
sx={{
|
||||||
overflow: 'visible',
|
overflow: 'visible',
|
||||||
marginTop: '30px',
|
marginTop: '30px',
|
||||||
marginLeft: '20px',
|
marginLeft: '20px',
|
||||||
marginBottom: '30px',
|
display: 'flex',
|
||||||
backgroundColor: 'red'
|
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
|
<TableContainer
|
||||||
component={Paper}
|
component={Paper}
|
||||||
sx={{ marginTop: '20px', marginBottom: '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>
|
||||||
|
|
@ -466,19 +628,33 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
||||||
<Grid item md={2.7} xs={2.7}>
|
<Grid item md={3} xs={3}>
|
||||||
<Card
|
<Card
|
||||||
sx={{
|
sx={{
|
||||||
overflow: 'visible',
|
overflow: 'visible',
|
||||||
marginTop: '30px',
|
marginTop: '30px',
|
||||||
marginLeft: '20px',
|
marginLeft: '20px',
|
||||||
marginBottom: '30px',
|
display: 'flex',
|
||||||
backgroundColor: 'red'
|
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
|
<TableContainer
|
||||||
component={Paper}
|
component={Paper}
|
||||||
sx={{ marginTop: '20px', marginBottom: '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>
|
||||||
|
|
@ -643,19 +819,33 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
||||||
<Grid item md={2.9} xs={2.9}>
|
<Grid item md={3} xs={3}>
|
||||||
<Card
|
<Card
|
||||||
sx={{
|
sx={{
|
||||||
overflow: 'visible',
|
overflow: 'visible',
|
||||||
marginTop: '30px',
|
marginTop: '30px',
|
||||||
marginLeft: '20px',
|
marginLeft: '20px',
|
||||||
marginBottom: '30px',
|
display: 'flex',
|
||||||
backgroundColor: 'red'
|
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
|
<TableContainer
|
||||||
component={Paper}
|
component={Paper}
|
||||||
sx={{ marginTop: '20px', marginBottom: '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>
|
||||||
|
|
@ -819,151 +1009,109 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
|
||||||
</Card>
|
</Card>
|
||||||
</Grid>
|
</Grid>
|
||||||
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
{/*----------------------------------------------------------------------------------------------------------------------------------*/}
|
||||||
<Grid item md={1.5} xs={1.5}>
|
|
||||||
<Card
|
{/*<Grid item md={1.5} xs={1.5}>*/}
|
||||||
sx={{
|
{/* <Card*/}
|
||||||
overflow: 'visible',
|
{/* sx={{*/}
|
||||||
marginTop: '30px',
|
{/* overflow: 'visible',*/}
|
||||||
marginLeft: '20px',
|
{/* marginTop: '30px',*/}
|
||||||
marginBottom: '30px',
|
{/* marginLeft: '20px',*/}
|
||||||
backgroundColor: 'red'
|
{/* marginBottom: '30px',*/}
|
||||||
}}
|
{/* backgroundColor: 'red'*/}
|
||||||
>
|
{/* }}*/}
|
||||||
<TableContainer
|
{/* >*/}
|
||||||
component={Paper}
|
{/* <TableContainer*/}
|
||||||
sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
|
{/* component={Paper}*/}
|
||||||
>
|
{/* sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}*/}
|
||||||
<Table size="medium" aria-label="a dense table">
|
{/* >*/}
|
||||||
<TableBody>
|
{/* <Table size="medium" aria-label="a dense table">*/}
|
||||||
<TableRow>
|
{/* <TableBody>*/}
|
||||||
<TableCell
|
{/* <TableRow>*/}
|
||||||
component="th"
|
{/* <TableCell*/}
|
||||||
scope="row"
|
{/* component="th"*/}
|
||||||
align="left"
|
{/* scope="row"*/}
|
||||||
sx={{ fontWeight: 'bold' }}
|
{/* align="left"*/}
|
||||||
>
|
{/* sx={{ fontWeight: 'bold' }}*/}
|
||||||
Blue Led
|
{/* >*/}
|
||||||
</TableCell>
|
{/* Green Led*/}
|
||||||
<TableCell
|
{/* </TableCell>*/}
|
||||||
align="right"
|
{/* <TableCell*/}
|
||||||
sx={{
|
{/* align="right"*/}
|
||||||
width: '6ch',
|
{/* sx={{*/}
|
||||||
whiteSpace: 'nowrap',
|
{/* width: '6ch',*/}
|
||||||
paddingRight: '12px'
|
{/* whiteSpace: 'nowrap',*/}
|
||||||
}}
|
{/* paddingRight: '12px'*/}
|
||||||
>
|
{/* }}*/}
|
||||||
<div
|
{/* >*/}
|
||||||
style={{
|
{/* {props.batteryData.GreenLeds.value}*/}
|
||||||
width: '20px',
|
{/* </TableCell>*/}
|
||||||
height: '20px',
|
{/* </TableRow>*/}
|
||||||
marginLeft: '2px',
|
{/* <TableRow>*/}
|
||||||
borderRadius: '50%',
|
{/* <TableCell*/}
|
||||||
backgroundColor:
|
{/* component="th"*/}
|
||||||
props.batteryData.BlueLeds.value === 'On'
|
{/* scope="row"*/}
|
||||||
? '#00ccff'
|
{/* align="left"*/}
|
||||||
: 'transparent'
|
{/* sx={{ fontWeight: 'bold' }}*/}
|
||||||
}}
|
{/* >*/}
|
||||||
/>
|
{/* Amber Led*/}
|
||||||
</TableCell>
|
{/* </TableCell>*/}
|
||||||
</TableRow>
|
{/* <TableCell*/}
|
||||||
<TableRow>
|
{/* align="right"*/}
|
||||||
<TableCell
|
{/* sx={{*/}
|
||||||
component="th"
|
{/* width: '6ch',*/}
|
||||||
scope="row"
|
{/* whiteSpace: 'nowrap',*/}
|
||||||
align="left"
|
{/* paddingRight: '12px'*/}
|
||||||
sx={{ fontWeight: 'bold' }}
|
{/* }}*/}
|
||||||
>
|
{/* >*/}
|
||||||
Green Led
|
{/* {props.batteryData.AmberLeds.value}*/}
|
||||||
</TableCell>
|
{/* </TableCell>*/}
|
||||||
<TableCell
|
{/* </TableRow>*/}
|
||||||
align="right"
|
{/* <TableRow>*/}
|
||||||
sx={{
|
{/* <TableCell*/}
|
||||||
width: '6ch',
|
{/* component="th"*/}
|
||||||
whiteSpace: 'nowrap',
|
{/* scope="row"*/}
|
||||||
paddingRight: '12px'
|
{/* align="left"*/}
|
||||||
}}
|
{/* sx={{ fontWeight: 'bold' }}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<div
|
{/* Blue Led*/}
|
||||||
style={{
|
{/* </TableCell>*/}
|
||||||
width: '20px',
|
{/* <TableCell*/}
|
||||||
height: '20px',
|
{/* align="right"*/}
|
||||||
marginLeft: '2px',
|
{/* sx={{*/}
|
||||||
borderRadius: '50%',
|
{/* width: '6ch',*/}
|
||||||
backgroundColor:
|
{/* whiteSpace: 'nowrap',*/}
|
||||||
props.batteryData.GreenLeds.value === 'On'
|
{/* paddingRight: '12px'*/}
|
||||||
? 'green'
|
{/* }}*/}
|
||||||
: 'transparent'
|
{/* >*/}
|
||||||
}}
|
{/* {props.batteryData.BlueLeds.value}*/}
|
||||||
/>
|
{/* </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' }}*/}
|
||||||
>
|
{/* >*/}
|
||||||
Red Led
|
{/* Red Led*/}
|
||||||
</TableCell>
|
{/* </TableCell>*/}
|
||||||
<TableCell
|
{/* <TableCell*/}
|
||||||
align="right"
|
{/* align="right"*/}
|
||||||
sx={{
|
{/* sx={{*/}
|
||||||
width: '6ch',
|
{/* width: '6ch',*/}
|
||||||
whiteSpace: 'nowrap',
|
{/* whiteSpace: 'nowrap',*/}
|
||||||
paddingRight: '12px'
|
{/* paddingRight: '12px'*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<div
|
{/* {props.batteryData.RedLeds.value}*/}
|
||||||
style={{
|
{/* </TableCell>*/}
|
||||||
width: '20px',
|
{/* </TableRow>*/}
|
||||||
height: '20px',
|
{/* </TableBody>*/}
|
||||||
marginLeft: '2px',
|
{/* </Table>*/}
|
||||||
borderRadius: '50%',
|
{/* </TableContainer>*/}
|
||||||
backgroundColor:
|
{/* </Card>*/}
|
||||||
props.batteryData.RedLeds.value === 'On'
|
{/*</Grid>*/}
|
||||||
? '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>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue