Commit 0c7440928ce5568dfb14ca34ead6c4cd5dc5f091
1 parent
5d8dba22f4
Exists in
master
Agregado boton pagar
Showing
3 changed files
with
36 additions
and
7 deletions
Show diff stats
package.json
| 1 | { | 1 | { |
| 2 | "name": "foca-botonera-lateral", | 2 | "name": "foca-botonera-lateral", |
| 3 | "version": "0.0.1", | 3 | "version": "0.0.1", |
| 4 | "description": "Componente de botonera lateral", | 4 | "description": "Componente de botonera lateral", |
| 5 | "main": "index.js", | 5 | "main": "index.js", |
| 6 | "scripts": { | 6 | "scripts": { |
| 7 | "refresh": "gulp uglify && cp tmp/foca-botonera-lateral.js ../wrapper-demo/node_modules/foca-botonera-lateral/dist/foca-botonera-lateral.min.js", | ||
| 8 | "frefresh": "gulp uglify && cp tmp/foca-botonera-lateral.js ../wrapper-facturador/node_modules/foca-botonera-lateral/dist/foca-botonera-lateral.min.js", | ||
| 7 | "test": "echo \"Error: no test specified\" && exit 1", | 9 | "test": "echo \"Error: no test specified\" && exit 1", |
| 8 | "compile": "gulp uglify", | 10 | "compile": "gulp uglify", |
| 9 | "gulp-pre-commit": "gulp pre-commit", | 11 | "gulp-pre-commit": "gulp pre-commit", |
| 10 | "postinstall": "npm run compile && gulp clean-post-install", | 12 | "postinstall": "npm run compile && gulp clean-post-install", |
| 11 | "install-dev": "npm install -D angular bootstrap font-awesome gulp gulp-angular-templatecache gulp-clean gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify-es jasmine-core jquery jshint pre-commit pump && npm install angular-sanitize" | 13 | "install-dev": "npm install -D angular bootstrap font-awesome gulp gulp-angular-templatecache gulp-clean gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify-es jasmine-core jquery jshint pre-commit pump && npm install angular-sanitize" |
| 12 | }, | 14 | }, |
| 13 | "pre-commit": [ | 15 | "pre-commit": [ |
| 14 | "gulp-pre-commit" | 16 | "gulp-pre-commit" |
| 15 | ], | 17 | ], |
| 16 | "repository": { | 18 | "repository": { |
| 17 | "type": "git", | 19 | "type": "git", |
| 18 | "url": "git+ssh://git@debonline.dyndns.org:npm/foca-botonera-lateral.git" | 20 | "url": "git+ssh://git@debonline.dyndns.org:npm/foca-botonera-lateral.git" |
| 19 | }, | 21 | }, |
| 20 | "author": "Foca Software", | 22 | "author": "Foca Software", |
| 21 | "license": "ISC", | 23 | "license": "ISC", |
| 22 | "peerDependencies": { | 24 | "peerDependencies": { |
| 23 | "angular": "^1.7.x", | 25 | "angular": "^1.7.x", |
| 24 | "bootstrap": "^4.1.x", | 26 | "bootstrap": "^4.1.x", |
| 25 | "jquery": "^3.3.x", | 27 | "jquery": "^3.3.x", |
| 26 | "font-awesome": "^4.7.x", | 28 | "font-awesome": "^4.7.x", |
| 27 | "gulp": "^3.9.x", | 29 | "gulp": "^3.9.x", |
| 28 | "gulp-concat": "2.6.x", | 30 | "gulp-concat": "2.6.x", |
| 29 | "gulp-jshint": "^2.1.x", | 31 | "gulp-jshint": "^2.1.x", |
| 30 | "gulp-rename": "^1.4.x", | 32 | "gulp-rename": "^1.4.x", |
| 31 | "gulp-replace": "^1.0.x", | 33 | "gulp-replace": "^1.0.x", |
| 32 | "gulp-uglify-es": "^1.0.x", | 34 | "gulp-uglify-es": "^1.0.x", |
| 33 | "jshint": "^2.9.x", | 35 | "jshint": "^2.9.x", |
| 34 | "pump": "^3.0.x" | 36 | "pump": "^3.0.x" |
| 35 | }, | 37 | }, |
| 36 | "devDependencies": { | 38 | "devDependencies": { |
| 37 | "angular": "1.7.5", | 39 | "angular": "1.7.5", |
| 38 | "angular-route": "^1.7.5", | 40 | "angular-route": "^1.7.5", |
| 39 | "angular-sanitize": "1.7.5", | 41 | "angular-sanitize": "1.7.5", |
| 40 | "bootstrap": "4.1.3", | 42 | "bootstrap": "4.1.3", |
| 41 | "font-awesome": "4.7.0", | 43 | "font-awesome": "4.7.0", |
| 42 | "gulp": "3.9.1", | 44 | "gulp": "3.9.1", |
| 43 | "gulp-angular-templatecache": "2.2.5", | 45 | "gulp-angular-templatecache": "2.2.5", |
| 44 | "gulp-clean": "0.4.0", | 46 | "gulp-clean": "0.4.0", |
| 45 | "gulp-concat": "2.6.1", | 47 | "gulp-concat": "2.6.1", |
| 46 | "gulp-connect": "5.6.1", | 48 | "gulp-connect": "5.6.1", |
| 47 | "gulp-htmlmin": "5.0.1", | 49 | "gulp-htmlmin": "5.0.1", |
| 48 | "gulp-jshint": "2.1.0", | 50 | "gulp-jshint": "2.1.0", |
| 49 | "gulp-rename": "1.4.0", | 51 | "gulp-rename": "1.4.0", |
| 50 | "gulp-replace": "1.0.0", | 52 | "gulp-replace": "1.0.0", |
| 51 | "gulp-sass": "4.0.2", | 53 | "gulp-sass": "4.0.2", |
| 52 | "gulp-uglify-es": "1.0.4", | 54 | "gulp-uglify-es": "1.0.4", |
| 53 | "jasmine-core": "3.3.0", | 55 | "jasmine-core": "3.3.0", |
| 54 | "jquery": "3.3.1", | 56 | "jquery": "3.3.1", |
| 55 | "jshint": "2.9.6", | 57 | "jshint": "2.9.6", |
| 56 | "pre-commit": "1.2.2", | 58 | "pre-commit": "1.2.2", |
| 57 | "pump": "3.0.0" | 59 | "pump": "3.0.0" |
| 60 | }, | ||
| 61 | "dependencies": { | ||
| 62 | "node-sass": "^4.12.0" | ||
| 58 | } | 63 | } |
| 59 | } | 64 | } |
| 60 | 65 |
src/js/service.js
| 1 | angular.module('focaBotoneraLateral') | 1 | angular.module('focaBotoneraLateral') |
| 2 | .service('focaBotoneraLateralService', ['$localStorage', | 2 | .service('focaBotoneraLateralService', ['$localStorage', |
| 3 | function($localStorage) { | 3 | function($localStorage) { |
| 4 | 4 | ||
| 5 | this.botones = { | 5 | this.botones = { |
| 6 | teclado: true, | 6 | teclado: true, |
| 7 | salir: false, | 7 | salir: false, |
| 8 | cancelar: false, | 8 | cancelar: false, |
| 9 | pausar: false, | 9 | pausar: false, |
| 10 | guardar: false, | 10 | guardar: false, |
| 11 | pagar: false, | ||
| 11 | guardando: false, | 12 | guardando: false, |
| 12 | funcionGuardar: undefined, | 13 | funcionGuardar: undefined, |
| 13 | pathCancelar: undefined, | 14 | pathCancelar: undefined, |
| 14 | custom: [] | 15 | custom: [] |
| 15 | }; | 16 | }; |
| 16 | 17 | ||
| 17 | this.pausarData = { | 18 | this.pausarData = { |
| 18 | label: '', | 19 | label: '', |
| 19 | val: '' | 20 | val: '' |
| 20 | }; | 21 | }; |
| 21 | 22 | ||
| 22 | this.showTeclado = function(value) { | 23 | this.showTeclado = function(value) { |
| 23 | this.botones.teclado = value; | 24 | this.botones.teclado = value; |
| 24 | }; | 25 | }; |
| 25 | this.showSalir = function(value) { | 26 | this.showSalir = function(value) { |
| 26 | this.botones.custom = []; | 27 | this.botones.custom = []; |
| 27 | this.botones.salir = value; | 28 | this.botones.salir = value; |
| 28 | }; | 29 | }; |
| 29 | this.showPausar = function(value) { | 30 | this.showPausar = function(value) { |
| 30 | this.botones.custom = []; | 31 | this.botones.custom = []; |
| 31 | this.botones.pausar = value; | 32 | this.botones.pausar = value; |
| 32 | }; | 33 | }; |
| 33 | this.setPausarData = function(obj) { | 34 | this.setPausarData = function(obj) { |
| 34 | this.pausarData = obj; | 35 | this.pausarData = obj; |
| 35 | }; | 36 | }; |
| 36 | this.showCancelar = function(value, path) { | 37 | this.showCancelar = function(value, path) { |
| 37 | this.botones.custom = []; | 38 | this.botones.custom = []; |
| 38 | this.botones.cancelar = value; | 39 | this.botones.cancelar = value; |
| 39 | this.botones.pathCancelar = (path) ? path : undefined; | 40 | this.botones.pathCancelar = (path) ? path : undefined; |
| 40 | }; | 41 | }; |
| 41 | this.showGuardar = function(value, funcion) { | 42 | this.showGuardar = function(value, funcion) { |
| 42 | angular.element('#guardar').removeClass('guardado'); | 43 | angular.element('#guardar').removeClass('guardado'); |
| 43 | this.botones.custom = []; | 44 | this.botones.custom = []; |
| 44 | this.botones.guardar = value; | 45 | this.botones.guardar = value; |
| 45 | if (value) this.botones.funcionGuardar = funcion; | 46 | if (value) this.botones.funcionGuardar = funcion; |
| 46 | }; | 47 | }; |
| 48 | this.showPagar = function(value, funcion) { | ||
| 49 | angular.element('#pagar').removeClass('guardado'); | ||
| 50 | this.botones.custom = []; | ||
| 51 | this.botones.pagar = value; | ||
| 52 | if (value) this.botones.funcionGuardar = funcion; | ||
| 53 | }; | ||
| 47 | this.addCustomButton = function(title, funcion) { | 54 | this.addCustomButton = function(title, funcion) { |
| 48 | this.botones.custom.push({ | 55 | this.botones.custom.push({ |
| 49 | title: title, | 56 | title: title, |
| 50 | funcion: funcion | 57 | funcion: funcion |
| 51 | }); | 58 | }); |
| 52 | }; | 59 | }; |
| 53 | this.startGuardar = function() { | 60 | this.startGuardar = function() { |
| 54 | this.botones.guardando = true; | 61 | this.botones.guardando = true; |
| 55 | }; | 62 | }; |
| 56 | this.endGuardar = function(guardado) { | 63 | this.endGuardar = function(guardado) { |
| 57 | this.botones.guardando = false; | 64 | this.botones.guardando = false; |
| 58 | if (guardado) angular.element('#guardar').addClass('guardado'); | 65 | if (guardado) angular.element('#guardar').addClass('guardado'); |
| 59 | }; | 66 | }; |
| 60 | 67 | ||
| 61 | this.setLSItem = function() { | 68 | this.setLSItem = function() { |
| 62 | $localStorage[this.pausarData.label] = JSON.stringify(this.pausarData.val); | 69 | $localStorage[this.pausarData.label] = JSON.stringify(this.pausarData.val); |
| 63 | }; | 70 | }; |
| 64 | }]); | 71 | }]); |
| 65 | 72 |
src/views/botonera-lateral.html
| 1 | <div class="container botonera-lateral"> | 1 | <div class="container botonera-lateral"> |
| 2 | <div class="row"> | 2 | <div class="row"> |
| 3 | <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px"> | 3 | <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px"> |
| 4 | <div class="px-2 mt-auto"> | 4 | <div class="px-2 mt-auto"> |
| 5 | <div class="container"> | 5 | <div class="container"> |
| 6 | <div class="row"> | 6 | <div class="row"> |
| 7 | <div | 7 | <div |
| 8 | ladda="botones.guardando" | 8 | ladda="botones.guardando" |
| 9 | data-spinner-size="30" | 9 | data-spinner-size="30" |
| 10 | data-spinner-color="#000000" | 10 | data-spinner-color="#000000" |
| 11 | class="mb-2 border rounded" | 11 | class="border rounded" |
| 12 | ng-show="botones.pagar" | ||
| 13 | > | ||
| 14 | <button | ||
| 15 | id="pagar" | ||
| 16 | ng-click="botones.funcionGuardar()" | ||
| 17 | ng-disabled="botones.guardando" | ||
| 18 | type="button" | ||
| 19 | title="Pagar" | ||
| 20 | class="btn btn-block"> | ||
| 21 | <strong>PAGAR</strong> | ||
| 22 | </button> | ||
| 23 | </div> | ||
| 24 | <div | ||
| 25 | ladda="botones.guardando" | ||
| 26 | data-spinner-size="30" | ||
| 27 | data-spinner-color="#000000" | ||
| 28 | class="border rounded" | ||
| 29 | ng-show="botones.guardar" | ||
| 12 | > | 30 | > |
| 13 | <button | 31 | <button |
| 14 | id="guardar" | 32 | id="guardar" |
| 15 | ng-click="botones.funcionGuardar()" | 33 | ng-click="botones.funcionGuardar()" |
| 16 | ng-show="botones.guardar" | ||
| 17 | ng-disabled="botones.guardando" | 34 | ng-disabled="botones.guardando" |
| 18 | type="button" | 35 | type="button" |
| 19 | title="Guardar" | 36 | title="Guardar" |
| 20 | class="btn btn-block"> | 37 | class="btn btn-block"> |
| 21 | <strong>GUARDAR</strong> | 38 | <strong>GUARDAR</strong> |
| 22 | </button> | 39 | </button> |
| 23 | </div> | 40 | </div> |
| 24 | <button | 41 | <button |
| 25 | ng-click="pausar()" | 42 | ng-click="pausar()" |
| 26 | ng-show="botones.pausar" | 43 | ng-show="botones.pausar" |
| 27 | type="button" | 44 | type="button" |
| 28 | title="Pausar" | 45 | title="Pausar" |
| 29 | class="btn btn-block border"> | 46 | class="btn btn-block mt-2 border"> |
| 30 | <strong>PAUSAR</strong> | 47 | <strong>PAUSAR</strong> |
| 31 | </button> | 48 | </button> |
| 32 | <button | 49 | <button |
| 33 | ng-click="cancelar()" | 50 | ng-click="cancelar()" |
| 34 | ng-show="botones.cancelar" | 51 | ng-show="botones.cancelar" |
| 35 | type="button" | 52 | type="button" |
| 36 | title="Cancelar" | 53 | title="Cancelar" |
| 37 | class="btn btn-block border border-dark"> | 54 | class="btn btn-block mt-2 border border-dark"> |
| 38 | <strong>CANCELAR</strong> | 55 | <strong>CANCELAR</strong> |
| 39 | </button> | 56 | </button> |
| 40 | <button | 57 | <button |
| 41 | ng-click="salir()" | 58 | ng-click="salir()" |
| 42 | ng-show="botones.salir" | 59 | ng-show="botones.salir" |
| 43 | type="button" | 60 | type="button" |
| 44 | title="Salir" | 61 | title="Salir" |
| 45 | class="btn btn-block border"> | 62 | class="btn btn-block mt-2 border"> |
| 46 | <strong>SALIR</strong> | 63 | <strong>SALIR</strong> |
| 47 | </button> | 64 | </button> |
| 48 | <button | 65 | <button |
| 49 | ng-repeat="boton in botones.custom" | 66 | ng-repeat="boton in botones.custom" |
| 50 | ng-click="boton.funcion()" | 67 | ng-click="boton.funcion()" |
| 51 | type="button" | 68 | type="button" |
| 52 | title="{{boton.title}}" | 69 | title="{{boton.title}}" |
| 53 | class="btn btn-block border"> | 70 | class="btn btn-block mt-2 border"> |
| 54 | <strong | 71 | <strong |
| 55 | class="text-uppercase" | 72 | class="text-uppercase" |
| 56 | ng-bind="boton.title"> | 73 | ng-bind="boton.title"> |
| 57 | </strong> | 74 | </strong> |
| 58 | </button> | 75 | </button> |
| 59 | </div> | 76 | </div> |
| 60 | </div> | 77 | </div> |
| 61 | </div> | 78 | </div> |
| 62 | </div> | 79 | </div> |
| 63 | </div> | 80 | </div> |
| 64 | </div> | 81 | </div> |
| 65 | <div class="container botonera-lateral teclado" ng-show="botones.teclado"> | 82 | <div class="container botonera-lateral teclado" ng-show="botones.teclado"> |
| 66 | <div class="row"> | 83 | <div class="row"> |
| 67 | <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px"> | 84 | <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px"> |
| 68 | <div class="px-2 mt-auto"> | 85 | <div class="px-2 mt-auto"> |
| 69 | <div class="container"> | 86 | <div class="container"> |
| 70 | <div class="row"> | 87 | <div class="row"> |
| 71 | <div | 88 | <div |
| 72 | class="btn-group-toggle btn btn-block border" | 89 | class="btn-group-toggle btn btn-block mt-2 border" |
| 73 | data-toggle="buttons" | 90 | data-toggle="buttons" |
| 74 | ng-click="cambioUsoTeclado()" | 91 | ng-click="cambioUsoTeclado()" |
| 75 | title="Activar/desactivar teclado"> | 92 | title="Activar/desactivar teclado"> |
| 76 | <label | 93 | <label |
| 77 | class=" active boton-activar-teclado mb-0" | 94 | class=" active boton-activar-teclado mb-0" |
| 78 | ng-class="{'teclado-activar': usarTeclado}"> | 95 | ng-class="{'teclado-activar': usarTeclado}"> |
| 79 | <input | 96 | <input |
| 80 | type="checkbox" | 97 | type="checkbox" |
| 81 | autocomplete="off" | 98 | autocomplete="off" |
| 82 | > | 99 | > |
| 83 | <strong>TECLADO</strong> | 100 | <strong>TECLADO</strong> |
| 84 | </label> | 101 | </label> |
| 85 | </div> | 102 | </div> |
| 86 | </div> | 103 | </div> |
| 87 | </div> | 104 | </div> |
| 88 | </div> | 105 | </div> |
| 89 | </div> | 106 | </div> |
| 90 | </div> | 107 | </div> |
| 91 | </div> | 108 | </div> |