Marcelo Puebla / foca-modal-punto-descarga

Browse Code »

Commit a3e5f2152be4534a8f8d28ad6d9b1684c73ea9da

Authored by Jose Pinto 2019-01-17 13:30:56 -0300

1 parent 17144b6f0a

Exists in master and in 1 other branch

agrego mapa con marcador draggable

Showing 5 changed files with 96 additions and 12 deletions Show diff stats

index.html

Diff comments View file @ a3e5f21

File was created	1	<html ng-app="focaModalPuntoDescarga">
	2	<head>
	3	<meta charset="UTF-8"/>
	4	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	5
	6	<!--CSS-->
	7	<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
	8	<link href="node_modules/leaflet/dist/leaflet.css" rel="stylesheet"/>
	9	<style>
	10	osm>div {
	11	width: 100%;
	12	height: 576px;
	13	}
	14	</style>
	15
	16	<!--VENDOR JS-->
	17	<script src="node_modules/jquery/dist/jquery.min.js"></script>
	18	<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
	19	<script src="node_modules/angular/angular.min.js"></script>
	20	<script src="node_modules/angular-route/angular-route.min.js"></script>
	21	<script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
	22	<script src="node_modules/leaflet/dist/leaflet.js"></script>
	23
	24	<!-- BUILD -->
	25	<script src="src/js/app.js"></script>
	26	<script src="src/js/controller.js"></script>
	27	<script src="src/js/route.js"></script>
	28	<script src="src/js/service.js"></script>
	29	<script src="src/js/osm-directive.js"></script>
	30	<!-- /BUILD -->
	31
	32	<!-- CONFIG PARA DEVELOP -->
	33	<script src="src/etc/develop.js"></script>
	34	</head>
	35	<body>
	36	<div ng-view class="container-fluid"></div>
	37	</body>
	38	</html>
	39

package.json

Diff comments View file @ a3e5f21

 {
     "name": "foca-modal-punto-descarga",
     "version": "0.0.1",
     "description": "Modal para seleccionar punto de descarga",
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "gulp-pre-commit": "gulp pre-commit",
         "compile": "gulp uglify",
         "postinstall": "npm run compile && gulp clean-post-install",
         "install-dev": "npm i --ignore-scripts"
     },
     "pre-commit": [
         "gulp-pre-commit"
     ],
     "repository": {
         "type": "git",
         "url": "http://git.focasoftware.com/npm/foca-modal-punto-descarga.git"
     },
     "author": "Foca Software",
     "license": "ISC",
     "peerDependencies": {
         "angular": "^1.7.4",
         "bootstrap": "^4.1.3",
         "font-awesome": "^4.7.0",
         "ui-bootstrap4": "^3.0.4",
         "gulp": "^3.9.1",
         "gulp-angular-templatecache": "^2.2.1",
         "gulp-concat": "^2.6.1",
         "gulp-connect": "^5.6.1",
         "gulp-htmlmin": "^5.0.1",
         "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.0.0",
         "gulp-uglify": "^3.0.1",
         "jquery": "^3.3.1",
         "pump": "^3.0.0",
         "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git"
     },
     "devDependencies": {
         "angular": "^1.7.5",
         "angular-ladda": "^0.4.3",
         "bootstrap": "^4.1.3",
         "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git",
         "font-awesome": "^4.7.0",
         "gulp": "^3.9.1",
         "gulp-angular-templatecache": "^2.2.5",
         "gulp-clean": "^0.4.0",
         "gulp-concat": "^2.6.1",
         "gulp-connect": "^5.6.1",
         "gulp-htmlmin": "^5.0.1",
         "gulp-jshint": "^2.1.0",
         "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.0.0",
         "gulp-uglify": "^3.0.1",
         "jasmine-core": "^3.3.0",
         "jquery": "^3.3.1",
         "jshint": "^2.9.6",
         "ladda": "^1.0.6",
+        "leaflet": "^1.3.4",
         "pre-commit": "^1.2.2",
         "pump": "^3.0.0",
         "ui-bootstrap4": "^3.0.5"
     }
 }

src/js/controller.js

