Detail base

src/assets/classes/SocketHandler.js

@@ -1,28 +0,0 @@
-export default class socketHandler {
-  constructor(socket) {
-    this.socket = socket;
-
-    this.socket.addEventListener("message", (event) => {
-      try {
-        console.log("Message from server", event.data);
-        let messages = document.getElementById("messages");
-        let message = document.createElement("li");
-        message.textContent = "Received: " + event.data;
-        messages.appendChild(message);
-      } catch (error) {
-        console.log("Error", error);
-      }
-    });
-  }
-
-  sendMessage(message) {
-    this.socket.send(message);
-    console.log("Message sent", message);
-  }
-
-  ping() {
-    let message = `{ "call": "send", "type": "log", "data": "This is a ping!!" }`;
-    this.socket.send(message);
-    console.log("Message sent", message);
-  }
-}

src/assets/stylesheets/browse.scss

@@ -10,9 +10,8 @@ $white: #fff;
   background: linear-gradient(
     180deg,
     rgb(0 37 84 / 100%) 0%,
-    rgb(0 124 190 / 100%) 26%,
+    rgb(0 124 190 / 100%) 50%,
-    rgb(255 255 255) 39%,
+    rgb(255, 255, 255) 100%
-    rgb(255 255 255 / 100%) 100%
   );
   background-color: transparent;
   overflow-y: visible;
@@ -48,6 +47,7 @@ $white: #fff;
   flex-direction: column;
   overflow: hidden;
   background-color: transparent;
