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

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"