Skip to content

Commit

Permalink
Merge branch 'dev-#78' into dev-#106
Browse files Browse the repository at this point in the history
Merge Preparation and distribution of css Refactoring

Co-authored-by: Irem Toroslu <irem.toroslu@fau.de>
  • Loading branch information
Waldleufer and IremToroslu committed Jun 15, 2021
2 parents 36ede67 + 42de032 commit c34333a
Show file tree
Hide file tree
Showing 31 changed files with 466 additions and 14,051 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@ node_modules
.idea
/.vs/slnx.sqlite-journal
.vs/slnx.sqlite

frontend/yarn.lock
1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.4",
"@react-pdf/renderer": "^2.0.12",
"apexcharts": "^3.26.1",
"axios": "^0.21.1",
Expand Down
68 changes: 19 additions & 49 deletions frontend/src/components/cards/MiniCardComponent.js
Original file line number Diff line number Diff line change
@@ -1,55 +1,25 @@
import React from 'react';
import { Column } from 'simple-flexbox';
import { createUseStyles, useTheme } from 'react-jss';
const useStyles = createUseStyles((theme) => ({
container: {
backgroundColor: '#FFFFFF',
border: `3px solid ${theme.color.lightGrayishBlue2}`,
borderRadius: 4,
cursor: 'pointer',
maxWidth: 350,
minWidth: 210, // resizing the card min width
maxHeight: 150,
// marginTop:50,
// padding: '8px 16px 8px 16px',
'&:hover': {
borderColor: '#AE56FF',
'&:nth-child(n) > span': {
color: theme.color.lightBlue
}
}
},
title: {
...theme.typography.cardTitle,
color: theme.color.grayishBlue2,
marginBottom: 12,
minWidth: 205,
textAlign: 'center'
},
value: {
color: theme.color.veryDarkGrayishBlue,
fontWeight: 'inherit',
fontSize: 14,
letterSpacing: '1px',
lineHeight: '50px',
textAlign: 'center'
}
}));
import { Col, Container, Row } from 'react-grid-system';

// create cards for selection of the products

