Merge pull request #111 from amosproj/dev-#82

Implementation of #82 - Integrate Data into Graphs


Co-authored-by: Julian Oelhaf <julian.oelhaf@posteo.de>

.github/workflows/Reactjs.yml

@@ -11,8 +11,11 @@ on:
 
 jobs:
   buildAndTest:
-    name: Build and Test Frontend
-    runs-on: ubuntu-latest
+    name: Build and Test Frontend on ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest, macOS-latest]
     defaults:
       run:
         working-directory: ./frontend

.gitignore

@@ -2,5 +2,10 @@ node_modules
 .idea
 /.vs/slnx.sqlite-journal
 .vs/slnx.sqlite
+obj/Debug/netcoreapp5.0/amos-ss2021-carbon-footprint.csproj.AssemblyReference.cache
 
 frontend/yarn.lock
+.vs/slnx.sqlite
+.vs/amos-ss2021-carbon-footprint/v16/.suo
+.vs/slnx.sqlite
+.vs/slnx.sqlite

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "build",
+                "${workspaceFolder}/backend/Backend/Backend.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "publish",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "publish",
+                "${workspaceFolder}/backend/Backend/Backend.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "watch",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "watch",
+                "run",
+                "${workspaceFolder}/backend/Backend/Backend.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        }
+    ]
+}

backend/Backend/Backend.csproj

@@ -8,7 +8,7 @@
   <ItemGroup>
     <PackageReference Include="AspNetCore.Proxy" Version="4.2.0" />
     <PackageReference Include="Newtonsoft.Json" Version="13.0.1" />
-    <PackageReference Include="Swashbuckle.AspNetCore" Version="5.6.3" />
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.1.4" />
   </ItemGroup>
 
   <ItemGroup>

backend/Backend/Startup.cs

@@ -29,10 +29,19 @@ public Startup(IConfiguration configuration)
 
         public IConfiguration Configuration { get; }
 
