diff --git a/package-lock.json b/package-lock.json index 79d7bf6..b9a8f26 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "axios": "^1.7.7", "dayjs": "^1.11.13", "deep-object-diff": "^1.1.9", + "json-2-csv": "^5.5.8", "lodash": "^4.17.21", "moment": "^2.30.1", "moment-timezone": "^0.5.46", @@ -38,12 +39,12 @@ "react-router-dom": "^6.28.0", "react-virtualized-auto-sizer": "^1.0.25", "recharts": "^2.15.1", - "save-svg-as-png": "^1.4.17", "victory": "^37.3.6" }, "devDependencies": { "@babel/types": "^7.25.8", "@eslint/js": "^9.11.1", + "@types/jsonexport": "^3.0.5", "@types/lodash": "^4.17.13", "@types/react": "^18.3.10", "@types/react-color": "^3.0.13", @@ -54,7 +55,6 @@ "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.12", "globals": "^15.9.0", - "save-svg-as-png": "^1.4.17", "typescript": "^5.5.3", "typescript-eslint": "^8.7.0", "vite": "^6.2.0", @@ -3544,6 +3544,16 @@ "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", "dev": true }, + "node_modules/@types/jsonexport": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@types/jsonexport/-/jsonexport-3.0.5.tgz", + "integrity": "sha512-+zDVaDqNguePOU11YNEsuf/ZRS1ciHeKVYGjfvDFmgG6aCy/s4W4Wy1MiXJIbiyMJLuakGLENCndvmGZpVTV1w==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/lodash": { "version": "4.17.13", "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==", @@ -4787,6 +4797,15 @@ "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==", "license": "MIT" }, + "node_modules/deeks": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/deeks/-/deeks-3.1.0.tgz", + "integrity": "sha512-e7oWH1LzIdv/prMQ7pmlDlaVoL64glqzvNgkgQNgyec9ORPHrT2jaOqMtRyqJuwWjtfb6v+2rk9pmaHj+F137A==", + "license": "MIT", + "engines": { + "node": ">= 16" + } + }, "node_modules/deep-eql": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz", @@ -4878,6 +4897,15 @@ "node": ">=0.4.0" } }, + "node_modules/doc-path": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/doc-path/-/doc-path-4.1.1.tgz", + "integrity": "sha512-h1ErTglQAVv2gCnOpD3sFS6uolDbOKHDU1BZq+Kl3npPqroU3dYL42lUgMfd5UimlwtRgp7C9dLGwqQ5D2HYgQ==", + "license": "MIT", + "engines": { + "node": ">=16" + } + }, "node_modules/dom-helpers": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", @@ -6479,6 +6507,19 @@ "node": ">=6" } }, + "node_modules/json-2-csv": { + "version": "5.5.8", + "resolved": "https://registry.npmjs.org/json-2-csv/-/json-2-csv-5.5.8.tgz", + "integrity": "sha512-eMQHOwV+av8Sgo+fkbEbQWOw/kwh89AZ5fNA8TYfcooG6TG1ZOL2WcPUrngIMIK8dBJitQ8QEU0zbncQ0CX4CQ==", + "license": "MIT", + "dependencies": { + "deeks": "3.1.0", + "doc-path": "4.1.1" + }, + "engines": { + "node": ">= 16" + } + }, "node_modules/json-buffer": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", @@ -7867,13 +7908,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/save-svg-as-png": { - "version": "1.4.17", - "resolved": "https://registry.npmjs.org/save-svg-as-png/-/save-svg-as-png-1.4.17.tgz", - "integrity": "sha512-7QDaqJsVhdFPwviCxkgHiGm9omeaMBe1VKbHySWU6oFB2LtnGCcYS13eVoslUgq6VZC6Tjq/HddBd1K6p2PGpA==", - "dev": true, - "license": "MIT" - }, "node_modules/scheduler": { "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", diff --git a/package.json b/package.json index ccd03b9..b82915d 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "axios": "^1.7.7", "dayjs": "^1.11.13", "deep-object-diff": "^1.1.9", + "json-2-csv": "^5.5.8", "lodash": "^4.17.21", "moment": "^2.30.1", "moment-timezone": "^0.5.46", @@ -48,12 +49,12 @@ "react-router-dom": "^6.28.0", "react-virtualized-auto-sizer": "^1.0.25", "recharts": "^2.15.1", - "save-svg-as-png": "^1.4.17", "victory": "^37.3.6" }, "devDependencies": { "@babel/types": "^7.25.8", "@eslint/js": "^9.11.1", + "@types/jsonexport": "^3.0.5", "@types/lodash": "^4.17.13", "@types/react": "^18.3.10", "@types/react-color": "^3.0.13", @@ -64,7 +65,6 @@ "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.12", "globals": "^15.9.0", - "save-svg-as-png": "^1.4.17", "typescript": "^5.5.3", "typescript-eslint": "^8.7.0", "vite": "^6.2.0", diff --git a/src/common/NotificationButton.tsx b/src/common/NotificationButton.tsx index 33e5089..cf1297a 100644 --- a/src/common/NotificationButton.tsx +++ b/src/common/NotificationButton.tsx @@ -1,5 +1,5 @@ import { IconButton, Tooltip } from "@mui/material"; -// import { Theme } from "@material-ui/core/styles/createMuiTheme"; +// import { Theme } from "@/styles/createMuiTheme"; // import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles"; import NotificationsEnabledIcon from "@mui/icons-material/NotificationsActive"; import NotificationsDisabledIcon from "@mui/icons-material/NotificationsOff"; diff --git a/src/common/SmartBreadcrumb.tsx b/src/common/SmartBreadcrumb.tsx index 4fd8f4a..aa0202c 100644 --- a/src/common/SmartBreadcrumb.tsx +++ b/src/common/SmartBreadcrumb.tsx @@ -270,9 +270,12 @@ export default function SmartBreadcrumb(props: Props) { if (prependPaths) pathnames.unshift(...prependPaths) + //console.log(pathnames) + pathnames.forEach((_value: any, index: any) => { const lastPath = index === pathnames.length - 1; + //console.log(lastPath) const to = `/${pathnames.slice(0, index + 1).join("/")}`; let label = breadcrumbMap[to]; @@ -304,10 +307,12 @@ export default function SmartBreadcrumb(props: Props) { variant={lastPath ? "filled" : "outlined"} label={ {label} diff --git a/src/common/TagSettings.tsx b/src/common/TagSettings.tsx index aced335..6a80452 100644 --- a/src/common/TagSettings.tsx +++ b/src/common/TagSettings.tsx @@ -17,6 +17,7 @@ import { useState } from "react"; import { Tag as TagUI } from "./Tag"; import { red } from "@mui/material/colors"; import { makeStyles, withStyles } from "@mui/styles"; +import CancelSubmit from "./CancelSubmit"; const useStyles = makeStyles((theme: Theme) => { return ({ @@ -72,12 +73,13 @@ function ConfirmDeleteTag(props: ConfirmDeleteTagProps) { - + */} ); @@ -174,6 +176,7 @@ export default function TagSettings(props: Props) { { diff --git a/src/component/ComponentOrder.tsx b/src/component/ComponentOrder.tsx index 3b8329e..95d03aa 100644 --- a/src/component/ComponentOrder.tsx +++ b/src/component/ComponentOrder.tsx @@ -11,10 +11,12 @@ import { ListItemIcon, ListItemText, ListSubheader, - Typography -} from "@material-ui/core"; -import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; -import DragIcon from "@material-ui/icons/DragHandle"; + Typography, + Theme +} from "@mui/material"; +import { makeStyles } from "@mui/styles"; +//import DragIcon from "@material-ui/icons/DragHandle"; +import { DragHandle as DragIcon } from "@mui/icons-material"; import ResponsiveDialog from "common/ResponsiveDialog"; import { useDeviceAPI, usePrevious, useSnackbar } from "hooks"; import { cloneDeep } from "lodash"; @@ -23,17 +25,19 @@ import { sortComponents } from "pbHelpers/Component"; import { pond, quack } from "protobuf-ts/pond"; import React, { useEffect, useState } from "react"; import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd"; +import { useThemeType } from "../hooks/useThemeType"; -const useStyles = makeStyles((theme: Theme) => - createStyles({ +const useStyles = makeStyles((theme: Theme) => { + const themeType = useThemeType() + return ({ item: { backgroundColor: "rgba(0,0,0,0)", "&:hover": { backgroundColor: - theme.palette.type === "light" ? "rgba(0,0,0,0.07)" : "rgba(255,255,255,0.07)" + themeType === "light" ? "rgba(0,0,0,0.07)" : "rgba(255,255,255,0.07)" } } - }) + })} ); interface ItemProps { diff --git a/src/component/ComponentSettings.tsx b/src/component/ComponentSettings.tsx index 5eb2b84..1fbd4fa 100644 --- a/src/component/ComponentSettings.tsx +++ b/src/component/ComponentSettings.tsx @@ -67,6 +67,7 @@ import { Add as AddIcon, } from "@mui/icons-material" +import CancelSubmit from "common/CancelSubmit"; const useStyles = makeStyles((theme: Theme) => { return ({ @@ -820,7 +821,7 @@ export default function ComponentSettings(props: Props) { const actions = () => { return ( - + {mode === "add" ? ( {activeStep === steps.length - 1 ? ( {canEdit && ( - )} + )} */} )} diff --git a/src/component/ExportDataSettings.tsx b/src/component/ExportDataSettings.tsx index 417c8d1..b433d43 100644 --- a/src/component/ExportDataSettings.tsx +++ b/src/component/ExportDataSettings.tsx @@ -93,14 +93,11 @@ class ExportDataSettings extends React.Component { }; submit = () => { - console.log("submit export request") const { device, component, newMeasurements, user } = this.props; const { startDate, endDate } = this.state; const { sampleMeasurements, listUnitMeasurements } = this.context; this.setState({ isLoading: true }); - console.log("Device") - console.log(device) // if (newMeasurements) { listUnitMeasurements( device.id(), diff --git a/src/component/GPS.tsx b/src/component/GPS.tsx index aa94941..985d17c 100644 --- a/src/component/GPS.tsx +++ b/src/component/GPS.tsx @@ -1,4 +1,6 @@ -import { withStyles, Theme, WithTheme, createStyles, WithStyles } from "@material-ui/core/styles"; +//import { withStyles, Theme, WithTheme, createStyles, WithStyles } from "@material-ui/core/styles"; +import { Theme } from "@mui/material" +import { withStyles, createStyles, WithTheme, WithStyles } from "@mui/styles"; import React from "react"; import { parseGPS } from "services/google/mapHelpers"; import { geolocate } from "services/google/googleAPI"; diff --git a/src/component/SensorLight.tsx b/src/component/SensorLight.tsx index 7192f48..167bb6c 100644 --- a/src/component/SensorLight.tsx +++ b/src/component/SensorLight.tsx @@ -1,4 +1,6 @@ -import { Box, createStyles, makeStyles, Theme } from "@material-ui/core"; +//import { Box, createStyles, makeStyles, Theme } from "@material-ui/core"; +import { Box, Theme } from "@mui/material"; +import { makeStyles } from "@mui/styles"; import { Component } from "models"; import { getMeasurementSummary } from "pbHelpers/ComponentType"; import { pond } from "protobuf-ts/pond"; @@ -14,7 +16,7 @@ interface Props { } const useStyles = makeStyles((theme: Theme) => - createStyles({ + ({ "@keyframes ripple": { from: { transform: "scale(.8)", diff --git a/src/device/DeviceSettings.tsx b/src/device/DeviceSettings.tsx index 91f2577..cf7b576 100644 --- a/src/device/DeviceSettings.tsx +++ b/src/device/DeviceSettings.tsx @@ -30,6 +30,7 @@ import { quack } from "protobuf-ts/quack"; import LinearMutationBuilder from "common/LinearMutationBuilder"; import { makeStyles } from "@mui/styles"; import { useNavigate } from "react-router-dom"; +import CancelSubmit from "common/CancelSubmit"; interface TabPanelProps { children?: React.ReactNode; @@ -582,17 +583,18 @@ export default function DeviceSettings(props: Props) { const actions = () => { return ( - - + + {canRemove() && Delete} - - + */} ); diff --git a/src/fans/fanPicker.tsx b/src/fans/fanPicker.tsx index 30f70d2..bf8ea96 100644 --- a/src/fans/fanPicker.tsx +++ b/src/fans/fanPicker.tsx @@ -1,5 +1,5 @@ import { - Grid, + Grid2 as Grid, Button, Typography, DialogTitle, @@ -12,8 +12,9 @@ import { RadioGroup, Radio, Box -} from "@material-ui/core"; -import { blue } from "@material-ui/core/colors"; +} from "@mui/material"; +//import { blue } from "@material-ui/core/colors"; +import { blue } from "@mui/material/colors"; import ResponsiveDialog from "common/ResponsiveDialog"; import React, { useState, useEffect } from "react"; import fans from "fans/fans_client.json"; @@ -203,13 +204,12 @@ export default function FanPicker(props: Props) { alignItems="center" container direction="row" - justify="space-between" key={type} style={{ marginTop: 20 }}> - + } label={type} /> - + fanimg @@ -245,9 +245,8 @@ export default function FanPicker(props: Props) { - + - - Select Fan - + + Select Fan + {selector()} - + - + {displayFan} @@ -387,8 +386,8 @@ export default function FanPicker(props: Props) { Current Fan {displayFan} - - + + { return ( - + {mode === "add" ? ( {(mode === "add" && tabIndex === steps.length - 1) || mode === "update" @@ -460,7 +466,7 @@ export default function GroupSettings(props: Props) { - )} + )} */} ); diff --git a/src/interactions/InteractionSettings.tsx b/src/interactions/InteractionSettings.tsx index c72de0d..d46c8b3 100644 --- a/src/interactions/InteractionSettings.tsx +++ b/src/interactions/InteractionSettings.tsx @@ -64,6 +64,7 @@ import { green, red } from "@mui/material/colors"; import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import dayjs from "dayjs"; +import CancelSubmit from "common/CancelSubmit"; // import { Sensor } from "ventilation/drawable/Sensor"; @@ -1555,14 +1556,15 @@ export default function InteractionSettings(props: Props) { const actions = () => { return ( - + {mode === "update" && canEdit && ( Delete )} - {canEdit && ( @@ -1572,7 +1574,7 @@ export default function InteractionSettings(props: Props) { disabled={!isInteractionValid(interaction) || invalidConditionValues()}> Submit - )} + )} */} ); diff --git a/src/objects/ObjectAlerts.tsx b/src/objects/ObjectAlerts.tsx index 5239c6d..ed2b541 100644 --- a/src/objects/ObjectAlerts.tsx +++ b/src/objects/ObjectAlerts.tsx @@ -6,7 +6,6 @@ import { Button, Card, Checkbox, - createStyles, DialogActions, DialogContent, DialogTitle, @@ -14,7 +13,7 @@ import { FormControlLabel, FormHelperText, FormLabel, - Grid, + Grid2 as Grid, IconButton, InputAdornment, List, @@ -22,15 +21,17 @@ import { ListItemIcon, ListItemText, ListSubheader, - makeStyles, MenuItem, Select, TextField, Theme, Tooltip, Typography -} from "@material-ui/core"; -import { ExpandMore } from "@material-ui/icons"; +} from "@mui/material"; +import { ExpandMore, RemoveCircle as RemoveIcon, AddCircle as AddIcon } from "@mui/icons-material"; +//import RemoveIcon from "@material-ui/icons/RemoveCircle"; +//import { ExpandMore } from "@material-ui/icons"; +//import AddIcon from "@material-ui/icons/AddCircle"; import ResponsiveDialog from "common/ResponsiveDialog"; import { Option } from "common/SearchSelect"; import classNames from "classnames"; @@ -44,13 +45,17 @@ 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"; +//import { TimePicker } from "@material-ui/pickers"; +import { TimePicker } from "@mui/x-date-pickers"; +//import { getThemeType } from "theme"; +import { getThemeType } from "theme/themeType"; +//import { green, red } from "@material-ui/core/colors"; +import { green, red } from "@mui/material/colors"; +import { makeStyles } from "@mui/styles"; + + interface Props { linkedComponents: Map; @@ -65,7 +70,7 @@ interface Alert { } const useStyles = makeStyles((theme: Theme) => { - return createStyles({ + return ({ borderedContainer: { padding: theme.spacing(1), marginBottom: theme.spacing(2), @@ -327,7 +332,7 @@ export default function ObjectAlerts(props: Props) { }> {alert.conditions.map((condition, i) => ( - + {readableCondition(condition)} ))} @@ -448,15 +453,14 @@ export default function ObjectAlerts(props: Props) { key={"interaction"} container direction="row" - justify="center" alignItems="center" spacing={2}> {index > 0 && ( - + AND )} - + - + - + - + {index === 0 ? ( - + - + {(subtypeDropdown === 2 || subtypeDropdown === 3 || subtypeDropdown === 4) && ( )} - + {subtypeDropdown === 3 && ( { //const schedule = or(interaction.settings.schedule, pond.InteractionSchedule.create()); return ( - + Schedule - + {daySelector("sunday", 3)} {daySelector("monday", 3)} {daySelector("tuesday", 3)} @@ -802,7 +805,7 @@ export default function ObjectAlerts(props: Props) { {daySelector("saturday", 4)} - + {showStart && ( - + } + //renderInput={props => } value={start} onChange={(event: any) => setScheduleTime("start", event)} /> )} {showBoth && ( - + )} {showEnd && ( - + } + //renderInput={props => } value={end} onChange={(event: any) => setScheduleTime("end", event)} /> diff --git a/src/objects/bulkEditForms/bulkBinSettings.tsx b/src/objects/bulkEditForms/bulkBinSettings.tsx index 933e0b5..8809ad2 100644 --- a/src/objects/bulkEditForms/bulkBinSettings.tsx +++ b/src/objects/bulkEditForms/bulkBinSettings.tsx @@ -1,4 +1,5 @@ -import { Button, Grid, InputAdornment, TextField } from "@material-ui/core"; +//import { Button, Grid, InputAdornment, TextField } from "@material-ui/core"; +import { Button, Grid, InputAdornment, TextField } from "@mui/material"; import SearchSelect, { Option } from "common/SearchSelect"; import { GrainOptions } from "grain"; import { pond } from "protobuf-ts/pond"; diff --git a/src/objects/bulkEditForms/bulkGrainBagSettings.tsx b/src/objects/bulkEditForms/bulkGrainBagSettings.tsx index f4937ad..87a3ee6 100644 --- a/src/objects/bulkEditForms/bulkGrainBagSettings.tsx +++ b/src/objects/bulkEditForms/bulkGrainBagSettings.tsx @@ -1,4 +1,5 @@ -import { Button, Grid, TextField } from "@material-ui/core"; +//import { Button, Grid, TextField } from "@material-ui/core"; +import { Button, Grid2 as Grid, TextField } from "@mui/material"; import SearchSelect, { Option } from "common/SearchSelect"; import { GrainOptions } from "grain"; import { GrainBag } from "models/GrainBag"; @@ -76,7 +77,7 @@ export default function BulkGrainBagSettings(props: Props) { {/* first row */} - + - + - + - + {/* second row */} - + - + - + - + {/* last row */} - + setFillDate(e.target.value)} /> - + - +