brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

got sen5x overlays working

Browse source
This commit is contained in:
Carter 2025-05-01 11:03:43 -06:00
parent deb8983b1e
commit bfd3b6bb5f
2 changed files with 77 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

145
src/common/StatusSen5x.tsx
View file

@ -34,6 +34,7 @@ const useStyles = makeStyles((theme: Theme) => {
transition: 'opacity 0.5s ease, transform 0.5s ease', transition: 'opacity 0.5s ease, transform 0.5s ease',
position: 'absolute', position: 'absolute',
width: '100%', width: '100%',
overflow: "hidden",
// height: '100%', // height: '100%',
}, },
active: { active: {
@ -50,8 +51,8 @@ export default function StatusPlenum(props: Props) {
const { device } = props; const { device } = props;
const classes = useStyles() const classes = useStyles()
const colors = or(device.status.plenum?.overlays.map(overlay => overlay.color), []); const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
const messages = or(device.status.plenum?.overlays.map(overlay => overlay.message), []); const messages = or(device.status.sen5x?.overlays.map(overlay => overlay.message), []);
const [color, setColor] = useState(colors.length > 0 ? colors[0] : ""); const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
const [, setColorIndex] = useState(0) const [, setColorIndex] = useState(0)
@ -63,7 +64,7 @@ export default function StatusPlenum(props: Props) {
setColor(colors[newIndex]); // Use the new index here setColor(colors[newIndex]); // Use the new index here
return newIndex; return newIndex;
}); });
}, 5000); }, 7500);
return () => clearInterval(interval); return () => clearInterval(interval);
}, []); }, []);
@ -116,89 +117,75 @@ export default function StatusPlenum(props: Props) {
return ( return (
<Tooltip title={tooltip()}> <Tooltip title={tooltip()}>
<PulseBox color={color} className={classes.box} > <PulseBox color={color} className={classes.box} >
{/* <Grid2 container direction="column" > */} <Grid2 container direction="column" >
<Grid2 container direction="column" > <Grid2 container direction="column"
<Grid2 container direction="column" className={`${classes.carouselItem} ${
className={`${classes.carouselItem} ${ 0 === currentIndex ? classes.active : classes.inactive
0 === currentIndex ? classes.active : classes.inactive }`}
}`} >
> <Grid2>
<Grid2> <Typography variant="body2" style={{ color: orange[700]}}>
<Typography variant="body2" style={{ color: orange[700]}}> {device.status.sen5x?.temperature.toFixed(1)}°C
{device.status.sen5x?.temperature.toFixed(1)}°C </Typography>
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: blue[700]}}>
{device.status.sen5x?.humidity.toFixed(1)}%
</Typography>
</Grid2>
</Grid2> </Grid2>
<Grid2>
<Grid2 container direction="column" <Typography variant="body2" style={{ color: blue[700]}}>
className={`${classes.carouselItem} ${ {device.status.sen5x?.humidity.toFixed(1)}%
1 === currentIndex ? classes.active : classes.inactive </Typography>
}`}
>
<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> </Grid2>
</Grid2>
<Grid2 container direction="column"
className={`${classes.carouselItem} ${ <Grid2 container direction="column"
2 === currentIndex ? classes.active : classes.inactive className={`${classes.carouselItem} ${
}`} 1 === currentIndex ? classes.active : classes.inactive
> }`}
<Grid2> >
<Typography variant="body2" style={{ color: green[500]}}> <Grid2>
{device.status.sen5x?.dust_4ug.toFixed(1)}ug/m3 <Typography variant="body2" style={{ color: green[300]}}>
</Typography> {device.status.sen5x?.dust_1ug.toFixed(1)}ug/m3
</Grid2> </Typography>
<Grid2>
<Typography variant="body2" style={{ color: green[600]}}>
{device.status.sen5x?.dust_10ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
</Grid2> </Grid2>
<Grid2>
<Grid2 container direction="column" <Typography variant="body2" style={{ color: green[400]}}>
className={`${classes.carouselItem} ${ {device.status.sen5x?.dust_2ug.toFixed(1)}ug/m3
3 === currentIndex ? classes.active : classes.inactive </Typography>
}`}
>
<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>
</Grid2> </Grid2>
{/* <Grid2> <Grid2 container direction="column"
<Typography variant="body2" style={{ color: orange[700]}}> className={`${classes.carouselItem} ${
{device.status.sen5x?.temperature.toFixed(1)}°C 2 === currentIndex ? classes.active : classes.inactive
</Typography> }`}
>
<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>
<Grid2>
<Typography variant="body2" style={{ color: blue[700]}}> <Grid2 container direction="column"
{device.status.sen5x?.humidity.toFixed(1)}% className={`${classes.carouselItem} ${
</Typography> 3 === currentIndex ? classes.active : classes.inactive
</Grid2> */} }`}
{/* </Grid2> */} >
<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> </PulseBox>
</Tooltip> </Tooltip>
) )

30
src/component/ComponentSettings.tsx
View file

@ -307,11 +307,11 @@ export default function ComponentSettings(props: Props) {
if (cableID > 0) component.settings.addressType = cableID + 8; if (cableID > 0) component.settings.addressType = cableID + 8;
componentAPI componentAPI
.add(device.id(), component.settings, as) .add(device.id(), component.settings, as)
.then((response: any) => { .then((_response: any) => {
success(component.name() + " was successfully added!"); success(component.name() + " was successfully added!");
refresh(); refresh();
}) })
.catch((err: any) => { .catch((_err: any) => {
error("Error occured while adding " + component.name() + "."); error("Error occured while adding " + component.name() + ".");
}) })
.finally(() => close()); .finally(() => close());
@ -321,21 +321,21 @@ export default function ComponentSettings(props: Props) {
const component = formComponent; const component = formComponent;
componentAPI componentAPI
.update(device.id(), component.settings, getContextKeys(), getContextTypes(), as) .update(device.id(), component.settings, getContextKeys(), getContextTypes(), as)
.then((response: any) => { .then((_response: any) => {
success(component.name() + " was successfully updated!"); success(component.name() + " was successfully updated!");
let updatedPrefs = pond.DeviceComponentPreferences.create(); let updatedPrefs = pond.DeviceComponentPreferences.create();
updatedPrefs.excludedNodes = excludedNodes; updatedPrefs.excludedNodes = excludedNodes;
deviceAPI deviceAPI
.updateComponentPreferences(device.id(), component.key(), updatedPrefs, undefined, undefined, as) .updateComponentPreferences(device.id(), component.key(), updatedPrefs, undefined, undefined, as)
.then(resp => { .then(_resp => {
console.log("Preferences updated"); console.log("Preferences updated");
}) })
.catch(err => { .catch(_err => {
console.log("Preferences failed to update"); console.log("Preferences failed to update");
}); });
refresh(); refresh();
}) })
.catch((err: any) => { .catch((_err: any) => {
error("Error occured while updating " + component.name() + "."); error("Error occured while updating " + component.name() + ".");
}) })
.finally(() => { .finally(() => {
@ -346,7 +346,7 @@ export default function ComponentSettings(props: Props) {
const removeComponent = () => { const removeComponent = () => {
componentAPI componentAPI
.remove(device.id(), formComponent.key(), getContextKeys(), getContextTypes(), as) .remove(device.id(), formComponent.key(), getContextKeys(), getContextTypes(), as)
.then((response: any) => { .then((_response: any) => {
success(formComponent.name() + " was successfully removed!"); success(formComponent.name() + " was successfully removed!");
refresh(); refresh();
}) })
@ -826,16 +826,16 @@ export default function ComponentSettings(props: Props) {
Back Back
</Button> </Button>
) : ( ) : (
<DeleteButton onClick={() => setRemoveDialogOpen(true)}>Delete</DeleteButton> <DeleteButton disabled={!canEdit} onClick={() => setRemoveDialogOpen(true)}>Delete</DeleteButton>
)} )}
</Grid> </Grid>
<Grid size={{ xs: 7 }} container justifyContent="flex-end"> <Grid size={{ xs: 7 }} container justifyContent="flex-end">
{mode === "add" ? ( {mode === "add" ? (
<React.Fragment> <React.Fragment>
<Button onClick={close} color="primary"> <Button onClick={close} color="primary">
<Typography variant="subtitle2" color="textPrimary"> <Typography variant="subtitle2" color="textPrimary">
Cancel Cancel
</Typography> </Typography>
</Button> </Button>
{activeStep === steps.length - 1 ? ( {activeStep === steps.length - 1 ? (
<Button color="primary" onClick={addComponent} disabled={!formValid}> <Button color="primary" onClick={addComponent} disabled={!formValid}>
@ -850,14 +850,6 @@ export default function ComponentSettings(props: Props) {
) : ( ) : (
<React.Fragment> <React.Fragment>
<CancelSubmit onSubmit={updateComponent} onCancel={close} submitDisabled={!canEdit || !formValid}/> <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> </React.Fragment>
)} )}
</Grid> </Grid>