+        readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
+
         // This method gets called by the runtime. Use this method to add services to the container.
         public void ConfigureServices(IServiceCollection services)
         {
+            services.AddCors(options =>
+            {
+                options.AddPolicy(name: MyAllowSpecificOrigins,
+                                  builder => {
+                                      builder.WithOrigins("http://localhost:3000").AllowAnyHeader();
 
+                                  });
+            });
             services.AddControllers();
             services.AddSwaggerGen(c =>
             {
@@ -76,11 +85,14 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
 
             app.UseRouting();
 
+            app.UseCors();
+
             app.UseAuthorization();
 
             app.UseEndpoints(endpoints =>
             {
-                endpoints.MapControllers();
+                endpoints.MapControllers()
+                            .RequireCors(MyAllowSpecificOrigins);
             });
         }
 

frontend/jest.config.js

@@ -187,3 +187,9 @@ module.exports = {
     // Whether to use watchman for file crawling
     // watchman: true,
 };
+module.exports = {
+    moduleNameMapper: {
+        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|png|less|scss)$':
+            'identity-obj-proxy'
+    }
+};

frontend/package.json

@@ -6,7 +6,8 @@
     "dependencies": {
         "@material-ui/core": "^4.11.4",
         "@react-pdf/renderer": "^2.0.12",
-        "apexcharts": "^3.26.1",
+        "@reduxjs/toolkit": "^1.6.0",
+        "apexcharts": "^3.27.1",
         "axios": "^0.21.1",
         "cors": "^2.8.5",
         "html2canvas": "^1.0.0-rc.7",
@@ -23,6 +24,7 @@
         "react-grid-system": "^7.1.2",
         "react-hook-form": "^7.4.2",
         "react-jss": "^10.6.0",
+        "react-redux": "^7.2.4",
         "react-router-dom": "^5.2.0",
         "react-scripts": "^4.0.3",
         "react-select": "^4.3.0",
@@ -56,8 +58,12 @@
     "devDependencies": {
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.7",
-        "gh-pages": "^2.2.0",
+        "enzyme": "^3.11.0",
+        "enzyme-adapter-react-16": "^1.15.6",
+        "gh-pages": "^3.2.3",
+        "identity-obj-proxy": "^3.0.0",
         "jest": "26.6.0",
+        "jest-transform-stub": "^2.0.0",
         "prettier": "2.3.0"
     }
 }

frontend/src/components/details/ColumnChartComponent.jsx

@@ -1,18 +1,18 @@
-import React from 'react';
+import { React } from 'react';
 import ReactApexChart from 'react-apexcharts';
-import { getImpactAssessmentData, getLifeCycleStages } from 'interface/projectInterface';
+import { getColumnChartData, getLifeCycleStages } from 'interface/projectInterface';
 
 /**
  * Column Chart
- *
- * @author Julian Oelhaf
+ * Recieves the data from projectInterface.js using "getColumnChartData()"
+ * populates the data ito the column chart in Details Page.
  */
 const ColumnChartComponent = () => {
+    const values = getColumnChartData();
     const series = [
         {
             name: 'Global warming in kg CO2 equivalents',
-            // TODO: this data needs to be recieved from backend
-            data: getImpactAssessmentData()
+            data: values
         }
     ];
 

frontend/src/components/details/DetailsComponent.js

@@ -5,14 +5,15 @@ import { jsPDF } from 'jspdf';
 import html2canvas from 'html2canvas';
 import { Col, Container, Row } from 'react-grid-system';
 import './navbar.css';
-// import { postCalculationRequest } from 'interface/BackendConnect';
-
+import { postCalculationRequest } from 'interface/BackendConnect';
+import LoadingComponent from 'components/loading';
 /**
  * the main component for detail page which includes
  * canvas page and variable drop down list
  *
  * @param props the recently selected model of a product.
  */
+
 class DetailsComponent extends Component {
     /* State consists of three variable one for each of the possible state
      * baselineScenario: only display the baseline scenario
@@ -22,7 +23,8 @@ class DetailsComponent extends Component {
     state = {
         baselineScenario: true,
         modifiedScenario: false,
-        loadComparePage: false
+        loadComparePage: false,
+        stillLoading: true
     };
 
     render() {
@@ -82,17 +84,29 @@ class DetailsComponent extends Component {
                 pdf.save('invoice.pdf');
             });
         };
-
+        /*
+         * Important function that is given as the callback parameter to the postCalculationRequest in order to be called
+         * when the data processing is finished. Then the state stillLoading will be set to false.
+         * This change of state trigger the DetailsComponent to rerender and now display the charts and tables
+         * instead of the LoadingComponent.
+         */
+        let handleFinishedDataRequest = () => {
+            this.setState({ stillLoading: false });
+        };
         const scenarioNames = {
             baseline: 'Baseline Scenario',
             modified: 'Modified Scenario'
         };
         const { selectedProduct } = this.props;
 
-        // postCalculationRequest(selectedProduct.productID);
+        if (this.state.stillLoading) {
+            postCalculationRequest(selectedProduct.productID, handleFinishedDataRequest);
+            return <LoadingComponent loading />;
+        }
 
         if (this.state.baselineScenario) {
             // if state equals baseline scenario only
+            console.log(selectedProduct);
             return (
                 <Container className='ScenarioContainer' id='capture' fluid>
                     <Row>

frontend/src/components/details/MobileTableComponent.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Container } from 'react-grid-system';
 import {
     getImpactCategoriesTableHeaders,
-    getImpactCategoriesTableData
+    getImpactAssessmentData
 } from 'interface/projectInterface';
 import PropTypes from 'prop-types';
 
@@ -12,8 +12,8 @@ import PropTypes from 'prop-types';
  */
 class MobileTableComponent extends Component {
     state = {
-        headers: getImpactCategoriesTableHeaders(this.props.modelId),
-        rows: getImpactCategoriesTableData(this.props.modelId)
+        headers: getImpactCategoriesTableHeaders(),
+        rows: getImpactAssessmentData()
     };
     render() {
         const idKey = this.props.tableKey;
@@ -44,46 +44,16 @@ class MobileTableComponent extends Component {
                                 <th key={'table1' + idKey + 'thead' + header.key + index}>
                                     {header.value}
                                 </th>
-                                <td key={'table1' + idKey + 'thead' + header.key + index + '3'}>
+                                {getRowDataHelper(idKey, index, this.state.rows)}
+                                {/* <td key={'table1' + idKey + 'thead' + header.key + index + '3'}>
                                     {Object.values(this.state.rows[3])[index + 1]}
                                 </td>
                                 <td key={'table1' + idKey + 'thead' + header.key + index + '4'}>
                                     {Object.values(this.state.rows[4])[index + 1]}
                                 </td>
                                 <td key={'table1' + idKey + 'thead' + header.key + index + '5'}>
                                     {Object.values(this.state.rows[5])[index + 1]}
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-
-                <div style={{ margin: '20px' }} />
-
-                <table className='w3-table-all w3-card-4 w3-small w3-center'>
-                    {/* style needs to be defined in js */}
-                    <tbody>
-                        {this.state.headers.map((header, index) => (
-                            <tr
-                                style={
-                                    index === 0
-                                        ? { backgroundColor: '#d1a675', fontWeight: 'bold' }
-                                        : {}
-                                }
-                                key={'table2' + idKey + 'tr' + index}
-                            >
-                                <th key={'table2' + idKey + 'thead' + header.key + index}>
-                                    {header.value}
-                                </th>
-                                <td key={'table2' + idKey + 'thead' + header.key + index + '0'}>
-                                    {Object.values(this.state.rows[0])[index + 1]}
-                                </td>
-                                <td key={'table2' + idKey + 'thead' + header.key + index + '1'}>
-                                    {Object.values(this.state.rows[1])[index + 1]}
-                                </td>
-                                <td key={'table2' + idKey + 'thead' + header.key + index + '2'}>
-                                    {Object.values(this.state.rows[2])[index + 1]}
-                                </td>
+                                </td> */}
                             </tr>
                         ))}
                     </tbody>
@@ -94,10 +64,47 @@ class MobileTableComponent extends Component {
 }
 
 MobileTableComponent.propTypes = {
-    modelId: PropTypes.string.isRequired,
+    modelID: PropTypes.string.isRequired,
     productName: PropTypes.string.isRequired,
     modelName: PropTypes.string.isRequired,
     tableKey: PropTypes.string.isRequired
 };
 
 export default MobileTableComponent;
+
+/**
+ * Makes life a little bit easier, and developers a little bit happier.
+ * (By translating the row data to column data for the Mobile component)
+ *
+ * @param {*} idKey - allows unique id to be generated
+ * @param {number} rowIndex - the index of the current row
+ * @param rows - the rowdata that will be accesed
+ * @returns the <td/> element of the corresponding row
+ */
+function getRowDataHelper(idKey, rowIndex, rows) {
+    switch (rowIndex) {
+        case 0:
+            return <td key={idKey + 'Global Warming Mobile'}>{'Global Warming'}</td>;
+        case 1:
+            return (
+                <td key={idKey + 'kg CO2 eq Mobile'}>
+                    {'kg CO'}
+                    <sub>2</sub>
+                    {' eq'}{' '}
+                </td>
+            );
+        case 2:
+            return <td key={idKey + 'td-c'}>{rows.get('Total')}</td>;
+
+        case 3:
+            return <td key={idKey + 'td-e'}>{rows.get('Materials')}</td>;
+        case 4:
+            return <td key={idKey + 'td-b'}>{rows.get('Manufacturing and Transportation')}</td>;
+        case 5:
+            return <td key={idKey + 'td-g'}>{rows.get('Operation')}</td>;
+        case 6:
+            return <td key={idKey + 'td-h'}>{rows.get('End of life')}</td>;
+        default:
+            return <td />;
+    }
+}

frontend/src/components/details/NavbarComponent.js

@@ -8,7 +8,6 @@ import { useHistory } from 'react-router-dom';
  * a divider Pannel for seperating search compoents and result components
  * and also providing the comparison feature by compare button
  *
- * @author Parham Gandomkar, Irem Toroslu, Julian Oelhaf, Mani Anand
  */
 const NavbarComponent = (props) => {
     const history = useHistory();
@@ -19,7 +18,7 @@ const NavbarComponent = (props) => {
 
                 <div className='BackButton'>
                     <Link onClick={() => history.goBack()}>
-                        <i class='fa fa-chevron-left' aria-hidden='true' />
+                        <i className='fa fa-chevron-left' aria-hidden='true' />
                     </Link>
                 </div>
                 <div className='NavbarTitle'>

frontend/src/components/details/PanelComponent.jsx

@@ -6,7 +6,6 @@ import slugs from 'resources/slugs';
  * a divider Pannel for seperating search compoents and result components
  * and also providing the comparison feature by compare button
  *
- * @author Parham Gandomkar, Irem Toroslu, Julian Oelhaf
  */
 
 const PanelComponent = (props) => {