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

2024-03-26 23:32:01 -04:00
parent 81d13a70db
commit 0ca513e976
25 changed files with 1160 additions and 108 deletions
--- a/src/components/BrowseComponent.js
+++ b/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>
+    );
+  }
+}