diff options
Diffstat (limited to 'front/odiparpack/app/containers')
29 files changed, 2064 insertions, 9 deletions
diff --git a/front/odiparpack/app/containers/App/Application.js b/front/odiparpack/app/containers/App/Application.js index 8a30720..0e637b0 100644 --- a/front/odiparpack/app/containers/App/Application.js +++ b/front/odiparpack/app/containers/App/Application.js @@ -26,8 +26,8 @@ import { Photos, Error, Settings, HelpSupport, MapMarker, MapDirection, SearchMap, TrafficIndicator, StreetViewMap, NotFound, - Pedidos, - Almacenes + Pedidos, Almacenes, Camiones, Tramos, + Simulacion7Dias, SimulacionMain } from '../pageListAsync'; function Application(props) { @@ -38,9 +38,13 @@ function Application(props) { <Switch> <Route exact path="/app" component={DashboardV1} /> <Route exact path="/app/dashboard-v2" component={DashboardV2} /> - {/* Pedidos */} + {/* 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}/> + <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/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/Odipar/Simulacion/Simulacion7Dias.js b/front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js new file mode 100644 index 0000000..97bcf5b --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js @@ -0,0 +1,85 @@ +import React, { Component } from "react"; +import { withStyles } from '@material-ui/core/styles'; +import {getX, getY} from './utilCoords' +import { Icon, Typography } 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 ( + <> + <Typography variant="h4"> + {`Resultado de simulación a 7 días`} + </Typography> + <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/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/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 14381b1..eac9a34 100644 --- a/front/odiparpack/app/containers/pageListAsync.js +++ b/front/odiparpack/app/containers/pageListAsync.js @@ -1,18 +1,41 @@ import Loadable from 'react-loadable'; import Loading from 'ba-components/Loading'; +// 1.Pedidos +export const Simulacion7Dias = Loadable({ + loader: () => import('./Odipar/Simulacion/Simulacion7Dias'), + loading: Loading, +}); + // 2.Pedidos export const Pedidos = Loadable({ loader: () => import('./Odipar/Pedidos/Pedidos'), 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, +}); + +// 6. Simulacion +export const SimulacionMain = Loadable({ + loader: () => import('./Odipar/Simulacion/SimulacionMain'), + loading: Loading, +}); // Dashboard |