Implemented translation for the TableData

so that it can be displayed in the mobileTableComponent as well.
amosproj · Jun 29, 2021 · cc2c709 · cc2c709
1 parent 5185530
commit cc2c709
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 43 deletions.
diff --git a/frontend/src/components/details/MobileTableComponent.jsx b/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';
 
@@ -13,7 +13,7 @@ import PropTypes from 'prop-types';
 class MobileTableComponent extends Component {
     state = {
         headers: getImpactCategoriesTableHeaders(),
-        rows: getImpactCategoriesTableData()
+        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>
@@ -101,3 +71,40 @@ MobileTableComponent.propTypes = {
 };
 
 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 />;
+    }
+}
diff --git a/frontend/src/components/details/ScenarioComponent.js b/frontend/src/components/details/ScenarioComponent.js
@@ -53,7 +53,6 @@ class ScenarioComponent extends Component {
                             <PieChartComponent />
                         </Col>
                     </Row>
-                    <Row />
                     <Row>
                         <div className='TableContainer'>
                             {/* Swaps out the table with a mobile version for screens <= sm 
@@ -73,17 +72,11 @@ class ScenarioComponent extends Component {
                                 mdUp={this.props.loadComparePage ? false : true}
                                 xlUp={this.props.loadComparePage ? true : false}
                             >
-                                {/* <MobileTableComponent
+                                <MobileTableComponent
                                     productName={this.props.selectedProduct.productName}
                                     modelName={this.props.selectedProduct.modelName}
                                     modelID={this.props.selectedProduct.modelID}
                                     tableKey={this.props.scenarioName}
-                                /> */}
-                                <TableComponent
-                                    productName={this.props.selectedProduct.productName}
-                                    modelID={this.props.selectedProduct.modelID}
-                                    modelName={this.props.selectedProduct.modelName}
-                                    tableKey={this.props.scenarioName}
                                 />
                             </Hidden>
                         </div>