Luis Suarez / foca-logistica-pedido-ruta

Browse Code »

Commit 5fa8100a871a40c7c24e361ed22a81004ad44cbc

Authored by Eric Fernandez 2019-01-03 14:37:22 -0300

1 parent ec43821953

Exists in master and in 2 other branches

ver detalle de carga

Showing 5 changed files with 45 additions and 28 deletions Show diff stats

src/js/controller.js

Diff comments View file @ 5fa8100

 angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaController', [
     '$scope', 'focaLogisticaPedidoRutaService', '$location', '$uibModal', '$filter',
         'focaModalService', 'focaBotoneraLateralService', '$interval',
     function($scope, focaLogisticaPedidoRutaService, $location, $uibModal, $filter,
         focaModalService, focaBotoneraLateralService, $interval
     ) {
         $scope.actividad = 'Logistica';
         //Datos Pantalla
         $scope.titulo = 'Logistica de Pedidos';
         $scope.botonera = ['Transportista'];
         var cabecera = '';
         $scope.idVendedor = 0;
         $scope.marcadores = [];
         $scope.vehiculos = [];
         getSeguimiento();
         $scope.arrastrando = false;
         $scope.general = function() {
             $scope.idVendedor = 0;
             getSeguimiento();
         };
         //SETEO BOTONERA LATERAL
         focaBotoneraLateralService.showSalir(true);
         focaBotoneraLateralService.showPausar(false);
         focaBotoneraLateralService.showGuardar(false);
         $scope.general = function() {
             $scope.idVendedor = 0;
             getSeguimiento();
             $scope.$broadcast('removeCabecera', cabecera);
             $scope.$broadcast('addCabecera',{
                 label: 'General',
                 valor: ''
             });
         };
         $scope.cargar = function(idVehiculo, punto) {
-            var idRemito = JSON.parse(punto).notaPedido.remito.id;
+            var idRemito;
+            if (punto === -1) {
+                idRemito = -1;
+            }else {
+                idRemito = JSON.parse(punto).notaPedido.remito.id;
+            }
             var modalInstance = $uibModal.open(
                 {
                     ariaLabelledBy: 'Busqueda de Vehiculo',
                     templateUrl: 'foca-detalle-vehiculo.html',
                     controller: 'focaDetalleVehiculo',
                     size: 'lg',
                     resolve: {
                         idVehiculo: function() {return idVehiculo;},
                         idRemito: function() {return idRemito;}
                     }
                 }
             );
             modalInstance.result.then(function() {
             }, function() {
             });
         };
         $scope.quitarVehiculo = function(vehiculo) {
             focaModalService.confirm('Esta seguro que desea eliminar el vehículo ' +
                 vehiculo.codigo + '?').then(function() {
                     eliminarVehiculo(vehiculo);
                 });
         };
         $scope.hacerHojaRuta = function(vehiculo) {
             var modalInstance = $uibModal.open(
                 {
                     ariaLabelledBy: 'Creación hoja ruta',
                     templateUrl: 'foca-modal-crear-hoja-ruta.html',
                     controller: 'focaModalCrearHojaRuta',
                     size: 'lg',
                     resolve: {
                         idVehiculo: function() {return vehiculo.id;}
                     }
                 }
             );
             modalInstance.result.then(function() {
             }, function() {
                 //usar cuando se cancela el modal
             });
         };
         $scope.arrastra = function() {
             $scope.arrastrando = true;
             $scope.$digest();
         };
         $scope.noArrastra = function() {
             $scope.arrastrando = false;
             $scope.$digest();
         };
         $scope.individual = function() {
             $scope.idVendedor = -1;
         };
         $scope.mostrarDetalle = function() {
             $scope.detalle = true;
         };
         $scope.salir = function() {
             $location.path('/');
         };
         $scope.search = function(key) {
             if (key === 13) {
                 $scope.idVendedor = $scope.idVendedorInput;
                 getSeguimiento();
                 $scope.$broadcast('removeCabecera', 'General');
                 $scope.$broadcast('addCabecera', {
                     label: cabecera,
                     valor: $scope.idVendedorInput
                 });
             }
         };
         $scope.fecha = function() {
             getSeguimiento();
         };
         $scope.seleccionarTransportista = function() {
             var modalInstance = $uibModal.open(
                 {
                     ariaLabelledBy: 'Busqueda de Transportista',
                     templateUrl: 'modal-proveedor.html',
                     controller: 'focaModalProveedorCtrl',
                     size: 'lg',
                     resolve: {
                         transportista: function() {
                             return true;
                         }
                     }
                 }
             );
             modalInstance.result.then(function(transportista) {
                 $scope.seleccionarVehiculo(transportista.COD);
             });
         };
         $scope.seleccionarVehiculo = function(idTransportista) {
             var modalInstance = $uibModal.open(
                 {
                     ariaLabelledBy: 'Busqueda de Vehiculo',
                     templateUrl: 'modal-vehiculo.html',
                     controller: 'focaModalVehiculoController',
                     size: 'lg',
                     resolve: {
                         idTransportista: function() {return idTransportista;}
                     }
                 }
             );
             modalInstance.result.then(
                 function(vehiculo) {
                     var existe = $filter('filter')($scope.vehiculos, {id: vehiculo.id});
                     if(existe.length) {
                         focaModalService.alert('El vehiculo ya ha sido cargado');
                         return;
                     }
                     if(!vehiculo.cisternas.length) {
                         focaModalService.alert('El vehiculo no tiene cisternas');
                         return;
                     }
                     $scope.vehiculos.push(vehiculo);
                 }, function() {
                     // funcion ejecutada cuando se cancela el modal
                 }
             );
         };
         function getSeguimiento() {
             var desde = new Date('1900/01/01');
             var hasta = new Date('2099/01/01');
             if ($scope.now) {
                 var now = $scope.now;
                 desde = new Date(new Date(now.setHours(0)).setMinutes(0));
                 desde = desde.setDate(desde.getDate() - 1);
                 desde = new Date(desde);
             }
             var datos = {
                 actividad: $scope.actividad,
                 idUsuario: $scope.idVendedor,
                 fechaDesde: desde,
                 fechaHasta: hasta
             };
             $scope.datosBuscados = {
                 actividad: $scope.actividad,
                 individual: $scope.idVendedor ? true : false
             };
             focaLogisticaPedidoRutaService.obtenerActividad(datos).then(function(datos) {
                 if(JSON.stringify(datos.data) !== JSON.stringify($scope.marcadores)) {
                     $scope.marcadores = datos.data;
                 }
             });
         }
         function eliminarVehiculo(vehiculo) {
             focaLogisticaPedidoRutaService.getRemitos(vehiculo.id).then(function(res) {
                 if(!focaLogisticaPedidoRutaService.obtenerRemitosDeCarga(res.data).length) {
                     $scope.vehiculos.splice($scope.vehiculos.indexOf(vehiculo), 1);
                 }else {
                     focaModalService.alert('No ha sido posible eliminar el vehiculo porque ' +
                         'tiene remitos asociados').then(function() {
                             $scope.hacerHojaRuta(vehiculo);
                         });
                 }
             });
         }
         $interval(function() {
             getSeguimiento();
         }, 5000);
     }
 ]);

