browse page is functional now

package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-modal": "^3.16.1",
         "react-router-dom": "^6.22.3",
         "react-scripts": "^5.0.1",
         "sass": "^1.70.0",
@@ -8026,6 +8027,11 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -14699,6 +14705,29 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -17467,6 +17496,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.22.3",
     "react-scripts": "^5.0.1",
     "sass": "^1.70.0",

src/assets/stylesheets/browse.scss

@@ -126,7 +126,8 @@ $white: #fff;
 
 .browse-cable-brand,
 .browse-cable-short,
-.browse-cable-position {
+.browse-cable-position,
+.browse-cable-category {
   background-color: transparent;
   font-size: 16px;
   color: $light-blue;

src/assets/stylesheets/cabledetail.scss

@@ -182,7 +182,8 @@ $white: #fff;
 
 .cable-main-brand,
 .cable-main-short,
-.cable-main-position {
+.cable-main-position,
+.cable-main-category {
   background-color: transparent;
   font-size: 16px;
   color: $light-blue;
@@ -287,3 +288,68 @@ th:first-child {
   margin-top: 15px;
   padding-left: 10px;
 }
+
+.modal-container {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.modal-title,
+.modal-body,
+.modal-close {
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  flex-direction: column;
+}
+
+.modal-title span {
+  width: auto;
+  height: auto;
+  font-family: "Gotham Bold";
+  font-size: 32px;
+  color: $dark-blue;
+  background-color: transparent;
+  margin-bottom: 5px;
+}
+
+.modal-body span {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  font-family: "Gotham Medium";
+  font-size: 18px;
+  color: $medium-blue;
+  margin-top: 10px;
+  margin-bottom: 30px;
+}
+
+.modal-close span {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  font-family: "Gotham Medium";
+  font-size: 18px;
+  color: $dark-blue;
+}
+
+.modal-close {
+  cursor: pointer;
+  padding: 15px 35px 15px 35px;
+  border-radius: 20px;
+  background-color: $gray;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  transition: all 0.3s ease-in-out;
+}
+
+.modal-close:hover {
+  background-color: $hover-blue;
+}

src/components/BrowseComponent.js

@@ -12,20 +12,37 @@ class cable {
     brand,
     description,
     short_description,
-    image
+    image,
+    category,
+    application
   ) {
     this.part_number = part_number;
     this.position = position;
     this.name = name;
     this.brand = brand;
-    this.description = description;
-    this.short_description = short_description
-      ? short_description
-      : description;
     this.image = image ? `http://localhost${image}` : DefaultPartImg;
 
-    if (this.short_description != undefined) {
+    this.category = category;
-      this.short_description = this.short_description.charAt(0).toUpperCase() + this.short_description.slice(1);
+    this.application = application;
+    this.short_description = short_description;
+    this.description = description;
+
+    if (short_description === undefined) {
+      if (this.description !== undefined) {
+        this.short_description = this.description;
+      } else if (this.application !== undefined) {
+        this.short_description = this.application;
+      } else if (this.category !== undefined) {
+        this.short_description = this.category;
+      } else {
+        this.short_description = "";
+      }
+    }
+
+    if (this.short_description !== undefined) {
+      this.short_description =
+        this.short_description.charAt(0).toUpperCase() +
+        this.short_description.slice(1);
       if (this.short_description.length > 100) {
         this.short_description =
           this.short_description.substring(0, 80) + "...";
@@ -43,6 +60,14 @@ class cable {
             <span style={{ color: "#007cbe" }}></span>
             {this.short_description}
           </div>
+          {this.category ? (
+            <div className="browse-cable-category">
+              <span style={{ color: "black", backgroundColor: "transparent" }}>
+                Category:{" "}
+              </span>
+              {this.category}
+            </div>
+          ) : null}
           <div className="browse-cable-brand">
             <span style={{ color: "black", backgroundColor: "transparent" }}>
               Brand:{" "}
@@ -97,6 +122,8 @@ export default class BrowseComponent extends Component {
       let brand = map[i].brand;
       let description = map[i].description;
       let short_description = map[i].short_description;
+      let category = map[i].category;
+      let application = map[i].application;
       cableList.push(
         new cable(
           part_number,
@@ -105,7 +132,9 @@ export default class BrowseComponent extends Component {
           brand,
           description,
           short_description,
-          image
+          image,
+          category,
+          application
         )
       );
     }

src/components/CableDetailComponent.js

@@ -2,17 +2,17 @@ import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
 import DefaultPartImg from "../assets/images/part.png";
 import { NavLink } from "react-router-dom";
+import Modal from "react-modal";
 import "../assets/stylesheets/cabledetail.scss";
 
+Modal.setAppElement("#root");
+
 class Cable {
   constructor(cableData) {
     this.partnum = cableData.partnum;
     this.id = cableData.id;
     this.brand = cableData.brand;
     this.position = cableData.position;
-    this.description = cableData.description
-      ? cableData.image
-      : "No description available.";
     this.image = cableData.image
       ? `http://localhost${cableData.image}`
       : DefaultPartImg;
@@ -20,6 +20,30 @@ class Cable {
     this.horizontal = [];
     this.vertical = [];
     this.orderedKeys = [];
+    this.description = cableData.description;
+    this.short_description = cableData.short_description;
+    this.application = cableData.application;
+    this.category = cableData.category;
+
+    if (this.description === undefined) {
+      if (this.short_description !== undefined) {
+        this.description = this.short_description;
+      } else if (this.application !== undefined) {
+        this.description = this.application;
+      } else if (this.category !== undefined) {
+        this.description = this.category;
+      } else {
+        this.description = "";
+      }
+    }
+
+    if (this.description !== undefined) {
+      this.description =
+        this.description.charAt(0).toUpperCase() + this.description.slice(1);
+      if (this.description.length > 200) {
+        this.description = this.description.substring(0, 200) + "...";
+      }
+    }
 
     Object.keys(cableData).forEach((key) => {
       if (
@@ -79,9 +103,37 @@ export default class CableDetailComponent extends Component {
     super(props);
     this.state = {
       cableDetails: null,
+      modalOpen_dispense: false,
+      modalOpen_show: false,
+      modalOpen_datasheet: false,
+      modalOpacity: 0,
     };
+    this.openModal = this.openModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
   }
 
+  openModal = (modal) => {
+    this.setState({ [modal]: true }, () => {
+      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") {
+      this.props.socket.send(
+        `{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`
+      );
+    }
+  };
+
+  closeModal = (modal) => {
+    this.setState({ modalOpacity: 0 }, () => {
+      setTimeout(() => this.setState({ [modal]: false }), 300);
+    });
+  };
+
   componentDidMount() {
     const cablePos = window.location.href.split("/").pop();
     this.props.socket.send(
@@ -114,14 +166,16 @@ export default class CableDetailComponent extends Component {
       return <div>Error loading data...</div>;
     }
 
-    const keys = Object.keys(data);
+    const validKeys = Object.keys(data).filter((key) =>
-    const maxRows = Math.max(...keys.map((key) => data[key].length));
+      Array.isArray(data[key])
+    );
+
+    const maxRows = Math.max(...validKeys.map((key) => data[key].length));
 
     const rows = Array.from({ length: maxRows }).map((_, rowIndex) => {
-
       return (
         <tr className="row" key={rowIndex}>
-          {keys.map((key, index) => (
+          {validKeys.map((key, index) => (
             <td className="body" key={index}>
               {data[key][rowIndex] || ""}
             </td>
@@ -136,7 +190,7 @@ export default class CableDetailComponent extends Component {
         <table>
           <thead className="thead">
             <tr className="row">
-              {keys.map((key, index) => (
+              {validKeys.map((key, index) => (
                 <th className="head" key={index}>
                   {key}
                 </th>
@@ -174,7 +228,42 @@ export default class CableDetailComponent extends Component {
   }
 
   render() {
-    const { cableDetails } = this.state;
+    const {
+      modalOpen_dispense,
+      modalOpen_show,
+      modalOpen_datasheet,
+      modalOpacity,
+      cableDetails,
+    } = 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="cable">
@@ -199,6 +288,18 @@ export default class CableDetailComponent extends Component {
                 <div className="cable-main-description">
                   {cableDetails.description}
                 </div>
+
+                {cableDetails.category ? (
+                  <div className="cable-main-category">
+                    <span
+                      style={{ color: "black", backgroundColor: "transparent" }}
+                    >
+                      Category:{" "}
+                    </span>
+                    {cableDetails.category}
+                  </div>
+                ) : null}
+
                 <div className="cable-main-brand">
                   <span
                     style={{ color: "black", backgroundColor: "transparent" }}
@@ -221,35 +322,97 @@ export default class CableDetailComponent extends Component {
             <div className="cable-main"></div>
           )}
           <div className="cable-actions">
-            <div className="cable-actions-button">
+            <div
+              className="cable-actions-button"
+              onClick={() => this.openModal("modalOpen_datasheet")}
+            >
               <span>➤ Datasheet</span>
               <span>✏️</span>
             </div>
-            <div className="cable-actions-button">
+            <Modal
+              isOpen={modalOpen_datasheet}
+              onRequestClose={() => this.closeModal("modalOpen_datasheet")}
+              contentLabel="show"
+              style={modalStyle}
+            >
+              <div className="modal-container">
+                <div className="modal-title">
+                  <span>✏️</span>
+                  <span>Datasheet</span>
+                </div>
+                <div className="modal-body">
+                  <span>Datasheet coming soon...</span>
+                </div>
+                <div
+                  className="modal-close"
+                  onClick={() => this.closeModal("modalOpen_datasheet")}
+                >
+                  <span>Close</span>
+                </div>
+              </div>
+            </Modal>
+            <div
+              className="cable-actions-button"
+              onClick={() => this.openModal("modalOpen_show")}
+            >
               <span>➤ Show</span>
               <span>💡</span>
             </div>
-            <div className="cable-actions-button">
+            <Modal
-              <span>➤ Dispense</span>
+              isOpen={modalOpen_show}
-              <span>🤲</span>
+              onRequestClose={() => this.closeModal("modalOpen_show")}
+              contentLabel="show"
+              style={modalStyle}
+            >
+              <div className="modal-container">
+                <div className="modal-title">
+                  <span>💡</span>
+                  <span>Showing Item</span>
                 </div>
+                <div className="modal-body">
+                  <span>The item will now be illuminated.</span>
+                </div>
+                <div
+                  className="modal-close"
+                  onClick={() => this.closeModal("modalOpen_show")}
+                >
+                  <span>Close</span>
+                </div>
+              </div>
+            </Modal>
+            <div
+              className="cable-actions-button"
+              onClick={() => this.openModal("modalOpen_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 ? (
             <div className="cable-tables">
-              {/* {Object.entries(cableDetails.dynamicProps).map(
-                ([key, value], index) => {
-                  if (cableDetails.horizontal.includes(key)) {
-                    return this.renderHorizontalTable(
-                      key,
-                      JSON.stringify(value)
-                    );
-                  } else {
-                    return this.renderVerticalTable(key, JSON.stringify(value));
-                  }
-                }
-              )} */}
-
               {cableDetails.orderedKeys.map((key, index) => {
                 if (cableDetails.horizontal.includes(key)) {
                   return this.renderHorizontalTable(