From 6a5aecdc4d38bf9aff2be48a2b2d24fbb4feb1a5 Mon Sep 17 00:00:00 2001 From: Scarlett Date: Wed, 8 May 2024 21:57:40 -0400 Subject: [PATCH 1/3] test tables --- src/assets/stylesheets/cabledetail.scss | 110 ++++++++++++++++++-- src/components/BrowseComponent.js | 17 ++-- src/components/CableDetailComponent.js | 129 ++++++++++++++++++++---- src/index.js | 6 +- 4 files changed, 227 insertions(+), 35 deletions(-) diff --git a/src/assets/stylesheets/cabledetail.scss b/src/assets/stylesheets/cabledetail.scss index 4508d3b..4eb4779 100644 --- a/src/assets/stylesheets/cabledetail.scss +++ b/src/assets/stylesheets/cabledetail.scss @@ -6,8 +6,7 @@ $black: #000; $gray: #bdbdbd; $white: #fff; -.cable, -.loading { +.cable { background: linear-gradient( 180deg, rgb(0 37 84 / 100%) 0%, @@ -80,14 +79,16 @@ $white: #fff; flex-direction: row; align-items: center; justify-content: space-between; - margin-bottom: 5px; + margin-bottom: 25px; margin-top: 5px; transition: all 0.3s ease-in-out; text-decoration: none; overflow: visible; } -.cable-actions-button, .cable-actions-back { +.cable-actions-button, +.cable-actions-back, +.cable-tables-div { width: 32%; height: 100%; background: linear-gradient( @@ -108,7 +109,10 @@ $white: #fff; overflow: visible; } -.cable-actions-button:hover, .cable-main:hover, .cable-actions-back:hover { +.cable-actions-button:hover, +.cable-main:hover, +.cable-actions-back:hover, +.cable-tables-div:hover { transform: translate3d(-5px, -5px, 0); } @@ -121,7 +125,8 @@ $white: #fff; ); } -.cable-actions-button span, .cable-actions-back span { +.cable-actions-button span, +.cable-actions-back span { text-align: center; font-family: "Gotham Medium"; font-size: 20px; @@ -186,3 +191,96 @@ $white: #fff; height: auto; font-family: "Gotham Medium"; } + +.cable-tables { + width: calc(80% + 50px); + height: auto; + background-color: transparent; + display:flex; + flex-wrap: wrap; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-bottom: 50px; + margin-top: 5px; + text-decoration: none; + overflow: visible; +} + +.cable-tables-div { + width: 48%; + height: auto; + cursor: default; + display: flex; + justify-content: flex-start; + align-items: center; + padding-top: 20px; + padding-bottom: 20px; + margin-top: 5px; + margin-bottom: 5px; + flex-direction: column; +} + +.cable-tables-div table { + display: inline-table; + width: 90%; + height: auto; + background-color: transparent; + border: $light-blue solid 2px; + border-radius: 20px; + table-layout: fixed; + border-spacing: 0px; +} + +.row, +.head, +.body { + width: auto; + height: auto; + background-color: transparent; + padding: 10px; + text-align: center; + outline: $light-blue solid 1px; +} + +.head { + font-family: "Gotham Bold"; + font-size: 20px; + color: $medium-blue; + border-top: none; +} + +.body { + font-family: "Gotham Medium"; + font-size: 18px; + color: $medium-blue; +} + +.thead { + width: auto; + height: auto; + background-color: transparent; +} + +.tbody { + width: auto; + height: auto; + background-color: transparent; +} + +td:first-child, +th:first-child { + border-left: none; +} + +.cable-tables-div-title { + width: 90%; + height: auto; + background-color: transparent; + font-family: "Gotham Bold"; + font-size: 24px; + color: $dark-blue; + margin-bottom: 15px; + margin-top: 15px; + padding-left: 10px; +} diff --git a/src/components/BrowseComponent.js b/src/components/BrowseComponent.js index 7c49044..49d6a8f 100644 --- a/src/components/BrowseComponent.js +++ b/src/components/BrowseComponent.js @@ -20,11 +20,17 @@ class cable { this.brand = brand; this.description = description; this.short_description = short_description - ? short_description - : description; - this.image = image - ? `http://localhost${image}` - : DefaultPartImg; + ? short_description + : description; + this.image = image ? `http://localhost${image}` : DefaultPartImg; + + 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() { @@ -125,4 +131,3 @@ export default class BrowseComponent extends Component { ); } } - diff --git a/src/components/CableDetailComponent.js b/src/components/CableDetailComponent.js index cdf1adc..900c53d 100644 --- a/src/components/CableDetailComponent.js +++ b/src/components/CableDetailComponent.js @@ -17,12 +17,27 @@ class Cable { ? `http://localhost${cableData.image}` : DefaultPartImg; this.dynamicProps = {}; + this.horizontal = []; + this.vertical = []; + this.orderedKeys = [] Object.keys(cableData).forEach((key) => { - if (!["partnum", "id", "brand", "position", "image"].includes(key)) { + if (!["partnum", "id", "brand", "position", "image", "short_description", "description", "application", "category"].includes(key)) { this.dynamicProps[key] = cableData[key]; } }); + + for (let key in this.dynamicProps) { + let data = this.dynamicProps[key]; + let first = Object.keys(data)[0]; + if (typeof data[first] === "object") { + this.horizontal.push(key); + } else { + this.vertical.push(key); + } + } + this.orderedKeys = this.orderedKeys.concat(this.vertical); + this.orderedKeys = this.orderedKeys.concat(this.horizontal); } } @@ -57,27 +72,71 @@ export default class CableDetailComponent extends Component { this.props.socket.removeEventListener("message", this.handleMessage); } - renderTables() { - const { cableDetails } = this.state; - if (!cableDetails) return null; + renderHorizontalTable(title, object) { + let data; + try { + data = JSON.parse(object); + } catch (error) { + console.error("Error parsing JSON data:", error); + return
Error loading data...
; + } - return Object.keys(cableDetails.dynamicProps).map((key) => ( -
-

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

+ const keys = Object.keys(data); + const maxRows = Math.max(...keys.map((key) => data[key].length)); + + const rows = Array.from({ length: maxRows }).map((_, rowIndex) => { + return ( + + {keys.map((key, index) => ( + + {data[key][rowIndex] || ""} + + ))} + + ); + }); + + return ( +
+ {title} - - {Object.entries(cableDetails.dynamicProps[key]).map( - ([propKey, value]) => ( - - - - - ) - )} - + + + {keys.map((key, index) => ( + + ))} + + + {rows}
{propKey}{Array.isArray(value) ? value.join(", ") : value}
+ {key} +
- )); + ); + } + + renderVerticalTable(title, object) { + let data; + try { + data = JSON.parse(object); + } catch (error) { + console.error("Error parsing JSON data:", error); + return
Error loading data...
; + } + + return ( +
+ {title} + + {Object.entries(data).map(([key, value], index) => ( + + + + + ))} +
{key}{value}
+
+ ); } render() { @@ -141,6 +200,40 @@ export default class CableDetailComponent extends Component { 🤲
+ + {cableDetails ? ( +
+ {/* {Object.entries(cableDetails.dynamicProps).map( + ([key, value], index) => { + if (cableDetails.horizontal.includes(key)) { + return this.renderHorizontalTable( + key, + JSON.stringify(value) + ); + } else { + return this.renderVerticalTable(key, JSON.stringify(value)); + } + } + )} */} + + {cableDetails.orderedKeys.map((key, index) => { + if (cableDetails.horizontal.includes(key)) { + return this.renderHorizontalTable( + key, + JSON.stringify(cableDetails.dynamicProps[key]) + ); + } else { + return this.renderVerticalTable( + key, + JSON.stringify(cableDetails.dynamicProps[key]) + ); + } + } + )} +
+ ) : ( +
+ )} ); diff --git a/src/index.js b/src/index.js index 2330dd1..8cab241 100644 --- a/src/index.js +++ b/src/index.js @@ -55,8 +55,4 @@ const init = () => { ); -}; - - - -init(); \ No newline at end of file +}; \ No newline at end of file From ecf56bd1ee76b12c526524aa4ea4be45cc5a7115 Mon Sep 17 00:00:00 2001 From: Scarlett Date: Wed, 8 May 2024 22:46:20 -0400 Subject: [PATCH 2/3] tables done (i think) --- src/assets/stylesheets/cabledetail.scss | 4 +-- src/components/CableDetailComponent.js | 41 ++++++++++++++++++++++--- 2 files changed, 39 insertions(+), 6 deletions(-) diff --git a/src/assets/stylesheets/cabledetail.scss b/src/assets/stylesheets/cabledetail.scss index 4eb4779..6f9ae55 100644 --- a/src/assets/stylesheets/cabledetail.scss +++ b/src/assets/stylesheets/cabledetail.scss @@ -196,10 +196,10 @@ $white: #fff; width: calc(80% + 50px); height: auto; background-color: transparent; - display:flex; + display: flex; flex-wrap: wrap; flex-direction: row; - align-items: center; + align-items: stretch; justify-content: space-between; margin-bottom: 50px; margin-top: 5px; diff --git a/src/components/CableDetailComponent.js b/src/components/CableDetailComponent.js index 900c53d..b1f8a94 100644 --- a/src/components/CableDetailComponent.js +++ b/src/components/CableDetailComponent.js @@ -19,10 +19,22 @@ class Cable { this.dynamicProps = {}; this.horizontal = []; this.vertical = []; - this.orderedKeys = [] + this.orderedKeys = []; Object.keys(cableData).forEach((key) => { - if (!["partnum", "id", "brand", "position", "image", "short_description", "description", "application", "category"].includes(key)) { + if ( + ![ + "partnum", + "id", + "brand", + "position", + "image", + "short_description", + "description", + "application", + "category", + ].includes(key) + ) { this.dynamicProps[key] = cableData[key]; } }); @@ -38,6 +50,27 @@ class Cable { } this.orderedKeys = this.orderedKeys.concat(this.vertical); this.orderedKeys = this.orderedKeys.concat(this.horizontal); + + for (let i = 0; i < this.orderedKeys.length; i++) { + let key = this.orderedKeys[i]; + if (!isNaN(key)) { + this.orderedKeys.splice(i, 1); + i--; + } + + try { + let data = this.dynamicProps[key]; + let first = Object.keys(data)[0]; + if (data[first] !== undefined) { + if (typeof data[first] === "string") { + if (first === "" || data[first] === "") { + this.orderedKeys.splice(i, 1); + i--; + } + } + } + } catch (error) {} + } } } @@ -85,6 +118,7 @@ export default class CableDetailComponent extends Component { const maxRows = Math.max(...keys.map((key) => data[key].length)); const rows = Array.from({ length: maxRows }).map((_, rowIndex) => { + return ( {keys.map((key, index) => ( @@ -228,8 +262,7 @@ export default class CableDetailComponent extends Component { JSON.stringify(cableDetails.dynamicProps[key]) ); } - } - )} + })} ) : (
From a883b0b206a58d4d0a37d835e96748a02f76c3e3 Mon Sep 17 00:00:00 2001 From: Scarlett Date: Thu, 9 May 2024 15:16:28 -0400 Subject: [PATCH 3/3] current --- src/assets/stylesheets/cabledetail.scss | 15 +++++++++------ src/components/CableDetailComponent.js | 2 +- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/assets/stylesheets/cabledetail.scss b/src/assets/stylesheets/cabledetail.scss index 6f9ae55..97c50b2 100644 --- a/src/assets/stylesheets/cabledetail.scss +++ b/src/assets/stylesheets/cabledetail.scss @@ -193,22 +193,24 @@ $white: #fff; } .cable-tables { - width: calc(80% + 50px); + width: calc(80% + 70px); height: auto; background-color: transparent; display: flex; flex-wrap: wrap; flex-direction: row; align-items: stretch; + flex-grow: 1; justify-content: space-between; margin-bottom: 50px; margin-top: 5px; text-decoration: none; overflow: visible; + box-sizing: border-box; } .cable-tables-div { - width: 48%; + width: 31%; height: auto; cursor: default; display: flex; @@ -216,9 +218,10 @@ $white: #fff; align-items: center; padding-top: 20px; padding-bottom: 20px; - margin-top: 5px; - margin-bottom: 5px; flex-direction: column; + box-sizing: border-box; + flex-grow: 1; + margin: 13px; } .cable-tables-div table { @@ -245,14 +248,14 @@ $white: #fff; .head { font-family: "Gotham Bold"; - font-size: 20px; + font-size: 18px; color: $medium-blue; border-top: none; } .body { font-family: "Gotham Medium"; - font-size: 18px; + font-size: 16px; color: $medium-blue; } diff --git a/src/components/CableDetailComponent.js b/src/components/CableDetailComponent.js index b1f8a94..dd24879 100644 --- a/src/components/CableDetailComponent.js +++ b/src/components/CableDetailComponent.js @@ -159,7 +159,7 @@ export default class CableDetailComponent extends Component { } return ( -
+
{title} {Object.entries(data).map(([key, value], index) => (