map done

src/assets/stylesheets/browse.scss

@@ -150,4 +150,4 @@ $white: #fff;
   width: auto;
   height: auto;
   font-family: "Gotham Medium";
-}
+}

src/assets/stylesheets/map.scss

@@ -97,6 +97,7 @@ $white: #fff;
 
 .map-details {
   width: 38%;
+  justify-content: space-between;
 }
 
 .map-box-row {
@@ -108,7 +109,6 @@ $white: #fff;
   align-items: center;
   justify-content: center;
   flex-direction: row;
-
   overflow: visible;
 }
 
@@ -116,7 +116,11 @@ $white: #fff;
   width: 60px;
   height: 60px;
   border-radius: 50%;
-  background-color: $white;
+  background: linear-gradient(
+    15deg,
+    rgb(223, 223, 223) 0%,
+    rgb(255, 255, 255) 100%
+  );
   margin-left: 3px;
   margin-right: 3px;
   display: flex;
@@ -138,6 +142,7 @@ $white: #fff;
   background-color: transparent;
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0);
   border: 1px solid transparent;
+  background: transparent;
 }
 
 .map-box-circle-inner {
@@ -148,4 +153,125 @@ $white: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+.map-box-circle-inner span {
+  width: auto;
+  height: auto;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  font-size: 16px;
+  font-weight: bold;
+  color: $dark-blue;
+  margin-top: 2px;
+  font-family: "Gotham Bold";
+}
+
+.map-cable-image {
+  width: auto;
+  height: 35%;
+  aspect-ratio: 1/1;
+  background-color: transparent;
+  border: $gray solid 1px;
+  border-radius: 20px;
+  background-color: white;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  margin-bottom: 30px;
+  margin-top: 30px;
+}
+
+.map-cable-label {
+  width: 90%;
+  height: 80%;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.map-cable-name {
+  background-color: transparent;
+  font-size: 28px;
+  color: $medium-blue;
+  width: 100%;
+  text-align: left;
+  height: auto;
+  font-family: "Gotham Bold";
+  margin-bottom: 3px;;
+}
+
+.map-cable-shortdescription {
+  background-color: transparent;
+  font-size: 18px;
+  color: $medium-blue;
+  width: 100%;
+  text-align: left;
+  height: auto;
+  font-family: "Gotham Medium";
+  margin-bottom: 15px;
+}
+
+.map-cable-description {
+  background-color: transparent;
+  font-size: 16px;
+  color: $black;
+  width: 100%;
+  text-align: left;
+  height: auto;
+  font-family: "Gotham Medium";
+  margin-bottom: 15px;
+}
+
+.map-cable-brand,
+.map-cable-short,
+.map-cable-position,
+.map-cable-category {
+  background-color: transparent;
+  font-size: 15px;
+  margin-bottom: 5px;
+  color: $light-blue;
+  color: $light-blue;
+  width: 100%;
+  text-align: left;
+  height: auto;
+  font-family: "Gotham Medium";
+}
+
+.map-cable-moreinfo {
+  width: 200px;
+  height: 50px;
+  border-radius: 20px; 
+  background: linear-gradient(
+    15deg,
+    rgb(223, 223, 223) 0%,
+    rgb(255, 255, 255) 100%
+  );
+  margin-left: 3px;
+  margin-right: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+  filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
+  cursor: pointer;
+  margin-bottom: 40px;
+  text-decoration: none;
+}
+
+.map-cable-moreinfo:hover {
+  transform: translate3d(-5px, -5px, 0);
+}
+
+.map-cable-moreinfo span {
+  width: auto;
+  height: auto;
+  font-size: 20px;
+  color: $medium-blue;
+  font-family: "Gotham Bold";
+  background-color: transparent;
 }

src/components/BrowseComponent.js

@@ -1,92 +1,8 @@
 import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
-import DefaultPartImg from "../assets/images/part.png";
+import cable from "../utils/Cable";
-import { NavLink } from "react-router-dom";
 import "../assets/stylesheets/browse.scss";
 
-class cable {
-  constructor(
-    part_number,
-    position,
-    name,
-    brand,
-    description,
-    short_description,
-    image,
-    category,
-    application
-  ) {
-    this.part_number = part_number;
-    this.position = position;
-    this.name = name;
-    this.brand = brand;
-    this.image = image ? `http://localhost${image}` : DefaultPartImg;
-
-    this.category = category;
-    this.application = application;
-    this.short_description = short_description;
-    this.description = description;
-
-    if (short_description === undefined) {
-      if (this.description !== undefined) {
-        this.short_description = this.description;
-      } else if (this.application !== undefined) {
-        this.short_description = this.application;
-      } else if (this.category !== undefined) {
-        this.short_description = this.category;
-      } else {
-        this.short_description = "";
-      }
-    }
-
-    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() {
-    return (
-      <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.short_description}
-          </div>
-          {this.category ? (
-            <div className="browse-cable-category">
-              <span style={{ color: "black", backgroundColor: "transparent" }}>
-                Category:{" "}
-              </span>
-              {this.category}
-            </div>
-          ) : null}
-          <div className="browse-cable-brand">
-            <span style={{ color: "black", backgroundColor: "transparent" }}>
-              Brand:{" "}
-            </span>
-            {this.brand}
-          </div>
-          <div className="browse-cable-position">
-            <span style={{ color: "black", backgroundColor: "transparent" }}>
-              Position:{" "}
-            </span>
-            {this.position}
-          </div>
-        </div>
-        <span className="browse-cable-arrow">{">"}</span>
-      </NavLink>
-    );
-  }
-}
-
 export default class BrowseComponent extends Component {
   constructor(props) {
     super(props);

src/components/CableDetailComponent.js

@@ -268,9 +268,15 @@ export default class CableDetailComponent extends Component {
         </div>
         <div className="cable-fieldContainer">
           <div className="cable-actions">
-            <NavLink to="/browse" className="cable-actions-back">
+            {window.location.href.includes("browse") ? (
-              <span>⬅️ Back</span>
+              <NavLink to="/browse" className="cable-actions-back">
-            </NavLink>
+                <span>⬅️ Back</span>
+              </NavLink>
+            ) : (
+              <NavLink to="/map" className="cable-actions-back">
+                <span>⬅️ Back</span>
+              </NavLink>
+            )}
           </div>
           {cableDetails ? (
             <div className="cable-main">
@@ -310,7 +316,7 @@ export default class CableDetailComponent extends Component {
                   >
                     Position:{" "}
                   </span>
-                  {cableDetails.position}
+                  {parseInt(cableDetails.position) + 1}
                 </div>
               </div>
             </div>

src/components/MapComponent.js

@@ -1,20 +1,133 @@
 import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
+import cable from "../utils/Cable";
 import "../assets/stylesheets/map.scss";
+import { NavLink } from "react-router-dom";
 
 export default class MapComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      cableList: [],
+      selected: "0",
+      cable: new cable(
+        "...",
+        "0",
+        "...",
+        "...",
+        "...",
+        "...",
+        "...",
+        "...",
+        "..."
+      ),
+    };
+  }
+
+  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);
+      const list = this.browseParse(message);
+      this.setState({ cableList: list });
+      setTimeout(() => {
+        this.select("0");
+        this.updateSelection();
+      }, 50);
+    } catch (error) {
+      console.error("Error parsing message from server:", error);
+    }
+  };
+
+  updateSelection() {
+    const cableList = this.state.cableList;
+    for (let i = 0; i < 54; i++) {
+      let cable = cableList[i];
+      if (cable === undefined) {
+        document.getElementById("inner-" + i).style.border =
+          "#bdbdbd 4px solid";
+        document.getElementById("text-" + i).style.color = "#bdbdbd";
+      }
+    }
+  }
+
+  browseParse(message) {
+    let cableList = [];
+    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;
+      let description = map[i].description;
+      let short_description = map[i].short_description;
+      let category = map[i].category;
+      let application = map[i].application;
+      cableList.push(
+        new cable(
+          part_number,
+          position,
+          name,
+          brand,
+          description,
+          short_description,
+          image,
+          category,
+          application
+        )
+      );
+    }
+    return cableList;
+  }
+
+  componentWillUnmount() {
+    this.props.socket.removeEventListener("message", this.handleMessage);
+  }
+
   renderCircle(id, color) {
     return (
-      <div className="map-box-circle" id={id}>
+      <div
+        className="map-box-circle"
+        id={"circle-" + id}
+        onClick={() => this.select(id)}
+      >
         <div
           className="map-box-circle-inner"
+          id={"inner-" + id}
           style={{ border: `${color} 4px solid` }}
-        ></div>
+        >
+          <span id={"text-" + id}>{parseInt(id) + 1}</span>
+        </div>
       </div>
     );
   }
 
+  select = (id) => {
+    let cable = this.state.cableList[id];
+    if (cable === undefined) {
+      return;
+    }
+
+    let { selected } = this.state;
+    document.getElementById("inner-" + selected).style.border =
+      "#004990 4px solid";
+    document.getElementById("text-" + selected).style.color = "#004990";
+    this.setState({ selected: id });
+    document.getElementById("inner-" + id).style.border = "#007cbe 4px solid";
+    document.getElementById("text-" + id).style.color = "#007cbe";
+
+    let cab = this.state.cableList[id];
+    this.setState({ cable: cab });
+  };
+
   render() {
+    let { cable } = this.state;
     return (
       <div className="map">
         <div className="map-image">
@@ -25,86 +138,129 @@ export default class MapComponent extends Component {
           <div className="map-boxContainer">
             <div className="map-box">
               <div className="map-box-row" id="row-1">
-                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("0", "#004990")}
-                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("1", "#004990")}
-                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("2", "#004990")}
-                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("3", "#004990")}
-                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("4", "#004990")}
               </div>
               <div className="map-box-row" id="row-2">
