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

component cards imported

Browse source
This commit is contained in:
Carter 2025-02-21 15:47:45 -06:00
parent 538c807766
commit af4cc08d87
4 changed files with 330 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/component/AddCompsFromDiag.tsx
View file

@ -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

33
src/component/ComponentActions.tsx
View file

@ -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">

29
src/component/UnitMeasurementSummary.tsx
View file

@ -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"