Disable macro send button when port is closed.

gbmhunter · May 17, 2024 · fa9de8d · fa9de8d
1 parent efc4209
commit fa9de8d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 71 deletions.
diff --git a/src/model/Terminals/RightDrawer/Macros/Macros.ts b/src/model/Terminals/RightDrawer/Macros/Macros.ts
@@ -11,6 +11,13 @@ export class Macro {
     makeAutoObservable(this); // Make sure this near the end
   }
 
+  setData(data: string) {
+    this.data = data;
+  }
+
+  send() {
+    console.log('Send macro data:', this.data);
+  }
 }
 
 export class Macros {
@@ -25,4 +32,5 @@ export class Macros {
 
     makeAutoObservable(this); // Make sure this near the end
   }
+
 }
diff --git a/src/view/Terminals/RightDrawer/MacroView.tsx b/src/view/Terminals/RightDrawer/MacroView.tsx
@@ -1,90 +1,66 @@
-import {
-  Box,
-  Button,
-  ButtonPropsColorOverrides,
-  FormControl,
-  FormControlLabel,
-  IconButton,
-  InputAdornment,
-  InputLabel,
-  MenuItem,
-  Select,
-  Switch,
-  TextField,
-  Tooltip,
-  Typography,
-  useMediaQuery,
-} from "@mui/material";
-import CancelIcon from "@mui/icons-material/Cancel";
-import DeleteIcon from "@mui/icons-material/Delete";
-import { OverridableStringUnion } from "@mui/types";
-import KofiButton from "kofi-button";
+import { IconButton, TextField, Tooltip } from "@mui/material";
 import { observer } from "mobx-react-lite";
-import { ResizableBox } from "react-resizable";
 import "react-resizable/css/styles.css";
-import SendIcon from "@mui/icons-material/Send";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 
-import { App, PortType } from "src/model/App";
-import { PortState } from "src/model/Settings/PortConfigurationSettings/PortConfigurationSettings";
-import SingleTerminalView from "../SingleTerminal/SingleTerminalView";
-import { DataViewConfiguration, dataViewConfigEnumToDisplayName } from "src/model/Settings/DisplaySettings/DisplaySettings";
-import ApplyableTextFieldView from "src/view/Components/ApplyableTextFieldView";
-import { portStateToButtonProps } from "src/view/Components/PortStateToButtonProps";
 import { Macro } from "src/model/Terminals/RightDrawer/Macros/Macros";
+import { App } from "src/model/App";
+import { PortState } from "src/model/Settings/PortConfigurationSettings/PortConfigurationSettings";
 
 interface Props {
+  app: App;
   macro: Macro;
 }
 
 export default observer((props: Props) => {
-  const { macro } = props;
+  const { app, macro } = props;
 
   return (
-      <div style={{ display: "flex", alignItems: "center" }}>
-        <span>{macro.name}</span>
-        {/* ================================================ */}
-        {/* MACRO DATA */}
-        {/* ================================================ */}
-        <Tooltip
-          title='The data to send for this macro.'
-          enterDelay={500}
-          arrow
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <span>{macro.name}</span>
+      {/* ================================================ */}
+      {/* MACRO DATA */}
+      {/* ================================================ */}
+      <Tooltip title="The data to send for this macro." enterDelay={500} arrow>
+        <TextField
+          size="small"
+          variant="outlined"
+          inputProps={{
+            style: {
+              padding: 5,
+            },
+          }}
+          value={macro.data}
+          onChange={(e) => macro.setData(e.target.value)}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+          }} // Don't want the global keydown event to trigger
+        />
+      </Tooltip>
+      {/* ================================================ */}
+      {/* MACRO SEND BUTTON */}
+      {/* ================================================ */}
+      <Tooltip title="Send the data to the serial port." enterDelay={500} arrow>
+        <IconButton
+          aria-label="send-macro-data"
+          size="small"
+          style={{ padding: "1px" }}
+          disabled={app.portState !== PortState.OPENED}
+          onClick={() => {
+            macro.send();
+          }}
         >
-          <TextField
-            size="small"
-            variant="outlined"
-            inputProps={{
-              style: {
-                padding: 5,
-              },
-            }}
-          ></TextField>
-        </Tooltip>
-        {/* ================================================ */}
-        {/* MACRO SEND BUTTON */}
-        {/* ================================================ */}
-        <Tooltip
-          title='Send the data to the serial port.'
-          enterDelay={500}
-          arrow
-        >
-        <IconButton aria-label="delete" size="small" style={{ padding: '1px' }}>
           <ArrowForwardIcon />
         </IconButton>
-        </Tooltip>
-        {/* MACRO MORE SETTINGS BUTTON */}
-        {/* ================================================ */}
-        <Tooltip
-          title='More settings for this macro.'
-          enterDelay={500}
-          arrow
-        >
-        <IconButton aria-label="delete" size="small" style={{ padding: '1px' }}>
+      </Tooltip>
+      {/* MACRO MORE SETTINGS BUTTON */}
+      {/* ================================================ */}
+      <Tooltip title="More settings for this macro." enterDelay={500} arrow>
+        <IconButton aria-label="more-settings-for-macro" size="small" style={{ padding: "1px" }}>
           <MoreHorizIcon />
         </IconButton>
-        </Tooltip>
-      </div>
+      </Tooltip>
+    </div>
   );
 });
diff --git a/src/view/Terminals/RightDrawer/RightDrawerView.tsx b/src/view/Terminals/RightDrawer/RightDrawerView.tsx
@@ -14,7 +14,7 @@ export default observer((props: Props) => {
 
   // Create macro rows
   const macroRows = app.terminals.rightDrawer.macros.macrosArray.map((macro, index) => {
-    return <MacroView key={index} macro={macro} />;
+    return <MacroView key={index} app={app} macro={macro} />;
   });
 
   return (
@@ -41,10 +41,12 @@ export default observer((props: Props) => {
         ></div>
       }
     >
+      <div className="resizable-child-container"> {/* ResizableBox requires a single child component */}
       <div>Macros</div>
       <div className="macro-rows-container" style={{ display: "flex", flexDirection: "column", gap: "3px" }}>
         {macroRows}
       </div>
+      </div>
     </ResizableBox>
   );
 });