-                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("5", "#004990")}
-                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("6", "#004990")}
-                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("7", "#004990")}
-                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("8", "#004990")}
-                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("9", "#004990")}
-                {this.renderCircle("circle-6", "#004990")}
+                {this.renderCircle("10", "#004990")}
               </div>
               <div className="map-box-row" id="row-3">
-                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("11", "#004990")}
-                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("12", "#004990")}
-                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("13", "#004990")}
-                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("14", "#004990")}
-                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("15", "#004990")}
-                {this.renderCircle("circle-6", "#004990")}
+                {this.renderCircle("16", "#004990")}
-                {this.renderCircle("circle-7", "#004990")}
+                {this.renderCircle("17", "#004990")}
               </div>
               <div className="map-box-row" id="row-4">
-                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("18", "#004990")}
-                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("19", "#004990")}
-                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("20", "#004990")}
                 <div className="map-box-spacer"></div>
                 <div className="map-box-spacer"></div>
-                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("21", "#004990")}
-                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("22", "#004990")}
-                {this.renderCircle("circle-6", "#004990")}
+                {this.renderCircle("23", "#004990")}
               </div>
               <div className="map-box-row" id="row-5">
-                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("24", "#004990")}
-                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("25", "#004990")}
-                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("26", "#004990")}
                 <div className="map-box-spacer"></div>
                 <div className="map-box-spacer"></div>
                 <div className="map-box-spacer"></div>
