got sen5x overlays working
This commit is contained in:
Carter
parent
deb8983b1e
commit
bfd3b6bb5f
2 changed files with 77 additions and 98 deletions
|
|
@ -34,6 +34,7 @@ const useStyles = makeStyles((theme: Theme) => {
|
|||
transition: 'opacity 0.5s ease, transform 0.5s ease',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
overflow: "hidden",
|
||||
// height: '100%',
|
||||
},
|
||||
active: {
|
||||
|
|
@ -50,8 +51,8 @@ export default function StatusPlenum(props: Props) {
|
|||
const { device } = props;
|
||||
const classes = useStyles()
|
||||
|
||||
const colors = or(device.status.plenum?.overlays.map(overlay => overlay.color), []);
|
||||
const messages = or(device.status.plenum?.overlays.map(overlay => overlay.message), []);
|
||||
const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
|
||||
const messages = or(device.status.sen5x?.overlays.map(overlay => overlay.message), []);
|
||||
|
||||
const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
|
||||
const [, setColorIndex] = useState(0)
|
||||
|
|
@ -63,7 +64,7 @@ export default function StatusPlenum(props: Props) {
|
|||
setColor(colors[newIndex]); // Use the new index here
|
||||
return newIndex;
|
||||
});
|
||||
}, 5000);
|
||||
}, 7500);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
|
@ -116,89 +117,75 @@ export default function StatusPlenum(props: Props) {
|
|||
return (
|
||||
<Tooltip title={tooltip()}>
|
||||
<PulseBox color={color} className={classes.box} >
|
||||
{/* <Grid2 container direction="column" > */}
|
||||
<Grid2 container direction="column" >
|
||||
<Grid2 container direction="column"
|
||||
className={`${classes.carouselItem} ${
|
||||
0 === currentIndex ? classes.active : classes.inactive
|
||||
}`}
|
||||
>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: orange[700]}}>
|
||||
{device.status.sen5x?.temperature.toFixed(1)}°C
|
||||
</Typography>
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: blue[700]}}>
|
||||
{device.status.sen5x?.humidity.toFixed(1)}%
|
||||
</Typography>
|
||||
</Grid2>
|
||||
<Grid2 container direction="column" >
|
||||
<Grid2 container direction="column"
|
||||
className={`${classes.carouselItem} ${
|
||||
0 === currentIndex ? classes.active : classes.inactive
|
||||
}`}
|
||||
>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: orange[700]}}>
|
||||
{device.status.sen5x?.temperature.toFixed(1)}°C
|
||||
</Typography>
|
||||
</Grid2>
|
||||
|
||||
<Grid2 container direction="column"
|
||||
className={`${classes.carouselItem} ${
|
||||
1 === currentIndex ? classes.active : classes.inactive
|
||||
}`}
|
||||
>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: green[300]}}>
|
||||
{device.status.sen5x?.dust_1ug.toFixed(1)}ug/m3
|
||||
</Typography>
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: green[400]}}>
|
||||
{device.status.sen5x?.dust_2ug.toFixed(1)}ug/m3
|
||||
</Typography>
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: blue[700]}}>
|
||||
{device.status.sen5x?.humidity.toFixed(1)}%
|
||||
</Typography>
|
||||
</Grid2>
|
||||
|
||||
<Grid2 container direction="column"
|
||||
className={`${classes.carouselItem} ${
|
||||
2 === currentIndex ? classes.active : classes.inactive
|
||||
}`}
|
||||
>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: green[500]}}>
|
||||
{device.status.sen5x?.dust_4ug.toFixed(1)}ug/m3
|
||||
</Typography>
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: green[600]}}>
|
||||
{device.status.sen5x?.dust_10ug.toFixed(1)}ug/m3
|
||||
</Typography>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
|
||||
<Grid2 container direction="column"
|
||||
className={`${classes.carouselItem} ${
|
||||
1 === currentIndex ? classes.active : classes.inactive
|
||||
}`}
|
||||
>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: green[300]}}>
|
||||
{device.status.sen5x?.dust_1ug.toFixed(1)}ug/m3
|
||||
</Typography>
|
||||
</Grid2>
|
||||
|
||||
<Grid2 container direction="column"
|
||||
className={`${classes.carouselItem} ${
|
||||
3 === currentIndex ? classes.active : classes.inactive
|
||||
}`}
|
||||
>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: blue[300]}}>
|
||||
{device.status.sen5x?.voc.toFixed(1)}%
|
||||
</Typography>
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: blue[400]}}>
|
||||
{device.status.sen5x?.nox.toFixed(1)}%
|
||||
</Typography>
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: green[400]}}>
|
||||
{device.status.sen5x?.dust_2ug.toFixed(1)}ug/m3
|
||||
</Typography>
|
||||
</Grid2>
|
||||
|
||||
</Grid2>
|
||||
|
||||
{/* <Grid2>
|
||||
<Typography variant="body2" style={{ color: orange[700]}}>
|
||||
{device.status.sen5x?.temperature.toFixed(1)}°C
|
||||
</Typography>
|
||||
<Grid2 container direction="column"
|
||||
className={`${classes.carouselItem} ${
|
||||
2 === currentIndex ? classes.active : classes.inactive
|
||||
}`}
|
||||
>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: green[500]}}>
|
||||
{device.status.sen5x?.dust_4ug.toFixed(1)}ug/m3
|
||||
</Typography>
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: green[600]}}>
|
||||
{device.status.sen5x?.dust_10ug.toFixed(1)}ug/m3
|
||||
</Typography>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: blue[700]}}>
|
||||
{device.status.sen5x?.humidity.toFixed(1)}%
|
||||
</Typography>
|
||||
</Grid2> */}
|
||||
{/* </Grid2> */}
|
||||
|
||||
<Grid2 container direction="column"
|
||||
className={`${classes.carouselItem} ${
|
||||
3 === currentIndex ? classes.active : classes.inactive
|
||||
}`}
|
||||
>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: blue[300]}}>
|
||||
{device.status.sen5x?.voc.toFixed(1)}%
|
||||
</Typography>
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
<Typography variant="body2" style={{ color: blue[400]}}>
|
||||
{device.status.sen5x?.nox.toFixed(1)}%
|
||||
</Typography>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</PulseBox>
|
||||
</Tooltip>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -307,11 +307,11 @@ export default function ComponentSettings(props: Props) {
|
|||
if (cableID > 0) component.settings.addressType = cableID + 8;
|
||||
componentAPI
|
||||
.add(device.id(), component.settings, as)
|
||||
.then((response: any) => {
|
||||
.then((_response: any) => {
|
||||
success(component.name() + " was successfully added!");
|
||||
refresh();
|
||||
})
|
||||
.catch((err: any) => {
|
||||
.catch((_err: any) => {
|
||||
error("Error occured while adding " + component.name() + ".");
|
||||
})
|
||||
.finally(() => close());
|
||||
|
|
@ -321,21 +321,21 @@ export default function ComponentSettings(props: Props) {
|
|||
const component = formComponent;
|
||||
componentAPI
|
||||
.update(device.id(), component.settings, getContextKeys(), getContextTypes(), as)
|
||||
.then((response: any) => {
|
||||
.then((_response: any) => {
|
||||
success(component.name() + " was successfully updated!");
|
||||
let updatedPrefs = pond.DeviceComponentPreferences.create();
|
||||
updatedPrefs.excludedNodes = excludedNodes;
|
||||
deviceAPI
|
||||
.updateComponentPreferences(device.id(), component.key(), updatedPrefs, undefined, undefined, as)
|
||||
.then(resp => {
|
||||
.then(_resp => {
|
||||
console.log("Preferences updated");
|
||||
})
|
||||
.catch(err => {
|
||||
.catch(_err => {
|
||||
console.log("Preferences failed to update");
|
||||
});
|
||||
refresh();
|
||||
})
|
||||
.catch((err: any) => {
|
||||
.catch((_err: any) => {
|
||||
error("Error occured while updating " + component.name() + ".");
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -346,7 +346,7 @@ export default function ComponentSettings(props: Props) {
|
|||
const removeComponent = () => {
|
||||
componentAPI
|
||||
.remove(device.id(), formComponent.key(), getContextKeys(), getContextTypes(), as)
|
||||
.then((response: any) => {
|
||||
.then((_response: any) => {
|
||||
success(formComponent.name() + " was successfully removed!");
|
||||
refresh();
|
||||
})
|
||||
|
|
@ -826,16 +826,16 @@ export default function ComponentSettings(props: Props) {
|
|||
Back
|
||||
</Button>
|
||||
) : (
|
||||
<DeleteButton onClick={() => setRemoveDialogOpen(true)}>Delete</DeleteButton>
|
||||
<DeleteButton disabled={!canEdit} onClick={() => setRemoveDialogOpen(true)}>Delete</DeleteButton>
|
||||
)}
|
||||
</Grid>
|
||||
<Grid size={{ xs: 7 }} container justifyContent="flex-end">
|
||||
{mode === "add" ? (
|
||||
<React.Fragment>
|
||||
<Button onClick={close} color="primary">
|
||||
<Typography variant="subtitle2" color="textPrimary">
|
||||
Cancel
|
||||
</Typography>
|
||||
<Typography variant="subtitle2" color="textPrimary">
|
||||
Cancel
|
||||
</Typography>
|
||||
</Button>
|
||||
{activeStep === steps.length - 1 ? (
|
||||
<Button color="primary" onClick={addComponent} disabled={!formValid}>
|
||||
|
|
@ -850,14 +850,6 @@ export default function ComponentSettings(props: Props) {
|
|||
) : (
|
||||
<React.Fragment>
|
||||
<CancelSubmit onSubmit={updateComponent} onCancel={close} submitDisabled={!canEdit || !formValid}/>
|
||||
{/* <Button onClick={close} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
{canEdit && (
|
||||
<Button onClick={updateComponent} color="primary" disabled={!formValid}>
|
||||
Submit
|
||||
</Button>
|
||||
)} */}
|
||||
</React.Fragment>
|
||||
)}
|
||||
</Grid>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue