Luigi / foca-logistica-pedido-ruta

Download as
Browse Code »

Commit 4aa8f26e936f825eb9777cc4044094862eb3a51f

Authored by Luigi
1 parent 1f7131cfa8
Exists in master

vista de vehiculos y puntero en el mapa

Showing 2 changed files with 48 additions and 61 deletions   Show diff stats
src/js/osm-directive.js
Diff comments   View file @ 4aa8f26
1 angular.module('focaLogisticaPedidoRuta').directive('focaLogistica', function() { 1 angular.module('focaLogisticaPedidoRuta').directive('focaLogistica', function() {
2 return { 2 return {
3 restrict: 'E', 3 restrict: 'E',
4 link: function(scope, el, attrs) { 4 link: function(scope, el, attrs) {
5 var contenedor = document.createElement('div'); 5 var contenedor = document.createElement('div');
6 contenedor.className = 'border border-light rounded'; 6 contenedor.className = 'border border-light rounded';
7 el.append(contenedor); 7 el.append(contenedor);
8 scope.map = L.map(contenedor).setView([attrs.latitud, attrs.longitud], attrs.zoom); 8 scope.map = L.map(contenedor).setView([attrs.latitud, attrs.longitud], attrs.zoom);
9 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map); 9 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map);
10 }, 10 },
11 controller: ['$scope', '$filter', '$compile', 'focaModalService', 11 controller: ['$scope', '$filter', '$compile', 'focaModalService',
12 function($scope, $filter, $compile, focaModalService) { 12 function($scope, $filter, $compile, focaModalService) {
13 $scope.markers = []; 13 $scope.markers = [];
14 $scope.verProductos = function(id) { 14 $scope.verProductos = function(id) {
15 var parametrosModal = { 15 var parametrosModal = {
16 titulo: 'Productos', 16 titulo: 'Productos',
17 query: '/articulos/remito/' + id, 17 query: '/articulos/remito/' + id,
18 soloMostrar: true, 18 soloMostrar: true,
19 size: 'md', 19 size: 'md',
20 columnas: [ 20 columnas: [
21 { 21 {
22 nombre: 'Producto', 22 nombre: 'Producto',
23 propiedad: 'descripcion' 23 propiedad: 'descripcion'
24 }, 24 },
25 { 25 {
26 nombre: 'Cantidad', 26 nombre: 'Cantidad',
27 propiedad: 'cantidad' 27 propiedad: 'cantidad'
28 } 28 }
29 ] 29 ]
30 }; 30 };
31 focaModalService.modal(parametrosModal).then(); 31 focaModalService.modal(parametrosModal).then();
32 }; 32 };
33 $scope.$watch('marcadores', function() { 33 $scope.$watch('marcadores', function() {
34 for(var i in $scope.markers) { 34 for(var i in $scope.markers) {
35 $scope.map.removeLayer($scope.markers[i]); 35 $scope.map.removeLayer($scope.markers[i]);
36 } 36 }
37 $scope.markers = []; 37 $scope.markers = [];
38 38
39 angular.forEach($scope.marcadores, function(marcador) { 39 angular.forEach($scope.marcadores, function(marcador) {
40 var observacion = 40 var observacion =
41 'Vendedor: ' + marcador.notaPedido.idVendedor + ' - ' + 41 'Vendedor: ' + marcador.notaPedido.idVendedor + ' - ' +
42 ( 42 (
43 marcador.notaPedido.vendedor ? 43 marcador.notaPedido.vendedor ?
44 marcador.notaPedido.vendedor.NOM : 44 marcador.notaPedido.vendedor.NOM :
45 '' 45 ''
46 ) + '<br/>'; 46 ) + '<br/>';
47 observacion += 'Fecha: ' + 47 observacion += 'Fecha: ' +
48 $filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' + 48 $filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' +
49 marcador.fecha.slice(11,19) + '<br/>'; 49 marcador.fecha.slice(11,19) + '<br/>';
50 observacion += 'Remito Nº: ' + $filter('comprobante')([ 50 observacion += 'Remito Nº: ' + $filter('comprobante')([
51 marcador.notaPedido.remito.sucursal, 51 marcador.notaPedido.remito.sucursal,
52 marcador.notaPedido.remito.numeroRemito 52 marcador.notaPedido.remito.numeroRemito
53 ]) + '<br/>'; 53 ]) + '<br/>';
54 observacion += 'Cliente: ' + 54 observacion += 'Cliente: ' +
55 marcador.notaPedido.cliente.NOM; 55 marcador.notaPedido.cliente.NOM;
56 56
57 // if($scope.parametros.individual) { 57 // if($scope.parametros.individual) {
58 observacion = 'Orden: ' + marcador.orden + '<br/>' + observacion; 58 observacion = 'Orden: ' + marcador.orden + '<br/>' + observacion;
59 59
60 if (marcador.distancia) { 60 if (marcador.distancia) {
61 observacion += '<br/>Distancia a casa central: ' + 61 observacion += '<br/>Distancia a casa central: ' +
62 marcador.distancia + 'km'; 62 marcador.distancia + 'km';
63 } 63 }
64 var icon; 64 var icon;
65 if (marcador.notaPedido.remito.idUsuarioProceso) { 65 if (marcador.notaPedido.remito.idUsuarioProceso) {
66 observacion += '<br/>'; 66 observacion += '<br/>';
67 observacion += '<strong>'; 67 observacion += '<strong>';
68 observacion += 'Fecha de entrega: ' + marcador.notaPedido.remito 68 observacion += 'Fecha de entrega: ' + marcador.notaPedido.remito
69 .cisternaMovimientos[0].cisternaCarga.fechaReparto.substring(0, 10); 69 .cisternaMovimientos[0].cisternaCarga.fechaReparto.substring(0, 10);
70 observacion += '<br/>'; 70 observacion += '<br/>';
71 observacion += 'Vehículo: ' + marcador.notaPedido.remito 71 observacion += 'Vehículo: ' + marcador.notaPedido.remito
72 .cisternaMovimientos[0].cisternaCarga.cisterna.vehiculo.codigo; 72 .cisternaMovimientos[0].cisternaCarga.cisterna.vehiculo.codigo;
73 observacion += '<br/>'; 73 observacion += '<br/>';
74 observacion += 'Transportista: ' + marcador.notaPedido.remito 74 observacion += 'Transportista: ' + marcador.notaPedido.remito
75 .cisternaMovimientos[0].cisternaCarga.cisterna.vehiculo.transportista 75 .cisternaMovimientos[0].cisternaCarga.cisterna.vehiculo.transportista
76 .NOM; 76 .NOM;
77 observacion += '</strong>'; 77 observacion += '</strong>';
78 //Asignado ROJO 78 //Asignado ROJO
79 icon = new L.Icon({ 79 icon = new L.Icon({
80 iconUrl: 'img/marker-icon-2x-red.png', 80 iconUrl: 'img/marker-icon-2x-red.png',
81 shadowUrl: 'img/marker-shadow.png', 81 shadowUrl: 'img/marker-shadow.png',
82 iconSize: [25, 41], 82 iconSize: [25, 41],
83 iconAnchor: [12, 41], 83 iconAnchor: [12, 41],
84 popupAnchor: [1, -34], 84 popupAnchor: [1, -34],
85 shadowSize: [41, 41] 85 shadowSize: [41, 41]
86 }); 86 });
87 } else { 87 } else {
88 observacion += '<br/>'; 88 observacion += '<br/>';
89 observacion += '<i class="fa fa-map-marker fa-3x" aria-hidden="true"'+ 89 observacion += '<i class="fa fa-map-marker marcador fa-4x" aria-hidden="true"'+
90 'class="form-control" ondragend="dropEnd()" ondragstart=\'drag(event, '+ 90 'class="form-control" ondragend="dropEnd()" ondragstart=\'drag(event, '+
91 JSON.stringify(marcador)+')\' draggable="true"></i>(Arrastrar icono)'; 91 JSON.stringify(marcador)+')\' draggable="true"></i><br><b>(Arrastrar icono)</b>';
92 observacion += '<button title="Ver productos" class="btn btn-secondary' + 92 observacion += '<button title="Ver productos" class="btn btn-secondary' +
93 ' float-right mt-2"'+ 93 ' float-right informacion"'+
94 'ng-click="verProductos('+marcador.notaPedido.remito.id+')">' + 94 'ng-click="verProductos('+marcador.notaPedido.remito.id+')">' +
95 '<i class="fa fa-info" aria-hidden="true"></i>' + 95 '<i class="fa fa-info" aria-hidden="true"></i>' +
96 '</button>'; 96 '</button>';
97 97
98 //Sin asignar VERDE 98 //Sin asignar VERDE
99 icon = new L.Icon({ 99 icon = new L.Icon({
100 iconUrl: 'img/marker-icon-2x-green.png', 100 iconUrl: 'img/marker-icon-2x-green.png',
101 shadowUrl: 'img/marker-shadow.png', 101 shadowUrl: 'img/marker-shadow.png',
102 iconSize: [25, 41], 102 iconSize: [25, 41],
103 iconAnchor: [12, 41], 103 iconAnchor: [12, 41],
104 popupAnchor: [1, -34], 104 popupAnchor: [1, -34],
105 shadowSize: [41, 41] 105 shadowSize: [41, 41]
106 }); 106 });
107 } 107 }
108 108
109 //COMPILO HTML PARA QUE FUNCIONE BOTON EN POPUP 109 //COMPILO HTML PARA QUE FUNCIONE BOTON EN POPUP
110 observacion = '<div>' + observacion + '</div>'; 110 observacion = '<div class="disable-selection">' + observacion + '</div>';
111 var compiledHtml = $compile(angular.element(observacion))($scope); 111 var compiledHtml = $compile(angular.element(observacion))($scope);
112 112
113 $scope.markers.push( 113 $scope.markers.push(
114 L.marker( 114 L.marker(
115 [marcador.latitud, marcador.longitud], {icon: icon}) 115 [marcador.latitud, marcador.longitud], {icon: icon})
116 .addTo($scope.map) 116 .addTo($scope.map)
117 .bindPopup(compiledHtml[0]) 117 .bindPopup(compiledHtml[0])
118 .bindTooltip('Haga click para seleccionar') 118 .bindTooltip('Haga click para seleccionar')
119 ); 119 );
120 //abre marcador del primer punto 120 //abre marcador del primer punto
121 //$scope.markers[0].openPopup(); 121 //$scope.markers[0].openPopup();
122 }); 122 });
123 }); 123 });
124 }], 124 }],
125 scope: { 125 scope: {
126 latitud: '=', 126 latitud: '=',
127 longitud: '=', 127 longitud: '=',
128 zoom: '=', 128 zoom: '=',
129 marcadores: '=', 129 marcadores: '=',
130 parametros: '=' 130 parametros: '='
131 } 131 }
132 }; 132 };
133 }); 133 });
134 134
src/views/foca-logistica-pedido-ruta.html
Diff comments   View file @ 4aa8f26
1 <div class="foca-logistica-pedido-ruta" id="scope"> 1 <div class="foca-logistica-pedido-ruta" id="scope">
2 <div class="row"> 2 <div class="row">
3 <foca-cabecera-facturador 3 <foca-cabecera-facturador
4 titulo="titulo" 4 titulo="titulo"
5 fecha="now" 5 fecha="now"
6 class="mb-0 col-lg-12" 6 class="mb-0 col-lg-12"
7 ></foca-cabecera-facturador> 7 ></foca-cabecera-facturador>
8 </div> 8 </div>
9 <div class="row px-5 py-2 botonera-secundaria position-relative"> 9 <div class="row px-5 py-2 botonera-secundaria position-relative">
10 <div class="col-10"> 10 <div class="col-10">
11 <foca-botonera-facturador botones="botonera" max="6" class="row"></foca-botonera-facturador> 11 <foca-botonera-facturador botones="botonera" max="6" class="row"></foca-botonera-facturador>
12 </div> 12 </div>
13 <div class="col-2 pl-0 position-absolute right-0"> 13 <div class="col-2 pl-0 position-absolute right-0">
14 <strong>Filtros: </strong> 14 <strong>Ver Remitos</strong>
15 <br> 15 <br>
16 <span>Fecha Desde</span> 16 <span>Fecha Desde</span>
17 <input 17 <input
18 type="text" 18 type="text"
19 readonly 19 readonly
20 ng-model="fechaDesde" 20 ng-model="fechaDesde"
21 class="form-control form-control-sm" 21 class="form-control form-control-sm"
22 uib-datepicker-popup="dd/MM/yyyy" 22 uib-datepicker-popup="dd/MM/yyyy"
23 show-button-bar="false" 23 show-button-bar="false"
24 is-open="fechaDesdeOpen" 24 is-open="fechaDesdeOpen"
25 on-open-focus="false" 25 on-open-focus="false"
26 ng-focus="fechaDesdeOpen = true" 26 ng-focus="fechaDesdeOpen = true"
27 ng-change="search()" 27 ng-change="search()"
28 /> 28 />
29 <span>Fecha Hasta</span> 29 <span>Fecha Hasta</span>
30 <input 30 <input
31 type="text" 31 type="text"
32 readonly 32 readonly
33 ng-model="fechaHasta" 33 ng-model="fechaHasta"
34 class="form-control form-control-sm" 34 class="form-control form-control-sm"
35 uib-datepicker-popup="dd/MM/yyyy" 35 uib-datepicker-popup="dd/MM/yyyy"
36 show-button-bar="false" 36 show-button-bar="false"
37 is-open="fechaHastaOpen" 37 is-open="fechaHastaOpen"
38 on-open-focus="false" 38 on-open-focus="false"
39 ng-focus="fechaHastaOpen = true" 39 ng-focus="fechaHastaOpen = true"
40 ng-change="search()" 40 ng-change="search()"
41 /> 41 />
42 <div class="custom-control custom-radio"> 42 <div class="custom-control custom-radio pt-4">
43 <input 43 <input
44 type="radio" 44 type="radio"
45 class="custom-control-input" 45 class="custom-control-input"
46 id="idTodos" 46 id="idTodos"
47 name="filtro" 47 name="filtro"
48 ng-model="filtroEstado" 48 ng-model="filtroEstado"
49 ng-change="search()" 49 ng-change="search()"
50 checked> 50 checked>
51 <label class="custom-control-label pb-3" for="idTodos"></label> 51 <label class="custom-control-label pb-3" for="idTodos"></label>
52 <img src="img/marker-icon-grey.png"> 52 <img src="img/marker-icon-grey.png">
53 <strong>Todos</strong> 53 <strong>Todos</strong>
54 </div> 54 </div>
55 <div class="custom-control custom-radio"> 55 <div class="custom-control custom-radio">
56 <input 56 <input
57 type="radio" 57 type="radio"
58 class="custom-control-input" 58 class="custom-control-input"
59 id="idSinAsignar" 59 id="idSinAsignar"
60 name="filtro" 60 name="filtro"
61 ng-model="filtroEstado" 61 ng-model="filtroEstado"
62 ng-change="search()" 62 ng-change="search()"
63 ng-value="false"> 63 ng-value="false">
64 <label class="custom-control-label pb-3" for="idSinAsignar"></label> 64 <label class="custom-control-label pb-3" for="idSinAsignar"></label>
65 <img src="img/marker-icon-green.png"> 65 <img src="img/marker-icon-green.png">
66 <strong>Sin asignar</strong> 66 <strong>Sin asignar</strong>
67 </div> 67 </div>
68 <div class="custom-control custom-radio"> 68 <div class="custom-control custom-radio">
69 <input 69 <input
70 type="radio" 70 type="radio"
71 class="custom-control-input" 71 class="custom-control-input"
72 id="idAsignado" 72 id="idAsignado"
73 name="filtro" 73 name="filtro"
74 ng-model="filtroEstado" 74 ng-model="filtroEstado"
75 ng-change="search()" 75 ng-change="search()"
76 ng-value="true"> 76 ng-value="true">
77 <label class="custom-control-label pb-3" for="idAsignado"></label> 77 <label class="custom-control-label pb-3" for="idAsignado"></label>
78 <img src="img/marker-icon-red.png"> 78 <img src="img/marker-icon-red.png">
79 <strong>Asignado</strong> 79 <strong>Asignado</strong>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 <div class="row px-5"> 83 <div class="row px-5">
84 <div class="col-10"> 84 <div class="col-10">
85 <foca-logistica 85 <foca-logistica
86 latitud="-34.7152975" 86 latitud="-34.7152975"
87 longitud="-65.9053867" 87 longitud="-65.9053867"
88 zoom="5" 88 zoom="5"
89 marcadores="marcadores" 89 marcadores="marcadores"
90 parametros= "datosBuscados" 90 parametros= "datosBuscados"
91 /> 91 />
92 </div> 92 </div>
93 <div class="row"> 93 <div class="col-12 p-0">
94 <div 94 <div class="py-2 row">
95 class="container col-auto" 95 <div class="col-sm-3" ng-repeat="vehiculo in vehiculos">
96 ng-repeat="vehiculo in vehiculos" 96 <div
97 ng-click="mostrarDetalleVehiculo(vehiculo)" 97 style="width: 15rem;"
98 > 98 class="card bg-secondary text-white m-2">
99 <div> 99 <div class="card-body text-center">
100 <div class="col-md-3 col-sm-6"> 100 <p class="card-text">{{vehiculo.transportista.NOM.trim()}}</p>
101 <div class="progress-circle" ng-class="{'arrastrando': arrastrando}"> 101 <p class="card-text"></p>
102 <span class="progress-left"> 102 <p class="card-text">{{vehiculo.codigo}}</p>
103 <span class="progress-bar"></span>
104 </span>
105 <span class="progress-right">
106 <span class="progress-bar"></span>
107 </span>
108 <div class="progress-value py-4 px-3 d-flex align-content-between flex-wrap">
109 <small class="w-100">
110 <small>
111 <small>
112 {{vehiculo.transportista.NOM.trim()}}
113 </small>
114 </small>
115 </small>
116 <small class="w-100">
117 {{vehiculo.codigo}}
118 </small>
119 </div>
120 </div> 103 </div>
121 </div> 104 <div class="card-footer" ng-hide="arrastrando">
122 <div class="row ml-2"> 105 <div class="row justify-content-around">
123 <div class="col-3 position-absolute"> 106 <div class="col-3 ml-2">
124 <img 107 <i
125 src="img/hojaRutaVolante.png" 108 class="fa fa-trash fa-2x"
126 width="100%"> 109 uib-tooltip="Eliminar vehiculo"
127 </div> 110 ng-click="quitarVehiculo(vehiculo)">
128 <div class="col-3" 111 </i>
129 uib-tooltip="Confirmar distribuición" 112 </div>
130 ng-click="hacerHojaRuta(vehiculo)"></div> 113 <div class="col-3">
131 <div class="col-3"> 114 <i
132 <i 115 class="fa fa-eye fa-2x"
133 class="fa fa-eye fa-2x" 116 uib-tooltip="Ver cisternas"
134 uib-tooltip="Ver cisternas" 117 ng-click="cargar(vehiculo.id, -1)">
135 ng-click="cargar(vehiculo.id, -1)"> 118 </i>
136 </i> 119 </div>
120 <div class="col-3">
121 <i
122 class="fa fa-save fa-2x"
123 uib-tooltip="Confirmar distribuición"
124 ng-click="hacerHojaRuta(vehiculo)">
125 </i>
126 </div>
127 </div>
137 </div> 128 </div>
138 <div class="col-3 ml-2"> 129 <div class="card-footer text-center" ng-show="arrastrando">
139 <i 130 <button
140 class="fa fa-trash fa-2x" 131 class="btn flashit btn-block btn-dashed text-dark"
141 uib-tooltip="Eliminar vehiculo" 132 id="{{vehiculo.id}}"
142 ng-click="quitarVehiculo(vehiculo)"></i> 133 ondrop="drop(event)"
134 ondragover="allowDrop(event)">
135 Arrastrar aquí
136 </button>
143 </div> 137 </div>
144 </div> 138 </div>
145 <div
146 class="ml-1 border border-dark text-center w-100"