Luigi / foca-modal-detalles

Download as
Browse Code »

Commit 961b04a1507fa1541a05c9f676423ecc4b9a5b61

Authored by Luigi
1 parent 68dae49874
Exists in master

Guardar imagenes

Showing 2 changed files with 12 additions and 4 deletions   Show diff stats
src/js/controller.js
Diff comments   View file @ 961b04a
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 = {
15 files: []
16 };
14 17
15 $scope.$watch('detalles.files', function() { 18 $scope.$watch('newFiles.files', function() {
19 $scope.newFiles.files.forEach(function(file) {
20 $scope.detalles.files.push(file);
21 });
16 validarExtSize(); 22 validarExtSize();
17 }); 23 });
18 24
19 $scope.eliminarImg = function(key) { 25 $scope.eliminarImg = function(key) {
20 $scope.detalles.files.splice(key, 1); 26 $scope.detalles.files.splice(key, 1);
21 }; 27 };
22 28
23 $scope.cancel = function() { 29 $scope.cancel = function() {
24 $uibModalInstance.dismiss('cancel'); 30 $uibModalInstance.dismiss('cancel');
25 }; 31 };
26 32
27 $scope.aceptar = function() { 33 $scope.aceptar = function() {
28
29 $scope.detalles.importe = parseFloat($scope.detalles.importe); 34 $scope.detalles.importe = parseFloat($scope.detalles.importe);
30 $uibModalInstance.close($scope.detalles); 35 $uibModalInstance.close($scope.detalles);
31 }; 36 };
32 37
38 $scope.cambioFoto = function(data) {
39 $scope.detalles.files.push(data.files);
40 };
33 $scope.seleccionarFoto = function() { 41 $scope.seleccionarFoto = function() {
34 var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM; 42 var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
35 var options = setOptions(srcType); 43 var options = setOptions(srcType);
36 navigator.camera.getPicture(cameraSuccess, cameraError, options); 44 navigator.camera.getPicture(cameraSuccess, cameraError, options);
37 }; 45 };
38 46
39 $scope.tomarFoto = function() { 47 $scope.tomarFoto = function() {
40 navigator.camera.getPicture(cameraSuccess, cameraError, 48 navigator.camera.getPicture(cameraSuccess, cameraError,
41 { 49 {
42 destinationType: Camera.DestinationType.DATA_URL, 50 destinationType: Camera.DestinationType.DATA_URL,
43 quality: 100 51 quality: 100
44 }); 52 });
45 }; 53 };
46 54
47 function cameraSuccess(imageBase64) { 55 function cameraSuccess(imageBase64) {
48 56
49 var fecha = new Date(); 57 var fecha = new Date();
50 var size = (imageBase64.length * (3/4)); 58 var size = (imageBase64.length * (3/4));
51 59
52 var imagen = { 60 var imagen = {
53 name: 'imagen_' + fecha.getTime() + '.jpg', 61 name: 'imagen_' + fecha.getTime() + '.jpg',
54 size: size, 62 size: size,
55 base64: imageBase64, 63 base64: imageBase64,
56 }; 64 };
57 $timeout(function() { 65 $timeout(function() {
58 $scope.detalles.files.push(imagen); 66 $scope.detalles.files.push(imagen);
59 }); 67 });
60 } 68 }
61 function cameraError(err) { 69 function cameraError(err) {
62 console.log(err); 70 console.log(err);
63 } 71 }
64 function setOptions(srcType) { 72 function setOptions(srcType) {
65 var options = { 73 var options = {
66 // Some common settings are 20, 50, and 100 74 // Some common settings are 20, 50, and 100
67 quality: 100, 75 quality: 100,
68 destinationType: Camera.DestinationType.DATA_URL, 76 destinationType: Camera.DestinationType.DATA_URL,
69 sourceType: srcType, 77 sourceType: srcType,
70 encodingType: Camera.EncodingType.JPEG, 78 encodingType: Camera.EncodingType.JPEG,
71 mediaType: Camera.MediaType.PICTURE, 79 mediaType: Camera.MediaType.PICTURE,
72 allowEdit: true, 80 allowEdit: true,
73 correctOrientation: true 81 correctOrientation: true
74 }; 82 };
75 return options; 83 return options;
76 } 84 }
77 function validarExtSize() { 85 function validarExtSize() {
78 var totalSize = 0; 86 var totalSize = 0;
79 var invalidExt = false; 87 var invalidExt = false;
80 $scope.detalles.files.forEach(function(file) { 88 $scope.detalles.files.forEach(function(file) {
81 //CONVIERTO BYTES A MB 89 //CONVIERTO BYTES A MB
82 totalSize += file.size / 1000000; 90 totalSize += file.size / 1000000;
83 var fileExt = file.name.split('.').pop(); 91 var fileExt = file.name.split('.').pop();
84 92
85 if(fileExt != 'jpg' && fileExt != 'png') { 93 if(fileExt !== 'jpg' && fileExt !== 'png') {
86 invalidExt = true; 94 invalidExt = true;
87 } 95 }
88 }); 96 });
89 97
90 if (totalSize > 150) { 98 if (totalSize > 150) {
91 focaModalService.alert('El/los archivo/s exceden la capacidad máxima'); 99 focaModalService.alert('El/los archivo/s exceden la capacidad máxima');
92 $scope.detalles.files = []; 100 $scope.detalles.files = [];
93 } else if (invalidExt) { 101 } else if (invalidExt) {
94 focaModalService.alert('Ha ingresado un archivo con extensión inválida'); 102 focaModalService.alert('Ha ingresado un archivo con extensión inválida');
95 $scope.detalles.files = []; 103 $scope.detalles.files = [];
96 } 104 }
97 } 105 }
98 } 106 }
99 ] 107 ]
100 ); 108 );
src/views/modal-detalles.html
Diff comments   View file @ 961b04a
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="detalles.files" 51 ng-file-model="newFiles.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