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

28
src/assets/classes/SocketHandler.js
View File

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

17
src/assets/stylesheets/browse.scss
View File

@@ -10,9 +10,8 @@ $white: #fff;
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 26%,
rgb(255 255 255) 39%,
rgb(255 255 255 / 100%) 100%
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
);
background-color: transparent;
overflow-y: visible;
@@ -48,6 +47,7 @@ $white: #fff;
flex-direction: column;
overflow: hidden;
background-color: transparent;
margin-bottom: 50px;
}
.browse-cable {
@@ -61,7 +61,15 @@ $white: #fff;
border-radius: 20px;
border: 1px solid $gray;
padding: 25px;
margin-bottom: 10px;
margin-bottom: 5px;
margin-top: 5px;
transition: all 0.3s ease-in-out;
cursor: pointer;
text-decoration: none;
}
.browse-cable:hover {
transform: translate3d(-5px, -5px, 0);
}
.browse-cable-image {
@@ -69,7 +77,6 @@ $white: #fff;
height: 100%;
background-color: transparent;
margin-right: 10px;
}
.browse-cable-label {

50
src/assets/stylesheets/cabledetail.scss Normal file
View File

@@ -0,0 +1,50 @@
$dark-blue: #002554;
$medium-blue: #004990;
$light-blue: #007cbe;
$hover-blue: #25b3ff;
$black: #000;
$gray: #bdbdbd;
$white: #fff;
.cable {
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
);
background-color: transparent;
overflow-y: visible;
width: calc(100% - 300px);
height: auto;
display: block;
justify-content: center;
align-items: center;
}
.cable-image {
width: 100%;
height: 200px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.cable-image img {
width: auto;
height: 200px;
background-color: transparent;
}
.cable-fieldContainer {
width: 100%;
min-height: calc(100% - 200px);
height: auto;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
overflow: hidden;
background-color: transparent;
}

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

17
src/index.js
View File

@@ -4,8 +4,8 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
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";
import CableDetailRoute from "./routes/CableDetailRoute";
// Root
const root = ReactDOM.createRoot(document.getElementById("root"));
@@ -21,27 +21,30 @@ socket.addEventListener("open", function (event) {
// Initialize the app
const init = () => {
const socketHandler = new SocketHandler(socket);
const router = createBrowserRouter([
{
path: "/",
element: <SummaryRoute socketHandler={socketHandler}></SummaryRoute>,
element: <SummaryRoute socket={socket}></SummaryRoute>,
// errorElement: <ErrorRoute></ErrorRoute>,
},
{
path: "/browse",
element: <BrowseRoute socketHandler={socketHandler}></BrowseRoute>,
element: <BrowseRoute socket={socket}></BrowseRoute>,
// errorElement: <ErrorRoute></ErrorRoute>,
},
{
path: "/settings",
element: <SettingsRoute socketHandler={socketHandler}></SettingsRoute>,
element: <SettingsRoute socket={socket}></SettingsRoute>,
// errorElement: <ErrorRoute></ErrorRoute>,
},
{
path: "/map",
element: <MapRoute socketHandler={socketHandler}></MapRoute>,
element: <MapRoute socket={socket}></MapRoute>,
// errorElement: <ErrorRoute></ErrorRoute>,
},
{
path: "/cable/:cableId",
element: <CableDetailRoute socket={socket} />,
// errorElement: <ErrorRoute></ErrorRoute>,
},
]);

2
src/routes/BrowseRoute.js
View File

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

20
src/routes/CableDetailRoute.js Normal file
View File

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

2
src/routes/MapRoute.js
View File

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

2
src/routes/SettingsRoute.js
View File

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

2
src/routes/SummaryRoute.js
View File

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