Add mapa v1

- 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)

7 files changed, 139 insertions, 3 deletions

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
@@ -2,6 +2,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'),
   loading: Loading,
diff --git a/front/odiparpack/app/index.html b/front/odiparpack/app/index.html
index 74ddd5a..ad0121d 100644
--- a/front/odiparpack/app/index.html
+++ b/front/odiparpack/app/index.html
@@ -28,6 +28,8 @@
     <meta name="theme-color" content="#512ea8" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
     <!-- Facebook -->
     <meta property="author" content="boss" />
     <meta property="og:site_name" content="boss.ux-maestro.com" />
diff --git a/front/odiparpack/app/utils/odipar/constants.js b/front/odiparpack/app/utils/odipar/constants.js
index 73f3521..d4b2d1b 100644
--- a/front/odiparpack/app/utils/odipar/constants.js
+++ b/front/odiparpack/app/utils/odipar/constants.js
@@ -6,4 +6,7 @@ export function partial(fn, ...presetArgs) {
     return function partiallyApplied(...laterArgs) {
       return fn(...presetArgs, ...laterArgs);
     };
-}
\ No newline at end of file
+}
+
+export const mapaH = 718
+export const mapaW = 498
\ No newline at end of file
diff --git a/front/odiparpack/app/utils/odipar/menu.js b/front/odiparpack/app/utils/odipar/menu.js
index cf032e9..13c5258 100644
--- a/front/odiparpack/app/utils/odipar/menu.js
+++ b/front/odiparpack/app/utils/odipar/menu.js
@@ -3,7 +3,7 @@ module.exports = [
       key: 'seguimiento',
       name: 'Seguimiento',
       icon: 'near_me',
-      link: '/app/dashboard-v2',
+      link: '/app/simulacion',
       child: [ ]
     },
     {