Merge pull request #63 from amosproj/frontend-dev

Sprint 6 Frontend
amosproj · May 25, 2021 · 4aae369 · 4aae369
2 parents 2a3a7f1 + ce6749b
commit 4aae369
Show file tree

Hide file tree

Showing 20 changed files with 2,169 additions and 237 deletions.
diff --git a/README.md b/README.md
@@ -59,6 +59,10 @@ All the information that is essential to the build and deployment process is unf
     -   details
     -   settings
 
+-   **/utilities**:
+    code that purely functional
+    - PdfReport.js: create the PDF report
+
 ## [Backend](/backend) Folder Structure
 
 ### base folder: [/backend](/backend):
@@ -96,6 +100,10 @@ Includes the git files, Solution.sln, and a [project] folder for every [project]
 
 - [react-apexcharts](https://www.npmjs.com/package/react-apexcharts): pie and column chart
 
+- [jsPDF](https://www.npmjs.com/package/jspdf):  library to generate PDFs in JavaScript
+
+- [jQuery](https://www.npmjs.com/package/jquery): JavaScript library for DOM operations
+
 - [axios](https://www.npmjs.com/package/axios): frontend and backend connection
 
 **Backend**:
@@ -116,6 +124,7 @@ Includes the git files, Solution.sln, and a [project] folder for every [project]
   * Run yarn install to install all used dependencies
   * Run yarn start to start the development server
 
+
 ## Setup and start of the Backend
 
 ### General

diff --git a/frontend/package.json b/frontend/package.json
@@ -3,7 +3,11 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
+        "@react-pdf/renderer": "^2.0.12",
         "apexcharts": "^3.26.1",
+        "html2canvas": "^1.0.0-rc.7",
+        "jspdf": "^2.3.1",
+        "jspdf-autotable": "^3.5.14",
         "prop-types": "^15.7.2",
         "react": "^16.13.1",
         "react-apexcharts": "^1.3.9",

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -6,7 +6,9 @@
         <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" />
-        <meta name="viewport" content="width=device-width, initial-scale=2" />
+        <meta name="viewport" content="width=device-width, initial-scale=0.5" />
+        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css" />
+
         <meta name="theme-color" content="#000000" />
         <!--
           manifest.json provides metadata used when your web app is installed on a

diff --git a/frontend/src/assets/icons/icon-browse.js b/frontend/src/assets/icons/icon-browse.js
@@ -2,8 +2,17 @@ import React from 'react';
 
 /* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */
 export default (props) => (
-<svg widht='20' height='20' fill="none" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1024 1024">
-  <path opacity={props.opacity || ''} d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zm-180 0H238c-13 0-24.8 7.9-29.7 20L136 643.2V256h188.5l119.6 114.4H748V444z"
-     fill={props.fill || "#9FA2B4"} />
-</svg>
-)
+    <svg
+        widht='20'
+        height='20'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+        viewBox='0 0 1024 1024'
+    >
+        <path
+            opacity={props.opacity || ''}
+            d='M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zm-180 0H238c-13 0-24.8 7.9-29.7 20L136 643.2V256h188.5l119.6 114.4H748V444z'
+            fill={props.fill || '#9FA2B4'}
+        />
+    </svg>
+);
diff --git a/frontend/src/assets/icons/icon-power.js b/frontend/src/assets/icons/icon-power.js
@@ -2,9 +2,17 @@ import React from 'react';
 
 /* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */
 export default (props) => (
-
- <svg width="18" height="18" fill='grey' xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1024 1024">
-    <path opacity={props.opacity || ''} d="M705.6 124.9a8 8 0 0 0-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0 1 62.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0 1 27.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 0 1-76.3 113.3 353.06 353.06 0 0 1-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 0 1-113.2-76.4A355.92 355.92 0 0 1 184 650.4a355 355 0 0 1-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
-    fill={props.fill || "#9FA2B4"}/>
-  </svg>
-)
+    <svg
+        width='18'
+        height='18'
+        fill='grey'
+        xmlns='http://www.w3.org/2000/svg'
+        viewBox='0 0 1024 1024'
+    >
+        <path
+            opacity={props.opacity || ''}
+            d='M705.6 124.9a8 8 0 0 0-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0 1 62.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0 1 27.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 0 1-76.3 113.3 353.06 353.06 0 0 1-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 0 1-113.2-76.4A355.92 355.92 0 0 1 184 650.4a355 355 0 0 1-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z'
+            fill={props.fill || '#9FA2B4'}
+        />
+    </svg>
+);
diff --git a/frontend/src/components/details/CanvasComponent.jsx b/frontend/src/components/details/CanvasComponent.jsx
@@ -9,7 +9,6 @@ import React, { Component } from 'react';
 import PieChart from './PieChartComponent';
 import ColumnChart from './ColumnChartComponent';
 import Table from './TableComponent';
-import { Container, Row, Col } from 'react-grid-system';
 import theme from 'resources/theme';
 import CompareCanvas from './CompareCanvas';
 
@@ -27,41 +26,44 @@ class CanvasComponent extends Component {
         a canvas page without any comparisons 
         */
             return (
-                <Container fluid={true}>
-                    <Row>
-                        <Col xs={5} style={{ marginTop: 30 }}>
+                <div className='w3-row w3-container' fluid='true'>
+                    <div className='w3-row'>
+                        <div className='w3-col l6 m6 s12 w3-left' style={{ marginTop: 30 }}>
                             <h3
                                 style={{
                                     fontSize: theme.typography.subtitle.fontSize,
                                     fontWeight: theme.typography.subtitle.fontWeight,
                                     lineHeight: theme.typography.subtitle.lineHeight,
                                     letterSpacing: theme.typography.subtitle.letterSpacing,
-                                    marginLeft: 100
+                                    marginLeft: 90
                                 }}
                             >
                                 {' '}
-                                Material Composition{' '}
+                                Results of the impact assessment{' '}
                             </h3>
-                            <PieChart />
-                        </Col>
-                        <Col xs={5} style={{ marginTop: 30, marginLeft: 20 }}>
+                            <ColumnChart />
+                        </div>
+                        <div className='w3-col l6 m6 s12 w3-right' style={{ marginTop: 30 }}>
                             <h3
                                 style={{
                                     fontSize: theme.typography.subtitle.fontSize,
                                     fontWeight: theme.typography.subtitle.fontWeight,
                                     lineHeight: theme.typography.subtitle.lineHeight,
                                     letterSpacing: theme.typography.subtitle.letterSpacing,
-                                    marginLeft: 90
+                                    marginLeft: 100
                                 }}
                             >
                                 {' '}
-                                Results of the impact assessment{' '}
+                                Material Composition{' '}
                             </h3>
-                            <ColumnChart />
-                        </Col>
-                    </Row>
-                    <Row>
-                        <Col xs={10} style={{ marginTop: 30, marginBottom: 30 }}>
+                            <PieChart />
+                        </div>
+                    </div>
+                    <div className='w3-row'>
+                        <div
+                            className='w3-col l12 m12 s12'
+                            style={{ marginTop: 30, marginBottom: 30 }}
+                        >
                             <h3
                                 style={{
                                     fontSize: theme.typography.subtitle.fontSize,
@@ -73,10 +75,10 @@ class CanvasComponent extends Component {
                                 {' '}
                                 Impact categories{' '}
                             </h3>
-                            <Table />
-                        </Col>
-                    </Row>
-                </Container>
+                            <Table id='table-0' />
+                        </div>
+                    </div>
+                </div>
             );
         }
     }

diff --git a/frontend/src/components/details/CompareCanvas.jsx b/frontend/src/components/details/CompareCanvas.jsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import PieChart from './PieChartComponent';
 import ColumnChart from './ColumnChartComponent';
-import Table from './TableComponent';
-import { Col, Container, Row } from 'react-grid-system';
+import TableComponent from './TableComponent';
 import theme from 'resources/theme';
 
 /**
@@ -17,41 +16,41 @@ import theme from 'resources/theme';
 
 const CompareCanvas = () => {
     return (
-        <Container fluid={true}>
-            <Row>
-                <Col xs={5} style={{ marginRight: 150 }}>
+        <div className='w3-row w3-container' fluid='true'>
+            <div className='w3-row'>
+                <div className='w3-col l6 m6 s6 w3-left'>
                     <h3
                         style={{
                             fontSize: theme.typography.subtitle.fontSize,
                             fontWeight: theme.typography.subtitle.fontWeight,
                             lineHeight: theme.typography.subtitle.lineHeight,
                             letterSpacing: theme.typography.subtitle.letterSpacing,
-                            marginLeft: 120
+                            marginLeft: 60
                         }}
                     >
                         {' '}
                         Material Composition{' '}
                     </h3>
                     <PieChart />
-                </Col>
-                <Col xs={5}>
+                </div>
+                <div className='w3-col l5 m5 s5 w3-right'>
                     <h3
                         style={{
                             fontSize: theme.typography.subtitle.fontSize,
                             fontWeight: theme.typography.subtitle.fontWeight,
                             lineHeight: theme.typography.subtitle.lineHeight,
                             letterSpacing: theme.typography.subtitle.letterSpacing,
-                            marginLeft: 120
+                            marginLeft: 60
                         }}
                     >
                         {' '}
                         Material Composition{' '}
                     </h3>
                     <PieChart />
-                </Col>
-            </Row>
-            <Row>
-                <Col xs={5} style={{ marginRight: 150 }}>
+                </div>
+            </div>
+            <div className='w3-row'>
+                <div className='w3-col l6 m6 s6 w3-left w3-padding'>
                     <h3
                         style={{
                             fontSize: theme.typography.subtitle.fontSize,
@@ -65,8 +64,8 @@ const CompareCanvas = () => {
                         Results of the impact assessment{' '}
                     </h3>
                     <ColumnChart />
-                </Col>
-                <Col xs={5}>
+                </div>
+                <div className='w3-col l6 m6 s6 w3-right w3-padding'>
                     <h3
                         style={{
                             fontSize: theme.typography.subtitle.fontSize,
@@ -80,11 +79,11 @@ const CompareCanvas = () => {
                         Results of the impact assessment{' '}
                     </h3>
                     <ColumnChart />
-                </Col>
-            </Row>
+                </div>
+            </div>
 
-            <Row>
-                <Col xs={10}>
+            <div className='w3-row'>
+                <div className='w3-col l12 m12 s12' style={{ marginTop: 30, marginBottom: 30 }}>
                     <h3
                         style={{
                             fontSize: theme.typography.subtitle.fontSize,
@@ -96,11 +95,11 @@ const CompareCanvas = () => {
                         {' '}
                         Impact categories{' '}
                     </h3>
-                    <Table />
-                </Col>
-            </Row>
-            <Row className='w3-margin-top'>
-                <Col xs={10}>
+                    <TableComponent id='table-1' />
+                </div>
+            </div>
+            <div className='w3-row'>
+                <div className='w3-col l12 m12 s12' style={{ marginTop: 30, marginBottom: 30 }}>
                     <h3
                         style={{
                             fontSize: theme.typography.subtitle.fontSize,
@@ -113,11 +112,11 @@ const CompareCanvas = () => {
                         Impact categories{' '}
                     </h3>
                     <div style={{ marginBottom: 30 }}>
-                        <Table />
+                        <TableComponent id='table-2' />
                     </div>
-                </Col>
-            </Row>
-        </Container>
+                </div>
+            </div>
+        </div>
     );
 };