Jukebox/jukebox-web
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

browse page is functional now

Browse Source
This commit is contained in:
scarlett kadan 2024-05-09 23:40:11 -04:00
parent a883b0b206
commit 0642af3c4d
6 changed files with 333 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

3
src/assets/stylesheets/browse.scss
View File

@ -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;

68
src/assets/stylesheets/cabledetail.scss
View File

@ -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;
}

45
src/components/BrowseComponent.js
View File

@ -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
)
);
}

215
src/components/CableDetailComponent.js
View File

@ -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">
<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>
<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(