Implementation of #18 #42

Waldleufer · 2021-05-13T13:10:01Z

deleting css file making pie chart diagram compatible for small screen sizes

handling the compare button

converting DetailComponent to a class component storing an compare state passing compare state to canvas dividing canvas to two canvases if the state is true

rendering the second drop down inside Selectvariable component

Waldleufer

It would be very nice if you could uniform the names of your components. Since you will only implement one Component in one file, the filename and the component name should be the same to avoid confusion.

Waldleufer · 2021-05-13T13:18:55Z

Why do you have .jsx and .js files? @gandompm

Waldleufer

Other than the few comments I left, it looks good 😄

frontend/src/components/details/CanvasComponent.jsx

frontend/src/components/details/CompareCanvas.jsx

Waldleufer · 2021-05-13T13:35:36Z

frontend/src/components/details/SelectVariableComponent.jsx

+    onSecondDropDownSelectedHandler = (name) => {
+        const secondVariable = name;
+        this.setState({ secondVariable });
+    };


What is this for? If It belongs to the compared model, then we should better differentiate between the two variables. Maybe Divide the area where the variables can be selected also into two columns?

I know what you are saying and it is true. that way looks better.
but where should we put the commit button?
but please don't hesitate to change the UI later. I will also change the UI of your components.

but where should we put the commit button?

mhmm that's a good question. I will think about it, maybe we could put it in the middle? between the variables?

It wouldn't look good that way, I think

Waldleufer · 2021-05-13T13:36:23Z

frontend/src/components/details/SelectVariableComponent.jsx

