Luigi / foca-logistica-pedido-ruta

Browse Code »

Commit ba5693e55950309bc6a804c828c80df24f5e4630

Authored by Eric Fernandez 2018-12-21 17:54:08 -0300

1 parent 51c4e039ec

Exists in master

progreso logistica

Showing 4 changed files with 117 additions and 19 deletions Show diff stats

src/js/controllerDetalleVehiculo.js

Diff comments View file @ ba5693e

1	angular.module('focaLogisticaPedidoRuta')	1	angular.module('focaLogisticaPedidoRuta')
2	.controller('focaDetalleVehiculo', ['$scope', '$uibModalInstance', 'vehiculo', 'marcador',	2	.controller('focaDetalleVehiculo',
		3	['$scope',
		4	'$uibModalInstance',
		5	'vehiculo',
		6	'marcador',
3	function($scope, $uibModalInstance, vehiculo, marcador) {	7	function($scope, $uibModalInstance, vehiculo, marcador) {
4	$scope.articulos = marcador.notaPedido.articulosNotaPedido;	8	$scope.articulos = marcador.notaPedido.articulosNotaPedido;
		9	$scope.articuloSeleccionado = {};
5	$scope.vehiculo = vehiculo;	10	$scope.vehiculo = vehiculo;
6	$scope.aceptar = function() {	11	$scope.aceptar = function() {
7	$uibModalInstance.close();	12	$uibModalInstance.close();
8	};	13	};
		14
		15	$scope.cargarACisterna = function(cisterna) {
		16	if(!$scope.articuloSeleccionado.id) {
		17	//TODO: usar modal de foca
		18	alert('Debe seleccionar un articulo');
		19	return;
		20	}
		21	if(cisterna.cisternaCarga.cantidad) {
		22	cisterna.cisternaCarga.cantidad += parseFloat(cisterna.aCargar);
		23	}else {
		24	cisterna.cisternaCarga.cantidad = parseFloat(cisterna.aCargar);
		25	cisterna.cisternaCarga.idProducto = $scope.articuloSeleccionado.id;
		26	}
		27	cisterna.disponible = cisterna.capacidad - cisterna.cisternaCarga.cantidad;
		28	cisterna.aCargar = '';
		29	};
		30	$scope.calcularPorcentaje = function(cisterna) {
		31	if(!cisterna.cisternaCarga.cantidad) {
		32	cisterna.cisternaCarga.cantidad = 0;
		33	}
		34	var porcentaje = (cisterna.cisternaCarga.cantidad * 100 /
		35	cisterna.capacidad) + '%';
		36	document.getElementById(cisterna.id).style.width = porcentaje;
		37	};
		38	$scope.cambioArticulo = function(articulo) {
		39	$scope.articuloSeleccionado = articulo;
		40	};
9	}]);	41	}]);
10		42

src/js/osm-directive.js

