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

src/assets/classes/SocketHandler.js

@@ -0,0 +1,28 @@
+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/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>
+    );
+  }
+}

src/index.js

@@ -1,57 +1,54 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import HomeRoute from "./routes/HomeRoute";
-import SearchRoute from "./routes/SearchRoute";
+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";
 
+// Root
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <HomeRoute></HomeRoute>,
-    // errorElement: <ErrorRoute></ErrorRoute>,
-  },
-  {
-    path: "/home",
-    element: <HomeRoute></HomeRoute>,
-    // errorElement: <ErrorRoute></ErrorRoute>,
-  },
-  {
-    path: "/search",
-    element: <SearchRoute></SearchRoute>,
-    // errorElement: <ErrorRoute></ErrorRoute>,
-  },
-  {
-    path: "/settings",
-    element: <SettingsRoute></SettingsRoute>,
-    // errorElement: <ErrorRoute></ErrorRoute>,
-  },
-]);
+// Socket handler
+console.log("Connecting to WebSocket server.");
+const socket = new WebSocket("ws://localhost:9000");
+socket.addEventListener("open", function (event) {
+  console.log("Websocket connected.");
+  console.log("Welcome to Belden Jukebox!");
+  init();
+});
 
-root.render(
-  <React.StrictMode>
-    <RouterProvider router={router} />
+// Initialize the app
+const init = () => {
+  const socketHandler = new SocketHandler(socket);
 
-    <span
-      style={{
-        position: "absolute",
-        top: "95%",
-        left: "0%",
-        color: "red",
-        backgroundImage: "none",
-        width: "270px",
-        height: "30px",
-        backgroundColor: "white",
-        borderRadius: "20px",
-        textAlign: "center",
-        padding: "5px 0 0px 0",
-        outline: "solid black 1px",
-      }}
-    >
-      Jukebox Draft UI (not styled yet)
-    </span>
-    
-  </React.StrictMode>
-);
+  const router = createBrowserRouter([
+    {
+      path: "/",
+      element: <SummaryRoute socketHandler={socketHandler}></SummaryRoute>,
+      // errorElement: <ErrorRoute></ErrorRoute>,
+    },
+    {
+      path: "/browse",
+      element: <BrowseRoute socketHandler={socketHandler}></BrowseRoute>,
+      // errorElement: <ErrorRoute></ErrorRoute>,
+    },
+    {
+      path: "/settings",
+      element: <SettingsRoute socketHandler={socketHandler}></SettingsRoute>,
+      // errorElement: <ErrorRoute></ErrorRoute>,
+    },
+    {
+      path: "/map",
+      element: <MapRoute socketHandler={socketHandler}></MapRoute>,
+      // errorElement: <ErrorRoute></ErrorRoute>,
+    },
+  ]);
+
+  root.render(
+    <div>
+      <RouterProvider router={router} />
+    </div>
+  );
+};

src/routes/BrowseRoute.js

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

src/routes/MapRoute.js

@@ -1,17 +1,19 @@
 import React, { Component } from "react";
 import NavBar from "../components/NavBar";
+import MapComponent from "../components/MapComponent";
 import "../assets/stylesheets/app.scss";
 
-export default class SearchRoute extends Component {
+export default class MapRoute extends Component {
   constructor(props) {
     super(props);
-    document.title = "ITR - Search";
+    document.title = "Map";
   }
 
   render() {
     return (
       <div className="container">
         <NavBar />
+        <MapComponent socketHandler={this.props.socketHandler} />
       </div>
     );
   }

src/routes/SettingsRoute.js

@@ -1,17 +1,19 @@
 import React, { Component } from "react";
 import NavBar from "../components/NavBar";
+import SettingsComponent from "../components/SettingsComponent";
 import "../assets/stylesheets/app.scss";
 
 export default class SettingsRoute extends Component {
   constructor(props) {
     super(props);
-    document.title = "ITR - Settings";
+    document.title = "Settings";
   }
 
   render() {
     return (
       <div className="container">
         <NavBar />
+        <SettingsComponent socketHandler={this.props.socketHandler} />
       </div>
     );
   }

src/routes/SummaryRoute.js

@@ -1,19 +1,19 @@
 import React, { Component } from "react";
 import NavBar from "../components/NavBar";
-import HomeComponent from "../components/HomeComponent";
+import SummaryComponent from "../components/SummaryComponent";
 import "../assets/stylesheets/app.scss";
 
 export default class HomeRoute extends Component {
   constructor(props) {
     super(props);
-    document.title = "ITR - Home";
+    document.title = "Summary";
   }
 
   render() {
     return (
       <div className="container">
         <NavBar />
-        <HomeComponent />
+        <SummaryComponent socketHandler={this.props.socketHandler} />
       </div>
     );
   }