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
Download Patch File Download Diff File Expand all files Collapse all files

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(