Arm in motion modal

2024-08-16 18:21:34 -04:00 · 2024-08-16 18:21:34 -04:00 · 9dcebb9d88
commit 9dcebb9d88
parent 08eebd400b
6 changed files with 108 additions and 121 deletions
--- a/src/assets/stylesheets/navbar.scss
+++ b/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;
--- a/src/components/BrowseComponent.js
+++ b/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) {
-      console.error("Error parsing message from server:", error);
-    }
+    } catch (error) {}
  };

  browseParse(message) {
--- a/src/components/CableDetailComponent.js
+++ b/src/components/CableDetailComponent.js
@ -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") {
-      this.props.socket.send(
-        `{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`
-      );
-    } else if (modal === "modalOpen_show") {
+    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) {
-      console.error("Error parsing message from server:", error);
-    }
+    } catch (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 {
-      modalOpen_dispense,
-      modalOpen_show,
-      modalOpen_datasheet,
-      modalOpacity,
-      cableDetails,
-    } = this.state;
+    const { 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 ? (
--- a/src/components/MapComponent.js
+++ b/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) {
-      console.error("Error parsing message from server:", error);
-    }
+    } catch (error) {}
  };

  updateSelection() {
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@ -9,8 +9,7 @@ export default class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      clicks: 0,
-      modalOpen_return: false,
+      modalOpen_activeArm: false,
      modalOpacity: 0,
    };
    this.openModal = this.openModal.bind(this);
@ -28,37 +27,36 @@ 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) {
-      clearTimeout(this.state.timer);
+    this.props.socket.removeEventListener("message", this.handleMessage);
+  }
+
+  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 }, () => {
@ -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
-          className="navbar-return"
-          onClick={() => this.openModal("modalOpen_return")}
-        >
+        <div className="navbar-return" onClick={() => this.returnCable()}>
          <span id="browse-s">Return Cable</span>
        </div>
+
        <Modal
-          isOpen={modalOpen_return}
-          onRequestClose={() => this.closeModal("modalOpen_return")}
+          isOpen={modalOpen_activeArm}
          contentLabel="show"
          style={modalStyle}
        >
          <div className="modal-container">
            <div className="modal-title">
-              <span>♻️</span>
-              <span>Return Cable</span>
+              <span>⚠️</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-return" onClick={() => this.returnCable(0)}>
-                <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 className="modal-closeX" onClick={() => this.cancelAction()}>
+              <span>Cancel Action</span>
            </div>
          </div>
        </Modal>
--- a/src/components/SettingsComponent.js
+++ b/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()}