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

device history implemented

Browse source
This commit is contained in:
Carter 2025-02-12 15:11:42 -06:00
parent 53a430d525
commit 2acdd59ac7
12 changed files with 3292 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

976
src/objects/ObjectAlerts.tsx Normal file
View file

@ -0,0 +1,976 @@
import {
Accordion,
AccordionDetails,
AccordionSummary,
Box,
Button,
Card,
Checkbox,
createStyles,
DialogActions,
DialogContent,
DialogTitle,
FormControl,
FormControlLabel,
FormHelperText,
FormLabel,
Grid,
IconButton,
InputAdornment,
List,
ListItem,
ListItemIcon,
ListItemText,
ListSubheader,
makeStyles,
MenuItem,
Select,
TextField,
Theme,
Tooltip,
Typography
} from "@material-ui/core";
import { ExpandMore } from "@material-ui/icons";
import ResponsiveDialog from "common/ResponsiveDialog";
import { Option } from "common/SearchSelect";
import classNames from "classnames";
import { Component, Interaction } from "models";
import moment from "moment";
import { getFriendlyName, getMeasurements } from "pbHelpers/ComponentType";
import { Measurement, Operator } from "pbHelpers/Enums";
import { describeMeasurement } from "pbHelpers/MeasurementDescriber";
import { pond } from "protobuf-ts/pond";
import { quack } from "protobuf-ts/quack";
import { useGlobalState, useInteractionsAPI, useSnackbar } from "providers";
import { useNotificationAPI } from "providers/pond/notificationAPI";
import React, { useEffect, useState } from "react";
import RemoveIcon from "@material-ui/icons/RemoveCircle";
import AddIcon from "@material-ui/icons/AddCircle";
import { green, red } from "@material-ui/core/colors";
import { capitalize, cloneDeep } from "lodash";
import { timeOfDayDescriptor } from "pbHelpers/Interaction";
import { TimePicker } from "@material-ui/pickers";
import { getThemeType } from "theme";
interface Props {
linkedComponents: Map<string, Component>;
componentDevices: Map<string, number>;
objectType: pond.ObjectType;
objectKey: string;
}
interface Alert {
conditions: pond.InteractionCondition[];
components: Component[];
}
const useStyles = makeStyles((theme: Theme) => {
return createStyles({
borderedContainer: {
padding: theme.spacing(1),
marginBottom: theme.spacing(2),
border: "1px solid rgba(255, 255, 255, 0.12)",
borderRadius: "4px"
},
greenButton: {
color: green["600"]
},
redButton: {
color: red["600"]
},
noPadding: {
padding: 0
},
timeRange: {
fontSize: "0.875em",
marginTop: "20px"
},
dark: {
backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(50, 50, 50)",
padding: 5
},
light: {
backgroundColor: getThemeType() === "light" ? "rgb(235, 235, 235)" : "rgb(60, 60, 60)",
padding: 5
}
});
});
export default function ObjectAlerts(props: Props) {
const { linkedComponents, componentDevices, objectKey, objectType } = props;
const classes = useStyles();
const { openSnack } = useSnackbar();
const [{ as }] = useGlobalState();
const interactionsAPI = useInteractionsAPI();
const [interactions, setInteractions] = useState<Interaction[]>([]);
const [typeOptions, setTypeOptions] = useState<Option[]>([]);
const [alerts, setAlerts] = useState<Alert[]>([]);
//the interaction key to the component it is set on
const [interactionComponent, setInteractionComponent] = useState<Map<string, string>>(new Map());
//state variables for notifications
const notificationAPI = useNotificationAPI();
const [recentNotifications, setRecentNotifications] = useState<pond.Notification[]>([]);
const [notificationsLoading, setNotificationsLoading] = useState(false);
const [totalNotifications, setTotalNotifications] = useState(0);
//stat variables for adding new alerts
const [newAlertOpen, setNewAlertOpen] = useState(false);
const [selectedAlertComponents, setSelectedAlertComponents] = useState<string[]>([]);
const [newAlertComponentType, setNewAlertComponentType] = useState<quack.ComponentType>(
quack.ComponentType.COMPONENT_TYPE_INVALID
);
const [conditions, setConditions] = useState<pond.InteractionCondition[]>([]);
const [nodeOptions, setNodeOptions] = useState<JSX.Element[]>([]);
const [subtypeDropdown, setSubtypeDropdown] = useState<number>(0);
//condition value strings - so that decimals are easier to type into the field
const [valStrings, setValStrings] = useState(["0", "0"]);
//the nodes for the subnode interactions
const [nodeOne, setNodeOne] = useState(0);
const [nodeTwo, setNodeTwo] = useState(0);
//schedule variables
const [schedule, setSchedule] = useState(
pond.InteractionSchedule.create({
weekdays: ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"]
})
);
useEffect(() => {
//loop through the linked components to get each of their interactions
//TODO-CS: consider making an api function to get the interactions for multiple components, possibly based off objects, in one call,
//to get all interactions for bin components this would solve the issue of making multiple calls as well as not having to use async await
let newInteractions: Interaction[] = [];
let icMap: Map<string, string> = new Map();
let includedOps: quack.ComponentType[] = [];
let typeOps: Option[] = [];
let index = 0;
//use async to make sure to wait for the response from the api call and have the interactions set before going to get the next one
//this prevents seperate responses from assigning to the array without knowing about interactions from those seperate responses
//for example: without async two responses come back at the same time, one has two interactions and another has one but, neither have put their interactions
//into the array yet so they both reference an empty array, the first response puts its two into an empty array and sets it but then the next one also puts
//its response into an empty array as well and sets it causing the first two to be lost
linkedComponents.forEach(async (comp, key) => {
index++;
//get the interactions for the component
let device = componentDevices.get(key);
if (device !== undefined) {
await interactionsAPI.listInteractionsByComponent(device, comp.location()).then(resp => {
if (resp.length > 0) {
resp.forEach(interaction => {
icMap.set(interaction.key(), key);
});
newInteractions = newInteractions.concat(resp);
}
});
}
//set the state variables if it is the last one in the list
if (index === linkedComponents.size) {
setInteractionComponent(icMap);
setInteractions([...newInteractions]);
}
//use the component type to the type options if it is not already present
if (!includedOps.includes(comp.type())) {
includedOps.push(comp.type());
typeOps.push({
label: getFriendlyName(comp.type()),
value: comp.type()
});
}
});
setTypeOptions(typeOps);
}, [linkedComponents, interactionsAPI, componentDevices]);
const matchConditions = (interaction: Interaction, alert: Alert) => {
//if the number of conditions are not the same they are different
if (interaction.settings.conditions.length !== alert.conditions.length) {
return false;
}
//continure with the comparison
let matching = true;
interaction.settings.conditions.forEach((condition, i) => {
if (
condition.comparison !== alert.conditions[i].comparison ||
condition.measurementType !== alert.conditions[i].measurementType ||
condition.value !== alert.conditions[i].value
) {
matching = false;
}
});
return matching;
};
//build the alerts to display
useEffect(() => {
//loop through the interactions
let currentAlerts: Alert[] = [];
interactions.forEach(interaction => {
//if the interaction sends notifications
if (interaction.settings.notifications && interaction.settings.notifications.notify) {
//determine if the interaction already has an alert in the alerts array
let similarAlert: number = -1;
currentAlerts.forEach((alert, i) => {
if (matchConditions(interaction, alert)) {
similarAlert = i;
}
});
//if no current alert matched the conditions add a new alert to the array
let compKey = interactionComponent.get(interaction.key());
if (compKey) {
let component = linkedComponents.get(compKey);
if (component) {
if (similarAlert === -1) {
let newAlert: Alert = {
conditions: interaction.settings.conditions,
components: [component]
};
currentAlerts.push(newAlert);
} else {
currentAlerts[similarAlert].components.push(component);
}
}
}
}
});
setAlerts(currentAlerts);
}, [interactions, interactionComponent, linkedComponents]);
//get the notifications for the components on an object
useEffect(() => {
if (notificationsLoading) return;
setNotificationsLoading(true);
notificationAPI
.listObjectNotifications(objectKey, objectType, 10, 0, undefined, undefined, undefined, as)
.then(resp => {
setRecentNotifications(resp.data.notifications);
setTotalNotifications(resp.data.total);
})
.catch(err => {})
.finally(() => {
setNotificationsLoading(false);
});
}, [objectKey, objectType, notificationAPI]); //eslint-disable-line react-hooks/exhaustive-deps
//use the selected components to determine the lowest amount of nodes for the options
useEffect(() => {
setNodeOne(0);
setNodeTwo(0);
setSubtypeDropdown(0);
let nodeCount = 12; //start with the maximum number of nodes for a cable
linkedComponents.forEach(comp => {
if (selectedAlertComponents.includes(comp.key())) {
if (comp.lastMeasurement[0] && comp.lastMeasurement[0].values[0]) {
let nodes = comp.lastMeasurement[0].values[0].values.length;
nodeCount = nodes < nodeCount ? nodes : nodeCount;
}
}
});
let options = [];
for (let i = 0; i <= nodeCount; i++) {
options.push(
<MenuItem key={i} value={i}>
{i === 0 ? "None" : "Node " + i}
</MenuItem>
);
}
setNodeOptions(options);
}, [linkedComponents, selectedAlertComponents]);
const loadMoreNotifications = () => {
console.log("load more");
let current = recentNotifications;
setNotificationsLoading(true);
notificationAPI
.listObjectNotifications(
objectKey,
objectType,
10,
current.length,
undefined,
undefined,
undefined,
as
)
.then(resp => {
if (resp.data.notifications.length > 0) {
let c = current.concat(resp.data.notifications);
setRecentNotifications([...c]);
}
})
.catch(err => {})
.finally(() => {
setNotificationsLoading(false);
});
};
const readableCondition = (condition: pond.InteractionCondition) => {
let describer = describeMeasurement(condition.measurementType);
let type = describer.label();
let comparison =
condition.comparison === quack.RelationalOperator.RELATIONAL_OPERATOR_EQUAL_TO
? "Exactly"
: condition.comparison === quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN
? "Above"
: "Below";
let value = describer.toDisplay(condition.value);
return (
<Box>
<Typography>{type + " " + comparison + " " + value + describer.GetUnit()}</Typography>
</Box>
);
};
const alertAccordion = (alert: Alert) => {
return (
<Accordion style={{ width: "100%" }}>
<AccordionSummary expandIcon={<ExpandMore />}>
<Grid container direction="column">
{alert.conditions.map((condition, i) => (
<Grid item key={i}>
{readableCondition(condition)}
</Grid>
))}
</Grid>
</AccordionSummary>
<AccordionDetails>
<List>
<ListSubheader>Reporting Components</ListSubheader>
{alert.components.map((comp, i) => (
<ListItem key={i}>{comp.name()}</ListItem>
))}
</List>
</AccordionDetails>
</Accordion>
);
};
const addInteractionToComponents = () => {
//array of device and component ids ie, [4:9-5-12, 4:9-5-13, 3:9-5-12]
let compIds: string[] = [];
selectedAlertComponents.forEach(comp => {
let devID = componentDevices.get(comp);
let component = linkedComponents.get(comp);
if (devID && component) {
compIds.push(devID + ":" + component.locationString());
}
});
let newAlert = pond.InteractionSettings.create();
newAlert.conditions = conditions;
newAlert.instance = 1;
newAlert.schedule = schedule;
newAlert.subtype = Interaction.create().subtypeFromNodes(nodeOne, nodeTwo);
newAlert.result = pond.InteractionResult.create({
type: quack.InteractionResultType.INTERACTION_RESULT_TYPE_REPORT
});
newAlert.notifications = pond.InteractionNotifications.create({
notify: true
});
interactionsAPI
.addInteractionToComponents(compIds, newAlert)
.then(resp => {
openSnack("interaction added to selected components");
})
.catch(err => {
openSnack("there was a problem adding the interaction to the selected components");
});
setNewAlertOpen(false);
};
//display the components that match the type that was selected for the new alert
const listMatchingComponents = () => {
let matching: Component[] = [];
linkedComponents.forEach(comp => {
if (comp.type() === newAlertComponentType) {
matching.push(comp);
}
});
return (
<List>
{matching.map(comp => (
<ListItem key={comp.key()}>
<ListItemIcon>
<Checkbox
checked={selectedAlertComponents.includes(comp.key())}
onChange={(_, checked) => {
let selected = selectedAlertComponents;
if (checked) {
selected.push(comp.key());
} else {
selected.splice(selected.indexOf(comp.key()), 1);
}
setSelectedAlertComponents([...selected]);
}}
/>
</ListItemIcon>
<ListItemText>{comp.name()}</ListItemText>
</ListItem>
))}
</List>
);
};
const availableMeasurementTypes = (type: quack.ComponentType): quack.MeasurementType[] => {
return getMeasurements(type).map(m => m.measurementType);
};
const initialConditions = (type: quack.ComponentType): pond.InteractionCondition[] => {
let measurementType = availableMeasurementTypes(type)[0];
let condition = pond.InteractionCondition.create({
measurementType: measurementType,
comparison: measurementType === Measurement.boolean ? Operator.equals : Operator.less,
value: 0
});
return [condition];
};
const measurementTypeMenuItems = () => {
return availableMeasurementTypes(newAlertComponentType).map(measurementType => (
<MenuItem key={measurementType} value={measurementType}>
{describeMeasurement(measurementType).label()}
</MenuItem>
));
};
const changeCondition = (newCondition: pond.InteractionCondition, index: number) => {
let c = conditions;
c[index] = newCondition;
setConditions([...c]);
};
const conditionGroup = (condition: pond.InteractionCondition, index: number) => {
let measurementType = condition.measurementType;
let describer = describeMeasurement(measurementType, newAlertComponentType);
let isBoolean = condition.measurementType === Measurement.boolean;
return (
<React.Fragment key={index}>
<Grid
key={"interaction"}
container
direction="row"
justify="center"
alignItems="center"
spacing={2}>
{index > 0 && (
<Grid item xs={12}>
<Typography align="center">AND</Typography>
</Grid>
)}
<Grid item xs={10} sm={4}>
<TextField
select
id="measurementType"
required={true}
label=""
helperText="Measurement"
//error={!isMeasurementTypeValid(interaction.settings.conditions[index].measurementType)}
//disabled={!isSourceValid(interaction.settings.source) || !canEdit}
value={condition.measurementType}
onChange={event => {
condition.measurementType = +event.target.value;
changeCondition(condition, index);
}}
autoFocus={false}
margin="dense"
variant="standard"
fullWidth
InputLabelProps={{ shrink: true }}>
{measurementTypeMenuItems()}
</TextField>
</Grid>
<Grid item xs={10} sm={3}>
<TextField
select
id="comparison"
required={true}
label=""
helperText="Comparator"
//disabled={!isSourceValid(interaction.settings.source) || isBoolean || !canEdit}
value={condition.comparison}
onChange={event => {
condition.comparison = +event.target.value;
changeCondition(condition, index);
}}
autoFocus={false}
margin="dense"
variant="standard"
fullWidth
InputLabelProps={{ shrink: true }}>
{!isBoolean && [
<MenuItem key={2} value={Operator.less}>
{"is below"}
</MenuItem>,
<MenuItem key={3} value={Operator.greater}>
{"is above"}
</MenuItem>
]}
<MenuItem key={1} value={Operator.equals}>
{"is exactly"}
</MenuItem>
</TextField>
</Grid>
<Grid item xs={8} sm={4}>
<TextField
select={isBoolean}
id="value"
required={true}
type={"text"}
label=""
helperText="Value"
error={isNaN(+valStrings[index])}
value={valStrings[index]}
onChange={event => {
let strings = valStrings;
strings[index] = event.target.value;
setValStrings([...strings]);
if (!isNaN(+valStrings[index])) {
condition.value = describer.toStored(+event.target.value);
changeCondition(condition, index);
}
}}
autoFocus={false}
margin="dense"
variant="standard"
fullWidth
InputProps={{
endAdornment: <InputAdornment position="end">{describer.unit()}</InputAdornment>
}}
InputLabelProps={{ shrink: true }}>
{isBoolean && [
<MenuItem key={0} value={0}>
{describer.enumerations()[0]}
</MenuItem>,
<MenuItem key={1} value={1}>
{describer.enumerations()[1]}
</MenuItem>
]}
</TextField>
</Grid>
<Grid item xs={2} sm={1}>
{index === 0 ? (
<Tooltip title="Add another condition">
<IconButton
color="primary"
disabled={conditions.length > 1}
aria-label="Add another condition"
onClick={() => {
let c = cloneDeep(conditions);
let newConditions = c.concat(initialConditions(newAlertComponentType));
setConditions(newConditions);
}}
className={classNames(classes.greenButton, classes.noPadding)}>
<AddIcon />
</IconButton>
</Tooltip>
) : (
<Tooltip title="Remove this condition">
<IconButton
color="default"
//disabled={!canEdit}
aria-label="Remove condition"
onClick={() => {
let c = conditions;
c.splice(index, 1);
setConditions([...c]);
}}
className={classNames(classes.redButton, classes.noPadding)}>
<RemoveIcon />
</IconButton>
</Tooltip>
)}
</Grid>
</Grid>
{nodeOptions.length > 2 && (
<Grid
key={"nodes"}
container
direction="row"
justify="center"
alignItems="center"
spacing={2}>
<Grid item xs={10} sm={4}>
<TextField
select
id="subtype"
label="Subtype"
//disabled={!isSourceValid(interaction.settings.source) || !canEdit}
value={subtypeDropdown}
onChange={event => {
setSubtypeDropdown(+event.target.value);
}}
margin="dense"
variant="standard"
fullWidth
InputLabelProps={{ shrink: true }}>
<MenuItem key={0} value={0}>
Any
</MenuItem>
<MenuItem key={1} value={1}>
Average
</MenuItem>
<MenuItem key={2} value={2}>
Single Node
</MenuItem>
<MenuItem key={3} value={3}>
Node Diff
</MenuItem>
<MenuItem key={4} value={4}>
Up To
</MenuItem>
</TextField>
</Grid>
<Grid item xs={10} sm={4}>
{(subtypeDropdown === 2 || subtypeDropdown === 3 || subtypeDropdown === 4) && (
<TextField
select
id="interactionType"
label="Node 1"
//disabled={!isSourceValid(interaction.settings.source) || !canEdit}
value={nodeOne}
onChange={event => {
setNodeOne(+event.target.value);
}}
margin="dense"
variant="standard"
fullWidth
InputLabelProps={{ shrink: true }}>
{nodeOptions}
</TextField>
)}
</Grid>
<Grid item xs={10} sm={4}>
{subtypeDropdown === 3 && (
<TextField
select
id="interactionType"
label="Node 2"
//disabled={!isSourceValid(interaction.settings.source) || !canEdit}
value={nodeTwo}
onChange={event => {
setNodeTwo(+event.target.value);
}}
margin="dense"
variant="standard"
fullWidth
InputLabelProps={{ shrink: true }}>
{nodeOptions}
</TextField>
)}
</Grid>
</Grid>
)}
</React.Fragment>
);
};
const conditionInput = () => {
// const conditionGroups: JSX.Element[] = [];
// for (let i = 0; i < conditions.length; i++) {
// conditionGroups[i] = conditionGroup(i);
// }
return (
<FormControl
component={"fieldset" as "div"}
className={classes.borderedContainer}
fullWidth
disabled={selectedAlertComponents.length === 0}>
<FormLabel component={"legend" as "caption"}>Conditions</FormLabel>
{selectedAlertComponents.length > 0 ? (
<React.Fragment>
{conditions.map((condition, i) => conditionGroup(condition, i))}
</React.Fragment>
) : (
<FormHelperText>You must select a source before adding conditions</FormHelperText>
)}
</FormControl>
);
};
const setScheduleTime = (id: string, event: any) => {
let updatedSchedule = cloneDeep(schedule);
if (id === "shortcut") {
let value = event.target.value;
if (value === "allDay") {
updatedSchedule.timeOfDayStart = "00:00";
updatedSchedule.timeOfDayEnd = "24:00";
} else if (value === "before") {
updatedSchedule.timeOfDayStart = "00:00";
if (!updatedSchedule.timeOfDayEnd || updatedSchedule.timeOfDayEnd === "24:00") {
updatedSchedule.timeOfDayEnd = "23:59";
}
} else if (value === "after") {
updatedSchedule.timeOfDayEnd = "24:00";
if (updatedSchedule.timeOfDayStart === "00:00") {
updatedSchedule.timeOfDayStart = "00:01";
}
} else {
if (updatedSchedule.timeOfDayStart === "00:00") {
updatedSchedule.timeOfDayStart = "00:01";
}
if (updatedSchedule.timeOfDayEnd === "24:00") {
updatedSchedule.timeOfDayEnd = "23:59";
}
}
} else {
let timeOfDay =
event
.hour()
.toString()
.padStart(2, "0") +
":" +
event
.minute()
.toString()
.padStart(2, "0");
if (id === "start") {
updatedSchedule.timeOfDayStart = timeOfDay;
} else if (id === "end") {
if (timeOfDay === "00:00") {
timeOfDay = "24:00";
}
updatedSchedule.timeOfDayEnd = timeOfDay;
}
}
updatedSchedule.timezone = moment.tz.guess();
setSchedule(updatedSchedule);
};
const toggleDaySelected = (day: string, event: any) => {
let updatedSchedule = cloneDeep(schedule);
if (event.target.checked) {
if (!updatedSchedule.weekdays.includes(day)) {
updatedSchedule.weekdays.push(day);
}
} else {
updatedSchedule.weekdays.splice(updatedSchedule.weekdays.indexOf(day), 1);
}
setSchedule(updatedSchedule);
};
const daySelector = (day: string, size: any) => {
//const schedule = or(interaction.settings.schedule, pond.InteractionSchedule.create());
return (
<Grid item container xs={size} sm={1} justify="center" alignItems="center">
<FormControlLabel
control={
<Checkbox
id={day}
checked={schedule.weekdays.includes(day)}
onChange={event => toggleDaySelected(day, event)}
value={day}
color="secondary"
/>
}
label={capitalize(day.substr(0, 2))}
labelPlacement="bottom"
/>
</Grid>
);
};
const scheduler = () => {
//let schedule = pond.InteractionSchedule.create();
let timezone = moment.tz.guess();
let todStart = "00:00".split(":");
let todEnd = "23:59".split(":");
let start = moment
.tz(timezone)
.startOf("day")
.add(todStart[0], "hours")
.add(todStart[1], "minutes")
.local();
let end = moment
.tz(timezone)
.startOf("day")
.add(todEnd[0], "hours")
.add(todEnd[1], "minutes")
.local();
let descriptor = timeOfDayDescriptor(schedule);
let showStart = descriptor === "after" || descriptor === "from";
let showEnd = descriptor === "before" || descriptor === "from";
let showBoth = showStart && showEnd;
return (
<FormControl component={"fieldset" as "div"} className={classes.borderedContainer} fullWidth>
<FormLabel component={"legend" as "caption"}>Schedule</FormLabel>
<Grid container direction="row" spacing={0} justify="flex-start">
{daySelector("sunday", 3)}
{daySelector("monday", 3)}
{daySelector("tuesday", 3)}
{daySelector("wednesday", 3)}
{daySelector("thursday", 4)}
{daySelector("friday", 4)}
{daySelector("saturday", 4)}
</Grid>
<Grid container direction="row" spacing={2} alignItems="center">
<Grid item xs={12} sm={3}>
<TextField
select
id="timeOfDayShortcut"
value={descriptor}
onChange={(event: any) => setScheduleTime("shortcut", event)}
fullWidth
autoFocus={false}
margin="normal"
variant="standard"
InputLabelProps={{ shrink: true }}>
<MenuItem key="allDay" value="allDay">
All Day
</MenuItem>
<MenuItem key="before" value="before">
Before
</MenuItem>
<MenuItem key="after" value="after">
After
</MenuItem>
<MenuItem key="from" value="from">
From
</MenuItem>
</TextField>
</Grid>
{showStart && (
<Grid item xs={5} sm={3}>
<TimePicker
renderInput={props => <TextField {...props} helperText="" />}
value={start}
onChange={(event: any) => setScheduleTime("start", event)}
/>
</Grid>
)}
{showBoth && (
<Grid item xs={2} sm={1}>
<Typography
variant="subtitle1"
color="textSecondary"
className={classes.timeRange}
align="right">
to
</Typography>
</Grid>
)}
{showEnd && (
<Grid item xs={5} sm={3}>
<TimePicker
renderInput={props => <TextField {...props} helperText="" />}
value={end}
onChange={(event: any) => setScheduleTime("end", event)}
/>
</Grid>
)}
</Grid>
</FormControl>
);
};
const newAlertDialog = () => {
return (
<ResponsiveDialog
open={newAlertOpen}
onClose={() => {
setNewAlertOpen(false);
}}>
<DialogTitle>Set New Alert</DialogTitle>
<DialogContent>
{/* Dropdown to select the component type to add the interaction to */}
<Select
id="componentType"
label="Component Type"
fullWidth
displayEmpty
value={newAlertComponentType}
onChange={e => {
setNewAlertComponentType(e.target.value as quack.ComponentType);
setSelectedAlertComponents([]);
setConditions(initialConditions(e.target.value as quack.ComponentType));
}}>
<MenuItem key={0} value={0}>
Select Component Type
</MenuItem>
{typeOptions.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
{/* list of checkboxes for the components that match that type */}
{listMatchingComponents()}
{/* have the conditions set here */}
{conditionInput()}
{/* have the schedule set here */}
{scheduler()}
</DialogContent>
<DialogActions>
<Button onClick={() => setNewAlertOpen(false)} variant="contained">
Cancel
</Button>
<Button
disabled={selectedAlertComponents.length === 0}
onClick={addInteractionToComponents}
variant="contained"
color="primary">
Confirm
</Button>
</DialogActions>
</ResponsiveDialog>
);
};
const alertDisplay = () => {
return (
<List style={{ margin: 5 }}>
<ListSubheader>Alerts</ListSubheader>
{alerts.map((alert, i) => (
<ListItem key={i}>{alertAccordion(alert)}</ListItem>
))}
</List>
);
};
const notificationList = () => {
return (
<List style={{ margin: 5 }}>
<ListSubheader>Notifications</ListSubheader>
{recentNotifications && (
<React.Fragment>
{recentNotifications.map((notification, i) => (
<ListItem key={i} className={i % 2 === 0 ? classes.dark : classes.light}>
<Typography style={{ fontWeight: 650 }}>
{moment(notification.status?.timestamp).format("MMMM DD, YYYY - h:mm a")}
</Typography>{" "}
:{" "}
<Typography>
{notification.settings?.title + " - " + notification.settings?.subtitle}
</Typography>
</ListItem>
))}
{recentNotifications.length < totalNotifications && (
<ListItem key={"button"}>
<Button onClick={loadMoreNotifications} disabled={notificationsLoading}>
Get More
</Button>
</ListItem>
)}
</React.Fragment>
)}
</List>
);
};
return (
<Card raised style={{ margin: 5 }}>
<Box padding={1} display="flex" justifyContent="space-between">
<Typography style={{ fontWeight: 650, fontSize: 25 }}>Alerts & Notifications</Typography>
<Button
variant="contained"
color="primary"
onClick={() => {
setNewAlertOpen(true);
}}>
New Alert
</Button>
</Box>
{alertDisplay()}
{notificationList()}
{newAlertDialog()}
</Card>
);
}

746
src/objects/ObjectDescriber.ts Normal file
View file

@ -0,0 +1,746 @@
import { Option } from "common/SearchSelect";
import GrainDescriber from "grain/GrainDescriber";
import { Column } from "material-table";
import { Bin, BinYard, Field } from "models";
import { Gate } from "models/Gate";
import { GrainBag } from "models/GrainBag";
import { ObjectHeater } from "models/ObjectHeater";
import { pond } from "protobuf-ts/pond";
import { getDistanceUnit, getTemperatureUnit } from "utils";
interface Sort {
order: string; //what to send to the backend list to sort by
numerical: boolean; //whether to use a numerical or text sort
}
export interface ObjectExtension {
name: string;
inventoryGroup: string;
isTransactionObject: boolean;
//this will define the columns to be used for the object in a material table
tableColumns: Column<any>[];
//this map will match the title of the column to what the backend needs to perform the ordering
tableSort: Map<string, Sort>;
}
const defaultObject: ObjectExtension = {
name: "None",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
};
export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
[pond.ObjectType.OBJECT_TYPE_UNKNOWN, defaultObject],
[
pond.ObjectType.OBJECT_TYPE_BACKPACK,
{
name: "Backpack",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_BIN,
{
name: "Bin",
inventoryGroup: "grain",
isTransactionObject: true,
tableColumns: [
{
title: "Name",
render: row => {
return row.settings.name;
}
},
{
title: "Grain",
render: row => {
let grain = row.settings.inventory?.grainType;
if (grain) {
return GrainDescriber(grain).name;
}
}
},
{
title: "Bin Height",
render: row => {
let d = row.settings.specs?.heightCm;
if (d) {
if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_METERS) {
return (d / 100).toFixed(2) + " m";
} else {
return (d / 30.48).toFixed(2) + " ft";
}
}
}
},
{
title: "Bin Diameter",
render: row => {
let d = row.settings.specs?.diameterCm;
if (d) {
if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_METERS) {
return (d / 100).toFixed(2) + " m";
} else {
return (d / 30.48).toFixed(2) + " ft";
}
}
}
},
{
title: "Custom Grain Name",
render: row => {
return row.settings.inventory?.customTypeName;
}
},
{
title: "Grain Variant",
render: row => {
return row.settings.inventory?.grainSubtype;
}
},
{
title: "Grain Bushels",
render: row => {
return row.settings.inventory?.grainBushels;
}
},
{
title: "Grain Capacity",
render: row => {
return row.settings.specs?.bushelCapacity;
}
},
{
title: "High Temp Warning",
render: row => {
let t = row.settings.highTemp;
if (t) {
if (getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT) {
return (t * 1.8 + 32).toFixed(2) + " °F";
} else {
return t.toFixed(2) + " °C";
}
}
}
},
{
title: "Low Temp Warning",
render: row => {
let t = row.settings.lowTemp;
if (t) {
if (getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT) {
return (t * 1.8 + 32).toFixed(2) + " °F";
} else {
return t.toFixed(2) + " °C";
}
}
}
}
] as Column<Bin>[],
tableSort: new Map([
["Name", { order: "name", numerical: false }],
["Grain", { order: "inventory.grainType", numerical: false }],
["Bin Height", { order: "specs.heightCm", numerical: true }],
["Bin Diameter", { order: "specs.diameterCm", numerical: true }],
["Custom Grain Name", { order: "inventory.customTypeName", numerical: false }],
["Grain Variant", { order: "inventory.grainSubtype", numerical: false }],
["Grain Bushels", { order: "inventory.grainBushels", numerical: true }],
["Grain Capacity", { order: "specs.bushelCapacity", numerical: true }],
["High Temp Warning", { order: "highTemp", numerical: true }],
["Low Temp Warning", { order: "lowTemp", numerical: true }]
])
}
],
[
pond.ObjectType.OBJECT_TYPE_BINYARD,
{
name: "Binyard",
inventoryGroup: "grain",
isTransactionObject: false,
tableColumns: [
{
title: "Name",
render: row => {
return row.settings.name;
}
},
{
title: "Description",
render: row => {
return row.settings.description;
}
}
] as Column<BinYard>[],
tableSort: new Map([
["Name", { order: "name", numerical: false }],
["Description", { order: "description", numerical: false }]
])
}
],
[
pond.ObjectType.OBJECT_TYPE_COMPONENT,
{
name: "Component",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_DEVICE,
{
name: "Device",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_FIELD,
{
name: "Field",
inventoryGroup: "grain",
isTransactionObject: true,
tableColumns: [
{
title: "Name",
render: row => {
return row.settings.fieldName;
}
},
{
title: "Land Location",
render: row => {
return row.settings.landLocation;
}
},
{
title: "Crop",
render: row => {
return GrainDescriber(row.settings.crop).name;
}
},
{
title: "Custom",
render: row => {
return row.settings.customGrain;
}
},
{
title: "Grain Variant",
render: row => {
return row.settings.grainSubtype;
}
}
// {
// title: "Sowing Date",
// render: row => {
// return row.settings.sowingDate
// }
// }
] as Column<Field>[],
tableSort: new Map([
["Name", { order: "fieldName", numerical: false }],
["Land Location", { order: "landLocation", numerical: false }],
["Crop", { order: "crop", numerical: false }],
["Custom", { order: "customGrain", numerical: false }],
["Grain Variant", { order: "grainSubtype", numerical: false }]
//["Sowing Date", { order: "sowingDate", numerical: true}]
])
}
],
[
pond.ObjectType.OBJECT_TYPE_FIELDMARKER,
{
name: "Field Marker",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_FIRMWARE,
{
name: "Firmware",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_GATE,
{
name: "Gate",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [
{
title: "Name",
render: row => {
if (row.name) {
return row.name.toString();
}
}
},
{
title: "PCA Type",
render: row => {
return row.settings.pcaType;
}
},
{
title: "Hourly APU Cost",
render: row => {
if (row.settings.hourlyApuCost) {
return "$" + row.settings.hourlyApuCost.toFixed(2);
}
}
},
{
title: "Hourly PCA Cost",
render: row => {
if (row.settings.hourlyPcaCost) {
return "$" + row.settings.hourlyPcaCost.toFixed(2);
}
}
},
{
title: "Upper Flow",
render: row => {
return row.settings.upperFlow;
}
},
{
title: "Lower Flow",
render: row => {
return row.settings.lowerFlow;
}
},
{
title: "Duct Name",
render: row => {
return row.settings.ductName;
}
},
{
title: "Duct Length",
render: row => {
return row.settings.ductLength + " m";
}
},
{
title: "Duct Diameter",
render: row => {
return row.settings.ductDiameter + " mm";
}
},
{
title: "Friction Factor",
render: row => {
return row.settings.frictionFactor;
}
},
{
title: "Thermal Conductivity",
render: row => {
return row.settings.thermalConductivity + " W/mK";
}
},
{
title: "Thermal Resistance",
render: row => {
return row.settings.thermalResistance + " K/W";
}
}
] as Column<Gate>[],
tableSort: new Map([
["Name", { order: "name", numerical: false }],
["PCA Type", { order: "pcaType", numerical: false }],
["Hourly APU Cost", { order: "hourlyApuCost", numerical: true }],
["Hourly PCA Cost", { order: "hourlyPcaCost", numerical: true }],
["Upper Flow", { order: "upperFlow", numerical: true }],
["Lower Flow", { order: "lowerFlow", numerical: true }],
["Duct Name", { order: "ductName", numerical: false }],
["Duct Length", { order: "ductLength", numerical: true }],
["Duct Diameter", { order: "ductDiameter", numerical: true }],
["Friction Factor", { order: "frictionFactor", numerical: true }],
["Thermal Conductivity", { order: "thermalConductivity", numerical: true }],
["Thermal Resistance", { order: "thermalResistance", numerical: true }]
])
}
],
[
pond.ObjectType.OBJECT_TYPE_GRAIN_BAG,
{
name: "Grainbag",
inventoryGroup: "grain",
isTransactionObject: true,
tableColumns: [
{
title: "Name",
render: row => {
if (row.title) {
return row.title.toString();
}
}
},
{
title: "Length",
render: row => {
if (row.settings.length) {
if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_METERS) {
return row.settings.length.toFixed(2) + " m";
} else {
return (row.settings.length * 3.281).toFixed(2) + " ft";
}
}
}
},
{
title: "Diameter",
render: row => {
if (row.settings.diameter) {
if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_METERS) {
return row.settings.diameter.toFixed(2) + " m";
} else {
return (row.settings.diameter * 3.281).toFixed(2) + " ft";
}
}
}
},
{
title: "Grain",
render: row => {
if (row.settings.supportedGrain) {
return GrainDescriber(row.settings.supportedGrain).name;
}
}
},
{
title: "Custom Grain",
render: row => {
return row.settings.customGrain;
}
},
{
title: "Grain Variant",
render: row => {
return row.settings.grainSubtype;
}
},
{
title: "Capacity",
render: row => {
return row.settings.bushelCapacity + " bu";
}
},
{
title: "Bushels",
render: row => {
return row.settings.currentBushels + " bu";
}
},
{
title: "Fill Date",
render: row => {
return row.settings.fillDate;
}
},
{
title: "Initial Moisture",
render: row => {
return row.settings.initialMoisture + "%";
}
}
] as Column<GrainBag>[],
tableSort: new Map([
["Name", { order: "name", numerical: false }],
["Length", { order: "length", numerical: true }],
["Diameter", { order: "diameter", numerical: true }],
["Grain", { order: "supportedGrain", numerical: false }],
["Custom Grain", { order: "customGrain", numerical: false }],
["Grain Variant", { order: "grainSubtype", numerical: false }],
["Capacity", { order: "bushelCapacity", numerical: true }],
["Bushels", { order: "currentBushels", numerical: true }],
["Fill Data", { order: "fillDate", numerical: false }],
["Initial Moisture", { order: "initialMoisture", numerical: true }]
])
}
],
[
pond.ObjectType.OBJECT_TYPE_GROUP,
{
name: "Group",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_HARVESTPLAN,
{
name: "Harvest Plan",
inventoryGroup: "grain",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_HEATER,
{
name: "Heater",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [
{
title: "Name",
render: row => {
if (row.name) {
return row.name.toString();
}
}
},
{
title: "Make",
render: row => {
return row.settings.make;
}
},
{
title: "Model",
render: row => {
return row.settings.model;
}
},
{
title: "Fuel Type",
render: row => {
let fuelMap = new Map<pond.FuelType, string>([
[pond.FuelType.FUEL_TYPE_DIESEL, "Diesel"],
[pond.FuelType.FUEL_TYPE_GASOLINE, "Gasoline"],
[pond.FuelType.FUEL_TYPE_PROPANE, "Propane"]
]);
return fuelMap.get(row.settings.fuelType);
}
},
{
title: "Tank Size",
render: row => {
return row.settings.tankSize + " G";
}
},
{
title: "Fuel Consumption",
render: row => {
return row.settings.fuelConsumption + " G/hr";
}
},
{
title: "Air Circulation",
render: row => {
return row.settings.airCirculation + " CFM";
}
}
] as Column<ObjectHeater>[],
tableSort: new Map([
["Name", { order: "name", numerical: false }],
["Make", { order: "make", numerical: false }],
["Model", { order: "model", numerical: false }],
["Fuel Type", { order: "fuelType", numerical: false }],
["Tank Size", { order: "tankSize", numerical: true }],
["Fuel Consumption", { order: "fuelConsumption", numerical: true }],
["Air Circulation", { order: "airCirculation", numerical: true }]
])
}
],
[
pond.ObjectType.OBJECT_TYPE_HOMEMARKER,
{
name: "Home Marker",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_INTERACTION,
{
name: "Interaction",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_LINK,
{
name: "Link",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_MINE,
{
name: "Mine",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_NOTE,
{
name: "Note",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_SITE,
{
name: "Site",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_TAG,
{
name: "Tag",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_TASK,
{
name: "Task",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_TEAM,
{
name: "Team",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_TERMINAL,
{
name: "Terminal",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_UPGRADE,
{
name: "Upgrade",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_USER,
{
name: "User",
inventoryGroup: "",
isTransactionObject: false,
tableColumns: [],
tableSort: new Map()
}
],
[
pond.ObjectType.OBJECT_TYPE_CONTRACT,
{
name: "Contract",
inventoryGroup: "grain",
isTransactionObject: true,
tableColumns: [],
tableSort: new Map()
}
]
]);
export default function ObjectDescriber(type: pond.ObjectType): ObjectExtension {
let describer = ObjectExtensions.get(type);
return describer ? describer : defaultObject;
}
/**
* takes in an object type enum and returns the string of that object type that is used in the relative_objects table
* ie "Bin" -> "bin" or "Home Marker" -> "home_marker"
* @param type pond.ObjectType enum
*/
export function ObjectTypeString(type: pond.ObjectType): string {
return ObjectDescriber(type)
.name.toLocaleLowerCase()
.replace(/ /g, "_");
}
export function TransactionOptions(): Option[] {
let options: Option[] = [];
Object.values(pond.ObjectType).forEach(obj => {
if (typeof obj !== "string") {
let ext = ObjectDescriber(obj);
if (ext.isTransactionObject) {
options.push({
label: ext.name,
value: obj,
group: ext.inventoryGroup
});
}
}
});
return options;
}
export function SearchableObjects(): Option[] {
let options: Option[] = [];
Object.values(pond.ObjectType).forEach(obj => {
if (typeof obj !== "string") {
let ext = ObjectDescriber(obj);
if (ext.tableColumns.length > 0) {
options.push({
label: ext.name,
value: obj
});
}
}
});
return options;
}

378
src/objects/ObjectTable.tsx Normal file
View file

@ -0,0 +1,378 @@
import { Box, Button, Grid } from "@material-ui/core";
import { getTableIcons } from "common/ResponsiveTable";
import SearchBar from "common/SearchBar";
import SearchSelect, { Option } from "common/SearchSelect";
import MaterialTable, { MTableToolbar } from "material-table";
import { Bin, BinYard, Field } from "models";
import { Gate } from "models/Gate";
import { GrainBag } from "models/GrainBag";
import { ObjectHeater } from "models/ObjectHeater";
import ObjectDescriber, { SearchableObjects } from "objects/ObjectDescriber";
import { pond } from "protobuf-ts/pond";
import {
useBinAPI,
useBinYardAPI,
useFieldAPI,
useGateAPI,
useGlobalState,
useGrainBagAPI,
useObjectHeaterAPI
} from "providers";
import React, { useCallback, useEffect, useState } from "react";
import TeamSearch from "teams/TeamSearch";
import BulkBinSettings from "./bulkEditForms/bulkBinSettings";
import BulkGrainBagSettings from "./bulkEditForms/bulkGrainBagSettings";
//import BulkGateSettings from "./bulkEditForms/bulkGateSettings";
interface customButton {
label: string;
function: (selectedObjects: any[]) => void;
}
interface Props {
startingObject?: pond.ObjectType;
showControls?: boolean;
preLoadedData?: any[];
customButtons?: customButton[];
rowClickFunction?: (rowData: any) => void;
}
export default function ObjectTable(props: Props) {
const { startingObject, showControls, preLoadedData, customButtons, rowClickFunction } = props;
const [currentType, setCurrentType] = useState(
startingObject ?? pond.ObjectType.OBJECT_TYPE_UNKNOWN
);
const [selectedType, setSelectedType] = useState<Option | null>();
const [objectTotal, setObjectTotal] = useState(0);
const [pageSize, setPageSize] = useState(10); //offset would be determined by the pageSize * tablePage, limit is just pageSize
const [tablePage, setTablePage] = useState(0);
const [tableData, setTableData] = useState<any[]>([]);
const [selectedObjects, setSelectedObjects] = useState<any[]>([]);
const [currentDirection, setCurrentDirection] = useState<"asc" | "desc">("asc");
const [currentSearchText, setCurrentSearchText] = useState<string | undefined>();
const [currentOrder, setCurrentOrder] = useState<string | undefined>();
const [isNumerical, setIsNumerical] = useState<boolean | undefined>();
const [{ user, as }] = useGlobalState();
const [selectedUser, setSelectedUser] = useState<string>(as ?? user.id());
const [tableLoading, setTableLoading] = useState(false);
//the api's to load all the objects available to look at in this table
const binAPI = useBinAPI();
const binyardAPI = useBinYardAPI();
const fieldAPI = useFieldAPI();
const gateAPI = useGateAPI();
const grainBagAPI = useGrainBagAPI();
const heaterAPI = useObjectHeaterAPI();
const load = useCallback(() => {
if (tableLoading) return;
/**
* switch case to use the correct api to load the object that was selected.
* In the future create a generic object api that takes the object type as a variable along with
* the rest that the backend then uses to load from the correct place
*/
//add a new case for each object that will be viewable in the table
let search;
if (currentSearchText) {
search = currentSearchText?.replace(/\s/g, "<->");
}
if (currentType !== pond.ObjectType.OBJECT_TYPE_UNKNOWN) {
setTableLoading(true);
}
switch (currentType) {
case pond.ObjectType.OBJECT_TYPE_BIN:
binAPI
.listBins(
pageSize,
pageSize * tablePage,
currentDirection,
currentOrder,
search,
selectedUser,
undefined,
isNumerical
)
.then(resp => {
setTableData(resp.data.bins.map(b => Bin.create(b)));
setObjectTotal(resp.data.total);
setTableLoading(false);
});
break;
case pond.ObjectType.OBJECT_TYPE_BINYARD:
binyardAPI
.listBinYards(
pageSize,
pageSize * tablePage,
currentDirection,
currentOrder,
search,
undefined,
selectedUser
)
.then(resp => {
setTableData(resp.data.yard.map(b => BinYard.create(b)));
setObjectTotal(resp.data.total);
setTableLoading(false);
});
break;
case pond.ObjectType.OBJECT_TYPE_FIELD:
fieldAPI
.listFields(
pageSize,
pageSize * tablePage,
currentDirection,
currentOrder,
search,
selectedUser
)
.then(resp => {
setTableData(resp.data.fields.map(f => Field.create(f)));
setObjectTotal(resp.data.total);
setTableLoading(false);
});
break;
case pond.ObjectType.OBJECT_TYPE_GATE:
gateAPI
.listGates(
pageSize,
pageSize * tablePage,
currentDirection,
currentOrder,
search,
undefined,
undefined,
undefined,
isNumerical,
selectedUser
)
.then(resp => {
setTableData(resp.data.gates.map(g => Gate.create(g)));
setObjectTotal(resp.data.total);
setTableLoading(false);
});
break;
case pond.ObjectType.OBJECT_TYPE_GRAIN_BAG:
grainBagAPI
.listGrainBags(
pageSize,
pageSize * tablePage,
currentDirection,
currentOrder,
search,
undefined,
undefined,
isNumerical,
selectedUser
)
.then(resp => {
setTableData(resp.data.grainBags.map(gb => GrainBag.create(gb)));
setObjectTotal(resp.data.total);
setTableLoading(false);
});
break;
case pond.ObjectType.OBJECT_TYPE_HEATER:
heaterAPI
.listObjectHeaters(
pageSize,
pageSize * tablePage,
currentDirection,
currentOrder,
search,
undefined,
selectedUser,
undefined,
undefined,
isNumerical
)
.then(resp => {
setTableData(resp.data.heaters.map(h => ObjectHeater.create(h)));
setObjectTotal(resp.data.total);
setTableLoading(false);
});
break;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
currentDirection,
currentOrder,
currentType,
selectedUser,
isNumerical,
pageSize,
tablePage,
currentSearchText,
binAPI,
binyardAPI,
fieldAPI,
gateAPI,
grainBagAPI,
heaterAPI
]);
useEffect(() => {
if (preLoadedData) {
setTableData(preLoadedData);
setObjectTotal(preLoadedData.length);
} else {
load();
}
}, [load, preLoadedData]);
const bulkEditForm = (type: pond.ObjectType) => {
switch (type) {
case pond.ObjectType.OBJECT_TYPE_BIN:
return (
<BulkBinSettings
selectedBins={selectedObjects as pond.Bin[]}
refreshCallback={reLoad => {
if (reLoad) {
load();
}
}}
/>
);
case pond.ObjectType.OBJECT_TYPE_GRAIN_BAG:
return (
<BulkGrainBagSettings
selectedBags={selectedObjects as GrainBag[]}
refreshCallback={reLoad => {
if (reLoad) {
load();
}
}}
/>
);
default:
}
};
const actionToolbar = () => {
return (
<Box width="100%" padding={2}>
<SearchBar
value={currentSearchText ?? ""}
onChange={val => {
setCurrentSearchText(val);
}}
/>
{selectedObjects.length > 0 && <Box paddingTop={2}>{bulkEditForm(currentType)}</Box>}
<Grid container direction="row" spacing={2} style={{ marginTop: 2 }}>
{customButtons &&
selectedObjects.length > 0 &&
customButtons.map((button, i) => (
<Grid item xs={3} key={i}>
<Button
style={{ width: "100%" }}
variant="contained"
color="primary"
onClick={() => button.function(selectedObjects)}>
{button.label}
</Button>
</Grid>
))}
</Grid>
</Box>
);
};
return (
<Box padding={2}>
{showControls && (
<Grid container direction="row" spacing={2} style={{ padding: 10 }}>
<Grid item>
<SearchSelect
style={{ width: 200 }}
label="From"
selected={selectedType}
options={SearchableObjects()}
changeSelection={op => {
setSelectedObjects([]);
setSelectedType(op);
if (op?.value) {
setCurrentType(op.value);
setTablePage(0);
setCurrentSearchText(undefined);
}
}}
/>
</Grid>
<Grid item style={{ width: 300 }}>
<TeamSearch
label="User/Team"
loadUsers
setTeamCallback={user => {
setSelectedUser(user);
//dispatch({ key: "as", value: user.toString() });
}}
/>
</Grid>
</Grid>
)}
<MaterialTable
isLoading={tableLoading}
key="objectList"
title={ObjectDescriber(currentType).name}
icons={getTableIcons()}
columns={ObjectDescriber(currentType).tableColumns}
data={tableData}
page={tablePage}
totalCount={objectTotal}
onRowClick={
rowClickFunction
? (_, data) => {
rowClickFunction(data);
}
: undefined
}
onChangePage={page => {
setTablePage(page);
}}
onOrderChange={(by, direction) => {
if (by !== -1) {
let colName = ObjectDescriber(currentType).tableColumns[by].title?.toString();
let order;
if (colName) {
order = ObjectDescriber(currentType).tableSort.get(colName);
setCurrentOrder(order?.order);
setCurrentDirection(direction);
setIsNumerical(order?.numerical);
}
}
}}
options={{
paging: true,
pageSize: pageSize,
pageSizeOptions: [5, 10, 20],
padding: "dense",
showTitle: true,
toolbar: true,
sorting: true,
columnsButton: true,
search: false,
selection: true
}}
onSelectionChange={(data, rowData) => {
setSelectedObjects(data);
}}
// actions={[
// {
// tooltip: "Update Selected Objects",
// icon: "edit",
// onClick: (evt, data) => {console.log(data)}
// }
// ]}
onChangeRowsPerPage={pageSize => {
setPageSize(pageSize);
}}
components={{
Toolbar: props => (
<React.Fragment>
<MTableToolbar {...props} />
{actionToolbar()}
</React.Fragment>
)
}}
/>
</Box>
);
}

246
src/objects/bulkEditForms/bulkBinSettings.tsx Normal file
View file

@ -0,0 +1,246 @@
import { Button, Grid, InputAdornment, TextField } from "@material-ui/core";
import SearchSelect, { Option } from "common/SearchSelect";
import { GrainOptions } from "grain";
import { pond } from "protobuf-ts/pond";
import { useBinAPI, useSnackbar } from "providers";
import React, { useState } from "react";
import { fahrenheitToCelsius, getDistanceUnit, getTemperatureUnit } from "utils";
interface Props {
selectedBins: pond.Bin[];
refreshCallback: (reLoad: boolean) => void;
}
export default function BulkBinSettings(props: Props) {
const { selectedBins, refreshCallback } = props;
const binAPI = useBinAPI();
const { openSnack } = useSnackbar();
const gridItemWidth = 3;
// bin settings variables
const [name, setName] = useState<string | undefined>();
const [grainType, setGrainType] = useState<pond.Grain | undefined>();
const [grainOption, setGrainOption] = useState<Option | null>();
const [height, setHeight] = useState<number | undefined>();
const [diameter, setDiameter] = useState<number | undefined>();
const [customGrain, setCustomGrain] = useState<string | undefined>();
const [variant, setVariant] = useState<string | undefined>();
const [bushels, setBushels] = useState<number | undefined>();
const [capacity, setCapacity] = useState<number | undefined>();
const [highTemp, setHighTemp] = useState<number | undefined>();
const [lowTemp, setLowTemp] = useState<number | undefined>();
const convertedDistance = (enteredDistance: number) => {
if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_METERS) {
return enteredDistance * 100;
}
if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET) {
return enteredDistance * 30.48;
}
return enteredDistance;
};
const convertedTemp = (enteredTemp: number) => {
let t = enteredTemp;
if (getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT) {
t = fahrenheitToCelsius(enteredTemp);
}
return t;
};
const updateBins = () => {
let binsToEdit: pond.BinSettings[] = [];
selectedBins.forEach(bin => {
if (bin.settings) {
if (bin.settings.inventory) {
if (grainType) bin.settings.inventory.grainType = grainType;
if (bushels) bin.settings.inventory.grainBushels = bushels;
if (customGrain) bin.settings.inventory.customTypeName = customGrain;
if (variant) bin.settings.inventory.grainSubtype = variant;
}
if (bin.settings.specs) {
if (height) bin.settings.specs.heightCm = convertedDistance(height);
if (diameter) bin.settings.specs.diameterCm = convertedDistance(diameter);
if (capacity) bin.settings.specs.bushelCapacity = capacity;
}
if (name) bin.settings.name = name;
if (highTemp) bin.settings.highTemp = convertedTemp(highTemp);
if (lowTemp) bin.settings.lowTemp = convertedTemp(lowTemp);
binsToEdit.push(bin.settings);
}
});
binAPI
.bulkBinUpdate(binsToEdit)
.then(resp => {
if (resp.data.successfull > 0) {
refreshCallback(true);
openSnack("Successfully updated " + resp.data.successfull + " bins");
}
})
.catch(err => {
openSnack("Failed to update bins");
});
};
return (
<React.Fragment>
<Grid container direction="row" spacing={2} alignContent="center" alignItems="center">
{/* first row */}
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Bin Name"
value={name ?? ""}
onChange={e => {
setName(e.target.value);
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<SearchSelect
label="Grain Type"
selected={grainOption}
changeSelection={option => {
let newGrainType = option
? pond.Grain[option.value as keyof typeof pond.Grain]
: pond.Grain.GRAIN_INVALID;
setGrainType(newGrainType);
setGrainOption(option);
}}
group
options={GrainOptions()}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Grain Variant"
value={variant ?? ""}
onChange={e => {
setVariant(e.target.value);
}}
/>
</Grid>
{/* second row */}
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Custom Grain"
value={customGrain ?? ""}
onChange={e => {
setCustomGrain(e.target.value);
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Bushels"
type="number"
value={bushels ?? ""}
onChange={e => {
setBushels(parseFloat(e.target.value));
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Capacity"
type="number"
value={capacity ?? ""}
onChange={e => {
setCapacity(parseFloat(e.target.value));
}}
/>
</Grid>
{/* last row */}
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Bin Height"
type="number"
value={height ?? ""}
onChange={e => {
setHeight(parseFloat(e.target.value));
}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{getDistanceUnit() !== pond.DistanceUnit.DISTANCE_UNIT_FEET ? "m" : "ft"}
</InputAdornment>
)
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Bin Diameter"
type="number"
value={diameter ?? ""}
onChange={e => {
setDiameter(parseFloat(e.target.value));
}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{getDistanceUnit() !== pond.DistanceUnit.DISTANCE_UNIT_FEET ? "m" : "ft"}
</InputAdornment>
)
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="High Temp Warning"
type="number"
value={highTemp ?? ""}
onChange={e => {
setHighTemp(parseFloat(e.target.value));
}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
? "°F"
: "°C"}
</InputAdornment>
)
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Low Temp Warning"
type="number"
value={lowTemp ?? ""}
onChange={e => {
setLowTemp(parseFloat(e.target.value));
}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
? "°F"
: "°C"}
</InputAdornment>
)
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<Button
variant="contained"
color="primary"
onClick={() => {
updateBins();
}}>
Update selected Bins
</Button>
</Grid>
</Grid>
</React.Fragment>
);
}

207
src/objects/bulkEditForms/bulkGrainBagSettings.tsx Normal file
View file

@ -0,0 +1,207 @@
import { Button, Grid, TextField } from "@material-ui/core";
import SearchSelect, { Option } from "common/SearchSelect";
import { GrainOptions } from "grain";
import { GrainBag } from "models/GrainBag";
import { pond } from "protobuf-ts/pond";
import { useGrainBagAPI, useSnackbar } from "providers";
import React, { useState } from "react";
import { getDistanceUnit } from "utils";
interface Props {
selectedBags: GrainBag[];
refreshCallback: (reLoad: boolean) => void;
}
export default function BulkGrainBagSettings(props: Props) {
const { selectedBags, refreshCallback } = props;
const gridItemWidth = 3;
const grainBagAPI = useGrainBagAPI();
const { openSnack } = useSnackbar();
const [name, setName] = useState("");
const [length, setLength] = useState<number | undefined>(); //stored in meters
const [diameter, setDiameter] = useState<number | undefined>(); //stored in meters
const [grainType, setGrainType] = useState<pond.Grain | undefined>();
const [grainOption, setGrainOption] = useState<Option | null>();
const [customGrain, setCustomGrain] = useState<string | undefined>();
const [variant, setVariant] = useState<string | undefined>();
const [capacity, setCapacity] = useState<number | undefined>();
const [bushels, setBushels] = useState<number | undefined>();
const [fillDate, setFillDate] = useState<string | undefined>();
const [initialMoisture, setInitialMoisture] = useState<number | undefined>();
const convertedDistance = (enteredDistance: number) => {
if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET) {
return enteredDistance / 3.281;
}
return enteredDistance;
};
const updateBags = () => {
let bagsToUpdate: pond.GrainBag[] = [];
selectedBags.forEach(b => {
let bag = pond.GrainBag.create({
key: b.key(),
name: b.name(),
settings: b.settings
});
if (bag.settings) {
if (name) bag.name = name;
if (length) bag.settings.length = convertedDistance(length);
if (diameter) bag.settings.diameter = convertedDistance(diameter); //diameter
if (grainType) bag.settings.supportedGrain = grainType; //grain Type
if (customGrain) bag.settings.customGrain = customGrain; //custom grain
if (variant) bag.settings.grainSubtype = variant; //variant
if (capacity) bag.settings.bushelCapacity = capacity; //capacity
if (bushels) bag.settings.currentBushels = bushels; //bushels
if (fillDate) bag.settings.fillDate = fillDate; //fill date
if (initialMoisture) bag.settings.initialMoisture = initialMoisture; //initial moisture
}
});
grainBagAPI
.bulkUpdateGrainBags(bagsToUpdate)
.then(resp => {
if (resp.data.successfull > 0) {
refreshCallback(true);
openSnack("Successfully updated " + resp.data.successfull + " bins");
}
})
.catch(err => {
openSnack("Failed to update bins");
});
};
return (
<React.Fragment>
<Grid container direction="row" spacing={2} alignContent="center" alignItems="center">
{/* first row */}
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Name"
value={name ?? ""}
onChange={e => {
setName(e.target.value);
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Length"
type="number"
value={length ?? ""}
onChange={e => {
setLength(parseFloat(e.target.value));
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Diameter"
type="number"
value={diameter ?? ""}
onChange={e => {
setDiameter(parseFloat(e.target.value));
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Capacity"
type="number"
value={capacity ?? ""}
onChange={e => {
setCapacity(parseFloat(e.target.value));
}}
/>
</Grid>
{/* second row */}
<Grid item xs={gridItemWidth}>
<SearchSelect
label="Grain Type"
selected={grainOption}
changeSelection={option => {
let newGrainType = option
? pond.Grain[option.value as keyof typeof pond.Grain]
: pond.Grain.GRAIN_INVALID;
setGrainType(newGrainType);
setGrainOption(option);
}}
group
options={GrainOptions()}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Grain Variant"
value={variant ?? ""}
onChange={e => {
setVariant(e.target.value);
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Custom Grain"
value={customGrain ?? ""}
onChange={e => {
setCustomGrain(e.target.value);
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Bushels"
type="number"
value={bushels ?? ""}
onChange={e => {
setBushels(parseFloat(e.target.value));
}}
/>
</Grid>
{/* last row */}
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
type="date"
label="Fill Date"
value={fillDate ?? ""}
InputLabelProps={{ shrink: true }}
onChange={e => setFillDate(e.target.value)}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<TextField
fullWidth
label="Initial Moisture"
type="number"
value={initialMoisture ?? ""}
onChange={e => {
setInitialMoisture(parseFloat(e.target.value));
}}
/>
</Grid>
<Grid item xs={gridItemWidth}>
<Button
variant="contained"
color="primary"
onClick={() => {
updateBags();
}}>
Update selected Grain Bags
</Button>
</Grid>
</Grid>
</React.Fragment>
);
}