src/js/controllerDetalleVehiculo.js

Diff comments View file @ 5fa8100

 angular.module('focaLogisticaPedidoRuta')
     .controller('focaDetalleVehiculo',
         ['$scope',
         '$uibModalInstance',
         'idVehiculo',
         'idRemito',
         'focaModalService',
         '$filter',
         'focaLogisticaPedidoRutaService',
         function($scope, $uibModalInstance, idVehiculo, idRemito, focaModalService, $filter,
             focaLogisticaPedidoRutaService
         ) {
             //seteo variables
+            $scope.idRemito = idRemito;
             $scope.articulos = [];
             $scope.vehiculo = {};
             $scope.remito = {};
             $scope.aCargar = [];
             var cisternaMovimientos = [];
             focaLogisticaPedidoRutaService.obtenerVehiculoById(idVehiculo).then(
                 function(res) {
                     $scope.vehiculo = res.data;
                 }
             );
-            focaLogisticaPedidoRutaService.obtenerRemitoById(idRemito).then(
+            if (idRemito !== -1) {
-                function(res) {
+                focaLogisticaPedidoRutaService.obtenerRemitoById(idRemito).then(
-                    $scope.remito = res.data;
+                    function(res) {
-                    if($scope.remito.idUsuarioProceso) {
+                        $scope.remito = res.data;
-                        focaModalService.alert('El remito esta siendo cargado por otro usario');
+                        if($scope.remito.idUsuarioProceso) {
-                        $uibModalInstance.close();
+                            focaModalService.alert('El remito esta siendo cargado por otro usario');
+                            $uibModalInstance.close();
+                        }
+                        $scope.articulos = res.data.articulosRemito;
                     }
-                    $scope.articulos = res.data.articulosRemito;
+                );
-                }
+            }
-            );
             $scope.aceptar = function() {
                 $scope.cargando = true;
                 var cisternaCargas = [];
                 for (var i = 0; i < $scope.vehiculo.cisternas.length; i++) {
                     delete $scope.vehiculo.cisternas[i].cisternaCarga.articulo;
                     cisternaCargas.push($scope.vehiculo.cisternas[i].cisternaCarga);
                 }
                 var cisterna = {
                     cisternaMovimientos: cisternaMovimientos,
                     cisternaCargas: cisternaCargas,
                     idVehiculo: $scope.vehiculo.id
                 };
                 focaLogisticaPedidoRutaService.guardarCisternas(cisterna, $scope.remito.id)
                     .then(function() {
                         focaModalService.alert('Cisternas cargadas con éxito').then(function() {
                             $scope.cargando = false;
                             $uibModalInstance.close();
                         });
                     }).catch(function(error) {
                         $scope.cargando = false;
                         $uibModalInstance.close();
                         if (error.status === 403.1) {
                             focaModalService.alert('ERROR: El vehículo esta en uso');
                         }
                         if(error.status === 403.2) {
                             focaModalService.alert('ERROR: Otro usario ya cargó este remito');
                             return;
                         }
                         focaModalService.alert('Hubo un error al cargar las cisternas');
                 });
             };
             $scope.cancelar = function() {
                 $uibModalInstance.close();
             };
             $scope.cargarACisternas = function(vehiculo) {
                 for(var i = 0; i < vehiculo.cisternas.length; i++) {
                     var cisterna = vehiculo.cisternas[i];
                     var aCargar = parseFloat($scope.aCargar[i]);
                     //validaciones
                     if(!aCargar) {
                         continue;
                     }
                     if(aCargar > cisterna.disponible) {
                         focaModalService.alert('La cantidad cargada supera la capacidad de la' +
                             'cisterna ' + cisterna.codigo);
                         return;
                     }
                     //cargar
                     if(cisterna.cisternaCarga.cantidad) {
                         cisterna.cisternaCarga.cantidad += aCargar;
                     }else {
                         cisterna.cisternaCarga.cantidad = aCargar;
                         cisterna.cisternaCarga.idProducto = $scope.articuloSeleccionado.idArticulo;
                     }
                     cisterna.disponible = cisterna.capacidad - cisterna.cisternaCarga.cantidad;
                     cisterna.cisternaCarga.articulo = {
                         DetArt: $scope.articuloSeleccionado.descripcion
                     };
                     $filter('filter')($scope.articulos, {id: $scope.articuloSeleccionado.id})[0]
                         .cargado = true;
                     $scope.calcularPorcentaje(cisterna);
                     //Guardar
                     var now = new Date();
                     var cisternaMovimiento = {
                         fecha: now.toISOString().slice(0, 19).replace('T', ' '),
                         cantidad: aCargar,
                         metodo: 'carga',
                         idCisternaCarga: cisterna.cisternaCarga.id,
                         idRemito: $scope.remito.id
                     };
                     cisternaMovimientos.push(cisternaMovimiento);
                 }
                 var articuloSiguiente = $scope.articulos.filter(
                     function(filter) {
                         return filter.cargado !== true;
                     }
                 );
                 if(articuloSiguiente.length > 0) {
                     $scope.cambioArticulo(articuloSiguiente[0]);
                 }
                 $scope.aCargar = [];
             };
             $scope.calcularPorcentaje = function(cisterna) {
                 if(!cisterna.cisternaCarga.cantidad) {
                     cisterna.cisternaCarga.cantidad = 0;
                 }
                 var porcentaje = (cisterna.cisternaCarga.cantidad * 100 /
                     cisterna.capacidad) + '%';
                 var elementHtml = document.getElementById(cisterna.id);
                 if(elementHtml) {
                     elementHtml.style.width = porcentaje;
                 }
             };
             $scope.cambioArticulo = function(articulo) {
                 articulo.checked = true;
                 $scope.articuloSeleccionado = articulo;
             };
             $scope.actualizarArticulo = function () {
                 $scope.articuloSeleccionado.cantidadCargada = 0;
                 for (var i = 0; i < $scope.aCargar.length; i++) {
                     $scope.articuloSeleccionado.cantidadCargada +=
                         parseFloat($scope.aCargar[i]) || 0;
                 }
             };
             $scope.tieneArticulosPendientes = function() {
                 var articulosDescargados = $scope.articulos.filter(function(filter) {
                     return filter.cargado === true;
                 });
                 if(articulosDescargados.length === $scope.articulos.length)  {
                     return false;
                 }
                 return true;
             };
     }]);

src/js/osm-directive.js

Diff comments View file @ 5fa8100

 angular.module('focaLogisticaPedidoRuta').directive('focaLogistica', function() {
     return {
         restrict: 'E',
         link: function(scope, el, attrs) {
             var contenedor = document.createElement('div');
             el.append(contenedor);
             scope.map = L.map(contenedor).setView([attrs.latitud, attrs.longitud], attrs.zoom);
             L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map);
         },
         controller: ['$scope', '$filter', function($scope, $filter) {
             $scope.markers = [];
             $scope.$watch('marcadores', function() {
                 for(var i in $scope.markers) {
                     $scope.map.removeLayer($scope.markers[i]);
                 }
                 $scope.markers = [];
                 angular.forEach($scope.marcadores, function(marcador) {
                     var observacion =
                         'Vendedor: ' + marcador.notaPedido.idVendedor + ' - ' +
                         (
                             marcador.notaPedido.vendedor ?
                             marcador.notaPedido.vendedor.NomVen :
                             ''
                         ) + '<br/>';
                     observacion += 'Fecha: ' +
                         $filter('date')(marcador.fecha.slice(0,10), 'dd/MM/yyyy') + ' ' +
                         marcador.fecha.slice(11,19) + '<br/>';
                     observacion += 'Remito Nº: ' + $filter('comprobante')([
                         marcador.notaPedido.remito.sucursal,
                         marcador.notaPedido.remito.numeroRemito
                     ]) + '<br/>';
                     observacion += 'Cliente: ' +
                         marcador.notaPedido.cliente.NOM + '<br/>';
                     // if($scope.parametros.individual) {
                     observacion +=
                         'Total: ' + $filter('currency')(marcador.notaPedido.remito.total, '$');
                     observacion = 'Orden: ' + marcador.orden + '<br/>' + observacion;
                     if(marcador.distancia) {
                         observacion += '<br/>Distancia a casa central: ' +
                             marcador.distancia + 'km';
                     }
-                    // }else {
-                    //     observacion += 'Cantidad de remitos: ' +
-                    //         marcador.cantidad + '<br/>';
-                    //     observacion += 'Total Vendido: ' +
-                    //         $filter('currency')(marcador.total, '$');
-                    // }
                     observacion += '<br/>';
                     observacion += '<i class="fa fa-map-marker fa-3x" aria-hidden="true"'+
                         'class="form-control" ondragend="dropEnd()" ondragstart=\'drag(event, '+
                         JSON.stringify(marcador)+')\' draggable="true"></i>(Arrastrar icono)';
                     var icon;
                     if(marcador.notaPedido.remito.idUsuarioProceso) {
                         //Asignado AZUL
                         icon = new L.Icon({
                             iconUrl: 'img/marker-icon-2x-blue.png',
                             shadowUrl: 'img/marker-shadow.png',
                             iconSize: [25, 41],
                             iconAnchor: [12, 41],
                             popupAnchor: [1, -34],
                             shadowSize: [41, 41]
                         });
                     }else {
                         //Sin asignar ROJO
                         icon = new L.Icon({
                             iconUrl: 'img/marker-icon-2x-red.png',
                             shadowUrl: 'img/marker-shadow.png',
                             iconSize: [25, 41],
                             iconAnchor: [12, 41],
                             popupAnchor: [1, -34],
                             shadowSize: [41, 41]
                             });
                     }
                     $scope.markers.push(
                         L.marker([marcador.latitud, marcador.longitud], {icon: icon})
                         .addTo($scope.map)
                         .bindPopup(observacion)
                     );
                     $scope.markers[0].openPopup();
                 });
             });
         }],
         scope: {
             latitud: '=',
             longitud: '=',
             zoom: '=',
             marcadores: '=',
             parametros: '='
         }
     };
 });

