-
-
-
-
{selected}
-
+ //className=' w3-dropdown-hover w3-border w3-white w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em' >
+ return (
+
+
+
+ {selected}
+
+
-
-
+
+
+
+
);
- };
+ };
+
+
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) => (
+
+
+
+
- )}
+ ))}
-
);
}
@@ -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 (
-
-
+
+
onClick(SLUGS.generation + SLUGS.products)}
/>
onClick(SLUGS.generation + SLUGS.solutions)}
/>
onClick(SLUGS.generation + SLUGS.services)}
/>
@@ -137,21 +137,21 @@ function SidebarComponent() {
id={SLUGS.transmission + SLUGS.products}
title='Products'
level={3}
- icon={IconArrow}
+ icon={IconCircle}
onClick={() => onClick(SLUGS.transmission + SLUGS.products)}
/>
onClick(SLUGS.transmission + SLUGS.solutions)}
/>
onClick(SLUGS.transmission + SLUGS.services)}
/>
@@ -167,21 +167,21 @@ function SidebarComponent() {
id={SLUGS.industrialApplications + SLUGS.products}
title='Products'
level={3}
- icon={IconArrow}
+ icon={IconCircle}
onClick={() => onClick(SLUGS.industrialApplications + SLUGS.products)}
/>
onClick(SLUGS.industrialApplications + SLUGS.solutions)}
/>
onClick(SLUGS.industrialApplications + SLUGS.services)}
/>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 604c4b1b..91dc9d22 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -76,6 +76,7 @@ select {
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
+
}
}
diff --git a/frontend/src/interface/projectInterface.js b/frontend/src/interface/projectInterface.js
index dd5f5035..db16ccaa 100644
--- a/frontend/src/interface/projectInterface.js
+++ b/frontend/src/interface/projectInterface.js
@@ -6,14 +6,15 @@
import logo from 'assets/logo/LogoCarbonteam.png'
import logo_1 from 'assets/dummyImages/Image_1.PNG'
-import logo_2 from 'assets/dummyImages/Image_2.PNG'
+import logo_3 from 'assets/dummyImages/Logo2.png'
+import { number } from 'prop-types';
/**
* should get all the Products from the backend (soon) //TODO: declare and write.
* @returns
*/
export function getProducts() {
- return ([logo,logo_1,logo_2,logo_1,logo_2,logo_1]);
+ return ([logo_3,logo_1,logo_3,logo_1,logo_3,logo_1]);
}
/**
diff --git a/frontend/src/interface/simaProInterface.js b/frontend/src/interface/simaProInterface.js
index 53de2552..7d22e0f8 100644
--- a/frontend/src/interface/simaProInterface.js
+++ b/frontend/src/interface/simaProInterface.js
@@ -7,7 +7,7 @@
import logo from 'assets/logo/LogoCarbonteam.png'
import logo_1 from 'assets/dummyImages/Image_1.PNG'
-import logo_2 from 'assets/dummyImages/Image_2.PNG'
+import logo_2 from 'assets/dummyImages/Logo2.png'
import { categories } from './categories';
/**
diff --git a/frontend/src/resources/theme.js b/frontend/src/resources/theme.js
index af3b6fe8..63a2e402 100644
--- a/frontend/src/resources/theme.js
+++ b/frontend/src/resources/theme.js
@@ -1,37 +1,74 @@
/**
* The theme provides cross component UI like Colors and Fonts.
+ * @author Irem Toroslu
+ * @author Martin Wagner
*/
const color = {
brightBlue: '#3498db',
+ white:'white',
darkGrayishBlue: '#8b8d94',
+ whitish: '#b5b4b9',
+ white:'#000000',
+ darkGray: '#262625',
darkRed: '#a90000',
grayishBlue: '#A4A6B3',
grayishBlue2: '#9fa2b4',
grayishBlue3: '#bdc3c7',
+ limeGreen: '#00b300',
+ blueGray:'#33b3a6',//687f8c016064018788019799
lightBlue: '#3751FF',
lightGrayishBlue: '#F7F8FC', // background color
lightGrayishBlue2: '#DFE0EB',
paleBlue: '#DDE2FF',
+ darkBlue:'#008caf',
paleBlueTransparent: 'rgba(221, 226, 255, 0.08)',
- veryDarkGrayishBlue: '#373a47'
+ veryDarkGrayishBlue: '#373a47',
+ lightgreen: '#66a103',
+ lightblueGray:'#2e9db0',
+ lightGreenGray:'#9dccca',
+ GreenGray:'#88b598',
+ darkGreenGray:'#94b0a5',
+ darkskyblue:'#01a1c1',
+ Copper:'#BF6016',
+ Alminium:'#6093AC',
+ SiliconSteel:'#0c6c84',
+ TransformerOil: '#FACA0F',
+ StainlessSteel:'#caccce',
+ Pressboard:'#C38888',
+ Steel:'#8C9BA1',
+ lightGreenishBlue:' #7dbec7'
+
+
};
const typography = {
cardTitle: {
fontWeight: 'bold',
- fontSize: 19,
+ fontSize: 15,
lineHeight: '24px',
letterSpacing: '0.4px'
},
- smallSubtitle: {
- fontSize: 12,
+ icontitle: {
+ fontSize: 16,
lineHeight: '16px',
letterSpacing: '0.1px'
},
+ smallSubtitle: {
+ fontSize: 18,
+ lineHeight: '16px',
+ letterSpacing: '0.1px',
+ fontWeight:'inherit'
+ },
+ secondSmallSubtitle:{
+ fontSize: 16,
+ lineHeight: '16px',
+ letterSpacing: '0.1px',
+ fontWeight:'inherit'
+ },
link: {
fontWeight: '600',
- fontSize: 14,
+ fontSize: 15,
lineHeight: '20px',
letterSpacing: '0.2px',
color: color.lightBlue,
@@ -44,20 +81,68 @@ const typography = {
},
itemTitle: {
fontWeight: 600,
- fontSize: 14,
+ fontSize: 15,
lineHeight: '20px',
letterSpacing: 0.2
},
title: {
- fontWeight: 'bold',
+ fontWeight: 'inherit',
fontSize: 24,
lineHeight: '30px',
letterSpacing: 0.3
+ },
+ subtitle: {
+ fontWeight: 'inherit',
+ fontSize: 20,
+ lineHeight: '30px',
+ letterSpacing: 0.3
+ },
+ textcontent: {
+ fontWeight: 'inherit',
+ fontSize: 18,
+ lineHeight: '16px',
+ letterSpacing: 0.3
+ },
+ chartItemstitle: {
+ fontWeight: 'inherit',
+ fontSize: 12,
+ lineHeight: '30px',
+ letterSpacing: 0.3
+ },
+ buttontitle: {
+ fontWeight: 'inherit',
+ fontSize: 12,
+ lineHeight: '30px',
+ letterSpacing: 0.3
+ },
+ buttonSendtitle: {
+ fontWeight: 'inherit',
+ fontSize: 14,
+ lineHeight: '30px',
+ letterSpacing: 0.3
}
};
+/**
+ * Defining uniform Colors.
+ */
+const uniformStyle = {
+ color: {
+ primaryFontColor: color.darkGrayishBlue,
+ primaryIconColor: 'white',
+ secondaryFontColor: color.whitish,
+ highlightingColor: color.limeGreen,
+ primaryBackgroundColor: color.white,
+ secondaryBackgroundColor: color.darkGray,
+ barChartColor: color.darkBlue ,
+ tableHeaderColor: color.GreenGray,
+ sendButtonColor: color.lightGreenishBlue
+ }
+}
+
export default {
// https://www.colorhexa.com/A4A6B3
color,
- typography
+ typography,
+ uniformStyle
};
diff --git a/frontend/src/routes/PrivateRoutes.js b/frontend/src/routes/PrivateRoutes.js
index ebb43f0d..3001ee9b 100644
--- a/frontend/src/routes/PrivateRoutes.js
+++ b/frontend/src/routes/PrivateRoutes.js
@@ -4,7 +4,7 @@
* on the right handside canvas.
*
* @author Martin Wagner
- * @author Irem
+ * @author Irem Toroslu
*/
import React, { Suspense, lazy } from 'react';
@@ -12,32 +12,67 @@ import { Redirect, Route, Switch } from 'react-router-dom';
import SLUGS from 'resources/slugs';
import LoadingComponent from 'components/loading';
import DetailsComponent from 'components/details/DetailsComponent';
+import { useTheme, createUseStyles } from 'react-jss';
const ProductSolutionsServices = lazy(() =>
import('./dynamicPaths/ProductSolutionsServicesComponent')
);
// importing required components
const DashboardComponent = lazy(() => import('../components/dashboard'));
+const useStyles = createUseStyles((theme) => ({
+ container: {
+ display: 'flex'
+ },
+ textcontent: {
+ ...theme.typography.textcontent,
+ textAlign: 'left',
+ '@media (max-width: 768px)': {
+ display: 'none',
+ }
+ },
+ subtitle: {
+ ...theme.typography.title,
+ marginLeft:15,
+ '@media (max-width: 1080px)': {
+ marginLeft: -50,
+ },
+ '@media (max-width: 468px)': {
+ fontSize: 50,
+ }
+ },
+ title: {
+ ...theme.typography.title,
+ marginLeft:15,
+ '@media (max-width: 1080px)': {
+ marginLeft: 80,
+ },
+ '@media (max-width: 468px)': {
+ fontSize: 50,
+ }
+ }
+ }));
/**
* Defining new Routes using private routes function
* linking Components to the selected Menuitem in the "Sidebar component"
*/
function PrivateRoutes() {
+ const theme = useTheme();
+ const classes = useStyles({ theme });
return (
categories
} />
+ categories
} />
Short info about Generation category
}
+ render={() => Short info about Generation category
}
/>
Short info about Transmission category
}
+ render={() => Short info about Transmission category
}
/>
Short info about Industrial Applications
}
+ render={() => Short info about Industrial Applications
}
/>
settings
} />
+ settings
} />
diff --git a/frontend/src/routes/PrivateSection.js b/frontend/src/routes/PrivateSection.js
index 65804710..75dd88f3 100644
--- a/frontend/src/routes/PrivateSection.js
+++ b/frontend/src/routes/PrivateSection.js
@@ -17,14 +17,15 @@ const useStyles = createUseStyles({
minHeight: 850
},
mainBlock: {
- marginLeft: 255,
- padding: 30,
+ marginLeft: 200,
+ // paddingLeft: 30,
'@media (max-width: 1080px)': {
marginLeft: 0
}
},
contentBlock: {
- marginTop: 54
+ marginTop: 54,
+ marginLeft:0
}
});
diff --git a/frontend/src/routes/dynamicPaths/ProductSolutionsServicesComponent.js b/frontend/src/routes/dynamicPaths/ProductSolutionsServicesComponent.js
index 50f16ca0..069e4512 100644
--- a/frontend/src/routes/dynamicPaths/ProductSolutionsServicesComponent.js
+++ b/frontend/src/routes/dynamicPaths/ProductSolutionsServicesComponent.js
@@ -1,7 +1,39 @@
import React from 'react';
import { useParams } from 'react-router-dom';
+import { Column, Row } from 'simple-flexbox';
import ProductGridComponent from 'components/productGrid';
+import { useTheme, createUseStyles } from 'react-jss';
+const useStyles = createUseStyles((theme) => ({
+ container: {
+ display: 'flex'
+ },
+ textcontent: {
+ ...theme.typography.textcontent,
+ textAlign: 'left',
+ '@media (max-width: 768px)': {
+ display: 'none',
+ }
+ },
+ subtitle: {
+ ...theme.typography.title,
+ '@media (max-width: 1080px)': {
+ marginLeft: -50,
+ },
+ '@media (max-width: 468px)': {
+ fontSize: 50,
+ }
+ },
+ title: {
+ ...theme.typography.title,
+ '@media (max-width: 1080px)': {
+ marginLeft: 80,
+ },
+ '@media (max-width: 468px)': {
+ fontSize: 50,
+ }
+ }
+}));
/**
* This component differenciates between the three different possible subcategories.
@@ -11,16 +43,20 @@ import ProductGridComponent from 'components/productGrid';
*/
export default function ProductSolutionsServicesComponent() {
const { type } = useParams();
+ const theme = useTheme();
+ const classes = useStyles({ theme });
return (
- <>
- At this location the component which shows all the products / models will be implemented
- {type === 'products' && This is where all the products of the selected category could be shown.
}
- {type === 'solutions' && This is where all the solutions of the selected category could be shown.
}
- {type === 'services' && This is where all the services of the selected category could be shown.
}
+
+
-
+ {/* {type === 'products' && All the products
This is where all the products of the selected category could be shown.
This is where all the solutions of the selected category could be shown.
}
+ {type === 'services' && This is where all the services of the selected category could be shown.
} */}
+
+
-
+
);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/routes/scenarios/productGrid/Productdropdown.js b/frontend/src/routes/scenarios/productGrid/Productdropdown.js
new file mode 100644
index 00000000..7e0370e5
--- /dev/null
+++ b/frontend/src/routes/scenarios/productGrid/Productdropdown.js
@@ -0,0 +1,59 @@
+
+import React, { useContext, useState } from 'react';
+import { IconArrowDown } from 'assets/icons';
+import {getModels, getProducts} from 'interface/simaProInterface'
+import {PrivateSectionContext} from 'resources/PrivateSectionContext';
+import iconBellNew from 'assets/icons/icon-bell-new';
+
+
+/**
+ * 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 Toroslu
+ */
+
+const SelectModelVariable = (props) => {
+ const productID = props.productID;
+ const productName = props.productName;
+
+
+ const [ selectedProducts, setSelectedProducts ] = useContext(PrivateSectionContext);
+ // set the initial values for the dropdown list derived from getModels
+ const variables = getModels(productID);
+ const [ selected, setSelected ] = useState('Select a model');
+
+ return (
+
+ );
+ };
+
+export default SelectModelVariable;