Change to one macro modal as part of modal controller.

gbmhunter · May 17, 2024 · 40c1c1b · 40c1c1b
1 parent 0eba9d4
commit 40c1c1b
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 10 deletions.
diff --git a/...el/Terminals/RightDrawer/Macros/Macros.ts → ...als/RightDrawer/Macros/MacroController.ts b/...el/Terminals/RightDrawer/Macros/Macros.ts → ...als/RightDrawer/Macros/MacroController.ts
@@ -5,6 +5,7 @@ export class Macro {
   app: App;
   name: string;
   data: string;
+  isSettingsModalOpen: boolean = false;
 
   constructor(app: App, name: string, data: string) {
     this.app = app;
@@ -25,12 +26,21 @@ export class Macro {
     const data = new TextEncoder().encode(this.data);
     this.app.writeBytesToSerialPort(data);
   }
+
+  setIsSettingsModalOpen(isOpen: boolean) {
+    console.log('Set isSettingsModalOpen:', isOpen);
+    this.isSettingsModalOpen = isOpen;
+  }
 }
 
-export class Macros {
+export class MacroController {
 
   macrosArray: Macro[] = [];
 
+  macroToDisplayInModal: Macro | null = null;
+
+  isModalOpen: boolean = false;
+
   constructor(app: App) {
 
     // Create individual macros. These will be displayed in the right-hand drawer
@@ -42,4 +52,14 @@ export class Macros {
     makeAutoObservable(this); // Make sure this near the end
   }
 
+  setMacroToDisplayInModal(macro: Macro) {
+    console.log('Set macro to display in modal:', macro);
+    this.macroToDisplayInModal = macro;
+  }
+
+  setIsModalOpen(isOpen: boolean) {
+    console.log('Set isModalOpen:', isOpen);
+    this.isModalOpen = isOpen;
+  }
+
 }
diff --git a/src/model/Terminals/RightDrawer/RightDrawer.ts b/src/model/Terminals/RightDrawer/RightDrawer.ts
@@ -1,14 +1,14 @@
 import { makeAutoObservable } from 'mobx';
-import { Macros } from './Macros/Macros';
+import { MacroController } from './Macros/MacroController';
 import { App } from 'src/model/App';
 
 export default class RightDrawer {
 
-  macros: Macros;
+  macroController: MacroController;
 
   constructor(app: App) {
 
-    this.macros = new Macros(app);
+    this.macroController = new MacroController(app);
 
     makeAutoObservable(this); // Make sure this near the end
   }

diff --git a/src/view/Terminals/RightDrawer/MacroView.tsx → ...ew/Terminals/RightDrawer/MacroRowView.tsx b/src/view/Terminals/RightDrawer/MacroView.tsx → ...ew/Terminals/RightDrawer/MacroRowView.tsx
@@ -4,17 +4,19 @@ import "react-resizable/css/styles.css";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 
-import { Macro } from "src/model/Terminals/RightDrawer/Macros/Macros";
+import { Macro, MacroController } from "src/model/Terminals/RightDrawer/Macros/MacroController";
 import { App } from "src/model/App";
 import { PortState } from "src/model/Settings/PortConfigurationSettings/PortConfigurationSettings";
+import MacroSettingsModalView from "./MacroSettingsModalView";
 
 interface Props {
   app: App;
+  macroController: MacroController;
   macro: Macro;
 }
 
 export default observer((props: Props) => {
-  const { app, macro } = props;
+  const { app, macroController, macro } = props;
 
   return (
     <div style={{ display: "flex", alignItems: "center" }}>
@@ -61,10 +63,23 @@ export default observer((props: Props) => {
       {/* 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" }}>
+        <IconButton
+          aria-label="more-settings-for-macro"
+          size="small"
+          style={{ padding: "1px" }}
+          onClick={() => {
+            macroController.setMacroToDisplayInModal(macro);
+            macroController.setIsModalOpen(true);
+          }}
+        >
           <MoreHorizIcon />
         </IconButton>
       </Tooltip>
+      {/* It shouldn't be a performance problem to create a modal component per macro row, as per
+      https://mui.com/material-ui/react-modal/ the modal content is unmounted when closed. If it does become
+      a problem, we could instead just have one modal and it's populated with the contents of whatever macro
+      settings button is clicked */}
+      {/* <MacroSettingsModalView app={app} macro={macro} /> */}
     </div>
   );
 });
diff --git a/src/view/Terminals/RightDrawer/MacroSettingsModalView.tsx b/src/view/Terminals/RightDrawer/MacroSettingsModalView.tsx
@@ -0,0 +1,60 @@
+import { IconButton, Modal, TextField, Tooltip } from "@mui/material";
+import { observer } from "mobx-react-lite";
+import "react-resizable/css/styles.css";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+
+import { Macro, MacroController } from "src/model/Terminals/RightDrawer/Macros/MacroController";
+import { App } from "src/model/App";
+
+interface Props {
+  app: App;
+  macroController: MacroController;
+}
+
+export default observer((props: Props) => {
+  const { app, macroController } = props;
+
+  return (
+    <Modal
+      open={macroController.isModalOpen}
+      onClose={() => {
+        macroController.setIsModalOpen(false);
+      }}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
+    >
+      <div style={{ padding: '20px', backgroundColor: "#202020", width: "80%", height: "80%", display: "flex", flexDirection: "column", gap: "20px" }}>
+        <span>Macro Settings</span>
+        <TextField
+          size="small"
+          variant="outlined"
+          label="Data"
+          inputProps={{
+            style: {
+              padding: 5,
+            },
+          }}
+          multiline={true}
+          minRows={10}
+          value={macroController.macroToDisplayInModal?.data}
+          onChange={(e) => macroController.macroToDisplayInModal?.setData(e.target.value)}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+          }} // Don't want the global keydown event to trigger
+        />
+        <IconButton
+          aria-label="send-macro-data"
+          size="small"
+          style={{ padding: "1px" }}
+          onClick={() => {
+            macroController.macroToDisplayInModal?.send();
+          }}
+        >
+          <ArrowForwardIcon />
+        </IconButton>
+      </div>
+    </Modal>
+  );
+});
diff --git a/src/view/Terminals/RightDrawer/RightDrawerView.tsx b/src/view/Terminals/RightDrawer/RightDrawerView.tsx
@@ -3,7 +3,8 @@ import { ResizableBox } from "react-resizable";
 import "react-resizable/css/styles.css";
 
 import { App } from "src/model/App";
-import MacroView from "./MacroView";
+import MacroView from "./MacroRowView";
+import MacroSettingsModalView from "./MacroSettingsModalView";
 
 interface Props {
   app: App;
@@ -13,8 +14,8 @@ export default observer((props: Props) => {
   const { app } = props;
 
   // Create macro rows
-  const macroRows = app.terminals.rightDrawer.macros.macrosArray.map((macro, index) => {
-    return <MacroView key={index} app={app} macro={macro} />;
+  const macroRows = app.terminals.rightDrawer.macroController.macrosArray.map((macro, index) => {
+    return <MacroView key={index} app={app} macroController={app.terminals.rightDrawer.macroController} macro={macro} />;
   });
 
   return (
@@ -48,6 +49,7 @@ export default observer((props: Props) => {
         {macroRows}
       </div>
       </div>
+      <MacroSettingsModalView app={app} macroController={app.terminals.rightDrawer.macroController} />
     </ResizableBox>
   );
 });