Commit df76d03326147545ee1ea639e3ef0195b132c01c
Exists in
develop
Merge branch 'develop' into 'develop'
Develop See merge request !39
Showing
2 changed files
 
Show diff stats
src/app/modules/info-formas-pago/info-formas-pago.component.html
| 1 | <div class="h-92 bg-white fade-in-left"> | 1 | <div class="h-92 bg-white fade-in-left"> | 
| 2 | <div class="row mx-0 h-15"> | 2 | <div class="row mx-0 h-15"> | 
| 3 | <div class="col-12 px-0 h-80 my-auto"> | 3 | <div class="col-12 px-0 h-80 my-auto"> | 
| 4 | <img | 4 | <img | 
| 5 | draggable="false" | 5 | draggable="false" | 
| 6 | ondragstart="return false;" | 6 | ondragstart="return false;" | 
| 7 | (contextmenu)="false" | 7 | (contextmenu)="false" | 
| 8 | class="d-block mx-auto h-100" | 8 | class="d-block mx-auto h-100" | 
| 9 | src="assets/img/logo-spot.svg"> | 9 | src="assets/img/logo-spot.svg"> | 
| 10 | </div> | 10 | </div> | 
| 11 | </div> | 11 | </div> | 
| 12 | <div class="h-85"> | 12 | <div class="h-85"> | 
| 13 | <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> | 13 | <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> | 
| 14 | <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-end border border-secondary rounded"> | 14 | <div class="col-7 col-xl-4 p-5 m-5 h-auto align-self-end border border-secondary rounded"> | 
| 15 | <img | 15 | <img | 
| 16 | draggable="false" | 16 | draggable="false" | 
| 17 | ondragstart="return false;" | 17 | ondragstart="return false;" | 
| 18 | (contextmenu)="false" | 18 | (contextmenu)="false" | 
| 19 | class="img-in-top px-4 bg-white" | 19 | class="img-in-top px-4 bg-white" | 
| 20 | src="assets/img/icono-tarjetas.svg"> | 20 | src="assets/img/icono-tarjetas.svg"> | 
| 21 | <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> | 21 | <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> | 
| 22 | <p class="h2 mb-3 text-secondary"> | 22 | <p class="h2 mb-3 text-secondary"> | 
| 23 | tarjetas y | 23 | tarjetas y | 
| 24 | <img | 24 | <img | 
| 25 | draggable="false" | 25 | draggable="false" | 
| 26 | ondragstart="return false;" | 26 | ondragstart="return false;" | 
| 27 | (contextmenu)="false" | 27 | (contextmenu)="false" | 
| 28 | class="w-15" | 28 | class="icon-150" | 
| 29 | src="assets/img/icono-mercado-pago.svg"> | 29 | src="assets/img/icono-mercado-pago.svg"> | 
| 30 | </p> | 30 | </p> | 
| 31 | <div | 31 | <div | 
| 32 | class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white" | 32 | class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white" | 
| 33 | [routerLink]="['/opcion-pedido']"> | 33 | [routerLink]="['/opcion-pedido']"> | 
| 34 | CONTINUAR | 34 | CONTINUAR | 
| 35 | <img | 35 | <img | 
| 36 | draggable="false" | 36 | draggable="false" | 
| 37 | ondragstart="return false;" | 37 | ondragstart="return false;" | 
| 38 | (contextmenu)="false" | 38 | (contextmenu)="false" | 
| 39 | class="icon-30" | 39 | class="icon-30" | 
| 40 | src="assets/img/ir.svg"> | 40 | src="assets/img/ir.svg"> | 
| 41 | </div> | 41 | </div> | 
| 42 | </div> | 42 | </div> | 
| 43 | <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border border-primary rounded"> | 43 | <div class="col-7 col-xl-4 p-5 m-5 h-auto align-self-center border border-primary rounded"> | 
| 44 | <img | 44 | <img | 
| 45 | draggable="false" | 45 | draggable="false" | 
| 46 | ondragstart="return false;" | 46 | ondragstart="return false;" | 
| 47 | (contextmenu)="false" | 47 | (contextmenu)="false" | 
| 48 | class="img-in-top px-4 bg-white" | 48 | class="img-in-top px-4 bg-white" | 
| 49 | src="assets/img/icono-efectivo.svg"> | 49 | src="assets/img/icono-efectivo.svg"> | 
| 50 | <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> | 50 | <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> | 
| 51 | <p class="h2 m-0 text-primary">te esperamos en la caja</p> | 51 | <p class="h2 m-0 text-primary">te esperamos en la caja</p> | 
| 52 | </div> | 52 | </div> | 
| 53 | </div> | 53 | </div> | 
| 54 | </div> | 54 | </div> | 
| 55 | </div> | 55 | </div> | 
| 56 | 56 | 
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
| 1 | import { Component, OnInit, TemplateRef, OnDestroy, HostListener } from '@angular/core'; | 1 | import { Component, OnInit, TemplateRef, OnDestroy, HostListener } from '@angular/core'; | 
| 2 | import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; | 2 | import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; | 
| 3 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | 3 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | 
| 4 | import { IArticulo } from 'src/app/interfaces/IArticulo'; | 4 | import { IArticulo } from 'src/app/interfaces/IArticulo'; | 
| 5 | import { APP_SETTINGS } from 'src/etc/AppSettings'; | 5 | import { APP_SETTINGS } from 'src/etc/AppSettings'; | 
| 6 | import { ICategoria } from 'src/app/interfaces/ICategoria'; | 6 | import { ICategoria } from 'src/app/interfaces/ICategoria'; | 
| 7 | import { CategoriaService } from 'src/app/services/categoria/categoria.service'; | 7 | import { CategoriaService } from 'src/app/services/categoria/categoria.service'; | 
| 8 | import { PromocionService } from 'src/app/services/promocion/promocion.service'; | 8 | import { PromocionService } from 'src/app/services/promocion/promocion.service'; | 
| 9 | import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; | 9 | import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; | 
| 10 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; | 10 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; | 
| 11 | 11 | ||
| 12 | @Component({ | 12 | @Component({ | 
| 13 | selector: 'app-seleccion-articulos', | 13 | selector: 'app-seleccion-articulos', | 
| 14 | templateUrl: './seleccion-articulos.component.html', | 14 | templateUrl: './seleccion-articulos.component.html', | 
| 15 | styleUrls: ['./seleccion-articulos.component.scss'] | 15 | styleUrls: ['./seleccion-articulos.component.scss'] | 
| 16 | }) | 16 | }) | 
| 17 | export class SeleccionArticulosComponent implements OnInit, OnDestroy { | 17 | export class SeleccionArticulosComponent implements OnInit, OnDestroy { | 
| 18 | showSpinner = true; | 18 | showSpinner = true; | 
| 19 | timeoutHandler: any; | 19 | timeoutHandler: any; | 
| 20 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | 20 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | 
| 21 | articulos: IArticulo[] = []; | 21 | articulos: IArticulo[] = []; | 
| 22 | auxArticulos: IArticulo[] = []; | 22 | auxArticulos: IArticulo[] = []; | 
| 23 | showQuantity = 100; | 23 | showQuantity = 100; | 
| 24 | queMostrar = 'todos'; | 24 | queMostrar = 'todos'; | 
| 25 | categoriaActive = null; | 25 | categoriaActive = null; | 
| 26 | categorias: ICategoria[] = []; | 26 | categorias: ICategoria[] = []; | 
| 27 | searchTerm = ''; | 27 | searchTerm = ''; | 
| 28 | ordenandoByVendidos = true; | 28 | ordenandoByVendidos = true; | 
| 29 | allActive = true; | 29 | allActive = true; | 
| 30 | modalRef: BsModalRef; | 30 | modalRef: BsModalRef; | 
| 31 | total = 0; | 31 | total = 0; | 
| 32 | 32 | ||
| 33 | constructor( | 33 | constructor( | 
| 34 | public articuloService: ArticuloService, | 34 | public articuloService: ArticuloService, | 
| 35 | private categoriaService: CategoriaService, | 35 | private categoriaService: CategoriaService, | 
| 36 | private modalService: BsModalService, | 36 | private modalService: BsModalService, | 
| 37 | private inactiveScreen: InactiveScreenService, | 37 | private inactiveScreen: InactiveScreenService, | 
| 38 | ) { } | 38 | ) { } | 
| 39 | 39 | ||
| 40 | ngOnInit() { | 40 | ngOnInit() { | 
| 41 | this.getCategorias(); | 41 | this.getCategorias(); | 
| 42 | } | 42 | } | 
| 43 | 43 | ||
| 44 | ngOnDestroy() { | 44 | ngOnDestroy() { | 
| 45 | if (this.modalRef) this.modalRef.hide(); | 45 | if (this.modalRef) this.modalRef.hide(); | 
| 46 | } | 46 | } | 
| 47 | 47 | ||
| 48 | getCategorias() { | 48 | getCategorias() { | 
| 49 | this.categoriaService.getAll() | 49 | this.categoriaService.getAll() | 
| 50 | .subscribe((categorias: ICategoria[]) => { | 50 | .subscribe((categorias: ICategoria[]) => { | 
| 51 | switch (this.queMostrar) { | 51 | switch (this.queMostrar) { | 
| 52 | case 'todos': | 52 | case 'todos': | 
| 53 | this.categorias = categorias; | 53 | this.categorias = categorias; | 
| 54 | this.categoriaActive = 0; | 54 | this.categoriaActive = 0; | 
| 55 | break; | 55 | break; | 
| 56 | case 'promociones': | 56 | case 'promociones': | 
| 57 | this.categorias = categorias; | 57 | this.categorias = categorias; | 
| 58 | this.categoriaActive = 19; | 58 | this.categoriaActive = 19; | 
| 59 | break; | 59 | break; | 
| 60 | case 'ordenar': | 60 | case 'ordenar': | 
| 61 | this.categorias = categorias.filter((categoria: ICategoria) => { | 61 | this.categorias = categorias.filter((categoria: ICategoria) => { | 
| 62 | return categoria.ES_PEDIDO; | 62 | return categoria.ES_PEDIDO; | 
| 63 | }); | 63 | }); | 
| 64 | this.categoriaActive = 4; | 64 | this.categoriaActive = 4; | 
| 65 | break; | 65 | break; | 
| 66 | default: | 66 | default: | 
| 67 | this.categorias = categorias; | 67 | this.categorias = categorias; | 
| 68 | this.categoriaActive = 0; | 68 | this.categoriaActive = 0; | 
| 69 | break; | 69 | break; | 
| 70 | } | 70 | } | 
| 71 | !localStorage.getItem('articulos') ? | 71 | !localStorage.getItem('articulos') ? | 
| 72 | this.getProductos() : | 72 | this.getProductos() : | 
| 73 | this.setProductos(); | 73 | this.setProductos(); | 
| 74 | }); | 74 | }); | 
| 75 | } | 75 | } | 
| 76 | 76 | ||
| 77 | getProductos() { | 77 | getProductos() { | 
| 78 | this.articuloService.getAll() | 78 | this.articuloService.getAll() | 
| 79 | .subscribe((result: IArticulo[]) => { | 79 | .subscribe((result: IArticulo[]) => { | 
| 80 | this.articuloService.setArticulosSinImagen(result); | 80 | this.articuloService.setArticulosSinImagen(result); | 
| 81 | if (this.queMostrar === 'ordenar') { | 81 | if (this.queMostrar === 'ordenar') { | 
| 82 | this.categorias.forEach((categoria: ICategoria) => { | 82 | this.categorias.forEach((categoria: ICategoria) => { | 
| 83 | const tempArticulos = result.filter((articulo: IArticulo) => { | 83 | const tempArticulos = result.filter((articulo: IArticulo) => { | 
| 84 | return articulo.categoria_selfservice === categoria.id; | 84 | return articulo.categoria_selfservice === categoria.id; | 
| 85 | }); | 85 | }); | 
| 86 | result = tempArticulos; | 86 | result = tempArticulos; | 
| 87 | }); | 87 | }); | 
| 88 | } | 88 | } | 
| 89 | localStorage.setItem('articulos', JSON.stringify(result)); | 89 | localStorage.setItem('articulos', JSON.stringify(result)); | 
| 90 | this.setProductos(); | 90 | this.setProductos(); | 
| 91 | }, (error) => { | 91 | }, (error) => { | 
| 92 | this.showSpinner = false; | 92 | this.showSpinner = false; | 
| 93 | console.error(error); | 93 | console.error(error); | 
| 94 | }); | 94 | }); | 
| 95 | } | 95 | } | 
| 96 | 96 | ||
| 97 | setProductos() { | 97 | setProductos() { | 
| 98 | this.articulos = JSON.parse(localStorage.getItem('articulos')); | 98 | this.articulos = JSON.parse(localStorage.getItem('articulos')); | 
| 99 | this.filterItems(); | 99 | this.filterItems(); | 
| 100 | } | 100 | } | 
| 101 | 101 | ||
| 102 | filterItems() { | 102 | filterItems() { | 
| 103 | if (this.categoriaActive === 0) { | 103 | if (this.categoriaActive === 0) { | 
| 104 | this.auxArticulos = this.articulos; | 104 | this.auxArticulos = this.articulos; | 
| 105 | return; | 105 | return; | 
| 106 | } | 106 | } | 
| 107 | this.auxArticulos = this.articulos.filter(x => { | 107 | this.auxArticulos = this.articulos.filter(x => { | 
| 108 | return x.categoria_selfservice === this.categoriaActive; | 108 | return x.categoria_selfservice === this.categoriaActive; | 
| 109 | }); | 109 | }); | 
| 110 | this.ordenar(); | 110 | this.ordenar(); | 
| 111 | } | 111 | } | 
| 112 | 112 | ||
| 113 | ordenar() { | 113 | ordenar() { | 
| 114 | if (this.ordenandoByVendidos) { | 114 | if (this.ordenandoByVendidos) { | 
| 115 | this.auxArticulos.sort((a, b) => { | 115 | this.auxArticulos.sort((a, b) => { | 
| 116 | return b.cantidadVendida - a.cantidadVendida; | 116 | return b.cantidadVendida - a.cantidadVendida; | 
| 117 | }); | 117 | }); | 
| 118 | } | 118 | } | 
| 119 | } | 119 | } | 
| 120 | 120 | ||
| 121 | selectCategoria(index: number, idCategoria?: number) { | 121 | selectCategoria(index: number, idCategoria?: number) { | 
| 122 | if (this.categoriaActive === idCategoria) return; | 122 | if (this.categoriaActive === idCategoria) return; | 
| 123 | this.categoriaActive = idCategoria; | 123 | this.categoriaActive = idCategoria; | 
| 124 | this.allActive = idCategoria === 0 ? true : false; | 124 | this.allActive = idCategoria === 0 ? true : false; | 
| 125 | this.categorias.forEach((categoria, i) => { | 125 | this.categorias.forEach((categoria, i) => { | 
| 126 | categoria.selected = index === i ? true : false; | 126 | categoria.selected = index === i ? true : false; | 
| 127 | }); | 127 | }); | 
| 128 | this.filterItems(); | 128 | this.filterItems(); | 
| 129 | } | 129 | } | 
| 130 | 130 | ||
| 131 | elegirArticulo(articulo: IArticulo) { | 131 | elegirArticulo(articulo: IArticulo) { | 
| 132 | if (!articulo.FPP) { | 132 | if (!articulo.FPP) { | 
| 133 | this.getByID(articulo.id); | 133 | this.getByID(articulo.id); | 
| 134 | } else { | 134 | } else { | 
| 135 | this.openModalPromos(articulo); | 135 | this.openModalPromos(articulo); | 
| 136 | } | 136 | } | 
| 137 | } | 137 | } | 
| 138 | 138 | ||
| 139 | getByID(id: number) { | 139 | getByID(id: number) { | 
| 140 | this.articuloService.getById(id) | 140 | this.articuloService.getById(id) | 
| 141 | .subscribe((res: IArticulo) => { | 141 | .subscribe((res: IArticulo) => { | 
| 142 | res.cantidad = 1; | 142 | res.cantidad = 1; | 
| 143 | this.articuloService.setArticulo(res); | 143 | this.articuloService.setArticulo(res); | 
| 144 | }, err => console.error(err)); | 144 | }, err => console.error(err)); | 
| 145 | } | 145 | } | 
| 146 | 146 | ||
| 147 | openModalPromos(articulo: IArticulo) { | 147 | openModalPromos(articulo: IArticulo) { | 
| 148 | this.modalRef = this.modalService.show(PromocionComponent, | 148 | this.modalRef = this.modalService.show(PromocionComponent, | 
| 149 | { | 149 | { | 
| 150 | initialState: { | 150 | initialState: { | 
| 151 | idArticulo: articulo.id | 151 | idArticulo: articulo.id | 
| 152 | }, | 152 | }, | 
| 153 | class: 'modal-promo modal-dialog-centered' | 153 | class: 'modal-promo modal-dialog-centered' | 
| 154 | }); | 154 | }); | 
| 155 | } | 155 | } | 
| 156 | 156 | ||
| 157 | increaseShow() { | 157 | increaseShow() { | 
| 158 | this.showQuantity += 100; | 158 | this.showQuantity += 100; | 
| 159 | } | 159 | } | 
| 160 | 160 | ||
| 161 | @HostListener("scroll", ['$event']) | 161 | @HostListener('scroll', ['$event']) | 
| 162 | scrollEvent(event: Event) { | 162 | scrollEvent(event: Event) { | 
| 163 | clearTimeout(this.inactiveScreen.timerReposo); | 163 | clearTimeout(this.inactiveScreen.timerReposo); | 
| 164 | this.inactiveScreen.startTimeOutInactividad(); | 164 | this.inactiveScreen.startTimeOutInactividad(); | 
| 165 | } | 165 | } | 
| 166 | 166 | ||
| 167 | mouseup() { | 167 | mouseup() { | 
| 168 | if (!this.timeoutHandler) return; | 168 | if (!this.timeoutHandler) return; | 
| 169 | clearInterval(this.timeoutHandler); | 169 | clearInterval(this.timeoutHandler); | 
| 170 | } | 170 | } | 
| 171 | 171 | ||
| 172 | scrollY(el: HTMLElement, value) { | 172 | scrollY(el: HTMLElement, value) { | 
| 173 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); | 173 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); | 
| 174 | this.timeoutHandler = setInterval(() => { | 174 | this.timeoutHandler = setInterval(() => { | 
| 175 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); | 175 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); | 
| 176 | }, 500); | 176 | }, 500); | 
| 177 | } | 177 | } | 
| 178 | 178 | ||
| 179 | scrollX(el: HTMLElement, value) { | 179 | scrollX(el: HTMLElement, value) { | 
| 180 | el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); | 180 | el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); | 
| 181 | this.timeoutHandler = setInterval(() => { | 181 | this.timeoutHandler = setInterval(() => { | 
| 182 | el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); | 182 | el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); | 
| 183 | }, 500); | 183 | }, 500); | 
| 184 | } | 184 | } | 
| 185 | } | 185 | } | 
| 186 | 186 |