updating release branch with sprint 10 changes

frontend/src/components/cards/MiniCardComponent.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { Col, Container, Row } from 'react-grid-system';
 
@@ -7,7 +8,7 @@ import { Col, Container, Row } from 'react-grid-system';
  * @param {*} props: The classname and the path that should be used.
  * @returns
  */
-function MiniCardComponent({ title, path }) {
+function MiniCardComponent({ path }) {
     return (
         <Container fluid className='MiniCardImageContainer'>
             <Col justify='center'>
@@ -23,4 +24,8 @@ function MiniCardComponent({ title, path }) {
     );
 }
 
+MiniCardComponent.propTypes = {
+    path: PropTypes.string
+};
+
 export default MiniCardComponent;

frontend/src/components/details/DetailsComponent.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ScenarioComponent from './ScenarioComponent';
 import { jsPDF } from 'jspdf';
@@ -11,31 +12,56 @@ import './navbar.css';
  * canvas page and variable drop down list
  *
  * @param props the recently selected model of a product.
- * @author Parham Gandomkar, Martin Wagner, Irem Toroslu, Julian Oelhaf
  */
 class DetailsComponent extends Component {
+    /* State consists of three variable one for each of the possible state
+     * baselineScenario: only display the baseline scenario
+     * modifiedScenario: only display the modified scenario
+     * state at the beginng: only baseline scenario
+     */
     state = {
+        baselineScenario: true,
+        modifiedScenario: false,
         loadComparePage: false
     };
 
     render() {
         /*
-         the default canvas has to be divided into two canvases
-         an extra drop down button for second variable should be rendered
-         the compare button should be disabled 
+         * compare buttons exist only when a single scenario is displayed
+         * clicking the button should switch state to the show compare page state
          */
         let handleCompareButton = () => {
+            const baselineScenario = false;
+            const modifiedScenario = false;
             const loadComparePage = true;
-            /*
-            now all components such as 
-            canvas component should be notified 
-            by setting the compareCanvas state to true
-            */
-            this.setState({ loadComparePage });
+            this.setState({ baselineScenario, modifiedScenario, loadComparePage });
+        };
+        /*
+         * in the compare page each scenario has a close button
+         * that button should close that scenario and only display the other one
+         * so the close button of the modified scenario will hide the modified scenario and only display the baseline scenario
+         */
+        let handleCloseModifiedButton = () => {
+            const baselineScenario = true;
+            const modifiedScenario = false;
+            const loadComparePage = false;
+            this.setState({ baselineScenario, modifiedScenario, loadComparePage });
+        };
+
+        /*
+         * in the compare page each scenario has a close button
+         * that button should close that scenario and only display the other one
+         * so the close button of the baselin scenario will hide the baselin scenario and only display the modified scenario
+         */
+        let handleCloseBaselineButton = () => {
+            const baselineScenario = false;
+            const modifiedScenario = true;
+            const loadComparePage = false;
+            this.setState({ baselineScenario, modifiedScenario, loadComparePage });
         };
 
         let handleExportPdfButton = () => {
-            // geting the element that should be exported
+            // getting the element that should be exported
             var div = document.getElementById('capture');
 
             // converting html to an image and then exporting it by pdf
@@ -63,52 +89,67 @@ class DetailsComponent extends Component {
         };
         const { selectedProduct } = this.props;
 
-        // The styling of the Container, Row and Col can not be moved to css, as the css has a lower priority than the react-grid-system default.
-        const noPaddingStyle = {
-            padding: 0,
-            margin: 0
-        };
-
         // postCalculationRequest(selectedProduct.productID);
 
-        if (!this.state.loadComparePage) {
+        if (this.state.baselineScenario) {
+            // if state equals baseline scenario only
             return (
-                <Container id='capture' fluid style={noPaddingStyle}>
-                    <Row style={noPaddingStyle}>
-                        <Col style={noPaddingStyle}>
+                <Container className='ScenarioContainer' id='capture' fluid>
+                    <Row>
+                        <Col>
                             <ScenarioComponent
                                 loadComparePage={this.state.loadComparePage}
                                 onCompareClick={handleCompareButton}
-                                onExportClicked={handleExportPdfButton}
+                                onExportClick={handleExportPdfButton}
                                 scenarioName={scenarioNames.baseline}
                                 selectedProduct={selectedProduct}
                             />
                         </Col>
                     </Row>
                 </Container>
             );
-        } else {
+        } else if (this.state.modifiedScenario) {
+            // if state equals modified scenario only
             return (
-                <Container id='capture' fluid={true} style={noPaddingStyle}>
-                    <Row gutterWidth={0} style={noPaddingStyle}>
-                        <Col xs={6} sm={6} md={6} lg={6} style={{ paddingRight: 3 }}>
+                <Container className='ScenarioContainer' id='capture' fluid>
+                    <Row>
+                        <Col>
                             <ScenarioComponent
                                 loadComparePage={this.state.loadComparePage}
                                 onCompareClick={handleCompareButton}
+                                onExportClick={handleExportPdfButton}
+                                scenarioName={scenarioNames.modified}
+                                selectedProduct={selectedProduct}
+                            />
+                        </Col>
+                    </Row>
+                </Container>
+            );
+        } else if (this.state.loadComparePage) {
+            // if state equals compare scenario
+            return (
+                <Container className='ScenarioContainer' id='capture' fluid>
+                    <Row gutterWidth={0}>
+                        <Col className='CompareColLeft' xs={6} sm={6} md={6} lg={6}>
+                            <ScenarioComponent
+                                loadComparePage={this.state.loadComparePage}
+                                onCompareClick={handleCompareButton}
+                                onExportClick={handleExportPdfButton}
+                                onCloseClick={handleCloseBaselineButton}
                                 scenarioName={scenarioNames.baseline}
                                 selectedProduct={selectedProduct}
-                                onExportClicked={handleExportPdfButton}
                             />
                         </Col>
 
                         {/* Spacing between the two columns is specified by paddingLeft */}
-                        <Col xs={6} sm={6} md={6} lg={6} style={{ paddingLeft: 3 }}>
+                        <Col className='CompareColRight' xs={6} sm={6} md={6} lg={6}>
                             <ScenarioComponent
                                 loadComparePage={this.state.loadComparePage}
                                 onCompareClick={handleCompareButton}
+                                onExportClick={handleExportPdfButton}
+                                onCloseClick={handleCloseModifiedButton}
                                 scenarioName={scenarioNames.modified}
                                 selectedProduct={selectedProduct}
-                                onExportClicked={handleExportPdfButton}
                             />
                         </Col>
                     </Row>
@@ -118,4 +159,15 @@ class DetailsComponent extends Component {
     }
 }
 
+DetailsComponent.propTypes = {
+    selectedProduct: PropTypes.shape({
+        categories: PropTypes.array, // [(categories.generation, categories.transmission)],
+        modelID: PropTypes.string, // 'none',
+        modelName: PropTypes.string, // 'please select a Product',
+        productID: PropTypes.string, // 'dummydum-13b0-4e09-9fb4-50398483ecfd'
+        productImage: PropTypes.string, //ImagePath?
+        productName: PropTypes.string //'please select a Product'
+    })
+};
+
 export default DetailsComponent;

frontend/src/components/details/MobileTableComponent.jsx

@@ -4,6 +4,7 @@ import {
     getImpactCategoriesTableHeaders,
     getImpactCategoriesTableData
 } from 'interface/projectInterface';
+import PropTypes from 'prop-types';
 
 /**
  * Mobile version of the TableComponent. Restructures the Table to be displayable on a mobile screen.
@@ -15,7 +16,7 @@ class MobileTableComponent extends Component {
         rows: getImpactCategoriesTableData(this.props.modelId)
     };
     render() {
-        const idKey = this.props.key;
+        const idKey = this.props.tableKey;
         return (
             <Container fluid={true}>
                 {/* dynamic display of product and model */}
@@ -92,4 +93,11 @@ class MobileTableComponent extends Component {
     }
 }
 
+MobileTableComponent.propTypes = {
+    modelId: PropTypes.string.isRequired,
+    productName: PropTypes.string.isRequired,
+    modelName: PropTypes.string.isRequired,
+    tableKey: PropTypes.string.isRequired
+};
+
 export default MobileTableComponent;

frontend/src/components/details/NavbarComponent.js

@@ -1,51 +1,73 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import slugs from 'resources/slugs';
 import { Link } from 'react-router-dom';
+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
+ * @author Parham Gandomkar, Irem Toroslu, Julian Oelhaf, Mani Anand
  */
-
 const NavbarComponent = (props) => {
+    const history = useHistory();
     if (!props.loadComparePage) {
         return (
-            <div className='navbar w3-row' vertical='center' horizontal='space-between'>
-                <Link to={{ pathname: slugs.categories }}>
-                    <btn className='w3-col l1 m1 s1 w3-center'>
+            <div className='navbar' vertical='center' horizontal='space-between'>
+                {/* used the history.goback() function to go one step backward where it stores the previous steps including the prevs stage of clicking items on the sidebar */}
+
+                <div className='BackButton'>
+                    <Link onClick={() => history.goBack()}>
                         <i class='fa fa-chevron-left' aria-hidden='true' />
-                    </btn>
-                </Link>
-                <b className='w3-col l6 m6 s4'>{props.scenarioName}</b>
+                    </Link>
+                </div>
+                <div className='NavbarTitle'>
+                    <b>{props.scenarioName}</b>
+                </div>
 
-                <Link to={{ pathname: slugs.details }} onClick={props.onExportClicked}>
-                    <pdfbtn className='w3-col l3 m3 s4'>
-                        <i className='fa fa-file-pdf-o w3-margin-right' aria-hidden='true'></i>
-                        Export Pdf
-                    </pdfbtn>
+                <Link to={{ pathname: slugs.details }} onClick={props.onExportClick}>
+                    <div className='Pdfbtn'>
+                        <i className='fa fa-file-pdf-o ' aria-hidden='true' />
+                        Export
+                    </div>
                 </Link>
                 <Link to={{ pathname: slugs.details }} onClick={props.onCompareClick}>
-                    <addbtn className='w3-col l2 m2 s2 w3-right'>
+                    <div className='Addbtn'>
                         <i className='fa fa-fw fa-plus-circle' /> Add
-                    </addbtn>
+                    </div>
                 </Link>
             </div>
         );
     } else {
         return (
-            <div className='navbar w3-row' vertical='center' horizontal='space-between'>
-                <b className='w3-col l7 m7 s6'>{props.scenarioName}</b>
-                <Link to={{ pathname: slugs.details }} onClick={props.onExportClicked}>
-                    <pdfbtn className='w3-col l5 m5 s6 w3-right'>
-                        <i className='fa fa-file-pdf-o w3-margin-right' aria-hidden='true'></i>
-                        Export Pdf
-                    </pdfbtn>
+            <div className='navbar'>
+                <div className='NavbarTitle'>
+                    <b>{props.scenarioName}</b>
+                </div>
+                <Link to={{ pathname: slugs.details }} onClick={props.onExportClick}>
+                    <div className='Pdfbtn'>
+                        <i className='fa fa-file-pdf-o ' aria-hidden='true'></i>
+                        Export
+                    </div>
+                </Link>
+
+                <Link to={{ pathname: slugs.details }} onClick={props.onCloseClick}>
+                    <div className='Closebtn '>
+                        <i className='fa fa-times-circle-o' aria-hidden='true'></i>
+                    </div>
                 </Link>
             </div>
         );
     }
 };
 
+NavbarComponent.propTypes = {
+    loadComparePage: PropTypes.bool.isRequired,
+    onCloseClick: PropTypes.func,
+    onCompareClick: PropTypes.func,
+    onExportClick: PropTypes.func.isRequired,
+    scenarioName: PropTypes.string.isRequired
+};
+
 export default NavbarComponent;

frontend/src/components/details/PanelComponent.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import slugs from 'resources/slugs';
 
@@ -26,4 +27,10 @@ const PanelComponent = (props) => {
     );
 };
 
+PanelComponent.propTypes = {
+    onCompareClick: PropTypes.func,
+    onExportClicked: PropTypes.func,
+    scenarioName: PropTypes.string
+};
+
 export default PanelComponent;