-                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("27", "#004990")}
-                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("28", "#004990")}
-                {this.renderCircle("circle-6", "#004990")}
+                {this.renderCircle("29", "#004990")}
               </div>
               <div className="map-box-row" id="row-6">
-                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("30", "#004990")}
-                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("31", "#004990")}
-                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("32", "#004990")}
                 <div className="map-box-spacer"></div>
                 <div className="map-box-spacer"></div>
-                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("33", "#004990")}
-                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("34", "#004990")}
-                {this.renderCircle("circle-6", "#004990")}
+                {this.renderCircle("35", "#004990")}
               </div>
               <div className="map-box-row" id="row-7">
-                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("36", "#004990")}
-                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("37", "#004990")}
-                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("38", "#004990")}
-                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("39", "#004990")}
-                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("40", "#004990")}
-                {this.renderCircle("circle-6", "#004990")}
+                {this.renderCircle("41", "#004990")}
-                {this.renderCircle("circle-7", "#004990")}
+                {this.renderCircle("42", "#004990")}
               </div>
               <div className="map-box-row" id="row-8">
-                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("43", "#004990")}
-                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("44", "#004990")}
-                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("45", "#004990")}
-                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("46", "#004990")}
-                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("47", "#004990")}
-                {this.renderCircle("circle-6", "#004990")}
+                {this.renderCircle("48", "#004990")}
               </div>
               <div className="map-box-row" id="row-9">
