Merge pull request #2 from gruporisoflora/develop

Add v0.2.0
gruporisoflora · May 9, 2019 · 0020365 · 0020365
2 parents baa4a27 + 797946a
commit 0020365
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 20 deletions.
diff --git a/src/App.js b/src/App.js
@@ -18,7 +18,7 @@ function ListRender(props) {
       style={{
         flexWrap: 'wrap',
         display: 'flex',
-        // justifyContent: 'space-between',
+        justifyContent: 'space-between',
         marginTop: 32
       }}
     >
@@ -62,7 +62,13 @@ export default class App extends React.Component {
             }}
           >
             <CardContent style={{ marginLeft: 32, marginRight: 32 }}>
-              <ActionArea>
+              <ActionArea
+                areaName={
+                  this.state.inFocus
+                    ? this.state.results.data[this.state.inFocus - 1].id
+                    : null
+                }
+              >
                 {this.state.inFocus && (
                   <div
                     style={{

diff --git a/src/components/ActionArea.js b/src/components/ActionArea.js
@@ -13,7 +13,7 @@ export default class ActionArea extends React.Component {
             fontWeight: '600'
           }}
         >
-          {this.props.areaName}
+          {this.props.areaName ? 'Área ' + this.props.areaName : null}
         </div>
         <div
           style={{

diff --git a/src/components/Area.js b/src/components/Area.js
@@ -3,18 +3,29 @@ import Button from '@material-ui/core/Button';
 
 export default class Area extends React.Component {
   render() {
+    const { id, cLevel } = this.props.poda;
+
+    const getColorByCLevel = cLevel => {
+      if (cLevel === 'LOW') return '#56C577';
+      if (cLevel === 'MEDIUM') return '#FF9C50';
+      if (cLevel === 'HIGH') return '#FF6060';
+      return '#56C577';
+    };
+
     return (
       <Button
         style={{
           width: 80,
           height: 80,
-          backgroundColor: 'red',
           borderRadius: 20,
+          backgroundColor: getColorByCLevel(cLevel),
+          color: '#2A1725',
+          fontWeight: 'bold',
           margin: 16
         }}
         onClick={this.props.onPress}
       >
-        <div> </div>
+        <div> Área {id} </div>
       </Button>
     );
   }

diff --git a/src/components/StepBox.js b/src/components/StepBox.js
@@ -2,12 +2,12 @@ import React from 'react';
 
 export default class StepsBox extends React.Component {
   render() {
-    const { cLevel, status, shouldIDisplay } = this.props;
+    const { cLevel, status, shouldIDisplay, stepName } = this.props;
     const getColorByCLevel = cLevel => {
-      if (cLevel === 'LOW') return 'green';
-      if (cLevel === 'MEDIUM') return 'yellow';
-      if (cLevel === 'HIGH') return 'red';
-      return 'lime';
+      if (cLevel === 'LOW') return '#56C577';
+      if (cLevel === 'MEDIUM') return '#FF9C50';
+      if (cLevel === 'HIGH') return '#FF6060';
+      return '#56C577';
     };
     const getStatusText = status => {
       if (status === 'DELAYED') return 'ATRASADO';
@@ -19,18 +19,22 @@ export default class StepsBox extends React.Component {
       <div
         style={{
           flex: 1,
-          height: 40,
-          marginLeft: 4,
-          marginRight: 4,
+          height: 50,
+          marginLeft: '4px',
+          marginRight: '4px',
           backgroundColor: shouldIDisplay ? getColorByCLevel(cLevel) : 'grey',
           alignItems: 'center',
           justifyContent: 'center',
-          color: 'white',
-          fontSize: 14,
+          color: '#2A1725',
+          fontWeight: 'bold',
+          fontSize: '0.5em',
+          paddingLeft: '2px',
+          paddingRight: '2px',
           display: 'flex'
         }}
       >
-        {shouldIDisplay ? getStatusText(status) : null}
+        {stepName}
+        {/* {shouldIDisplay ? getStatusText(status) : null} */}
       </div>
     );
   }

diff --git a/src/components/StepsLine.js b/src/components/StepsLine.js
@@ -14,22 +14,26 @@ export default class StepsLine extends React.Component {
         }}
       >
         <StepBox
-          shouldIDisplay={step === 'GROWING'}
+          shouldIDisplay={step === 'NEXT_TO_CABLE'}
+          stepName="Crescimento"
           cLevel={cLevel}
           status={status}
         />
         <StepBox
-          shouldIDisplay={step === 'NEXT_TO_CABLE'}
+          shouldIDisplay={step === 'IN_INPECTION'}
+          stepName="Inspeção"
           cLevel={cLevel}
           status={status}
         />
         <StepBox
-          shouldIDisplay={step === 'IN_INPECTION'}
+          shouldIDisplay={step === 'CHECKED_TO_CUT'}
+          stepName="Poda"
           cLevel={cLevel}
           status={status}
         />
         <StepBox
-          shouldIDisplay={step === 'CHECKED_TO_CUT'}
+          shouldIDisplay={step === 'GROWING'}
+          stepName="Status da Área"
           cLevel={cLevel}
           status={status}
         />