Diff comments View file @ a3e5f21

 angular.module('focaModalPuntoDescarga')
     .controller('focaModalPuntoDescargaController', [
         '$timeout',
         '$filter',
         '$scope',
         '$uibModalInstance',
         'focaModalPuntoDescargaService',
         'filters',
         'focaModalService',
         function($timeout, $filter, $scope, $uibModalInstance,
             focaModalPuntoDescargaService, filters, focaModalService) {
             $scope.cantidadArticulo = 0;
             $scope.articuloSeleccionado = 0;
             $scope.ivas = [];
             $scope.puntosSeleccionados = [];
             $scope.puntoDescarga = {
                 id: 0,
                 id_cliente: filters.idCliente,
-                id_da_config_0: filters.idDomicilio
+                id_da_config_0: filters.idDomicilio,
+                latitud: -32.89214159952345,
+                longitud: -68.84572999101856
             };
             $scope.articulos = angular.copy(filters.articulos);
             $scope.articulos.map(function(articulo) {
                 articulo.restante = articulo.cantidad;
             });
             actualizarTabla();
             cargarPuntos(filters.puntosDescarga);
             $scope.cancel = function() {
                 if($scope.ingreso) {
                     $scope.ingreso = false;
                 }else {
                     $uibModalInstance.dismiss('cancel');
                 }
             };
             $scope.aceptar = function() {
                 if($scope.cargaArticulos) {
                     cargarArticulos();
                 }else {
                     verCargaArticulos();
                 }
             };
             $scope.guardar = function() {
                 focaModalPuntoDescargaService
                     .guardarPuntoDescarga($scope.puntoDescarga)
                     .then(function() {
                         actualizarTabla();
                         $scope.ingreso = false;
                     });
             };
             $scope.editar = function(id) {
                 focaModalPuntoDescargaService.getPuntoDescargaById(id).then(function(res) {
                     $scope.puntoDescarga = res.data;
                     $scope.ingreso = true;
                 });
             };
             $scope.eliminar = function(idx, id) {
                 focaModalPuntoDescargaService.eliminarPuntoDescarga(id).then(function() {
                     $scope.puntosDescarga.splice(idx, 1);
                 });
             };
             $scope.seleccionarPunto = function(idx) {
                 var indexPunto = $scope.puntosSeleccionados.indexOf(idx);
                 if(indexPunto !== -1) {
                     $scope.puntosSeleccionados.splice(indexPunto, 1);
                 }else {
                     $scope.puntosSeleccionados.push(idx);
                 }
             };
             $scope.agregarArticulo = function(punto) {
                 var articulo = $scope.articulos[$scope.articuloSeleccionado],
                     cantidadRestante = articulo.restante - punto.cantidadACargar;
                 if(cantidadRestante < 0) {
                     focaModalService.alert('La cantidad a cargar debe ser menor o igual al restante');
                 }else if(punto.cantidadACargar <= 0) {
                     focaModalService.alert('La cantidad a cargar debe ser mayor que cero');
                 }else {
                     punto.cargado += parseInt(punto.cantidadACargar);
                     articulo.restante = cantidadRestante;
                     var existeArticulo = punto.articulosAgregados.filter(
                         function (articuloAAgregar) {
                             return articuloAAgregar.id === articulo.id;
                         });
                     //Si el articulo ya fue agregado
                     if(existeArticulo.length) {
                         //Solo sumo cantidad
                         var total = parseInt(existeArticulo[0].cantidad) + parseInt(punto.cantidadACargar);
                         existeArticulo[0].cantidad = total;
                     }else {
                         //Agrego el articulo con la cantidad
                         punto.articulosAgregados.push({
                             id: articulo.id,
                             descripcion: articulo.descripcion,
                             cantidad: punto.cantidadACargar,
                             index: $scope.articuloSeleccionado
                         });
                     }
                     punto.cantidadACargar = 0;
                 }
             };
             $scope.quitarArticulo = function(articulo, idx, punto) {
                 var articuloAEliminar = $scope.articulos.filter(function(art) {
                     return art.id == articulo.id;
                 });
                 var restante = parseInt(articuloAEliminar[0].restante);
                 restante += parseInt(articulo.cantidad);
                 articuloAEliminar[0].restante = restante;
                 punto.cargado -= parseInt(punto.articulosAgregados[idx].cantidad);
                 punto.articulosAgregados.splice(idx, 1);
             };
             function actualizarTabla() {
                 focaModalPuntoDescargaService
                     .getPuntosDescargaByClienDom(filters.idDomicilio, filters.idCliente)
                     .then(function(res) {
                         $scope.puntosDescarga = res.data;
                     });
             }
             function verCargaArticulos() {
                 $scope.puntosACargar = [];
                 $scope.cargaArticulos = true;
                 $scope.puntosSeleccionados.forEach(function(idx) {
                     $scope.puntosACargar.push($scope.puntosDescarga[idx]);
                 });
                 $scope.puntosACargar.map(function(punto) {
                     punto.articulosAgregados = [];
                     punto.cantidadACargar = 0;
                     punto.cargado = 0;
                 });
             }
             function cargarArticulos() {
                 $uibModalInstance.close($scope.puntosACargar);
             }
             function cargarPuntos(puntosDescarga) {
                 //Si existen puntos ya cargados
                 if(puntosDescarga) {
                     if(!puntosDescarga[0].cargado) {
                         agregarTotalCargado(puntosDescarga);
                     }
                     $scope.puntosACargar = puntosDescarga;
                     $scope.cargaArticulos = true;
                     //Recorro los puntos
                     puntosDescarga.forEach(function(punto) {
                         //Recorro los articulos cargados en cada punto
                         punto.articulosAgregados.forEach(function(articulo) {
                             var articuloARestar = $scope.articulos.filter(function(art) {
                                 return art.id == articulo.id;
                             });
                             articuloARestar[0].restante -= articulo.cantidad;
                         });
                     });
                 }
             }
             function agregarTotalCargado(puntosDescarga) {
                 puntosDescarga.map(function(punto) {
                     punto.cantidadACargar = 0;
                     punto.cargado = 0;
                 });
                 //Agrego cantidad de combustible cargada en los puntos de descarga
                 puntosDescarga.forEach(function(punto) {
                     punto.articulosAgregados.forEach(function(articulo) {
                         punto.cargado += articulo.cantidad;
                     });
                 });
             }
         }]
     );

