From 107858c363e8f8e4653f3bbd322a2e9c59788d5c Mon Sep 17 00:00:00 2001 From: Scarlett Date: Sun, 12 May 2024 18:00:01 -0400 Subject: [PATCH] map done --- src/assets/stylesheets/browse.scss | 2 +- src/assets/stylesheets/map.scss | 130 +++++++++++- src/components/BrowseComponent.js | 86 +------- src/components/CableDetailComponent.js | 14 +- src/components/MapComponent.js | 270 +++++++++++++++++++------ src/index.js | 5 + src/routes/MapRoute.js | 2 +- src/utils/Cable.js | 93 +++++++++ 8 files changed, 452 insertions(+), 150 deletions(-) create mode 100644 src/utils/Cable.js diff --git a/src/assets/stylesheets/browse.scss b/src/assets/stylesheets/browse.scss index 9385eda..2b0313e 100644 --- a/src/assets/stylesheets/browse.scss +++ b/src/assets/stylesheets/browse.scss @@ -150,4 +150,4 @@ $white: #fff; width: auto; height: auto; font-family: "Gotham Medium"; -} +} \ No newline at end of file diff --git a/src/assets/stylesheets/map.scss b/src/assets/stylesheets/map.scss index 3c520db..7b13cce 100644 --- a/src/assets/stylesheets/map.scss +++ b/src/assets/stylesheets/map.scss @@ -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; } \ No newline at end of file diff --git a/src/components/BrowseComponent.js b/src/components/BrowseComponent.js index 13b1c38..69bfa07 100644 --- a/src/components/BrowseComponent.js +++ b/src/components/BrowseComponent.js @@ -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 ( - - Cable -
-
{this.name}
-
- - {this.short_description} -
- {this.category ? ( -
- - Category:{" "} - - {this.category} -
- ) : null} -
- - Brand:{" "} - - {this.brand} -
-
- - Position:{" "} - - {this.position} -
-
- {">"} - - ); - } -} - export default class BrowseComponent extends Component { constructor(props) { super(props); diff --git a/src/components/CableDetailComponent.js b/src/components/CableDetailComponent.js index 891a2ec..a9a9ff1 100644 --- a/src/components/CableDetailComponent.js +++ b/src/components/CableDetailComponent.js @@ -268,9 +268,15 @@ export default class CableDetailComponent extends Component {
- - ⬅️ Back - + {window.location.href.includes("browse") ? ( + + ⬅️ Back + + ) : ( + + ⬅️ Back + + )}
{cableDetails ? (
@@ -310,7 +316,7 @@ export default class CableDetailComponent extends Component { > Position:{" "} - {cableDetails.position} + {parseInt(cableDetails.position) + 1}
diff --git a/src/components/MapComponent.js b/src/components/MapComponent.js index 9201629..74a403c 100644 --- a/src/components/MapComponent.js +++ b/src/components/MapComponent.js @@ -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 ( -
+
this.select(id)} + >
+ > + {parseInt(id) + 1} +
); } + 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 (
@@ -25,86 +138,129 @@ export default class MapComponent extends Component {
- {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")}
- {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")}
- {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")}
- {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")}
- {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")}
- {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")}
- {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")}
- {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")}
- {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")}
- {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")}
- {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")}
- {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")}
-
+
+
+ Cable +
{cable.name}
+
+ {cable.short_description} +
+ +
{cable.description}
+ {cable.category ? ( +
+ + Category:{" "} + + {cable.category} +
+ ) : null} +
+ + Brand:{" "} + + {cable.brand} +
+
+ + Position:{" "} + + {parseInt(cable.position) + 1} +
+
+ + More Info + +
diff --git a/src/index.js b/src/index.js index da2247e..1ceb426 100644 --- a/src/index.js +++ b/src/index.js @@ -54,6 +54,11 @@ const init = () => { element: , // errorElement: , }, + { + path: "/map/cable/:cablePos", + element: , + // errorElement: , + }, ]); root.render( diff --git a/src/routes/MapRoute.js b/src/routes/MapRoute.js index aa62a57..57525e8 100644 --- a/src/routes/MapRoute.js +++ b/src/routes/MapRoute.js @@ -13,7 +13,7 @@ export default class MapRoute extends Component { return (
- +
); } diff --git a/src/utils/Cable.js b/src/utils/Cable.js new file mode 100644 index 0000000..8c1cc15 --- /dev/null +++ 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 ( + + Cable +
+
{this.name}
+
+ + {this.short_description} +
+ {this.category ? ( +
+ + Category:{" "} + + {this.category} +
+ ) : null} +
+ + Brand:{" "} + + {this.brand} +
+
+ + Position:{" "} + + {parseInt(this.position) + 1} +
+
+ {">"} + + ); + } +}