map done
This commit is contained in:
@ -1,92 +1,8 @@
|
||||
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 cable from "../utils/Cable";
|
||||
import "../assets/stylesheets/browse.scss";
|
||||
|
||||
class cable {
|
||||
constructor(
|
||||
part_number,
|
||||
position,
|
||||
name,
|
||||
brand,
|
||||
description,
|
||||
short_description,
|
||||
image,
|
||||
category,
|
||||
application
|
||||
) {
|
||||
this.part_number = part_number;
|
||||
this.position = position;
|
||||
this.name = name;
|
||||
this.brand = brand;
|
||||
this.image = image ? `http://localhost${image}` : DefaultPartImg;
|
||||
|
||||
this.category = category;
|
||||
this.application = application;
|
||||
this.short_description = short_description;
|
||||
this.description = description;
|
||||
|
||||
if (short_description === undefined) {
|
||||
if (this.description !== undefined) {
|
||||
this.short_description = this.description;
|
||||
} else if (this.application !== undefined) {
|
||||
this.short_description = this.application;
|
||||
} else if (this.category !== undefined) {
|
||||
this.short_description = this.category;
|
||||
} else {
|
||||
this.short_description = "";
|
||||
}
|
||||
}
|
||||
|
||||
if (this.short_description !== undefined) {
|
||||
this.short_description =
|
||||
this.short_description.charAt(0).toUpperCase() +
|
||||
this.short_description.slice(1);
|
||||
if (this.short_description.length > 100) {
|
||||
this.short_description =
|
||||
this.short_description.substring(0, 80) + "...";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
returnDiv() {
|
||||
return (
|
||||
<NavLink className="browse-cable" to={"/browse/cable/" + this.position}>
|
||||
<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-description">
|
||||
<span style={{ color: "#007cbe" }}></span>
|
||||
{this.short_description}
|
||||
</div>
|
||||
{this.category ? (
|
||||
<div className="browse-cable-category">
|
||||
<span style={{ color: "black", backgroundColor: "transparent" }}>
|
||||
Category:{" "}
|
||||
</span>
|
||||
{this.category}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="browse-cable-brand">
|
||||
<span style={{ color: "black", backgroundColor: "transparent" }}>
|
||||
Brand:{" "}
|
||||
</span>
|
||||
{this.brand}
|
||||
</div>
|
||||
<div className="browse-cable-position">
|
||||
<span style={{ color: "black", backgroundColor: "transparent" }}>
|
||||
Position:{" "}
|
||||
</span>
|
||||
{this.position}
|
||||
</div>
|
||||
</div>
|
||||
<span className="browse-cable-arrow">{">"}</span>
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default class BrowseComponent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -268,9 +268,15 @@ export default class CableDetailComponent extends Component {
|
||||
</div>
|
||||
<div className="cable-fieldContainer">
|
||||
<div className="cable-actions">
|
||||
<NavLink to="/browse" className="cable-actions-back">
|
||||
<span>⬅️ Back</span>
|
||||
</NavLink>
|
||||
{window.location.href.includes("browse") ? (
|
||||
<NavLink to="/browse" className="cable-actions-back">
|
||||
<span>⬅️ Back</span>
|
||||
</NavLink>
|
||||
) : (
|
||||
<NavLink to="/map" className="cable-actions-back">
|
||||
<span>⬅️ Back</span>
|
||||
</NavLink>
|
||||
)}
|
||||
</div>
|
||||
{cableDetails ? (
|
||||
<div className="cable-main">
|
||||
@ -310,7 +316,7 @@ export default class CableDetailComponent extends Component {
|
||||
>
|
||||
Position:{" "}
|
||||
</span>
|
||||
{cableDetails.position}
|
||||
{parseInt(cableDetails.position) + 1}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,20 +1,133 @@
|
||||
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={id}>
|
||||
<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` }}
|
||||
></div>
|
||||
>
|
||||
<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">
|
||||
@ -25,86 +138,129 @@ export default class MapComponent extends Component {
|
||||
<div className="map-boxContainer">
|
||||
<div className="map-box">
|
||||
<div className="map-box-row" id="row-1">
|
||||
{this.renderCircle("circle-1", "#004990")}
|
||||
{this.renderCircle("circle-2", "#004990")}
|
||||
{this.renderCircle("circle-3", "#004990")}
|
||||
{this.renderCircle("circle-4", "#004990")}
|
||||
{this.renderCircle("circle-5", "#004990")}
|
||||
{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("circle-1", "#004990")}
|
||||
{this.renderCircle("circle-2", "#004990")}
|
||||
{this.renderCircle("circle-3", "#004990")}
|
||||
{this.renderCircle("circle-4", "#004990")}
|
||||
{this.renderCircle("circle-5", "#004990")}
|
||||
{this.renderCircle("circle-6", "#004990")}
|
||||
{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("circle-1", "#004990")}
|
||||
{this.renderCircle("circle-2", "#004990")}
|
||||
{this.renderCircle("circle-3", "#004990")}
|
||||
{this.renderCircle("circle-4", "#004990")}
|
||||
{this.renderCircle("circle-5", "#004990")}
|
||||
{this.renderCircle("circle-6", "#004990")}
|
||||
{this.renderCircle("circle-7", "#004990")}
|
||||
{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("circle-1", "#004990")}
|
||||
{this.renderCircle("circle-2", "#004990")}
|
||||
{this.renderCircle("circle-3", "#004990")}
|
||||
{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("circle-4", "#004990")}
|
||||
{this.renderCircle("circle-5", "#004990")}
|
||||
{this.renderCircle("circle-6", "#004990")}
|
||||
{this.renderCircle("21", "#004990")}
|
||||
{this.renderCircle("22", "#004990")}
|
||||
{this.renderCircle("23", "#004990")}
|
||||
</div>
|
||||
<div className="map-box-row" id="row-5">
|
||||
{this.renderCircle("circle-1", "#004990")}
|
||||
{this.renderCircle("circle-2", "#004990")}
|
||||
{this.renderCircle("circle-3", "#004990")}
|
||||
{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("circle-4", "#004990")}
|
||||
{this.renderCircle("circle-5", "#004990")}
|
||||
{this.renderCircle("circle-6", "#004990")}
|
||||
{this.renderCircle("27", "#004990")}
|
||||
{this.renderCircle("28", "#004990")}
|
||||
{this.renderCircle("29", "#004990")}
|
||||
</div>
|
||||
<div className="map-box-row" id="row-6">
|
||||
{this.renderCircle("circle-1", "#004990")}
|
||||
{this.renderCircle("circle-2", "#004990")}
|
||||
{this.renderCircle("circle-3", "#004990")}
|
||||
{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("circle-4", "#004990")}
|
||||
{this.renderCircle("circle-5", "#004990")}
|
||||
{this.renderCircle("circle-6", "#004990")}
|
||||
{this.renderCircle("33", "#004990")}
|
||||
{this.renderCircle("34", "#004990")}
|
||||
{this.renderCircle("35", "#004990")}
|
||||
</div>
|
||||
<div className="map-box-row" id="row-7">
|
||||
{this.renderCircle("circle-1", "#004990")}
|
||||
{this.renderCircle("circle-2", "#004990")}
|
||||
{this.renderCircle("circle-3", "#004990")}
|
||||
{this.renderCircle("circle-4", "#004990")}
|
||||
{this.renderCircle("circle-5", "#004990")}
|
||||
{this.renderCircle("circle-6", "#004990")}
|
||||
{this.renderCircle("circle-7", "#004990")}
|
||||
{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("circle-1", "#004990")}
|
||||
{this.renderCircle("circle-2", "#004990")}
|
||||
{this.renderCircle("circle-3", "#004990")}
|
||||
{this.renderCircle("circle-4", "#004990")}
|
||||
{this.renderCircle("circle-5", "#004990")}
|
||||
{this.renderCircle("circle-6", "#004990")}
|
||||
{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("circle-1", "#004990")}
|
||||
{this.renderCircle("circle-2", "#004990")}
|
||||
{this.renderCircle("circle-3", "#004990")}
|
||||
{this.renderCircle("circle-4", "#004990")}
|
||||
{this.renderCircle("circle-5", "#004990")}
|
||||
{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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user