src/views/foca-detalle-vehiculo.html

Diff comments View file @ 5fa8100

 <div class="modal-header">
     <h4>Detalle de carga</h4>
     Vehículo <strong ng-bind="vehiculo.tractor"></strong>
     Transportista <strong ng-bind="vehiculo.transportista.NOM"></strong>
     <br>
-    Remito Nº
+    <div ng-show="idRemito !== -1">
-    <strong ng-bind="[remito.sucursal, remito.numeroRemito] | comprobante"></strong>
+        <span>Remito Nº</span>
-    , Cliente
+        <strong ng-bind="[remito.sucursal, remito.numeroRemito] | comprobante"></strong>
-    <strong ng-bind="remito.nombreCliente"></strong>
+        <span>, Cliente</span>
-    , Domicilio
+        <strong ng-bind="remito.nombreCliente"></strong>
-    <strong ng-bind="remito.domicilioStamp"></strong>
+        <span>, Domicilio</span>
+        <strong ng-bind="remito.domicilioStamp"></strong>
+    </div>
 </div>
 <div class="modal-body">
     <div>
-        <table class="table table-sm">
+        <table class="table table-sm" ng-show="idRemito !== -1">
             <thead>
                 <tr>
                     <th></th>
                     <th>Articulo</th>
                     <th>Total</th>
                     <th>Cargado</th>
                     <th>Pendiente</th>
                 </tr>
             </thead>
             <tbody>
                 <tr ng-repeat="(key, articulo) in articulos">
                     <td><input
                         type="radio"
                         name="articuloRadio"
                         id="{{articulo.id}}"
                         ng-checked="articulo.checked"
                         ng-disabled="articulo.cargado"
                         ng-click="cambioArticulo(articulo)"
                     ></td>
                     <td ng-bind="articulo.descripcion"></td>
                     <td ng-bind="articulo.cantidad"></td>
                     <td ng-bind="articulo.cantidadCargada || 0"></td>
                     <td ng-bind="articulo.cantidad - articulo.cantidadCargada"></td>
                 </tr>
             </tbody>
         </table>
         <table class="table table-sm">
             <thead>
                 <tr>
                     <th>Cisterna</th>
                     <th>Cantidad asignada</th>
                     <th>Estado</th>
                     <th>Articulo cargado</th>
                 </tr>
             </thead>
             <tbody>
                 <tr ng-repeat="(key, cisterna) in vehiculo.cisternas">
                     <td ng-bind="cisterna.codigo"></td>
                     <td><input
                             class="form-control"
                             foca-tipo-input
                             foca-teclado
                             placeholder="A cargar..."
                             ng-model="aCargar[key]"
                             ng-disabled="(articuloSeleccionado.idArticulo !== cisterna.cisternaCarga.idProducto &&
                                 cisterna.cisternaCarga.idProducto) || !tieneArticulosPendientes()
                                 || articuloSeleccionado.cantidad > cisterna.disponible"
                             ng-change="actualizarArticulo()"
                         >
                     </td>
                     <td colspan="2"><div class="progress foca-alto-progress pl-0 pr-0 mt-1">
                             <strong
                                 class="mt-2 col-3 text-center position-absolute"
                                 ng-bind="(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>
                     </td>
                     <td ng-bind="cisterna.cisternaCarga.articulo.DetArt || 'Sin articulo'"></td>
                 </tr>
             </tbody>
         </table>
         <div class="col-12 aling-end">
             <button
                 class="form-control btn btn-success"
                 ladda="cargando"
                 data-spinner-color="#FF0000"
                 type="button"
                 ng-disabled="!articuloSeleccionado || articuloSeleccionado.cantidad -
                     articuloSeleccionado.cantidadCargada !== 0 || !tieneArticulosPendientes()"
                 ng-class="{'btn-light': !articuloSeleccionado || articuloSeleccionado.cantidad -
                 articuloSeleccionado.cantidadCargada !== 0 || !tieneArticulosPendientes()}"
                 ng-click="cargarACisternas(vehiculo)">
                 Aplicar distribución de cargas
             </button>
         </div>
     </div>
 </div>
 <div class="modal-footer py-1">
     <button
         class="btn btn-sm btn-secondary"
         ladda="cargando"
         type="button"
         ng-click="cancelar()">Cancelar</button>
     <button
         class="btn btn-sm btn-primary"
         ladda="cargando"
         type="button"
         ng-click="aceptar()"
         ng-disabled="tieneArticulosPendientes()">Cargar</button>
 </div>

src/views/foca-logistica-pedido-ruta.html

Diff comments View file @ 5fa8100

 <div class="foca-logistica-pedido-ruta" id="scope">
     <div class="row">
         <foca-cabecera-facturador
         titulo="titulo"
         fecha="now"
         class="mb-0 col-lg-12"
         ></foca-cabecera-facturador>
     </div>
     <div class="row px-5 py-2 botonera-secundaria">
         <div class="col-12">
             <foca-botonera-facturador botones="botonera" extra="5" class="row"></foca-botonera-facturador>
         </div>
     </div>
     <div class="row">
         <div class="offset-1 col-9">
             <foca-logistica
                 latitud="-32.89214159952345"
                 longitud="-68.84572999101856"
                 zoom="14"
                 marcadores="marcadores"
                 parametros= "datosBuscados"
             />
         </div>
         <div class="col-2 pl-0">
             <input
                 type="date"
                 ng-model="now"
                 class="btn col-12 my-1"
                 foca-focus="true"
                 ng-blur="fecha()"
                 hasta-hoy
             />
             <button
                 type="button"
                 ng-class="{'active': idVendedor == 0}"
                 class="btn col-12 my-1"
                 ng-click="general()"
             >General</button>
             <button
                 type="button"
                 ng-class="{'active': idVendedor != 0}"
                 class="btn col-12 my-1"
                 ng-click="individual()"
             >Individual</button>
             <div class="form-group" ng-show="idVendedor == -1">
                 <input
                     type="text"
                     placeholder="Vendedor"
                     class="form-control"
                     ng-model="idVendedorInput"
                     ng-keypress="search($event.keyCode)"
                     foca-focus="idVendedor == -1"
                 >
             </div>
