From 77fb39778fc4ebb3eea9e9801320efe1a4878c9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 1 Jun 2022 13:08:52 -0500
Subject: =?UTF-8?q?Add=20Almacen,=20Ruta,=20Camiones=20(Flota,=20Camiones,?=
 =?UTF-8?q?=20Aver=C3=ADas)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#TODO
- Arreglar combos
- Añadir los reducer de camiones, rutas, almacen
---
 front/odiparpack/app/containers/App/Application.js |   8 +-
 .../containers/Odipar/Almacen/table/CrudAlmacen.js |   6 +-
 .../Odipar/Camiones/AveriaTab/AveriaTab.js         |  64 +++++++++
 .../Camiones/AveriaTab/table/CrudAveriaTab.js      | 149 ++++++++++++++++++++
 .../Camiones/AveriaTab/table/FormAveriaTab.js      | 153 +++++++++++++++++++++
 .../Odipar/Camiones/AveriaTab/table/dataAveria.js  |  88 ++++++++++++
 .../Odipar/Camiones/AveriaTab/table/index.js       |   1 +
 .../Odipar/Camiones/CamionTab/CamionTab.js         |  64 +++++++++
 .../Camiones/CamionTab/table/CrudCamionTab.js      | 149 ++++++++++++++++++++
 .../Camiones/CamionTab/table/FormCamionTab.js      | 121 ++++++++++++++++
 .../Odipar/Camiones/CamionTab/table/dataCamion.js  |  77 +++++++++++
 .../Odipar/Camiones/CamionTab/table/index.js       |   1 +
 .../app/containers/Odipar/Camiones/CamionesMain.js | 101 ++++++++++++++
 .../Odipar/Camiones/FlotaTab/FlotaTab.js           |  59 ++++++++
 .../Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js | 149 ++++++++++++++++++++
 .../Odipar/Camiones/FlotaTab/table/FormFlotaTab.js | 100 ++++++++++++++
 .../Odipar/Camiones/FlotaTab/table/dataFlota.js    |  50 +++++++
 .../Odipar/Camiones/FlotaTab/table/index.js        |   1 +
 .../containers/Odipar/Pedidos/table/CrudPedido.js  |   6 +-
 .../containers/Odipar/RedTramos/RutaTab/RutaTab.js |  72 ++++++++++
 .../Odipar/RedTramos/RutaTab/table/CrudRutaTab.js  | 149 ++++++++++++++++++++
 .../Odipar/RedTramos/RutaTab/table/FormRutaTab.js  | 108 +++++++++++++++
 .../Odipar/RedTramos/RutaTab/table/dataRuta.js     |  59 ++++++++
 .../Odipar/RedTramos/RutaTab/table/index.js        |   1 +
 .../app/containers/Odipar/RedTramos/TramosMain.js  |  89 ++++++++++++
 front/odiparpack/app/containers/pageListAsync.js   |  12 ++
 26 files changed, 1829 insertions(+), 8 deletions(-)
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/AveriaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/CrudAveriaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/FormAveriaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/dataAveria.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/index.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/CamionTab/CamionTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/CrudCamionTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/FormCamionTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/dataCamion.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/index.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/CamionesMain.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/FlotaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/FormFlotaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/dataFlota.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/index.js
 create mode 100644 front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/RutaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/CrudRutaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/FormRutaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/dataRuta.js
 create mode 100644 front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/index.js
 create mode 100644 front/odiparpack/app/containers/Odipar/RedTramos/TramosMain.js

(limited to 'front/odiparpack/app/containers')

