Commit d5dac011fec8bb3ace53fd2f594f12ede5b5589e
1 parent
bad1ea0f4a
Exists in
master
subir fotos mobile
Showing
3 changed files
with
95 additions
and
12 deletions
Show diff stats
package.json
| 1 | { | 1 | { |
| 2 | "name": "foca-modal-detalles", | 2 | "name": "foca-modal-detalles", |
| 3 | "version": "0.0.1", | 3 | "version": "0.0.1", |
| 4 | "description": "Modal de carga de detalles", | 4 | "description": "Modal de carga de detalles", |
| 5 | "main": "index.js", | 5 | "main": "index.js", |
| 6 | "scripts": { | 6 | "scripts": { |
| 7 | "test": "echo \"Error: no test specified\" && exit 1", | 7 | "test": "echo \"Error: no test specified\" && exit 1", |
| 8 | "gulp-pre-commit": "gulp pre-commit", | 8 | "gulp-pre-commit": "gulp pre-commit", |
| 9 | "compile": "gulp uglify", | 9 | "compile": "gulp uglify", |
| 10 | "postinstall": "npm run compile && gulp clean-post-install", | 10 | "postinstall": "npm run compile && gulp clean-post-install", |
| 11 | "install-dev": "npm install -D angular font-awesome pump jquery bootstrap ui-bootstrap4 jshint gulp gulp-uglify gulp-concat gulp-htmlmin gulp-rename gulp-uglify gulp-jshint gulp-replace gulp-connect gulp-clean gulp-angular-templatecache git+http://git.focasoftware.com/npm/foca-directivas.git" | 11 | "install-dev": "npm install -D angular font-awesome pump jquery bootstrap ui-bootstrap4 jshint gulp gulp-uglify gulp-concat gulp-htmlmin gulp-rename gulp-uglify gulp-jshint gulp-replace gulp-connect gulp-clean gulp-angular-templatecache git+http://git.focasoftware.com/npm/foca-directivas.git" |
| 12 | }, | 12 | }, |
| 13 | "pre-commit": [ | 13 | "pre-commit": [ |
| 14 | "gulp-pre-commit" | 14 | "gulp-pre-commit" |
| 15 | ], | 15 | ], |
| 16 | "repository": { | 16 | "repository": { |
| 17 | "type": "git", | 17 | "type": "git", |
| 18 | "url": "http://git.focasoftware.com/npm/foca-modal-detalles.git" | 18 | "url": "http://git.focasoftware.com/npm/foca-modal-detalles.git" |
| 19 | }, | 19 | }, |
| 20 | "author": "Foca Software", | 20 | "author": "Foca Software", |
| 21 | "license": "ISC", | 21 | "license": "ISC", |
| 22 | "devDependencies": { | 22 | "devDependencies": { |
| 23 | "angular": "^1.7.5", | 23 | "angular": "^1.7.7", |
| 24 | "bootstrap": "^4.1.3", | 24 | "bootstrap": "^4.3.1", |
| 25 | "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git", | 25 | "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git", |
| 26 | "font-awesome": "^4.7.0", | 26 | "font-awesome": "^4.7.0", |
| 27 | "gulp": "^3.9.1", | 27 | "gulp": "^3.9.1", |
| 28 | "gulp-angular-templatecache": "^2.2.5", | 28 | "gulp-angular-templatecache": "^2.2.6", |
| 29 | "gulp-clean": "^0.4.0", | 29 | "gulp-clean": "^0.4.0", |
| 30 | "gulp-concat": "^2.6.1", | 30 | "gulp-concat": "^2.6.1", |
| 31 | "gulp-connect": "^5.6.1", | 31 | "gulp-connect": "^5.7.0", |
| 32 | "gulp-htmlmin": "^5.0.1", | 32 | "gulp-htmlmin": "^5.0.1", |
| 33 | "gulp-jshint": "^2.1.0", | 33 | "gulp-jshint": "^2.1.0", |
| 34 | "gulp-rename": "^1.4.0", | 34 | "gulp-rename": "^1.4.0", |
| 35 | "gulp-replace": "^1.0.0", | 35 | "gulp-replace": "^1.0.0", |
| 36 | "gulp-uglify": "^3.0.1", | 36 | "gulp-uglify": "^3.0.1", |
| 37 | "jquery": "^3.3.1", | 37 | "jquery": "^3.3.1", |
| 38 | "jshint": "^2.9.6", | 38 | "jshint": "^2.10.1", |
| 39 | "pump": "^3.0.0", | 39 | "pump": "^3.0.0", |
| 40 | "ui-bootstrap4": "^3.0.5" | 40 | "ui-bootstrap4": "^3.0.6" |
| 41 | } | 41 | } |
| 42 | } | 42 | } |
| 43 | 43 |
src/js/controller.js
| 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', | ||
| 8 | '$timeout', | ||
| 7 | 'sugerido', | 9 | 'sugerido', |
| 8 | function($scope, $uibModalInstance, focaModalService, sugerido) { | 10 | function($scope, $uibModalInstance, focaModalService, APP, $timeout, sugerido) { |
| 11 | $scope.mobile = APP === 'cobranza'; | ||
| 9 | $scope.files = []; | 12 | $scope.files = []; |
| 10 | $scope.importe = Math.abs(sugerido); | 13 | $scope.importe = Math.abs(sugerido); |
| 11 | 14 | ||
| 12 | $scope.$watch('files', function() { | 15 | $scope.$watch('files', function() { |
| 13 | validarExtSize(); | 16 | validarExtSize(); |
| 14 | }); | 17 | }); |
| 15 | 18 | ||
| 16 | $scope.eliminarImg = function(key) { | 19 | $scope.eliminarImg = function(key) { |
| 17 | $scope.files.splice(key, 1); | 20 | $scope.files.splice(key, 1); |
| 18 | }; | 21 | }; |
| 19 | 22 | ||
| 20 | $scope.cancel = function() { | 23 | $scope.cancel = function() { |
| 21 | $uibModalInstance.dismiss('cancel'); | 24 | $uibModalInstance.dismiss('cancel'); |
| 22 | }; | 25 | }; |
| 26 | |||
| 23 | $scope.aceptar = function() { | 27 | $scope.aceptar = function() { |
| 28 | console.log($scope.files); | ||
| 24 | $uibModalInstance.close({ | 29 | $uibModalInstance.close({ |
| 25 | observacion: $scope.observaciones, | 30 | observacion: $scope.observaciones, |
| 26 | monto: $scope.importe, | 31 | monto: $scope.importe, |
| 27 | imgs: $scope.files | 32 | imgs: $scope.files |
| 28 | }); | 33 | }); |
| 29 | }; | 34 | }; |
| 30 | 35 | ||
| 36 | $scope.seleccionarFoto = function() { | ||
| 37 | var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM; | ||
| 38 | var options = setOptions(srcType); | ||
| 39 | navigator.camera.getPicture(cameraSuccess, cameraError, options); | ||
| 40 | }; | ||
| 41 | |||
| 42 | $scope.tomarFoto = function() { | ||
| 43 | navigator.camera.getPicture(cameraSuccess, cameraError, | ||
| 44 | { | ||
| 45 | destinationType: Camera.DestinationType.DATA_URL, | ||
| 46 | quality: 100 | ||
| 47 | }); | ||
| 48 | }; | ||
| 49 | |||
| 50 | function cameraSuccess(imageBase64) { | ||
| 51 | |||
| 52 | var fecha = new Date(); | ||
| 53 | var size = (imageBase64.length * (3/4)); | ||
| 54 | |||
| 55 | var imagen = { | ||
| 56 | name: 'imagen_' + fecha.getTime() + '.jpg', | ||
| 57 | size: size, | ||
| 58 | base64: imageBase64, | ||
| 59 | }; | ||
| 60 | $timeout(function() { | ||
| 61 | $scope.files.push(imagen); | ||
| 62 | }); | ||
| 63 | } | ||
| 64 | function cameraError(err) { | ||
| 65 | console.log(err); | ||
| 66 | } | ||
| 67 | function setOptions(srcType) { | ||
| 68 | var options = { | ||
| 69 | // Some common settings are 20, 50, and 100 | ||
| 70 | quality: 100, | ||
| 71 | destinationType: Camera.DestinationType.DATA_URL, | ||
| 72 | sourceType: srcType, | ||
| 73 | |||
| 74 | encodingType: Camera.EncodingType.JPEG, | ||
| 75 | mediaType: Camera.MediaType.PICTURE, | ||
| 76 | allowEdit: true, | ||
| 77 | correctOrientation: true | ||
| 78 | } | ||
| 79 | return options; | ||
| 80 | } | ||
| 81 | |||
| 31 | function validarExtSize() { | 82 | function validarExtSize() { |
| 32 | var totalSize = 0; | 83 | var totalSize = 0; |
| 33 | var invalidExt = false; | 84 | var invalidExt = false; |
| 34 | $scope.files.forEach(function(file) { | 85 | $scope.files.forEach(function(file) { |
| 35 | //CONVIERTO BYTES A MB | 86 | //CONVIERTO BYTES A MB |
| 36 | totalSize += file.size / 1000000; | 87 | totalSize += file.size / 1000000; |
| 37 | var fileExt = file.name.split('.').pop(); | 88 | var fileExt = file.name.split('.').pop(); |
| 38 | 89 | ||
| 39 | if(fileExt != 'jpg' && fileExt != 'png') { | 90 | if(fileExt != 'jpg' && fileExt != 'png') { |
| 40 | invalidExt = true; | 91 | invalidExt = true; |
| 41 | } | 92 | } |
| 42 | }); | 93 | }); |
| 43 | 94 | ||
| 44 | if (totalSize > 150) { | 95 | if (totalSize > 150) { |
| 45 | focaModalService.alert('El/los archivo/s exceden la capacidad máxima'); | 96 | focaModalService.alert('El/los archivo/s exceden la capacidad máxima'); |
| 46 | $scope.files = []; | 97 | $scope.files = []; |
| 47 | } else if (invalidExt) { | 98 | } else if (invalidExt) { |
| 48 | focaModalService.alert('Ha ingresado un archivo con extensión inválida'); | 99 | focaModalService.alert('Ha ingresado un archivo con extensión inválida'); |
| 49 | $scope.files = []; | 100 | $scope.files = []; |
| 50 | } | 101 | } |
| 51 | } | 102 | } |
| 52 | } | 103 | } |
| 53 | ] | 104 | ] |
| 54 | ); | 105 | ); |
| 55 | 106 |
src/views/modal-detalles.html
| 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-12 col-md-2 mb-3"> | 7 | <div class="col-12 col-md-2 mb-3"> |
| 8 | <label class="form-control-sm p-0">Observaciones:</label> | 8 | <label class="form-control-sm p-0">Observaciones:</label> |
| 9 | </div> | 9 | </div> |
| 10 | <div class="col-12 col-md-10 mb-3"> | 10 | <div class="col-12 col-md-10 mb-3"> |
| 11 | <textarea | 11 | <textarea |
| 12 | teclado-virtual | 12 | teclado-virtual |
| 13 | rows="5" | 13 | rows="5" |
| 14 | ng-model="observaciones" | 14 | ng-model="observaciones" |
| 15 | class="form-control form-control-sm" | 15 | class="form-control form-control-sm" |
| 16 | foca-focus="focused == 9" | 16 | foca-focus="focused == 9" |
| 17 | ng-focus="focused = 9" | 17 | ng-focus="focused = 9" |
| 18 | ng-required="true"></textarea> | 18 | ng-required="true"></textarea> |
| 19 | </div> | 19 | </div> |
| 20 | <div class="col-12 col-md-2"> | 20 | <div class="col-12 col-md-2"> |
| 21 | <label class="form-control-sm p-0">Monto cubierto:</label> | 21 | <label class="form-control-sm p-0">Monto cubierto:</label> |
| 22 | </div> | 22 | </div> |
| 23 | <div class="col-6 col-md-5 input-group mb-2"> | 23 | <div class="col-12 col-md-5 input-group mb-2"> |
| 24 | <div class="input-group-prepend"> | 24 | <div class="input-group-prepend"> |
| 25 | <div class="input-group-text form-control form-control-sm">$</div> | 25 | <div class="input-group-text form-control form-control-sm">$</div> |
| 26 | </div> | 26 | </div> |
| 27 | <input | 27 | <input |
| 28 | foca-tipo-input | 28 | foca-tipo-input |
| 29 | teclado-virtual | 29 | teclado-virtual |
| 30 | class="form-control form-control-sm" | 30 | class="form-control form-control-sm" |
| 31 | placeholder="Importe" | 31 | placeholder="Importe" |
| 32 | ng-model="importe" | 32 | ng-model="importe" |
| 33 | ng-keypress="next($event.keyCode)" | 33 | ng-keypress="next($event.keyCode)" |
| 34 | ng-required="true" | 34 | ng-required="true" |
| 35 | foca-focus="focused == 6" | 35 | foca-focus="focused == 6" |
| 36 | ng-focus="focused = 6"/> | 36 | ng-focus="focused = 6"/> |
| 37 | </div> | 37 | </div> |
| 38 | <div class="col-md-5"> | 38 | <div class="col-md-5" ng-if="!mobile"> |
| 39 | <input | 39 | <input |
| 40 | type="file" | 40 | type="file" |
| 41 | class="form-control-file" | 41 | class="form-control-file" |
| 42 | ng-file-model="files" | 42 | ng-file-model="files" |
| 43 | multiple | 43 | multiple |
| 44 | accept=".jpg,.png"> | 44 | accept=".jpg,.png"> |
| 45 | <small>Solo .jpg y .png - Tamaño máximo 150mb</small> | 45 | <small>Solo .jpg y .png - Tamaño máximo 150mb</small> |
| 46 | </div> | 46 | </div> |
| 47 | <div class="col-6 mb-2" ng-if="mobile"> | ||
| 48 | <button | ||
| 49 | type="button" | ||
| 50 | ng-if="mobile" | ||
| 51 | class="form-control form-control-sm" | ||
| 52 | ng-click="seleccionarFoto()"> | ||
| 53 | Seleccione imagen</button> | ||
| 54 | </div> | ||
| 55 | <div class="col-6 mb-2" ng-if="mobile"> | ||
| 56 | <button | ||
| 57 | type="button" | ||
| 58 | ng-if="mobile" | ||
| 59 | class="form-control form-control-sm" | ||
| 60 | ng-click="tomarFoto()"> | ||
| 61 | Tome imagen | ||
| 62 | </button> | ||
| 63 | </div> | ||
| 64 | <div class="col-12" ng-if="mobile"> | ||
| 65 | <small>Solo .jpg y .png - Tamaño máximo 150mb</small> | ||
| 66 | </div> | ||
| 47 | </div> | 67 | </div> |
| 48 | </form> | 68 | </form> |
| 49 | <div class="row"> | 69 | <div class="row" ng-if="!mobile"> |
| 50 | <div class="col-md-3" ng-repeat="(key, file) in files"> | 70 | <div class="col-md-3" ng-repeat="(key, file) in files"> |
| 51 | <img ng-src="{{file.url}}" alt="" class="col-md-12 p-0"> | 71 | <img ng-src="{{file.url}}" alt="" class="col-md-12 p-0"> |
| 52 | <button | 72 | <button |
| 53 | type="button" | 73 | type="button" |
| 54 | class="btn btn-delete-image btn-danger rounded-circle position-absolute p-0" | 74 | class="btn btn-delete-image btn-danger rounded-circle position-absolute p-0" |
| 55 | title="Eliminar" | 75 | title="Eliminar" |
| 56 | ng-click="eliminarImg(key)"> | 76 | ng-click="eliminarImg(key)"> |
| 57 | <i class="fa fa-times" aria-hidden="true"></i> | 77 | <i class="fa fa-times" aria-hidden="true"></i> |
| 58 | </button> | 78 | </button> |
| 59 | </div> | 79 | </div> |
| 60 | </div> | 80 | </div> |
| 81 | <div class="row" ng-if="mobile"> | ||
| 82 | <div class="col-12 d-flex justify-content-between" ng-repeat="(key, file) in files"> | ||
| 83 | <strong ng-bind="file.name"></strong> | ||
| 84 | <button | ||
| 85 | type="button" | ||
| 86 | class="btn p-0" | ||
| 87 | title="Eliminar" | ||
| 88 | ng-click="eliminarImg(key)"> | ||
| 89 | <i class="fa fa-times" aria-hidden="true"></i> | ||
| 90 | </button> | ||
| 91 | </div> | ||
| 92 | </div> | ||
| 61 | </div> | 93 | </div> |
| 62 | <div class="modal-footer"> | 94 | <div class="modal-footer"> |
| 63 | <button | 95 | <button |
| 64 | class="btn btn-primary" | 96 | class="btn btn-primary" |
| 65 | type="button" | 97 | type="button" |
| 66 | ng-click="aceptar()" | 98 | ng-click="aceptar()" |
| 67 | ng-disabled="!formObservaciones.$valid" | 99 | ng-disabled="!formObservaciones.$valid" |
| 68 | >Aceptar</button> | 100 | >Aceptar</button> |
| 69 | <button | 101 | <button |
| 70 | class="btn btn-secondary" | 102 | class="btn btn-secondary" |
| 71 | type="button" | 103 | type="button" |
| 72 | ng-click="cancel()" | 104 | ng-click="cancel()" |
| 73 | >Cancelar</button> | 105 | >Cancelar</button> |
| 74 | </div> | 106 | </div> |
| 75 | 107 |