+  margin-bottom: 50px;
 }
 
 .browse-cable {
@@ -61,7 +61,15 @@ $white: #fff;
   border-radius: 20px;
   border: 1px solid $gray;
   padding: 25px;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.browse-cable:hover {
+  transform: translate3d(-5px, -5px, 0);
 }
 
 .browse-cable-image {
@@ -69,7 +77,6 @@ $white: #fff;
   height: 100%;
   background-color: transparent;
   margin-right: 10px;
-
 }
 
 .browse-cable-label {

src/assets/stylesheets/cabledetail.scss

@@ -0,0 +1,50 @@
+$dark-blue: #002554;
+$medium-blue: #004990;
+$light-blue: #007cbe;
+$hover-blue: #25b3ff;
+$black: #000;
+$gray: #bdbdbd;
+$white: #fff;
+
+.cable {
+  background: linear-gradient(
+    180deg,
+    rgb(0 37 84 / 100%) 0%,
+    rgb(0 124 190 / 100%) 50%,
+    rgb(255, 255, 255) 100%
+  );
+  background-color: transparent;
+  overflow-y: visible;
+  width: calc(100% - 300px);
+  height: auto;
+  display: block;
+  justify-content: center;
+  align-items: center;
+}
+
+.cable-image {
+  width: 100%;
+  height: 200px;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cable-image img {
+  width: auto;
+  height: 200px;
+  background-color: transparent;
+}
+
+.cable-fieldContainer {
+  width: 100%;
+  min-height: calc(100% - 200px);
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: transparent;
+}

src/components/BrowseComponent.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
 import DefaultPartImg from "../assets/images/part.png";
+import { NavLink } from "react-router-dom";
 import "../assets/stylesheets/browse.scss";
 
 class cable {
@@ -28,7 +29,7 @@ class cable {
 
   returnDiv() {
     return (
-      <div className="browse-cable">
+      <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>
@@ -42,7 +43,7 @@ class cable {
           </div>
         </div>
         <span className="browse-cable-arrow">{">"}</span>
-      </div>
+      </NavLink>
     );
   }
 }
@@ -56,14 +57,8 @@ export default class BrowseComponent extends Component {
   }
 
   componentDidMount() {
-    this.props.socketHandler.sendMessage(
+    this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
-      '{"type":"cable_map","call":"request","data":{}}'
+    this.props.socket.addEventListener("message", this.handleMessage);
-    );
-
-    this.props.socketHandler.socket.addEventListener(
-      "message",
-      this.handleMessage
-    );
   }
 
   handleMessage = (event) => {
@@ -102,10 +97,7 @@ export default class BrowseComponent extends Component {
   }
 
   componentWillUnmount() {
-    this.props.socketHandler.socket.removeEventListener(
+    this.props.socket.removeEventListener("message", this.handleMessage);
-      "message",
-      this.handleMessage
-    );
   }
 
   render() {

src/components/CableDetailComponent.js

@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+import BeldenLogo from "../assets/images/belden-white.png";
+import { NavLink } from "react-router-dom";
+import "../assets/stylesheets/cabledetail.scss";
+
+export default class CableDetailComponent extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  // componentDidMount() {
+  //   this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
+  //   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);
+  //   }
+  // };
+
+  // componentWillUnmount() {
+  //   this.props.socket.removeEventListener("message", this.handleMessage);
+  // }
+
+  render() {
+    return (
+      <div className="cable">
+        <div className="cable-image">
+          <img src={BeldenLogo} alt="Belden" />
+        </div>
+        <div className="cable-fieldContainer">
+          
+        </div>
+      </div>
+    );
+  }
+}

src/components/NavBar.js

@@ -14,6 +14,9 @@ export default class NavBar extends Component {
     } else if (path.includes("map")) {
       document.getElementById("map").style.backgroundColor = "#007CBE";
       document.getElementById("map-s").style.color = "white";
+    } else if (path.includes("cable")) {
+      document.getElementById("browse").style.backgroundColor = "#007CBE";
+      document.getElementById("browse-s").style.color = "white";
     } else {
       document.getElementById("home").style.backgroundColor = "#007CBE";
       document.getElementById("home-s").style.color = "white";

src/index.js

@@ -4,8 +4,8 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import SummaryRoute from "./routes/SummaryRoute";
 import BrowseRoute from "./routes/BrowseRoute";
 import SettingsRoute from "./routes/SettingsRoute";
-import SocketHandler from "./assets/classes/SocketHandler";
 import MapRoute from "./routes/MapRoute";
+import CableDetailRoute from "./routes/CableDetailRoute";
 
 // Root
 const root = ReactDOM.createRoot(document.getElementById("root"));
@@ -21,27 +21,30 @@ socket.addEventListener("open", function (event) {
 
 // Initialize the app
 const init = () => {
-  const socketHandler = new SocketHandler(socket);
-
   const router = createBrowserRouter([
     {
       path: "/",
-      element: <SummaryRoute socketHandler={socketHandler}></SummaryRoute>,
+      element: <SummaryRoute socket={socket}></SummaryRoute>,
       // errorElement: <ErrorRoute></ErrorRoute>,
     },
     {
       path: "/browse",
-      element: <BrowseRoute socketHandler={socketHandler}></BrowseRoute>,
+      element: <BrowseRoute socket={socket}></BrowseRoute>,
       // errorElement: <ErrorRoute></ErrorRoute>,
     },
     {
       path: "/settings",
-      element: <SettingsRoute socketHandler={socketHandler}></SettingsRoute>,
+      element: <SettingsRoute socket={socket}></SettingsRoute>,
       // errorElement: <ErrorRoute></ErrorRoute>,
     },
     {
       path: "/map",
-      element: <MapRoute socketHandler={socketHandler}></MapRoute>,
+      element: <MapRoute socket={socket}></MapRoute>,
+      // errorElement: <ErrorRoute></ErrorRoute>,
+    },
+    {
+      path: "/cable/:cableId",
+      element: <CableDetailRoute socket={socket} />,
       // errorElement: <ErrorRoute></ErrorRoute>,
     },
   ]);

src/routes/BrowseRoute.js

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

src/routes/CableDetailRoute.js

@@ -0,0 +1,20 @@
+import React, { Component } from "react";
+import NavBar from "../components/NavBar";
+import CableDetailComponent from "../components/CableDetailComponent";
+import "../assets/stylesheets/app.scss";
+
+export default class CableDetailRoute extends Component {
+  constructor(props) {
+    super(props);
+    document.title = "Details";
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <NavBar />
+        <CableDetailComponent />
+      </div>
+    );
+  }
+}

src/routes/MapRoute.js

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

src/routes/SettingsRoute.js

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

src/routes/SummaryRoute.js

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