From 2280d8abda11ef6ae0a2ae18f9f18f00da6c53d3 Mon Sep 17 00:00:00 2001 From: Curiosit Date: Fri, 29 Mar 2024 14:23:20 +0100 Subject: [PATCH] adding detailed component card --- src/index.tsx | 1 + src/react-components/ComponentCard.tsx | 137 ++++++++++++++++-------- src/react-components/ComponentsPage.tsx | 53 +++++++-- style.css | 2 +- 4 files changed, 137 insertions(+), 56 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 37ba9c0..0f650fa 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -33,6 +33,7 @@ appRoot.render( }> }> }> + }> diff --git a/src/react-components/ComponentCard.tsx b/src/react-components/ComponentCard.tsx index 4b1e764..9764c80 100644 --- a/src/react-components/ComponentCard.tsx +++ b/src/react-components/ComponentCard.tsx @@ -8,12 +8,15 @@ import { Component } from '../classes/Component' import { calculateTotalEPDGWP } from '../utils/epdx' interface Props { + detailed: boolean, component: Component, epdxData: EPD[] } export function ComponentCard (props: Props) { + console.log(props) let desc = '' + const layers = JSON.parse(props.component.layers) console.log (layers) @@ -34,53 +37,99 @@ export function ComponentCard (props: Props) { return totalGWP; }; //const totalGWP = roundNumber(calculateTotalGWP(props.epd)) - return ( - /* - -
-

- { uppercaseInitials(props.component.name) } -

-
-

- { props.component.name } -

-

- { props.component.subtype } -

+ if (!props.detailed) { + return ( + /* + +
+

+ { uppercaseInitials(props.component.name) } +

+
+

+ { props.component.name } +

+

+ { props.component.subtype } +

+
-
-
-
-

Total GWP

-

- {roundNumber(calculateTotalComponentGWP())} kgCO2e -

+
+
+

Total GWP

+

+ {roundNumber(calculateTotalComponentGWP())} kgCO2e +

+
+ + {layers.map((layer, index) => { + + const epdxEntry = props.epdxData.find(entry => entry.id === layer.value); + if (epdxEntry) { + return ( +
+

{epdxEntry.name}

{layer.amount} {epdxEntry.declared_unit}

+ +
+ ); + } else { + return null; + } + })} + +
- - {layers.map((layer, index) => { - - const epdxEntry = props.epdxData.find(entry => entry.id === layer.value); - if (epdxEntry) { - return ( -
-

{epdxEntry.name}

{layer.amount} {epdxEntry.declared_unit}

- -
- ); - } else { - return null; - } - })} - -
-
- /* }> + /* }> - - */ + + */ - ) + ) } + else { + return ( +
+
+

+ { uppercaseInitials(props.component.name) } +

+
+

+ { props.component.name } +

+

+ { props.component.subtype } +

+
+
+
+
+

Total GWP

+

+ {roundNumber(calculateTotalComponentGWP())} kgCO2e +

+
+ + {layers.map((layer, index) => { + + const epdxEntry = props.epdxData.find(entry => entry.id === layer.value); + if (epdxEntry) { + return ( +
+

{epdxEntry.name}

{layer.amount} {epdxEntry.declared_unit}

+ +
+ ); + } else { + return null; + } + })} + + +
+
+ ) + } } diff --git a/src/react-components/ComponentsPage.tsx b/src/react-components/ComponentsPage.tsx index 7adf77a..19bf940 100644 --- a/src/react-components/ComponentsPage.tsx +++ b/src/react-components/ComponentsPage.tsx @@ -24,7 +24,11 @@ interface Props { } export function ComponentsPage(props: Props) { - + const [showSingle, setShowSingle] = React.useState(false); + + const [componentID, setComponentID] = React.useState(''); + const routeParams = Router.useParams<{id: string}>() + /* if (routeParams.id) { setShowSingle(true); setComponentID(routeParams.id) } */ const [selectedLayers, setSelectedLayers] = React.useState([]); const [showQuestion, setShowQuestion] = React.useState(false); const [initialized, setInitialized] = React.useState(false); @@ -35,6 +39,7 @@ export function ComponentsPage(props: Props) { const [showComponentData, setShowComponentData] = React.useState([]); const [newComponentLayers, setNewComponentLayers] = React.useState(1); + const [pickedComponent, setPickedComponent] = React.useState(null); let num = 0 const [searchQuery, setSearchQuery] = React.useState(""); @@ -51,13 +56,32 @@ export function ComponentsPage(props: Props) { num += 1 console.log(component) - return + return }) + const fetchComponentDetailsById = (componentID: string): Component | undefined => { + + const componentDetails = componentData.find(component => component.id === componentID); + + + return componentDetails; + }; + React.useEffect(() => { + if (routeParams.id) { + setShowSingle(true); + const componentDetail = fetchComponentDetailsById(routeParams.id); + console.log (componentDetail) + setPickedComponent(componentDetail ?? null); + } + }, [routeParams.id, componentData]); + + React.useEffect(() => { + console.log(pickedComponent); + }, [pickedComponent]); React.useEffect(() => { const getData = async () => { @@ -79,12 +103,15 @@ export function ComponentsPage(props: Props) { getData() } else { - //console.log(materialData) + console.log("Show data") } return () => { } }, [initialized]) + + + const onNewComponentClick = () => { const modal = document.getElementById("new-component-modal"); if (modal && modal instanceof HTMLDialogElement) { @@ -313,8 +340,7 @@ export function ComponentsPage(props: Props) { return `What can be improved in this material combination to lower carbon footprint?: ${selectedLayers.join(', ')}. Write opinion on each layer, and suggest replacement. Be short`; }; - - + return (
@@ -413,18 +439,23 @@ export function ComponentsPage(props: Props) { - { + { + showSingle && componentID !== null ? +
+ + { } +
+ : componentData.length > 0 ?
- {componentCards} + {componentCards}
- : + :
- No components found! + No components found!
- } -
+
) } \ No newline at end of file diff --git a/style.css b/style.css index 135b47b..8a55ac5 100644 --- a/style.css +++ b/style.css @@ -250,7 +250,7 @@ header { gap: 30px; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } - #material-details { + #material-details, #component-details { padding: 20px 40px; gap: 30px;