getcable

src/components/BrowseComponent.js

@@ -19,23 +19,23 @@ class cable {
     this.name = name;
     this.brand = brand;
     this.description = description;
-    this.short_description = short_description;
-    if (image === undefined) {
-      this.image = DefaultPartImg;
-    } else {
-      this.image = image;
-    }
+    this.short_description = short_description
+    ? short_description
+    : description;
+    this.image = image
+      ? `http://localhost${image}`
+      : DefaultPartImg;
   }
 
   returnDiv() {
     return (
-      <NavLink className="browse-cable" to={"/cable/" + this.part_number}>
+      <NavLink className="browse-cable" to={"/browse/cable/" + this.position}>
         <img className="browse-cable-image" src={this.image} alt="Cable" />
         <div className="browse-cable-label">
           <div className="browse-cable-name">{this.name}</div>
           <div className="browse-cable-description">
             <span style={{ color: "#007cbe" }}></span>
-            {this.description}
+            {this.short_description}
           </div>
           <div className="browse-cable-brand">
             <span style={{ color: "black", backgroundColor: "transparent" }}>
@@ -85,6 +85,7 @@ export default class BrowseComponent extends Component {
     let map = message.data.map;
     for (let i = 0; i < map.length; i++) {
       let part_number = map[i].part_number;
+      let image = map[i].image;
       let position = map[i].position;
       let name = map[i].name;
       let brand = map[i].brand;
@@ -97,7 +98,8 @@ export default class BrowseComponent extends Component {
           name,
           brand,
           description,
-          short_description
+          short_description,
+          image
         )
       );
     }

src/components/CableDetailComponent.js

@@ -4,82 +4,143 @@ import DefaultPartImg from "../assets/images/part.png";
 import { NavLink } from "react-router-dom";
 import "../assets/stylesheets/cabledetail.scss";
 
-class cable {
-  constructor(
-    part_number,
-    position,
-    name,
-    brand,
-    description,
-    short_description,
-    image
-  ) {
-    this.part_number = part_number;
-    this.position = position;
-    this.name = name;
-    this.brand = brand;
-    this.description = description;
-    this.short_description = short_description;
-    if (image === undefined) {
-      this.image = DefaultPartImg;
-    } else {
-      this.image = image;
-    }
-  }
+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;
+    this.dynamicProps = {};
 
-  returnDiv() {
-    return (
-      <NavLink className="browse-cable" to={"/cable/" + this.part_number}>
-        <img className="browse-cable-image" src={this.image} alt="Cable" />
-        <div className="browse-cable-label">
-          <div className="browse-cable-name">{this.name}</div>
-          <div className="browse-cable-brand">
-            <span style={{ color: "#007cbe" }}>Brand: </span>
-            {this.brand}
-          </div>
-          <div className="browse-cable-description">
-            <span style={{ color: "#007cbe" }}>About: </span>
-            {this.description}
-          </div>
-        </div>
-        <span className="browse-cable-arrow">{">"}</span>
-      </NavLink>
-    );
+    Object.keys(cableData).forEach((key) => {
+      if (!["partnum", "id", "brand", "position", "image"].includes(key)) {
+        this.dynamicProps[key] = cableData[key];
+      }
+    });
   }
 }
 
 export default class CableDetailComponent extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      cableDetails: null,
+    };
   }
 
   componentDidMount() {
-    // this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
-    // this.props.socket.addEventListener("message", this.handleMessage);
-    const id = this.props.cableId;
-    console.log("ID: ", id);
+    const cablePos = window.location.href.split("/").pop();
+    this.props.socket.send(
+      `{"type":"cable_details","call":"request","data":{"position":["${cablePos}"]}}`
+    );
+    this.props.socket.addEventListener("message", this.handleMessage);
   }
 
-  // handleMessage = (event) => {
-  //   try {
-  //     console.log("Message from server", event.data);
-  //     const message = JSON.parse(event.data);
-  //   } catch (error) {
-  //     console.error("Error parsing message from server:", error);
-  //   }
-  // };
+  handleMessage = (event) => {
+    try {
+      console.log("Message from server", event.data);
+      const message = JSON.parse(event.data);
+      const cableDetails = new Cable(message.data.cables[0]);
+      this.setState({ cableDetails });
+    } catch (error) {
+      console.error("Error parsing message from server:", error);
+    }
+  };
 