src/js/osm-directive.js

Diff comments View file @ a3e5f21

File was created	1	angular.module('focaLogisticaPedidoRuta').directive('osma', function() {
	2	return {
	3	restrict: 'E',
	4	link: function(scope, el, attrs) {
	5	var contenedor = document.createElement('div');
	6	contenedor.className = 'w-100 h-50 mt-3';
	7	el.append(contenedor);
	8	scope.map = L.map(contenedor).setView([-32.89214159952345, -68.84572999101856], attrs.zoom);
	9	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map);
	10	},
	11	controller: ['$scope', '$timeout', function($scope, $timeout) {
	12	//resuelve bug mapa gris
	13	$timeout(function() {
	14	$scope.map.invalidateSize();
	15	}, 1000);
	16
	17	$scope.markers = [];
	18	$scope.$watchGroup(['latitud', 'longitud'], function() {
	19	for(var i in $scope.markers) {
	20	$scope.map.removeLayer($scope.markers[i]);
	21	}
	22	$scope.markers.push(
	23	L.marker([$scope.latitud, $scope.longitud], {draggable:'true'})
	24	.addTo($scope.map)
	25	.on('dragend', function() {
	26	$scope.latitud = this.getLatLng().lat;
	27	$scope.longitud = this.getLatLng().lng;
	28	$scope.$apply();
	29	})
	30	);
	31	});
	32	}],
	33	scope: {
	34	latitud: '=',
	35	longitud: '=',
	36	zoom: '='
	37	}
	38	};
	39	});
	40

src/views/modal-punto-descarga.html

Diff comments View file @ a3e5f21

 <div class="modal-header d-flex">
     <h5 class="modal-title my-1" ng-hide="ingreso || cargaArticulos">Búsqueda de puntos de descarga</h5>
     <h5 class="modal-title my-1" ng-show="ingreso">Crear punto de descarga</h5>
     <h5 class="modal-title my-1" ng-show="cargaArticulos">Cargar articulos en puntos de descarga</h5>
     <button
         class="btn btn-primary"
         ng-click="ingreso = true"
         ng-hide="ingreso || cargaArticulos">
         <i class="fa fa-plus" aria-hidden="true"></i>
     </button>
 </div>
 <div class="modal-body" id="modal-body">
     <table
         class="table table-striped table-sm col-12"
         ng-hide="ingreso || cargaArticulos">
         <thead>
             <tr>
                 <th>Código</th>
                 <th>Descripción</th>
                 <th>Latitud</th>
                 <th>Longitud</th>
                 <th></th>
             </tr>
         </thead>
         <tbody>
             <tr ng-show="puntosDescarga.length == 0">
                 <td colspan="3">
                     No se encontraron resultados.
                 </td>
             </tr>
             <tr class="selected"
                 ng-repeat="(key, puntoDescarga) in puntosDescarga | filter: filters"
                 >
                 <td ng-bind="puntoDescarga.id | rellenarDigitos: 3: 0"></td>
                 <td ng-bind="puntoDescarga.descripcion"></td>
                 <td ng-bind="puntoDescarga.latitud"></td>
                 <td ng-bind="puntoDescarga.longitud"></td>
                 <td class="d-md-none text-primary">
                     <i class="fa fa-circle-thin" aria-hidden="true"></i>
                 </td>
                 <td class="d-none d-md-table-cell">
                     <input
                         type="checkbox"
                         class="custom-control-input float-right"
                         id="checkSelect{{key}}">
                     <label
                         class="custom-control-label float-right"
                         for="checkSelect{{key}}"
                         ng-click="seleccionarPunto(key)"></label>
                     <button
                         type="button"
                         class="btn btn-xs p-1 float-right mr-5"
                         ng-click="eliminar(key, puntoDescarga.id)"
                         title="Eliminar">
                         <i class="fa fa-trash" aria-hidden="true"></i>
                     </button>
                     <button
                         type="button"
                         class="btn btn-xs p-1 float-right mr-1"
                         ng-click="editar(puntoDescarga.id)"
                         title="Editar">
                         <i class="fa fa-pencil" aria-hidden="true"></i>
                     </button>
                 </td>
             </tr>
         </tbody>
     </table>
     <form ng-show="ingreso">
         <div class="row">
