Browse page, UI redesign, Websockets, Navigation, and more!

src/components/BrowseComponent.js

@@ -0,0 +1,125 @@
+import React, { Component } from "react";
+import BeldenLogo from "../assets/images/belden-white.png";
+import DefaultPartImg from "../assets/images/part.png";
+import "../assets/stylesheets/browse.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;
+    }
+  }
+
+  returnDiv() {
+    return (
+      <div className="browse-cable">
+        <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>
+      </div>
+    );
+  }
+}
+
+export default class BrowseComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      cableList: [],
+    };
+  }
+
+  componentDidMount() {
+    this.props.socketHandler.sendMessage(
+      '{"type":"cable_map","call":"request","data":{}}'
+    );
+
+    this.props.socketHandler.socket.addEventListener(
+      "message",
+      this.handleMessage
+    );
+  }
+
+  handleMessage = (event) => {
+    try {
+      console.log("Message from server", event.data);
+      const message = JSON.parse(event.data);
+      const cableList = this.browseParse(message);
+      this.setState({ cableList });
+    } catch (error) {
+      console.error("Error parsing message from server:", error);
+    }
+  };
+
+  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 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;
+      cableList.push(
+        new cable(
+          part_number,
+          position,
+          name,
+          brand,
+          description,
+          short_description
+        )
+      );
+    }
+    return cableList;
+  }
+
+  componentWillUnmount() {
+    this.props.socketHandler.socket.removeEventListener(
+      "message",
+      this.handleMessage
+    );
+  }
+
+  render() {
+    return (
+      <div className="browse">
+        <div className="browse-image">
+          <img src={BeldenLogo} alt="Belden" />
+        </div>
+        <div className="browse-fieldContainer">
+          {this.state.cableList.map((cableObj, index) => (
+            <React.Fragment key={index}>{cableObj.returnDiv()}</React.Fragment>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}

src/components/HomeComponent.js

@@ -1,12 +0,0 @@
-import React, { Component } from "react";
-import "../assets/stylesheets/home.scss";
-
-export default class HomeComponent extends Component {
-  // constructor(props) {
-  //     super(props);
-  // }
-
-  render() {
-    return <div className="home"></div>;
-  }
-}

src/components/MapComponent.js

@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+import BeldenLogo from "../assets/images/belden-white.png";
+import "../assets/stylesheets/map.scss";
+
+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>
+    );
+  }
+}

src/components/NavBar.js

@@ -1,30 +1,57 @@
 import React, { Component } from "react";
 import { NavLink } from "react-router-dom";
-import BeldenLogo from "../assets/images/belden-logo.png";
 import "../assets/stylesheets/navbar.scss";
 
 export default class NavBar extends Component {
-  constructor(props) {
-    super(props);
+  componentDidMount() {
+    let path = window.location.pathname;
+    if (path.includes("browse")) {
+      document.getElementById("browse").style.backgroundColor = "#007CBE";
+      document.getElementById("browse-s").style.color = "white";
+    } else if (path.includes("settings")) {
+      document.getElementById("settings").style.backgroundColor = "#007CBE";
+      document.getElementById("settings-s").style.color = "white";
+    } else if (path.includes("map")) {
+      document.getElementById("map").style.backgroundColor = "#007CBE";
+      document.getElementById("map-s").style.color = "white";
+    } else {
+      document.getElementById("home").style.backgroundColor = "#007CBE";
+      document.getElementById("home-s").style.color = "white";
+    }
   }
 
   render() {
     return (
       <div className="navbar">
         <div className="navbar-top">
-          <img className="navbar-top-logo" src={BeldenLogo} alt="Belden" />
+          <div className="navbar-top-hamburger">≡</div>
+          <h1>Jukebox</h1>
+          <div className="navbar-search">
+            <input type="text" placeholder="Search" />
+            <button>🔍</button>
+          </div>
+          <ol className="navbar-list">
+            <NavLink
+              style={this.upper}
+              id="home"
+              className="navbar-list-item"
+              to="/"
+            >
+              <span id="home-s" style={this.lower}>
+                ❤️ Summary
+              </span>
+            </NavLink>
+            <NavLink className="navbar-list-item" id="browse" to="/browse">
+              <span id="browse-s">🛍️ Browse</span>
+            </NavLink>
+            <NavLink className="navbar-list-item" id="map" to="/map">
+              <span id="map-s">🗺️ Map</span>
+            </NavLink>
+            <NavLink className="navbar-list-item" id="settings" to="/settings">
+              <span id="settings-s">⚙️ Settings</span>
+            </NavLink>
+          </ol>
         </div>
-        <ol className="navbar-list">
-          <NavLink className="navbar-list-item" to="/">
-            <span className="navbar-list-item-label">Home</span>
-          </NavLink>
-          <NavLink className="navbar-list-item" to="/search">
-            <span className="navbar-list-item-label">Search</span>
-          </NavLink>
-          <NavLink className="navbar-list-item" to="/settings">
-            <span className="navbar-list-item-label">Settings</span>
-          </NavLink>
-        </ol>
       </div>
     );
   }

src/components/SettingsComponent.js

@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+import BeldenLogo from "../assets/images/belden-white.png";
+import "../assets/stylesheets/settings.scss";
+
+export default class SettingsComponent extends Component {
+  render() {
+    return (
+      <div className="settings">
+        <img className="settings-image" src={BeldenLogo} alt="Belden" />
+        <div className="settings-fieldContainer"></div>
+      </div>
+    );
+  }
+}

src/components/SummaryComponent.js

@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+import BeldenLogo from "../assets/images/belden-white.png";
+import "../assets/stylesheets/summary.scss";
+
+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>
+    );
+  }
+}