v1

2024-05-14 17:50:06 -04:00
parent 9a8efb5418
commit 2e57253ac0
13 changed files with 208 additions and 58 deletions
--- a/src/components/CableDetailComponent.js
+++ b/src/components/CableDetailComponent.js
@@ -57,7 +57,7 @@ class Cable {
          "description",
          "application",
          "category",
-          "datasheet"
+          "datasheet",
        ].includes(key)
      ) {
        this.dynamicProps[key] = cableData[key];
@@ -119,9 +119,13 @@ export default class CableDetailComponent extends Component {
    });

    if (modal === "modalOpen_dispense") {
-      this.props.socket.send(`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`);
+      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}}}`);
+      this.props.socket.send(
+        `{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`
+      );
    }
  };

--- a/src/components/MapComponent.js
+++ b/src/components/MapComponent.js
@@ -3,7 +3,7 @@ import BeldenLogo from "../assets/images/belden-white.png";
 import cable from "../utils/Cable";
 import "../assets/stylesheets/map.scss";
 import { NavLink } from "react-router-dom";
-import "animate.css"
+import "animate.css";

 export default class MapComponent extends Component {
  constructor(props) {
@@ -258,7 +258,10 @@ export default class MapComponent extends Component {
                  {parseInt(cable.position) + 1}
                </div>
              </div>
-              <NavLink to={"/map/cable/" + cable.position} className="map-cable-moreinfo">
+              <NavLink
+                to={"/map/cable/" + cable.position}
+                className="map-cable-moreinfo"
+              >
                <span>More Info</span>
              </NavLink>
            </div>
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -1,14 +1,20 @@
 import React, { Component } from "react";
 import { NavLink } from "react-router-dom";
+import Modal from "react-modal";
 import "../assets/stylesheets/navbar.scss";

+Modal.setAppElement("#root");
+
 export default class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
-      timer: null,
+      modalOpen_return: false,
+      modalOpacity: 0,
    };
+    this.openModal = this.openModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
  }

  componentDidMount() {
@@ -41,8 +47,7 @@ export default class NavBar extends Component {
    this.setState({ clicks: clicks + 1 });

    if (clicks + 1 === 3) {
-      
-      window.location.replace("/settings")
+      window.location.replace("/settings");

      clearTimeout(timer);
      this.setState({ clicks: 0, timer: null });
@@ -55,7 +60,59 @@ export default class NavBar extends Component {
    }
  }

+  openModal = (modal) => {
+    this.setState({ [modal]: true }, () => {
+      setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
+    });
+  };
+
+  closeModal = (modal) => {
+    this.setState({ modalOpacity: 0 }, () => {
+      setTimeout(() => this.setState({ [modal]: false }), 300);
+    });
+  };
+
+  returnCable = (tray) => {
+    this.props.socket.send(
+      `{"type": "cable_get","call": "send","data": {"tray": ${tray}}}`
+    );
+    console.log("Cable returned from tray " + tray);
+    this.closeModal("modalOpen_return");
+  };
+
  render() {
+    const { modalOpen_return, modalOpacity } = this.state;
+
+    const modalStyle = {
+      content: {
+        opacity: modalOpacity,
+        transition: "opacity 300ms ease-in-out",
+        top: "50%",
+        left: "50%",
+        right: "auto",
+        bottom: "auto",
+        marginRight: "-50%",
+        width: "30%",
+        height: "30%",
+        transform: "translate(-50%, -50%)",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "20px",
+        background:
+          "linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
+        boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
+      },
+      overlay: {
+        opacity: modalOpacity,
+        transition: "opacity 300ms ease-in-out",
+        backgroundColor: "rgba(255, 255, 255, 0.15)",
+        backdropFilter: "blur(5px)",
+      },
+    };
+
    return (
      <div className="navbar">
        <div className="navbar-top">
@@ -80,6 +137,48 @@ export default class NavBar extends Component {
            </NavLink>
          </ol>
        </div>
+        <div
+          className="navbar-return"
+          onClick={() => this.openModal("modalOpen_return")}
+        >
+          <span id="browse-s">Return Cable</span>
+        </div>
+        <Modal
+          isOpen={modalOpen_return}
+          onRequestClose={() => this.closeModal("modalOpen_return")}
+          contentLabel="show"
+          style={modalStyle}
+        >
+          <div className="modal-container">
+            <div className="modal-title">
+              <span>♻️</span>
+              <span>Return Cable</span>
+            </div>
+            <div className="modal-body">
+              <span>Select the tray you would like to return from.</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>
+          </div>
+        </Modal>
      </div>
    );
  }
--- a/src/components/SettingsComponent.js
+++ b/src/components/SettingsComponent.js
@@ -41,37 +41,64 @@ export default class SettingsComponent extends Component {
              <div className="entry">
                <span className="entry-name">Cole Deck,</span>
                <span className="entry-position">Project Lead,</span>
-                <a className="entry-links">https://deck.sh</a>
+                <a className="entry-links" href="https://deck.sh">
+                  https://deck.sh
+                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Natorion Johnson,</span>
                <span className="entry-position">Lead PCB assembler,</span>
-                <a className="entry-links">https://linkedin.com/in/NatorionJ</a>
+                <a
+                  className="entry-links"
+                  href="https://linkedin.com/in/NatorionJ"
+                >
+                  https://linkedin.com/in/NatorionJ
+                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Fannie,</span>
-                <span className="entry-position">CAD Design, Fabrication Planner</span>
-                <a className="entry-links">https://linkedin.com/in/fannieyu</a>
+                <span className="entry-position">
+                  CAD Design, Fabrication Planner
+                </span>
+                <a
+                  className="entry-links"
+                  href="https://linkedin.com/in/fannieyu"
+                >
+                  https://linkedin.com/in/fannieyu
+                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Elias Frey Reschly,</span>
-                <span className="entry-position">Mechanical Design, Fabrication</span>
-                <a className="entry-links"></a>
+                <span className="entry-position">
+                  Mechanical Design, Fabrication
+                </span>
+                <div className="entry-links"></div>
              </div>
              <div className="entry">
                <span className="entry-name">Scarlett Deck,</span>
-                <span className="entry-position">Front-End Dev, UI/UX Designer,</span>
-                <a className="entry-links">https://kadan.live</a>
+                <span className="entry-position">
+                  Front-End Dev, UI/UX Designer,
+                </span>
+                <a className="entry-links" href="https://kadan.live">
+                  https://kadan.live
+                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Lucas Ferguson,</span>
                <span className="entry-position">Front-End Dev,</span>
-                <a className="entry-links">https://lucasferguson.webflow.io</a>
+                <a
+                  className="entry-links"
+                  href="https://lucasferguson.webflow.io"
+                >
+                  https://lucasferguson.webflow.io
+                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Dustin Thomas,</span>
                <span className="entry-position">Back-End Dev,</span>
-                <a className="entry-links">https://cptlobster.dev</a>
+                <a className="entry-links" href="https://cptlobster.dev">
+                  https://cptlobster.dev
+                </a>
              </div>
            </div>
          </div>
--- a/src/components/StatisticsComponent.js
+++ b/src/components/StatisticsComponent.js
@@ -13,26 +13,50 @@ export default class StatisticsComponent extends Component {
          <h1 className="statistics-title">📊 Statistics</h1>
          <div className="statistics-grid">
            <div className="statistics-grid-container">
-              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8" title="Belden" className="statistics-iframe" />
+              <iframe
+                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8"
+                title="Belden"
+                className="statistics-iframe"
+              />
            </div>
            <div className="statistics-grid-container">
-              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3" title="Belden" className="statistics-iframe" />
+              <iframe
+                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3"
+                title="Belden"
+                className="statistics-iframe"
+              />
            </div>
            <div className="statistics-grid-container">
-              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" title="Belden" className="statistics-iframe" />
+              <iframe
+                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
+                title="Belden"
+                className="statistics-iframe"
+              />
            </div>
            <div className="statistics-grid-container">
-              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6" title="Belden" className="statistics-iframe" />
+              <iframe
+                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6"
+                title="Belden"
+                className="statistics-iframe"
+              />
            </div>
            <div className="statistics-grid-container">
-              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4" title="Belden" className="statistics-iframe" />
+              <iframe
+                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4"
+                title="Belden"
+                className="statistics-iframe"
+              />
            </div>
            <div className="statistics-grid-container">
-              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2" title="Belden" className="statistics-iframe" />
+              <iframe
+                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2"
+                title="Belden"
+                className="statistics-iframe"
+              />
            </div>
          </div>
        </div>
      </div>
    );
  }
-}
+}
--- a/src/index.js
+++ b/src/index.js
@@ -19,7 +19,6 @@ socket.addEventListener("open", function (event) {
  init();
 });

-
 // Initialize the app
 const init = () => {
  const router = createBrowserRouter([
@@ -65,4 +64,4 @@ const init = () => {
      <RouterProvider router={router} />
    </div>
  );
-};
+};
--- a/src/routes/BrowseRoute.js
+++ b/src/routes/BrowseRoute.js
@@ -12,7 +12,7 @@ export default class BrowseRoute extends Component {
  render() {
    return (
      <div className="container">
-        <NavBar />
+        <NavBar socket={this.props.socket} />
        <BrowseComponent socket={this.props.socket} />
      </div>
    );
--- a/src/routes/CableDetailRoute.js
+++ b/src/routes/CableDetailRoute.js
@@ -12,7 +12,7 @@ export default class CableDetailRoute extends Component {
  render() {
    return (
      <div className="container">
-        <NavBar />
+        <NavBar socket={this.props.socket} />
        <CableDetailComponent socket={this.props.socket} />
      </div>
    );
--- a/src/routes/MapRoute.js
+++ b/src/routes/MapRoute.js
@@ -12,7 +12,7 @@ export default class MapRoute extends Component {
  render() {
    return (
      <div className="container">
-        <NavBar />
+        <NavBar socket={this.props.socket} />
        <MapComponent socket={this.props.socket} />
      </div>
    );
--- a/src/routes/SettingsRoute.js
+++ b/src/routes/SettingsRoute.js
@@ -12,7 +12,7 @@ export default class SettingsRoute extends Component {
  render() {
    return (
      <div className="container">
-        <NavBar />
+        <NavBar socket={this.props.socket} />
        <SettingsComponent socket={this.props.socket} />
      </div>
    );
--- a/src/routes/StatisticsRoute.js
+++ b/src/routes/StatisticsRoute.js
@@ -12,7 +12,7 @@ export default class StatisticsRoute extends Component {
  render() {
    return (
      <div className="container">
-        <NavBar />
+        <NavBar socket={this.props.socket} />
        <StatisticsComponent socketHandler={this.props.socket} />
      </div>
    );