From 7494e99f73c3aa28f7caf8b6b0c063a0cb6035cf Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Fri, 3 Jun 2022 17:17:41 -0500
Subject: Add page Simulacion 7 dias

falta bastante solo v1 para probar back
---
 front/odiparpack/app/containers/App/Application.js |  8 +-
 .../Odipar/Simulacion/Simulacion7Dias.js           |  8 +-
 .../containers/Odipar/Simulacion/SimulacionMain.js | 96 ++++++++++++++++++++++
 front/odiparpack/app/containers/pageListAsync.js   |  7 +-
 front/odiparpack/app/utils/odipar/menu.js          |  2 +-
 5 files changed, 112 insertions(+), 9 deletions(-)
 create mode 100644 front/odiparpack/app/containers/Odipar/Simulacion/SimulacionMain.js

diff --git a/front/odiparpack/app/containers/App/Application.js b/front/odiparpack/app/containers/App/Application.js
index 685228d..0e637b0 100644
--- a/front/odiparpack/app/containers/App/Application.js
+++ b/front/odiparpack/app/containers/App/Application.js
@@ -26,11 +26,8 @@ import {
   Photos, Error, Settings,
   HelpSupport, MapMarker, MapDirection, SearchMap,
   TrafficIndicator, StreetViewMap, NotFound, 
-  Pedidos,
-  Almacenes,
-  Camiones,
-  Tramos, 
-  Simulacion7Dias
+  Pedidos, Almacenes, Camiones, Tramos, 
+  Simulacion7Dias, SimulacionMain
 } from '../pageListAsync';
 
 function Application(props) {
@@ -47,6 +44,7 @@ function Application(props) {
         <Route exact path="/app/almacenes" component={Almacenes}/>
         <Route exact path="/app/camiones" component={Camiones}/>
         <Route exact path="/app/tramos" component={Tramos}/>
+        <Route exact path="/app/simulacion/main" component={SimulacionMain}/>
         { /* Layout */ }
         <Route exact path="/app/layouts" component={Parent} />
         <Route path="/app/layouts/grid" component={Grid} />
diff --git a/front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js b/front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js
index eff6d5d..97bcf5b 100644
--- a/front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js
+++ b/front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { withStyles } from '@material-ui/core/styles';
 import {getX, getY} from './utilCoords'
-import { Icon } from "@material-ui/core";
+import { Icon, Typography } from "@material-ui/core";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import { mapaH, mapaW } from "odi-utils/constants"
 
@@ -47,6 +47,10 @@ class Simulacion7Dias extends Component {
     ]
     render() { 
         return (
+            <>
+                <Typography variant="h4">
+                    {`Resultado de simulación a 7 días`}
+                </Typography>
             <TransformWrapper
                 defaultScale={1}
                 maxScale={1.8}
@@ -73,7 +77,7 @@ class Simulacion7Dias extends Component {
                 </svg>
                 </TransformComponent>
             </TransformWrapper>
-
+            </>
         );
     }
 }
diff --git a/front/odiparpack/app/containers/Odipar/Simulacion/SimulacionMain.js b/front/odiparpack/app/containers/Odipar/Simulacion/SimulacionMain.js
new file mode 100644
index 0000000..616fab8
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Simulacion/SimulacionMain.js
@@ -0,0 +1,96 @@
+import React, {Component} from "react";
+import { Button, Divider, FormControl, Grid, InputLabel, MenuItem, Paper, Select, Typography } from "@material-ui/core";
+import { withStyles } from '@material-ui/core/styles';
+import { Field, reduxForm } from "redux-form";
+import { SelectRedux } from 'ba-components/Forms/ReduxFormMUI';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+      padding: 20
+    },
+    field: {
+        width: '70%',
+        marginBottom: 20
+    }
+  });
+
+  const initData = {
+    selection: 'option1',
+  };
+
+class SimulacionMain extends Component {
+    state = {
+        tipo:''
+    }
+
+    changeTipo(tipo){
+        this.setState({tipo: tipo})
+    }
+
+    handleChange = event => {
+        this.setState({ [event.target.name]: event.target.value });
+      };
+
+    render() { 
+        const trueBool = true;
+        const { classes } = this.props;
+        return (
+          <div>
+            <Typography variant="h4">
+                {`Simulación`}
+            </Typography>
+            <div>  
+              <Paper className={classes.root}>
+                <Grid container>
+                    <Grid item xs={12} sm={5} >
+                        <Typography variant="h6">
+                            {`Datos generales`}
+                        </Typography>
+                        <form>
+                            <div>
+                            <FormControl className={classes.field}>
+                                <InputLabel htmlFor="selection">Tipo de simulación</InputLabel>
+                                <Select
+                                    inputProps={{
+                                        name: 'tipo',
+                                        id: 'tipoid',
+                                      }}
+                                    value={initData.selection}
+                                    onChange={this.handleChange}
+                                    placeholder="Seleccionar"
+                                    autoWidth={trueBool}
+                                >
+                                <MenuItem value = "option1" >Simulación a 7 días</MenuItem>
+                                <MenuItem value="option2" >Simulación a colapso</MenuItem>                                
+                                </Select>
+                            </FormControl>
+                            </div>
+
+                            <div>
+                                <Button variant="contained" color="secondary">
+                                    Iniciar Simulación
+                                </Button>
+                            </div>
+                        </form>
+                    </Grid>
+                    <Divider variant="inset" style={{color:'black'}}/>
+                    <Grid item xs={12} sm={7}>
+                        <Typography variant="h6">
+                            {`Pedidos`}
+                        </Typography>
+                    </Grid>
+                </Grid>
+              </Paper>
+            </div>
+          </div>
+        );
+    }
+}
+
+const SimulacionMainMapped = reduxForm({
+    form: 'immutableExample',
+  })(SimulacionMain);
+ 
+export default withStyles(styles)(SimulacionMainMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/pageListAsync.js b/front/odiparpack/app/containers/pageListAsync.js
index 324b633..eac9a34 100644
--- a/front/odiparpack/app/containers/pageListAsync.js
+++ b/front/odiparpack/app/containers/pageListAsync.js
@@ -1,7 +1,7 @@
 import Loadable from 'react-loadable';
 import Loading from 'ba-components/Loading';
 
-// 2.Pedidos
+// 1.Pedidos
 export const Simulacion7Dias = Loadable({
   loader: () => import('./Odipar/Simulacion/Simulacion7Dias'),
   loading: Loading,
@@ -31,6 +31,11 @@ export const Tramos = Loadable({
   loading: Loading,
 });
 
+// 6. Simulacion
+export const SimulacionMain = Loadable({
+  loader: () => import('./Odipar/Simulacion/SimulacionMain'),
+  loading: Loading,
+});
 
 
 // Dashboard
diff --git a/front/odiparpack/app/utils/odipar/menu.js b/front/odiparpack/app/utils/odipar/menu.js
index 13c5258..27d6d17 100644
--- a/front/odiparpack/app/utils/odipar/menu.js
+++ b/front/odiparpack/app/utils/odipar/menu.js
@@ -45,7 +45,7 @@ module.exports = [
       key: 'simulacion',
       name: 'Simulación',
       icon: 'fast_forward',
-      link: '/app/pages/calendar',
+      link: '/app/simulacion/main',
       child: [ ]
     }
   ];
\ No newline at end of file
-- 
cgit v1.2.3