Diff comments View file @ ba5693e

 angular.module('focaLogisticaPedidoRuta').directive('foca', 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', function($scope) {
+        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 = '<i class="fa fa-map-marker fa-5x" aria-hidden="true"'+
+                    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 += 'Nº: ' + $filter('comprobante')([
+                        marcador.notaPedido.sucursal,
+                        marcador.notaPedido.numeroNotaPedido
+                    ]) + '<br/>';
+                    observacion += 'Cliente: ' +
+                        marcador.notaPedido.cliente.NOM + '<br/>';
+                    if ($scope.parametros.individual) {
+                        observacion +=
+                            'Total: ' + $filter('currency')(marcador.notaPedido.total, '$');
+                        observacion = 'Orden: ' + marcador.orden + '<br/>' + observacion;
+                        if (marcador.distancia) {
+                            observacion += '<br/>Distancia a casa central: ' +
+                                marcador.distancia + 'km';
+                        }
+                    } else {
+                        observacion += 'Cantidad de nota de pedido: ' +
+                            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>';
                     $scope.markers.push(
                         L.marker([marcador.latitud, marcador.longitud]).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 @ ba5693e

 <div class="modal-header">
     <h4>Detalle de carga</h4>
+    <h3>-EN DESARROLLO</h3>
 </div>
 <div class="modal-body">
-    <div class="row">
+    <div>
         <div class="col-12" ng-repeat="articulo in articulos">
             <input
-                type="checkbox"
+                type="radio"
-                ng-model="articulo.chequed"
+                name="articuloRadio"
+                id="{{articulo.id}}"
+                ng-click="cambioArticulo(articulo)"
             >
             <span>Articulo: {{articulo.descripcion}},</span>
-            <span>Cantidad: {{articulo.cantidad}}</span>
+            <span>Cantidad Cargada: {{articulo.cantidad}}</span>
+            <span>Cantidad a Cargar: </span>
         </div>
         <strong class="col-12" ng-bind="vehiculo.tractor"></strong>
         <strong class="col-12">Cisternas:</strong>
-        <!-- <div class="text-center">
+        <div class="form-group row input-group" ng-repeat="cisterna in vehiculo.cisternas">
-            <div class="progress" ng-repeat="cisterna in vehiculo.cisternas">
+            <div class="col-1 mt-2">
-                <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="height: 30%;">
+                <strong>{{cisterna.codigo}}</strong>
-                    <span class="sr-only">30% Complete</span>
+            </div>
+            <input
+                class="form-control col-2"
+                foca-tipo-input
+                foca-teclado
+                placeholder="A cargar..."
+                ng-model="cisterna.aCargar"
+                ng-disabled="articuloSeleccionado.cantidad > cisterna.disponible"
+            >
+            <div class="input-group-append">
+                <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> -->
+            <div class="col-1 mt-1">
-        <div class="progress col-12" ng-repeat="cisterna in vehiculo.cisternas">
+                <i class="fa fa-info" data-toggle="tooltip" title="asd"></i>
-            <div class="progress-bar" role="progressbar" aria-valuenow="70"
-            aria-valuemin="0" aria-valuemax="100" style="width:70%">
-                <span class="sr-only">70% Complete</span>
             </div>
         </div>
     </div>
 </div>
 <div class="modal-footer py-1">
     <button class="btn btn-sm btn-secondary" type="button" ng-click="aceptar()">Aceptar</button>
 </div>
 <style>
 .progress-bar-vertical {
   width: 20px;
   min-height: 100px;
   display: flex;
   align-items: flex-end;
   margin-right: 20px;
   float: left;
 }
 .progress-bar-vertical .progress-bar {
   width: 100%;
   height: 0;
   -webkit-transition: height 0.6s ease;
   -o-transition: height 0.6s ease;
   transition: height 0.6s ease;
 }
+.foca-alto{

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

Diff comments View file @ ba5693e

 <script>
     function allowDrop(ev) {
         ev.preventDefault();
     }
     function drag(ev, marcador) {
         marcador = JSON.stringify(marcador);
         ev.dataTransfer.setData("marcador", marcador);
         var dom_el = document.getElementById('test');
         var scope = angular.element(dom_el).scope();
         scope.arrastra();
     }
     function drop(ev) {
         ev.preventDefault();
         var data = ev.dataTransfer.getData("marcador");
         var dom_el = document.getElementById(ev.target.id);
         var ng_el = angular.element(dom_el);
         var ng_el_scope = ng_el.scope();
         ng_el_scope.cargar(ev.target.id, data);
         ng_el_scope.$digest();
     }
     function dropEnd() {
         console.log('drop');
         var dom_el = document.getElementById('test');
         var scope = angular.element(dom_el).scope();
         scope.noArrastra();
     }
 </script>
 <div class="foca-logistica-pedido-ruta" id="test">
+    <h3>-EN DESARROLLO</h3>
     <div class="row">
         <div class="offset-1 col-9">
             <foca
                 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': idUsuario == 0}"
                 class="btn col-12 my-1"
                 ng-click="general()"
             >General</button>
             <button
                 type="button"
                 ng-class="{'active': idUsuario != 0}"
                 class="btn col-12 my-1"
                 ng-click="individual()"
                 ng-show="actividad != 'Cobranza'"
             >Individual</button>
             <div class="form-group" ng-show="idUsuario == -1">
                 <input
                     type="text"
                     placeholder="Vendedor"
                     class="form-control"
                     ng-model="idUsuarioInput"
                     ng-keypress="search($event.keyCode)"
                     foca-focus="idUsuario == -1"
                     ng-show="actividad == 'Nota de pedido'"
                 >
                 <input
                     type="text"
                     placeholder="Vehiculo"
                     class="form-control"
                     ng-model="idUsuarioInput"
                     ng-keypress="search($event.keyCode)"
                     foca-focus="idUsuario == -1"
                     ng-show="actividad == 'Entrega de producto'"
                 >
             </div>
             <button
                 type="button"
                 class="btn col-12 my-1 boton-salir"
                 ng-click="salir()"
             >
                 Salir
             </button>
         </div>
         <input
             class="col-auto form-control"
             ng-click="seleccionarVehiculo()"
             placeholder="Seleccionar vehiculo"
             readonly
         />
        <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 blue" 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="col-12 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>
 <style>
 .arrastrando {
     opacity: 0.5;
 }
 .vertical {
   display: inline-block;
   width: 20%;
   height: 40px;
   -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
   transform: rotate(-90deg);
 }
 .progress-circle{
     width: 150px;
     height: 150px;
     line-height: 150px;
     background: none;
     margin: 0 auto;
     box-shadow: none;
     position: relative;
 }
 .progress-circle:after{
     content: "";
     width: 100%;
     height: 100%;
     border-radius: 50%;
     border: 12px solid #fff;
     position: absolute;
     top: 0;
     left: 0;
 }
 .progress-circle > span{
     width: 50%;
     height: 100%;
     overflow: hidden;
     position: absolute;
     top: 0;
     z-index: 1;
 }
 .progress-circle .progress-left{
     left: 0;
 }
 .progress-circle .progress-bar{
     width: 100%;
     height: 100%;
     background: none;
     border-width: 12px;
     border-style: solid;
     position: absolute;
     top: 0;
 }
 .progress-circle .progress-left .progress-bar{
     left: 100%;
     border-top-right-radius: 80px;
     border-bottom-right-radius: 80px;
     border-left: 0;
     -webkit-transform-origin: center left;
     transform-origin: center left;
 }
 .progress-circle .progress-right{
     right: 0;
 }
 .progress-circle .progress-right .progress-bar{
     left: -100%;
     border-top-left-radius: 80px;
     border-bottom-left-radius: 80px;
     border-right: 0;
     -webkit-transform-origin: center right;
     transform-origin: center right;
     animation: loading-1 1.8s linear forwards;
 }
 .progress-circle .progress-value{
     width: 90%;
     height: 90%;
     border-radius: 50%;
     background: #44484b;
     font-size: 24px;
     color: #fff;
     line-height: 135px;
     text-align: center;
     position: absolute;
     top: 5%;
     left: 5%;
 }
 .progress-circle.blue .progress-bar{
     border-color: #049dff;
 }
 .progress-circle.blue .progress-left .progress-bar{
     animation: loading-2 1.5s linear forwards 1.8s;
 }
 .progress-circle.yellow .progress-bar{
     border-color: #fdba04;
 }
 .progress-circle.yellow .progress-left .progress-bar{
     animation: loading-3 1s linear forwards 1.8s;
 }
 .progress-circle.pink .progress-bar{
     border-color: #ed687c;
 }
 .progress-circle.pink .progress-left .progress-bar{
     animation: loading-4 0.4s linear forwards 1.8s;
 }
 .progress-circle.green .progress-bar{
     border-color: #1abc9c;
 }
 .progress-circle.green .progress-left .progress-bar{
     animation: loading-5 1.2s linear forwards 1.8s;
 }
 @keyframes loading-1{
     0%{
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100%{
         -webkit-transform: rotate(180deg);
         transform: rotate(180deg);
     }
 }
 @keyframes loading-2{
     0%{
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100%{
-        -webkit-transform: rotate(144deg);
+        -webkit-transform: rotate(180deg);
-        transform: rotate(144deg);
+        transform: rotate(180deg);
     }
 }
 @keyframes loading-3{
     0%{
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100%{
         -webkit-transform: rotate(90deg);
         transform: rotate(90deg);
     }
 }
 @keyframes loading-4{
     0%{
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100%{
         -webkit-transform: rotate(36deg);
         transform: rotate(36deg);
     }
 }
 @keyframes loading-5{
     0%{
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100%{
         -webkit-transform: rotate(126deg);
         transform: rotate(126deg);
     }
 }
 @media only screen and (max-width: 990px){
     .progress{ margin-bottom: 20px; }
 }
 </style>