src/assets/stylesheets/browse.scss

@@ -70,7 +70,6 @@ $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,8 +6,7 @@ $black: #000;
 $gray: #bdbdbd;
 $white: #fff;
 
-.cable,
+.cable {
-.loading {
   background: linear-gradient(
     180deg,
     rgb(0 37 84 / 100%) 0%,
@@ -49,140 +48,3 @@ $white: #fff;
   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,42 +10,34 @@ $white: #fff;
   background: linear-gradient(
     180deg,
     rgb(0 37 84 / 100%) 0%,
-    rgb(0 124 190 / 100%) 50%,
+    rgb(0 124 190 / 100%) 26%,
-    rgb(255, 255, 255) 100%
+    rgb(255 255 255) 39%,
+    rgb(255 255 255 / 100%) 100%
   );
   background-color: transparent;
-  overflow-y: visible;
   width: calc(100% - 300px);
   height: auto;
-  display: block;
+  overflow-y: visible;
-  justify-content: center;
-  align-items: center;
-}
-
-.map-image {
-  width: 100%;
-  height: 200px;
-  background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
+  overflow: visible;
 }
 
-.map-image img {
+.map-image {
   width: auto;
-  height: 200px;
+  height: 250px;
-  background-color: transparent;
+  background: transparent;
 }
 
 .map-fieldContainer {
   width: 100%;
-  min-height: calc(100% - 200px);
+  min-height: calc(100% - 250px);
   height: auto;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: column;
-  overflow: hidden;
   background-color: transparent;
-  margin-bottom: 50px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
 }

src/assets/stylesheets/settings.scss

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

src/assets/stylesheets/summary.scss

@@ -2,35 +2,33 @@ $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%) 50%,
+    rgb(0 124 190 / 100%) 26%,
-    rgb(255, 255, 255) 100%
+    rgb(255 255 255) 39%,
+    rgb(255 255 255 / 100%) 100%
   );
   background-color: transparent;
-  overflow-y: visible;
   width: calc(100% - 300px);
   height: auto;
-  display: block;
+  overflow-y: visible;
-  justify-content: center;
-  align-items: center;
-}
-
-.summary-image {
-  width: 100%;
-  height: 200px;
-  background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
+  overflow: visible;
 }
 
-.summary-image img {
+.summary-image {
   width: auto;
-  height: 200px;
+  height: 250px;
-  background-color: transparent;
+  background: transparent;
 }
 
 .summary-fieldContainer {
@@ -64,23 +62,3 @@ $hover-blue: #25b3ff;
   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
+    this.short_description = short_description;
-    ? short_description
+    if (image === undefined) {
-    : description;
+      this.image = DefaultPartImg;
-    this.image = image
+    } else {
-      ? `http://localhost${image}`
+      this.image = image;
-      : DefaultPartImg;
+    }
   }
 
   returnDiv() {
     return (
-      <NavLink className="browse-cable" to={"/browse/cable/" + this.position}>
+      <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-description">
             <span style={{ color: "#007cbe" }}></span>
-            {this.short_description}
+            {this.description}
           </div>
           <div className="browse-cable-brand">
             <span style={{ color: "black", backgroundColor: "transparent" }}>
@@ -85,7 +85,6 @@ 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;
@@ -98,8 +97,7 @@ export default class BrowseComponent extends Component {
           name,
           brand,
           description,
-          short_description,
+          short_description
-          image
         )
       );
     }

src/components/CableDetailComponent.js

@@ -4,143 +4,82 @@ import DefaultPartImg from "../assets/images/part.png";
 import { NavLink } from "react-router-dom";
 import "../assets/stylesheets/cabledetail.scss";
 
-class Cable {
+class cable {
-  constructor(cableData) {
+  constructor(
-    this.partnum = cableData.partnum;
+    part_number,
-    this.id = cableData.id;
+    position,
-    this.brand = cableData.brand;
+    name,
-    this.position = cableData.position;
+    brand,
-    this.description = cableData.description
+    description,
-      ? cableData.image
+    short_description,
-      : "No description available.";
+    image
-    this.image = cableData.image
+  ) {
-      ? `http://localhost${cableData.image}`
+    this.part_number = part_number;
-      : DefaultPartImg;
+    this.position = position;
-    this.dynamicProps = {};
+    this.name = name;
-
+    this.brand = brand;
-    Object.keys(cableData).forEach((key) => {
+    this.description = description;
-      if (!["partnum", "id", "brand", "position", "image"].includes(key)) {
+    this.short_description = short_description;
-        this.dynamicProps[key] = cableData[key];
+    if (image === undefined) {
+      this.image = DefaultPartImg;
+    } else {
+      this.image = image;
     }
-    });
+  }
+
+  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>
+    );
   }
 }
 
 export default class CableDetailComponent extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      cableDetails: null,
-    };
   }
 
   componentDidMount() {
-    const cablePos = window.location.href.split("/").pop();
+    // this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
-    this.props.socket.send(
+    // this.props.socket.addEventListener("message", this.handleMessage);
-      `{"type":"cable_details","call":"request","data":{"position":["${cablePos}"]}}`
+    const id = this.props.cableId;
-    );
+    console.log("ID: ", id);
-    this.props.socket.addEventListener("message", this.handleMessage);
   }
 
-  handleMessage = (event) => {
+  // handleMessage = (event) => {
-    try {
+  //   try {
-      console.log("Message from server", event.data);
+  //     console.log("Message from server", event.data);
-      const message = JSON.parse(event.data);
+  //     const message = JSON.parse(event.data);
-      const cableDetails = new Cable(message.data.cables[0]);
+  //   } catch (error) {
-      this.setState({ cableDetails });
+  //     console.error("Error parsing message from server:", error);
-    } catch (error) {
+  //   }
-      console.error("Error parsing message from server:", error);
+  // };
-    }
-  };
 
-  componentWillUnmount() {
+  // componentWillUnmount() {
-    this.props.socket.removeEventListener("message", this.handleMessage);
+  //   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,11 +6,8 @@ export default class MapComponent extends Component {
   render() {
     return (
       <div className="map">
-        <div className="map-image">
+        <img className="map-image" src={BeldenLogo} alt="Belden" />
-          <img src={BeldenLogo} alt="Belden" />
+        <div className="map-fieldContainer"></div>
-        </div>
-        <div className="map-fieldContainer">
-        </div>
       </div>
     );
   }

src/components/SettingsComponent.js

@@ -6,9 +6,7 @@ export default class SettingsComponent extends Component {
   render() {
     return (
       <div className="settings">
-        <div className="settings-image">
+        <img className="settings-image" src={BeldenLogo} alt="Belden" />
-          <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: "/browse/cable/:cablePos",
+      path: "/cable/:cableId",
       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 socket={this.props.socket} />
+        <CableDetailComponent />
       </div>
     );
   }