diff --git a/front/odiparpack/app/containers/App/Application.js b/front/odiparpack/app/containers/App/Application.js
index 8a30720..6ab9d34 100644
--- a/front/odiparpack/app/containers/App/Application.js
+++ b/front/odiparpack/app/containers/App/Application.js
@@ -27,7 +27,9 @@ import {
   HelpSupport, MapMarker, MapDirection, SearchMap,
   TrafficIndicator, StreetViewMap, NotFound, 
   Pedidos,
-  Almacenes
+  Almacenes,
+  Camiones,
+  Tramos
 } from '../pageListAsync';
 
 function Application(props) {
@@ -38,9 +40,11 @@ function Application(props) {
       <Switch>
         <Route exact path="/app" component={DashboardV1} />
         <Route exact path="/app/dashboard-v2" component={DashboardV2} />
-        {/* Pedidos */}
+        {/* OdiparPack */}
         <Route exact path="/app/pedidos" component={Pedidos}/>
         <Route exact path="/app/almacenes" component={Almacenes}/>
+        <Route exact path="/app/camiones" component={Camiones}/>
+        <Route exact path="/app/tramos" component={Tramos}/>
         { /* Layout */ }
         <Route exact path="/app/layouts" component={Parent} />
         <Route path="/app/layouts/grid" component={Grid} />
diff --git a/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js b/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js
index 887d603..c56a9a9 100644
--- a/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js
+++ b/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js
@@ -12,7 +12,7 @@ import {
   editAction,
   closeNotifAction
 } from 'ba-actions/CrudTbFrmActions';
-import { CrudTableForm, Notification } from 'ba-components';
+import { CrudTableForm2, Notification } from 'ba-components';
 import {
   Paper,
   RadioGroup,
@@ -69,7 +69,7 @@ class CrudAlmacen extends Component {
       <div>
         <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
         <Paper className={classes.root}>
-          <CrudTableForm
+          <CrudTableForm2
             dataTable={dataTable}
             openForm={openForm}
             dataInit={dataReal}
@@ -92,7 +92,7 @@ class CrudAlmacen extends Component {
             {/* Create Your own form, then arrange or custom it as You like */}
             <FormAlmacen/>
             {/* No need create button or submit, because that already made in this component */}
-          </CrudTableForm>
+          </CrudTableForm2>
         </Paper>
       </div>
     );
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/AveriaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/AveriaTab.js
new file mode 100644
index 0000000..b7ee4fd
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/AveriaTab.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { CrudAveriaTab } from './table'
+import { Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class AveriaTab extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataRealF: []
+    };
+    this.props.dispatch(getPedidos()).then((res) => {
+      if (res) {
+          this.setState({
+            dataRealF: res.data,
+          });
+      }
+    })
+  }
+
+
+    render() {
+      const {dataRealF} = this.state;
+      const { classes } = this.props;
+        return (
+         
+            <CrudAveriaTab title = "Listado de Camiones" dataReal={dataRealF}/>
+         
+        );
+    }
+}
+
+AveriaTab.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const reducer = 'pedido'
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  pedidosLista : state.getIn([reducer]),
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const AveriaTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AveriaTab);
+
+export default withStyles(styles)(AveriaTabMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/CrudAveriaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/CrudAveriaTab.js
new file mode 100644
index 0000000..15dbd1c
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/CrudAveriaTab.js
@@ -0,0 +1,149 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {
+  fetchAction,
+  addAction,
+  closeAction,
+  submitAction,
+  removeAction,
+  editAction,
+  closeNotifAction
+} from 'ba-actions/CrudTbFrmActions';
+import { CrudTableForm, Notification } from 'ba-components';
+import {
+  Paper,
+  RadioGroup,
+} from '@material-ui/core';
+import { anchorTable, dataApi } from './dataAveria';
+import FormAveriaTab from './FormAveriaTab';
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+const branch = 'crudAveria';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudAveriaTab extends Component {
+
+  render() {
+    //console.log("render ps")
+    const {
+      classes,
+      fetchData,
+      addNew,
+      closeForm,
+      submit,
+      removeRow,
+      editRow,
+      dataTable,
+      openForm,
+      initValues,
+      closeNotif,
+      messageNotif,
+      title,
+      dataReal,
+      dispatch,
+      editingId
+    } = this.props;
+    
+    //console.log("render ps DATA", dataReal)
+    //console.log("original", dataApi)
+    
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTableForm
+            dataTable={dataTable}
+            openForm={openForm}
+            dataInit={dataApi}
+            anchor={anchorTable}
+            title={title}
+            fetchData={fetchData}
+            addNew={addNew}
+            closeForm={closeForm}
+            submit={submit}
+            removeRow={removeRow}
+            editRow={editRow}
+            branch={branch}
+            initValues={initValues}
+            addNewAPI={getPedidos}
+            removeRowAPI={getPedidos}
+            editRowAPI={getPedidos}
+            dispatch = {dispatch}
+            editingId = {editingId}
+          >
+            {/* Create Your own form, then arrange or custom it as You like */}
+            <FormAveriaTab/>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudAveriaTab.propTypes = {
+  dataTable: PropTypes.object.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  classes: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  addNew: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  initValues: PropTypes.object.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  initValues: state.getIn([branch, 'formValues']),
+  dataTable: state.getIn([branch, 'dataTable']),
+  openForm: state.getIn([branch, 'showFrm']),
+  messageNotif: state.getIn([branch, 'notifMsg']),
+  editingId: state.getIn([branch, 'editingId']),
+  pedidosLista : state.getIn(['pedido','pedidos']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchAction, dispatch),
+  addNew: bindActionCreators(addAction, dispatch),
+  closeForm: bindActionCreators(closeAction, dispatch),
+  submit: bindActionCreators(submitAction, dispatch),
+  removeRow: bindActionCreators(removeAction, dispatch),
+  editRow: bindActionCreators(editAction, dispatch),
+  closeNotif: bindActionCreators(closeNotifAction, dispatch),
+  dispatch
+});
+
+const CrudAveriaTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudAveriaTab);
+
+export default withStyles(styles)(CrudAveriaTabMapped);
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/FormAveriaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/FormAveriaTab.js
new file mode 100644
index 0000000..65ad519
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/FormAveriaTab.js
@@ -0,0 +1,153 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { Field } from 'redux-form/immutable';
+import {required, integer} from 'ba-api/validation'
+import {
+    SelectRedux,
+    TextFieldRedux,
+    DatePickerRedux,
+    EstadoRedux
+} from 'ba-components/Forms/ReduxFormMUI';
+import {
+    MenuItem,
+    InputLabel,
+    FormControl,
+    Typography,
+  } from '@material-ui/core';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+    },
+    field: {
+      width: '100%',
+      marginBottom: 20
+    },
+    fieldBasic: {
+      width: '100%',
+      marginBottom: 20,
+      marginTop: 10
+    },
+    inlineWrap: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  });
+  
+
+class FormAveriaTab extends Component {
+    saveRef = ref => {
+        this.ref = ref;
+        return this.ref;
+    };
+
+    state = {
+        selectedDate: new Date(),
+    }
+    
+    handleDateChange = (date) => {
+        this.setState({ selectedDate: date });
+    }
+    render() { 
+        const { classes } = this.props;
+        const { selectedDate } = this.state;
+        const trueBool = true;
+        return (
+            <>
+              <div>
+                  <Field
+                      name="codigo"
+                      component={TextFieldRedux}
+                      placeholder="Código de Camión"
+                      label="Código de Camión"
+                      validate={[required]}
+                      required
+                      ref={this.saveRef}
+                      className={classes.field}
+                  />
+              </div>
+                <div>
+                  <FormControl className={classes.field}>
+                      <Field
+                          name = "fecha"
+                          component={DatePickerRedux}
+                          label="Fecha de Registro"
+                          readonly= {true}
+                      />
+                    </FormControl>
+              </div> 
+              <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Tipo de Avería</InputLabel>
+                    <Field
+                    name="tipo"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value={0}>Moderada</MenuItem>
+                    <MenuItem value={1}>Fuerte</MenuItem>
+                    <MenuItem value={2}>Siniestra</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                <Field
+                      name="latidud"
+                      component={TextFieldRedux}
+                      placeholder="Latitud"
+                      label="Latitud"
+                      validate={[required]}
+                      required
+                      ref={this.saveRef}
+                      className={classes.field}
+                  />
+                </div>
+                <div>
+                <Field
+                      name="longitud"
+                      component={TextFieldRedux}
+                      placeholder="Longitud"
+                      label="Longitud"
+                      validate={[required]}
+                      required
+                      ref={this.saveRef}
+                      className={classes.field}
+                  />
+                </div>
+                <div>
+                <FormControl className={classes.field}>
+                  <Field
+                      name = "fecha"
+                      component={DatePickerRedux}
+                      label="Fecha de Registro"
+                      readonly= {false}
+                  />
+                  </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Tipo de Avería</InputLabel>
+                    <Field
+                    name="estado"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value={0}>Pendiente</MenuItem>
+                    <MenuItem value={1}>Bloqueado</MenuItem>
+                    <MenuItem value={2}>Finalizado</MenuItem>
+                    </Field>
+                  </FormControl>
+                </div>
+            </>
+        );
+    }
+}
+
+FormAveriaTab.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(FormAveriaTab);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/dataAveria.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/dataAveria.js
new file mode 100644
index 0000000..e935530
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/dataAveria.js
@@ -0,0 +1,88 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Número Avería',
+    initialValue: '',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'codigo',
+    label: 'Código de camión',
+    initialValue: '',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'fecha',
+    label: 'Fecha de registro',
+    initialValue: new Date(),
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'tipo',
+    label: 'Tipo de Avería',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'etiq_tipoAveria'
+  }, {
+    name: 'ubicacion',
+    label: 'Ubicación',
+    initialValue: '',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'estimado',
+    label: 'Tiempo de finalización estimado',
+    initialValue: new Date(),
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'estado',
+    label: 'Estado',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'etiq_estadoAveria'
+  }, 
+  {
+    name: 'action',
+    label: 'Action',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    codigo: 'A001',
+    fecha: '24/05/2022 11:28 AM',
+    tipo: 0,
+    latitud: 50,
+    longitud: 23,
+    estimado: '24/05/2022 11:28 AM',
+    estado: 0,
+  }, {
+    id: '2',
+    codigo: 'A002',
+    fecha: '24/05/2022 11:28 AM',
+    tipo: 1,
+    latitud: 50,
+    longitud: 23,
+    estimado: '24/05/2022 11:28 AM',
+    estado: 0,
+  }, {
+    id: '3',
+    codigo: 'A002',
+    fecha: '24/05/2022 11:28 AM',
+    tipo: 2,
+    latitud: 50,
+    longitud: 23,
+    estimado: '24/05/2022 11:28 AM',
+    estado: 1,
+  }
+];
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/index.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/index.js
new file mode 100644
index 0000000..4e9b692
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/index.js
@@ -0,0 +1 @@
+export CrudAveriaTab from "./CrudAveriaTab";
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/CamionTab.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/CamionTab.js
new file mode 100644
index 0000000..2f9862e
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/CamionTab.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { CrudCamionTab } from './table'
+import { Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class CamionTab extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataRealF: []
+    };
+    this.props.dispatch(getPedidos()).then((res) => {
+      if (res) {
+          this.setState({
+            dataRealF: res.data,
+          });
+      }
+    })
+  }
+
+
+    render() {
+      const {dataRealF} = this.state;
+      const { classes } = this.props;
+        return (
+         
+            <CrudCamionTab title = "Listado de Camiones" dataReal={dataRealF}/>
+         
+        );
+    }
+}
+
+CamionTab.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const reducer = 'pedido'
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  pedidosLista : state.getIn([reducer]),
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const CamionTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CamionTab);
+
+export default withStyles(styles)(CamionTabMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/CrudCamionTab.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/CrudCamionTab.js
new file mode 100644
index 0000000..5a1783c
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/CrudCamionTab.js
@@ -0,0 +1,149 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {
+  fetchAction,
+  addAction,
+  closeAction,
+  submitAction,
+  removeAction,
+  editAction,
+  closeNotifAction
+} from 'ba-actions/CrudTbFrmActions';
+import { CrudTableForm, Notification } from 'ba-components';
+import {
+  Paper,
+  RadioGroup,
+} from '@material-ui/core';
+import { anchorTable, dataApi } from './dataCamion';
+import FormCamionTab from './FormCamionTab';
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+const branch = 'crudCamion';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudCamionTab extends Component {
+
+  render() {
+    //console.log("render ps")
+    const {
+      classes,
+      fetchData,
+      addNew,
+      closeForm,
+      submit,
+      removeRow,
+      editRow,
+      dataTable,
+      openForm,
+      initValues,
+      closeNotif,
+      messageNotif,
+      title,
+      dataReal,
+      dispatch,
+      editingId
+    } = this.props;
+    
+    //console.log("render ps DATA", dataReal)
+    //console.log("original", dataApi)
+    
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTableForm
+            dataTable={dataTable}
+            openForm={openForm}
+            dataInit={dataApi}
+            anchor={anchorTable}
+            title={title}
+            fetchData={fetchData}
+            addNew={addNew}
+            closeForm={closeForm}
+            submit={submit}
+            removeRow={removeRow}
+            editRow={editRow}
+            branch={branch}
+            initValues={initValues}
+            addNewAPI={getPedidos}
+            removeRowAPI={getPedidos}
+            editRowAPI={getPedidos}
+            dispatch = {dispatch}
+            editingId = {editingId}
+          >
+            {/* Create Your own form, then arrange or custom it as You like */}
+            <FormCamionTab/>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudCamionTab.propTypes = {
+  dataTable: PropTypes.object.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  classes: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  addNew: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  initValues: PropTypes.object.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  initValues: state.getIn([branch, 'formValues']),
+  dataTable: state.getIn([branch, 'dataTable']),
+  openForm: state.getIn([branch, 'showFrm']),
+  messageNotif: state.getIn([branch, 'notifMsg']),
+  editingId: state.getIn([branch, 'editingId']),
+  pedidosLista : state.getIn(['pedido','pedidos']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchAction, dispatch),
+  addNew: bindActionCreators(addAction, dispatch),
+  closeForm: bindActionCreators(closeAction, dispatch),
+  submit: bindActionCreators(submitAction, dispatch),
+  removeRow: bindActionCreators(removeAction, dispatch),
+  editRow: bindActionCreators(editAction, dispatch),
+  closeNotif: bindActionCreators(closeNotifAction, dispatch),
+  dispatch
+});
+
+const CrudCamionTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudCamionTab);
+
+export default withStyles(styles)(CrudCamionTabMapped);
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/FormCamionTab.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/FormCamionTab.js
new file mode 100644
index 0000000..25d107c
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/FormCamionTab.js
@@ -0,0 +1,121 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { Field } from 'redux-form/immutable';
+import {required, integer} from 'ba-api/validation'
+import {
+    SelectRedux,
+    TextFieldRedux,
+    DatePickerRedux,
+    EstadoRedux
+} from 'ba-components/Forms/ReduxFormMUI';
+import {
+    MenuItem,
+    InputLabel,
+    FormControl,
+    Typography,
+  } from '@material-ui/core';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+    },
+    field: {
+      width: '100%',
+      marginBottom: 20
+    },
+    fieldBasic: {
+      width: '100%',
+      marginBottom: 20,
+      marginTop: 10
+    },
+    inlineWrap: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  });
+  
+
+class FormCamionTab extends Component {
+    saveRef = ref => {
+        this.ref = ref;
+        return this.ref;
+    };
+
+    state = {
+        selectedDate: new Date(),
+    }
+    
+    handleDateChange = (date) => {
+        this.setState({ selectedDate: date });
+    }
+    render() { 
+        const { classes } = this.props;
+        const { selectedDate } = this.state;
+        const trueBool = true;
+        return (
+            <>
+                <div>
+                    <Field
+                        name="placa"
+                        component={TextFieldRedux}
+                        placeholder="Placa"
+                        label="Placa"
+                        validate={[required]}
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Tipo de Camión</InputLabel>
+                    <Field
+                    name="tipo"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="A">A</MenuItem>
+                    <MenuItem value="B">B</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Provincia origen</InputLabel>
+                    <Field
+                    name="origen"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="Lima">Lima</MenuItem>
+                    <MenuItem value="Arequipa">Arequipa</MenuItem>
+                    <MenuItem value="Cuzco">Cuzco</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Estado</InputLabel>
+                    <Field
+                    name="estado"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value={0}>Disponible</MenuItem>
+                    <MenuItem value={1}>En camino</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+            </>
+        );
+    }
+}
+
+FormCamionTab.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(FormCamionTab);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/dataCamion.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/dataCamion.js
new file mode 100644
index 0000000..2d9952a
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/dataCamion.js
@@ -0,0 +1,77 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Id',
+    initialValue: '',
+    hidden: true,
+    type: 'texto'
+  }, {
+    name: 'codigo',
+    label: 'Código de camión',
+    initialValue: '',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'placa',
+    label: 'Placa',
+    initialValue: '',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'tipo',
+    label: 'Tipo',
+    initialValue: 'A',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'capacidad',
+    label: 'Capacidad',
+    initialValue: '',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'origen',
+    label: 'Provincia Origen',
+    initialValue: 'Lima',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'estado',
+    label: 'Estado',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'etiq_camion'
+  }, 
+  {
+    name: 'action',
+    label: 'Action',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    codigo: 'A001',
+    placa: 'ABC-831',
+    origen: 'Lima',
+    tipo: 'A',
+    estado: 0,
+    capacidad: 23,
+  }, {
+    id: '2',
+    codigo: 'A002',
+    placa: 'ABD-836',
+    origen: 'Lima',
+    tipo: 'A',
+    estado: 1,
+    capacidad: 50
+  }
+];
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/index.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/index.js
new file mode 100644
index 0000000..80c4abb
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/index.js
@@ -0,0 +1 @@
+export CrudCamionTab from "./CrudCamionTab";
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionesMain.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionesMain.js
new file mode 100644
index 0000000..6298da6
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionesMain.js
@@ -0,0 +1,101 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { AppBar, Tabs, Tab, Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+
+import CamionTab from './CamionTab/CamionTab';
+import FlotaTab from './FlotaTab/FlotaTab';
+import AveriaTab from './AveriaTab/AveriaTab';
+
+//actions
+
+
+function TabContainer(props) {
+    return (
+      <Typography component="div" style={{ padding: 8 * 3 }}>
+        {props.children}
+      </Typography>
+    );
+  }
+  
+  TabContainer.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class CamionesMain extends Component {
+  constructor (props) {
+    
+    super(props)
+    this.state = {
+      value: 0
+    };
+
+  }
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
+
+    render() {
+      const {value} = this.state;
+      const { classes } = this.props;
+        return (
+          <div>
+            <Typography variant="h4">
+                {`Camiones`}
+            </Typography>
+            <div>  
+              <Paper className={classes.root}>
+                <AppBar position="static">
+                    <Tabs value={value} onChange={this.handleChange}>
+                        <Tab label="Camiones" />
+                        <Tab label="Flota" />
+                        <Tab label="Averías" />
+                    </Tabs>
+                    </AppBar>
+                    {value === 0 && 
+                        <TabContainer> 
+                          <CamionTab/>
+                        </TabContainer>}
+                    {value === 1 && 
+                      <TabContainer> 
+                        <FlotaTab/>
+                      </TabContainer>}
+                    {value === 2 && 
+                      <TabContainer> 
+                        <AveriaTab/>
+                      </TabContainer>}
+              </Paper>
+            </div>
+          </div>
+        );
+    }
+}
+
+CamionesMain.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const reducer = 'pedido'
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const CamionesMainMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CamionesMain);
+
+export default withStyles(styles)(CamionesMainMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/FlotaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/FlotaTab.js
new file mode 100644
index 0000000..f8072f5
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/FlotaTab.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { CrudFlotaTab } from './table'
+import { Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class FlotaTab extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataRealF: []
+    };
+    this.props.dispatch(getPedidos()).then((res) => {
+      if (res) {
+          this.setState({
+            dataRealF: res.data,
+          });
+      }
+    })
+  }
+
+
+    render() {
+      const {dataRealF} = this.state;
+        return (
+            <CrudFlotaTab title = "Listado de Camiones" dataReal={dataRealF}/>
+        );
+    }
+}
+
+FlotaTab.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const FlotaTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FlotaTab);
+
+export default withStyles(styles)(FlotaTabMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js
new file mode 100644
index 0000000..c824c5b
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js
@@ -0,0 +1,149 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {
+  fetchAction,
+  addAction,
+  closeAction,
+  submitAction,
+  removeAction,
+  editAction,
+  closeNotifAction
+} from 'ba-actions/CrudTbFrmActions';
+import { CrudTableForm, Notification } from 'ba-components';
+import {
+  Paper,
+  RadioGroup,
+} from '@material-ui/core';
+import { anchorTable, dataApi } from './dataFlota';
+import FormFlotaTab from './FormFlotaTab';
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+const branch = 'crudFlota';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudFlotaTab extends Component {
+
+  render() {
+    //console.log("render ps")
+    const {
+      classes,
+      fetchData,
+      addNew,
+      closeForm,
+      submit,
+      removeRow,
+      editRow,
+      dataTable,
+      openForm,
+      initValues,
+      closeNotif,
+      messageNotif,
+      title,
+      dataReal,
+      dispatch,
+      editingId
+    } = this.props;
+    
+    //console.log("render ps DATA", dataReal)
+    //console.log("original", dataApi)
+    
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTableForm
+            dataTable={dataTable}
+            openForm={openForm}
+            dataInit={dataApi}
+            anchor={anchorTable}
+            title={title}
+            fetchData={fetchData}
+            addNew={addNew}
+            closeForm={closeForm}
+            submit={submit}
+            removeRow={removeRow}
+            editRow={editRow}
+            branch={branch}
+            initValues={initValues}
+            addNewAPI={getPedidos}
+            removeRowAPI={getPedidos}
+            editRowAPI={getPedidos}
+            dispatch = {dispatch}
+            editingId = {editingId}
+          >
+            {/* Create Your own form, then arrange or custom it as You like */}
+            <FormFlotaTab/>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudFlotaTab.propTypes = {
+  dataTable: PropTypes.object.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  classes: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  addNew: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  initValues: PropTypes.object.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  initValues: state.getIn([branch, 'formValues']),
+  dataTable: state.getIn([branch, 'dataTable']),
+  openForm: state.getIn([branch, 'showFrm']),
+  messageNotif: state.getIn([branch, 'notifMsg']),
+  editingId: state.getIn([branch, 'editingId']),
+  pedidosLista : state.getIn(['pedido','pedidos']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchAction, dispatch),
+  addNew: bindActionCreators(addAction, dispatch),
+  closeForm: bindActionCreators(closeAction, dispatch),
+  submit: bindActionCreators(submitAction, dispatch),
+  removeRow: bindActionCreators(removeAction, dispatch),
+  editRow: bindActionCreators(editAction, dispatch),
+  closeNotif: bindActionCreators(closeNotifAction, dispatch),
+  dispatch
+});
+
+const CrudFlotaTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudFlotaTab);
+
+export default withStyles(styles)(CrudFlotaTabMapped);
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/FormFlotaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/FormFlotaTab.js
new file mode 100644
index 0000000..54c2369
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/FormFlotaTab.js
@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { Field } from 'redux-form/immutable';
+import {required, integer} from 'ba-api/validation'
+import {
+    SelectRedux,
+    TextFieldRedux
+} from 'ba-components/Forms/ReduxFormMUI';
+import {
+    MenuItem,
+    InputLabel,
+    FormControl
+  } from '@material-ui/core';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+    },
+    field: {
+      width: '100%',
+      marginBottom: 20
+    },
+    fieldBasic: {
+      width: '100%',
+      marginBottom: 20,
+      marginTop: 10
+    },
+    inlineWrap: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  });
+  
+
+class FormFlotaTab extends Component {
+    saveRef = ref => {
+        this.ref = ref;
+        return this.ref;
+    };
+
+    state = {
+        selectedDate: new Date(),
+    }
+    
+    handleDateChange = (date) => {
+        this.setState({ selectedDate: date });
+    }
+    render() { 
+        const { classes } = this.props;
+        const { selectedDate } = this.state;
+        const trueBool = true;
+        return (
+            <>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Tipo de Camión</InputLabel>
+                    <Field
+                    name="tipo"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="A">A</MenuItem>
+                    <MenuItem value="B">B</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <Field
+                        name="capacidad"
+                        component={TextFieldRedux}
+                        placeholder="Capacidad de paquetes"
+                        label="Capacidad de paquetes"
+                        validate={[required]}
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+                <div>
+                    <Field
+                        name="velocidad"
+                        component={TextFieldRedux}
+                        placeholder="Velocidad (km/h)"
+                        label="Velocidad (km/h)"
+                        validate={[required]}
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+            </>
+        );
+    }
+}
+
+FormFlotaTab.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(FormFlotaTab);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/dataFlota.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/dataFlota.js
new file mode 100644
index 0000000..8cc5dae
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/dataFlota.js
@@ -0,0 +1,50 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Id',
+    initialValue: '',
+    hidden: true,
+    type: 'texto'
+  }, {
+    name: 'tipo',
+    label: 'Tipo de camión',
+    initialValue: 'A',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'capacidad',
+    label: 'Capacidad de paquetes',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'velocidad',
+    label: 'Velocidad (km/h)',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, 
+  {
+    name: 'action',
+    label: 'Action',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    tipo: 'A',
+    velocidad: 50,
+    capacidad: 23,
+  }, {
+    id: '2',
+    tipo: 'A',
+    velocidad: 60,
+    capacidad: 50
+  }
+];
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/index.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/index.js
new file mode 100644
index 0000000..d799225
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/index.js
@@ -0,0 +1 @@
+export CrudFlotaTab from "./CrudFlotaTab";
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
index c7a7a58..c2f023b 100644
--- a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
@@ -12,7 +12,7 @@ import {
   editAction,
   closeNotifAction
 } from 'ba-actions/CrudTbFrmActions';
