map done

2024-05-12 18:00:01 -04:00
parent 67cb5f82a9
commit 107858c363
8 changed files with 452 additions and 150 deletions
--- a/src/utils/Cable.js
+++ b/src/utils/Cable.js
@ -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>
+    );
+  }
+}