test tables

src/components/BrowseComponent.js

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

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() {
-    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" 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>
     );