-  // componentWillUnmount() {
-  //   this.props.socket.removeEventListener("message", this.handleMessage);
-  // }
+  componentWillUnmount() {
+    this.props.socket.removeEventListener("message", this.handleMessage);
+  }
+
+  renderTables() {
+    const { cableDetails } = this.state;
+    if (!cableDetails) return null;
+
+    return Object.keys(cableDetails.dynamicProps).map((key) => (
+      <div key={key}>
+        <h2>{key.replace(/([A-Z])/g, " $1").trim()}</h2>
+        <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>
+        </table>
+      </div>
+    ));
+  }
 
   render() {
+    const { cableDetails } = this.state;
+
     return (
       <div className="cable">
         <div className="cable-image">
           <img src={BeldenLogo} alt="Belden" />
         </div>
         <div className="cable-fieldContainer">
+          <div className="cable-actions">
+            <NavLink to="/browse" className="cable-actions-back">
+              <span>⬅️ Back</span>
+            </NavLink>
+          </div>
+          {cableDetails ? (
+            <div className="cable-main">
+              <img
+                className="cable-main-image"
+                src={cableDetails.image}
+                alt="Cable"
+              />
+              <div className="cable-main-label">
+                <div className="cable-main-name">{cableDetails.partnum}</div>
+                <div className="cable-main-description">
+                  {cableDetails.description}
+                </div>
+                <div className="cable-main-brand">
+                  <span
+                    style={{ color: "black", backgroundColor: "transparent" }}
+                  >
+                    Brand:{" "}
+                  </span>
+                  {cableDetails.brand}
+                </div>
+                <div className="cable-main-position">
+                  <span
+                    style={{ color: "black", backgroundColor: "transparent" }}
+                  >
+                    Position:{" "}
+                  </span>
+                  {cableDetails.position}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="cable-main"></div>
+          )}
+          <div className="cable-actions">
+            <div className="cable-actions-button">
+              <span>➤ Datasheet</span>
+              <span>✏️</span>
+            </div>
+            <div className="cable-actions-button">
+              <span>➤ Show</span>
+              <span>💡</span>
+            </div>
+            <div className="cable-actions-button">
+              <span>➤ Dispense</span>
+              <span>🤲</span>
+            </div>
+          </div>
         </div>
       </div>
     );

src/components/MapComponent.js

@@ -6,8 +6,11 @@ export default class MapComponent extends Component {
   render() {
     return (
       <div className="map">
-        <img className="map-image" src={BeldenLogo} alt="Belden" />
-        <div className="map-fieldContainer"></div>
+        <div className="map-image">
+          <img src={BeldenLogo} alt="Belden" />
+        </div>
+        <div className="map-fieldContainer">
+        </div>
       </div>
     );
   }

src/components/SettingsComponent.js

@@ -6,7 +6,9 @@ export default class SettingsComponent extends Component {
   render() {
     return (
       <div className="settings">
-        <img className="settings-image" src={BeldenLogo} alt="Belden" />
+        <div className="settings-image">
+          <img src={BeldenLogo} alt="Belden" />
+        </div>
         <div className="settings-fieldContainer"></div>
       </div>
     );

src/components/SummaryComponent.js

@@ -6,15 +6,18 @@ export default class SummaryComponent extends Component {
   render() {
     return (
       <div className="summary">
-        <img className="summary-image" src={BeldenLogo} alt="Belden" />
-        <div className="summary-fieldContainer"></div>
+        <div className="summary-image">
+          <img src={BeldenLogo} alt="Belden" />
+        </div>
+        <div className="summary-fieldContainer">
+          <p className="summary-fieldContainer-pp">hello this is from inside a pp hello this is from inside a pp hello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pp</p>
+          
+        </div>
+
+        <div className="summary-fieldContainer-dashboard">
+          <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" width="450" height="200" frameborder="0"></iframe>
+        </div> 
         {/* <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" width="450" height="200" frameborder="0"></iframe> */}
-        <iframe
-          src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=9"
-          width="450"
-          height="200"
-          frameborder="0"
-        ></iframe>
       </div>
     );
   }