From 6656e3ba43efe71608da94f091a4b6cc4fb55fae Mon Sep 17 00:00:00 2001 From: Scarlett Date: Wed, 8 May 2024 17:01:33 -0400 Subject: [PATCH] getcable --- src/assets/stylesheets/browse.scss | 1 + src/assets/stylesheets/cabledetail.scss | 142 +++++++++++++++++++- src/assets/stylesheets/map.scss | 40 +++--- src/assets/stylesheets/settings.scss | 40 +++--- src/assets/stylesheets/summary.scss | 58 +++++--- src/components/BrowseComponent.js | 20 +-- src/components/CableDetailComponent.js | 171 ++++++++++++++++-------- src/components/MapComponent.js | 7 +- src/components/SettingsComponent.js | 4 +- src/components/SummaryComponent.js | 19 +-- src/index.js | 2 +- src/routes/CableDetailRoute.js | 2 +- 12 files changed, 380 insertions(+), 126 deletions(-) diff --git a/src/assets/stylesheets/browse.scss b/src/assets/stylesheets/browse.scss index 2f56efe..a9490a9 100644 --- a/src/assets/stylesheets/browse.scss +++ b/src/assets/stylesheets/browse.scss @@ -70,6 +70,7 @@ $white: #fff; transition: all 0.3s ease-in-out; cursor: pointer; text-decoration: none; + background-color: transparent; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } diff --git a/src/assets/stylesheets/cabledetail.scss b/src/assets/stylesheets/cabledetail.scss index 0bb0126..4508d3b 100644 --- a/src/assets/stylesheets/cabledetail.scss +++ b/src/assets/stylesheets/cabledetail.scss @@ -6,7 +6,8 @@ $black: #000; $gray: #bdbdbd; $white: #fff; -.cable { +.cable, +.loading { background: linear-gradient( 180deg, rgb(0 37 84 / 100%) 0%, @@ -47,4 +48,141 @@ $white: #fff; flex-direction: column; overflow: hidden; background-color: transparent; -} \ No newline at end of file +} + +.cable-main { + width: 80%; + height: 200px; + background: linear-gradient( + -30deg, + rgb(187, 208, 236) 0%, + rgba(255, 255, 255, 1) 100% + ); + display: flex; + align-items: center; + justify-content: flex-start; + flex-direction: row; + border-radius: 20px; + border: 1px solid $gray; + padding: 25px; + margin-bottom: 5px; + margin-top: 5px; + transition: all 0.3s ease-in-out; + text-decoration: none; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +} + +.cable-actions { + width: calc(80% + 50px); + height: 60px; + background-color: transparent; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-bottom: 5px; + margin-top: 5px; + transition: all 0.3s ease-in-out; + text-decoration: none; + overflow: visible; +} + +.cable-actions-button, .cable-actions-back { + width: 32%; + height: 100%; + background: linear-gradient( + -30deg, + rgb(187, 208, 236) 0%, + rgba(255, 255, 255, 1) 100% + ); + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + border-radius: 20px; + border: 1px solid $gray; + transition: all 0.3s ease-in-out; + text-decoration: none; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + cursor: pointer; + overflow: visible; +} + +.cable-actions-button:hover, .cable-main:hover, .cable-actions-back:hover { + transform: translate3d(-5px, -5px, 0); +} + +.cable-actions-back { + width: auto; + background: linear-gradient( + -30deg, + rgb(187, 194, 236) 0%, + rgba(255, 255, 255, 1) 100% + ); +} + +.cable-actions-button span, .cable-actions-back span { + text-align: center; + font-family: "Gotham Medium"; + font-size: 20px; + text-decoration: none; + color: $medium-blue; + width: auto; + height: auto; + margin: 20px; + background-color: transparent; +} + +.cable-main-image { + aspect-ratio: 1/1; + width: auto; + height: 100%; + object-fit: cover; + background-color: white; + margin-right: 25px; + border: $gray solid 1px; + border-radius: 10px; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +} + +.cable-main-label { + width: 60%; + height: 100%; + background-color: transparent; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +.cable-main-name { + background-color: transparent; + font-size: 32px; + color: $medium-blue; + width: auto; + height: auto; + font-family: "Gotham Bold"; + margin-bottom: 5px; +} + +.cable-main-description { + background-color: transparent; + font-size: 18px; + color: $medium-blue; + width: auto; + height: auto; + font-family: "Gotham Medium"; + margin-bottom: 30px; +} + +.cable-main-brand, +.cable-main-short, +.cable-main-position { + background-color: transparent; + font-size: 16px; + color: $light-blue; + color: $light-blue; + width: auto; + height: auto; + font-family: "Gotham Medium"; +} diff --git a/src/assets/stylesheets/map.scss b/src/assets/stylesheets/map.scss index 3042472..806b24c 100644 --- a/src/assets/stylesheets/map.scss +++ b/src/assets/stylesheets/map.scss @@ -10,34 +10,42 @@ $white: #fff; background: linear-gradient( 180deg, rgb(0 37 84 / 100%) 0%, - rgb(0 124 190 / 100%) 26%, - rgb(255 255 255) 39%, - rgb(255 255 255 / 100%) 100% + rgb(0 124 190 / 100%) 50%, + rgb(255, 255, 255) 100% ); background-color: transparent; + overflow-y: visible; width: calc(100% - 300px); height: auto; - overflow-y: visible; - display: flex; - align-items: center; + display: block; justify-content: center; - flex-direction: column; - overflow: visible; + align-items: center; } .map-image { - width: auto; - height: 250px; + width: 100%; + height: 200px; background: transparent; + display: flex; + align-items: center; + justify-content: center; +} + +.map-image img { + width: auto; + height: 200px; + background-color: transparent; } .map-fieldContainer { width: 100%; - min-height: calc(100% - 250px); + min-height: calc(100% - 200px); height: auto; - background-color: transparent; display: flex; - align-items: flex-start; - justify-content: center; - flex-wrap: wrap; -} + align-items: center; + justify-content: flex-start; + flex-direction: column; + overflow: hidden; + background-color: transparent; + margin-bottom: 50px; +} \ No newline at end of file diff --git a/src/assets/stylesheets/settings.scss b/src/assets/stylesheets/settings.scss index ff20bde..6a93986 100644 --- a/src/assets/stylesheets/settings.scss +++ b/src/assets/stylesheets/settings.scss @@ -10,34 +10,42 @@ $white: #fff; background: linear-gradient( 180deg, rgb(0 37 84 / 100%) 0%, - rgb(0 124 190 / 100%) 26%, - rgb(255 255 255) 39%, - rgb(255 255 255 / 100%) 100% + rgb(0 124 190 / 100%) 50%, + rgb(255, 255, 255) 100% ); background-color: transparent; + overflow-y: visible; width: calc(100% - 300px); height: auto; - overflow-y: visible; - display: flex; - align-items: center; + display: block; justify-content: center; - flex-direction: column; - overflow: visible; + align-items: center; } .settings-image { - width: auto; - height: 250px; + width: 100%; + height: 200px; background: transparent; + display: flex; + align-items: center; + justify-content: center; +} + +.settings-image img { + width: auto; + height: 200px; + background-color: transparent; } .settings-fieldContainer { width: 100%; - min-height: calc(100% - 250px); + min-height: calc(100% - 200px); height: auto; - background-color: transparent; display: flex; - align-items: flex-start; - justify-content: center; - flex-wrap: wrap; -} + align-items: center; + justify-content: flex-start; + flex-direction: column; + overflow: hidden; + background-color: transparent; + margin-bottom: 50px; +} \ No newline at end of file diff --git a/src/assets/stylesheets/summary.scss b/src/assets/stylesheets/summary.scss index 413c140..deb9301 100644 --- a/src/assets/stylesheets/summary.scss +++ b/src/assets/stylesheets/summary.scss @@ -10,34 +10,62 @@ $white: #fff; background: linear-gradient( 180deg, rgb(0 37 84 / 100%) 0%, - rgb(0 124 190 / 100%) 26%, - rgb(255 255 255) 39%, - rgb(255 255 255 / 100%) 100% + rgb(0 124 190 / 100%) 50%, + rgb(255, 255, 255) 100% ); background-color: transparent; + overflow-y: visible; width: calc(100% - 300px); height: auto; - overflow-y: visible; - display: flex; - align-items: center; + display: block; justify-content: center; - flex-direction: column; - overflow: visible; + align-items: center; } .summary-image { - width: auto; - height: 250px; + width: 100%; + height: 200px; background: transparent; + display: flex; + align-items: center; + justify-content: center; +} + +.summary-image img { + width: auto; + height: 200px; + background-color: transparent; } .summary-fieldContainer { width: 100%; - min-height: calc(100% - 250px); + min-height: calc(100% - 200px); height: auto; - background-color: transparent; display: flex; - align-items: flex-start; - justify-content: center; - flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + flex-direction: column; + overflow: hidden; + background-color: transparent; + margin-bottom: 50px; } + +.summary-fieldContainer-pp { + width: 25%; + height: 300px; + border-radius: 20px; + text-align: center; + padding: 10px; +} + +.summary-fieldContainer-graph { + width: 25%; +} + +.summary-fieldContainer-dashboard { + width: 100%; + height: 300px; + border-radius: 20px; + text-align: center; + padding: 10px; +} \ No newline at end of file diff --git a/src/components/BrowseComponent.js b/src/components/BrowseComponent.js index b443b6f..cb98732 100644 --- a/src/components/BrowseComponent.js +++ b/src/components/BrowseComponent.js @@ -19,23 +19,23 @@ class cable { this.name = name; this.brand = brand; this.description = description; - this.short_description = short_description; - if (image === undefined) { - this.image = DefaultPartImg; - } else { - this.image = image; - } + this.short_description = short_description + ? short_description + : description; + this.image = image + ? `http://localhost${image}` + : DefaultPartImg; } returnDiv() { return ( - + Cable
{this.name}
- {this.description} + {this.short_description}
@@ -85,6 +85,7 @@ export default class BrowseComponent extends Component { 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; @@ -97,7 +98,8 @@ export default class BrowseComponent extends Component { name, brand, description, - short_description + short_description, + image ) ); } diff --git a/src/components/CableDetailComponent.js b/src/components/CableDetailComponent.js index eecfc5a..cdf1adc 100644 --- a/src/components/CableDetailComponent.js +++ b/src/components/CableDetailComponent.js @@ -4,82 +4,143 @@ import DefaultPartImg from "../assets/images/part.png"; import { NavLink } from "react-router-dom"; import "../assets/stylesheets/cabledetail.scss"; -class cable { - constructor( - part_number, - position, - name, - brand, - description, - short_description, - image - ) { - this.part_number = part_number; - this.position = position; - this.name = name; - this.brand = brand; - this.description = description; - this.short_description = short_description; - if (image === undefined) { - this.image = DefaultPartImg; - } else { - this.image = image; - } - } +class Cable { + constructor(cableData) { + this.partnum = cableData.partnum; + this.id = cableData.id; + this.brand = cableData.brand; + this.position = cableData.position; + this.description = cableData.description + ? cableData.image + : "No description available."; + this.image = cableData.image + ? `http://localhost${cableData.image}` + : DefaultPartImg; + this.dynamicProps = {}; - returnDiv() { - return ( - - Cable -
-
{this.name}
-
- Brand: - {this.brand} -
-
- About: - {this.description} -
-
- {">"} - - ); + Object.keys(cableData).forEach((key) => { + if (!["partnum", "id", "brand", "position", "image"].includes(key)) { + this.dynamicProps[key] = cableData[key]; + } + }); } } export default class CableDetailComponent extends Component { constructor(props) { super(props); + this.state = { + cableDetails: null, + }; } componentDidMount() { - // this.props.socket.send('{"type":"cable_map","call":"request","data":{}}'); - // this.props.socket.addEventListener("message", this.handleMessage); - const id = this.props.cableId; - console.log("ID: ", id); + const cablePos = window.location.href.split("/").pop(); + this.props.socket.send( + `{"type":"cable_details","call":"request","data":{"position":["${cablePos}"]}}` + ); + this.props.socket.addEventListener("message", this.handleMessage); } - // handleMessage = (event) => { - // try { - // console.log("Message from server", event.data); - // const message = JSON.parse(event.data); - // } catch (error) { - // console.error("Error parsing message from server:", error); - // } - // }; + handleMessage = (event) => { + try { + console.log("Message from server", event.data); + const message = JSON.parse(event.data); + const cableDetails = new Cable(message.data.cables[0]); + this.setState({ cableDetails }); + } catch (error) { + console.error("Error parsing message from server:", error); + } + }; - // componentWillUnmount() { - // this.props.socket.removeEventListener("message", this.handleMessage); - // } + componentWillUnmount() { + this.props.socket.removeEventListener("message", this.handleMessage); + } + + renderTables() { + const { cableDetails } = this.state; + if (!cableDetails) return null; + + return Object.keys(cableDetails.dynamicProps).map((key) => ( +
+

{key.replace(/([A-Z])/g, " $1").trim()}

+ + + {Object.entries(cableDetails.dynamicProps[key]).map( + ([propKey, value]) => ( + + + + + ) + )} + +
{propKey}{Array.isArray(value) ? value.join(", ") : value}
+
+ )); + } render() { + const { cableDetails } = this.state; + return (
Belden
+
+ + ⬅️ Back + +
+ {cableDetails ? ( +
+ Cable +
+
{cableDetails.partnum}
+
+ {cableDetails.description} +
+
+ + Brand:{" "} + + {cableDetails.brand} +
+
+ + Position:{" "} + + {cableDetails.position} +
+
+
+ ) : ( +
+ )} +
+
+ ➤ Datasheet + ✏️ +
+
+ ➤ Show + 💡 +
+
+ ➤ Dispense + 🤲 +
+
); diff --git a/src/components/MapComponent.js b/src/components/MapComponent.js index 1b4a3e3..d82616f 100644 --- a/src/components/MapComponent.js +++ b/src/components/MapComponent.js @@ -6,8 +6,11 @@ export default class MapComponent extends Component { render() { return (
- Belden -
+
+ Belden +
+
+
); } diff --git a/src/components/SettingsComponent.js b/src/components/SettingsComponent.js index d5df37d..e8d4d86 100644 --- a/src/components/SettingsComponent.js +++ b/src/components/SettingsComponent.js @@ -6,7 +6,9 @@ export default class SettingsComponent extends Component { render() { return (
- Belden +
+ Belden +
); diff --git a/src/components/SummaryComponent.js b/src/components/SummaryComponent.js index 2415855..66f2eea 100644 --- a/src/components/SummaryComponent.js +++ b/src/components/SummaryComponent.js @@ -6,15 +6,18 @@ export default class SummaryComponent extends Component { render() { return (
- Belden -
+
+ Belden +
+
+

hello this is from inside a pp hello this is from inside a pp hello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pp

+ +
+ +
+ +
{/* */} -
); } diff --git a/src/index.js b/src/index.js index 77d5cde..37da526 100644 --- a/src/index.js +++ b/src/index.js @@ -43,7 +43,7 @@ const init = () => { // errorElement: , }, { - path: "/cable/:cableId", + path: "/browse/cable/:cablePos", element: , // errorElement: , }, diff --git a/src/routes/CableDetailRoute.js b/src/routes/CableDetailRoute.js index 7c8b8dc..acdf565 100644 --- a/src/routes/CableDetailRoute.js +++ b/src/routes/CableDetailRoute.js @@ -13,7 +13,7 @@ export default class CableDetailRoute extends Component { return (
- +
); }