270 lines
9.2 KiB
JavaScript
270 lines
9.2 KiB
JavaScript
import React, { Component } from "react";
|
||
import BeldenLogo from "../assets/images/belden-white.png";
|
||
import cable from "../utils/Cable";
|
||
import "../assets/stylesheets/map.scss";
|
||
import { NavLink } from "react-router-dom";
|
||
|
||
export default class MapComponent extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
cableList: [],
|
||
selected: "0",
|
||
cable: new cable(
|
||
"...",
|
||
"0",
|
||
"...",
|
||
"...",
|
||
"...",
|
||
"...",
|
||
"...",
|
||
"...",
|
||
"..."
|
||
),
|
||
};
|
||
}
|
||
|
||
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);
|
||
const list = this.browseParse(message);
|
||
this.setState({ cableList: list });
|
||
setTimeout(() => {
|
||
this.select("0");
|
||
this.updateSelection();
|
||
}, 50);
|
||
} catch (error) {
|
||
console.error("Error parsing message from server:", error);
|
||
}
|
||
};
|
||
|
||
updateSelection() {
|
||
const cableList = this.state.cableList;
|
||
for (let i = 0; i < 54; i++) {
|
||
let cable = cableList[i];
|
||
if (cable === undefined) {
|
||
document.getElementById("inner-" + i).style.border =
|
||
"#bdbdbd 4px solid";
|
||
document.getElementById("text-" + i).style.color = "#bdbdbd";
|
||
}
|
||
}
|
||
}
|
||
|
||
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 image = map[i].image;
|
||
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;
|
||
let category = map[i].category;
|
||
let application = map[i].application;
|
||
cableList.push(
|
||
new cable(
|
||
part_number,
|
||
position,
|
||
name,
|
||
brand,
|
||
description,
|
||
short_description,
|
||
image,
|
||
category,
|
||
application
|
||
)
|
||
);
|
||
}
|
||
return cableList;
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this.props.socket.removeEventListener("message", this.handleMessage);
|
||
}
|
||
|
||
renderCircle(id, color) {
|
||
return (
|
||
<div
|
||
className="map-box-circle"
|
||
id={"circle-" + id}
|
||
onClick={() => this.select(id)}
|
||
>
|
||
<div
|
||
className="map-box-circle-inner"
|
||
id={"inner-" + id}
|
||
style={{ border: `${color} 4px solid` }}
|
||
>
|
||
<span id={"text-" + id}>{parseInt(id) + 1}</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
select = (id) => {
|
||
let cable = this.state.cableList[id];
|
||
if (cable === undefined) {
|
||
return;
|
||
}
|
||
|
||
let { selected } = this.state;
|
||
document.getElementById("inner-" + selected).style.border =
|
||
"#004990 4px solid";
|
||
document.getElementById("text-" + selected).style.color = "#004990";
|
||
this.setState({ selected: id });
|
||
document.getElementById("inner-" + id).style.border = "#007cbe 4px solid";
|
||
document.getElementById("text-" + id).style.color = "#007cbe";
|
||
|
||
let cab = this.state.cableList[id];
|
||
this.setState({ cable: cab });
|
||
};
|
||
|
||
render() {
|
||
let { cable } = this.state;
|
||
return (
|
||
<div className="map">
|
||
<div className="map-image">
|
||
<img src={BeldenLogo} alt="Belden" />
|
||
</div>
|
||
<div className="map-fieldContainer">
|
||
<h1 className="map-title">🗺️ Map</h1>
|
||
<div className="map-boxContainer">
|
||
<div className="map-box">
|
||
<div className="map-box-row" id="row-1">
|
||
{this.renderCircle("0", "#004990")}
|
||
{this.renderCircle("1", "#004990")}
|
||
{this.renderCircle("2", "#004990")}
|
||
{this.renderCircle("3", "#004990")}
|
||
{this.renderCircle("4", "#004990")}
|
||
</div>
|
||
<div className="map-box-row" id="row-2">
|
||
{this.renderCircle("5", "#004990")}
|
||
{this.renderCircle("6", "#004990")}
|
||
{this.renderCircle("7", "#004990")}
|
||
{this.renderCircle("8", "#004990")}
|
||
{this.renderCircle("9", "#004990")}
|
||
{this.renderCircle("10", "#004990")}
|
||
</div>
|
||
<div className="map-box-row" id="row-3">
|
||
{this.renderCircle("11", "#004990")}
|
||
{this.renderCircle("12", "#004990")}
|
||
{this.renderCircle("13", "#004990")}
|
||
{this.renderCircle("14", "#004990")}
|
||
{this.renderCircle("15", "#004990")}
|
||
{this.renderCircle("16", "#004990")}
|
||
{this.renderCircle("17", "#004990")}
|
||
</div>
|
||
<div className="map-box-row" id="row-4">
|
||
{this.renderCircle("18", "#004990")}
|
||
{this.renderCircle("19", "#004990")}
|
||
{this.renderCircle("20", "#004990")}
|
||
<div className="map-box-spacer"></div>
|
||
<div className="map-box-spacer"></div>
|
||
{this.renderCircle("21", "#004990")}
|
||
{this.renderCircle("22", "#004990")}
|
||
{this.renderCircle("23", "#004990")}
|
||
</div>
|
||
<div className="map-box-row" id="row-5">
|
||
{this.renderCircle("24", "#004990")}
|
||
{this.renderCircle("25", "#004990")}
|
||
{this.renderCircle("26", "#004990")}
|
||
<div className="map-box-spacer"></div>
|
||
<div className="map-box-spacer"></div>
|
||
<div className="map-box-spacer"></div>
|
||
{this.renderCircle("27", "#004990")}
|
||
{this.renderCircle("28", "#004990")}
|
||
{this.renderCircle("29", "#004990")}
|
||
</div>
|
||
<div className="map-box-row" id="row-6">
|
||
{this.renderCircle("30", "#004990")}
|
||
{this.renderCircle("31", "#004990")}
|
||
{this.renderCircle("32", "#004990")}
|
||
<div className="map-box-spacer"></div>
|
||
<div className="map-box-spacer"></div>
|
||
{this.renderCircle("33", "#004990")}
|
||
{this.renderCircle("34", "#004990")}
|
||
{this.renderCircle("35", "#004990")}
|
||
</div>
|
||
<div className="map-box-row" id="row-7">
|
||
{this.renderCircle("36", "#004990")}
|
||
{this.renderCircle("37", "#004990")}
|
||
{this.renderCircle("38", "#004990")}
|
||
{this.renderCircle("39", "#004990")}
|
||
{this.renderCircle("40", "#004990")}
|
||
{this.renderCircle("41", "#004990")}
|
||
{this.renderCircle("42", "#004990")}
|
||
</div>
|
||
<div className="map-box-row" id="row-8">
|
||
{this.renderCircle("43", "#004990")}
|
||
{this.renderCircle("44", "#004990")}
|
||
{this.renderCircle("45", "#004990")}
|
||
{this.renderCircle("46", "#004990")}
|
||
{this.renderCircle("47", "#004990")}
|
||
{this.renderCircle("48", "#004990")}
|
||
</div>
|
||
<div className="map-box-row" id="row-9">
|
||
{this.renderCircle("49", "#004990")}
|
||
{this.renderCircle("50", "#004990")}
|
||
{this.renderCircle("51", "#004990")}
|
||
{this.renderCircle("52", "#004990")}
|
||
{this.renderCircle("53", "#004990")}
|
||
</div>
|
||
</div>
|
||
<div className="map-details">
|
||
<div className="map-cable-label">
|
||
<img
|
||
className="map-cable-image"
|
||
src={cable.image}
|
||
alt="Cable"
|
||
/>
|
||
<div className="map-cable-name">{cable.name}</div>
|
||
<div className="map-cable-shortdescription">
|
||
{cable.short_description}
|
||
</div>
|
||
|
||
<div className="map-cable-description">{cable.description}</div>
|
||
{cable.category ? (
|
||
<div className="map-cable-category">
|
||
<span
|
||
style={{ color: "black", backgroundColor: "transparent" }}
|
||
>
|
||
Category:{" "}
|
||
</span>
|
||
{cable.category}
|
||
</div>
|
||
) : null}
|
||
<div className="map-cable-brand">
|
||
<span
|
||
style={{ color: "black", backgroundColor: "transparent" }}
|
||
>
|
||
Brand:{" "}
|
||
</span>
|
||
{cable.brand}
|
||
</div>
|
||
<div className="map-cable-position">
|
||
<span
|
||
style={{ color: "black", backgroundColor: "transparent" }}
|
||
>
|
||
Position:{" "}
|
||
</span>
|
||
{parseInt(cable.position) + 1}
|
||
</div>
|
||
</div>
|
||
<NavLink to={"/map/cable/" + cable.position} className="map-cable-moreinfo">
|
||
<span>More Info</span>
|
||
</NavLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|