qr code added

possible fix for arm? :P
2024-08-20 00:18:20 -04:00 · 2024-08-19 12:43:14 -04:00 · 2024-08-19 12:38:10 -04:00 · 2024-08-16 21:45:46 -04:00 · 2024-08-16 20:01:38 -04:00
25 changed files with 561 additions and 183 deletions
--- a/public/index.html
+++ b/public/index.html
@ -5,39 +5,27 @@
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
    <title>Belden Jukebox</title>
  </head>
  <body>
-    <noscript>Belden Jukebox UI</noscript>
+    <noscript>
+      <p>
+        <b>Belden Jukebox Error:</b><br />
+        JavaScript is required to run this application.<br />
+        Please enable JavaScript in your browser.<br /><br />
+
+        <a
+          href="https://www.enable-javascript.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Here are the instructions how to enable JavaScript in your web
+          browser!
+        </a>
+      </p>
+    </noscript>
    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
  </body>
 </html>
--- a/src/assets/images/default_qr.png
+++ b/src/assets/images/default_qr.png
--- a/src/assets/images/pic_cole.jpg
+++ b/src/assets/images/pic_cole.jpg
--- a/src/assets/images/pic_dustin.jpg
+++ b/src/assets/images/pic_dustin.jpg
--- a/src/assets/images/pic_elias.jpg
+++ b/src/assets/images/pic_elias.jpg
--- a/src/assets/images/pic_fannie.jpeg
+++ b/src/assets/images/pic_fannie.jpeg
--- a/src/assets/images/pic_lucas.jpg
+++ b/src/assets/images/pic_lucas.jpg
--- a/src/assets/images/pic_natorion.jpg
+++ b/src/assets/images/pic_natorion.jpg
--- a/src/assets/images/pic_scarlett.jpg
+++ b/src/assets/images/pic_scarlett.jpg
--- a/src/assets/images/qr_cole.png
+++ b/src/assets/images/qr_cole.png
--- a/src/assets/images/qr_dustin.png
+++ b/src/assets/images/qr_dustin.png
--- a/src/assets/images/qr_elias.png
+++ b/src/assets/images/qr_elias.png
--- a/src/assets/images/qr_fannie.png
+++ b/src/assets/images/qr_fannie.png
--- a/src/assets/images/qr_lucas.png
+++ b/src/assets/images/qr_lucas.png
--- a/src/assets/images/qr_natorion.png
+++ b/src/assets/images/qr_natorion.png
--- a/src/assets/images/qr_scarlett.png
+++ b/src/assets/images/qr_scarlett.png
--- a/src/assets/stylesheets/cabledetail.scss
+++ b/src/assets/stylesheets/cabledetail.scss
@ -62,7 +62,7 @@ $white: #fff;
  );
  display: flex;
  align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
  flex-direction: row;
  border-radius: 20px;
  border: 1px solid $gray;
@ -134,7 +134,8 @@ $white: #fff;
  background-color: transparent;
 }

