component cards imported
This commit is contained in:
Carter
parent
538c807766
commit
af4cc08d87
4 changed files with 330 additions and 62 deletions
|
|
@ -3,12 +3,10 @@ import {
|
|||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
makeStyles,
|
||||
Step,
|
||||
StepLabel,
|
||||
Stepper,
|
||||
createStyles,
|
||||
Grid,
|
||||
Grid2 as Grid,
|
||||
FormControlLabel,
|
||||
Switch,
|
||||
Table,
|
||||
|
|
@ -19,19 +17,20 @@ import {
|
|||
Box,
|
||||
Typography,
|
||||
Checkbox
|
||||
} from "@material-ui/core";
|
||||
} from "@mui/material";
|
||||
|
||||
import ResponsiveDialog from "common/ResponsiveDialog";
|
||||
import { Component, Device } from "models";
|
||||
import { pond, quack } from "protobuf-ts/pond";
|
||||
import { useComponentAPI, useSnackbar } from "providers";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { getThemeType } from "theme";
|
||||
import { CableInfo } from "./ComponentDiagnostics";
|
||||
import ComponentForm from "./ComponentForm";
|
||||
import { getThemeType } from "theme/themeType";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
|
||||
const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
const useStyles = makeStyles(() => {
|
||||
return ({
|
||||
buttons: {
|
||||
marginLeft: 5,
|
||||
marginRight: 5
|
||||
|
|
@ -48,7 +47,7 @@ const useStyles = makeStyles(() =>
|
|||
padding: 0
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
|
|
@ -147,8 +146,8 @@ export default function AddCompsFromDiag(props: Props) {
|
|||
const simpleActions = () => {
|
||||
return (
|
||||
<DialogActions>
|
||||
<Grid container direction="row" justify="space-between">
|
||||
<Grid item>
|
||||
<Grid container direction="row" justifyContent="space-between">
|
||||
<Grid>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
|
|
@ -158,7 +157,7 @@ export default function AddCompsFromDiag(props: Props) {
|
|||
Cancel
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Grid>
|
||||
<Button
|
||||
className={classes.buttons}
|
||||
variant="contained"
|
||||
|
|
@ -177,8 +176,8 @@ export default function AddCompsFromDiag(props: Props) {
|
|||
const advancedActions = () => {
|
||||
return (
|
||||
<DialogActions>
|
||||
<Grid container direction="row" justify="space-between">
|
||||
<Grid item>
|
||||
<Grid container direction="row" justifyContent="space-between">
|
||||
<Grid>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
|
|
@ -188,7 +187,7 @@ export default function AddCompsFromDiag(props: Props) {
|
|||
Cancel
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Grid>
|
||||
{currentStep !== 0 && (
|
||||
<Button
|
||||
className={classes.buttons}
|
||||
|
|
@ -328,9 +327,9 @@ export default function AddCompsFromDiag(props: Props) {
|
|||
close();
|
||||
}}>
|
||||
<DialogTitle>
|
||||
<Grid container direction="row" justify="space-between">
|
||||
<Grid item>Port {port} Components</Grid>
|
||||
<Grid item>
|
||||
<Grid container direction="row" justifyContent="space-between">
|
||||
<Grid >Port {port} Components</Grid>
|
||||
<Grid >
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
import {
|
||||
createStyles,
|
||||
Divider,
|
||||
IconButton,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
makeStyles,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Theme,
|
||||
Tooltip
|
||||
} from "@material-ui/core";
|
||||
import { green, teal } from "@material-ui/core/colors";
|
||||
import { Theme } from "@material-ui/core/styles/createMuiTheme";
|
||||
import { AddCircle, DeleteOutline, MoreVert, SaveAlt, Settings } from "@material-ui/icons";
|
||||
} from "@mui/material";
|
||||
import { AddCircle, DeleteOutline, MoreVert, SaveAlt, Settings } from "@mui/icons-material";
|
||||
import ExportDataSettings from "component/ExportDataSettings";
|
||||
import InteractionSettings from "interactions/InteractionSettings";
|
||||
import { Component, Device } from "models";
|
||||
|
|
@ -23,9 +20,11 @@ import { useGlobalState } from "providers";
|
|||
import React, { useState } from "react";
|
||||
import { or } from "utils/types";
|
||||
import ComponentSettings from "./ComponentSettings";
|
||||
import { green, teal } from "@mui/material/colors";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
const useStyles = makeStyles((_theme: Theme) => {
|
||||
return ({
|
||||
addIcon: {
|
||||
color: green["500"],
|
||||
"&:hover": {
|
||||
|
|
@ -48,7 +47,7 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||
color: "var(--status-alert)"
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
interface Props {
|
||||
device: Device;
|
||||
|
|
@ -83,7 +82,7 @@ export default function ComponentActions(props: Props) {
|
|||
const [anchorEl, setAnchorEl] = useState<Element | null>(null);
|
||||
const [componentSettingsMode, setComponentSettingsMode] = useState<string>("");
|
||||
const [isJSON, setIsJSON] = useState(false);
|
||||
const [{ user, newStructure }] = useGlobalState();
|
||||
const [{ user }] = useGlobalState();
|
||||
|
||||
const openMoreMenu = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
|
|
@ -115,7 +114,7 @@ export default function ComponentActions(props: Props) {
|
|||
onClose={closeMoreMenu}
|
||||
disableAutoFocusItem>
|
||||
{canAddInteraction && (
|
||||
<MenuItem dense onClick={() => setIsAddInteractionOpen(true)} button divider>
|
||||
<MenuItem dense onClick={() => setIsAddInteractionOpen(true)} divider>
|
||||
<ListItemIcon>
|
||||
<AddCircle className={classes.addIcon} />
|
||||
</ListItemIcon>
|
||||
|
|
@ -129,7 +128,7 @@ export default function ComponentActions(props: Props) {
|
|||
setIsExportDataOpen(true);
|
||||
}}>
|
||||
<ListItemIcon>
|
||||
<SaveAlt fontSize="default" className={classes.exportDataIcon} />
|
||||
<SaveAlt className={classes.exportDataIcon} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Export Data" />
|
||||
</MenuItem>
|
||||
|
|
@ -137,7 +136,7 @@ export default function ComponentActions(props: Props) {
|
|||
{canEdit && (
|
||||
<MenuItem dense onClick={() => openComponentSettingsDialog("remove")}>
|
||||
<ListItemIcon>
|
||||
<DeleteOutline fontSize="default" className={classes.red} />
|
||||
<DeleteOutline className={classes.red} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Delete" />
|
||||
</MenuItem>
|
||||
|
|
@ -173,7 +172,7 @@ export default function ComponentActions(props: Props) {
|
|||
refreshCallback={refreshCallback}
|
||||
canEdit={canEdit}
|
||||
/>
|
||||
<ExportDataSettings
|
||||
{/* <ExportDataSettings
|
||||
device={device}
|
||||
component={component}
|
||||
isDialogOpen={isExportDataOpen}
|
||||
|
|
@ -181,9 +180,9 @@ export default function ComponentActions(props: Props) {
|
|||
initialStartDate={initialStartDate}
|
||||
initialEndDate={initialEndDate}
|
||||
isJSON={isJSON}
|
||||
newMeasurements={newStructure}
|
||||
// newMeasurements={newStructure}
|
||||
user={user}
|
||||
/>
|
||||
/> */}
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
|
@ -195,7 +194,7 @@ export default function ComponentActions(props: Props) {
|
|||
aria-label="Component Settings"
|
||||
onOpen={event => event.stopPropagation()}>
|
||||
<IconButton color="default" onClick={() => openComponentSettingsDialog("")}>
|
||||
<Settings fontSize="default" />
|
||||
<Settings />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="More">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
import { Box, Grid, Typography, makeStyles, createStyles, Theme } from "@material-ui/core";
|
||||
import { Box, Grid2 as Grid, Typography, Theme, Divider } from "@mui/material";
|
||||
import GrainDescriber from "grain/GrainDescriber";
|
||||
import { Component } from "models";
|
||||
import { convertedUnitMeasurement } from "models/UnitMeasurement";
|
||||
import moment from "moment";
|
||||
import { pond } from "protobuf-ts/pond";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
// import Divider from "@material-ui/core/Divider";
|
||||
import { Plenum } from "models/Plenum";
|
||||
import { Pressure } from "models/Pressure";
|
||||
import { GrainCable } from "models/GrainCable";
|
||||
import { extension, Summary } from "pbHelpers/ComponentType";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
|
||||
interface Props {
|
||||
component: Component | Plenum | Pressure | GrainCable;
|
||||
|
|
@ -24,8 +25,8 @@ interface Props {
|
|||
excludedNodes?: number[];
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
return ({
|
||||
"@keyframes ripple": {
|
||||
from: {
|
||||
transform: "scale(.8)",
|
||||
|
|
@ -50,7 +51,7 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||
margin: theme.spacing(1)
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
export default function UnitMeasurementSummary(props: Props) {
|
||||
const {
|
||||
|
|
@ -112,7 +113,7 @@ export default function UnitMeasurementSummary(props: Props) {
|
|||
let grain = GrainDescriber(component.settings.grainType);
|
||||
return (
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Typography variant={largeText ? "body1" : "caption"} color="textPrimary">
|
||||
{summaries.map((summary: Summary, index: number) => {
|
||||
let sumVal = summary.value;
|
||||
|
|
@ -133,7 +134,7 @@ export default function UnitMeasurementSummary(props: Props) {
|
|||
if (found) {
|
||||
overlays.push(
|
||||
<React.Fragment key={"overlay" + index}>
|
||||
<Grid item>
|
||||
<Grid >
|
||||
<Box
|
||||
width="20px"
|
||||
height="20px"
|
||||
|
|
@ -142,7 +143,7 @@ export default function UnitMeasurementSummary(props: Props) {
|
|||
style={{ background: overlay.colour }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Grid >
|
||||
<Typography
|
||||
variant={largeText ? "body1" : "caption"}
|
||||
component="span"
|
||||
|
|
@ -178,7 +179,7 @@ export default function UnitMeasurementSummary(props: Props) {
|
|||
</Typography>
|
||||
)}
|
||||
{!props.omitTime && (
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Typography color="textSecondary" variant={largeText ? "body1" : "caption"}>
|
||||
{moment(timestamp).fromNow()}
|
||||
</Typography>
|
||||
|
|
@ -186,7 +187,7 @@ export default function UnitMeasurementSummary(props: Props) {
|
|||
)}
|
||||
{overlays.length > 0 && (
|
||||
<React.Fragment>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Divider variant="middle" className={classes.divider} />
|
||||
</Grid>
|
||||
<Grid container direction="row">
|
||||
|
|
@ -205,11 +206,11 @@ export default function UnitMeasurementSummary(props: Props) {
|
|||
const blacklist: Array<any> = [];
|
||||
const filteredSummaries = summaries.filter((item: any) => !blacklist.includes(item.label));
|
||||
return (
|
||||
<Grid container direction="row" justify={centered ? "center" : "flex-start"} spacing={1}>
|
||||
<Grid container direction="row" justifyContent={centered ? "center" : "flex-start"} spacing={1}>
|
||||
{filteredSummaries.map((summary: Summary, i: number) => {
|
||||
let sumVal = summary.value;
|
||||
return (
|
||||
<Grid item key={"summary-" + i}>
|
||||
<Grid key={"summary-" + i}>
|
||||
{summary.label}
|
||||
{summary.error && <span style={{ color: "red" }}>{" [error(s)]"}</span>}
|
||||
{": "}
|
||||
|
|
@ -257,7 +258,7 @@ export default function UnitMeasurementSummary(props: Props) {
|
|||
if (found) {
|
||||
overlays.push(
|
||||
<React.Fragment key={"overlay" + i}>
|
||||
<Grid item>
|
||||
<Grid >
|
||||
<Box
|
||||
width="20px"
|
||||
height="20px"
|
||||
|
|
@ -266,7 +267,7 @@ export default function UnitMeasurementSummary(props: Props) {
|
|||
style={{ background: overlay.colour }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Grid >
|
||||
<Typography
|
||||
variant={largeText ? "body1" : "caption"}
|
||||
component="span"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Button, Grid2 } from "@mui/material";
|
||||
import { Component, Device, User } from "models";
|
||||
import { Button, Checkbox, Divider, FormControlLabel, Grid2 as Grid, List, ListItem, Typography } from "@mui/material";
|
||||
import { Component, Device, Interaction, User } from "models";
|
||||
import { getContextKeys, getContextTypes } from "pbHelpers/Context";
|
||||
import { useDeviceAPI, useGlobalState, useSnackbar } from "providers";
|
||||
import { useEffect, useState } from "react";
|
||||
|
|
@ -9,11 +9,16 @@ import { useMobile } from "hooks";
|
|||
import LoadingScreen from "app/LoadingScreen";
|
||||
import SmartBreadcrumb from "common/SmartBreadcrumb";
|
||||
import DeviceActions from "device/DeviceActions";
|
||||
import { pond } from "protobuf-ts/pond";
|
||||
import { pond, quack } from "protobuf-ts/pond";
|
||||
import { cloneDeep } from "lodash";
|
||||
import DeviceOverview from "device/DeviceOverview";
|
||||
import { DeviceAvailabilityMap, FindAvailablePositions, OffsetAvailabilityMap } from "pbHelpers/DeviceAvailability";
|
||||
import AddComponentManualDialog from "component/AddComponentManualDialog";
|
||||
import ComponentCard from "component/ComponentCard";
|
||||
import { sameComponentID, sortComponents } from "pbHelpers/Component";
|
||||
import { isController } from "pbHelpers/ComponentType";
|
||||
import { or } from "utils";
|
||||
import ComponentDiagnostics from "component/ComponentDiagnostics";
|
||||
|
||||
export default function DevicePage() {
|
||||
const deviceAPI = useDeviceAPI()
|
||||
|
|
@ -28,15 +33,19 @@ export default function DevicePage() {
|
|||
const [permissions, setPermissions] = useState<pond.Permission[]>([])
|
||||
const [preferences, setPreferences] = useState<pond.DevicePreferences>(pond.DevicePreferences.create())
|
||||
const [tags, setTags] = useState<pond.Tag[]>([]);
|
||||
const [interactions, setInteractions] = useState<Interaction[]>([]);
|
||||
const [prefsMap, setPrefsMap] = useState<Map<string, pond.DeviceComponentPreferences>>(new Map());
|
||||
|
||||
const [cellularUsage, _setCellularUsage] = useState<number>(0);
|
||||
const [cellularStatus, _setCellularStatus] = useState<string>("");
|
||||
|
||||
const [availablePositions, setAvailablePositions] = useState<DeviceAvailabilityMap>(new Map());
|
||||
const [availableOffsets, setAvailableOffsets] = useState<OffsetAvailabilityMap>(new Map());
|
||||
const [displayOrder, setDisplayOrder] = useState<string[]>([]);
|
||||
|
||||
// const [components, setComponents] = useState<Map<string, Component>>(new Map());
|
||||
const [components, setComponents] = useState<Component[]>([]);
|
||||
const [components, setComponents] = useState<Map<string, Component>>(new Map());
|
||||
const [diagnosticComponents, setDiagnosticComponents] = useState<Component[]>([]);
|
||||
// const [components, setComponents] = useState<Component[]>([]);
|
||||
|
||||
const [addComponentManualDialogOpen, setAddComponentManualDialogOpen] = useState(false)
|
||||
|
||||
|
|
@ -70,7 +79,42 @@ export default function DevicePage() {
|
|||
device.settings.product
|
||||
);
|
||||
setAvailablePositions(available.GetAvailability());
|
||||
setComponents(newComps)
|
||||
let rawComponents: Array<any> = or(resp.data.components, []);
|
||||
let rComponents: Map<string, Component> = new Map();
|
||||
let diagComponents: Component[] = [];
|
||||
rawComponents.forEach((rawComponent: any) => {
|
||||
let component = Component.any(rawComponent);
|
||||
rComponents.set(component.key(), component);
|
||||
//check if is a diagnostic component
|
||||
switch (component.type()) {
|
||||
case quack.ComponentType.COMPONENT_TYPE_GRAIN_CABLE:
|
||||
if (component.subType() === quack.GrainCableSubtype.GRAIN_CABLE_SUBTYPE_OPI_DIAG) {
|
||||
diagComponents.push(component);
|
||||
}
|
||||
}
|
||||
});
|
||||
setComponents(rComponents)
|
||||
let interactions: Interaction[] = [];
|
||||
resp.data.interactions.forEach((interaction: pond.Interaction) => {
|
||||
if (
|
||||
interaction.settings &&
|
||||
interaction.settings.nodeOne > interaction.settings.nodeTwo &&
|
||||
interaction.settings.nodeTwo !== 0
|
||||
) {
|
||||
//flip operator and send negative comparitor to save
|
||||
interaction.settings.conditions.forEach(condition => {
|
||||
//coming back from the backend as a string for some reason
|
||||
if (condition.comparison.toString() === "RELATIONAL_OPERATOR_GREATER_THAN") {
|
||||
condition.comparison = quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN;
|
||||
} else {
|
||||
condition.comparison = quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN;
|
||||
}
|
||||
condition.value = condition.value * -1;
|
||||
});
|
||||
}
|
||||
interactions.push(Interaction.any(interaction));
|
||||
});
|
||||
setInteractions(interactions);
|
||||
}).catch(err => {
|
||||
setDevice(Device.create());
|
||||
// setComponents(new Map());
|
||||
|
|
@ -95,6 +139,10 @@ export default function DevicePage() {
|
|||
.finally(() => setLoading(false));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log(components)
|
||||
}, [components])
|
||||
|
||||
useEffect(() => {
|
||||
loadDevice()
|
||||
}, [deviceID])
|
||||
|
|
@ -126,13 +174,233 @@ export default function DevicePage() {
|
|||
return usage;
|
||||
};
|
||||
|
||||
const displayedComponentsBlacklist = [
|
||||
quack.ComponentType.COMPONENT_TYPE_POWER,
|
||||
quack.ComponentType.COMPONENT_TYPE_MODEM
|
||||
];
|
||||
|
||||
const getOrderedComponents = () => {
|
||||
let compsToOrder: Component[] = [];
|
||||
Array.from(components.values()).forEach(comp => {
|
||||
if (!displayedComponentsBlacklist.includes(comp.settings.type)) {
|
||||
compsToOrder.push(comp);
|
||||
}
|
||||
});
|
||||
if (displayOrder.length === compsToOrder.length) {
|
||||
return compsToOrder.sort((a, b: Component) => sortComponents(a, b, displayOrder));
|
||||
} else {
|
||||
return compsToOrder;
|
||||
}
|
||||
};
|
||||
|
||||
const handleComponentChanged = (component: Component) => {
|
||||
let updatedComponents = cloneDeep(components);
|
||||
let updatedComponent = cloneDeep(component);
|
||||
if (updatedComponents.has(updatedComponent.key())) {
|
||||
updatedComponents.set(updatedComponent.key(), updatedComponent);
|
||||
setComponents(updatedComponents);
|
||||
}
|
||||
};
|
||||
|
||||
const componentCards = () => {
|
||||
let orderedComponents = getOrderedComponents();
|
||||
let sensorComponents: JSX.Element[] = [];
|
||||
let controllerComponents: JSX.Element[] = [];
|
||||
//let componentCards = [];
|
||||
//let hasGPS = false;
|
||||
for (let i = 0; i < orderedComponents.length; i++) {
|
||||
let c = orderedComponents[i];
|
||||
if (displayedComponentsBlacklist.includes(c.settings.type)) {
|
||||
continue;
|
||||
}
|
||||
let id: quack.IComponentID = quack.ComponentID.fromObject({
|
||||
type: c.settings.type,
|
||||
addressType: c.settings.addressType,
|
||||
address: c.settings.address
|
||||
});
|
||||
let filteredInteractions = interactions.filter(interaction => {
|
||||
let isSource = false;
|
||||
let isSink = false;
|
||||
if (interaction.settings) {
|
||||
isSource = sameComponentID(interaction.settings.source, id);
|
||||
isSink = sameComponentID(interaction.settings.sink, id);
|
||||
}
|
||||
return isSource || isSink;
|
||||
});
|
||||
// if (id.type === quack.ComponentType.COMPONENT_TYPE_GPS) {
|
||||
// hasGPS = true;
|
||||
// }
|
||||
if (isController(c.settings.type)) {
|
||||
controllerComponents.push(
|
||||
<ComponentCard
|
||||
device={device}
|
||||
availablePositions={availablePositions}
|
||||
availableOffsets={availableOffsets}
|
||||
component={c}
|
||||
components={orderedComponents}
|
||||
interactions={filteredInteractions}
|
||||
permissions={permissions}
|
||||
deviceComponentPreferences={prefsMap.get(c.key())}
|
||||
key={i}
|
||||
refreshCallback={(updatedComponent?: Component) =>
|
||||
updatedComponent ? handleComponentChanged(updatedComponent) : loadDevice()
|
||||
}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
sensorComponents.push(
|
||||
<ComponentCard
|
||||
device={device}
|
||||
availablePositions={availablePositions}
|
||||
availableOffsets={availableOffsets}
|
||||
component={c}
|
||||
components={orderedComponents}
|
||||
interactions={filteredInteractions}
|
||||
permissions={permissions}
|
||||
deviceComponentPreferences={prefsMap.get(c.key())}
|
||||
key={i}
|
||||
refreshCallback={(updatedComponent?: Component) =>
|
||||
updatedComponent ? handleComponentChanged(updatedComponent) : loadDevice()
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<List>
|
||||
<li>
|
||||
<Grid container direction="row" justifyContent="space-between">
|
||||
<Grid >
|
||||
<Typography display="block" variant="h6">
|
||||
Sensors
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid >
|
||||
{/* <FormControlLabel
|
||||
label="Show Errors"
|
||||
control={
|
||||
<Checkbox
|
||||
checked={showErrors}
|
||||
onChange={() => {
|
||||
//setShowErrors(!showErrors);
|
||||
dispatch({ key: "showErrors", value: !showErrors });
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/> */}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</li>
|
||||
<Divider component="li" />
|
||||
<ListItem>
|
||||
<Grid container direction="row" justifyContent="flex-start" spacing={2}>
|
||||
{sensorComponents}
|
||||
</Grid>
|
||||
</ListItem>
|
||||
<li>
|
||||
<Typography display="block" variant="h6">
|
||||
Controls
|
||||
</Typography>
|
||||
</li>
|
||||
<Divider component="li" />
|
||||
<ListItem>
|
||||
<Grid container direction="row" justifyContent="flex-start" spacing={2}>
|
||||
{controllerComponents}
|
||||
</Grid>
|
||||
</ListItem>
|
||||
{device.settings.mutations.length > 0 && (
|
||||
<>
|
||||
<li>
|
||||
<Typography display="block" variant="h6">
|
||||
Calculated Measurements
|
||||
</Typography>
|
||||
</li>
|
||||
<Divider component="li" />
|
||||
<ListItem>
|
||||
<Grid container direction="row" justifyContent="flex-start" spacing={2}>
|
||||
{/* {device.settings.mutations.map((mut, i) => (
|
||||
<DeviceMutationCard
|
||||
key={"mutation" + i}
|
||||
deviceId={device.id()}
|
||||
mutation={mut}
|
||||
showMobile={isMobile}
|
||||
/>
|
||||
))} */}
|
||||
</Grid>
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
{device.settings.product !== pond.DeviceProduct.DEVICE_PRODUCT_NONE &&
|
||||
permissions.includes(pond.Permission.PERMISSION_WRITE) && (
|
||||
<>
|
||||
<li>
|
||||
<Typography display="block" variant="h6">
|
||||
Setup
|
||||
</Typography>
|
||||
</li>
|
||||
<Divider component="li" />
|
||||
<ListItem>
|
||||
<Grid container direction="row" spacing={2}>
|
||||
{isMobile ? (
|
||||
<>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
{/* <DeviceWizard
|
||||
device={device}
|
||||
//permissions={permissions}
|
||||
components={Array.from(components.values())}
|
||||
refreshCallback={load}
|
||||
/> */}
|
||||
</Grid>
|
||||
{diagnosticComponents.map(comp => (
|
||||
<Grid size={{ xs: 12 }} key={comp.key()}>
|
||||
<ComponentDiagnostics
|
||||
component={comp}
|
||||
device={device}
|
||||
refreshCallback={loadDevice}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Grid size={{ xs: 6, sm: 6, lg: 4, xl: 3 }} >
|
||||
{/* <DeviceWizard
|
||||
device={device}
|
||||
//permissions={permissions}
|
||||
components={Array.from(components.values())}
|
||||
refreshCallback={load}
|
||||
/> */}
|
||||
</Grid>
|
||||
<Grid size={{ xs: 6, sm: 6, lg: 8, xl: 9 }} >
|
||||
<Grid container direction="row" spacing={2}>
|
||||
{diagnosticComponents.map(comp => (
|
||||
<Grid size={{ sm: 12, lg: 6, xl: 4 }} key={comp.key()}>
|
||||
<ComponentDiagnostics
|
||||
component={comp}
|
||||
device={device}
|
||||
refreshCallback={loadDevice}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
)}
|
||||
</Grid>
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
</List>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContainer padding={isMobile ? 0 : 2}>
|
||||
<Grid2 container justifyContent={"space-between"}>
|
||||
<Grid2>
|
||||
<Grid container justifyContent={"space-between"}>
|
||||
<Grid>
|
||||
<SmartBreadcrumb />
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<AddComponentManualDialog
|
||||
device={device.id()}
|
||||
open={addComponentManualDialogOpen}
|
||||
|
|
@ -152,18 +420,19 @@ export default function DevicePage() {
|
|||
availablePositions={availablePositions}
|
||||
availableOffsets={availableOffsets}
|
||||
/>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<DeviceOverview
|
||||
device={device}
|
||||
// components={[...components.values()]}
|
||||
components={[...components.values()]}
|
||||
// components={[]}
|
||||
components={components}
|
||||
// components={components}
|
||||
usage={getUsage()}
|
||||
loading={loading}
|
||||
tags={tags}
|
||||
groupID={parseInt(groupID)}
|
||||
/>
|
||||
{componentCards()}
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue