Eric Fernandez / foca-logistica-pedido-ruta

No se puede usar directamente scope = angular.element('#test')[0].scope() ??

no hace falta el '> 0'

espacio innecesario despues de for

espacio necesario entre ) y {

File was created	1	function allowDrop(ev) {
	2	ev.preventDefault();
	3	}
	4	function drag(ev, marcador) {
	5	marcador = JSON.stringify(marcador);
	6	ev.dataTransfer.setData('marcador', marcador);
	7	var elementoDom = document.getElementById('test');
	8	var scope = angular.element(elementoDom).scope();
	9	scope.arrastra();
	10	}
	11	function drop(ev) {
	12	ev.preventDefault();
	13	var data = ev.dataTransfer.getData('marcador');
	14	var elementoDom = document.getElementById(ev.target.id);
	15	var elementoAngular = angular.element(elementoDom);
	16	var elementoScope = elementoAngular.scope();
	17	elementoScope.cargar(ev.target.id, data);
	18	elementoScope.$digest();
	19	}
	20	function dropEnd() {
	21	console.log('drop');
	22	var elementoDom = document.getElementById('test');
	23	var scope = angular.element(elementoDom).scope();
	1	Link here Jose Pinto 2018-12-26 20:33:43 UTC No se puede usar directamente scope = angular.element('#test')[0].scope() ?? No se puede usar directamente scope = angular.element('#test')[0].scope() ?? Choose File ... File name... Cancel
	24	scope.noArrastra();
	25	}

1	angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaController', [	1	angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaController', [
2	'$scope', 'focaLogisticaPedidoRutaService', '$location', '$uibModal', '$filter',	2	'$scope', 'focaLogisticaPedidoRutaService', '$location', '$uibModal', '$filter',
3	function($scope, focaLogisticaPedidoRutaService, $location, $uibModal, $filter) {	3	'focaModalService', 'focaBotoneraLateralService',
4	$scope.actividad = '';	4	function($scope, focaLogisticaPedidoRutaService, $location, $uibModal, $filter,
5		5	focaModalService, focaBotoneraLateralService
		6	) {
6	$scope.now = new Date();	7	$scope.now = new Date();
7	$scope.actividad = 'Nota de pedido';	8	$scope.actividad = 'Logistica';
		9
		10	//Datos Pantalla
		11	$scope.titulo = 'Logistica de Pedidos';
		12	$scope.botonera = ['Vehiculo'];
		13	var cabecera = '';
		14
8	$scope.idUsuario = 0;	15	$scope.idUsuario = 0;
9	$scope.marcadores = [];	16	$scope.marcadores = [];
10	$scope.vehiculos = [];	17	$scope.vehiculos = [];
11	getSeguimiento();	18	getSeguimiento();
12	$scope.arrastrando = false;	19	$scope.arrastrando = false;
13	$scope.general = function() {	20	$scope.general = function() {
14	$scope.idUsuario = 0;	21	$scope.idUsuario = 0;
15	getSeguimiento();	22	getSeguimiento();
16	};	23	};
17		24
		25	//SETEO BOTONERA LATERAL
		26	focaBotoneraLateralService.showSalir(true);
		27	focaBotoneraLateralService.showPausar(false);
		28	focaBotoneraLateralService.showGuardar(false);
		29
		30	$scope.general = function() {
		31	$scope.idUsuario = 0;
		32	getSeguimiento();
		33	$scope.$broadcast('removeCabecera', cabecera);
		34	$scope.$broadcast('addCabecera',{
		35	label: 'General',
		36	valor: ''
		37	});
		38	};
		39
18	$scope.cargar = function(id, punto) {	40	$scope.cargar = function(id, punto) {
19	var marcador = JSON.parse(punto);	41	var idRemito = JSON.parse(punto).notaPedido.remito.id;
20	var vehiculo = $filter('filter')($scope.vehiculos, {id: parseInt(id)})[0];
21	var modalInstance = $uibModal.open(	42	var modalInstance = $uibModal.open(
22	{	43	{
23	ariaLabelledBy: 'Busqueda de Vehiculo',	44	ariaLabelledBy: 'Busqueda de Vehiculo',
24	templateUrl: 'foca-detalle-vehiculo.html',	45	templateUrl: 'foca-detalle-vehiculo.html',
25	controller: 'focaDetalleVehiculo',	46	controller: 'focaDetalleVehiculo',
26	size: 'lg',	47	size: 'lg',
27	resolve: {	48	resolve: {
28	vehiculo: function() {return vehiculo;},	49	idVehiculo: function() {return id;},
29	marcador: function() {return marcador;}	50	idRemito: function() {return idRemito;}
30	}	51	}
31	}	52	}
32	);	53	);
33	modalInstance.result.then(function() {	54	modalInstance.result.then(function() {
34	}, function() {	55	}, function() {
35	//run when cancel modal
36	});	56	});
37	};	57	};
38		58
39	$scope.arrastra = function() {	59	$scope.quitarVehiculo = function(vehiculo) {
		60	focaModalService.confirm('Esta seguro que desea eliminar el vehículo ' +
		61	vehiculo.codigo + '?').then(function() {
		62	$scope.vehiculos.splice($scope.vehiculos.indexOf(vehiculo), 1);
		63	});
		64	};
		65
		66	$scope.informacionVehiculo = function(vehiculo) {
		67	focaModalService.alert('EN DESARROLLO : \n información del vehículo ' +
		68	JSON.stringify(vehiculo));
		69	};
		70
		71	$scope.arrastra = function() {
40	$scope.arrastrando = true;	72	$scope.arrastrando = true;
41	$scope.$digest();	73	$scope.$digest();
42	};	74	};
43		75
44	$scope.noArrastra = function() {	76	$scope.noArrastra = function() {
45	$scope.arrastrando = false;	77	$scope.arrastrando = false;
46	$scope.$digest();	78	$scope.$digest();
47	};	79	};
48		80
49	$scope.individual = function() {	81	$scope.individual = function() {
50	$scope.idUsuario = -1;	82	$scope.idUsuario = -1;
51	};	83	};
52		84
53	$scope.mostrarDetalle = function() {	85	$scope.mostrarDetalle = function() {
54	$scope.detalle = true;	86	$scope.detalle = true;
55	};	87	};
56		88
57	$scope.salir = function() {	89	$scope.salir = function() {
58	$location.path('/');	90	$location.path('/');
59	};	91	};
60		92
61	$scope.search = function(key) {	93	$scope.search = function(key) {
62	if (key === 13) {	94	if (key === 13) {
63	$scope.idUsuario = $scope.idUsuarioInput;	95	$scope.idUsuario = $scope.idUsuarioInput;
64	getSeguimiento();	96	getSeguimiento();
		97	$scope.$broadcast('removeCabecera', 'General');
		98	$scope.$broadcast('addCabecera', {
		99	label: cabecera,
		100	valor: $scope.idUsuarioInput
		101	});
65	}	102	}
66	};	103	};
67		104
68	$scope.fecha = function() {	105	$scope.fecha = function() {
69	getSeguimiento();	106	getSeguimiento();
70	};	107	};
71		108
72	$scope.seleccionarVehiculo = function() {	109	$scope.seleccionarVehiculo = function() {
73	var modalInstance = $uibModal.open(	110	var modalInstance = $uibModal.open(
74	{	111	{
75	ariaLabelledBy: 'Busqueda de Vehiculo',	112	ariaLabelledBy: 'Busqueda de Vehiculo',
76	templateUrl: 'modal-vehiculo.html',	113	templateUrl: 'modal-vehiculo.html',
77	controller: 'focaModalVehiculoController',	114	controller: 'focaModalVehiculoController',
78	size: 'lg'	115	size: 'lg'
79	}	116	}
80	);	117	);
81		118
82	modalInstance.result.then(	119	modalInstance.result.then(
83	function(vehiculo) {	120	function(vehiculo) {
		121	var existe = $filter('filter')($scope.vehiculos, {id: vehiculo.id});
		122	if(existe.length > 0){
		1	Link here Jose Pinto 2018-12-26 20:35:26 UTC no hace falta el '> 0' no hace falta el '> 0' Choose File ... File name... Cancel
		123	focaModalService.alert('El vehiculo que intenta cargar ya ha sido cargado');
		124	return;
		125	}
84	$scope.vehiculos.push(vehiculo);	126	$scope.vehiculos.push(vehiculo);
85	}, function() {	127	}, function() {
86	// funcion ejecutada cuando se cancela el modal	128	// funcion ejecutada cuando se cancela el modal
87	}	129	}
88	);	130	);
89	};	131	};
90
91
92		132
93	function getSeguimiento() {	133	function getSeguimiento() {
94	var now = $scope.now;	134	var now = $scope.now;
95	var desde = new Date(new Date(now.setHours(0)).setMinutes(0));	135	var desde = new Date(new Date(now.setHours(0)).setMinutes(0));
96	desde = desde.setDate(desde.getDate() - 1);	136	desde = desde.setDate(desde.getDate() - 1);
97	desde = new Date(desde);	137	desde = new Date(desde);
98	var datos = {	138	var datos = {
99	actividad: $scope.actividad,	139	actividad: $scope.actividad,
100	idUsuario: $scope.idUsuario,	140	idUsuario: $scope.idUsuario,
101	fechaDesde: desde,	141	fechaDesde: desde,
102	fechaHasta: new Date(new Date(now.setHours(23)).setMinutes(59))	142	fechaHasta: new Date(new Date(now.setHours(23)).setMinutes(59))
103	};	143	};
104		144
105	$scope.datosBuscados = {	145	$scope.datosBuscados = {
106	actividad: $scope.actividad,	146	actividad: $scope.actividad,
107	individual: $scope.idUsuario !== 0 ? true : false	147	individual: $scope.idUsuario !== 0 ? true : false
108	};	148	};
109		149
110	focaLogisticaPedidoRutaService.obtenerActividad(datos).then(function(datos) {	150	focaLogisticaPedidoRutaService.obtenerActividad(datos).then(function(datos) {
111
112	$scope.marcadores = datos.data;	151	$scope.marcadores = datos.data;

1	angular.module('focaLogisticaPedidoRuta')	1	angular.module('focaLogisticaPedidoRuta')
2	.controller('focaDetalleVehiculo',	2	.controller('focaDetalleVehiculo',
3	['$scope',	3	['$scope',
4	'$uibModalInstance',	4	'$uibModalInstance',
5	'vehiculo',	5	'idVehiculo',
6	'marcador',	6	'idRemito',
7	function($scope, $uibModalInstance, vehiculo, marcador) {	7	'focaModalService',
8	$scope.articulos = marcador.notaPedido.articulosNotaPedido;	8	'$filter',
9	$scope.articuloSeleccionado = {};	9	'focaLogisticaPedidoRutaService',
10	$scope.vehiculo = vehiculo;	10	function($scope, $uibModalInstance, idVehiculo, idRemito, focaModalService, $filter,
		11	focaLogisticaPedidoRutaService
		12	) {
		13	$scope.articulos = [];
		14	$scope.vehiculo = {};
		15	$scope.remito = {};
		16	focaLogisticaPedidoRutaService.obtenerVehiculoById(idVehiculo).then(
		17	function(res) {
		18	$scope.vehiculo = res.data;
		19	}
		20	);
		21	focaLogisticaPedidoRutaService.obtenerRemitoById(idRemito).then(
		22	function(res) {
		23	$scope.remito = res.data;
		24	$scope.articulos = res.data.articulosRemito;
		25	}
		26	);
		27	$scope.aCargar = [];
11	$scope.aceptar = function() {	28	$scope.aceptar = function() {
12	$uibModalInstance.close();	29	$uibModalInstance.close();
13	};	30	};
14		31
15	$scope.cargarACisterna = function(cisterna) {	32	$scope.cancelar = function() {
16	if(!$scope.articuloSeleccionado.id) {	33	$uibModalInstance.close();
17	//TODO: usar modal de foca	34	};
18	alert('Debe seleccionar un articulo');	35
19	return;	36	$scope.cargarACisternas = function(vehiculo) {
20	}	37	for (var i = 0; i < vehiculo.cisternas.length; i++) {
		1	Link here Jose Pinto 2018-12-26 20:37:03 UTC espacio innecesario despues de for espacio innecesario despues de for Choose File ... File name... Cancel
21	if(cisterna.cisternaCarga.cantidad) {	38	var cisterna = vehiculo.cisternas[i];
22	cisterna.cisternaCarga.cantidad += parseFloat(cisterna.aCargar);	39	var aCargar = parseFloat($scope.aCargar[i]);
23	}else {	40	if(!aCargar) {
24	cisterna.cisternaCarga.cantidad = parseFloat(cisterna.aCargar);	41	continue;
25	cisterna.cisternaCarga.idProducto = $scope.articuloSeleccionado.id;	42	}
26	}	43	if(aCargar > cisterna.disponible) {
27	cisterna.disponible = cisterna.capacidad - cisterna.cisternaCarga.cantidad;	44	focaModalService.alert('La cantidad cargada supera la capacidad de la' +
28	cisterna.aCargar = '';	45	'cisterna ' + cisterna.codigo);
		46	return;
		47	}
		48	if(cisterna.cisternaCarga.cantidad) {
		49	cisterna.cisternaCarga.cantidad += aCargar;
		50	}else {
		51	cisterna.cisternaCarga.cantidad = aCargar;
		52	cisterna.cisternaCarga.idProducto = $scope.articuloSeleccionado.idArticulo;
		53	}
		54	cisterna.disponible = cisterna.capacidad - cisterna.cisternaCarga.cantidad;
		55
		56	cisterna.cisternaCarga.articulo = {
		57	DetArt: $scope.articuloSeleccionado.descripcion
		58	};
		59	$filter('filter')($scope.articulos, {id: $scope.articuloSeleccionado.id})[0]
		60	.cargado = true;
		61
		62	$scope.calcularPorcentaje(cisterna);
		63	}
		64	var articuloSiguiente = $scope.articulos.filter(
		65	function(filter) {
		66	return filter.cargado !== true;
		67	}
		68	);
		69	if(articuloSiguiente.length > 0){
		1	Link here Jose Pinto 2018-12-26 20:37:19 UTC espacio necesario entre ) y { espacio necesario entre ) y { Choose File ... File name... Cancel
		70	$scope.cambioArticulo(articuloSiguiente[0]);
		71	}
		72	$scope.aCargar = [];
29	};	73	};
30	$scope.calcularPorcentaje = function(cisterna) {	74	$scope.calcularPorcentaje = function(cisterna) {
31	if(!cisterna.cisternaCarga.cantidad) {	75	if(!cisterna.cisternaCarga.cantidad) {
32	cisterna.cisternaCarga.cantidad = 0;	76	cisterna.cisternaCarga.cantidad = 0;
33	}	77	}
34	var porcentaje = (cisterna.cisternaCarga.cantidad * 100 /	78	var porcentaje = (cisterna.cisternaCarga.cantidad * 100 /
35	cisterna.capacidad) + '%';	79	cisterna.capacidad) + '%';
36	document.getElementById(cisterna.id).style.width = porcentaje;	80	var elementHtml = document.getElementById(cisterna.id);
		81	if(elementHtml) {
		82	elementHtml.style.width = porcentaje;
		83	}
37	};	84	};
38	$scope.cambioArticulo = function(articulo) {	85	$scope.cambioArticulo = function(articulo) {
		86	articulo.checked = true;
39	$scope.articuloSeleccionado = articulo;	87	$scope.articuloSeleccionado = articulo;
40	};	88	};
		89	$scope.actualizarArticulo = function () {
		90	$scope.articuloSeleccionado.cantidadCargada = 0;
		91	for (var i = 0; i < $scope.aCargar.length; i++) {
		92	$scope.articuloSeleccionado.cantidadCargada +=
		93	parseFloat($scope.aCargar[i]) \|\| 0;
		94	}
		95	};
		96	$scope.tieneArticulosPendientes = function() {
		97	var articulosDescargados = $scope.articulos.filter(function(filter) {
		98	return filter.cargado === true;
		99	});
		100	if(articulosDescargados.length === $scope.articulos.length) {
		101	return false;
		102	}
		103	return true;
		104	};
41	}]);	105	}]);
42		106

1	angular.module('focaLogisticaPedidoRuta').directive('foca', function() {	1	angular.module('focaLogisticaPedidoRuta').directive('foca', 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	el.append(contenedor);	6	el.append(contenedor);
7	scope.map = L.map(contenedor).setView([attrs.latitud, attrs.longitud], attrs.zoom);	7	scope.map = L.map(contenedor).setView([attrs.latitud, attrs.longitud], attrs.zoom);
8	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map);	8	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map);
9	},	9	},
10	controller: ['$scope', '$filter', function($scope, $filter) {	10	controller: ['$scope', '$filter', function($scope, $filter) {
11	$scope.markers = [];	11	$scope.markers = [];
12	$scope.$watch('marcadores', function() {	12	$scope.$watch('marcadores', function() {
13	for(var i in $scope.markers) {	13	for(var i in $scope.markers) {
14	$scope.map.removeLayer($scope.markers[i]);	14	$scope.map.removeLayer($scope.markers[i]);
15	}	15	}
16	$scope.markers = [];	16	$scope.markers = [];
17		17
18	angular.forEach($scope.marcadores, function(marcador) {	18	angular.forEach($scope.marcadores, function(marcador) {
19	var observacion =	19	var observacion =
20	'Vendedor: ' + marcador.notaPedido.idVendedor + ' - ' +	20	'Vendedor: ' + marcador.notaPedido.idVendedor + ' - ' +
21	(	21	(
22	marcador.notaPedido.vendedor ?	22	marcador.notaPedido.vendedor ?
23	marcador.notaPedido.vendedor.NomVen :	23	marcador.notaPedido.vendedor.NomVen :
24	''	24	''
25	) + '<br/>';	25	) + '<br/>';
26	observacion += 'Fecha: ' +	26	observacion += 'Fecha: ' +
27	$filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' +	27	$filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' +
28	marcador.fecha.slice(11,19) + '<br/>';	28	marcador.fecha.slice(11,19) + '<br/>';
29	observacion += 'Nº: ' + $filter('comprobante')([	29	observacion += 'Nº: ' + $filter('comprobante')([
30	marcador.notaPedido.sucursal,	30	marcador.notaPedido.sucursal,
31	marcador.notaPedido.numeroNotaPedido	31	marcador.notaPedido.numeroNotaPedido
32	]) + '<br/>';	32	]) + '<br/>';
33	observacion += 'Cliente: ' +	33	observacion += 'Cliente: ' +
34	marcador.notaPedido.cliente.NOM + '<br/>';	34	marcador.notaPedido.cliente.NOM + '<br/>';
35		35
36	if($scope.parametros.individual) {	36	if($scope.parametros.individual) {
37	observacion +=	37	observacion +=
38	'Total: ' + $filter('currency')(marcador.notaPedido.total, '$');	38	'Total: ' + $filter('currency')(marcador.notaPedido.total, '$');
39	observacion = 'Orden: ' + marcador.orden + '<br/>' + observacion;	39	observacion = 'Orden: ' + marcador.orden + '<br/>' + observacion;
40		40
41	if(marcador.distancia) {	41	if(marcador.distancia) {
42	observacion += '<br/>Distancia a casa central: ' +	42	observacion += '<br/>Distancia a casa central: ' +
43	marcador.distancia + 'km';	43	marcador.distancia + 'km';
44	}	44	}
45	}else {	45	}else {
46	observacion += 'Cantidad de nota de pedido: ' +	46	observacion += 'Cantidad de nota de pedido: ' +
47	marcador.cantidad + '<br/>';	47	marcador.cantidad + '<br/>';
48	observacion += 'Total Vendido: ' +	48	observacion += 'Total Vendido: ' +
49	$filter('currency')(marcador.total, '$');	49	$filter('currency')(marcador.total, '$');
50	}	50	}
51	observacion += '<br/>';	51	observacion += '<br/>';
52	observacion += '<i class="fa fa-map-marker fa-3x" aria-hidden="true"'+	52	observacion += '<i class="fa fa-map-marker fa-3x" aria-hidden="true"'+
53	'class="form-control" ondragend="dropEnd()" ondragstart=\'drag(event, '+	53	'class="form-control" ondragend="dropEnd()" ondragstart=\'drag(event, '+
54	JSON.stringify(marcador)+')\' draggable="true"></i>';	54	JSON.stringify(marcador)+')\' draggable="true"></i>(Arrastrar icono)';
55	$scope.markers.push(	55	$scope.markers.push(
56	L.marker([marcador.latitud, marcador.longitud]).addTo($scope.map)	56	L.marker([marcador.latitud, marcador.longitud]).addTo($scope.map)
57	.bindPopup(observacion)	57	.bindPopup(observacion)
58	);	58	);
59		59
60	$scope.markers[0].openPopup();	60	$scope.markers[0].openPopup();
61	});	61	});
62	});	62	});
63	}],	63	}],
64	scope: {	64	scope: {
65	latitud: '=',	65	latitud: '=',
66	longitud: '=',	66	longitud: '=',
67	zoom: '=',	67	zoom: '=',
68	marcadores: '=',	68	marcadores: '=',
69	parametros: '='	69	parametros: '='
70	}	70	}
71	};	71	};
72	});	72	});
73		73

 angular.module('focaLogisticaPedidoRuta')
     .service(
         'focaLogisticaPedidoRutaService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT
     ) {
         return {
             obtenerActividad: function(parametros) {
                 return $http.post(API_ENDPOINT.URL + '/seguimiento/filtros', parametros);
+            },
+            obtenerVehiculoById: function(idVehiculo) {
+                return $http.get(API_ENDPOINT.URL + '/vehiculo/' + idVehiculo);
+            },
+            obtenerRemitoById: function(idRemito) {
+                return $http.get(API_ENDPOINT.URL + '/remito/obtener/' + idRemito);
             }
         };
     }]);

GITLAB

Eric Fernandez / foca-logistica-pedido-ruta

logistica de pedidos

 <div class="modal-header">
     <h4>Detalle de carga</h4>
-    <h3>-EN DESARROLLO</h3>
+    <!-- TODO: quitar llaves {{}} y usar ng-bind -->
+    <h4>-EN DESARROLLO</h4>
+    Remito Nº
+    <strong ng-bind="remito.numeroRemito"></strong>
+    , Cliente
+    <strong ng-bind="remito.nombreCliente"></strong>
+    , Domicilio
+    <strong ng-bind="remito.domicilioStamp"></strong>
 </div>
 <div class="modal-body">
     <div>
-        <div class="col-12" ng-repeat="articulo in articulos">
+        <div class="col-12" ng-repeat="(key, articulo) in articulos">
             <input
                 type="radio"
                 name="articuloRadio"
                 id="{{articulo.id}}"
+                ng-checked="articulo.checked"
+                ng-disabled="articulo.cargado"
                 ng-click="cambioArticulo(articulo)"
             >
             <span>Articulo: {{articulo.descripcion}},</span>
-            <span>Cantidad Cargada: {{articulo.cantidad}}</span>
+            <span>Total: {{articulo.cantidad}},</span>
-            <span>Cantidad a Cargar: </span>
+            <span>Cantidad Cargada: {{articulo.cantidadCargada || 0}},</span>
+            <span>Pendiente: {{articulo.cantidad - articulo.cantidadCargada}} </span>
         </div>
         <strong class="col-12" ng-bind="vehiculo.tractor"></strong>
         <strong class="col-12">Cisternas:</strong>
-        <div class="form-group row input-group" ng-repeat="cisterna in vehiculo.cisternas">
+        <div class="form-group row input-group" ng-repeat="(key, cisterna) in vehiculo.cisternas">
             <div class="col-1 mt-2">
                 <strong>{{cisterna.codigo}}</strong>
             </div>
             <input
-                class="form-control col-2"
+                class="form-control col-2 mr-3"
                 foca-tipo-input
                 foca-teclado
                 placeholder="A cargar..."
-                ng-model="cisterna.aCargar"
+                ng-model="aCargar[key]"
-                ng-disabled="articuloSeleccionado.cantidad > cisterna.disponible"
+                ng-disabled="(articuloSeleccionado.idArticulo !== cisterna.cisternaCarga.idProducto &&
+                    cisterna.cisternaCarga.idProducto) || !tieneArticulosPendientes()"
+                ng-change="actualizarArticulo()"
             >
-            <div class="input-group-append">
+            <div class="progress foca-alto-progress col-4 pl-0 pr-0 mt-1">
-                <button
-                    class="form-control btn btn-outline-secondary"
-                    ng-disabled="articuloSeleccionado.cantidad > cisterna.disponible">
-                    <i
-                        class="fa fa-save"
-                        ng-click="cargarACisterna(cisterna)"
-                        aria-hidden="true"></i>
-                </button>
-            </div>
-            <div class="progress foca-alto col-8 pl-0 pr-0 mt-1">
                 <strong class="col-12 mt-1 text-center position-absolute"
                 >{{cisterna.cisternaCarga.cantidad || 0}} / {{cisterna.capacidad}}</strong>
                 <div
                     id="{{cisterna.id}}"
                     class="progress-bar"
                     role="progressbar"
                     aria-valuemin="0"
                     aria-valuemax="{{cisterna.capacidad}}"
                     ng-style="{'width':'{{calcularPorcentaje(cisterna)}}'}">
                 </div>
             </div>
-            <div class="col-1 mt-1">
+            <div class="col-4 mt-2">
-                <i class="fa fa-info" data-toggle="tooltip" title="asd"></i>
+                <strong>{{cisterna.cisternaCarga.articulo.DetArt || 'Sin articulo'}}</strong>
             </div>
+            <!--TODO: descomentar cuando se use-->
+            <!-- <div class="col-1 mt-1">
+                <i class="fa fa-info" uib-tooltip="Información cisterna"></i>
+            </div> -->
+        </div>
+        <div class="col-12 aling-end">
+            <button
+                class="form-control"
+                type="button"
+                ng-disabled="!articuloSeleccionado || articuloSeleccionado.cantidad -
+                    articuloSeleccionado.cantidadCargada !== 0 || !tieneArticulosPendientes()"
+                ng-click="cargarACisternas(vehiculo)">
+                Cargar cisternas
+            </button>
         </div>
     </div>
 </div>
 <div class="modal-footer py-1">
-    <button class="btn btn-sm btn-secondary" type="button" ng-click="aceptar()">Aceptar</button>
+    <button

1	<script>
2	function allowDrop(ev) {
3	ev.preventDefault();
4	}
5	function drag(ev, marcador) {
6	marcador = JSON.stringify(marcador);
7	ev.dataTransfer.setData("marcador", marcador);
8	var dom_el = document.getElementById('test');
9	var scope = angular.element(dom_el).scope();
10	scope.arrastra();
11	}
12	function drop(ev) {
13	ev.preventDefault();
14	var data = ev.dataTransfer.getData("marcador");
15	var dom_el = document.getElementById(ev.target.id);
16	var ng_el = angular.element(dom_el);
17	var ng_el_scope = ng_el.scope();
18	ng_el_scope.cargar(ev.target.id, data);
19	ng_el_scope.$digest();
20	}
21	function dropEnd() {
22	console.log('drop');
23	var dom_el = document.getElementById('test');
24	var scope = angular.element(dom_el).scope();
25	scope.noArrastra();
26	}
27	</script>
28	<div class="foca-logistica-pedido-ruta" id="test">	1	<div class="foca-logistica-pedido-ruta" id="test">
29	<h3>-EN DESARROLLO</h3>	2	<div class="row">
		3	<foca-cabecera-facturador
		4	titulo="titulo"
		5	fecha="now"
		6	class="mb-0 col-lg-12"
		7	></foca-cabecera-facturador>
		8	</div>
		9	<div class="row px-5 py-2 botonera-secundaria">
		10	<div class="col-12">
		11	<foca-botonera-facturador botones="botonera" extra="5" class="row"></foca-botonera-facturador>
		12	</div>
		13	</div>
30	<div class="row">	14	<div class="row">
31	<div class="offset-1 col-9">	15	<div class="offset-1 col-9">
32	<foca	16	<foca
33	latitud="-32.89214159952345"	17	latitud="-32.89214159952345"
34	longitud="-68.84572999101856"	18	longitud="-68.84572999101856"
35	zoom="14"	19	zoom="14"
36	marcadores="marcadores"	20	marcadores="marcadores"
37	parametros= "datosBuscados"	21	parametros= "datosBuscados"
38	/>	22	/>
39	</div>	23	</div>
40	<div class="col-2 pl-0">	24	<div class="col-2 pl-0">
41	<input	25	<input
42	type="date"	26	type="date"
43	ng-model="now"	27	ng-model="now"
44	class="btn col-12 my-1"	28	class="btn col-12 my-1"
45	foca-focus="true"	29	foca-focus="true"
46	ng-blur="fecha()"	30	ng-blur="fecha()"
47	hasta-hoy	31	hasta-hoy
48	/>	32	/>
49	<button	33	<button
50	type="button"	34	type="button"
51	ng-class="{'active': idUsuario == 0}"	35	ng-class="{'active': idUsuario == 0}"
52	class="btn col-12 my-1"	36	class="btn col-12 my-1"
53	ng-click="general()"	37	ng-click="general()"
54	>General</button>	38	>General</button>
55	<button	39	<button
56	type="button"	40	type="button"
57	ng-class="{'active': idUsuario != 0}"	41	ng-class="{'active': idUsuario != 0}"
58	class="btn col-12 my-1"	42	class="btn col-12 my-1"
59	ng-click="individual()"	43	ng-click="individual()"
60	ng-show="actividad != 'Cobranza'"
61	>Individual</button>	44	>Individual</button>
62	<div class="form-group" ng-show="idUsuario == -1">	45	<div class="form-group" ng-show="idUsuario == -1">
63	<input	46	<input
64	type="text"	47	type="text"
65	placeholder="Vendedor"	48	placeholder="Vendedor"
66	class="form-control"	49	class="form-control"
67	ng-model="idUsuarioInput"	50	ng-model="idUsuarioInput"
68	ng-keypress="search($event.keyCode)"	51	ng-keypress="search($event.keyCode)"
69	foca-focus="idUsuario == -1"	52	foca-focus="idUsuario == -1"
70	ng-show="actividad == 'Nota de pedido'"
71	>
72	<input
73	type="text"
74	placeholder="Vehiculo"
75	class="form-control"
76	ng-model="idUsuarioInput"
77	ng-keypress="search($event.keyCode)"
78	foca-focus="idUsuario == -1"
79	ng-show="actividad == 'Entrega de producto'"
80	>	53	>
81	</div>	54	</div>
82	<button
83	type="button"
84	class="btn col-12 my-1 boton-salir"
85	ng-click="salir()"
86	>
87	Salir
88	</button>
89	</div>	55	</div>
90	<input
91	class="col-auto form-control"
92	ng-click="seleccionarVehiculo()"
93	placeholder="Seleccionar vehiculo"
94	readonly
95	/>
96	<div class="row">	56	<div class="row">
97	<div	57	<div
98	class="container col-auto"	58	class="container col-auto"
99	ng-repeat="vehiculo in vehiculos"	59	ng-repeat="vehiculo in vehiculos"
100	ng-click="mostrarDetalleVehiculo(vehiculo)"	60	ng-click="mostrarDetalleVehiculo(vehiculo)"
101	>	61	>
102	<div>	62	<div>
103	<div class="col-md-3 col-sm-6">	63	<div class="col-md-3 col-sm-6">
104	<div class="progress-circle blue" ng-class="{'arrastrando': arrastrando}">	64	<div class="progress-circle blue" ng-class="{'arrastrando': arrastrando}">
105	<span class="progress-left">	65	<span class="progress-left">
106	<span class="progress-bar"></span>	66	<span class="progress-bar"></span>
107	</span>	67	</span>
108	<span class="progress-right">	68	<span class="progress-right">
109	<span class="progress-bar"></span>	69	<span class="progress-bar"></span>
110	</span>	70	</span>
111	<div class="progress-value">{{vehiculo.codigo}}</div>	71	<div class="progress-value">{{vehiculo.codigo}}</div>
112	</div>	72	</div>
113	</div>	73	</div>
		74	<div class="row">
		75	<div class="text-left col-6">
		76	<i
		77	class="fa fa-info fa-2x"
		78	uib-tooltip="Ver información del vehículo"
		79	ng-click="informacionVehiculo(vehiculo)"></i>
		80	</div>
		81	<div class="text-right col-6">
		82	<i
		83	class="fa fa-trash fa-2x"
		84	uib-tooltip="Eliminar vehiculo"
		85	ng-click="quitarVehiculo(vehiculo)"></i>
		86	</div>
		87	</div>
114	<div	88	<div
115	class="col-12 border border-dark text-center"	89	class="col-12 border border-dark text-center"
116	ng-show="arrastrando"	90	ng-show="arrastrando"
117	id="{{vehiculo.id}}"	91	id="{{vehiculo.id}}"
118	ondrop="drop(event)"	92	ondrop="drop(event)"
119	ondragover="allowDrop(event)"	93	ondragover="allowDrop(event)"
120	>Soltar acá</div>	94	>Soltar acá</div>
121	</div>	95	</div>
122	</div>	96	</div>
123	</div>	97	</div>
124	</div>	98	</div>
125	</div>	99	</div>
126	<style>
127	.arrastrando {
128	opacity: 0.5;
129	}
130	.vertical {
131	display: inline-block;
132	width: 20%;
133	height: 40px;
134	-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
135	transform: rotate(-90deg);
136	}
137	.progress-circle{
138	width: 150px;
139	height: 150px;
140	line-height: 150px;
141	background: none;
142	margin: 0 auto;
143	box-shadow: none;
144	position: relative;
145	}
146	.progress-circle:after{
147	content: "";
148	width: 100%;
149	height: 100%;
150	border-radius: 50%;
151	border: 12px solid #fff;
152	position: absolute;
153	top: 0;
154	left: 0;
155	}
156	.progress-circle > span{
157	width: 50%;
158	height: 100%;
159	overflow: hidden;
160	position: absolute;
161	top: 0;
162	z-index: 1;
163	}
164	.progress-circle .progress-left{
165	left: 0;
166	}
167	.progress-circle .progress-bar{
168	width: 100%;
169	height: 100%;
170	background: none;
171	border-width: 12px;
172	border-style: solid;
173	position: absolute;
174	top: 0;
175	}
176	.progress-circle .progress-left .progress-bar{
177	left: 100%;
178	border-top-right-radius: 80px;
179	border-bottom-right-radius: 80px;
180	border-left: 0;
181	-webkit-transform-origin: center left;
182	transform-origin: center left;
183	}
184	.progress-circle .progress-right{
185	right: 0;
186	}
187	.progress-circle .progress-right .progress-bar{
188	left: -100%;
189	border-top-left-radius: 80px;
190	border-bottom-left-radius: 80px;
191	border-right: 0;
192	-webkit-transform-origin: center right;
193	transform-origin: center right;
194	animation: loading-1 1.8s linear forwards;
195	}
196	.progress-circle .progress-value{
197	width: 90%;
198	height: 90%;
199	border-radius: 50%;
200	background: #44484b;
201	font-size: 24px;
202	color: #fff;
203	line-height: 135px;
204	text-align: center;
205	position: absolute;
206	top: 5%;
207	left: 5%;
208	}
209	.progress-circle.blue .progress-bar{
210	border-color: #049dff;
211	}
212	.progress-circle.blue .progress-left .progress-bar{
213	animation: loading-2 1.5s linear forwards 1.8s;
214	}
215	.progress-circle.yellow .progress-bar{
216	border-color: #fdba04;
217	}
218	.progress-circle.yellow .progress-left .progress-bar{
219	animation: loading-3 1s linear forwards 1.8s;
220	}
221	.progress-circle.pink .progress-bar{
222	border-color: #ed687c;
223	}
224	.progress-circle.pink .progress-left .progress-bar{
225	animation: loading-4 0.4s linear forwards 1.8s;
226	}
227	.progress-circle.green .progress-bar{
228	border-color: #1abc9c;
229	}
230	.progress-circle.green .progress-left .progress-bar{
231	animation: loading-5 1.2s linear forwards 1.8s;
232	}
233	@keyframes loading-1{
234	0%{
235	-webkit-transform: rotate(0deg);
236	transform: rotate(0deg);
237	}
238	100%{
239	-webkit-transform: rotate(180deg);
240	transform: rotate(180deg);
241	}
242	}
243	@keyframes loading-2{
244	0%{
245	-webkit-transform: rotate(0deg);
246	transform: rotate(0deg);
247	}
248	100%{
249	-webkit-transform: rotate(180deg);
250	transform: rotate(180deg);
251	}
252	}
253	@keyframes loading-3{
254	0%{
255	-webkit-transform: rotate(0deg);
256	transform: rotate(0deg);
257	}
258	100%{
259	-webkit-transform: rotate(90deg);
260	transform: rotate(90deg);
261	}
262	}
263	@keyframes loading-4{