Merge branch 'frontend-dev-#37' of https://github.com/amosproj/amos-s…

…s2021-carbon-footprint into frontend-dev-#37
amosproj · May 14, 2021 · 09b5d21 · 09b5d21
2 parents 3b156d9 + 0ed3700
commit 09b5d21
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 34 deletions.
diff --git a/frontend/src/components/cards/MiniCardComponent.js b/frontend/src/components/cards/MiniCardComponent.js
@@ -10,7 +10,7 @@ const useStyles = createUseStyles((theme) => ({
         border: `3px solid ${theme.color.lightGrayishBlue2}`,
         borderRadius: 4,
         cursor: 'pointer',
-        maxWidth: 180,
+        maxWidth: 200,
         maxHeight:150,
         marginTop:50,
         padding: '8px 16px 8px 16px',
@@ -47,12 +47,10 @@ function MiniCardComponent({ className = '', title, value, path }) {
     return (
         <Column flexGrow={1} className={composedClassName} horizontal='center' vertical='center'>
         {/*  Resize the image on the cards (product images)            */}
-            <div style={{width: 155, paddingLeft: 10, paddingTop: 20, paddingBottom: 10 }}>
-            {/* define the image path */}
-            <img src={path} alt=''/>
+            <div style={{ width: 150, paddingLeft: 20, paddingTop: 20, paddingBottom: 20 }}>
+                    {/* define the image path */}
+                    <img src={path} alt='' />
             </div>
-            <span className={classes.title}>{title}</span>
-            <span className={classes.value}>{value}</span>
 
         </Column>
     );

diff --git a/frontend/src/components/productGrid/LabelComponent.js b/frontend/src/components/productGrid/LabelComponent.js
@@ -0,0 +1,18 @@
+import React, {useContext} from 'react';
+
+/**
+ * Displaying a label.
+ * 
+ * @author Mani
+ * @author Martin Wagner
+ */
+
+function LabelComponent({productName}) {
+    return (
+        <span class='w3-container w3-center w3-lightgrey w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em'>
+            {productName}
+        </span>
+    );
+}
+
+export default LabelComponent;
diff --git a/frontend/src/components/productGrid/ModelDropdownComponent.js b/frontend/src/components/productGrid/ModelDropdownComponent.js
@@ -3,14 +3,17 @@ import React, { useContext, useState } from 'react';
 import { IconArrowDown } from 'assets/icons';
 import {getModels} from 'interface/simaProInterface'
 import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
+import { Component } from 'react';
+import {Container, Row, Col } from 'react-grid-system';
+
 
 //TODO: When only one model is available, => How to do that then? Should a click on the image link in that case?
 
 /**
  * This component creates the dropdownboxes for the related products 
  * 
  * @returns the model properties of the related product depending on the model values from getModels func from interface/simaProInterface
- * @author parham, Martin Wagner, Irem Toroslu
+ * @author parham, Martin Wagner, Irem Toroslu, Mani Anand
  */
 
 const ModelDropdownComponent = (props) =>  {
@@ -22,16 +25,18 @@ const ModelDropdownComponent = (props) =>  {
     // set the initial values for the dropdown list derived from getModels
     const variables = getModels(productID);  
     const [ selected, setSelected ] = useState('Select a model');
-
-        return (
-            <div>
-
-                <div className='w3-dropdown-hover w3-lightgrey w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em' >
-                <IconArrowDown/>
+
+    return (
+            <Container fluid={true}>
+                <Row className=' w3-dropdown-hover w3-card-4 w3-lightgrey w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em' >
+                    <Col xs={2}>                         
                     <button className=' w3-button w3-border w3-white'>{selected}</button>
-                    <div className=' w3-dropdown-content w3-dropdown-hover w3-bar-block w3-border '>
+
+
+                    <div className='w3-dropdown-content w3-dropdown-hover w3-bar-block w3-border'>
+
                     {variables.map((item) => (
-                       
+
                         <a
                             onClick={(props) => {
                                 const newSelectedProducts =
@@ -44,16 +49,23 @@ const ModelDropdownComponent = (props) =>  {
                                     setSelected(item.modelName) ;
                                     setSelectedProducts(newSelectedProducts);
                                 }} 
-                                className='w3-bar-item w3-button'
+
+                                className=' w3-bar w3-button'
+
                                 key={item.modelID}
                             >
                                 {item.modelName}
                             </a>
+
                         ))}
                     </div>
-                </div>
-            </div>
+                    </Col>                   
+                </Row>
+
+            </Container>
         );
-    };
+      };
+
+
 
 export default ModelDropdownComponent;
diff --git a/frontend/src/components/productGrid/ProductGridComponent.js b/frontend/src/components/productGrid/ProductGridComponent.js
@@ -5,7 +5,7 @@
  * /**
  * 
  * @returns the product and model properties
- * @author Irem Toroslu
+ * @author Irem Toroslu, Martin Wagner, Mani Anand
  */
 
 import React, {useContext} from 'react';
@@ -17,21 +17,39 @@ import ProductDropdown from './ModelDropdownComponent'
 import SLUGS from 'resources/slugs';
 import {Link} from 'react-router-dom';
 import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
+import { Component } from 'react';
+import LabelComponent from './LabelComponent'
 
+const myStyles = createUseStyles((theme) => ({
 
+    title: {
+        ...theme.typography.cardTitle,
+        color: theme.color.grayishBlue2,
+        marginBottom: 12,
+        minWidth: 205,
+        textAlign: 'center'
+    },
+    value: {
+        color: theme.color.veryDarkGrayishBlue,
+        fontWeight: 'bold',
+        fontSize: 20,
+        letterSpacing: '1px',
+        lineHeight: '50px',
+        textAlign: 'center'
+    }
+}));
 
 
 function ProductGridComponent() {
-    const [ selectedProducts, setSelectedProducts ] = useContext(PrivateSectionContext);
-    const NewSelectedProducts =
-
-        [{
+    const [selectedProducts, setSelectedProducts] = useContext(PrivateSectionContext);
+    const NewSelectedProducts = [
+        {
             productID: selectedProducts.productID,
             productName: selectedProducts.productName,
             modelID: selectedProducts.modelID,
             modelName: selectedProducts.modelName
-        }]
-
+        }
+    ];
 
     const products = getProducts();
     const classes = useStyles();
@@ -43,28 +61,35 @@ function ProductGridComponent() {
                 wrap
                 flexGrow={1}
                 vertical='center'
-                breakpoints={{50: 'column'}}
+                breakpoints={{ 50: 'column' }}
             >
-                {products.map((product, index) =>
+                {products.map((product, index) => (
                     <Column key={'Column' + index}>
                         <Link
                             onClick={(props) => {
                                 // Save selection to ContextProvider
                                 NewSelectedProducts[0].productID = product.productID;
                                 NewSelectedProducts[0].productName = product.productName;
                             }}
-                            to={{ // Link to the next page
-                                pathname: SLUGS.details,
-                            }}>
+                            to={{
+                                // Link to the next page
+                                pathname: SLUGS.details
+                            }}
+                        >
                             <MiniCardComponent
+                                title={product.productName}
                                 className={classes.miniCardContainer}
                                 // define the path of the image to show on the cards
                                 path={product.productImage}
                             />
                         </Link>
-                        <ProductDropdown productID={product.productID} productName={product.productName}/>
+                        <LabelComponent productName={product.productName}/>
+                        <ProductDropdown
+                            productID={product.productID}
+                            productName={product.productName}
+                        />
                     </Column>
-                )}
+                ))}
             </Row>
         </Column>
     );
@@ -113,4 +138,4 @@ const useStyles = createUseStyles({
     }
 });
 
-export default ProductGridComponent;
+export default ProductGridComponent;