Luigi / foca-modal-detalles

Download as
Browse Code »

Commit 628ec131b5c102c28e67a478b01d7fd50b4aba45

Authored by Luigi
1 parent cc1b095a10
Exists in master

Subir fotos

Showing 2 changed files with 5 additions and 5 deletions   Show diff stats
src/js/controller.js
Diff comments   View file @ 628ec13
1 angular.module('focaModalDetalles') 1 angular.module('focaModalDetalles')
2 .controller('focaModalDetallesController', 2 .controller('focaModalDetallesController',
3 [ 3 [
4 '$scope', 4 '$scope',
5 '$uibModalInstance', 5 '$uibModalInstance',
6 'focaModalService', 6 'focaModalService',
7 'APP', 7 'APP',
8 '$timeout', 8 '$timeout',
9 'parametros', 9 'parametros',
10 function($scope, $uibModalInstance, focaModalService, APP, $timeout, parametros) { 10 function($scope, $uibModalInstance, focaModalService, APP, $timeout, parametros) {
11 11
12 $scope.mobile = APP === 'cobranza'; 12 $scope.mobile = APP === 'cobranza';
13 $scope.detalles = parametros; 13 $scope.detalles = parametros;
14 $scope.newFiles = {}; 14 $scope.files = [];
15 15
16 $scope.$watch('newFiles.files', function() { 16 $scope.$watch('files', function() {
17 $scope.newFiles.files.forEach(function(file) { 17 $scope.files.forEach(function(file) {
18 $scope.detalles.files.push(file); 18 $scope.detalles.files.push(file);
19 }); 19 });
20 validarExtSize(); 20 validarExtSize();
21 }); 21 }, true);
22 22
23 $scope.eliminarImg = function(key) { 23 $scope.eliminarImg = function(key) {
24 $scope.detalles.files.splice(key, 1); 24 $scope.detalles.files.splice(key, 1);
25 }; 25 };
26 26
27 $scope.cancel = function() { 27 $scope.cancel = function() {
28 $uibModalInstance.dismiss('cancel'); 28 $uibModalInstance.dismiss('cancel');
29 }; 29 };
30 30
31 $scope.aceptar = function() { 31 $scope.aceptar = function() {
32 $scope.detalles.importe = parseFloat($scope.detalles.importe); 32 $scope.detalles.importe = parseFloat($scope.detalles.importe);
33 $uibModalInstance.close($scope.detalles); 33 $uibModalInstance.close($scope.detalles);
34 }; 34 };
35 35
36 $scope.cambioFoto = function(data) { 36 $scope.cambioFoto = function(data) {
37 $scope.detalles.files.push(data.files); 37 $scope.detalles.files.push(data.files);
38 }; 38 };
39 39
40 $scope.seleccionarFoto = function() { 40 $scope.seleccionarFoto = function() {
41 var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM; 41 var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
42 var options = setOptions(srcType); 42 var options = setOptions(srcType);
43 navigator.camera.getPicture(cameraSuccess, cameraError, options); 43 navigator.camera.getPicture(cameraSuccess, cameraError, options);
44 }; 44 };
45 45
46 $scope.tomarFoto = function() { 46 $scope.tomarFoto = function() {
47 navigator.camera.getPicture(cameraSuccess, cameraError, 47 navigator.camera.getPicture(cameraSuccess, cameraError,
48 { 48 {
49 destinationType: Camera.DestinationType.DATA_URL, 49 destinationType: Camera.DestinationType.DATA_URL,
50 quality: 100 50 quality: 100
51 }); 51 });
52 }; 52 };
53 53
54 function cameraSuccess(imageBase64) { 54 function cameraSuccess(imageBase64) {
55 55
56 var fecha = new Date(); 56 var fecha = new Date();
57 var size = (imageBase64.length * (3/4)); 57 var size = (imageBase64.length * (3/4));
58 58
59 var imagen = { 59 var imagen = {
60 name: 'imagen_' + fecha.getTime() + '.jpg', 60 name: 'imagen_' + fecha.getTime() + '.jpg',
61 size: size, 61 size: size,
62 base64: imageBase64, 62 base64: imageBase64,
63 }; 63 };
64 $timeout(function() { 64 $timeout(function() {
65 $scope.detalles.files.push(imagen); 65 $scope.detalles.files.push(imagen);
66 }); 66 });
67 } 67 }
68 function cameraError(err) { 68 function cameraError(err) {
69 console.log(err); 69 console.log(err);
70 } 70 }
71 function setOptions(srcType) { 71 function setOptions(srcType) {
72 var options = { 72 var options = {
73 // Some common settings are 20, 50, and 100 73 // Some common settings are 20, 50, and 100
74 quality: 100, 74 quality: 100,
75 destinationType: Camera.DestinationType.DATA_URL, 75 destinationType: Camera.DestinationType.DATA_URL,
76 sourceType: srcType, 76 sourceType: srcType,
77 encodingType: Camera.EncodingType.JPEG, 77 encodingType: Camera.EncodingType.JPEG,
78 mediaType: Camera.MediaType.PICTURE, 78 mediaType: Camera.MediaType.PICTURE,
79 allowEdit: true, 79 allowEdit: true,
80 correctOrientation: true 80 correctOrientation: true
81 }; 81 };
82 return options; 82 return options;
83 } 83 }
84 function validarExtSize() { 84 function validarExtSize() {
85 var totalSize = 0; 85 var totalSize = 0;
86 var invalidExt = false; 86 var invalidExt = false;
87 $scope.detalles.files.forEach(function(file) { 87 $scope.detalles.files.forEach(function(file) {
88 //CONVIERTO BYTES A MB 88 //CONVIERTO BYTES A MB
89 totalSize += file.size / 1000000; 89 totalSize += file.size / 1000000;
90 var fileExt = file.name.split('.').pop(); 90 var fileExt = file.name.split('.').pop();
91 91
92 if(fileExt !== 'jpg' && fileExt !== 'png') { 92 if(fileExt !== 'jpg' && fileExt !== 'png') {
93 invalidExt = true; 93 invalidExt = true;
94 } 94 }
95 }); 95 });
96 96
97 if (totalSize > 150) { 97 if (totalSize > 150) {
98 focaModalService.alert('El/los archivo/s exceden la capacidad máxima'); 98 focaModalService.alert('El/los archivo/s exceden la capacidad máxima');
99 $scope.detalles.files = []; 99 $scope.detalles.files = [];
100 } else if (invalidExt) { 100 } else if (invalidExt) {
101 focaModalService.alert('Ha ingresado un archivo con extensión inválida'); 101 focaModalService.alert('Ha ingresado un archivo con extensión inválida');
102 $scope.detalles.files = []; 102 $scope.detalles.files = [];
103 } 103 }
104 } 104 }
105 } 105 }
106 ] 106 ]
107 ); 107 );
108 108
src/views/modal-detalles.html
Diff comments   View file @ 628ec13
1 <div class="modal-header"> 1 <div class="modal-header">
2 <h3 class="modal-title">Ingrese detalles</h3> 2 <h3 class="modal-title">Ingrese detalles</h3>
3 </div> 3 </div>
4 <div class="modal-body" id="modal-body"> 4 <div class="modal-body" id="modal-body">
5 <form name="formObservaciones"> 5 <form name="formObservaciones">
6 <div class="row"> 6 <div class="row">
7 <div class="col"><label class="form-control-sm p-0">Observaciones:</label></div> 7 <div class="col"><label class="form-control-sm p-0">Observaciones:</label></div>
8 <div class="col-10"> 8 <div class="col-10">
9 <textarea 9 <textarea
10 teclado-virtual 10 teclado-virtual
11 rows="5" 11 rows="5"
12 ng-model="detalles.observacion" 12 ng-model="detalles.observacion"
13 class="form-control form-control-sm" 13 class="form-control form-control-sm"
14 foca-focus="focused == 9" 14 foca-focus="focused == 9"
15 ng-focus="focused = 9" 15 ng-focus="focused = 9"
16 ng-required="true"> 16 ng-required="true">
17 </textarea> 17 </textarea>
18 </div> 18 </div>
19 </div> 19 </div>
20 <div class="row my-3"> 20 <div class="row my-3">
21 <div class="col-12 col-md-5"> 21 <div class="col-12 col-md-5">
22 <div class="row"> 22 <div class="row">
23 <div class="col"> 23 <div class="col">
24 <label class="form-control-sm p-0">Monto cubierto:</label> 24 <label class="form-control-sm p-0">Monto cubierto:</label>
25 </div> 25 </div>
26 <div class="col-6 col-md-7 input-group input-group-sm mb-3"> 26 <div class="col-6 col-md-7 input-group input-group-sm mb-3">
27 <div class="input-group-prepend"> 27 <div class="input-group-prepend">
28 <span class="input-group-text" id="size">$</span> 28 <span class="input-group-text" id="size">$</span>
29 </div> 29 </div>
30 <input 30 <input
31 foca-tipo-input 31 foca-tipo-input
32 teclado-virtual 32 teclado-virtual
33 class="form-control " 33 class="form-control "
34 placeholder="Importe" 34 placeholder="Importe"
35 ng-model="detalles.importe" 35 ng-model="detalles.importe"
36 ng-keypress="next($event.keyCode)" 36 ng-keypress="next($event.keyCode)"
37 ng-required="true" 37 ng-required="true"
38 foca-focus="focused == 6" 38 foca-focus="focused == 6"
39 ng-focus="focused = 6" 39 ng-focus="focused = 6"
40 aria-describedby="size"/> 40 aria-describedby="size"/>
41 </div> 41 </div>
42 </div> 42 </div>
43 </div> 43 </div>
44 <div class="col-12 col-md-7"> 44 <div class="col-12 col-md-7">
45 <div class="row"> 45 <div class="row">
46 <!-- Botones PC --> 46 <!-- Botones PC -->
47 <div class="col-md-5 col-12 text-right"> 47 <div class="col-md-5 col-12 text-right">
48 <label class=" btn btn-outline-debo" ng-if="!mobile"> 48 <label class=" btn btn-outline-debo" ng-if="!mobile">
49 <input 49 <input
50 type="file" 50 type="file"
51 ng-file-model="newFiles.files" 51 ng-file-model="$parent.files"
52 multiple 52 multiple
53 accept=".jpg,.png"> 53 accept=".jpg,.png">
54 <small>Elegir Archivos </small> 54 <small>Elegir Archivos </small>
55 </label> 55 </label>
56 </div> 56 </div>
57 <div class="col-md-7 col-12 mt-1" ng-if=' 1 == detalles.files.length '> 57 <div class="col-md-7 col-12 mt-1" ng-if=' 1 == detalles.files.length '>
58 <span class="text-left" ng-repeat="(key, file) in detalles.files">{{file.name | limitTo: 15}}</span> 58 <span class="text-left" ng-repeat="(key, file) in detalles.files">{{file.name | limitTo: 15}}</span>
59 </div> 59 </div>
60 <div class="col-md-7 col-12 align-items-center" ng-if="detalles.files.length > 1"> 60 <div class="col-md-7 col-12 align-items-center" ng-if="detalles.files.length > 1">
61 <small class="text-left ">{{detalles.files.length}} Archivos </small> 61 <small class="text-left ">{{detalles.files.length}} Archivos </small>
62 </div> 62 </div>
63 <div class="col text-center"> 63 <div class="col text-center">
64 <small class="text-muted"> Solo .jpg y .png - Tamaño máximo 150mb</small> 64 <small class="text-muted"> Solo .jpg y .png - Tamaño máximo 150mb</small>
65 </div> 65 </div>
66 <!-- Botones MOBILE --> 66 <!-- Botones MOBILE -->
67 <div class="col-12 mb-2 col-md-6" ng-if="mobile"> 67 <div class="col-12 mb-2 col-md-6" ng-if="mobile">
68 <button 68 <button
69 type="button" 69 type="button"
70 ng-if="mobile" 70 ng-if="mobile"
71 class="form-control form-control-sm btn-outline-debo" 71 class="form-control form-control-sm btn-outline-debo"
72 ng-click="seleccionarFoto()"> 72 ng-click="seleccionarFoto()">
73 Seleccione imagen 73 Seleccione imagen
74 </button> 74 </button>
75 </div> 75 </div>
76 <div class="col-12 mb-2 col-md-6" ng-if="mobile"> 76 <div class="col-12 mb-2 col-md-6" ng-if="mobile">
77 <button 77 <button
78 type="button" 78 type="button"
79 ng-if="mobile" 79 ng-if="mobile"
80 class="form-control form-control-sm" 80 class="form-control form-control-sm"
81 ng-click="tomarFoto()"> 81 ng-click="tomarFoto()">
82 Tome imagen 82 Tome imagen
83 </button> 83 </button>
84 </div> 84 </div>
85 <div class="col-12" ng-if="mobile"> 85 <div class="col-12" ng-if="mobile">
86 <small class="text-muted">Solo .jpg y .png - Tamaño máximo 150mb</small> 86 <small class="text-muted">Solo .jpg y .png - Tamaño máximo 150mb</small>
87 </div> 87 </div>
88 </div> 88 </div>
89 </div> 89 </div>
90 </div> 90 </div>
91 </form> 91 </form>
92 <div class="row" ng-if="!mobile"> 92 <div class="row" ng-if="!mobile">
93 <div class="col-md-3" ng-repeat="(key, file) in detalles.files"> 93 <div class="col-md-3" ng-repeat="(key, file) in detalles.files">
94 <img ng-src="{{file.url}}" alt="" class="col-md-12 p-0"> 94 <img ng-src="{{file.url}}" alt="" class="col-md-12 p-0">
95 <button 95 <button
96 type="button" 96 type="button"
97 class="btn btn-delete-image btn-danger rounded-circle position-absolute p-0" 97 class="btn btn-delete-image btn-danger rounded-circle position-absolute p-0"
98 title="Eliminar" 98 title="Eliminar"
99 ng-click="eliminarImg(key)"> 99 ng-click="eliminarImg(key)">
100 <i class="fa fa-times" aria-hidden="true"></i> 100 <i class="fa fa-times" aria-hidden="true"></i>
101 </button> 101 </button>
102 </div> 102 </div>
103 </div> 103 </div>
104 <div class="row" ng-if="mobile"> 104 <div class="row" ng-if="mobile">
105 <div class="col-12 d-flex justify-content-between" ng-repeat="(key, file) in detalles.files"> 105 <div class="col-12 d-flex justify-content-between" ng-repeat="(key, file) in detalles.files">
106 <strong ng-bind="file.name"></strong> 106 <strong ng-bind="file.name"></strong>
107 <button 107 <button
108 type="button" 108 type="button"
109 class="btn p-0" 109 class="btn p-0"
110 title="Eliminar" 110 title="Eliminar"
111 ng-click="eliminarImg(key)"> 111 ng-click="eliminarImg(key)">
112 <i class="fa fa-times" aria-hidden="true"></i> 112 <i class="fa fa-times" aria-hidden="true"></i>
113 </button> 113 </button>
114 </div> 114 </div>
115 </div> 115 </div>
116 </div> 116 </div>
117 <div class="modal-footer"> 117 <div class="modal-footer">
118 <button 118 <button
119 class="btn btn-secondary" 119 class="btn btn-secondary"
120 type="button" 120 type="button"
121 ng-click="cancel()" 121 ng-click="cancel()"
122 >Cancelar</button> 122 >Cancelar</button>
123 <button 123 <button
124 class="btn btn-primary" 124 class="btn btn-primary"
125 type="button" 125 type="button"
126 ng-click="aceptar()" 126 ng-click="aceptar()"
127 ng-disabled="!formObservaciones.$valid" 127 ng-disabled="!formObservaciones.$valid"
128 >Aceptar</button> 128 >Aceptar</button>
129 </div> 129 </div>
130 130