94 lines
2.8 KiB
JavaScript
94 lines
2.8 KiB
JavaScript
import React 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>
|
|
);
|
|
}
|
|
}
|