Skip to content

Commit

Permalink
adding detailed component card
Browse files Browse the repository at this point in the history
  • Loading branch information
@Curiosit
Curiosit committed Mar 29, 2024
1 parent 2b2a12a commit 2280d8a
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 56 deletions.
1 change: 1 addition & 0 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ appRoot.render(
<Router.Route path="/3d-ifc-co2/materials" element={<MaterialsPage />}></Router.Route>
<Router.Route path="/3d-ifc-co2/materials/:id" element={<MaterialPage />}></Router.Route>
<Router.Route path="/3d-ifc-co2/components" element={<ComponentsPage />}></Router.Route>
<Router.Route path="/3d-ifc-co2/components/:id" element={<ComponentsPage />}></Router.Route>
</Router.Routes>
</ViewerProvider>
</Router.BrowserRouter>
Expand Down
137 changes: 93 additions & 44 deletions src/react-components/ComponentCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -34,53 +37,99 @@ export function ComponentCard (props: Props) {
return totalGWP;
};
//const totalGWP = roundNumber(calculateTotalGWP(props.epd))
return (
/* <Router.Routes>
<Router.Route path="/material" element={ */
<div className="project-card" >
<div className="card-header">
<p className="initials" style={{ }}>
{ uppercaseInitials(props.component.name) }
</p>
<div>
<h4>
{ props.component.name }
</h4>
<p style={{ color: "#969696" }}>
{ props.component.subtype }
</p>
if (!props.detailed) {
return (
/* <Router.Routes>
<Router.Route path="/material" element={ */

<div className="project-card" >
<div className="card-header">
<p className="initials" style={{ }}>
{ uppercaseInitials(props.component.name) }
</p>
<div>
<h4>
{ props.component.name }
</h4>
<p style={{ color: "#969696" }}>
{ props.component.subtype }
</p>
</div>
</div>
</div>
<div className="card-content">
<div className="card-property">
<p style={{ color: "#969696" }}>Total GWP</p>
<p>
{roundNumber(calculateTotalComponentGWP())} kgCO2e
</p>
<div className="card-content">
<div className="card-property">
<p style={{ color: "#969696" }}>Total GWP</p>
<p>
{roundNumber(calculateTotalComponentGWP())} kgCO2e
</p>
</div>

{layers.map((layer, index) => {

const epdxEntry = props.epdxData.find(entry => entry.id === layer.value);
if (epdxEntry) {
return (
<div className="card-property" key={index}>
<p style={{ color: "#969696" }}>{epdxEntry.name}</p><p>{layer.amount} {epdxEntry.declared_unit}</p>

</div>
);
} else {
return null;
}
})}


</div>

{layers.map((layer, index) => {

const epdxEntry = props.epdxData.find(entry => entry.id === layer.value);
if (epdxEntry) {
return (
<div className="card-property" key={index}>
<p style={{ color: "#969696" }}>{epdxEntry.name}</p><p>{layer.amount} {epdxEntry.declared_unit}</p>

</div>
);
} else {
return null;
}
})}


</div>
</div>
/* }>
/* }>
</Router.Route>
</Router.Routes> */
</Router.Route>
</Router.Routes> */

)
) }
else {
return (
<div className="project-card" >
<div className="card-header">
<p className="initials" style={{ }}>
{ uppercaseInitials(props.component.name) }
</p>
<div>
<h4>
{ props.component.name }
</h4>
<p style={{ color: "#969696" }}>
{ props.component.subtype }
</p>
</div>
</div>
<div className="card-content">
<div className="card-property">
<p style={{ color: "#969696" }}>Total GWP</p>
<p>
{roundNumber(calculateTotalComponentGWP())} kgCO2e
</p>
</div>

{layers.map((layer, index) => {

const epdxEntry = props.epdxData.find(entry => entry.id === layer.value);
if (epdxEntry) {
return (
<div className="card-property" key={index}>
<p style={{ color: "#969696" }}>{epdxEntry.name}</p><p>{layer.amount} {epdxEntry.declared_unit}</p>

</div>
);
} else {
return null;
}
})}


</div>
</div>
)
}
}
53 changes: 42 additions & 11 deletions src/react-components/ComponentsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string[]>([]);
const [showQuestion, setShowQuestion] = React.useState(false);
const [initialized, setInitialized] = React.useState(false);
Expand All @@ -35,6 +39,7 @@ export function ComponentsPage(props: Props) {
const [showComponentData, setShowComponentData] = React.useState<Component[]>([]);
const [newComponentLayers, setNewComponentLayers] = React.useState(1);

const [pickedComponent, setPickedComponent] = React.useState<Component | null>(null);
let num = 0

const [searchQuery, setSearchQuery] = React.useState("");
Expand All @@ -51,13 +56,32 @@ export function ComponentsPage(props: Props) {

num += 1
console.log(component)
return <Router.Link to={`/3d-ifc-co2/component/${component.id}`} key={component.id}>
return <Router.Link to={`/3d-ifc-co2/components/${component.id}`} key={component.id}>
<ComponentCard component={component} epdxData={epdxData} />
</Router.Link>

})

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 () => {
Expand All @@ -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) {
Expand Down Expand Up @@ -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 (

<div className="page">
Expand Down Expand Up @@ -413,18 +439,23 @@ export function ComponentsPage(props: Props) {
</header>


{
{
showSingle && componentID !== null ?
<div id="component-details">

{ <ComponentCard component={pickedComponent} epdxData={epdxData} detailed={true} /> }
</div>
:
componentData.length > 0 ?
<div id="material-list">
{componentCards}
{componentCards}
</div>
:
:
<div id="material-list">
No components found!
No components found!
</div>

}
</div>
</div>

)
}
2 changes: 1 addition & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 2280d8a

Please sign in to comment.