+            return (
+                <div>
+                    Pick your desire variable:
+                    <div className='w3-dropdown-hover w3-margin-left w3-margin-right w3-margin-top'>


@ScoutAtlas and I were wondering what these classNames do, can you please explain? ._.

sure, do you remember that I said I use a CSS framework called "W3.css".
the attributions of the CSS frameworks should be defined there.
for example, here it means that this is a type of drop-down class and the other 3 defines obviously the margin.

thank you for clarifying ☺️

frontend/src/components/details/PieChartComponent.jsx

Waldleufer · 2021-05-13T13:46:20Z

I also found some bugs when trying to resize the screen, one pie chart covers the other one. Maybe the Chart needs to be wrapped to prevent that 🤔

gandompm · 2021-05-13T14:52:42Z

It would be very nice if you could uniform the names of your components. Since you will only implement one Component in one file, the filename and the component name should be the same to avoid confusion.

you are right. I also found it confusing. I will refactor them soon.

gandompm · 2021-05-13T14:54:49Z

Why do you have .jsx and .js files? @gandompm

I only create .jsx files since it also allows React to show more useful error and warning messages.
those files are created by @ScoutAtlas

gandompm · 2021-05-13T15:11:41Z

I also found some bugs when trying to resize the screen, one pie chart covers the other one. Maybe the Chart needs to be wrapped to prevent that 🤔

Ja, I have also noticed. but It is now better than the previous release. should fix it.

Waldleufer

Thanks for refactoring! 😃

Waldleufer · 2021-05-14T10:43:32Z

frontend/src/components/details/DetailsComponent.js

+    state = {
+        compareCanvas: false
+    };
+    render() {
+        /*
+        we should later on find a way to make this line also compatible with class component 
+        */
+        //const [selectedProducts, setSelectedProducts] = useContext(PrivateSectionContext);
+
+        /*
+         the default canvas has to be divided into two canvases
+         an extra drom 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 });
+        };


you could do this also by using a context Provider in the function, then you wouldn't have to declare all these functions. 🤔

If you use "should" in a documentation comment somewhere, since you mean it is not yet there, you could add a "TODO:" beforehand so that we can easily find all areas that "should" still be worked on further somewhere in the near future😉

you are right about the "TODO:". thanks for the hint.

by "all functions", you mean "setState()" ?

yes! exactly :)

frontend/src/components/details/DetailsComponent.js

Waldleufer · 2021-05-14T10:52:03Z

Why do you have .jsx and .js files? @gandompm

I only create .jsx files since it also allows React to show more useful error and warning messages.
those files are created by @ScoutAtlas

So ... does that mean we should only use .jsx files? Because for some reason they don't work that good in Visual Studio Code for me. For some reason I can Ctrl + Click on any component that is in a .js file, to easily navigate, but it doesn't work for me with .jsx files.

Do you have any Extensions installed to better work with .jsx files?

Waldleufer · 2021-05-16T07:19:04Z

When accessing the DetailsPage I still get this:

🤔 @gandompm do you have an Idea where maybe two components use the same key?

Passing the selected product (and Model) to the DetailsComponent through props.

Collapsing empty tags

Distributing the new UI to frontend-dev-#18 Co-authored-by: Irem Toroslu <irem.toroslu@fau.de> Co-authored-by: Mani Anand <mani.anand@fau.de>

panel and chart components reconfigured

Waldleufer

Looking good. Some small suggested code tweaks are appended.

Waldleufer · 2021-05-18T10:50:26Z

frontend/src/components/cards/MiniCardComponent.js

+        minWidth:210, // resizing the card min width
+        maxHeight:150,
+        // marginTop:50,
+        // padding: '8px 16px 8px 16px',
        '&:hover': {


This might be the hover we have been looking for @IremToroslu !

could be :) let's try that out !

frontend/src/components/details/SelectVariableComponent.jsx

frontend/src/components/productGrid/LabelComponent.js

frontend/src/routes/PrivateRoutes.js

frontend/src/routes/scenarios/productGrid/Productdropdown.js

Co-authored-by: Martin Wagner <martin.wagner@fau.de>

Authors updated and cleaning up the code

gandompm · 2021-05-18T12:57:28Z

Why do you have .jsx and .js files? @gandompm

I only create .jsx files since it also allows React to show more useful error and warning messages.
those files are created by @ScoutAtlas

So ... does that mean we should only use .jsx files? Because for some reason they don't work that good in Visual Studio Code for me. For some reason I can Ctrl + Click on any component that is in a .js file, to easily navigate, but it doesn't work for me with .jsx files.

Do you have any Extensions installed to better work with .jsx files?

since I do not have so much experience in this field, I can't tell you a reason that we should use 100% .jsx instead of .js.
but ja for that reason that I mentioned, I would prefer to use .jsx. however, I don't see any problem if we use .jsx and .js in the project.
I don't have any clue about the problem. another extension that I have installed is "Simple React Snippets" by Burke Holland, which has nothing to do with that issue.

if we need to compare two variables

Authors updated

…s2021-carbon-footprint into frontend-dev-#18

Waldleufer

:)

frontend/src/components/productGrid/ModelDropdownComponent.js

Co-authored-by: Irem Toroslu <irem.toroslu@fau.de>

gandompm added 7 commits May 13, 2021 11:36

adding seperation pannel between search and result components

f8f5688

deleting css file making pie chart diagram compatible for small screen sizes

refactoring detail info page

7c2ff60

adding dividerpannel component

7fba599

handling the compare button

dividing canvas to two canvases

6fa8766

converting DetailComponent to a class component storing an compare state passing compare state to canvas dividing canvas to two canvases if the state is true

refactoring : creating a seperate component as CanvasCompare page

78ce3f0

creating an extra drop down button for second variable

66524c1

rendering the second drop down inside Selectvariable component

disabling compare button after it is clicked

b13cea4

Waldleufer commented May 13, 2021

View reviewed changes

Refactroing regarding Martin Wagners comments

cda040e

Waldleufer commented May 14, 2021

View reviewed changes

Waldleufer mentioned this pull request May 14, 2021

Add second canvas #18

Closed

5 tasks

Adding prettier to Dev Dependencies

53341d2

Waldleufer and others added 8 commits May 16, 2021 09:43

Datatransfer

64e711b

Passing the selected product (and Model) to the DetailsComponent through props.

Prettier

951cfd8

Cleanup

c881e33

Collapsing empty tags

Merge remote-tracking branch 'origin/frontend-dev' into frontend-dev-#18

3c48019

Distributing the new UI to frontend-dev-#18 Co-authored-by: Irem Toroslu <irem.toroslu@fau.de> Co-authored-by: Mani Anand <mani.anand@fau.de>

compare component fontsize and fontsytle changed

685f542

Details component compare canvas header bar font style and size changed

5647c26

worked on the #37

e9d3936

panel and chart components reconfigured

worked on the #37, details page header bar configured

ca55637

Waldleufer commented May 18, 2021

View reviewed changes

authors updated

6413455

Co-authored-by: Martin Wagner <martin.wagner@fau.de>

IremToroslu and others added 3 commits May 18, 2021 14:00

authors updated in label content

8d26dd8

Co-authored-by: Martin Wagner <martin.wagner@fau.de>

Authors update in Productdropdown.js

dd44c9d

Co-authored-by: Martin Wagner <martin.wagner@fau.de>

worked on the #37

789053e

Authors updated and cleaning up the code

gandompm and others added 4 commits May 18, 2021 20:59

creating a seperate Component for two dropdown

e852caa

if we need to compare two variables

Worked on #37

a1fc92d

Authors updated

Cleanup of unused Component

e9225ca

Merge branch 'frontend-dev-#18' of https://github.com/amosproj/amos-s…

6f2a402

…s2021-carbon-footprint into frontend-dev-#18

Waldleufer commented May 18, 2021

View reviewed changes

frontend/src/components/productGrid/ModelDropdownComponent.js Outdated Show resolved Hide resolved

Waldleufer and others added 2 commits May 18, 2021 21:21

Cleanup

9b1bb73

Alignment fixes

6b56959

Co-authored-by: Irem Toroslu <irem.toroslu@fau.de>

Waldleufer marked this pull request as ready for review May 18, 2021 19:35

Waldleufer changed the base branch from backend-dev to frontend-dev May 18, 2021 19:35

Waldleufer merged commit 1404383 into frontend-dev May 18, 2021

Waldleufer mentioned this pull request May 18, 2021

Frontend dev Sprint 5 Implementation #51

Merged

Waldleufer deleted the frontend-dev-#18 branch May 18, 2021 20:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implementation of #18 #42

Implementation of #18 #42

Waldleufer commented May 13, 2021

Waldleufer left a comment

Waldleufer commented May 13, 2021

Waldleufer left a comment

Waldleufer May 13, 2021

gandompm May 13, 2021

Waldleufer May 14, 2021

gandompm May 18, 2021

Waldleufer May 13, 2021

gandompm May 13, 2021

Waldleufer May 14, 2021

Waldleufer commented May 13, 2021

gandompm commented May 13, 2021

gandompm commented May 13, 2021

gandompm commented May 13, 2021

Waldleufer left a comment

Waldleufer May 14, 2021

gandompm May 18, 2021

gandompm May 18, 2021

Waldleufer May 18, 2021

Waldleufer commented May 14, 2021

Waldleufer commented May 16, 2021

Waldleufer left a comment

Waldleufer May 18, 2021

IremToroslu May 18, 2021

gandompm commented May 18, 2021

Waldleufer left a comment

Implementation of #18 #42

Implementation of #18 #42

Conversation

Waldleufer commented May 13, 2021

Waldleufer left a comment

Choose a reason for hiding this comment

Waldleufer commented May 13, 2021

Waldleufer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Waldleufer commented May 13, 2021

gandompm commented May 13, 2021

gandompm commented May 13, 2021

gandompm commented May 13, 2021

Waldleufer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Waldleufer commented May 14, 2021

Waldleufer commented May 16, 2021

Waldleufer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gandompm commented May 18, 2021

Waldleufer left a comment

Choose a reason for hiding this comment