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

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

Browse Source
This commit is contained in:
Lucas
2024-05-09 22:40:15 -05:00
parent 132afabf73 a883b0b206
commit 51f50d59fe
4 changed files with 263 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/BrowseComponent.js
View File

@ -20,11 +20,17 @@ class cable {
this.brand = brand;
this.description = description;
this.short_description = short_description
? short_description
: description;
this.image = image
? `http://localhost${image}`
: DefaultPartImg;
? 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);
if (this.short_description.length > 100) {
this.short_description =
this.short_description.substring(0, 80) + "...";
}
}
}
returnDiv() {
@ -125,4 +131,3 @@ export default class BrowseComponent extends Component {
);
}
}

162
src/components/CableDetailComponent.js
View File

@ -17,12 +17,60 @@ class Cable {
? `http://localhost${cableData.image}`
: DefaultPartImg;
this.dynamicProps = {};
this.horizontal = [];
this.vertical = [];
this.orderedKeys = [];
Object.keys(cableData).forEach((key) => {
if (!["partnum", "id", "brand", "position", "image"].includes(key)) {
if (
![
"partnum",
"id",
"brand",
"position",
"image",
"short_description",
"description",
"application",
"category",
].includes(key)
) {
this.dynamicProps[key] = cableData[key];
}
});
for (let key in this.dynamicProps) {
let data = this.dynamicProps[key];
let first = Object.keys(data)[0];
if (typeof data[first] === "object") {
this.horizontal.push(key);
} else {
this.vertical.push(key);
}
}
this.orderedKeys = this.orderedKeys.concat(this.vertical);
this.orderedKeys = this.orderedKeys.concat(this.horizontal);
for (let i = 0; i < this.orderedKeys.length; i++) {
let key = this.orderedKeys[i];
if (!isNaN(key)) {
this.orderedKeys.splice(i, 1);
i--;
}
try {
let data = this.dynamicProps[key];
let first = Object.keys(data)[0];
if (data[first] !== undefined) {
if (typeof data[first] === "string") {
if (first === "" || data[first] === "") {
this.orderedKeys.splice(i, 1);
i--;
}
}
}
} catch (error) {}
}
}
}
@ -57,27 +105,72 @@ export default class CableDetailComponent extends Component {
this.props.socket.removeEventListener("message", this.handleMessage);
}
renderTables() {
const { cableDetails } = this.state;
if (!cableDetails) return null;
renderHorizontalTable(title, object) {
let data;
try {
data = JSON.parse(object);
} catch (error) {
console.error("Error parsing JSON data:", error);
return <div>Error loading data...</div>;
}
return Object.keys(cableDetails.dynamicProps).map((key) => (
<div key={key}>
<h2>{key.replace(/([A-Z])/g, " $1").trim()}</h2>
const keys = Object.keys(data);
const maxRows = Math.max(...keys.map((key) => data[key].length));
const rows = Array.from({ length: maxRows }).map((_, rowIndex) => {
return (
<tr className="row" key={rowIndex}>
{keys.map((key, index) => (
<td className="body" key={index}>
{data[key][rowIndex] || ""}
</td>
))}
</tr>
);
});
return (
<div className="cable-tables-div" style={{ width: "100%" }}>
<span className="cable-tables-div-title">{title}</span>
<table>
<tbody>
{Object.entries(cableDetails.dynamicProps[key]).map(
([propKey, value]) => (
<tr key={propKey}>
<td>{propKey}</td>
<td>{Array.isArray(value) ? value.join(", ") : value}</td>
</tr>
)
)}
</tbody>
<thead className="thead">
<tr className="row">
{keys.map((key, index) => (
<th className="head" key={index}>
{key}
</th>
))}
</tr>
</thead>
<tbody className="tbody">{rows}</tbody>
</table>
</div>
));
);
}
renderVerticalTable(title, object) {
let data;
try {
data = JSON.parse(object);
} catch (error) {
console.error("Error parsing JSON data:", error);
return <div>Error loading data...</div>;
}
return (
<div className="cable-tables-div">
<span className="cable-tables-div-title">{title}</span>
<table>
{Object.entries(data).map(([key, value], index) => (
<tr className="row" key={index}>
<th className="head">{key}</th>
<td className="body">{value}</td>
</tr>
))}
</table>
</div>
);
}
render() {
@ -141,6 +234,39 @@ export default class CableDetailComponent extends Component {
<span>🤲</span>
</div>
</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(
key,
JSON.stringify(cableDetails.dynamicProps[key])
);
} else {
return this.renderVerticalTable(
key,
JSON.stringify(cableDetails.dynamicProps[key])
);
}
})}
</div>
) : (
<div className="cable-tables"></div>
)}
</div>
</div>
);