Arm in motion modal

src/assets/stylesheets/navbar.scss

@@ -33,6 +33,7 @@ $white: #fff;
   align-items: center;
   justify-content: space-between;
   flex-direction: row;
+  padding-top: 20px;
 }
 
 .navbar-top-secret {
@@ -51,10 +52,9 @@ $white: #fff;
   justify-content: left;
   padding-left: 4px;
   text-align: center;
-  margin-top: 20px;
-  margin-bottom: 15px;
   color: $light-blue;
   background-color: transparent;
+  margin-left: 2px;
 }
 
 .navbar-top h1 {
@@ -80,7 +80,8 @@ $white: #fff;
 }
 
 .navbar-list-item,
-.navbar-return {
+.navbar-return,
+.navbar-settings {
   width: 100%;
   height: 50px;
   margin: 0 0 3px;
@@ -95,7 +96,8 @@ $white: #fff;
 }
 
 .navbar-list-item span,
-.navbar-return span {
+.navbar-return span,
+.navbar-settings span {
   background-color: transparent;
   width: auto;
   height: auto;
@@ -105,6 +107,19 @@ $white: #fff;
   margin-left: 10px;
 }
 
+.navbar-settings {
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  background-color: $dark-blue;
+}
+
+.navbar-settings span {
+  margin: 0;
+}
+
 .navbar-return {
   width: 90%;
   align-items: center;
@@ -131,6 +146,7 @@ $white: #fff;
 .modal-title,
 .modal-body,
 .modal-close,
+.modal-closeX,
 .modal-return {
   width: auto;
   height: auto;
@@ -175,7 +191,8 @@ $white: #fff;
 }
 
 .modal-close,
-.modal-return {
+.modal-return,
+.modal-closeX {
   cursor: pointer;
   padding: 15px 35px;
   border-radius: 20px;
@@ -186,7 +203,8 @@ $white: #fff;
 }
 
 .modal-close span,
-.modal-return span {
+.modal-return span,
+.modal-closeX span {
   width: auto;
   height: auto;
   background-color: transparent;
@@ -196,6 +214,11 @@ $white: #fff;
   color: $dark-blue;
 }
 
+.modal-closeX {
+  background-color: rgb(255, 152, 152);
+  box-shadow: 0 4px 4px rgba(94, 1, 1, 0.25);
+}
+
 .modal-return {
   width: 30px;
   height: 20px;

src/components/BrowseComponent.js

@@ -21,14 +21,11 @@ export default class BrowseComponent extends Component {
   }
 
   handleMessage = (event) => {
-    //console.log("Got message!");
     try {
       const message = JSON.parse(event.data);
       const cableList = this.browseParse(message);
       this.setState({ cableList });
-    } catch (error) {
+    } catch (error) {}
-      console.error("Error parsing message from server:", error);
-    }
   };
 
   browseParse(message) {

src/components/CableDetailComponent.js

@@ -6,7 +6,7 @@ import Modal from "react-modal";
 import "../assets/stylesheets/cabledetail.scss";
 
 Modal.setAppElement("#root");
-const hostname = window.location.hostname;  // Get the hostname from the URL bar
+const hostname = window.location.hostname; // Get the hostname from the URL bar
 
 class Cable {
   constructor(cableData) {
@@ -17,7 +17,7 @@ class Cable {
     this.image = cableData.image
       ? `http://${hostname}${cableData.image}`
       : DefaultPartImg;
-    this.datasheet = `http://${hostname}${cableData.datasheet}`
+    this.datasheet = `http://${hostname}${cableData.datasheet}`;
     this.dynamicProps = {};
     this.horizontal = [];
     this.vertical = [];
@@ -106,7 +106,6 @@ export default class CableDetailComponent extends Component {
     super(props);
     this.state = {
       cableDetails: null,
-      modalOpen_dispense: false,
       modalOpen_show: false,
       modalOpen_datasheet: false,
       modalOpacity: 0,
@@ -120,11 +119,7 @@ export default class CableDetailComponent extends Component {
       setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
     });
 
-    if (modal === "modalOpen_dispense") {
+    if (modal === "modalOpen_show") {
-      this.props.socket.send(
-        `{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`
-      );
-    } else if (modal === "modalOpen_show") {
       this.props.socket.send(
         `{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`
       );
@@ -137,6 +132,12 @@ export default class CableDetailComponent extends Component {
     });
   };
 
+  dispense() {
+    this.props.socket.send(
+      `{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`
+    );
+  }
+
   componentDidMount() {
     const cablePos = window.location.href.split("/").pop();
     this.props.socket.send(
@@ -147,13 +148,10 @@ export default class CableDetailComponent extends Component {
 
   handleMessage = (event) => {
     try {
-      console.log("Message from server", event.data);
       const message = JSON.parse(event.data);
       const cableDetails = new Cable(message.data.cables[0]);
       this.setState({ cableDetails });
-    } catch (error) {
+    } catch (error) {}
-      console.error("Error parsing message from server:", error);
-    }
   };
 
   componentWillUnmount() {
@@ -165,7 +163,6 @@ export default class CableDetailComponent extends Component {
     try {
       data = JSON.parse(object);
     } catch (error) {
-      console.error("Error parsing JSON data:", error);
       return <div>Error loading data...</div>;
     }
 
@@ -231,13 +228,8 @@ export default class CableDetailComponent extends Component {
   }
 
   render() {
-    const {
+    const { modalOpen_show, modalOpen_datasheet, modalOpacity, cableDetails } =
-      modalOpen_dispense,
+      this.state;
-      modalOpen_show,
-      modalOpen_datasheet,
-      modalOpacity,
-      cableDetails,
-    } = this.state;
     const modalStyle = {
       content: {
         opacity: modalOpacity,
@@ -260,7 +252,7 @@ export default class CableDetailComponent extends Component {
           "linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
         boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
         minWidth: "30%",
-        minHeight: "30%"
+        minHeight: "30%",
       },
       overlay: {
         opacity: modalOpacity,
@@ -353,9 +345,14 @@ export default class CableDetailComponent extends Component {
                 </div>
                 <div className="modal-datasheet">
                   {cableDetails ? (
-                    <iframe src={cableDetails.datasheet} height='70%' width='70%'></iframe>) : (<div className="datasheet"></div>)
+                    <iframe
-                }
+                      src={cableDetails.datasheet}
-                  
+                      height="70%"
+                      width="70%"
+                    ></iframe>
+                  ) : (
+                    <div className="datasheet"></div>
+                  )}
                 </div>
                 <div
                   className="modal-close"
@@ -396,33 +393,11 @@ export default class CableDetailComponent extends Component {
             </Modal>
             <div
               className="cable-actions-button"
-              onClick={() => this.openModal("modalOpen_dispense")}
+              onClick={() => this.dispense()}
             >
               <span>➤ Dispense</span>
               <span>🔽</span>
             </div>
-            <Modal
-              isOpen={modalOpen_dispense}
-              onRequestClose={() => this.closeModal("modalOpen_dispense")}
-              contentLabel="Dispense"
-              style={modalStyle}
-            >
-              <div className="modal-container">
-                <div className="modal-title">
-                  <span>🔽</span>
-                  <span>Dispensing Item</span>
-                </div>
-                <div className="modal-body">
-                  <span>Please wait for your item to be dispensed.</span>
-                </div>
-                <div
-                  className="modal-close"
-                  onClick={() => this.closeModal("modalOpen_dispense")}
-                >
-                  <span>Close</span>
-                </div>
-              </div>
-            </Modal>
           </div>
 
           {cableDetails ? (

src/components/MapComponent.js

@@ -32,7 +32,6 @@ export default class MapComponent extends Component {
 
   handleMessage = (event) => {
     try {
-      console.log("Message from server", event.data);
       const message = JSON.parse(event.data);
       const list = this.browseParse(message);
       this.setState({ cableList: list });
@@ -40,9 +39,7 @@ export default class MapComponent extends Component {
         this.select("0");
         this.updateSelection();
       }, 50);
-    } catch (error) {
+    } catch (error) {}
-      console.error("Error parsing message from server:", error);
-    }
   };
 
   updateSelection() {

src/components/NavBar.js

@@ -9,8 +9,7 @@ export default class NavBar extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      clicks: 0,
+      modalOpen_activeArm: false,
-      modalOpen_return: false,
       modalOpacity: 0,
     };
     this.openModal = this.openModal.bind(this);
@@ -28,38 +27,37 @@ export default class NavBar extends Component {
     } else if (path.includes("cable")) {
       document.getElementById("browse").style.backgroundColor = "#007CBE";
       document.getElementById("browse-s").style.color = "white";
+    } else if (path.includes("settings")) {
+      document.getElementById("settings").style.backgroundColor = "#007CBE";
+      document.getElementById("settings-s").style.color = "white";
     } else {
       document.getElementById("browse").style.backgroundColor = "#007CBE";
       document.getElementById("browse-s").style.color = "white";
     }
+
+    this.props.socket.addEventListener("message", this.handleMessage);
   }
 
-  handleClick = () => {
-    const { clicks, timer } = this.state;
-    if (clicks === 0) {
-      const newTimer = setTimeout(() => {
-        this.setState({ clicks: 0 });
-        clearTimeout(newTimer);
-      }, 1000);
-      this.setState({ timer: newTimer });
-    }
-
-    this.setState({ clicks: clicks + 1 });
-
-    if (clicks + 1 === 2) {
-      window.location.replace("/settings");
-
-      clearTimeout(timer);
-      this.setState({ clicks: 0, timer: null });
-    }
-  };
-
   componentWillUnmount() {
-    if (this.state.timer) {
+    this.props.socket.removeEventListener("message", this.handleMessage);
-      clearTimeout(this.state.timer);
-    }
   }
 
+  handleMessage = (event) => {
+    try {
+      const message = JSON.parse(event.data);
+      if (message.type === "mode") {
+        let mode = JSON.parse(message.data).mode;
+        if (mode === "Idle") {
+          this.closeModal("modalOpen_activeArm");
+        } else {
+          this.openModal("modalOpen_activeArm");
+        }
+      }
+    } catch (error) {
+      console.error("");
+    }
+  };
+
   openModal = (modal) => {
     this.setState({ [modal]: true }, () => {
       setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
@@ -72,16 +70,20 @@ export default class NavBar extends Component {
     });
   };
 
-  returnCable = (tray) => {
+  returnCable = () => {
     this.props.socket.send(
-      `{"type": "cable_get","call": "send","data": {"tray": ${tray}}}`
+      `{"type": "cable_get","call": "send","data": {"tray": 0}}`
+    );
+  };
+
+  cancelAction = () => {
+    this.props.socket.send(
+      `{"type": "cancel_action","call": "request","data": {}}`
     );
-    console.log("Cable returned from tray " + tray);
-    this.closeModal("modalOpen_return");
   };
 
   render() {
-    const { modalOpen_return, modalOpacity } = this.state;
+    const { modalOpen_activeArm, modalOpacity } = this.state;
 
     const modalStyle = {
       content: {
@@ -105,7 +107,7 @@ export default class NavBar extends Component {
           "linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
         boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
         minWidth: "30%",
-        minHeight: "30%"
+        minHeight: "30%",
       },
       overlay: {
         opacity: modalOpacity,
@@ -120,7 +122,9 @@ export default class NavBar extends Component {
         <div className="navbar-top">
           <div className="navbar-top-container">
             <div className="navbar-top-hamburger">≡</div>
-            <div className="navbar-top-secret" onClick={this.handleClick}></div>
+            <NavLink className="navbar-settings" id="settings" to="/settings">
+              <span id="settings-s">⚙️</span>
+            </NavLink>
           </div>
           <h1>Jukebox</h1>
           <ol className="navbar-list">
@@ -139,45 +143,25 @@ export default class NavBar extends Component {
             </NavLink>
           </ol>
         </div>
-        <div
+        <div className="navbar-return" onClick={() => this.returnCable()}>
-          className="navbar-return"
-          onClick={() => this.openModal("modalOpen_return")}
-        >
           <span id="browse-s">Return Cable</span>
         </div>
+
         <Modal
-          isOpen={modalOpen_return}
+          isOpen={modalOpen_activeArm}
-          onRequestClose={() => this.closeModal("modalOpen_return")}
           contentLabel="show"
           style={modalStyle}
         >
           <div className="modal-container">
             <div className="modal-title">
-              <span>♻️</span>
+              <span>⚠️</span>
-              <span>Return Cable</span>
+              <span>Arm in Motion</span>
             </div>
             <div className="modal-body">
-              <span>Select the tray you would like to return from.</span>
+              <span>Please stay clear of the arm.</span>
             </div>
-            <div className="modal-tray">
+            <div className="modal-closeX" onClick={() => this.cancelAction()}>
-              <div className="modal-return" onClick={() => this.returnCable(0)}>
+              <span>Cancel Action</span>
-                <span>1</span>
-              </div>
-              <div className="modal-return" onClick={() => this.returnCable(1)}>
-                <span>2</span>
-              </div>
-              <div className="modal-return" onClick={() => this.returnCable(2)}>
-                <span>3</span>
-              </div>
-              <div className="modal-return" onClick={() => this.returnCable(3)}>
-                <span>4</span>
-              </div>
-            </div>
-            <div
-              className="modal-close"
-              onClick={() => this.closeModal("modalOpen_return")}
-            >
-              <span>Cancel</span>
             </div>
           </div>
         </Modal>

src/components/SettingsComponent.js

@@ -13,6 +13,11 @@ export default class SettingsComponent extends Component {
     this.props.socket.send('{"type":"restart","call":"request","data":{}}');
   };
 
+  modeMessage = () => {
+    console.log("Sending 'mode' message...");
+    this.props.socket.send('{"type":"mode","call":"request","data":{}}');
+  };
+
   render() {
     return (
       <div className="settings">
@@ -28,6 +33,12 @@ export default class SettingsComponent extends Component {
             >
               <span>🔴 Power Off</span>
             </div>
+            <div
+              className="settings-powerButton"
+              onClick={() => this.modeMessage()}
+            >
+              <span>Send "mode"</span>
+            </div>
             {/* <div
               className="settings-powerButton"
               onClick={() => this.restartPower()}