Merge branch 'main' of https://git.myitr.org/Jukebox/jukebox-web

browse page is functional now
2024-05-09 23:40:22 -04:00 · 2024-05-09 23:40:11 -04:00
6 changed files with 333 additions and 36 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/assets/stylesheets/browse.scss
+++ b/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;
--- a/src/assets/stylesheets/cabledetail.scss
+++ b/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;
+}
--- a/src/components/BrowseComponent.js
+++ b/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.short_description = this.short_description.charAt(0).toUpperCase() + this.short_description.slice(1);
+    this.category = category;
+    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
        )
      );
    }
--- a/src/components/CableDetailComponent.js
+++ b/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 maxRows = Math.max(...keys.map((key) => data[key].length));
+    const validKeys = Object.keys(data).filter((key) =>
+      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">
-              <span>➤ Dispense</span>
-              <span>🤲</span>
+            <Modal
+              isOpen={modalOpen_show}
+              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(
Author	SHA1	Message	Date
Scarlett	bc4d6a6ced	Merge branch 'main' of https://git.myitr.org/Jukebox/jukebox-web	2024-05-09 23:40:22 -04:00
Scarlett	0642af3c4d	browse page is functional now	2024-05-09 23:40:11 -04:00