Implementation of #101 - Close comparison buttons

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,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import slugs from 'resources/slugs';
 import { Link } from 'react-router-dom';
@@ -12,40 +13,55 @@ import { Link } from 'react-router-dom';
 const NavbarComponent = (props) => {
     if (!props.loadComparePage) {
         return (
-            <div className='navbar w3-row' vertical='center' horizontal='space-between'>
+            <div className='navbar' vertical='center' horizontal='space-between'>
                 <Link to={{ pathname: slugs.categories }}>
-                    <btn className='w3-col l1 m1 s1 w3-center'>
-                        <i class='fa fa-chevron-left' aria-hidden='true' />
-                    </btn>
+                    <button className='w3-center'>
+                        <i className='fa fa-chevron-left' aria-hidden='true' />
+                    </button>
                 </Link>
-                <b className='w3-col l6 m6 s4'>{props.scenarioName}</b>
+                <b>{props.scenarioName}</b>
 
-                <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'></i>
+                        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' vertical='center' horizontal='space-between'>
+                <b>{props.scenarioName}</b>
+                <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;

frontend/src/components/details/ScenarioComponent.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import SelectVariableComponent from './SelectVariableComponent';
 import NavbarComponent from './NavbarComponent';
@@ -17,12 +18,15 @@ class ScenarioComponent extends Component {
         // 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.
         return (
             <Container fluid={true} style={{ padding: 0, margin: 0, backgroundColor: 'white' }}>
-                <NavbarComponent
-                    loadComparePage={this.props.loadComparePage}
-                    onCompareClick={this.props.onCompareClick}
-                    scenarioName={this.props.scenarioName}
-                    onExportClicked={this.props.onExportClicked}
-                />
+                <Row style={{ padding: 0, margin: 0 }}>
+                    <NavbarComponent
+                        loadComparePage={this.props.loadComparePage}
+                        onCompareClick={this.props.onCompareClick}
+                        scenarioName={this.props.scenarioName}
+                        onExportClick={this.props.onExportClick}
+                        onCloseClick={this.props.onCloseClick}
+                    />
+                </Row>
                 <Container fluid={true} style={{ padding: 'auto' }}>
                     <h2 className='TextContent'>
                         The chosen Model is <b>{this.props.selectedProduct.modelName}</b>
@@ -59,8 +63,9 @@ class ScenarioComponent extends Component {
                             >
                                 <TableComponent
                                     productName={this.props.selectedProduct.productName}
+                                    modelId={this.props.selectedProduct.modelId}
                                     modelName={this.props.selectedProduct.modelName}
-                                    key={this.props.scenarioName}
+                                    tableKey={this.props.scenarioName}
                                 />
                             </Hidden>
                             <Hidden
@@ -70,7 +75,8 @@ class ScenarioComponent extends Component {
                                 <MobileTableComponent
                                     productName={this.props.selectedProduct.productName}
                                     modelName={this.props.selectedProduct.modelName}
-                                    key={this.props.scenarioName}
+                                    modelId={this.props.selectedProduct.modelId}
+                                    tableKey={this.props.scenarioName}
                                 />
                             </Hidden>
                         </div>
@@ -81,4 +87,17 @@ class ScenarioComponent extends Component {
     }
 }
 
+ScenarioComponent.propTypes = {
+    loadComparePage: PropTypes.bool,
+    onCloseClick: PropTypes.func,
+    onCompareClick: PropTypes.func.isRequired,
+    onExportClick: PropTypes.func.isRequired,
+    scenarioName: PropTypes.string,
+    selectedProduct: PropTypes.shape({
+        modelId: PropTypes.string,
+        modelName: PropTypes.string,
+        productName: PropTypes.string
+    })
+};
+
 export default ScenarioComponent;