Merge branch 'main' of https://git.myitr.org/Jukebox/jukebox-web
This commit is contained in:
Lucas
commit
51f50d59fe
@ -6,8 +6,7 @@ $black: #000;
|
||||
$gray: #bdbdbd;
|
||||
$white: #fff;
|
||||
|
||||
.cable,
|
||||
.loading {
|
||||
.cable {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
@ -80,14 +79,16 @@ $white: #fff;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 25px;
|
||||
margin-top: 5px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.cable-actions-button, .cable-actions-back {
|
||||
.cable-actions-button,
|
||||
.cable-actions-back,
|
||||
.cable-tables-div {
|
||||
width: 32%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
@ -108,7 +109,10 @@ $white: #fff;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.cable-actions-button:hover, .cable-main:hover, .cable-actions-back:hover {
|
||||
.cable-actions-button:hover,
|
||||
.cable-main:hover,
|
||||
.cable-actions-back:hover,
|
||||
.cable-tables-div:hover {
|
||||
transform: translate3d(-5px, -5px, 0);
|
||||
}
|
||||
|
||||
@ -121,7 +125,8 @@ $white: #fff;
|
||||
);
|
||||
}
|
||||
|
||||
.cable-actions-button span, .cable-actions-back span {
|
||||
.cable-actions-button span,
|
||||
.cable-actions-back span {
|
||||
text-align: center;
|
||||
font-family: "Gotham Medium";
|
||||
font-size: 20px;
|
||||
@ -186,3 +191,99 @@ $white: #fff;
|
||||
height: auto;
|
||||
font-family: "Gotham Medium";
|
||||
}
|
||||
|
||||
.cable-tables {
|
||||
width: calc(80% + 70px);
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 50px;
|
||||
margin-top: 5px;
|
||||
text-decoration: none;
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cable-tables-div {
|
||||
width: 31%;
|
||||
height: auto;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
flex-grow: 1;
|
||||
margin: 13px;
|
||||
}
|
||||
|
||||
.cable-tables-div table {
|
||||
display: inline-table;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
border: $light-blue solid 2px;
|
||||
border-radius: 20px;
|
||||
table-layout: fixed;
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
.row,
|
||||
.head,
|
||||
.body {
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
outline: $light-blue solid 1px;
|
||||
}
|
||||
|
||||
.head {
|
||||
font-family: "Gotham Bold";
|
||||
font-size: 18px;
|
||||
color: $medium-blue;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.body {
|
||||
font-family: "Gotham Medium";
|
||||
font-size: 16px;
|
||||
color: $medium-blue;
|
||||
}
|
||||
|
||||
.thead {
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.tbody {
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.cable-tables-div-title {
|
||||
width: 90%;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
font-family: "Gotham Bold";
|
||||
font-size: 24px;
|
||||
color: $dark-blue;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -56,7 +56,3 @@ const init = () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
init();
|
||||
Loading…
x
Reference in New Issue
Block a user