-                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("49", "#004990")}
-                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("50", "#004990")}
-                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("51", "#004990")}
-                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("52", "#004990")}
-                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("53", "#004990")}
               </div>
             </div>
-            <div className="map-details"></div>
+            <div className="map-details">
+              <div className="map-cable-label">
+                <img
+                  className="map-cable-image"
+                  src={cable.image}
+                  alt="Cable"
+                />
+                <div className="map-cable-name">{cable.name}</div>
+                <div className="map-cable-shortdescription">
+                  {cable.short_description}
+                </div>
+
+                <div className="map-cable-description">{cable.description}</div>
+                {cable.category ? (
+                  <div className="map-cable-category">
+                    <span
+                      style={{ color: "black", backgroundColor: "transparent" }}
+                    >
+                      Category:{" "}
+                    </span>
+                    {cable.category}
+                  </div>
+                ) : null}
+                <div className="map-cable-brand">
+                  <span
+                    style={{ color: "black", backgroundColor: "transparent" }}
+                  >
+                    Brand:{" "}
+                  </span>
+                  {cable.brand}
+                </div>
+                <div className="map-cable-position">
+                  <span
+                    style={{ color: "black", backgroundColor: "transparent" }}
+                  >
+                    Position:{" "}
+                  </span>
+                  {parseInt(cable.position) + 1}
+                </div>
+              </div>
+              <NavLink to={"/map/cable/" + cable.position} className="map-cable-moreinfo">
+                <span>More Info</span>
+              </NavLink>
+            </div>
           </div>
         </div>
       </div>

src/index.js

@@ -54,6 +54,11 @@ const init = () => {
       element: <CableDetailRoute socket={socket} />,
       // errorElement: <ErrorRoute></ErrorRoute>,
     },
+    {
+      path: "/map/cable/:cablePos",
+      element: <CableDetailRoute socket={socket} />,
+      // errorElement: <ErrorRoute></ErrorRoute>,
+    },
   ]);
 
   root.render(

src/routes/MapRoute.js

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

src/utils/Cable.js

@@ -0,0 +1,93 @@
+import React, { Component } from "react";
+import DefaultPartImg from "../assets/images/part.png";
+import { NavLink } from "react-router-dom";
+import "../assets/stylesheets/browse.scss";
+
+export default class cable {
+  constructor(
+    part_number,
+    position,
+    name,
+    brand,
+    description,
+    short_description,
+    image,
+    category,
+    application
+  ) {
+    this.part_number = part_number;
+    this.position = position;
+    this.name = name;
+    this.brand = brand;
+    this.image = image ? `http://localhost${image}` : DefaultPartImg;
+
+    this.category = category;
+    this.application = application;
+    this.short_description = short_description;
+    this.description = description;
+
+    if (short_description === undefined) {
+      if (this.description !== undefined) {
+        this.short_description = this.description;
+      } else if (this.application !== undefined) {
+        this.short_description = this.application;
+      } else if (this.category !== undefined) {
+        this.short_description = this.category;
+      } else {
+        this.short_description = "";
+      }
+    }
+
+    if (this.short_description !== undefined) {
+      this.short_description =
+        this.short_description.charAt(0).toUpperCase() +
+        this.short_description.slice(1);
+      if (this.short_description.length > 80) {
+        this.short_description =
+          this.short_description.substring(0, 80) + "...";
+      }
+    }
+
+    if (this.description !== undefined) {
+      if (this.description.length > 200) {
+        this.description = this.description.substring(0, 200) + "...";
+      }
+    }
+  }
+
+  returnDiv() {
+    return (
+      <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.short_description}
+          </div>
+          {this.category ? (
+            <div className="browse-cable-category">
+              <span style={{ color: "black", backgroundColor: "transparent" }}>
+                Category:{" "}
+              </span>
+              {this.category}
+            </div>
+          ) : null}
+          <div className="browse-cable-brand">
+            <span style={{ color: "black", backgroundColor: "transparent" }}>
+              Brand:{" "}
+            </span>
+            {this.brand}
+          </div>
+          <div className="browse-cable-position">
+            <span style={{ color: "black", backgroundColor: "transparent" }}>
+              Position:{" "}
+            </span>
+            {parseInt(this.position) + 1}
+          </div>
+        </div>
+        <span className="browse-cable-arrow">{">"}</span>
+      </NavLink>
+    );
+  }
+}