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