From 0642af3c4df480683ca6ec2b5ae9618e9fbc3d2b Mon Sep 17 00:00:00 2001 From: Scarlett Date: Thu, 9 May 2024 23:40:11 -0400 Subject: [PATCH] browse page is functional now --- package-lock.json | 37 ++++ package.json | 1 + src/assets/stylesheets/browse.scss | 3 +- src/assets/stylesheets/cabledetail.scss | 68 +++++++- src/components/BrowseComponent.js | 45 ++++- src/components/CableDetailComponent.js | 215 +++++++++++++++++++++--- 6 files changed, 333 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8eebae2..76dd01f 100644 --- 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", diff --git a/package.json b/package.json index be95a08..37fd36c 100644 --- 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", diff --git a/src/assets/stylesheets/browse.scss b/src/assets/stylesheets/browse.scss index a9490a9..af86718 100644 --- 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; diff --git a/src/assets/stylesheets/cabledetail.scss b/src/assets/stylesheets/cabledetail.scss index 97c50b2..8caf110 100644 --- 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; +} \ No newline at end of file diff --git a/src/components/BrowseComponent.js b/src/components/BrowseComponent.js index 49d6a8f..a84aecd 100644 --- 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 { {this.short_description} + {this.category ? ( +
+ + Category:{" "} + + {this.category} +
+ ) : null}
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 ) ); } diff --git a/src/components/CableDetailComponent.js b/src/components/CableDetailComponent.js index dd24879..c18932c 100644 --- 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
Error loading data...
; } - 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 ( - {keys.map((key, index) => ( + {validKeys.map((key, index) => ( {data[key][rowIndex] || ""} @@ -136,7 +190,7 @@ export default class CableDetailComponent extends Component { - {keys.map((key, index) => ( + {validKeys.map((key, index) => ( @@ -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 (
@@ -199,6 +288,18 @@ export default class CableDetailComponent extends Component {
{cableDetails.description}
+ + {cableDetails.category ? ( +
+ + Category:{" "} + + {cableDetails.category} +
+ ) : null} +
)}
-
+
this.openModal("modalOpen_datasheet")} + > ➤ Datasheet ✏️
-
+ this.closeModal("modalOpen_datasheet")} + contentLabel="show" + style={modalStyle} + > +
+
+ ✏️ + Datasheet +
+
+ Datasheet coming soon... +
+
this.closeModal("modalOpen_datasheet")} + > + Close +
+
+ +
this.openModal("modalOpen_show")} + > ➤ Show 💡
-
+ this.closeModal("modalOpen_show")} + contentLabel="show" + style={modalStyle} + > +
+
+ 💡 + Showing Item +
+
+ The item will now be illuminated. +
+
this.closeModal("modalOpen_show")} + > + Close +
+
+ +
this.openModal("modalOpen_dispense")} + > ➤ Dispense - 🤲 + 🤖
+ this.closeModal("modalOpen_dispense")} + contentLabel="Dispense" + style={modalStyle} + > +
+
+ 🤖 + Dispensing Item +
+
+ Please wait for your item to be dispensed. +
+
this.closeModal("modalOpen_dispense")} + > + Close +
+
+
{cableDetails ? (
- {/* {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(
{key}