- {/* define the image path */}
-
+
+ {/* define the image path */}
+
-
{title}
-
{value}
);
diff --git a/frontend/src/components/details/CanvasComponent.jsx b/frontend/src/components/details/CanvasComponent.jsx
index 3eeb39b7..aebfde8e 100644
--- a/frontend/src/components/details/CanvasComponent.jsx
+++ b/frontend/src/components/details/CanvasComponent.jsx
@@ -2,42 +2,84 @@
in this main component come all the canvas page components
such as diagrams and tables
-@author parham, 08.05
+@author Parham Gandomkar, Irem Toroslu
*/
import React, { Component } from 'react';
import PieChart from './PieChartComponent';
import ColumnChart from './ColumnChartComponent';
-import Table from './TableComponent'
-import './canvas.css';
-import {Container, Row, Col } from 'react-grid-system';
+import Table from './TableComponent';
+import { Container, Row, Col } from 'react-grid-system';
+import theme from 'resources/theme';
+import CompareCanvas from './CompareCanvas';
-
-class CanvasPage extends Component {
+class CanvasComponent extends Component {
render() {
- return (
-
-
-
- Material Composition
-
-
-
- Results of the impact assessment
-
-
-
-
-
- Impact categories
-
-
-
-
-
-
- );
+ /*
+ if the loadComparePage state from its parrent (the detail Component)
+ is set to true, here the canvas page should be divided into two canvases
+ */
+ if (this.props.loadComparePage) {
+ return
;
+ } else {
+ /*
+ the normal scenario
+ a canvas page without any comparisons
+ */
+ return (
+
+
+
+
+ {' '}
+ Material Composition{' '}
+
+
+
+
+
+ {' '}
+ Results of the impact assessment{' '}
+
+
+
+
+
+
+
+ {' '}
+ Impact categories{' '}
+
+
+
+
+
+ );
+ }
}
}
-export default CanvasPage;
+export default CanvasComponent;
diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx
index cdcde63d..6fbda20f 100644
--- a/frontend/src/components/details/ColumnChartComponent.jsx
+++ b/frontend/src/components/details/ColumnChartComponent.jsx
@@ -6,6 +6,7 @@
import React, { Component } from 'react';
import ReactApexChart from 'react-apexcharts';
import {getResultsImpactAssessment} from 'interface/projectInterface';
+import theme from 'resources/theme';
const ColumnChartComponent = () => {
const series = [{
@@ -20,11 +21,15 @@ const ColumnChartComponent = () => {
type: 'bar',
height: '150'
},
+
plotOptions: {
bar: {
- color: '#00308F',
columnWidth: '60%',
}
+
+ },
+ fill: {
+ colors: [theme.uniformStyle.color.barChartColor]
},
dataLabels: {
enabled: false,
@@ -39,7 +44,13 @@ const ColumnChartComponent = () => {
labels: {
formatter: function (y) {
return y.toFixed(0) + "%";
- }
+ },
+ style: {
+ fontSize: theme.typography.chartItemstitle.fontSize,
+ fontWeight: theme.typography.chartItemstitle.fontWeight
+ }
+
+
}
},
xaxis: {
@@ -47,7 +58,11 @@ const ColumnChartComponent = () => {
'Materials', 'Manufacturing and Transport', 'Operation 30a (75% load)', 'End of Life'
],
labels: {
- rotate: -90
+ rotate: -90,
+ style: {
+ fontSize: theme.typography.chartItemstitle.fontSize,
+ fontWeight: theme.typography.chartItemstitle.fontWeight
+ }
}
}
};
@@ -57,7 +72,7 @@ const ColumnChartComponent = () => {
return (
-
+
);
diff --git a/frontend/src/components/details/CompareCanvas.jsx b/frontend/src/components/details/CompareCanvas.jsx
new file mode 100644
index 00000000..19ddfb44
--- /dev/null
+++ b/frontend/src/components/details/CompareCanvas.jsx
@@ -0,0 +1,123 @@
+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';
+/**
+ * This component displays the difference/comparison between the dashboards of two different type of variables of the same model
+ * will be compared when clicking on the "comparison" button.
+ *
+ * @returns the dasboard comparison
+ * @author Parham Gandomkar, Irem Toroslu
+ *
+ *
+ */
+
+const CompareCanvas = () => {
+ return (
+
+
+
+
+ {' '}
+ Material Composition{' '}
+
+
+
+
+
+ {' '}
+ Material Composition{' '}
+
+
+
+
+
+
+
+ {' '}
+ Results of the impact assessment{' '}
+
+
+
+
+
+ {' '}
+ Results of the impact assessment{' '}
+
+
+
+
+
+
+
+
+ {' '}
+ Impact categories{' '}
+
+
+
+
+
+
+
+ {' '}
+ Impact categories{' '}
+
+
+
+
+
+ );
+};
+
+export default CompareCanvas;
diff --git a/frontend/src/components/details/CompareVariablesComponent.jsx b/frontend/src/components/details/CompareVariablesComponent.jsx
new file mode 100644
index 00000000..46ffe498
--- /dev/null
+++ b/frontend/src/components/details/CompareVariablesComponent.jsx
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import theme from 'resources/theme';
+
+/**
+a drop down component for selecting variables
+if we need to compare two variables
+
+ @author Parham Gandomkar
+*/
+const CompareVariablesComponent = (props) => {
+ const {state} = props;
+ return (
+
+
+ Pick your desire variable:
+
+
+
+
+
+
+
+
+
+
);
+}
+
+export default CompareVariablesComponent;
\ No newline at end of file
diff --git a/frontend/src/components/details/DetailsComponent.js b/frontend/src/components/details/DetailsComponent.js
index 190908d0..7676b8f5 100644
--- a/frontend/src/components/details/DetailsComponent.js
+++ b/frontend/src/components/details/DetailsComponent.js
@@ -1,24 +1,59 @@
+import React, { Component, useContext } from 'react';
+import Canvas from './CanvasComponent';
+import SelectVariable from './SelectVariableComponent';
+import DividerPanel from './PanelComponent';
+import theme from 'resources/theme';
+
/**
- * the main component for detail page which includes
- * canvas page and variable drop down list
- *
- * @author parham, 08.05
+ * the main component for detail page which includes
+ * canvas page and variable drop down list
+ *
+ * @param props the recently selected model of a product.
+ * @author Parham Gandomkar, Martin Wagner
*/
+class DetailsComponent extends Component {
+ state = {
+ compareCanvas: false
+ };
-import React, {Component, useContext} from 'react';
-import Canvas from './CanvasComponent';
-import SelectVariable from './SelectVariableComponent';
-import {PrivateSectionContext} from "hooks/PrivateSectionContext";
+ render() {
+ let styleSubtitle = {
+ fontSize: theme.typography.subtitle.fontSize,
+ fontWeight: theme.typography.subtitle.fontWeight,
+ lineHeight: theme.typography.subtitle.lineHeight,
+ letterSpacing: theme.typography.subtitle.letterSpacing,
+ marginLeft: 15
+ };
+ /*
+ 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
+ */
+ let handleCompareButton = () => {
+ const compareCanvas = true;
+ /*
+ now all components such as
+ canvas component should be notified
+ by setting the compareCanvas state to true
+ */
+ this.setState({ compareCanvas });
+ };
+ const { selectedProduct } = this.props;
-function DetailInfo() {
- const [ selectedProducts, setSelectedProducts ] = useContext(PrivateSectionContext);
return (
- The chosen Model is {selectedProducts[0].modelName}
-
-
+ The chosen Model is {selectedProduct.modelName}
+
+
+
+
+
);
+ }
}
-export default DetailInfo;
+export default DetailsComponent;
diff --git a/frontend/src/components/details/PanelComponent.jsx b/frontend/src/components/details/PanelComponent.jsx
new file mode 100644
index 00000000..fbae78e9
--- /dev/null
+++ b/frontend/src/components/details/PanelComponent.jsx
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import theme from 'resources/theme';
+
+/**
+ * a divider Pannel for seperating search compoents and result components
+ * and also providing the comparison feature by compare button
+ *
+ * @author Parham Gandomkar, Irem Toroslu
+ */
+
+const PanelComponent = (props) => {
+ return (
+
+
+
+
Canvas page
+
+
+ {/* calling the compare button by using props which its parrent has provided*/}
+
+
+
+
+ );
+};
+
+export default PanelComponent;
diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
index 683cc517..33b61d07 100644
--- a/frontend/src/components/details/PieChartComponent.jsx
+++ b/frontend/src/components/details/PieChartComponent.jsx
@@ -1,13 +1,13 @@
+import React, { Component } from 'react';
+import ReactApexChart from 'react-apexcharts';
+import { getMaterialComposition } from 'interface/projectInterface';
+import theme from 'resources/theme';
/**
* Pie Chart Diagram
*
- * @author parham, Julian
+ * @author Parham Gandomkar, Julian Oelhaf, Irem Toroslu
*/
-import React, { Component } from 'react';
-import ReactApexChart from 'react-apexcharts';
-import { getMaterialComposition} from 'interface/projectInterface';
-
-const PieChartDiagramComponent = () => {
+const PieChartComponent = () => {
//const series = [17, 13, 3, 2, 1, 42, 21];
const series = getMaterialComposition();
//series.sort();
@@ -17,6 +17,10 @@ const PieChartDiagramComponent = () => {
chart: {
type: 'donut'
},
+ legend: {
+ fontSize: theme.typography.chartItemstitle.fontSize,
+ fontWeight: theme.typography.chartItemstitle.fontWeight
+ },
labels: [
'Transformer oil',
'Steel',
@@ -26,16 +30,35 @@ const PieChartDiagramComponent = () => {
'Silicon steel',
'Copper'
],
- colors: ['#040f13', '#0b2d39', '#165a72', '#2596be', '#3ba1c5', '#00308F', '#d3eaf2'],
+ colors: [
+ theme.color.TransformerOil,
+ theme.color.Steel,
+ theme.color.Pressboard,
+ theme.color.StainlessSteel,
+ theme.color.Alminium,
+ theme.color.SiliconSteel,
+ theme.color.Copper
+ ],
fill: {
- type: 'gradient'
+ type: 'gradient',
+ gradient: {
+ shade: 'dark',
+ type: 'horizontal',
+ shadeIntensity: 0.5,
+ gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
+ inverseColors: true,
+ opacityFrom: 1,
+ opacityTo: 1,
+ stops: [0, 50, 100],
+ colorStops: []
+ }
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
- height: '400px'
+ height: '300px'
},
legend: {
position: 'bottom'
@@ -46,12 +69,10 @@ const PieChartDiagramComponent = () => {
};
return (
-
-
-
+
);
};
-export default PieChartDiagramComponent;
+export default PieChartComponent;
diff --git a/frontend/src/components/details/SelectVariableComponent.jsx b/frontend/src/components/details/SelectVariableComponent.jsx
index 20544f95..431ca4bd 100644
--- a/frontend/src/components/details/SelectVariableComponent.jsx
+++ b/frontend/src/components/details/SelectVariableComponent.jsx
@@ -1,9 +1,12 @@
+import React, { Component } from 'react';
+import theme from 'resources/theme';
+import CompareVariablesComponent from './CompareVariablesComponent';
+
/**
a drop down component for selecting variable
-@author parham, 08.05
+ @author Parham Gandomkar, Irem Toroslu
*/
-import React, { Component } from 'react';
class SelectVariableComponent extends Component {
/*
@@ -16,10 +19,11 @@ class SelectVariableComponent extends Component {
*/
state = {
selectedVariable: 'variable 1',
+ secondVariable: 'variable 2',
variables: [
- { id: '1', country: 'variable 1' },
- { id: '2', country: 'variable 2' },
- { id: '3', country: 'variable 3' }
+ { id: '1', name: 'variable 1' },
+ { id: '2', name: 'variable 2' },
+ { id: '3', name: 'variable 3' }
]
};
@@ -27,33 +31,53 @@ class SelectVariableComponent extends Component {
alert('The choosen variable is: ' + this.state.selectedVariable);
};
- onDropDownItemSelectedHandler = (country) => {
- const selectedVariable = country;
+ onDropDownItemSelectedHandler = (name) => {
+ const selectedVariable = name;
this.setState({ selectedVariable });
};
+ onSecondDropDownSelectedHandler = (name) => {
+ const secondVariable = name;
+ this.setState({ secondVariable });
+ };
+
render() {
+ /*
+ if the loadComparePage state from its parrent (the detail Component)
+ is set to true, here an extra drop down for the second variable
+ should be rendered
+ */
+ if (this.props.loadComparePage) {
+ return (
+
+ );
+ }
return (
Pick your desire variable:
-
);
diff --git a/frontend/src/components/details/TableComponent.jsx b/frontend/src/components/details/TableComponent.jsx
index 96ddf7b9..eb0f068d 100644
--- a/frontend/src/components/details/TableComponent.jsx
+++ b/frontend/src/components/details/TableComponent.jsx
@@ -1,6 +1,15 @@
import React, { Component } from 'react';
-
-class DetailTable extends Component {
+import { Container } from 'react-grid-system';
+import theme from 'resources/theme';
+/**
+ *
+ * @returns the impact catagories table of the selected model of the related product.
+ *
+ * @author Parham Gandomkar, Irem Toroslu
+ *
+ *
+ */
+class TableComponent extends Component {
state = {
headers: [
{ id: '1', value: 'Impact Category' },
@@ -76,14 +85,16 @@ class DetailTable extends Component {
};
render() {
return (
-
+ // TODO:left margin value needed to be fixed
+
+
{/* TODO: dynamic display of product and model */}
- Large Power Transformer
- 3 Phase GSU transformer
+ Large Power Transformer
+ 3 Phase GSU transformer
-
+
{this.state.headers.map((item) => (
| {item.value} |
))}
@@ -101,9 +112,9 @@ class DetailTable extends Component {
))}
-
+
);
}
}
-export default DetailTable;
+export default TableComponent;
diff --git a/frontend/src/components/details/canvas.css b/frontend/src/components/details/canvas.css
deleted file mode 100644
index 44452646..00000000
--- a/frontend/src/components/details/canvas.css
+++ /dev/null
@@ -1,16 +0,0 @@
-#mainDiv {
- height: 10em;
- position: relative;
-}
-
-#piDiv {
- margin-top: 40px;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-right: -50%;
- transform: translate(-50%, -50%);
-}
-
-#tableDiv {
-}
diff --git a/frontend/src/components/header/HeaderComponent.js b/frontend/src/components/header/HeaderComponent.js
index f64ec187..0c7a8080 100644
--- a/frontend/src/components/header/HeaderComponent.js
+++ b/frontend/src/components/header/HeaderComponent.js
@@ -2,10 +2,10 @@ import React, { useContext } from 'react';
import { string } from 'prop-types';
import { useHistory } from 'react-router-dom';
import { Row } from 'simple-flexbox';
-import { createUseStyles, useTheme } from 'react-jss';
+import { createUseStyles, ThemeProvider, useTheme } from 'react-jss';
import { SidebarContext } from 'hooks/useSidebar';
import SLUGS from 'resources/slugs';
-import { IconBell, IconBrowse, IconLogin, IconSearch } from 'assets/icons';
+import { IconBell, IconUser, IconSearch, IconLogin, IconArrow, IconBurger, IconBrowse } from 'assets/icons';
import DropdownComponent from 'components/dropdown';
import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
@@ -22,38 +22,68 @@ const useStyles = createUseStyles((theme) => ({
}
},
container: {
- height: 40
+ height: 50,
+ widht:200,
+ color:theme.uniformStyle.color.highlightingColor, // header title color
+
+
},
name: {
...theme.typography.itemTitle,
textAlign: 'right',
'@media (max-width: 768px)': {
- display: 'none'
+ display: 'none',
+
+
}
},
separator: {
borderLeft: `1px solid ${theme.color.lightGrayishBlue2}`,
- marginLeft: 32,
- marginRight: 32,
- height: 32,
- width: 2,
+ marginLeft: 50,
+ marginRight: 90,
+ height: 30,
+ width: 3,
'@media (max-width: 768px)': {
marginLeft: 14,
marginRight: 0
}
},
+ icontitle: {
+ ...theme.typography.icontitle,
+ marginLeft:-60,
+ '@media (max-width: 1080px)': {
+ // marginLeft:50
+ },
+ '@media (max-width: 468px)': {
+ fontSize: 50,
+
+ }
+ },
+ subtitle: {
+ ...theme.typography.title,
+ '@media (max-width: 1080px)': {
+ marginLeft: 0,
+
+ },
+ '@media (max-width: 468px)': {
+ fontSize: 50,
+
+ }
+ },
title: {
...theme.typography.title,
'@media (max-width: 1080px)': {
- marginLeft: 50
+ marginLeft: 80,
+
},
'@media (max-width: 468px)': {
- fontSize: 20
+ fontSize: 50,
+
}
},
iconStyles: {
cursor: 'pointer',
- marginLeft: 25,
+ marginLeft:0,
'@media (max-width: 768px)': {
marginLeft: 12
}
@@ -61,21 +91,27 @@ const useStyles = createUseStyles((theme) => ({
}));
/**
- * The Header Component is a shared component between all pages. It is capable to display
- * a title that changes when the selection in the SidebarComponent changes.
+ * The Header Component is a shared component between all pages. It displays
+ * the related header title of the selected section in the SidebarComponent changes.
*
- * @returns The visualization of exactly that.
+ * @author Irem Toroslu
+ * @returns the header title, subtitles related to the selected section in the SidebarComponent. It also displays the user name in the header bar as well.
*/
function HeaderComponent() {
+
const { push } = useHistory();
const { currentItem } = useContext(SidebarContext); // get the current Path selected in the Sidebar
const [ selectedProducts, setSelectedProducts ] = useContext(PrivateSectionContext);
const theme = useTheme();
const classes = useStyles({ theme });
-
+
let title;
let subtitle;
+ let subsubtitle;
+
+
switch (true) {
+
case currentItem === SLUGS.dashboard:
title = 'My Dashboard';
break;
@@ -91,10 +127,12 @@ function HeaderComponent() {
case currentItem === SLUGS.industrialApplications:
title = 'Industrial Applications';
case currentItem === SLUGS.details:
- title = 'Details: ' + (selectedProducts[0].productName === undefined ? 'Please select a model first' : selectedProducts[0].productName);
+ title='Details '
+ subtitle = ' Selected product ' ;
+ subsubtitle =(selectedProducts[0].productName === undefined ? ' Please select a model first' : " " + selectedProducts[0].productName);
break;
case currentItem === SLUGS.generation + '/products':
- title = 'Products';
+ title = 'Product Catagory';
break;
case currentItem === SLUGS.generation + '/solutions':
title = 'Solutions';
@@ -109,76 +147,30 @@ function HeaderComponent() {
title = '';
}
+ function UseArrow(selected) {
+
+ if (title === 'Details ' && !(selected === undefined)) {
+ return
;
+ }
+ return null;
+
+ }
function onSettingsClick() {
push(SLUGS.settings);
}
return (
-
- {title}
-
-
-
-
+
+ {title}{subtitle}{subsubtitle}
+
+
+
- }
- options={[
- {
- label: 'Notification #1',
- onClick: () => console.log('Notification #1')
- },
- {
- label: 'Notification #2',
- onClick: () => console.log('Notification #2')
- },
- {
- label: 'Notification #3',
- onClick: () => console.log('Notification #3')
- },
- {
- label: 'Notification #4',
- onClick: () => console.log('Notification #4')
- }
- ]}
- position={{
- top: 42,
- right: -14
- }}
- />
+
-
- User Name
-
-
-
- {/* 
*/}
-
-
-
-
- }
- options={[
- {
- label: 'Settings',
- onClick: onSettingsClick
- },
- {
- label: 'Logout',
- onClick: () => console.log('logout')
- }
- ]}
- position={{
- top: 52,
- right: -6
- }}
- />
+ user name
+
+
);
diff --git a/frontend/src/components/login/Registration.js b/frontend/src/components/login/Registration.js
index 451bbffe..b2cf7e52 100644
--- a/frontend/src/components/login/Registration.js
+++ b/frontend/src/components/login/Registration.js
@@ -1,5 +1,5 @@
/** Setting up registration/signup page
- * author : @mani
+ * @author Mani Anand
* */
import React from 'react';
diff --git a/frontend/src/components/productGrid/LabelComponent.js b/frontend/src/components/productGrid/LabelComponent.js
new file mode 100644
index 00000000..49965ca1
--- /dev/null
+++ b/frontend/src/components/productGrid/LabelComponent.js
@@ -0,0 +1,18 @@
+import React, {useContext} from 'react';
+import theme from 'resources/theme';
+
+/**
+ * Displaying a label.
+ *
+ * @author Mani Anand, Martin Wagner
+ */
+
+function LabelComponent({productName}) {
+ return (
+
+ {productName}
+
+ );
+}
+
+export default LabelComponent;
diff --git a/frontend/src/components/productGrid/ModelDropdownComponent.js b/frontend/src/components/productGrid/ModelDropdownComponent.js
index a2a7636a..16b10d56 100644
--- a/frontend/src/components/productGrid/ModelDropdownComponent.js
+++ b/frontend/src/components/productGrid/ModelDropdownComponent.js
@@ -3,14 +3,17 @@ import React, { useContext, useState } from 'react';
import { IconArrowDown } from 'assets/icons';
import {getModels} from 'interface/simaProInterface'
import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
+import { Component } from 'react';
+import {Container, Row, Col } from 'react-grid-system';
+import theme from 'resources/theme';
+
-//TODO: When only one model is available, => How to do that then? Should a click on the image link in that case?
/**
* This component creates the dropdownboxes for the related products
*
* @returns the model properties of the related product depending on the model values from getModels func from interface/simaProInterface
- * @author parham, Martin Wagner, Irem
+ * @author Parham Gandomkar, Martin Wagner, Irem Toroslu, Mani Anand
*/
const ModelDropdownComponent = (props) => {
@@ -22,16 +25,16 @@ const ModelDropdownComponent = (props) => {
// set the initial values for the dropdown list derived from getModels
const variables = getModels(productID);
const [ selected, setSelected ] = useState('Select a model');
-
- return (
-
-
-
-
-
-
+ return (
+
+
+
+
+
-
-
+
+
+
+
);
- };
+ };
+
+
export default ModelDropdownComponent;
diff --git a/frontend/src/components/productGrid/ProductGridComponent.js b/frontend/src/components/productGrid/ProductGridComponent.js
index 5dac45c8..72d0a202 100644
--- a/frontend/src/components/productGrid/ProductGridComponent.js
+++ b/frontend/src/components/productGrid/ProductGridComponent.js
@@ -1,13 +1,3 @@
-/**
- * The Componenet creates new cards for the product items using the minicard components form 'components/cards/MiniCardComponent'
- * it displays all the related products images attached to each card in a certain category.
- * Also stores the product and model properties and pass this values to the detail page once clicking on the image
- * /**
- *
- * @returns the product and model properties
- * @author Irem
- */
-
import React, {useContext} from 'react';
import {Column, Row} from 'simple-flexbox';
import {createUseStyles} from 'react-jss';
@@ -17,54 +7,70 @@ import ProductDropdown from './ModelDropdownComponent'
import SLUGS from 'resources/slugs';
import {Link} from 'react-router-dom';
import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
+import { Component } from 'react';
+import LabelComponent from './LabelComponent'
+/**
+ * The Componenet creates new cards for the product items using the minicard components form 'components/cards/MiniCardComponent'
+ * it displays all the related products images attached to each card in a certain category.
+ * Also stores the product and model properties and pass this values to the detail page once clicking on the image
+ * /**
+ *
+ * @returns the product and model properties
+ * @author Irem Toroslu, Martin Wagner, Mani Anand
+ */
-function ProductGridComponent() {
- const [ selectedProducts, setSelectedProducts ] = useContext(PrivateSectionContext);
- const NewSelectedProducts =
- [{
+function ProductGridComponent() {
+ const [selectedProducts, setSelectedProducts] = useContext(PrivateSectionContext);
+ const NewSelectedProducts = [
+ {
productID: selectedProducts.productID,
productName: selectedProducts.productName,
modelID: selectedProducts.modelID,
modelName: selectedProducts.modelName
- }]
-
+ }
+ ];
const products = getProducts();
const classes = useStyles();
return (
-
- {products.map((product, index) =>
-
+ {products.map((product, index) => (
+
{
// Save selection to ContextProvider
NewSelectedProducts[0].productID = product.productID;
NewSelectedProducts[0].productName = product.productName;
}}
- to={{ // Link to the next page
- pathname: SLUGS.details,
- }}>
-
+
-
+
+
- )}
+ ))}
-
);
}
@@ -72,43 +78,22 @@ function ProductGridComponent() {
// Card component style properties
const useStyles = createUseStyles({
- cardsContainer: {
- marginRight: -30,
- marginTop: -30
- },
cardRow: {
- marginTop: 30,
+ marginTop:-50,
'@media (max-width: 768px)': {
- marginTop: 0
+ // marginTop: 30
}
},
miniCardContainer: {
- flexGrow: 1,
- marginRight: 30,
+ marginRight: 30,
+ marginLeft:30,
+ marginTop:30,
'@media (max-width: 768px)': {
marginTop: 30,
maxWidth: 'none',
maxHeight:160
}
- },
- todayTrends: {
- marginTop: 30
- },
- lastRow: {
- marginTop: 30
- },
- unresolvedTickets: {
- marginRight: 30,
- '@media (max-width: 1024px)': {
- marginRight: 0
- }
- },
- tasks: {
- marginTop: 0,
- '@media (max-width: 1024px)': {
- marginTop: 30
- }
}
});
-export default ProductGridComponent;
+export default ProductGridComponent;
\ No newline at end of file
diff --git a/frontend/src/components/sidebar/MenuComponent.js b/frontend/src/components/sidebar/MenuComponent.js
index c84168bb..e6bb6d08 100644
--- a/frontend/src/components/sidebar/MenuComponent.js
+++ b/frontend/src/components/sidebar/MenuComponent.js
@@ -6,8 +6,8 @@ const getMenuStyles = ({ theme }) => ({
bmBurgerButton: {
position: 'absolute',
width: 26,
- height: 20,
- left: 30,
+ height: 10,
+ left: 20,
top: 40,
zIndex: 19
},
@@ -25,11 +25,11 @@ const getMenuStyles = ({ theme }) => ({
bmMenuWrap: {
position: 'fixed',
height: '100%',
- width: 260,
+ width: 200,
zIndex: 30
},
bmMenu: {
- background: '#262625' // left side bar backgroundcolor
+ background: theme.uniformStyle.color.secondaryBackgroundColor // left side bar backgroundcolor
},
bmItem: {
outline: 'none',
diff --git a/frontend/src/components/sidebar/MenuItemComponent.js b/frontend/src/components/sidebar/MenuItemComponent.js
index 50459181..6bc87546 100644
--- a/frontend/src/components/sidebar/MenuItemComponent.js
+++ b/frontend/src/components/sidebar/MenuItemComponent.js
@@ -11,12 +11,12 @@ const useStyles = createUseStyles({
},
container: {
display: 'flex',
- height: 56,
+ height: 40,
cursor: 'pointer',
'&:hover': {
backgroundColor: ({ theme }) => theme.color.paleBlueTransparent
},
- paddingLeft: ({ level }) => 32 * level,
+ paddingLeft: ({ level }) => 16 * level,
transition: 'all 0.2s ease-in-out'
},
leftBar: {
@@ -24,11 +24,12 @@ const useStyles = createUseStyles({
level > 1 ? 'none' : `3px solid ${theme.color.darkGrayishBlue}`
},
title: {
- fontSize: 15, // left bar titles
- lineHeight: '25px',
+ fontSize: ({ theme }) => theme.typography.icontitle.fontSize , // left bar titles
+ lineHeight: '20px',
letterSpacing: '0.2px',
- color: ({ theme, isActive }) =>(isActive ? '#00b300' : '#b5b4b9'), //(isActive ? theme.color.paleBlue : theme.color.grayishBlue),
- marginLeft: 20
+ color: ({ theme, isActive }) =>(isActive ? theme.uniformStyle.color.highlightingColor : theme.uniformStyle.color.secondaryFontColor), //(isActive ? theme.color.paleBlue : theme.color.grayishBlue),
+ marginLeft: 10,
+ fontWeight:'inherit'
}
});
@@ -48,7 +49,7 @@ function MenuItemComponent({ children, icon: Icon, id, items = [], level = 1, on
const classes = useStyles({ theme, level, isActive });
const classNameColumn = isActive ? classes.leftBar : '';
const classNameContainer = [classes.container, isActive && classes.activeContainer].join(' ');
- const iconColor = isActive ? '#00b300' : 'white';//theme.color.paleBlue : theme.color.grayishBlue2;
+ const iconColor = isActive ? theme.uniformStyle.color.highlightingColor : theme.uniformStyle.color.primaryIconColor;
function onItemClicked(e) {
if (onClick) {
diff --git a/frontend/src/components/sidebar/SidebarComponent.js b/frontend/src/components/sidebar/SidebarComponent.js
index 54d86b98..cb59b7e5 100644
--- a/frontend/src/components/sidebar/SidebarComponent.js
+++ b/frontend/src/components/sidebar/SidebarComponent.js
@@ -1,10 +1,3 @@
-/**
- * The SidebarComponent consists out of the functionality and the Look and Feel of the Left-Side-Navigationbar
- *
- * @author Irem
- * @author Martin Wagner
- */
-
import React from 'react';
import { createUseStyles, useTheme } from 'react-jss';
import { useHistory } from 'react-router-dom';
@@ -18,13 +11,20 @@ import {
IconArrow,
IconTransmission,
IconBrowse,
- IconBuilding
+ IconBuilding,
+ IconCircle
} from 'assets/icons';
import { convertSlugToUrl } from 'resources/utilities';
import Menu from './MenuComponent';
import MenuItem from './MenuItemComponent';
import logo from 'assets/logo/LogoCarbonteam.png';
+/**
+ * The SidebarComponent consists out of the functionality and the Look and Feel of the Left-Side-Navigationbar
+ *
+ * @author Irem Toroslu, Martin Wagner
+ */
+
const useStyles = createUseStyles({
separator: {
@@ -78,8 +78,8 @@ function SidebarComponent() {
return (