From 2acdd59ac7735cb1d3a2c4dbac02340ac3137eaf Mon Sep 17 00:00:00 2001 From: Carter Date: Wed, 12 Feb 2025 15:11:42 -0600 Subject: [PATCH] device history implemented --- src/common/DiffHistory.tsx | 593 +++++++++++ src/component/ComponentHistory.tsx | 3 +- src/device/DeviceHistory.tsx | 65 ++ src/navigation/Router.tsx | 10 +- src/objects/ObjectAlerts.tsx | 976 ++++++++++++++++++ src/objects/ObjectDescriber.ts | 746 +++++++++++++ src/objects/ObjectTable.tsx | 378 +++++++ src/objects/bulkEditForms/bulkBinSettings.tsx | 246 +++++ .../bulkEditForms/bulkGrainBagSettings.tsx | 207 ++++ src/pages/DeviceHistory.tsx | 54 + src/pages/Devices.tsx | 6 +- src/providers/pond/userAPI.tsx | 30 +- 12 files changed, 3292 insertions(+), 22 deletions(-) create mode 100644 src/common/DiffHistory.tsx create mode 100644 src/device/DeviceHistory.tsx create mode 100644 src/objects/ObjectAlerts.tsx create mode 100644 src/objects/ObjectDescriber.ts create mode 100644 src/objects/ObjectTable.tsx create mode 100644 src/objects/bulkEditForms/bulkBinSettings.tsx create mode 100644 src/objects/bulkEditForms/bulkGrainBagSettings.tsx create mode 100644 src/pages/DeviceHistory.tsx diff --git a/src/common/DiffHistory.tsx b/src/common/DiffHistory.tsx new file mode 100644 index 0000000..6f3df5e --- /dev/null +++ b/src/common/DiffHistory.tsx @@ -0,0 +1,593 @@ +import React, { useState, useEffect } from "react"; +// import { createStyles, Theme, makeStyles, fade } from "@material-ui/core/styles"; +import { detailedDiff } from "deep-object-diff"; +import { + List, + ListItem, + ListItemText, + ListItemIcon, + Chip, + Avatar, + Grid2 as Grid +} from "@mui/material"; +import { Add, ChangeHistory, Remove, Face, Sync } from "@mui/icons-material"; +import { amber, red, blue, green } from "@mui/material/colors"; +// import MaterialTable from "material-table"; +import moment from "moment"; +// import { getTableIcons } from "common/ResponsiveTable"; +import { pond } from "protobuf-ts/pond"; +import { useUserAPI } from "hooks"; +import { useMobile } from "hooks"; +import ObjectDescriber from "objects/ObjectDescriber"; +import { makeStyles } from "@mui/styles"; +import { alpha, Theme } from "@mui/material"; +import ResponsiveTable, { Column } from "./ResponsiveTable"; + +const addedColour = alpha(green[600], 0.25); +const deletedColour = alpha(red[600], 0.25); +const updatedColour = alpha(blue[600], 0.25); +const resyncedColour = alpha(amber[600], 0.25); +const useStyles = makeStyles((theme: Theme) => { + return ({ + added: { + backgroundColor: addedColour + }, + deleted: { + backgroundColor: deletedColour + }, + updated: { + backgroundColor: updatedColour + }, + resynced: { + backgroundColor: resyncedColour + }, + chipContainer: { + maxWidth: "100%", + maxHeight: "100%", + flexWrap: "wrap" + }, + translateContainer: { + borderLeft: "2px solid white", + borderRight: "2px solid white", + borderRadius: "6px", + padding: "0 8px 0 8px", + whiteSpace: "pre", + margin: "8px" + }, + translateBox: { + display: "flex", + flexDirection: "row", + alignItems: "center", + padding: "0px" + } + }) +}); + +interface Diff { + added: any; + deleted: any; + updated: any; +} + +interface RowData { + timestamp: string; + user: string; + changes: number; + before: object; + after: object; + diff: Diff; + status: string; + type?: pond.ObjectType; +} + +interface SummaryProps { + changes: number; + diff: Diff; + before: any; + after: any; + kind: string; + translateKey: (key: keyof any, type?: pond.ObjectType) => string; + translateValue: (key: keyof any, obj: any, type?: pond.ObjectType) => string; + variant?: "expanded" | "inline"; + type?: pond.ObjectType; +} + +function Summary(props: SummaryProps) { + const classes = useStyles(); + const { changes, diff, before, after, translateKey, translateValue, variant, type } = props; + //console.log(diff) + const { added, updated, deleted } = diff; + + const translate = (key: keyof any, changeType: "added" | "deleted" | "updated"): any => { + switch (changeType) { + case "updated": + return ( +
+
{translateKey(key, type) + ":"}
+
{translateValue(key, before, type)}
+
{"→"}
+
{translateValue(key, after, type)}
+
+ ); + case "deleted": + return translateKey(key, type); + default: + let val = translateValue(key, after, type); + if (isBool(val)) { + return translateKey(key, type); + } + return translateKey(key, type) + ": " + val; + } + }; + + const isBool = (val: string) => { + return val.toLowerCase() === "true" || val.toLowerCase() === "false"; + }; + + const icon = (changeType: "added" | "deleted" | "updated") => { + switch (changeType) { + case "added": + return ; + case "deleted": + return ; + default: + return ; + } + }; + + const inlineItem = (key: any, changeType: "added" | "deleted" | "updated") => { + if (key !== "key") { + return ( + + {key !== "key" && ( + {translate(key, changeType)}} + /> + )} + + ); + } + return null; + }; + + const isMobile = useMobile(); + + const listItem = (key: any, changeType: "added" | "deleted" | "updated") => { + return ( + +
{icon(changeType)}
+ {isMobile ? ( +
{translate(key, changeType)}
+ ) : ( + {translate(key, changeType)} + )} + + ); + }; + + switch (variant) { + case "inline": + if (changes <= 0) { + return } size="small" label="Resynced" />; + } + return ( + + {added && + Object.keys(added).length > 0 && + Object.keys(added).map(key => inlineItem(key, "added"))} + {deleted && + Object.keys(deleted).length > 0 && + Object.keys(deleted).map(key => inlineItem(key, "deleted"))} + {updated && + Object.keys(updated).length > 0 && + Object.keys(updated).map(key => inlineItem(key, "updated"))} + + ); + default: + if (changes <= 0) { + return ( + + + + + + + Setting were resynced to ensure consistency with the cloud + + + + ); + } + return ( + + {added && Object.keys(added).length > 0 && ( + {Object.keys(added).map(key => listItem(key, "added"))} + )} + {deleted && Object.keys(deleted).length > 0 && ( + + {Object.keys(deleted).map(key => listItem(key, "deleted"))} + + )} + {updated && Object.keys(updated).length > 0 && ( + + {Object.keys(updated).map(key => listItem(key, "updated"))} + + )} + + ); + } +} + +export interface Record { + timestamp: string; + data: any; + user: string; + status: string; + type?: pond.ObjectType; +} + +export interface ListResult { + records: Record[]; + offset: number; + total: number; +} + +interface Props { + name: string; + kind: string; + showTitle: boolean; + list: (limit: number, offset: number) => Promise; + translateKey: (key: keyof any, type?: pond.ObjectType) => string; + translateValue: (key: keyof any, obj: any, type?: pond.ObjectType) => string; + headerStyle?: React.CSSProperties; + cellStyle?: React.CSSProperties | ((data: RowData[], rowData: RowData) => React.CSSProperties); + noPaging?: boolean; + sortingEnabled?: boolean; + filteringEnabled?: boolean; + drawer?: boolean; +} + +export default function DiffHistory(props: Props) { + const { + kind, + name, + headerStyle, + cellStyle, + list, + translateKey, + translateValue, + showTitle, + noPaging, + sortingEnabled, + filteringEnabled, + drawer + } = props; + const userAPI = useUserAPI(); + const [pageSize, setPageSize] = useState(10); + const [profiles, setProfiles] = useState(new Map()); + const isMobile = useMobile(); + const [page, setPage] = useState(0); + const [data, setData] = useState([]); + const [total, setTotal] = useState(0); + + useEffect(() => { + new Promise(resolve => { + list(pageSize, page * pageSize) + .then((res: ListResult) => { + let records = res.records; + let uniqueUsers = Array.from( + new Set(records.map((record: Record) => record.user).filter(id => !profiles.has(id))) + ); + let req = + uniqueUsers.length > 0 + ? userAPI.getProfiles(uniqueUsers) + : new Promise(resolve => resolve([])); + req + .then((res: pond.UserProfile[]) => { + res.forEach((profile: pond.UserProfile) => profiles.set(profile.id, profile)); + setProfiles(profiles); + }) + .catch((err: any) => console.log(err)) + .finally(() => { + let data: RowData[] = []; + for (let i = 0; i < records.length; i++) { + let record = records[i]; + let timestamp = record.timestamp; + let user = record.user; + //let typeString = record.type ? ObjectDescriber(record.type).name : kind; + let before = {}; + if (i < records.length - 1) { + if (record.type) { + let found = false; + let k = i; + while (!found && k < records.length - 1) { + let nextRecord = records[k + 1]; + if (record.type === nextRecord.type) { + if (record.type === pond.ObjectType.OBJECT_TYPE_DEVICE) { + if (record.data.deviceId === nextRecord.data.deviceId) { + before = nextRecord.data; + found = true; + } + } else if ( + record.type === pond.ObjectType.OBJECT_TYPE_COMPONENT || + record.type === pond.ObjectType.OBJECT_TYPE_INTERACTION + ) { + if (record.data.key === nextRecord.data.key) { + before = nextRecord.data; + found = true; + } + } + } + k++; + } + } else { + before = records[i + 1].data; + } + } + let after = record.data; + let diff = detailedDiff(before, after) as Diff; + let changes = countNumChanges(diff); + let type = record.type; + let status = record.status; + + data.push({ + timestamp, + user, + changes, + before, + after, + diff, + status, + type + }); + } + setData(data); + setTotal(res.total); + resolve({ data: data, page: page, totalCount: res.total }); + }); + }) + .catch((err: any) => { + setData([]); + resolve({ data: [], page: 0, totalCount: 0 }); + }); + }); + }, [pageSize, page, kind, list, profiles, userAPI]); + + const countNumChanges = (diff: Diff): number => { + const { added, updated, deleted } = diff; + let count = 0; + count = count + Object.keys(added).length; + count = count + Object.keys(deleted).length; + count = count + Object.keys(updated).length; + return count; + }; + + const getProfile = (id: string): pond.UserProfile => { + if (id === "system") { + return pond.UserProfile.create({ id: "system", name: "System" }); + } + let profile = profiles.get(id); + return profile ? profile : pond.UserProfile.create(); + }; + + const columns = (): Column[] => { + return [{ + title: "Time", + render: (row: RowData) => ( +
+ {moment(row.timestamp).calendar()} +
+ ), + // defaultSort: "asc", + // cellStyle: cellStyle, + // customSort: (a, b) => moment(b.timestamp).diff(moment(a.timestamp)) + }, + { + title: "Object Type", + render: row => { + if (row.type) { + return (
ObjectDescriber(row.type).name
) + } + return
+ } + }, + { + title: "User", + // cellStyle: cellStyle, + // field: "user", + render: row => { + const profile = getProfile(row.user); + const avatarURL = profile.avatar; + const name = profile.name ? profile.name : "User " + profile.id; + const avatar = avatarURL ? ( + + ) : ( + + + + ); + return ( +
+ +
+ ); + }, + // customSort: (a, b) => a.user.localeCompare(b.user) + //customFilterAndSearch: (filt: string, row: RowData) => row.user.toLowerCase().includes(filt.toLowerCase()) + }, + { + title: "Status", + render: row =>
row.status
+ }, + { + title: "Summary", + // cellStyle: cellStyle, + // hidden: isMobile || drawer, + render: row => ( + + ), + // sorting: false + } + ] + } + + const handleRowsPerPageChange = (event: any) => { + const newRowsPerPage = parseInt(event.target.value, 10); // Get selected value + setPageSize(newRowsPerPage); + setPage(0); // Reset to the first page + } + + return ( + + title={name + " History"} + rows={data} + columns={columns()} + total={0} + pageSize={0} + page={0} + setPage={setPage} + handleRowsPerPageChange={handleRowsPerPageChange} + /> + ) + + // return ( + // { + // setPage(e); + // }} + // options={{ + // paging: noPaging ? false : true, + // pageSize: pageSize, + // pageSizeOptions: [5, 10, 20], + // showTitle: showTitle, + // toolbar: showTitle, + // search: false, + // sorting: sortingEnabled ? true : false, + // columnsButton: showTitle, + // header: true, + // headerStyle: headerStyle, + // filtering: filteringEnabled + // }} + // localization={{ + // body: { emptyDataSourceMessage: "No records found" } + // }} + // onChangeRowsPerPage={pageSize => setPageSize(pageSize)} + // columns={[ + // { + // title: "Time", + // render: (row: RowData) => ( + //
+ // {moment(row.timestamp).calendar()} + //
+ // ), + // defaultSort: "asc", + // cellStyle: cellStyle, + // customSort: (a, b) => moment(b.timestamp).diff(moment(a.timestamp)) + // }, + // { + // title: "Object Type", + // render: row => { + // if (row.type) { + // return ObjectDescriber(row.type).name; + // } + // } + // }, + // { + // title: "User", + // cellStyle: cellStyle, + // field: "user", + // render: row => { + // const profile = getProfile(row.user); + // const avatarURL = profile.avatar; + // const name = profile.name ? profile.name : "User " + profile.id; + // const avatar = avatarURL ? ( + // + // ) : ( + // + // + // + // ); + // return ( + //
+ // + //
+ // ); + // }, + // customSort: (a, b) => a.user.localeCompare(b.user) + // //customFilterAndSearch: (filt: string, row: RowData) => row.user.toLowerCase().includes(filt.toLowerCase()) + // }, + // { + // title: "Status", + // render: row => row.status + // }, + // { + // title: "Summary", + // cellStyle: cellStyle, + // hidden: isMobile || drawer, + // render: row => ( + // + // ), + // sorting: false + // } + // ]} + // icons={getTableIcons()} + // data={data} + // page={page} + // totalCount={total} + // detailPanel={row => { + // return ( + // + // ); + // }} + // onRowClick={(event, row, togglePanel) => togglePanel && togglePanel()} + // /> + // ); +} diff --git a/src/component/ComponentHistory.tsx b/src/component/ComponentHistory.tsx index 31afbdb..8173b12 100644 --- a/src/component/ComponentHistory.tsx +++ b/src/component/ComponentHistory.tsx @@ -1,8 +1,7 @@ -import { Box } from "@material-ui/core"; +import { Box } from "@mui/material"; import { useComponentAPI } from "hooks"; import { Component, Device } from "models"; import { pond } from "protobuf-ts/pond"; -import React from "react"; import { or } from "utils/types"; import { TranslateKey, TranslateValue } from "pbHelpers/Component"; import DiffHistory, { ListResult, Record } from "common/DiffHistory"; diff --git a/src/device/DeviceHistory.tsx b/src/device/DeviceHistory.tsx new file mode 100644 index 0000000..f41f91c --- /dev/null +++ b/src/device/DeviceHistory.tsx @@ -0,0 +1,65 @@ +import { Box } from "@mui/material"; +import { useDeviceAPI } from "hooks"; +import { Device } from "models"; +import { pond } from "protobuf-ts/pond"; +import { or } from "utils/types"; +import { TranslateKey, TranslateValue } from "pbHelpers/Device"; +import DiffHistory, { ListResult, Record } from "common/DiffHistory"; + +interface Props { + device: Device; +} + +export default function DeviceHistory(props: Props) { + const deviceAPI = useDeviceAPI(); + + let list = (limit: number, offset: number): Promise => { + return new Promise(resolve => { + deviceAPI + .listHistory(props.device.id(), limit, offset) + .then((res: any) => { + let records: Record[] = or(res.data.history, []).map((record: any) => { + //console.log(record) + return { + timestamp: or(record.timestamp, ""), + user: or(record.user, ""), + data: or(record.device, {}), + status: or(record.progress, "Unknown") + } as Record; + }); + resolve({ + records: records, + total: or(res.data.total, 0), + offset: or(res.data.nextOffset, 0) + }); + }) + .catch((_err: any) => { + resolve({ + records: [] as Record[], + total: 0, + offset: 0 + }); + }); + }); + }; + + let translateKey = (key: keyof any): string => { + return TranslateKey(key as keyof pond.DeviceSettings); + }; + + let translateValue = (key: keyof any, obj: any): string => { + return TranslateValue(key as keyof pond.DeviceSettings, pond.DeviceSettings.fromObject(obj)); + }; + return ( + + + + ); +} diff --git a/src/navigation/Router.tsx b/src/navigation/Router.tsx index cb7a5ee..27bca70 100644 --- a/src/navigation/Router.tsx +++ b/src/navigation/Router.tsx @@ -1,4 +1,4 @@ -import { Suspense } from "react"; +import { lazy, Suspense } from "react"; import LoadingScreen from "../app/LoadingScreen"; import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; import { Typography } from "@mui/material"; @@ -14,6 +14,8 @@ import GroupsPage from "pages/Groups"; import GroupPage from "pages/Group"; import { ErrorBoundary } from "react-error-boundary"; +const DeviceHistory = lazy(() => import("pages/DeviceHistory")); + interface Props { toggleTheme: () => void; } @@ -70,7 +72,11 @@ export default function Router(props: Props) { path="/:deviceID" // "/settings/basic" element={} /> - } + /> + } /> diff --git a/src/objects/ObjectAlerts.tsx b/src/objects/ObjectAlerts.tsx new file mode 100644 index 0000000..5239c6d --- /dev/null +++ b/src/objects/ObjectAlerts.tsx @@ -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; + componentDevices: Map; + 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([]); + const [typeOptions, setTypeOptions] = useState([]); + const [alerts, setAlerts] = useState([]); + //the interaction key to the component it is set on + const [interactionComponent, setInteractionComponent] = useState>(new Map()); + + //state variables for notifications + const notificationAPI = useNotificationAPI(); + const [recentNotifications, setRecentNotifications] = useState([]); + 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([]); + const [newAlertComponentType, setNewAlertComponentType] = useState( + quack.ComponentType.COMPONENT_TYPE_INVALID + ); + const [conditions, setConditions] = useState([]); + const [nodeOptions, setNodeOptions] = useState([]); + const [subtypeDropdown, setSubtypeDropdown] = useState(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 = 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( + + {i === 0 ? "None" : "Node " + i} + + ); + } + 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 ( + + {type + " " + comparison + " " + value + describer.GetUnit()} + + ); + }; + + const alertAccordion = (alert: Alert) => { + return ( + + }> + + {alert.conditions.map((condition, i) => ( + + {readableCondition(condition)} + + ))} + + + + + Reporting Components + {alert.components.map((comp, i) => ( + {comp.name()} + ))} + + + + ); + }; + + 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 ( + + {matching.map(comp => ( + + + { + let selected = selectedAlertComponents; + if (checked) { + selected.push(comp.key()); + } else { + selected.splice(selected.indexOf(comp.key()), 1); + } + setSelectedAlertComponents([...selected]); + }} + /> + + {comp.name()} + + ))} + + ); + }; + + 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 => ( + + {describeMeasurement(measurementType).label()} + + )); + }; + + 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 ( + + + {index > 0 && ( + + AND + + )} + + { + condition.measurementType = +event.target.value; + changeCondition(condition, index); + }} + autoFocus={false} + margin="dense" + variant="standard" + fullWidth + InputLabelProps={{ shrink: true }}> + {measurementTypeMenuItems()} + + + + { + condition.comparison = +event.target.value; + changeCondition(condition, index); + }} + autoFocus={false} + margin="dense" + variant="standard" + fullWidth + InputLabelProps={{ shrink: true }}> + {!isBoolean && [ + + {"is below"} + , + + {"is above"} + + ]} + + {"is exactly"} + + + + + { + 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: {describer.unit()} + }} + InputLabelProps={{ shrink: true }}> + {isBoolean && [ + + {describer.enumerations()[0]} + , + + {describer.enumerations()[1]} + + ]} + + + + {index === 0 ? ( + + 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)}> + + + + ) : ( + + { + let c = conditions; + c.splice(index, 1); + setConditions([...c]); + }} + className={classNames(classes.redButton, classes.noPadding)}> + + + + )} + + + {nodeOptions.length > 2 && ( + + + { + setSubtypeDropdown(+event.target.value); + }} + margin="dense" + variant="standard" + fullWidth + InputLabelProps={{ shrink: true }}> + + Any + + + Average + + + Single Node + + + Node Diff + + + Up To + + + + + {(subtypeDropdown === 2 || subtypeDropdown === 3 || subtypeDropdown === 4) && ( + { + setNodeOne(+event.target.value); + }} + margin="dense" + variant="standard" + fullWidth + InputLabelProps={{ shrink: true }}> + {nodeOptions} + + )} + + + {subtypeDropdown === 3 && ( + { + setNodeTwo(+event.target.value); + }} + margin="dense" + variant="standard" + fullWidth + InputLabelProps={{ shrink: true }}> + {nodeOptions} + + )} + + + )} + + ); + }; + + const conditionInput = () => { + // const conditionGroups: JSX.Element[] = []; + // for (let i = 0; i < conditions.length; i++) { + // conditionGroups[i] = conditionGroup(i); + // } + return ( + + Conditions + {selectedAlertComponents.length > 0 ? ( + + {conditions.map((condition, i) => conditionGroup(condition, i))} + + ) : ( + You must select a source before adding conditions + )} + + ); + }; + + 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 ( + + toggleDaySelected(day, event)} + value={day} + color="secondary" + /> + } + label={capitalize(day.substr(0, 2))} + labelPlacement="bottom" + /> + + ); + }; + + 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 ( + + Schedule + + {daySelector("sunday", 3)} + {daySelector("monday", 3)} + {daySelector("tuesday", 3)} + {daySelector("wednesday", 3)} + {daySelector("thursday", 4)} + {daySelector("friday", 4)} + {daySelector("saturday", 4)} + + + + setScheduleTime("shortcut", event)} + fullWidth + autoFocus={false} + margin="normal" + variant="standard" + InputLabelProps={{ shrink: true }}> + + All Day + + + Before + + + After + + + From + + + + {showStart && ( + + } + value={start} + onChange={(event: any) => setScheduleTime("start", event)} + /> + + )} + {showBoth && ( + + + to + + + )} + {showEnd && ( + + } + value={end} + onChange={(event: any) => setScheduleTime("end", event)} + /> + + )} + + + ); + }; + + const newAlertDialog = () => { + return ( + { + setNewAlertOpen(false); + }}> + Set New Alert + + {/* Dropdown to select the component type to add the interaction to */} + + {/* list of checkboxes for the components that match that type */} + {listMatchingComponents()} + {/* have the conditions set here */} + {conditionInput()} + {/* have the schedule set here */} + {scheduler()} + + + + + + + ); + }; + + const alertDisplay = () => { + return ( + + Alerts + {alerts.map((alert, i) => ( + {alertAccordion(alert)} + ))} + + ); + }; + + const notificationList = () => { + return ( + + Notifications + {recentNotifications && ( + + {recentNotifications.map((notification, i) => ( + + + {moment(notification.status?.timestamp).format("MMMM DD, YYYY - h:mm a")} + {" "} + :{" "} + + {notification.settings?.title + " - " + notification.settings?.subtitle} + + + ))} + {recentNotifications.length < totalNotifications && ( + + + + )} + + )} + + ); + }; + + return ( + + + Alerts & Notifications + + + {alertDisplay()} + {notificationList()} + {newAlertDialog()} + + ); +} diff --git a/src/objects/ObjectDescriber.ts b/src/objects/ObjectDescriber.ts new file mode 100644 index 0000000..c73d26a --- /dev/null +++ b/src/objects/ObjectDescriber.ts @@ -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[]; + //this map will match the title of the column to what the backend needs to perform the ordering + tableSort: Map; +} + +const defaultObject: ObjectExtension = { + name: "None", + inventoryGroup: "", + isTransactionObject: false, + tableColumns: [], + tableSort: new Map() +}; + +export const ObjectExtensions: Map = 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[], + 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[], + 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[], + 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[], + 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[], + 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.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[], + 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; +} diff --git a/src/objects/ObjectTable.tsx b/src/objects/ObjectTable.tsx new file mode 100644 index 0000000..6d922ef --- /dev/null +++ b/src/objects/ObjectTable.tsx @@ -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