diff --git a/.gitignore b/.gitignore index e5e57a24..2494ccb8 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ node_modules .idea /.vs/slnx.sqlite-journal .vs/slnx.sqlite + +frontend/yarn.lock diff --git a/frontend/package.json b/frontend/package.json index de7b367e..4b468468 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -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", diff --git a/frontend/src/assets/icons/checkbox-off.js b/frontend/src/assets/icons/checkbox-off.js deleted file mode 100644 index 396af4ea..00000000 --- a/frontend/src/assets/icons/checkbox-off.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -); diff --git a/frontend/src/assets/icons/checkbox-on.js b/frontend/src/assets/icons/checkbox-on.js deleted file mode 100644 index c5028419..00000000 --- a/frontend/src/assets/icons/checkbox-on.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - - -); diff --git a/frontend/src/assets/icons/icon-agents.js b/frontend/src/assets/icons/icon-agents.js deleted file mode 100644 index 98a63233..00000000 --- a/frontend/src/assets/icons/icon-agents.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -); diff --git a/frontend/src/assets/icons/icon-arrow-down.js b/frontend/src/assets/icons/icon-arrow-down.js deleted file mode 100644 index a942d9b8..00000000 --- a/frontend/src/assets/icons/icon-arrow-down.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - - -); - - diff --git a/frontend/src/assets/icons/icon-arrow-up.js b/frontend/src/assets/icons/icon-arrow-up.js deleted file mode 100644 index d6ad4fbd..00000000 --- a/frontend/src/assets/icons/icon-arrow-up.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - - -); diff --git a/frontend/src/assets/icons/icon-arrow.js b/frontend/src/assets/icons/icon-arrow.js deleted file mode 100644 index c3b8cb6f..00000000 --- a/frontend/src/assets/icons/icon-arrow.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -) \ No newline at end of file diff --git a/frontend/src/assets/icons/icon-articles.js b/frontend/src/assets/icons/icon-articles.js deleted file mode 100644 index 37a46612..00000000 --- a/frontend/src/assets/icons/icon-articles.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -); diff --git a/frontend/src/assets/icons/icon-bell-new.js b/frontend/src/assets/icons/icon-bell-new.js deleted file mode 100644 index faf6258d..00000000 --- a/frontend/src/assets/icons/icon-bell-new.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - - -); diff --git a/frontend/src/assets/icons/icon-browse.js b/frontend/src/assets/icons/icon-browse.js deleted file mode 100644 index 88f0e4f9..00000000 --- a/frontend/src/assets/icons/icon-browse.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -); diff --git a/frontend/src/assets/icons/icon-building.js b/frontend/src/assets/icons/icon-building.js deleted file mode 100644 index 4d1e7c6e..00000000 --- a/frontend/src/assets/icons/icon-building.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - - -) \ No newline at end of file diff --git a/frontend/src/assets/icons/icon-burger.js b/frontend/src/assets/icons/icon-burger.js deleted file mode 100644 index 4636caf8..00000000 --- a/frontend/src/assets/icons/icon-burger.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -); diff --git a/frontend/src/assets/icons/icon-circle.js b/frontend/src/assets/icons/icon-circle.js deleted file mode 100644 index ffcb6b20..00000000 --- a/frontend/src/assets/icons/icon-circle.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -) \ No newline at end of file diff --git a/frontend/src/assets/icons/icon-contacts.js b/frontend/src/assets/icons/icon-contacts.js deleted file mode 100644 index a124e987..00000000 --- a/frontend/src/assets/icons/icon-contacts.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -); diff --git a/frontend/src/assets/icons/icon-heart.js b/frontend/src/assets/icons/icon-heart.js deleted file mode 100644 index f564d586..00000000 --- a/frontend/src/assets/icons/icon-heart.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default () => ( - - - -) \ No newline at end of file diff --git a/frontend/src/assets/icons/icon-home.js b/frontend/src/assets/icons/icon-home.js deleted file mode 100644 index d75b40ac..00000000 --- a/frontend/src/assets/icons/icon-home.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -); - diff --git a/frontend/src/assets/icons/icon-ideas.js b/frontend/src/assets/icons/icon-ideas.js deleted file mode 100644 index 72beb334..00000000 --- a/frontend/src/assets/icons/icon-ideas.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - - {/* /> */} - - - - - - - -); diff --git a/frontend/src/assets/icons/icon-inbox.js b/frontend/src/assets/icons/icon-inbox.js deleted file mode 100644 index 39d70532..00000000 --- a/frontend/src/assets/icons/icon-inbox.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -); diff --git a/frontend/src/assets/icons/icon-login.js b/frontend/src/assets/icons/icon-login.js deleted file mode 100644 index 823c2c44..00000000 --- a/frontend/src/assets/icons/icon-login.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -) \ No newline at end of file diff --git a/frontend/src/assets/icons/icon-logo.js b/frontend/src/assets/icons/icon-logo.js deleted file mode 100644 index 46c87a47..00000000 --- a/frontend/src/assets/icons/icon-logo.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default () => ( - - - - - - - - - - -); diff --git a/frontend/src/assets/icons/icon-logout.js b/frontend/src/assets/icons/icon-logout.js deleted file mode 100644 index 394cdb6e..00000000 --- a/frontend/src/assets/icons/icon-logout.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - - -); diff --git a/frontend/src/assets/icons/icon-overview.js b/frontend/src/assets/icons/icon-overview.js deleted file mode 100644 index f606da1f..00000000 --- a/frontend/src/assets/icons/icon-overview.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - - - - - - - - -); \ No newline at end of file diff --git a/frontend/src/assets/icons/icon-plus.js b/frontend/src/assets/icons/icon-plus.js deleted file mode 100644 index 505f07ee..00000000 --- a/frontend/src/assets/icons/icon-plus.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default () => ( - - - - -) \ No newline at end of file diff --git a/frontend/src/assets/icons/icon-power.js b/frontend/src/assets/icons/icon-power.js deleted file mode 100644 index 105d6d94..00000000 --- a/frontend/src/assets/icons/icon-power.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -); diff --git a/frontend/src/assets/icons/icon-search.js b/frontend/src/assets/icons/icon-search.js deleted file mode 100644 index 3270dfc8..00000000 --- a/frontend/src/assets/icons/icon-search.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - - -); diff --git a/frontend/src/assets/icons/icon-settings.js b/frontend/src/assets/icons/icon-settings.js deleted file mode 100644 index 3e41cc3c..00000000 --- a/frontend/src/assets/icons/icon-settings.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -); diff --git a/frontend/src/assets/icons/icon-subscription.js b/frontend/src/assets/icons/icon-subscription.js deleted file mode 100644 index 7e8994fe..00000000 --- a/frontend/src/assets/icons/icon-subscription.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - - - - - - - - -); diff --git a/frontend/src/assets/icons/icon-tickets.js b/frontend/src/assets/icons/icon-tickets.js deleted file mode 100644 index 0ee32826..00000000 --- a/frontend/src/assets/icons/icon-tickets.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - -); diff --git a/frontend/src/assets/icons/icon-transmission.js b/frontend/src/assets/icons/icon-transmission.js deleted file mode 100644 index 00757f07..00000000 --- a/frontend/src/assets/icons/icon-transmission.js +++ /dev/null @@ -1,15 +0,0 @@ - -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - - -) \ No newline at end of file diff --git a/frontend/src/assets/icons/icon-user.js b/frontend/src/assets/icons/icon-user.js deleted file mode 100644 index ba2319a6..00000000 --- a/frontend/src/assets/icons/icon-user.js +++ /dev/null @@ -1,11 +0,0 @@ - -import React from 'react'; - -/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */ -export default (props) => ( - - - - -) \ No newline at end of file diff --git a/frontend/src/assets/icons/index.js b/frontend/src/assets/icons/index.js deleted file mode 100644 index 01c30772..00000000 --- a/frontend/src/assets/icons/index.js +++ /dev/null @@ -1,61 +0,0 @@ -import IconCheckboxOff from './checkbox-off'; -import IconCheckboxOn from './checkbox-on'; -import IconAgents from './icon-agents'; -import IconArrowUp from './icon-arrow-up'; -import IconArticles from './icon-articles'; -import IconBell from './icon-bell-new'; -import IconBurger from './icon-burger'; -import IconContacts from './icon-contacts'; -import IconIdeas from './icon-ideas'; -import IconLogo from './icon-logo'; -import IconLogout from './icon-logout'; -import IconOverview from './icon-overview'; -import IconSearch from './icon-search'; -import IconSettings from './icon-settings'; -import IconSubscription from './icon-subscription'; -import IconTickets from './icon-tickets'; -import IconInbox from './icon-inbox'; -import IconHome from './icon-home'; -import IconLogin from './icon-login'; -import IconPower from './icon-power'; -import IconTransmission from './icon-transmission'; -import IconArrow from './icon-arrow'; -import IconBrowse from './icon-browse'; -import IconBuilding from './icon-building'; -import IconArrowDown from './icon-arrow-down'; -import IconCircle from './icon-circle' -import IconUser from './icon-user' -import IconHeart from './icon-heart' -import IconPlus from './icon-plus' - -export { - IconCheckboxOff, - IconCheckboxOn, - IconAgents, - IconArrowUp, - IconArticles, - IconBell, - IconBurger, - IconContacts, - IconIdeas, - IconLogo, - IconLogout, - IconOverview, - IconSearch, - IconSettings, - IconSubscription, - IconTickets, - IconInbox, - IconHome, - IconLogin, - IconPower, - IconTransmission, - IconArrow, - IconBrowse, - IconBuilding, - IconArrowDown, - IconCircle, - IconUser, - IconHeart, - IconPlus -}; diff --git a/frontend/src/components/cards/MiniCardComponent.js b/frontend/src/components/cards/MiniCardComponent.js index b6f73329..a296b8cb 100644 --- a/frontend/src/components/cards/MiniCardComponent.js +++ b/frontend/src/components/cards/MiniCardComponent.js @@ -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: theme.uniformStyle.color.tableHeaderColor, - '&: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 ( - - {/* Resize the image on the cards (product images) */} -
- {/* define the image path */} - -
- + + + {/* Resize the image on the cards (product images) */} + + {/* define the image path */} + + + + + + ); } diff --git a/frontend/src/components/cards/miniCard.css b/frontend/src/components/cards/miniCard.css new file mode 100644 index 00000000..62a4a593 --- /dev/null +++ b/frontend/src/components/cards/miniCard.css @@ -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; +} diff --git a/frontend/src/components/collapsible/CollapsibleContent.js b/frontend/src/components/collapsible/CollapsibleContent.js index 6faae6b7..8f465cee 100644 --- a/frontend/src/components/collapsible/CollapsibleContent.js +++ b/frontend/src/components/collapsible/CollapsibleContent.js @@ -2,6 +2,7 @@ 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', @@ -9,6 +10,9 @@ const STATUS = { PRE_COLLAPSED: 'PRE_COLLAPSED' }; +/** + * This component returns the collapsible items on the sidebar component. + */ function CollapsibleContent({ children, expanded, @@ -25,6 +29,9 @@ function CollapsibleContent({ onTransitionStart, onTransitionEnd }); + + /* This styling needs to be done in JS code.*/ + let transitionStyles; switch (status) { case STATUS.EXPANDED: @@ -42,7 +49,6 @@ function CollapsibleContent({ default: transitionStyles = { maxHeight: scrollHeight, transitionDuration: '.001s' }; } - useEffect(() => { if (expanded) { if (status === STATUS.COLLAPSED) { diff --git a/frontend/src/components/dashboard/DashboardComponent.js b/frontend/src/components/dashboard/DashboardComponent.js index b50d8d11..02085751 100644 --- a/frontend/src/components/dashboard/DashboardComponent.js +++ b/frontend/src/components/dashboard/DashboardComponent.js @@ -4,7 +4,6 @@ import { createUseStyles } from 'react-jss'; import MiniCardComponent from 'components/cards/MiniCardComponent'; import TodayTrendsComponent from './TodayTrendsComponent'; import UnresolvedTicketsComponent from './UnresolvedTicketsComponent'; -import TasksComponent from './TasksComponent'; const useStyles = createUseStyles({ cardsContainer: { @@ -102,7 +101,7 @@ function DashboardComponent() { breakpoints={{ 1024: 'column' }} > - + {/* */} ); diff --git a/frontend/src/components/dashboard/TasksComponent.js b/frontend/src/components/dashboard/TasksComponent.js deleted file mode 100644 index 4dfd06b9..00000000 --- a/frontend/src/components/dashboard/TasksComponent.js +++ /dev/null @@ -1,167 +0,0 @@ -import React, { useState } from 'react'; -import { Row } from 'simple-flexbox'; -import { createUseStyles, useTheme } from 'react-jss'; -import { IconCheckboxOn, IconCheckboxOff } from 'assets/icons'; -import CardComponent from 'components/cards/CardComponent'; - -const useStyles = createUseStyles((theme) => ({ - addButton: { - backgroundColor: theme.color.lightGrayishBlue, - color: theme.color.grayishBlue2, - fontSize: '20px !important', - padding: '7px !important' - }, - itemTitle: { - ...theme.typography.itemTitle, - color: theme.color.veryDarkGrayishBlue - }, - itemValue: { - color: theme.color.grayishBlue2 - }, - greyTitle: { - color: theme.color.grayishBlue3 - }, - tagStyles: { - borderRadius: 5, - cursor: 'pointer', - fontWeight: 'bold', - fontSize: 11, - letterSpacing: '0.5px', - lineHeight: '14px', - padding: '5px 12px 5px 12px' - }, - checkboxWrapper: { - cursor: 'pointer', - marginRight: 16 - } -})); - -const TAGS = { - URGENT: { text: 'URGENT', backgroundColor: '#FEC400', color: '#FFFFFF' }, - NEW: { text: 'NEW', backgroundColor: '#29CC97', color: '#FFFFFF' }, - DEFAULT: { text: 'DEFAULT', backgroundColor: '#F0F1F7', color: '#9FA2B4' } -}; - -function TasksComponent(props) { - const theme = useTheme(); - const classes = useStyles({ theme }); - const [items, setItems] = useState([ - { title: 'Finish ticket update', checked: false, tag: TAGS.URGENT }, - { - title: 'Create new ticket example', - checked: false, - tag: TAGS.NEW - }, - { title: 'Update ticket report', checked: true, tag: TAGS.DEFAULT } - ]); - - function onCheckboxClick(index) { - setItems((prev) => { - const newItems = [...prev]; - newItems[index].checked = newItems[index].checked ? false : true; - return newItems; - }); - } - function getNextTag(current = 'URGENT') { - const tagLabels = ['URGENT', 'NEW', 'DEFAULT']; - const tagIndex = (tagLabels.indexOf(current) + 1) % 3; - return TAGS[tagLabels[tagIndex]]; - } - - function onTagClick(index) { - setItems((prev) => { - const newItems = [...prev]; - newItems[index].tag = getNextTag(newItems[index].tag.text); - return newItems; - }); - } - - function onAddButtonClick() { - setItems((prev) => { - const newItems = [...prev]; - newItems.push({ - title: `Task ${newItems.length + 1}`, - checked: false, - tag: getNextTag() - }); - return newItems; - }); - } - - function renderAddButton() { - return ( - - + - - ); - } - - return ( - - - Create new task - - {renderAddButton()} - , - ...items.map((item, index) => ( - - )) - ]} - /> - ); -} - -function TaskComponent({ classes, index, item = {}, onCheckboxClick, onTagClick }) { - const { tag = {} } = item; - return ( - - -
onCheckboxClick(index)}> - {item.checked ? : } -
- {item.title} - - - - ); -} - -function TagComponent({ backgroundColor, classes, color, index, onClick, text }) { - return ( - onClick(index)} - > - {text} - - ); -} - -export default TasksComponent; diff --git a/frontend/src/components/details/CanvasComponent.jsx b/frontend/src/components/details/CanvasComponent.jsx deleted file mode 100644 index 1f8da40d..00000000 --- a/frontend/src/components/details/CanvasComponent.jsx +++ /dev/null @@ -1,58 +0,0 @@ -/** -in this main component come all the canvas page components -such as diagrams and tables - -@author Parham Gandomkar, Irem Toroslu -*/ - -import React, { Component } from 'react'; -import PieChart from './PieChartComponent'; -import ColumnChart from './ColumnChartComponent'; -import Table from './TableComponent'; - -class CanvasComponent extends Component { - render() { - /* - if the loadComparePage state from its parrent (the detail Component) - is set to true, here the canvas page should be divided into two canvases - */ - return ( -
-
-
-

- {' '} - Results of the impact assessment{' '} -

- -
-
-

- {' '} - Material Composition{' '} -

- -
-
-
-
-

Impact categories

- - - - - ); - } -} - -export default CanvasComponent; diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx index 2f0690b3..6cb1c186 100644 --- a/frontend/src/components/details/ColumnChartComponent.jsx +++ b/frontend/src/components/details/ColumnChartComponent.jsx @@ -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 @@ -33,7 +32,7 @@ const ColumnChartComponent = () => { } }, fill: { - colors: [theme.uniformStyle.color.barChartColor] + colors: ['#21cc82'] //['#2cb5de'] }, dataLabels: { @@ -44,7 +43,7 @@ const ColumnChartComponent = () => { offsetY: -20, style: { fontSize: '12px', - colors: ['#304758'] + colors: ['#21cc82'] } }, yaxis: { diff --git a/frontend/src/components/details/CompareVariablesComponent.jsx b/frontend/src/components/details/CompareVariablesComponent.jsx deleted file mode 100644 index d8c90d6c..00000000 --- a/frontend/src/components/details/CompareVariablesComponent.jsx +++ /dev/null @@ -1,123 +0,0 @@ -import React 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 ( -
-
-

Select variables to compare:

-
-
-
- -
- {state.variables.map((item) => ( - - ))} -
-
-
-
-
- -
- {state.variables.map((item) => ( - - ))} -
-
-
-
- -
- -
- ); -}; - -export default CompareVariablesComponent; diff --git a/frontend/src/components/details/DetailsComponent.js b/frontend/src/components/details/DetailsComponent.js index dc2f5fce..ac8b5af7 100644 --- a/frontend/src/components/details/DetailsComponent.js +++ b/frontend/src/components/details/DetailsComponent.js @@ -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 ( - - - + + + @@ -83,23 +89,24 @@ class DetailsComponent extends Component { ); } else { return ( - - - + + + - + {/* Spacing between the two columns is specified by paddingLeft */} + diff --git a/frontend/src/components/details/MobileTableComponent.jsx b/frontend/src/components/details/MobileTableComponent.jsx new file mode 100644 index 00000000..9d85727b --- /dev/null +++ b/frontend/src/components/details/MobileTableComponent.jsx @@ -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 ( + + {/* dynamic display of product and model */} +
{this.props.productName}
+
+ {/* 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} +
+ +
+ {/* style needs to be defined in js */} + + {this.state.headers.map((header, index) => ( + + + + + + + ))} + +
+ {header.value} + + {Object.values(this.state.rows[3])[index + 1]} + + {Object.values(this.state.rows[4])[index + 1]} + + {Object.values(this.state.rows[5])[index + 1]} +
+ +
+ + + {/* style needs to be defined in js */} + + {this.state.headers.map((header, index) => ( + + + + + + + ))} + +
+ {header.value} + + {Object.values(this.state.rows[0])[index + 1]} + + {Object.values(this.state.rows[1])[index + 1]} + + {Object.values(this.state.rows[2])[index + 1]} +
+ + ); + } +} + +export default MobileTableComponent; diff --git a/frontend/src/components/details/NavbarComponent.js b/frontend/src/components/details/NavbarComponent.js index 9978f539..50f0a6c3 100644 --- a/frontend/src/components/details/NavbarComponent.js +++ b/frontend/src/components/details/NavbarComponent.js @@ -1,5 +1,6 @@ import React from 'react'; import slugs from 'resources/slugs'; +import { Link } from 'react-router-dom'; /** * a divider Pannel for seperating search compoents and result components @@ -11,34 +12,38 @@ import slugs from 'resources/slugs'; const NavbarComponent = (props) => { if (!props.loadComparePage) { return ( - <> -
- {props.scenarioName} -