Jukebox/jukebox-web
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Detail base

Browse Source
This commit is contained in:
scarlett kadan
2024-03-27 12:08:19 -04:00
parent 0ca513e976
commit 5b03f1c65a
12 changed files with 146 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/BrowseComponent.js
View File

@ -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(
'{"type":"cable_map","call":"request","data":{}}'
);
this.props.socketHandler.socket.addEventListener(
"message",
this.handleMessage
);
this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
this.props.socket.addEventListener("message", this.handleMessage);
}
handleMessage = (event) => {
@ -102,10 +97,7 @@ export default class BrowseComponent extends Component {
}
componentWillUnmount() {
this.props.socketHandler.socket.removeEventListener(
"message",
this.handleMessage
);
this.props.socket.removeEventListener("message", this.handleMessage);
}
render() {

41
src/components/CableDetailComponent.js Normal file
View File

@ -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>
);
}
}

3
src/components/NavBar.js
View File

@ -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";