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

src/assets/stylesheets/cabledetail.scss

@@ -6,8 +6,7 @@ $black: #000;
 $gray: #bdbdbd;
 $white: #fff;
 
-.cable,
+.cable {
-.loading {
   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,96 @@ $white: #fff;
   height: auto;
   font-family: "Gotham Medium";
 }
+
+.cable-tables {
+  width: calc(80% + 50px);
+  height: auto;
+  background-color: transparent;
+  display:flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 50px;
+  margin-top: 5px;
+  text-decoration: none;
+  overflow: visible;
+}
+
+.cable-tables-div {
+  width: 48%;
+  height: auto;
+  cursor: default;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  flex-direction: column;
+}
+
+.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: 20px;
+  color: $medium-blue;
+  border-top: none;
+}
+
+.body {
+  font-family: "Gotham Medium";
+  font-size: 18px;
+  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;
+}

src/components/BrowseComponent.js

@@ -20,11 +20,17 @@ class cable {
     this.brand = brand;
     this.description = description;
     this.short_description = short_description
-    ? short_description
+      ? short_description
-    : description;
+      : description;
-    this.image = image
+    this.image = image ? `http://localhost${image}` : DefaultPartImg;
-      ? `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 {
     );
   }
 }
-

src/components/CableDetailComponent.js

@@ -17,12 +17,27 @@ 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);
   }
 }
 
@@ -57,27 +72,71 @@ export default class CableDetailComponent extends Component {
     this.props.socket.removeEventListener("message", this.handleMessage);
   }
 
-  renderTables() {
+  renderHorizontalTable(title, object) {
-    const { cableDetails } = this.state;
+    let data;
-    if (!cableDetails) return null;
+    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) => (
+    const keys = Object.keys(data);
-      <div key={key}>
+    const maxRows = Math.max(...keys.map((key) => data[key].length));
-        <h2>{key.replace(/([A-Z])/g, " $1").trim()}</h2>
+
+    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>
+          <thead className="thead">
-            {Object.entries(cableDetails.dynamicProps[key]).map(
+            <tr className="row">
-              ([propKey, value]) => (
+              {keys.map((key, index) => (
-                <tr key={propKey}>
+                <th className="head" key={index}>
-                  <td>{propKey}</td>
+                  {key}
-                  <td>{Array.isArray(value) ? value.join(", ") : value}</td>
+                </th>
-                </tr>
+              ))}
-              )
+            </tr>
-            )}
+          </thead>
-          </tbody>
+          <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" style={{ width: "32%" }}>
+        <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 +200,40 @@ 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>
     );

src/index.js

@@ -55,8 +55,4 @@ const init = () => {
       <RouterProvider router={router} />
     </div>
   );
-};
+};
-
-
-
-init();