+            <div class="col-12">
+                <label>Descripción</label>
+                <input
+                    type="text"
+                    class="form-control form-control-sm"
+                    ng-model="puntoDescarga.descripcion"
+                    uppercase-only>
+            </div>
+        </div>
+        <div class="row">
             <div class="col-6">
                 <label>Latitud</label>
                 <input
                     type="text"
                     class="form-control form-control-sm"
                     ng-model="puntoDescarga.latitud"
                     ng-required="true"
                 />
             </div>
             <div class="col-6">
                 <label>Longitud</label>
                 <input
                     type="text"
                     class="form-control form-control-sm"
                     ng-model="puntoDescarga.longitud"
                     ng-required="true"
                 />
             </div>
         </div>
-        <div class="row">
+        <osma
-            <div class="col-12">
+            latitud="puntoDescarga.latitud"
-                <label>Descripción</label>
+            longitud="puntoDescarga.longitud"
-                <textarea
+            zoom="14"
-                    class="form-control form-control-sm text-uppercase"
+        />
-                    cols="30"
-                    rows="5"
-                    ng-model="puntoDescarga.descripcion">
-                </textarea>
-            </div>
-        </div>
     </form>
     <div ng-show="cargaArticulos">
         <div ng-show="articulos.length === 0">
             <h6>No existen articulos para agregar</h6>
         </div>
         <div ng-show="articulos.length > 0">
             <div class="row">
                 <div class="col-12">
                     <table class="table table-sm">
                         <thead>
                             <tr>
                                 <th></th>
                                 <th>Articulo</th>
                                 <th>Total</th>
                                 <th>Restante</th>
                             </tr>
                         </thead>
                         <tbody>
                             <tr ng-repeat="(key, articulo) in articulos">
                                 <td>
                                     <input
                                         type="radio"
                                         ng-value="key"
                                         ng-model="$parent.articuloSeleccionado"
                                     >
                                 </td>
                                 <td ng-bind="articulo.descripcion"></td>
                                 <td ng-bind="articulo.cantidad"></td>
                                 <td ng-bind="articulo.restante"></td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </div>
             <div class="row">
                 <div class="col-12">
                     <h5 class="col-12 my-3">Puntos de descarga</h5>
                     <table class="table table-sm">
                         <thead>
                             <tr>
                                 <th>Lugar</th>
                                 <th class="text-right">Total cargado</th>
                                 <th class="text-right">Cantidad</th>
                                 <th></th>
                             </tr>
                         </thead>
                         <tbody>
                             <tr ng-repeat="punto in puntosACargar">
                                 <td ng-bind="punto.descripcion"></td>
                                 <td ng-bind="punto.cargado" class="text-right"></td>
                                 <td>
                                     <input
                                         type="text"
                                         class="form-control col-4 float-right"
                                         id="inputCantidad"
                                         placeholder="A cargar"
                                         ng-model="punto.cantidadACargar"
                                     >
                                 </td>
                                 <td>
                                     <button
                                         class="btn btn-sm btn-outline-primary ml-auto"
                                         type="button"
                                         ng-click="agregarArticulo(punto)"
                                     >
                                         Agregar
                                     </button>
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                     <table class="table table-sm">
                         <thead>
                             <tr>
                                 <th>Lugar</th>
                                 <th>Articulo</th>
                                 <th class="text-right">Cantidad</th>
                                 <th></th>
                             </tr>
                         </thead>
                         <tbody ng-repeat="punto in puntosACargar">
                             <tr ng-repeat="(key, articulo) in punto.articulosAgregados">
                                 <td ng-bind="punto.descripcion"></td>
                                 <td ng-bind="articulo.descripcion" class="p-2"></td>
                                 <td ng-bind="articulo.cantidad" class="text-right p-2"></td>
                                 <td class="p-2">
                                     <button
                                         type="button"
                                         class="btn btn-xs p-1 float-right mr-5"
                                         ng-click="quitarArticulo(articulo, key, punto)"
                                         title="Eliminar">
                                         <i class="fa fa-trash" aria-hidden="true"></i>
                                     </button>
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </div>
         </div>
     </div>
 </div>
 <div class="modal-footer">
     <button
         class="btn btn-sm btn-secondary my-1"
         type="button"
         ng-click="cancel()">Cancelar</button>
     <button
         class="btn btn-sm btn-primary my-1"
         type="button"
         ng-click="aceptar()"
         ng-hide="ingreso">Aceptar</button>
     <button