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

…s2021-carbon-footprint into frontend-dev-#37
amosproj · May 16, 2021 · bb3bced · bb3bced
2 parents 23a0a84 + 3a33b9b
commit bb3bced
Show file tree

Hide file tree

Showing 21 changed files with 231 additions and 114 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -6,6 +6,8 @@
         <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
         <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2018.css" />
         <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2019.css" />
+        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
         <!--
@@ -22,7 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-        <title>Dashboard Kit</title>
+
+        <title>Carbon Footprint Visualization</title>
     </head>
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/src/assets/dummyImages/Logo2.png b/frontend/src/assets/dummyImages/Logo2.png
diff --git a/frontend/src/assets/icons/icon-arrow.js b/frontend/src/assets/icons/icon-arrow.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default (props) => (
-<svg  width="16" height="16" fill='none' xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
+<svg  width="20" height="20"  fill='none' xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
   <path opacity={props.opacity || ''}  d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4z"
   fill={props.fill || "#9FA2B4"}/>
 </svg>

diff --git a/frontend/src/assets/icons/icon-circle.js b/frontend/src/assets/icons/icon-circle.js
@@ -2,7 +2,7 @@
 import React from 'react';
 
 export default (props) => (
-<svg width="50" height="50" fill ='grey'>
-  <circle opacity={props.opacity || ''} cx="30" cy="25" r="4"  fill = {props.fill || "#9FA2B4"}/>
+<svg width="25" height="50" fill ='grey'>
+  <circle opacity={props.opacity || ''} cx="15" cy="25" r="4"  fill = {props.fill || "#9FA2B4"}/>
 </svg>
 )
diff --git a/frontend/src/assets/icons/icon-user.js b/frontend/src/assets/icons/icon-user.js
@@ -0,0 +1,10 @@
+
+import React from 'react';
+
+export default (props) => (
+<svg widht='30' height='30' xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill='none'>
+  <path opacity={props.opacity || ''} fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" 
+  fill={props.fill || "#9FA2B4"}/>
+</svg>
+
+)
diff --git a/frontend/src/assets/icons/index.js b/frontend/src/assets/icons/index.js
@@ -24,6 +24,7 @@ import IconBrowse from './icon-browse';
 import IconBuilding from './icon-building';
 import IconArrowDown from './icon-arrow-down';
 import IconCircle from './icon-circle'
+import IconUser from './icon-user'
 
 export {
     IconCheckboxOff,
@@ -51,5 +52,6 @@ export {
     IconBrowse,
     IconBuilding,
     IconArrowDown,
-    IconCircle
+    IconCircle, 
+    IconUser
 };
diff --git a/frontend/src/components/cards/MiniCardComponent.js b/frontend/src/components/cards/MiniCardComponent.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Column, Row } from 'simple-flexbox';
+import { Column } from 'simple-flexbox';
 import { createUseStyles, useTheme } from 'react-jss';
 
 //reconfiguration of the dropdown boxes
@@ -10,12 +10,12 @@ const useStyles = createUseStyles((theme) => ({
         border: `3px solid ${theme.color.lightGrayishBlue2}`,
         borderRadius: 4,
         cursor: 'pointer',
-        maxWidth: 300,
+        maxWidth: 350,
         maxHeight:150,
         marginTop:50,
-        padding: '8px 16px 8px 16px',
+        // padding: '8px 16px 8px 16px',
         '&:hover': {
-            borderColor: '#7b9095', //'#00b300'
+            borderColor: '#8b8d94',//'#7b9095', //'#00b300'
             '&:nth-child(n) > span': {
                 color: theme.color.lightBlue
             }
@@ -46,11 +46,12 @@ function MiniCardComponent({ className = '', title, value, path }) {
     const composedClassName = [classes.container, className].join(' ');
     return (
         <Column flexGrow={1} className={composedClassName} horizontal='center' vertical='center'>
-            {/*  Resize the image on the cards (product images) */}
-                <div style={{ width: 150, paddingLeft: 20, paddingTop: 20, paddingBottom: 20 }}>
+        {/*  Resize the image on the cards (product images)            */}
+            <div style={{ width: 130,  paddingTop: 20, paddingBottom: 20 }}>
                     {/* define the image path */}
                     <img src={path} alt='' />
-                </div>
+            </div>
+
         </Column>
     );
 }

diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx
@@ -6,6 +6,7 @@
 import React, { Component } from 'react';
 import ReactApexChart from 'react-apexcharts';
 import {getResultsImpactAssessment} from 'interface/projectInterface';
+import theme from 'resources/theme';
 
 const ColumnChartComponent = () => {
     const series = [{
@@ -22,9 +23,13 @@ const ColumnChartComponent = () => {
         },
         plotOptions: {
           bar: {
-            color: '#00308F',
+            //color: '#00308F',
             columnWidth: '60%',
           }
+
+        },
+        fill: {
+          colors: ['#48D1CC']//['#00bcd4'] 0CA8CA 52bfb2
         },
         dataLabels: {
           enabled: false,
@@ -57,7 +62,7 @@ const ColumnChartComponent = () => {
 
     return (
         <div id='chart'>
-            <ReactApexChart options={options} series={series} type="bar" height={350} />
+            <ReactApexChart options={options} series={series} type="bar" color='green' height={350} />
         </div>
     );
 

diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
@@ -6,6 +6,7 @@
 import React, { Component } from 'react';
 import ReactApexChart from 'react-apexcharts';
 import { getMaterialComposition} from 'interface/projectInterface';
+import theme from 'resources/theme';
 
 const PieChartDiagramComponent = () => {
     //const series = [17, 13, 3, 2, 1, 42, 21];
@@ -26,7 +27,7 @@ const PieChartDiagramComponent = () => {
             'Silicon steel',
             'Copper'
         ],
-        colors: ['#040f13', '#0b2d39', '#165a72', '#2596be', '#3ba1c5', '#00308F', '#d3eaf2'],
+        colors: [theme.color.TransformerOil, theme.color.Steel, theme.color.Pressboard, theme.color.StainlessSteel, theme.color.Alminium, theme.color.SiliconSteel, theme.color.Copper],
         fill: {
             type: 'gradient'
         },

diff --git a/frontend/src/components/header/HeaderComponent.js b/frontend/src/components/header/HeaderComponent.js
@@ -2,18 +2,12 @@ import React, { useContext } from 'react';
 import { string } from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { Row } from 'simple-flexbox';
-import { createUseStyles, useTheme } from 'react-jss';
+import { createUseStyles, ThemeProvider, useTheme } from 'react-jss';
 import { SidebarContext } from 'hooks/useSidebar';
 import SLUGS from 'resources/slugs';
-import { IconBell, IconBrowse, IconLogin, IconSearch } from 'assets/icons';
+import { IconBell, IconUser, IconSearch, IconLogin, IconArrow, IconBurger, IconBrowse } from 'assets/icons';
 import DropdownComponent from 'components/dropdown';
 import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
-/**
- * The Header Component is a shared component between all pages. It is capable to display 
- * a title that changes when the selection in the SidebarComponent changes. 
- * 
- * @returns The visualization of exactly that.
- */
 
 const useStyles = createUseStyles((theme) => ({
     avatar: {
@@ -28,45 +22,71 @@ const useStyles = createUseStyles((theme) => ({
         }
     },
     container: {
-        height: 40
+        height: 50,
+        widht:200,
+        color:'#00b300', // header title color 
+        marginRight:-30
+
     },
     name: {
         ...theme.typography.itemTitle,
         textAlign: 'right',
         '@media (max-width: 768px)': {
-            display: 'none'
+            display: 'none',
+
+
         }
     },
     separator: {
         borderLeft: `1px solid ${theme.color.lightGrayishBlue2}`,
-        marginLeft: 32,
-        marginRight: 32,
-        height: 32,
-        width: 2,
+        marginLeft: 50,
+        marginRight: 120,
+        height: 30,
+        width: 3,
         '@media (max-width: 768px)': {
             marginLeft: 14,
             marginRight: 0
         }
     },
+    subtitle: {
+        ...theme.typography.title,
+        '@media (max-width: 1080px)': {
+            marginLeft: -50,
+
+        },
+        '@media (max-width: 468px)': {
+            fontSize: 50,
+
+        }
+    },
     title: {
         ...theme.typography.title,
         '@media (max-width: 1080px)': {
-            marginLeft: 60
+            marginLeft: 80,
+
         },
         '@media (max-width: 468px)': {
-            fontSize: 20
+            fontSize: 50,
+
         }
     },
     iconStyles: {
         cursor: 'pointer',
-        marginLeft: 25,
+        marginLeft:0,
         '@media (max-width: 768px)': {
             marginLeft: 12
         }
     }
 }));
 
+/**
+ * The Header Component is a shared component between all pages. It is capable to display 
+ * a title that changes when the selection in the SidebarComponent changes. 
+ * 
+ * @returns The visualization of exactly that.
+ */
 function HeaderComponent() {
+
     const { push } = useHistory();
     const { currentItem } = useContext(SidebarContext); // get the current Path selected in the Sidebar
     const [ selectedProducts, setSelectedProducts ] = useContext(PrivateSectionContext);
@@ -75,6 +95,8 @@ function HeaderComponent() {
 
     let title;
     let subtitle;
+    let subsubtitle;
+
 
     switch (true) {
 
@@ -93,7 +115,9 @@ function HeaderComponent() {
         case currentItem === SLUGS.industrialApplications:
             title = 'Industrial Applications';
         case currentItem === SLUGS.details:
-            title = 'Selected product: ' + (selectedProducts[0].productName === undefined ? 'Please select a model first' : selectedProducts[0].productName);
+            title='Details '
+            subtitle = ' Selected product  ' ;
+            subsubtitle =(selectedProducts[0].productName === undefined ? 'Please select a model first' : selectedProducts[0].productName);
             break;
         case currentItem === SLUGS.generation + '/products':
             title = 'Product Catagory';
@@ -111,19 +135,36 @@ function HeaderComponent() {
             title = '';
     }
 
+    function UseArrow(selected) {
+
+        if (title === 'Details ' && !(selected === undefined)) {
+            return <IconArrow height='10'/>;
+        }
+       return null;
+
+      }
     function onSettingsClick() {
         push(SLUGS.settings);
     }
 
     return (
-        <Row className={classes.container} vertical='center' horizontal='space-between'>
-            <span className={classes.title}>{title}</span>
+        <Row className={classes.container} style={{background: theme.uniformStyle.color.secondaryBackgroundColor,marginTop:-30,marginLeft:-30,height:50}} vertical='center' horizontal='space-between'>
+            <span className={classes.title} style={{marginLeft:10,marginTop:10}}>{title}</span>
+
             <Row vertical='center'>
                 <div className={classes.iconStyles}>
                     <IconSearch />
                 </div>
+                <div className={classes.separator}>
+                <div className={classes.iconStyles}>
+                <IconLogin fill= {'white'}  /></div>
+            {/* <IconSearch/>  
+            <Row vertical='center'>
                 <div className={classes.iconStyles}>
-                    <DropdownComponent
+                <div className={classes.separator}><IconLogin fill= {'white'}  /></div>
+                </div>
+                <div className={classes.iconStyles}> */}
+                    {/* <DropdownComponent
                         label={<IconBell />}
                         options={[
                             {
@@ -147,41 +188,10 @@ function HeaderComponent() {
                             top: 42,
                             right: -14
                         }}
-                    />
+                    /> */}
                 </div>
-                <div className={classes.separator}></div>
-                <DropdownComponent
-                    label={
-                    <span className={classes.name} >User Name
-                        <IconLogin>  
-
-
-                            {/* <img
-                                src='https://avatars3.githubusercontent.com/u/21162888?s=460&v=4'
-                                alt='avatar'
-                                className={classes.avatar}
-                            /> */}
-
-                    </IconLogin>
-                    </span>  
-
-                    }
-                    options={[
-                        {
-                            label: 'Settings',
-                            onClick: onSettingsClick
-                        },
-                        {
-                            label: 'Logout',
-                            onClick: () => console.log('logout')
-                        }
-                    ]}
-                    position={{
-                        top: 52,
-                        right: -6
-                    }}
-                />
-            </Row>
+
+                </Row>
         </Row>
     );
 }

diff --git a/frontend/src/components/productGrid/ProductGridComponent.js b/frontend/src/components/productGrid/ProductGridComponent.js
@@ -1,13 +1,3 @@
-/**
- * The Componenet creates new cards   for the product items using the minicard components form 'components/cards/MiniCardComponent'
- * it displays all the related products images attached to each card in a certain category.
- * Also stores the product and model properties and pass this values to the detail page once clicking on the image
- * /**
- * 
- * @returns the product and model properties
- * @author Irem Toroslu
- */
-
 import React, {useContext} from 'react';
 //import {Column, Row} from 'simple-flexbox';
 import {createUseStyles} from 'react-jss';
@@ -19,7 +9,15 @@ import {Link} from 'react-router-dom';
 import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
 import {Container, Row, Col } from 'react-grid-system';
 
-
+/**
+ * The Componenet creates new cards   for the product items using the minicard components form 'components/cards/MiniCardComponent'
+ * it displays all the related products images attached to each card in a certain category.
+ * Also stores the product and model properties and pass this values to the detail page once clicking on the image
+ * /**
+ * 
+ * @returns the product and model properties
+ * @author Irem Toroslu, Martin Wagner, Mani Anand
+ */
 
 function ProductGridComponent() {
     const [ selectedProducts, setSelectedProducts ] = useContext(PrivateSectionContext);