-.cable-main-image {
+.cable-main-image,
+.cable-main-imageqr {
  aspect-ratio: 1/1;
  width: auto;
  height: 100%;
@ -146,6 +147,23 @@ $white: #fff;
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
 }

+.cable-main-imageqr {
+  margin-right: 0;
+  margin-left: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cable-main-imageqr img {
+  width: 80%;
+  height: 80%;
+  object-fit: cover;
+  background-color: white;
+  border: $gray solid 1px;
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
+}
+
 .cable-main-label {
  width: 60%;
  height: 100%;
--- a/src/assets/stylesheets/navbar.scss
+++ b/src/assets/stylesheets/navbar.scss
@ -52,7 +52,7 @@ $white: #fff;
  justify-content: left;
  padding-left: 4px;
  text-align: center;
-  color: $light-blue;
+  color: $medium-blue;
  background-color: transparent;
  margin-left: 2px;
 }
@ -113,7 +113,7 @@ $white: #fff;
  justify-content: center;
  align-items: center;
  margin: 0;
-  background-color: $dark-blue;
+  background-color: $medium-blue;
 }

 .navbar-settings span {
@ -220,8 +220,8 @@ $white: #fff;
 }

 .modal-return {
-  width: 30px;
-  height: 20px;
+  width: auto;
+  height: auto;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
--- a/src/assets/stylesheets/settings.scss
+++ b/src/assets/stylesheets/settings.scss
@ -66,19 +66,19 @@ $white: #fff;
  text-align: left;
 }

-.settings-powerContainer,
+.settings-grid,
 .settings-creditsContainer {
  width: 80%;
-  height: 100px;
+  height: auto;
  background: linear-gradient(
    -30deg,
    rgb(187 208 236) 0%,
    rgb(255 255 255 / 100%) 100%
  );
  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
  border-radius: 20px;
  border: 1px solid $gray;
  margin-bottom: 5px;
@ -89,6 +89,29 @@ $white: #fff;
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
 }

+.settings-gridInner {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 15px 0px 15px 0px;
+  background-color: transparent;
+}
+
+.settings-grid h2 {
+  width: 100%;
+  height: auto;
+  font-size: 24px;
+  font-weight: bold;
+  color: $dark-blue;
+  font-family: "Gotham Medium";
+  text-align: left;
+  padding: 20px 10px 0px 10px;
+  background-color: transparent;
+}
+
 .settings-creditsContainer {
  height: 500px;
  display: flex;
@ -96,10 +119,10 @@ $white: #fff;
  align-items: center;
 }

-.settings-powerButton {
-  width: 200px;
-  height: 50px;
-  border-radius: 20px;
+.settings-button {
+  width: auto;
+  height: 40px;
+  border-radius: 15px;
  background: linear-gradient(
    15deg,
    rgb(223 223 223) 0%,
@ -112,78 +135,182 @@ $white: #fff;
  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
  cursor: pointer;
  text-decoration: none;
-  margin-right: 20px;
-  margin-left: 20px;
+  margin-right: 10px;
+  margin-left: 10px;
 }

-.settings-powerButton span {
+.settings-button span {
  width: auto;
  height: auto;
-  font-size: 20px;
-  margin-top: 2px;
+  font-size: 16px;
  color: $medium-blue;
  font-family: "Gotham Bold";
  background-color: transparent;
+  padding: 10px;
 }

-.settings-credits {
-  width: 95%;
-  height: 430px;
+.settings-form {
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
  background-color: transparent;
+}
+
+// text box
+#sendobject {
+  width: 90%;
+  height: 20px;
+  border-radius: 15px;
+  background-color: $white;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
-  flex-direction: column;
+  transition: all 0.3s ease-in-out;
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  text-decoration: none;
+  margin-right: 10px;
+  margin-left: 10px;
+  padding: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border: 1px solid rgb(199, 199, 199);
+  text-align: left;
 }

-.entry-links,
-.entry-name,
-.entry-position,
-.settings-credits-title {
+#sendobject:focus {
+  outline: none;
+}
+
+#sendobjectButton {
+  width: 10%;
+  height: 40px;
+  border-radius: 15px;
+  background: linear-gradient(
+    15deg,
+    rgb(223 223 223) 0%,
+    rgb(255 255 255) 100%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  cursor: pointer;
+  text-decoration: none;
+  margin-right: 10px;
+  margin-left: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+#creditsgrid {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  //background-color: red;
+}
+
+.entry {
+  width: 48%;
+  height: 150px;
+  border-radius: 15px;
+  background: linear-gradient(
+    15deg,
+    rgb(223 223 223) 0%,
+    rgb(255 255 255) 100%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  text-decoration: none;
+  margin: 10px 10px 10px 10px;
+}
+
+.entry-image {
  width: auto;
  height: auto;
-  text-align: left;
-  font-family: "Gotham Medium";
-  color: $light-blue;
-  font-size: 20px;
+  display: flex;
  background-color: transparent;
-  background: transparent;
-  text-decoration: none;
-  margin-bottom: 7px;
-  margin-right: 30px;
 }

-.settings-credits-title {
+.entry-img,
+.entry-qr {
+  width: 110px;
+  height: 110px;
+  background: linear-gradient(
+    15deg,
+    rgb(223 223 223) 0%,
+    rgb(255 255 255) 100%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 15px;
+  margin: 10px;
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  border: 1px solid $gray;
+}
+
+.entry-qr {
+  margin: 0px;
+  padding: 8px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50px;
+  background: white;
+  position: fixed;
+  bottom: 5px;
+  margin-left: 90px;
+}
+
+.entry-qr img {
+  border-radius: 0px;
+  width: auto;
+  height: auto;
+  background: red;
+}
+
+.entry-title {
+  width: 70%;
+  height: 50%;
+  margin-left: 30px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  background-color: transparent;
+}
+
+.entry-title h2,
+.entry-title h3 {
+  width: auto;
+  height: auto;
  font-size: 24px;
  font-weight: bold;
  color: $dark-blue;
  font-family: "Gotham Medium";
-  margin-bottom: 10px;
-}
-
-.entry {
-  width: 100%;
-  height: auto;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+  text-align: left;
  background-color: transparent;
+  text-align: start;
+  margin: 0px;
+  padding: 0px;
 }

-.entry-name {
-  width: auto;
-  height: auto;
-  color: $medium-blue;
+.entry-title h2 {
+  margin-bottom: 5px;
 }

-.entry-position {
-  width: auto;
-  height: auto;
+.entry-title h3 {
+  font-size: 16px;
+  font-weight: normal;
  color: $light-blue;
 }
-
-.entry-links {
-  width: auto;
-  height: auto;
-  color: $hover-blue;
-}
--- a/src/components/CableDetailComponent.js
+++ b/src/components/CableDetailComponent.js
@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
 import DefaultPartImg from "../assets/images/part.png";
+import DefaultQRImg from "../assets/images/default_qr.png";
 import { NavLink } from "react-router-dom";
 import Modal from "react-modal";
 import "../assets/stylesheets/cabledetail.scss";
@ -26,6 +27,9 @@ class Cable {
    this.short_description = cableData.short_description;
    this.application = cableData.application;
    this.category = cableData.category;
+    this.qrcode = cableData.qrcode
+      ? `http://${hostname}${cableData.qrcode}`
+      : DefaultQRImg;

    if (this.description === undefined) {
      if (this.short_description !== undefined) {
@ -60,6 +64,7 @@ class Cable {
          "application",
          "category",
          "datasheet",
+          "qrcode",
        ].includes(key)
      ) {
        this.dynamicProps[key] = cableData[key];
@ -320,6 +325,19 @@ export default class CableDetailComponent extends Component {
                  {parseInt(cableDetails.position) + 1}
                </div>
              </div>
+
+              {cableDetails.qrcode !== DefaultQRImg ? (
+                <div className="cable-main-imageqr">
+                  <img src={cableDetails.qrcode} alt="" />
+                </div>
+              ) : (
+                <div
+                  className="cable-main-imageqr"
+                  src={cableDetails.qrcode}
+                  alt=""
+                  style={{ visibility: "hidden" }}
+                />
+              )}
            </div>
          ) : (
            <div className="cable-main"></div>
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@ -11,6 +11,7 @@ export default class NavBar extends Component {
    this.state = {
      modalOpen_activeArm: false,
      modalOpacity: 0,
+      mode: "idle",
    };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
@ -46,9 +47,16 @@ export default class NavBar extends Component {
    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");
+        let currentMode = JSON.parse(message.data).mode.toLowerCase();
+        this.setState({ mode: currentMode });
+        console.log("Current Mode: " + currentMode);
+        if (currentMode === "idle") {
+          setTimeout(() => {
+            console.log("State Mode: " + this.state.mode);
+            if (this.state.mode === "idle") {
+              this.closeModal("modalOpen_activeArm");
+            }
+          }, 1500);
        } else {
          this.openModal("modalOpen_activeArm");
        }
--- a/src/components/SettingsComponent.js
+++ b/src/components/SettingsComponent.js
@ -1,24 +1,114 @@
 import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
+import Modal from "react-modal";
 import "../assets/stylesheets/settings.scss";

+Modal.setAppElement("#root");
+
 export default class SettingsComponent extends Component {
-  shutdownPower = () => {
-    console.log("Shutting down...");
-    this.props.socket.send('{"type":"shutdown","call":"request","data":{}}');
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalOpen_quickAction: false,
+      modalOpacity: 0,
+      action: "",
+    };
+    this.openModal = this.openModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+  }
+
+  quickAction = (action, requirePrompt) => {
+    if (requirePrompt) {
+      this.openModal("modalOpen_quickAction", action);
+    } else {
+      this.quickActionPerform(action);
+    }
  };

-  restartPower = () => {
-    console.log("Restarting...");
-    this.props.socket.send('{"type":"restart","call":"request","data":{}}');
+  quickActionPerform = (action) => {
+    switch (action) {
+      case "shutdown":
+        console.log("Shutting down...");
+        this.props.socket.send(
+          '{"type":"shutdown","call":"request","data":{}}'
+        );
+        break;
+      case "restart":
+        console.log("Restarting...");
+        this.props.socket.send('{"type":"restart","call":"request","data":{}}');
+        break;
+      case "home":
+        console.log("Homing...");
+        this.props.socket.send('{"type":"home","call":"request","data":{}}');
+        break;
+      default:
+        console.log("Invalid action");
+        break;
+    }
  };

-  modeMessage = () => {
-    console.log("Sending 'mode' message...");
-    this.props.socket.send('{"type":"mode","call":"request","data":{}}');
+  openModal = (modal, action) => {
+    this.setState({ [modal]: true }, () => {
+      setTimeout(() => this.setState({ modalOpacity: 1 }), 100);
+    });
+    this.setState({ action });
+  };
+
+  closeModal = (modal) => {
+    this.setState({ modalOpacity: 0 }, () => {
+      setTimeout(() => this.setState({ [modal]: false }), 300);
+    });
+  };
+
+  performActionCloseModal = () => {
+    console.log("Performing action: " + this.state.action);
+    this.quickActionPerform(this.state.action);
+    this.closeModal("modalOpen_quickAction");
+  };
+
+  sendObject = () => {
+    const object = document.getElementById("sendobject").value;
+    console.log("Sending object: " + object);
+    this.props.socket.send
+      ? this.props.socket.send(object)
+      : console.log("No socket connection");
  };

  render() {
+    const { modalOpen_quickAction, 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: "auto",
+        height: "auto",
+        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)",
+        minWidth: "30%",
+        minHeight: "30%",
+      },
+      overlay: {
+        opacity: modalOpacity,
+        transition: "opacity 300ms ease-in-out",
+        backgroundColor: "rgba(255, 255, 255, 0.15)",
+        backdropFilter: "blur(5px)",
+      },
+    };
+
    return (
      <div className="settings">
        <div className="settings-image">
@ -26,94 +116,227 @@ export default class SettingsComponent extends Component {
        </div>
        <div className="settings-fieldContainer">
          <h1 className="settings-title">⚙️ Settings</h1>
-          <div className="settings-powerContainer">
-            <div
-              className="settings-powerButton"
-              onClick={() => this.shutdownPower()}
-            >
-              <span>🔴 Power Off</span>
+          <div className="settings-grid">
+            <h2>⚡Quick Actions:</h2>
+            <div className="settings-gridInner">
+              <div
+                className="settings-button"
+                onClick={() => this.quickAction("shutdown", true)}
+              >
+                <span>🔴 Power Off</span>
+              </div>
+              <div
+                className="settings-button"
+                onClick={() => this.quickAction("restart", false)}
+              >
+                <span>🟠 Restart</span>
+              </div>
+              <div
+                className="settings-button"
+                onClick={() => this.quickAction("home", false)}
+              >
+                <span>🏠 Home Arm</span>
+              </div>
            </div>
-            <div
-              className="settings-powerButton"
-              onClick={() => this.modeMessage()}
-            >
-              <span>Send "mode"</span>
-            </div>
-            {/* <div
-              className="settings-powerButton"
-              onClick={() => this.restartPower()}
-            >
-              <span>🟨 Restart</span>
-            </div> */}
          </div>
-          <div className="settings-creditsContainer">
-            <div className="settings-credits">
-              <h2 className="settings-credits-title">Credits:</h2>
-              <div className="entry">
-                <span className="entry-name">Cole Deck,</span>
-                <span className="entry-position">Project Lead,</span>
-                <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"
-                  href="https://linkedin.com/in/NatorionJ"
+          <div className="settings-grid">
+            <h2>💻Send Object:</h2>
+            <div className="settings-gridInner">
+              <form className="settings-form">
+                <input
+                  id="sendobject"
+                  type="text"
+                  name="sendobject"
+                  placeholder={`{"type":"cable_map","call":"request","data":{}}`}
+                />
+                <div
+                  className="settings-button"
+                  id="sendobjectButton"
+                  onClick={() => this.sendObject()}
                >
-                  https://linkedin.com/in/NatorionJ
-                </a>
-              </div>
+                  <span>Send</span>
+                </div>
+              </form>
+            </div>
+          </div>
+          <div className="settings-grid">
+            <h2>⚒️Credits:</h2>
+            <div id="creditsgrid" className="settings-gridInner">
              <div className="entry">
-                <span className="entry-name">Fannie Yu,</span>
-                <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 className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_cole.jpg")}
+                    alt="Cole Deck"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_cole.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Cole Deck</h2>
+                  <h3>Project Lead</h3>
+                </div>
              </div>
+
              <div className="entry">
-                <span className="entry-name">Elias Frey Reschly,</span>
-                <span className="entry-position">
-                  Mechanical Design, Fabrication
-                </span>
-                <div className="entry-links"></div>
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_scarlett.jpg")}
+                    alt="Scarlett Kadan"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_scarlett.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Scarlett Kadan</h2>
+                  <h3>Lead Front-End Dev, UI/UX Designer</h3>
+                </div>
              </div>
+
              <div className="entry">
-                <span className="entry-name">Scarlett Kadan,</span>
-                <span className="entry-position">
-                  Front-End Dev, UI/UX Designer,
-                </span>
-                <a className="entry-links" href="https://kadan.live">
-                  https://kadan.live
-                </a>
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_natorion.jpg")}
+                    alt="Natorion Johnson"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_natorion.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Natorion Johnson</h2>
+                  <h3>Lead PCB assembler</h3>
+                </div>
              </div>
+
              <div className="entry">
-                <span className="entry-name">Lucas Ferguson,</span>
-                <span className="entry-position">Front-End Dev,</span>
-                <a
-                  className="entry-links"
-                  href="https://lucasferguson.webflow.io"
-                >
-                  https://lucasferguson.webflow.io
-                </a>
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_fannie.jpeg")}
+                    alt="Fannie Yu"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_fannie.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Fannie Yu</h2>
+                  <h3>CAD Design, Fabrication Planner</h3>
+                </div>
              </div>
+
              <div className="entry">
-                <span className="entry-name">Dustin Thomas,</span>
-                <span className="entry-position">Back-End Dev,</span>
-                <a className="entry-links" href="https://cptlobster.dev">
-                  https://cptlobster.dev
-                </a>
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_elias.jpg")}
+                    alt="Elias Reschly"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_elias.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Elias Reschly</h2>
+                  <h3>Mechanical Design, Fabrication</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_lucas.jpg")}
+                    alt="Lucas Ferguson"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_lucas.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Lucas Ferguson</h2>
+                  <h3>Front-End Dev</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_dustin.jpg")}
+                    alt=""
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_dustin.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Dustin Thomas</h2>
+                  <h3>Back-End Dev</h3>
+                </div>
              </div>
            </div>
          </div>
        </div>
+
+        <Modal
+          isOpen={modalOpen_quickAction}
+          contentLabel="show"
+          onRequestClose={() => this.closeModal("modalOpen_quickAction")}
+          style={modalStyle}
+        >
+          <div className="modal-container">
+            <div className="modal-title">
+              <span>⚠️</span>
+              <span>Warning</span>
+            </div>
+            <div className="modal-body">
+              <span>Are you sure you want to perform this quick action?</span>
+            </div>
+            <div className="modal-tray">
+              <div
+                className="modal-return"
+                onClick={() =>
+                  this.performActionCloseModal("modalOpen_quickAction")
+                }
+              >
+                <span>Continue</span>
+              </div>
+              <div
+                className="modal-return"
+                onClick={() => this.closeModal("modalOpen_quickAction")}
+              >
+                <span>Cancel</span>
+              </div>
+            </div>
+          </div>
+        </Modal>
      </div>
    );
  }
--- a/src/components/StatisticsComponent.js
+++ b/src/components/StatisticsComponent.js
@ -14,7 +14,7 @@ export default class StatisticsComponent extends Component {
          <div className="statistics-grid">
            <div className="statistics-grid-container">
              <iframe
-                src="http://172.31.108.29:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8"
+                src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8"
                title="Belden"
                className="statistics-iframe"
              />
--- a/src/routes/StatisticsRoute.js
+++ b/src/routes/StatisticsRoute.js
@ -2,10 +2,6 @@ import React, { Component } from "react";
 import NavBar from "../components/NavBar";
 import StatisticsComponent from "../components/StatisticsComponent";
 import "../assets/stylesheets/app.scss";
-import {
-  Provider,
-  KeepAlive,
-} from 'react-keep-alive';

 export default class StatisticsRoute extends Component {
  constructor(props) {
@ -17,11 +13,7 @@ export default class StatisticsRoute extends Component {
    return (
      <div className="container">
        <NavBar socket={this.props.socket} />
-        <Provider>
-          <KeepAlive name="Grafana">
-            <StatisticsComponent socketHandler={this.props.socket} />
-          </KeepAlive>
-        </Provider>
+        <StatisticsComponent socket={this.props.socket} />
      </div>
    );
  }
--- a/src/utils/Cable.js
+++ b/src/utils/Cable.js
@ -1,9 +1,10 @@
 import React from "react";
 import DefaultPartImg from "../assets/images/part.png";
+import DefaultQRImg from "../assets/images/default_qr.png";
 import { NavLink } from "react-router-dom";
 import "../assets/stylesheets/browse.scss";

-const hostname = window.location.hostname;  // Get the hostname from the URL bar
+const hostname = window.location.hostname; // Get the hostname from the URL bar

 export default class cable {
  constructor(
@ -15,7 +16,8 @@ export default class cable {
    short_description,
    image,
    category,
-    application
+    application,
+    qrcode
  ) {
    this.part_number = part_number;
    this.position = position;
@ -28,6 +30,8 @@ export default class cable {
    this.short_description = short_description;
    this.description = description;

+    this.qrcode = qrcode ? `http://${hostname}${qrcode}` : DefaultQRImg;
+
    if (short_description === undefined) {
      if (this.description !== undefined) {
        this.short_description = this.description;
Author	SHA1	Message	Date
Scarlett	03ed1f22e8	qr code added	2024-08-20 00:18:20 -04:00
Scarlett	b0c6bf37b8	possible fix for arm? :P	2024-08-19 12:43:14 -04:00
Scarlett	52199477d5	possible fix for arm? :P	2024-08-19 12:38:10 -04:00
Scarlett	2798c9d759	Settings page revamp	2024-08-16 21:45:46 -04:00
Scar 3	d27071dbd3	Co-authored-by: Lucas Ferguson <LucasFerguson@users.noreply.github.com> Co-authored-by: Dustin Thomas <stdio@cptlobster.dev>	2024-08-16 20:01:38 -04:00