-import { CrudTableForm, Notification } from 'ba-components';
+import { CrudTableForm2, Notification } from 'ba-components';
 import {
   Paper,
   RadioGroup,
@@ -69,7 +69,7 @@ class CrudPedido extends Component {
       <div>
         <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
         <Paper className={classes.root}>
-          <CrudTableForm
+          <CrudTableForm2
             dataTable={dataTable}
             openForm={openForm}
             dataInit={dataReal}
@@ -92,7 +92,7 @@ class CrudPedido extends Component {
             {/* Create Your own form, then arrange or custom it as You like */}
             <FormPedido/>
             {/* No need create button or submit, because that already made in this component */}
-          </CrudTableForm>
+          </CrudTableForm2>
         </Paper>
       </div>
     );
diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/RutaTab.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/RutaTab.js
new file mode 100644
index 0000000..b35259a
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/RutaTab.js
@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { CrudRutaTab } from './table'
+import { Grid, Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+import { Direction } from 'ba-containers/Maps/demos'
+
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class RutaTab extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataRealF: []
+    };
+    this.props.dispatch(getPedidos()).then((res) => {
+      if (res) {
+          this.setState({
+            dataRealF: res.data,
+          });
+      }
+    })
+  }
+
+
+    render() {
+      const {dataRealF} = this.state;
+      const { classes } = this.props;
+        return (
+          <Grid container>
+            <Grid item xs={12} sm={6}>
+              <CrudRutaTab title = "" dataReal={dataRealF}/>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <Paper className={classes.paper} style={{marginLeft: "10px"}}>
+                <Direction/>
+              </Paper>
+            </Grid>
+          </Grid>
+        );
+    }
+}
+
+RutaTab.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const reducer = 'pedido'
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  pedidosLista : state.getIn([reducer]),
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const RutaTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RutaTab);
+
+export default withStyles(styles)(RutaTabMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/CrudRutaTab.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/CrudRutaTab.js
new file mode 100644
index 0000000..b3cea2a
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/CrudRutaTab.js
@@ -0,0 +1,149 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {
+  fetchAction,
+  addAction,
+  closeAction,
+  submitAction,
+  removeAction,
+  editAction,
+  closeNotifAction
+} from 'ba-actions/CrudTbFrmActions';
+import { CrudTableForm, Notification } from 'ba-components';
+import {
+  Paper,
+  RadioGroup,
+} from '@material-ui/core';
+import { anchorTable, dataApi } from './dataRuta';
+import FormRutaTab from './FormRutaTab';
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+const branch = 'crudRuta';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudRutaTab extends Component {
+
+  render() {
+    //console.log("render ps")
+    const {
+      classes,
+      fetchData,
+      addNew,
+      closeForm,
+      submit,
+      removeRow,
+      editRow,
+      dataTable,
+      openForm,
+      initValues,
+      closeNotif,
+      messageNotif,
+      title,
+      dataReal,
+      dispatch,
+      editingId
+    } = this.props;
+    
+    //console.log("render ps DATA", dataReal)
+    //console.log("original", dataApi)
+    
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTableForm
+            dataTable={dataTable}
+            openForm={openForm}
+            dataInit={dataApi}
+            anchor={anchorTable}
+            title={title}
+            fetchData={fetchData}
+            addNew={addNew}
+            closeForm={closeForm}
+            submit={submit}
+            removeRow={removeRow}
+            editRow={editRow}
+            branch={branch}
+            initValues={initValues}
+            addNewAPI={getPedidos}
+            removeRowAPI={getPedidos}
+            editRowAPI={getPedidos}
+            dispatch = {dispatch}
+            editingId = {editingId}
+          >
+            {/* Create Your own form, then arrange or custom it as You like */}
+            <FormRutaTab/>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudRutaTab.propTypes = {
+  dataTable: PropTypes.object.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  classes: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  addNew: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  initValues: PropTypes.object.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  initValues: state.getIn([branch, 'formValues']),
+  dataTable: state.getIn([branch, 'dataTable']),
+  openForm: state.getIn([branch, 'showFrm']),
+  messageNotif: state.getIn([branch, 'notifMsg']),
+  editingId: state.getIn([branch, 'editingId']),
+  pedidosLista : state.getIn(['pedido','pedidos']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchAction, dispatch),
+  addNew: bindActionCreators(addAction, dispatch),
+  closeForm: bindActionCreators(closeAction, dispatch),
+  submit: bindActionCreators(submitAction, dispatch),
+  removeRow: bindActionCreators(removeAction, dispatch),
+  editRow: bindActionCreators(editAction, dispatch),
+  closeNotif: bindActionCreators(closeNotifAction, dispatch),
+  dispatch
+});
+
+const CrudRutaTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudRutaTab);
+
+export default withStyles(styles)(CrudRutaTabMapped);
diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/FormRutaTab.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/FormRutaTab.js
new file mode 100644
index 0000000..60ba534
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/FormRutaTab.js
@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { Field } from 'redux-form/immutable';
+import {required, integer} from 'ba-api/validation'
+import {
+    SelectRedux,
+    TextFieldRedux,
+    DatePickerRedux,
+    EstadoRedux
+} from 'ba-components/Forms/ReduxFormMUI';
+import {
+    MenuItem,
+    InputLabel,
+    FormControl,
+    Typography,
+  } from '@material-ui/core';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+    },
+    field: {
+      width: '100%',
+      marginBottom: 20
+    },
+    fieldBasic: {
+      width: '100%',
+      marginBottom: 20,
+      marginTop: 10
+    },
+    inlineWrap: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  });
+  
+
+class FormAveriaTab extends Component {
+    saveRef = ref => {
+        this.ref = ref;
+        return this.ref;
+    };
+
+    state = {
+        selectedDate: new Date(),
+    }
+    
+    handleDateChange = (date) => {
+        this.setState({ selectedDate: date });
+    }
+    render() { 
+        const { classes } = this.props;
+        const trueBool = true;
+        return (
+            <>
+              <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Origen</InputLabel>
+                    <Field
+                    name="origen"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="Lima">Lima</MenuItem>
+                    <MenuItem value="Arequipa">Arequipa</MenuItem>
+                    <MenuItem value="Cuzco">Cuzco</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Destino</InputLabel>
+                    <Field
+                    name="destino"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="Lima">Lima</MenuItem>
+                    <MenuItem value="Arequipa">Arequipa</MenuItem>
+                    <MenuItem value="Cuzco">Cuzco</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+              <div>
+                  <Field
+                      name="distancia"
+                      component={TextFieldRedux}
+                      placeholder="Distancia"
+                      label="Distancia (km)"
+                      validate={[required]}
+                      required
+                      ref={this.saveRef}
+                      className={classes.field}
+                  />
+              </div>
+            </>
+        );
+    }
+}
+
+FormAveriaTab.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(FormAveriaTab);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/dataRuta.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/dataRuta.js
new file mode 100644
index 0000000..762fb8f
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/dataRuta.js
@@ -0,0 +1,59 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Número Avería',
+    initialValue: '',
+    hidden: true,
+    type: 'texto'
+  }, {
+    name: 'origen',
+    label: 'Provincia origen',
+    initialValue: 'Lima',
+    width: '13%',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'destino',
+    label: 'Provincia destino',
+    initialValue: 'Arequipa',
+    width: '13%',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'distancia',
+    label: 'Distancia (km)',
+    initialValue: 0,
+    width: '10%',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'estado',
+    label: 'Estado',
+    initialValue: 0,
+    width: '10%',
+    hidden: false,
+    type: 'etiq_ruta'
+  }, 
+  {
+    name: 'action',
+    label: 'Action',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    origen: 'Lima',
+    destino: 'Arequipa',
+    distancia: 234,
+    estado: 0,
+  }, {
+    id: '2',
+    origen: 'Lima',
+    destino: 'Cuzco',
+    distancia: 234,
+    estado: 1,
+  }
+];
diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/index.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/index.js
new file mode 100644
index 0000000..31656fe
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/index.js
@@ -0,0 +1 @@
+export CrudRutaTab from "./CrudRutaTab";
diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/TramosMain.js b/front/odiparpack/app/containers/Odipar/RedTramos/TramosMain.js
new file mode 100644
index 0000000..4d0ecea
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/RedTramos/TramosMain.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { AppBar, Tabs, Tab, Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+import RutaTab from './RutaTab/RutaTab';
+//actions
+
+
+function TabContainer(props) {
+    return (
+      <Typography component="div" style={{ padding: 8 * 3 }}>
+        {props.children}
+      </Typography>
+    );
+  }
+  
+  TabContainer.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class CamionesMain extends Component {
+  constructor (props) {
+    
+    super(props)
+    this.state = {
+      value: 0
+    };
+
+  }
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
+
+    render() {
+      const {value} = this.state;
+      const { classes } = this.props;
+        return (
+          <div>
+            <div>  
+              <Paper className={classes.root}>
+                <AppBar position="static">
+                    <Tabs value={value} onChange={this.handleChange}>
+                        <Tab label="Rutas" />
+                        <Tab label="Bloqueos" />
+                    </Tabs>
+                    </AppBar>
+                    {value === 0 && 
+                        <TabContainer> 
+                          <RutaTab/>
+                        </TabContainer>}
+                    {value === 1 && 
+                      <TabContainer> 
+                        bbbb
+                      </TabContainer>}
+              </Paper>
+            </div>
+          </div>
+        );
+    }
+}
+
+CamionesMain.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const reducer = 'pedido'
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const CamionesMainMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CamionesMain);
+
+export default withStyles(styles)(CamionesMainMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/pageListAsync.js b/front/odiparpack/app/containers/pageListAsync.js
index 14381b1..b64c622 100644
--- a/front/odiparpack/app/containers/pageListAsync.js
+++ b/front/odiparpack/app/containers/pageListAsync.js
@@ -7,12 +7,24 @@ export const Pedidos = Loadable({
   loading: Loading,
 });
 
+// 3.Camiones
+export const Camiones = Loadable({
+  loader: () => import('./Odipar/Camiones/CamionesMain'),
+  loading: Loading,
+});
+
 // 4. Almacenes
 export const Almacenes = Loadable({
   loader: () => import('./Odipar/Almacen/Almacenes'),
   loading: Loading,
 });
 
+// 5. Tramos
+export const Tramos = Loadable({
+  loader: () => import('./Odipar/RedTramos/TramosMain'),
+  loading: Loading,
+});
+
 
 
 // Dashboard
-- 
cgit v1.2.3


From 1f7786a50303d49f54fa713b540b176131faf971 Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Thu, 2 Jun 2022 23:10:42 -0500
Subject: Add mapa v1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Mapa con algunos punto
- Zoom al mapa xdddd
- Punto que se mueve

#TODO
- añadir todos los puntos
- Mejorar el path del punto con funcion
- añadir tiempos segun distancia
- estetica al final (camion, colores, etc)
---
 front/odiparpack/app/containers/App/Application.js |  4 +-
 .../Odipar/Simulacion/Simulacion7Dias.js           | 81 ++++++++++++++++++++++
 .../app/containers/Odipar/Simulacion/utilCoords.js | 42 +++++++++++
 front/odiparpack/app/containers/pageListAsync.js   |  6 ++
 4 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Simulacion/utilCoords.js

(limited to 'front/odiparpack/app/containers')

diff --git a/front/odiparpack/app/containers/App/Application.js b/front/odiparpack/app/containers/App/Application.js
index 6ab9d34..685228d 100644
--- a/front/odiparpack/app/containers/App/Application.js
+++ b/front/odiparpack/app/containers/App/Application.js
@@ -29,7 +29,8 @@ import {
   Pedidos,
   Almacenes,
   Camiones,
-  Tramos
+  Tramos, 
+  Simulacion7Dias
 } from '../pageListAsync';
 
 function Application(props) {
@@ -41,6 +42,7 @@ function Application(props) {
         <Route exact path="/app" component={DashboardV1} />
         <Route exact path="/app/dashboard-v2" component={DashboardV2} />
         {/* OdiparPack */}
+        <Route exact path="/app/simulacion" component={Simulacion7Dias}/>
         <Route exact path="/app/pedidos" component={Pedidos}/>
         <Route exact path="/app/almacenes" component={Almacenes}/>
         <Route exact path="/app/camiones" component={Camiones}/>
diff --git a/front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js b/front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js
new file mode 100644
index 0000000..eff6d5d
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js
@@ -0,0 +1,81 @@
+import React, { Component } from "react";
+import { withStyles } from '@material-ui/core/styles';
+import {getX, getY} from './utilCoords'
+import { Icon } from "@material-ui/core";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import { mapaH, mapaW } from "odi-utils/constants"
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+
+class Simulacion7Dias extends Component {
+    almacenes = [
+        {
+            ubigeo: '150101',
+            provincia: 'LIMA',
+            latitud:-12.04591952,
+            longitud: -77.03049615,
+            region: 'Costa',
+            esPrincipal: 1
+            },{
+            ubigeo: '130101',
+            provincia: 'TRUJILLO',
+            latitud: -8.11176389,
+            longitud: -79.02868652,
+            region: 'Costa',
+            esPrincipal: 1
+            },{
+            ubigeo: '040101',
+            provincia: 'AREQUIPA',
+            latitud:-16.39881421,
+            longitud: -71.537019649,
+            region: 'Costa',
+            esPrincipal: 1
+            },{
+            ubigeo: '050301',
+            provincia: 'HUANCA SANCOS',
+            latitud:-13.91988366,
+            longitud: -74.33388289,
+            region: 'Costa',
+            esPrincipal: 0
+            }
+    ]
+    render() { 
+        return (
+            <TransformWrapper
+                defaultScale={1}
+                maxScale={1.8}
+                defaultPositionX={200}
+                defaultPositionY={100}
+            >
+                <TransformComponent>
+                    <div>
+                        <img src={require("../../../../public/images/mapaM.png")}/>
+                        {this.almacenes.map((item,index) => { 
+                            console.log(index)
+                            return <div style={{ position: 'absolute', left:`${getX(item.longitud)}px`, top: `${getY(item.latitud)}px`, color:"black"}}>
+                                <Icon style={item.esPrincipal==1? {color:'blue', fontSize:18}:{color:'black', fontSize:15}}>house</Icon>
+                                </div>
+                        })}
+                    </div>
+                    <svg width={mapaW} height={mapaH} style={{position: 'absolute', left: '14px' , top: '34px'}}>
+                <path fill="none" stroke="red"
+                    d="M 160 437, L 82 283, L 376 600" />
+                    <circle r="5" fill="red">
+                    <animateMotion dur="10s" repeatCount={1}
+                        path="M 163 437, L 85 283, L 378 600"/>
+                    </circle>
+                </svg>
+                </TransformComponent>
+            </TransformWrapper>
+
+        );
+    }
+}
+ 
+export default withStyles(styles)(Simulacion7Dias);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Simulacion/utilCoords.js b/front/odiparpack/app/containers/Odipar/Simulacion/utilCoords.js
new file mode 100644
index 0000000..bac5f9b
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Simulacion/utilCoords.js
@@ -0,0 +1,42 @@
+import { mapaH, mapaW } from "odi-utils/constants"
+export function transform(lonlat){
+    const earth_radius_km = 6378.1370 
+    return earth_radius_km*(lonlat)*Math.PI/180
+}
+
+
+export function limits(type){
+    const inferior={lon:-81.324216, lat: -18.345605}
+    const superior={lon:-68.654087, lat:-0.043656}
+    
+    if (type == 'x'){
+        return [transform(inferior.lon), transform(superior.lon)]
+    }
+    return [transform(inferior.lat),transform(superior.lat)]
+
+}
+
+//inicio de mapa en x = 13 y = 33
+export function getX (lon){
+    const [infx, supx] = limits('x');
+    const imgW = mapaW
+    const inicioX= -3
+    const Fx = Math.abs(infx) - Math.abs(supx)
+    const xPrev = transform(lon)
+    const newX = Math.abs(infx) - Math.abs(xPrev)
+    const x = Math.trunc((Math.abs(newX)*(imgW))/(Fx))
+    console.log("x: ", x + 0)    
+    return x + inicioX;
+}
+
+export function getY (lat){
+    const [ infy, supy] = limits('y');
+    const imgH = mapaH
+    const inicioY = -8
+    const Fy = Math.abs(infy) - Math.abs(supy)
+    const yPrev = transform(lat)
+    const newY = Math.abs(yPrev) - Math.abs(supy)
+    const y = Math.trunc((Math.abs(newY)*(imgH))/(Fy))
+    console.log("y: ", y +0)    
+    return y + inicioY
+ }
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/pageListAsync.js b/front/odiparpack/app/containers/pageListAsync.js
index b64c622..324b633 100644
--- a/front/odiparpack/app/containers/pageListAsync.js
+++ b/front/odiparpack/app/containers/pageListAsync.js
@@ -1,6 +1,12 @@
 import Loadable from 'react-loadable';
 import Loading from 'ba-components/Loading';
 
+// 2.Pedidos
+export const Simulacion7Dias = Loadable({
+  loader: () => import('./Odipar/Simulacion/Simulacion7Dias'),
+  loading: Loading,
+});
+
 // 2.Pedidos
 export const Pedidos = Loadable({
   loader: () => import('./Odipar/Pedidos/Pedidos'),
-- 
cgit v1.2.3


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 +-
 4 files changed, 111 insertions(+), 8 deletions(-)
 create mode 100644 front/odiparpack/app/containers/Odipar/Simulacion/SimulacionMain.js

(limited to 'front/odiparpack/app/containers')

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
-- 
cgit v1.2.3