+            <div>
+                <img src="img/marker-icon-2x-blue.png">
+                <strong>Asignado</strong>
+                <img src="img/marker-icon-2x-red.png">
+                <strong>Sin asignar</strong>
+            </div>
         </div>
        <div class="row">
             <div
                 class="container col-auto"
                 ng-repeat="vehiculo in vehiculos"
                 ng-click="mostrarDetalleVehiculo(vehiculo)"
             >
                 <div>
                     <div class="col-md-3 col-sm-6">
                         <div class="progress-circle" ng-class="{'arrastrando': arrastrando}">
                             <span class="progress-left">
                                 <span class="progress-bar"></span>
                             </span>
                             <span class="progress-right">
                                 <span class="progress-bar"></span>
                             </span>
                             <div class="progress-value">{{vehiculo.codigo}}</div>
                         </div>
                     </div>
-                    <div class="row px-4">
+                    <div class="row col-5">
-                        <div class="text-left col-6 ml-1 position-absolute">
+                        <div class="col-4">
                             <img
                                 src="img/hojaRutaVolante.png"
-                                width="34%"
+                                width="80%%"
                                 uib-tooltip="Confeccionar hoja de ruta"
                                 ng-click="hacerHojaRuta(vehiculo)">
                         </div>
-                        <div class="text-right ml-5 col-6 position-absolute">
+                        <div class="col-4">
+                            <i
+                                class="fa fa-eye fa-2x"
+                                uib-tooltip="Ver cisternas"
+                                ng-click="cargar(vehiculo.id, -1)">
+                            </i>
+                        </div>
+                        <div class="col-4">
                             <i
                                 class="fa fa-trash fa-2x"
                                 uib-tooltip="Eliminar vehiculo"
                                 ng-click="quitarVehiculo(vehiculo)"></i>
                         </div>
                     </div>
                     <div
-                        class="col-12 mt-5 border border-dark text-center"
+                        class="col-4 ml-1 border border-dark text-center"
                         ng-show="arrastrando"
                         id="{{vehiculo.id}}"
                         ondrop="drop(event)"
                         ondragover="allowDrop(event)"
                     >Soltar acá</div>
                 </div>
             </div>
         </div>
     </div>
 </div>