function MiniCardComponent({ className = '', title, value, path }) {
const theme = useTheme();
const classes = useStyles({ theme });
const composedClassName = [classes.container, className].join(' ');
/**
* creates cards for selection of the products in the Product Grid
*
* @param {*} props: The classname and the path that should be used.
* @returns
*/
function MiniCardComponent({ title, path }) {
return (
<Column flexGrow={1} className={composedClassName} horizontal='center' vertical='center'>
{/* Resize the image on the cards (product images) */}
<div style={{ width: 130, paddingTop: 20, paddingBottom: 20 }}>
{/* define the image path */}
<img src={path} alt='' />
</div>
</Column>
<Container fluid className='MiniCardImageContainer'>
<Col justify='center'>
{/* Resize the image on the cards (product images) */}
<Row align='center' justify='center'>
{/* define the image path */}
<Container fluid>
<img src={path} alt='' />
</Container>
</Row>
</Col>
</Container>
);
}

Expand Down
19 changes: 19 additions & 0 deletions frontend/src/components/cards/miniCard.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.MiniCardImageContainer {
background-color: #ffffff;
border: 3px solid lightslategray;
border-radius: 8px;
cursor: pointer;
max-width: 350px;
min-width: 210px;
max-height: 150px;
}

.MiniCardImageContainer:hover {
border-color: var(--global--active--highlighting-color);
}

.MiniCardImageContainer img {
margin: auto;
padding: 4px;
max-height: 130px;
}
8 changes: 7 additions & 1 deletion frontend/src/components/collapsible/CollapsibleContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,17 @@ import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { useScrollHeight } from 'react-collapsible-content';


const STATUS = {
COLLAPSED: 'COLLAPSED',
PRE_EXPANDED: 'PRE_EXPANDED',
EXPANDED: 'EXPANDED',
PRE_COLLAPSED: 'PRE_COLLAPSED'
};

/**
* This component returns the collapsible items on the sidebar component.
*/
function CollapsibleContent({
children,
expanded,
Expand All @@ -25,6 +29,9 @@ function CollapsibleContent({
onTransitionStart,
onTransitionEnd
});

/* This styling needs to be done in JS code.*/

let transitionStyles;
switch (status) {
case STATUS.EXPANDED:
Expand All @@ -42,7 +49,6 @@ function CollapsibleContent({
default:
transitionStyles = { maxHeight: scrollHeight, transitionDuration: '.001s' };
}

useEffect(() => {
if (expanded) {
if (status === STATUS.COLLAPSED) {
Expand Down
58 changes: 0 additions & 58 deletions frontend/src/components/details/CanvasComponent.jsx

This file was deleted.

5 changes: 2 additions & 3 deletions frontend/src/components/details/ColumnChartComponent.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import ReactApexChart from 'react-apexcharts';
import { getImpactAssessmentData, getLifeCycleStages } from 'interface/projectInterface';
import theme from 'resources/theme';

/**
* Column Chart
Expand Down Expand Up @@ -33,7 +32,7 @@ const ColumnChartComponent = () => {
}
},
fill: {
colors: ['#21cc82']//['#2cb5de']
colors: ['#21cc82'] //['#2cb5de']
},

dataLabels: {
Expand All @@ -44,7 +43,7 @@ const ColumnChartComponent = () => {
offsetY: -20,
style: {
fontSize: '12px',
colors: ['#21cc82']
colors: ['#21cc82']
}
},
yaxis: {
Expand Down
29 changes: 18 additions & 11 deletions frontend/src/components/details/DetailsComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,22 +59,28 @@ class DetailsComponent extends Component {

const scenarioNames = {
baseline: 'Baseline Scenario',
modified: 'modified Scenario'
modified: 'Modified Scenario'
};
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) {
return (
<Container id='capture' fluid={true} style={{ padding: 'auto' }}>
<Row style={{ padding: 0 }}>
<Col>
<Container id='capture' fluid style={noPaddingStyle}>
<Row style={noPaddingStyle}>
<Col style={noPaddingStyle}>
<ScenarioComponent
loadComparePage={this.state.loadComparePage}
onCompareClick={handleCompareButton}
onExportClicked={handleExportPdfButton}
scenarioName={scenarioNames}
scenarioName={scenarioNames.baseline}
selectedProduct={selectedProduct}
/>
</Col>
Expand All @@ -83,23 +89,24 @@ class DetailsComponent extends Component {
);
} else {
return (
<Container id='capture' fluid={true} style={{ padding: 0, margin: 0 }}>
<Row gutterWidth={0}>
<Col xs={6} sm={6} md={6} lg={6} style={{ padding: 0 }}>
<Container id='capture' fluid={true} style={noPaddingStyle}>
<Row gutterWidth={0} style={noPaddingStyle}>
<Col xs={6} sm={6} md={6} lg={6} style={{ paddingRight: 3 }}>
<ScenarioComponent
loadComparePage={this.state.loadComparePage}
onCompareClick={handleCompareButton}
scenarioName={scenarioNames}
scenarioName={scenarioNames.baseline}
selectedProduct={selectedProduct}
onExportClicked={handleExportPdfButton}
/>
</Col>

<Col xs={6} sm={6} md={6} lg={6} style={{ padding: 0 }}>
{/* Spacing between the two columns is specified by paddingLeft */}
<Col xs={6} sm={6} md={6} lg={6} style={{ paddingLeft: 3 }}>
<ScenarioComponent
loadComparePage={this.state.loadComparePage}
onCompareClick={handleCompareButton}
scenarioName={scenarioNames}
scenarioName={scenarioNames.modified}
selectedProduct={selectedProduct}
onExportClicked={handleExportPdfButton}
/>
Expand Down
95 changes: 95 additions & 0 deletions frontend/src/components/details/MobileTableComponent.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React, { Component } from 'react';
import { Container } from 'react-grid-system';
import {
getImpactCategoriesTableHeaders,
getImpactCategoriesTableData
} from 'interface/projectInterface';

/**
* Mobile version of the TableComponent. Restructures the Table to be displayable on a mobile screen.
* Switches Rows and Headers and splits the table in two parts.
*/
class MobileTableComponent extends Component {
state = {
headers: getImpactCategoriesTableHeaders(this.props.modelId),
rows: getImpactCategoriesTableData(this.props.modelId)
};
render() {
const idKey = this.props.key;
return (
<Container fluid={true}>
{/* dynamic display of product and model */}
<h5 className='TableTitle'>{this.props.productName}</h5>
<h6 className='TableSubTitle'>
{/* Don't display model name if model name == product name or undefined */}
{this.props.modelName === this.props.productName ||
this.props.modelName === undefined
? ''
: this.props.modelName}
</h6>

<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: '#82baa9', fontWeight: 'bold' }
: {}
}
key={'table1' + idKey + 'tr' + index}
>
<th key={'table1' + idKey + 'thead' + header.key + index}>
{header.value}
</th>
<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: '#82baa9', 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>
</tr>
))}
</tbody>
</table>
</Container>
);
}
}

export default MobileTableComponent;
2 changes: 1 addition & 1 deletion frontend/src/components/details/PieChartComponent.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const PieChartComponent = () => {
]
};
return (
<div className='ChartItems' style={{ width: '%100', height: '300px' }} id='chart'>
<div className='ChartItems' id='chart'>
<ReactApexChart options={options} series={series} type='donut' />
</div>
);
Expand Down
Loading

0 comments on commit c34333a

Please sign in to comment.