getcable

src/assets/stylesheets/browse.scss

@@ -70,6 +70,7 @@ $white: #fff;
   transition: all 0.3s ease-in-out;
   cursor: pointer;
   text-decoration: none;
+  background-color: transparent;
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 

src/assets/stylesheets/cabledetail.scss

@@ -6,7 +6,8 @@ $black: #000;
 $gray: #bdbdbd;
 $white: #fff;
 
-.cable {
+.cable,
+.loading {
   background: linear-gradient(
     180deg,
     rgb(0 37 84 / 100%) 0%,
@@ -47,4 +48,141 @@ $white: #fff;
   flex-direction: column;
   overflow: hidden;
   background-color: transparent;
-}
+}
+
+.cable-main {
+  width: 80%;
+  height: 200px;
+  background: linear-gradient(
+    -30deg,
+    rgb(187, 208, 236) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: row;
+  border-radius: 20px;
+  border: 1px solid $gray;
+  padding: 25px;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  transition: all 0.3s ease-in-out;
+  text-decoration: none;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+
+.cable-actions {
+  width: calc(80% + 50px);
+  height: 60px;
+  background-color: transparent;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  transition: all 0.3s ease-in-out;
+  text-decoration: none;
+  overflow: visible;
+}
+
+.cable-actions-button, .cable-actions-back {
+  width: 32%;
+  height: 100%;
+  background: linear-gradient(
+    -30deg,
+    rgb(187, 208, 236) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  border-radius: 20px;
+  border: 1px solid $gray;
+  transition: all 0.3s ease-in-out;
+  text-decoration: none;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  cursor: pointer;
+  overflow: visible;
+}
+
+.cable-actions-button:hover, .cable-main:hover, .cable-actions-back:hover {
+  transform: translate3d(-5px, -5px, 0);
+}
+
+.cable-actions-back {
+  width: auto;
+  background: linear-gradient(
+    -30deg,
+    rgb(187, 194, 236) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+}
+
+.cable-actions-button span, .cable-actions-back span {
+  text-align: center;
+  font-family: "Gotham Medium";
+  font-size: 20px;
+  text-decoration: none;
+  color: $medium-blue;
+  width: auto;
+  height: auto;
+  margin: 20px;
+  background-color: transparent;
+}
+
+.cable-main-image {
+  aspect-ratio: 1/1;
+  width: auto;
+  height: 100%;
+  object-fit: cover;
+  background-color: white;
+  margin-right: 25px;
+  border: $gray solid 1px;
+  border-radius: 10px;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+
+.cable-main-label {
+  width: 60%;
+  height: 100%;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.cable-main-name {
+  background-color: transparent;
+  font-size: 32px;
+  color: $medium-blue;
+  width: auto;
+  height: auto;
+  font-family: "Gotham Bold";
+  margin-bottom: 5px;
+}
+
+.cable-main-description {
+  background-color: transparent;
+  font-size: 18px;
+  color: $medium-blue;
+  width: auto;
+  height: auto;
+  font-family: "Gotham Medium";
+  margin-bottom: 30px;
+}
+
+.cable-main-brand,
+.cable-main-short,
+.cable-main-position {
+  background-color: transparent;
+  font-size: 16px;
+  color: $light-blue;
+  color: $light-blue;
+  width: auto;
+  height: auto;
+  font-family: "Gotham Medium";
+}

src/assets/stylesheets/map.scss

@@ -10,34 +10,42 @@ $white: #fff;
   background: linear-gradient(
     180deg,
     rgb(0 37 84 / 100%) 0%,
-    rgb(0 124 190 / 100%) 26%,
-    rgb(255 255 255) 39%,
-    rgb(255 255 255 / 100%) 100%
+    rgb(0 124 190 / 100%) 50%,
+    rgb(255, 255, 255) 100%
   );
   background-color: transparent;
+  overflow-y: visible;
   width: calc(100% - 300px);
   height: auto;
-  overflow-y: visible;
-  display: flex;
-  align-items: center;
+  display: block;
   justify-content: center;
-  flex-direction: column;
-  overflow: visible;
+  align-items: center;
 }
 
 .map-image {
-  width: auto;
-  height: 250px;
+  width: 100%;
+  height: 200px;
   background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.map-image img {
+  width: auto;
+  height: 200px;
+  background-color: transparent;
 }
 
 .map-fieldContainer {
   width: 100%;
-  min-height: calc(100% - 250px);
+  min-height: calc(100% - 200px);
   height: auto;
-  background-color: transparent;
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  flex-wrap: wrap;
-}
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: transparent;
+  margin-bottom: 50px;
+}

src/assets/stylesheets/settings.scss

@@ -10,34 +10,42 @@ $white: #fff;
   background: linear-gradient(
     180deg,
     rgb(0 37 84 / 100%) 0%,
-    rgb(0 124 190 / 100%) 26%,
-    rgb(255 255 255) 39%,
-    rgb(255 255 255 / 100%) 100%
+    rgb(0 124 190 / 100%) 50%,
+    rgb(255, 255, 255) 100%
   );
   background-color: transparent;
+  overflow-y: visible;
   width: calc(100% - 300px);
   height: auto;
-  overflow-y: visible;
-  display: flex;
-  align-items: center;
+  display: block;
   justify-content: center;
-  flex-direction: column;
-  overflow: visible;
+  align-items: center;
 }
 
 .settings-image {
-  width: auto;
-  height: 250px;
+  width: 100%;
+  height: 200px;
   background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.settings-image img {
+  width: auto;
+  height: 200px;
+  background-color: transparent;
 }
 
 .settings-fieldContainer {
   width: 100%;
-  min-height: calc(100% - 250px);
+  min-height: calc(100% - 200px);
   height: auto;
-  background-color: transparent;
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  flex-wrap: wrap;
-}
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: transparent;
+  margin-bottom: 50px;
+}

src/assets/stylesheets/summary.scss

@@ -2,33 +2,35 @@ $dark-blue: #002554;
 $medium-blue: #004990;
 $light-blue: #007cbe;
 $hover-blue: #25b3ff;
-$black: #000;
-$gray: #bdbdbd;
-$white: #fff;
-
 .summary {
   background: linear-gradient(
     180deg,
     rgb(0 37 84 / 100%) 0%,
-    rgb(0 124 190 / 100%) 26%,
-    rgb(255 255 255) 39%,
-    rgb(255 255 255 / 100%) 100%
+    rgb(0 124 190 / 100%) 50%,
+    rgb(255, 255, 255) 100%
   );
   background-color: transparent;
+  overflow-y: visible;
   width: calc(100% - 300px);
   height: auto;
-  overflow-y: visible;
-  display: flex;
-  align-items: center;
+  display: block;
   justify-content: center;
-  flex-direction: column;
-  overflow: visible;
+  align-items: center;
 }
 
 .summary-image {
-  width: auto;
-  height: 250px;
+  width: 100%;
+  height: 200px;
   background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.summary-image img {
+  width: auto;
+  height: 200px;
+  background-color: transparent;
 }
 
 .summary-fieldContainer {
@@ -62,3 +64,23 @@ $white: #fff;
   margin: 10px;
   display: block;
 }
+
+.summary-fieldContainer-pp {
+  width: 25%;
+  height: 300px;
+  border-radius: 20px;
+  text-align: center;
+  padding: 10px;
+}
+
+.summary-fieldContainer-graph {
+  width: 25%;
+}
+
+.summary-fieldContainer-dashboard {
+  width: 100%;
+  height: 300px;
+  border-radius: 20px;
+  text-align: center;
+  padding: 10px;
+}

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/index.js

@@ -44,7 +44,7 @@ const init = () => {
       // errorElement: <ErrorRoute></ErrorRoute>,
     },
     {
-      path: "/cable/:cableId",
+      path: "/browse/cable/:cablePos",
       element: <CableDetailRoute socket={socket} />,
       // errorElement: <ErrorRoute></ErrorRoute>,
     },

src/routes/CableDetailRoute.js

@@ -13,7 +13,7 @@ export default class CableDetailRoute extends Component {
     return (
       <div className="container">
         <NavBar />
-        <CableDetailComponent />
+        <CableDetailComponent socket={this.props.socket} />
       </div>
     );
   }