map done
This commit is contained in:
parent
67cb5f82a9
commit
107858c363
@ -150,4 +150,4 @@ $white: #fff;
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-family: "Gotham Medium";
|
||||
}
|
||||
}
|
||||
@ -97,6 +97,7 @@ $white: #fff;
|
||||
|
||||
.map-details {
|
||||
width: 38%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.map-box-row {
|
||||
@ -108,7 +109,6 @@ $white: #fff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@ -116,7 +116,11 @@ $white: #fff;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background-color: $white;
|
||||
background: linear-gradient(
|
||||
15deg,
|
||||
rgb(223, 223, 223) 0%,
|
||||
rgb(255, 255, 255) 100%
|
||||
);
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
display: flex;
|
||||
@ -138,6 +142,7 @@ $white: #fff;
|
||||
background-color: transparent;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0);
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.map-box-circle-inner {
|
||||
@ -148,4 +153,125 @@ $white: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.map-box-circle-inner span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: $dark-blue;
|
||||
margin-top: 2px;
|
||||
font-family: "Gotham Bold";
|
||||
}
|
||||
|
||||
.map-cable-image {
|
||||
width: auto;
|
||||
height: 35%;
|
||||
aspect-ratio: 1/1;
|
||||
background-color: transparent;
|
||||
border: $gray solid 1px;
|
||||
border-radius: 20px;
|
||||
background-color: white;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
margin-bottom: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.map-cable-label {
|
||||
width: 90%;
|
||||
height: 80%;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-cable-name {
|
||||
background-color: transparent;
|
||||
font-size: 28px;
|
||||
color: $medium-blue;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
font-family: "Gotham Bold";
|
||||
margin-bottom: 3px;;
|
||||
}
|
||||
|
||||
.map-cable-shortdescription {
|
||||
background-color: transparent;
|
||||
font-size: 18px;
|
||||
color: $medium-blue;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
font-family: "Gotham Medium";
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.map-cable-description {
|
||||
background-color: transparent;
|
||||
font-size: 16px;
|
||||
color: $black;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
font-family: "Gotham Medium";
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.map-cable-brand,
|
||||
.map-cable-short,
|
||||
.map-cable-position,
|
||||
.map-cable-category {
|
||||
background-color: transparent;
|
||||
font-size: 15px;
|
||||
margin-bottom: 5px;
|
||||
color: $light-blue;
|
||||
color: $light-blue;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
font-family: "Gotham Medium";
|
||||
}
|
||||
|
||||
.map-cable-moreinfo {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(
|
||||
15deg,
|
||||
rgb(223, 223, 223) 0%,
|
||||
rgb(255, 255, 255) 100%
|
||||
);
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
|
||||
cursor: pointer;
|
||||
margin-bottom: 40px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.map-cable-moreinfo:hover {
|
||||
transform: translate3d(-5px, -5px, 0);
|
||||
}
|
||||
|
||||
.map-cable-moreinfo span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 20px;
|
||||
color: $medium-blue;
|
||||
font-family: "Gotham Bold";
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -54,6 +54,11 @@ const init = () => {
|
||||
element: <CableDetailRoute socket={socket} />,
|
||||
// errorElement: <ErrorRoute></ErrorRoute>,
|
||||
},
|
||||
{
|
||||
path: "/map/cable/:cablePos",
|
||||
element: <CableDetailRoute socket={socket} />,
|
||||
// errorElement: <ErrorRoute></ErrorRoute>,
|
||||
},
|
||||
]);
|
||||
|
||||
root.render(
|
||||
|
||||
@ -13,7 +13,7 @@ export default class MapRoute extends Component {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<MapComponent socketHandler={this.props.socket} />
|
||||
<MapComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
93
src/utils/Cable.js
Normal file
93
src/utils/Cable.js
Normal file
@ -0,0 +1,93 @@
|
||||
import React, { Component } from "react";
|
||||
import DefaultPartImg from "../assets/images/part.png";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import "../assets/stylesheets/browse.scss";
|
||||
|
||||
export default 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 > 80) {
|
||||
this.short_description =
|
||||
this.short_description.substring(0, 80) + "...";
|
||||
}
|
||||
}
|
||||
|
||||
if (this.description !== undefined) {
|
||||
if (this.description.length > 200) {
|
||||
this.description = this.description.substring(0, 200) + "...";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
{parseInt(this.position) + 1}
|
||||
</div>
|
||||
</div>
|
||||
<span className="browse-cable-arrow">{">"}</span>
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user