Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit 1f0b7384d27df0da76558f73fd528903d9b65bc9

Authored by Marcelo Puebla
2 parents e1403fb086 db93fd5f31
Exists in develop

Merge branch 'develop' into 'develop' 

Develop

See merge request !36
Showing 9 changed files   Show diff stats
src/app/modules/admin/admin.component.ts
Diff comments   View file @ 1f0b738
1 import { Component, OnInit, HostListener, OnDestroy } from '@angular/core'; 1 import { Component, OnInit, HostListener, OnDestroy } from '@angular/core';
2 import { Router } from '@angular/router'; 2 import { Router } from '@angular/router';
3 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
3 4
4 @Component({ 5 @Component({
5 selector: 'app-admin', 6 selector: 'app-admin',
6 templateUrl: './admin.component.html', 7 templateUrl: './admin.component.html',
7 styleUrls: ['./admin.component.scss'] 8 styleUrls: ['./admin.component.scss']
8 }) 9 })
9 10
10 export class AdminComponent implements OnInit, OnDestroy { 11 export class AdminComponent implements OnInit, OnDestroy {
11 timerReposo: any;
12
13 constructor( 12 constructor(
14 private router: Router, 13 private inactiveScreen: InactiveScreenService,
15 ) { } 14 ) { }
16 15
17 ngOnInit() { 16 ngOnInit() {
18 this.startTimeOutInactividad(); 17 this.inactiveScreen.startTimeOutInactividad();
19 } 18 }
20 19
21 ngOnDestroy() { 20 ngOnDestroy() {
22 clearTimeout(this.timerReposo); 21 clearTimeout(this.inactiveScreen.timerReposo);
23 } 22 }
24 23
25 @HostListener('document:click', ['$event']) 24 @HostListener('document:click', ['$event'])
26 documentClick(event: MouseEvent) { 25 eventListener(event: Event) {
27 clearTimeout(this.timerReposo); 26 clearTimeout(this.inactiveScreen.timerReposo);
28 this.startTimeOutInactividad(); 27 this.inactiveScreen.startTimeOutInactividad();
29 }
30
31 startTimeOutInactividad() {
32 this.timerReposo = setTimeout(() => {
33 this.router.navigate(['cancelar-compra']);
34 }, 90000);
35 } 28 }
36 29
37 } 30 }
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 1f0b738
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="h-75"> 5 <div class="h-75">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- CARRITO --> 15 <!-- CARRITO -->
16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"> 16 <div
17 class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"
18 (scroll)="scrollEvent($event)">
17 <!-- MENSAJE DE ADVERTENCIA --> 19 <!-- MENSAJE DE ADVERTENCIA -->
18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> 20 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
19 <p class="h5 text-center">No hay artículos en el carrito</p> 21 <p class="h5 text-center">No hay artículos en el carrito</p>
20 </div> 22 </div>
21 <!-- ARTICULOS --> 23 <!-- ARTICULOS -->
22 <div 24 <div
23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" 25 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
24 *ngFor="let articulo of articuloService.carrito; let i = index;" 26 *ngFor="let articulo of articuloService.carrito; let i = index;"
25 @EnterLeave> 27 @EnterLeave>
26 <!-- ARTICULO --> 28 <!-- ARTICULO -->
27 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 29 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
28 <div class="row mx-0 h-100"> 30 <div class="row mx-0 h-100">
29 <!-- NOMBRE E IMAGEN --> 31 <!-- NOMBRE E IMAGEN -->
30 <div class="col-3 h-100 border-right border-primary align-self-center"> 32 <div class="col-3 h-100 border-right border-primary align-self-center">
31 <img 33 <img
32 draggable="false" 34 draggable="false"
33 ondragstart="return false;" 35 ondragstart="return false;"
34 (contextmenu)="false" 36 (contextmenu)="false"
35 class="d-block mx-auto h-55 rounded-sm shadow-sm" 37 class="d-block mx-auto h-55 rounded-sm shadow-sm"
36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
37 onerror="this.src='assets/img/image-not-found.jpg'"> 39 onerror="this.src='assets/img/image-not-found.jpg'">
38 <div class="row mx-0 h-45"> 40 <div class="row mx-0 h-45">
39 <p class="col text-primary text-truncate align-self-end"> 41 <p class="col text-primary text-truncate align-self-end">
40 <small>{{articulo.DetArt}}</small> 42 <small>{{articulo.DetArt}}</small>
41 </p> 43 </p>
42 </div> 44 </div>
43 </div> 45 </div>
44 <!-- CANTIDAD --> 46 <!-- CANTIDAD -->
45 <div class="col-3 border-right border-primary"> 47 <div class="col-3 border-right border-primary">
46 <p><small>CANT</small></p> 48 <p><small>CANT</small></p>
47 <div class="row mt-2 mx-0"> 49 <div class="row mt-2 mx-0">
48 <div class="col-12 h-auto"> 50 <div class="col-12 h-auto">
49 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 51 <div class="row mx-0 justify-content-between bg-primary badge-pill">
50 <!-- BOTON MENOS --> 52 <!-- BOTON MENOS -->
51 <div class="col-auto px-0"> 53 <div class="col-auto px-0">
52 <img 54 <img
53 draggable="false" 55 draggable="false"
54 ondragstart="return false;" 56 ondragstart="return false;"
55 (contextmenu)="false" 57 (contextmenu)="false"
56 class="d-block ml-auto py-2 icon-20 btn-effect" 58 class="d-block ml-auto py-2 icon-20 btn-effect"
57 src="assets/img/menos-blanco.svg" 59 src="assets/img/menos-blanco.svg"
58 (click)="substractCant(articulo)"> 60 (click)="substractCant(articulo)">
59 </div> 61 </div>
60 <!-- CANTIDAD --> 62 <!-- CANTIDAD -->
61 <div class="col px-0 align-self-center text-white"> 63 <div class="col px-0 align-self-center text-white">
62 <p><small>{{articulo.cantidad}}</small></p> 64 <p><small>{{articulo.cantidad}}</small></p>
63 </div> 65 </div>
64 <!-- BOTON MAS --> 66 <!-- BOTON MAS -->
65 <div class="col-auto px-0"> 67 <div class="col-auto px-0">
66 <img 68 <img
67 draggable="false" 69 draggable="false"
68 ondragstart="return false;" 70 ondragstart="return false;"
69 (contextmenu)="false" 71 (contextmenu)="false"
70 class="d-block ml-auto py-2 icon-20 btn-effect" 72 class="d-block ml-auto py-2 icon-20 btn-effect"
71 src="assets/img/mas-blanco.svg" 73 src="assets/img/mas-blanco.svg"
72 (click)="addCant(articulo)"> 74 (click)="addCant(articulo)">
73 </div> 75 </div>
74 </div> 76 </div>
75 </div> 77 </div>
76 </div> 78 </div>
77 </div> 79 </div>
78 <!-- OPCIONALES --> 80 <!-- OPCIONALES -->
79 <!-- <div class="col-3 border-right border-primary"> 81 <!-- <div class="col-3 border-right border-primary">
80 <p><small>OPCIONALES</small></p> 82 <p><small>OPCIONALES</small></p>
81 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 83 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
82 <div class="row mx-0 mt-2 justify-content-center"> 84 <div class="row mx-0 mt-2 justify-content-center">
83 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white"> 85 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
84 <span> 86 <span>
85 <small class="pr-2">CAMBIAR</small> 87 <small class="pr-2">CAMBIAR</small>
86 <img 88 <img
87 draggable="false" 89 draggable="false"
88 ondragstart="return false;" 90 ondragstart="return false;"
89 (contextmenu)="false" 91 (contextmenu)="false"
90 class="icon-20" 92 class="icon-20"
91 src="assets/img/ir.svg"> 93 src="assets/img/ir.svg">
92 </span> 94 </span>
93 </div> 95 </div>
94 </div> --> 96 </div> -->
95 <!-- PRECIO --> 97 <!-- PRECIO -->
96 <div class="col-3 border-right border-primary"> 98 <div class="col-3 border-right border-primary">
97 <p><small>PRECIO</small></p> 99 <p><small>PRECIO</small></p>
98 <div class="py-1 mt-2 badge-pill bg-dark text-white"> 100 <div class="py-1 mt-2 badge-pill bg-dark text-white">
99 <p><small>{{articulo.PreVen | currency}}</small></p> 101 <p><small>{{articulo.PreVen | currency}}</small></p>
100 </div> 102 </div>
101 </div> 103 </div>
102 <!-- ELIMINAR --> 104 <!-- ELIMINAR -->
103 <div class="col-3 align-self-center"> 105 <div class="col-3 align-self-center">
104 <div class="row mx-0 justify-content-center"> 106 <div class="row mx-0 justify-content-center">
105 <div 107 <div
106 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 108 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
107 (click)="deleteArticulo(i)"> 109 (click)="deleteArticulo(i)">
108 <span> 110 <span>
109 <small class="pr-2">ELIMINAR</small> 111 <small class="pr-2">ELIMINAR</small>
110 <img 112 <img
111 draggable="false" 113 draggable="false"
112 ondragstart="return false;" 114 ondragstart="return false;"
113 (contextmenu)="false" 115 (contextmenu)="false"
114 class="icon-20 rotate-45" 116 class="icon-20 rotate-45"
115 src="assets/img/mas-blanco.svg"> 117 src="assets/img/mas-blanco.svg">
116 </span> 118 </span>
117 </div> 119 </div>
118 </div> 120 </div>
119 </div> 121 </div>
120 </div> 122 </div>
121 </div> 123 </div>
122 </div> 124 </div>
123 </div> 125 </div>
124 <!-- TOTAL --> 126 <!-- TOTAL -->
125 <div class="row mx-3 mt-2 h-auto justify-content-end"> 127 <div class="row mx-3 mt-2 h-auto justify-content-end">
126 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div> 128 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
127 <div class="col-2 p-0 bg-primary d-none d-sm-block bg-total"> 129 <div class="col-2 p-0 bg-primary d-none d-sm-block bg-total">
128 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 130 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
129 </div> 131 </div>
130 </div> 132 </div>
131 <!-- CONTINUAR --> 133 <!-- CONTINUAR -->
132 <div 134 <div
133 *ngIf="articuloService.carrito.length" 135 *ngIf="articuloService.carrito.length"
134 class="row mx-3 mt-4 h-auto justify-content-end"> 136 class="row mx-3 mt-4 h-auto justify-content-end">
135 <div 137 <div
136 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 138 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
137 [routerLink]="['/forma-pago']"> 139 [routerLink]="['/forma-pago']">
138 <span> 140 <span>
139 <small class="pr-2">CONTINUAR</small> 141 <small class="pr-2">CONTINUAR</small>
140 <img 142 <img
141 draggable="false" 143 draggable="false"
142 ondragstart="return false;" 144 ondragstart="return false;"
143 (contextmenu)="false" 145 (contextmenu)="false"
144 class="icon-20" 146 class="icon-20"
145 src="assets/img/ir.svg"> 147 src="assets/img/ir.svg">
146 </span> 148 </span>
147 </div> 149 </div>
148 </div> 150 </div>
149 <!-- SEGUIR COMPRANDO --> 151 <!-- SEGUIR COMPRANDO -->
150 <!-- <div class="row mx-3 mt-2 h-auto justify-content-end"> 152 <!-- <div class="row mx-3 mt-2 h-auto justify-content-end">
151 <div 153 <div
152 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 154 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
153 (click)="goBack()"> 155 (click)="goBack()">
154 <span> 156 <span>
155 <small class="pr-2">SEGUIR COMPRANDO</small> 157 <small class="pr-2">SEGUIR COMPRANDO</small>
156 <img 158 <img
157 draggable="false" 159 draggable="false"
158 ondragstart="return false;" 160 ondragstart="return false;"
159 (contextmenu)="false" 161 (contextmenu)="false"
160 class="icon-20" 162 class="icon-20"
161 src="assets/img/ir.svg"> 163 src="assets/img/ir.svg">
162 </span> 164 </span>
163 </div> 165 </div>
164 </div> --> 166 </div> -->
165 </div> 167 </div>
166 168
167 </div> 169 </div>
168 170
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 1f0b738
1 import { Component, OnInit, OnDestroy } from '@angular/core'; 1 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
2 import { Location } from '@angular/common'; 2 import { Location } from '@angular/common';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { APP_SETTINGS } from 'src/etc/AppSettings'; 4 import { APP_SETTINGS } from 'src/etc/AppSettings';
5 import { trigger, state, style, transition, animate } from '@angular/animations'; 5 import { trigger, state, style, transition, animate } from '@angular/animations';
6 import { IArticulo } from 'src/app/interfaces/IArticulo'; 6 import { IArticulo } from 'src/app/interfaces/IArticulo';
7 import { Router } from '@angular/router'; 7 import { Router } from '@angular/router';
8 import { BsModalRef } from 'ngx-bootstrap/modal/public_api'; 8 import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
9 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
9 10
10 @Component({ 11 @Component({
11 selector: 'app-carrito', 12 selector: 'app-carrito',
12 templateUrl: './carrito.component.html', 13 templateUrl: './carrito.component.html',
13 styleUrls: ['./carrito.component.scss'], 14 styleUrls: ['./carrito.component.scss'],
14 animations: [ 15 animations: [
15 trigger('EnterLeave', [ 16 trigger('EnterLeave', [
16 state('flyIn', style({ transform: 'translateX(0)' })), 17 state('flyIn', style({ transform: 'translateX(0)' })),
17 transition(':enter', [ 18 transition(':enter', [
18 style({ transform: 'translateX(-100%)' }), 19 style({ transform: 'translateX(-100%)' }),
19 animate('1s ease-in') 20 animate('1s ease-in')
20 ]), 21 ]),
21 transition(':leave', [ 22 transition(':leave', [
22 animate('1s ease-out', style({ transform: 'translateX(-100%)' })) 23 animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
23 ]) 24 ])
24 ]) 25 ])
25 ] 26 ]
26 }) 27 })
27 export class CarritoComponent implements OnInit, OnDestroy { 28 export class CarritoComponent implements OnInit, OnDestroy {
28 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 29 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
29 maxCantidad = 50; 30 maxCantidad = 50;
30 modalRef: BsModalRef; 31 modalRef: BsModalRef;
31 32
32 constructor( 33 constructor(
33 public articuloService: ArticuloService, 34 public articuloService: ArticuloService,
34 private location: Location, 35 private location: Location,
35 private router: Router, 36 private router: Router,
37 private inactiveScreen: InactiveScreenService,
36 ) { } 38 ) { }
37 39
38 ngOnInit() { 40 ngOnInit() {
39 if (!this.articuloService.carrito.length) { 41 if (!this.articuloService.carrito.length) {
40 this.router.navigate(['']); 42 this.router.navigate(['']);
41 return; 43 return;
42 } 44 }
43 } 45 }
44 46
45 ngOnDestroy() { 47 ngOnDestroy() {
46 if (this.modalRef) this.modalRef.hide(); 48 if (this.modalRef) this.modalRef.hide();
47 } 49 }
48 50
49 deleteArticulo(index: number) { 51 deleteArticulo(index: number) {
50 this.articuloService.carrito.splice(index, 1); 52 this.articuloService.carrito.splice(index, 1);
51 this.articuloService.calcularTotal(); 53 this.articuloService.calcularTotal();
52 } 54 }
53 55
54 substractCant(articulo: IArticulo) { 56 substractCant(articulo: IArticulo) {
55 if (articulo.cantidad === 1) return; 57 if (articulo.cantidad === 1) return;
56 articulo.cantidad--; 58 articulo.cantidad--;
57 this.articuloService.calcularTotal(); 59 this.articuloService.calcularTotal();
58 } 60 }
59 61
60 addCant(articulo: IArticulo) { 62 addCant(articulo: IArticulo) {
61 if (articulo.cantidad >= this.maxCantidad) return; 63 if (articulo.cantidad >= this.maxCantidad) return;
62 articulo.cantidad++; 64 articulo.cantidad++;
63 this.articuloService.calcularTotal(); 65 this.articuloService.calcularTotal();
64 } 66 }
65 67
66 goBack() { 68 goBack() {
67 this.location.back(); 69 this.location.back();
68 } 70 }
69 71
72 @HostListener('document:click', ['$event'])
73 eventListener(event: Event) {
74 clearTimeout(this.inactiveScreen.timerReposo);
75 this.inactiveScreen.startTimeOutInactividad();
76 }
77
70 } 78 }
71 79
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 1f0b738
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="row mx-0 h-80 align-items-end"> 5 <div class="row mx-0 h-80 align-items-end">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 <!-- CUERPO --> 14 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-70"> 15 <div class="row w-100 mr-4 h-70">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22 <div class="col-auto btn-effect h-5"> 22 <div class="col-auto btn-effect h-5">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -100)" 29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"
37 (scroll)="scrollEvent($event)">
37 <div 38 <div
38 class="row mx-4 mb-2 h-32 justify-content-center tab" 39 class="row mx-4 mb-2 h-32 justify-content-center tab"
39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }" 40 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
40 (click)="selectCategoria(-1, 0)"> 41 (click)="selectCategoria(-1, 0)">
41 <img 42 <img
42 draggable="false" 43 draggable="false"
43 ondragstart="return false;" 44 ondragstart="return false;"
44 (contextmenu)="false" 45 (contextmenu)="false"
45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 46 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
46 src="assets/img/logo-spot.svg"> 47 src="assets/img/logo-spot.svg">
47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small> 48 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
48 </div> 49 </div>
49 <div 50 <div
50 class="row mx-4 mb-2 h-32 justify-content-center tab" 51 class="row mx-4 mb-2 h-32 justify-content-center tab"
51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 52 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
52 (click)="selectCategoria(i, categoria.id)" 53 (click)="selectCategoria(i, categoria.id)"
53 *ngFor="let categoria of categorias; let i = index;"> 54 *ngFor="let categoria of categorias; let i = index;">
54 <img 55 <img
55 draggable="false" 56 draggable="false"
56 ondragstart="return false;" 57 ondragstart="return false;"
57 (contextmenu)="false" 58 (contextmenu)="false"
58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 59 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
59 src="{{urlImagenes}}{{categoria.path_imagen}}" 60 src="{{urlImagenes}}{{categoria.path_imagen}}"
60 onerror="this.src='assets/img/image-not-found.jpg'"> 61 onerror="this.src='assets/img/image-not-found.jpg'">
61 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 62 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
62 </div> 63 </div>
63 </div> 64 </div>
64 <div class="col-auto btn-effect h-5"> 65 <div class="col-auto btn-effect h-5">
65 <img 66 <img
66 draggable="false" 67 draggable="false"
67 ondragstart="return false;" 68 ondragstart="return false;"
68 (contextmenu)="false" 69 (contextmenu)="false"
69 class="h-100 d-block mx-auto rotate-90" 70 class="h-100 d-block mx-auto rotate-90"
70 src="assets/img/ir-color.svg" 71 src="assets/img/ir-color.svg"
71 (mousedown)="scrollY(templateCategorias, 100)" 72 (mousedown)="scrollY(templateCategorias, 100)"
72 (mouseup)="mouseup()" 73 (mouseup)="mouseup()"
73 (mouseleave)="mouseup()"> 74 (mouseleave)="mouseup()">
74 </div> 75 </div>
75 </div> 76 </div>
76 </div> 77 </div>
77 <!-- LISTA DE ARTICULOS --> 78 <!-- LISTA DE ARTICULOS -->
78 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"> 79 <div
80 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
81 (scroll)="scrollEvent($event)">
79 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 82 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
80 <!-- ARTICULO --> 83 <!-- ARTICULO -->
81 <div 84 <div
82 class="col px-2 my-1 my-md-3 h-auto" 85 class="col px-2 my-1 my-md-3 h-auto"
83 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 86 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
84 <div class="swing-in-top-fwd card h-auto"> 87 <div class="swing-in-top-fwd card h-auto">
85 <img 88 <img
86 draggable="false" 89 draggable="false"
87 ondragstart="return false;" 90 ondragstart="return false;"
88 (contextmenu)="false" 91 (contextmenu)="false"
89 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 92 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
90 onerror="this.src='assets/img/image-not-found.jpg'" 93 onerror="this.src='assets/img/image-not-found.jpg'"
91 class="card-img-top h-55 rounded-sm"> 94 class="card-img-top h-55 rounded-sm">
92 <div class="row mx-0 py-1 h-auto justify-content-center"> 95 <div class="row mx-0 py-1 h-auto justify-content-center">
93 <p 96 <p
94 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 97 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
95 class="col-12 px-1 h6 h-auto text-center min-h-60"> 98 class="col-12 px-1 h6 h-auto text-center min-h-60">
96 {{articulo.DetArt}} 99 {{articulo.DetArt}}
97 </p> 100 </p>
98 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50"> 101 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
99 <small>{{articulo.DET_LAR}}</small> 102 <small>{{articulo.DET_LAR}}</small>
100 </p> 103 </p>
101 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 104 <div class="col-12 px-1 align-self-end btn-effect h-auto">
102 <div 105 <div
103 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 106 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
104 class="row mx-0 justify-content-between badge-pill" 107 class="row mx-0 justify-content-between badge-pill"
105 (click)="elegirArticulo(articulo)"> 108 (click)="elegirArticulo(articulo)">
106 <div class="col px-0 align-self-center text-white text-right"> 109 <div class="col px-0 align-self-center text-white text-right">
107 {{articulo.PreVen | currency}} 110 {{articulo.PreVen | currency}}
108 </div> 111 </div>
109 <div class="col-5 px-0"> 112 <div class="col-5 px-0">
110 <img 113 <img
111 draggable="false" 114 draggable="false"
112 ondragstart="return false;" 115 ondragstart="return false;"
113 (contextmenu)="false" 116 (contextmenu)="false"
114 class="d-block ml-auto py-1 icon-30" 117 class="d-block ml-auto py-1 icon-30"
115 src="assets/img/ir.svg"> 118 src="assets/img/ir.svg">
116 </div> 119 </div>
117 </div> 120 </div>
118 </div> 121 </div>
119 </div> 122 </div>
120 </div> 123 </div>
121 </div> 124 </div>
122 </div> 125 </div>
123 <!-- BOTON VER MAS --> 126 <!-- BOTON VER MAS -->
124 <div class="row mx-0"> 127 <div class="row mx-0">
125 <div 128 <div
126 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 129 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
127 class="col-12 px-0 mb-2"> 130 class="col-12 px-0 mb-2">
128 <button 131 <button
129 (click)="increaseShow()" 132 (click)="increaseShow()"
130 class="btn btn-block btn-outline-primary"> 133 class="btn btn-block btn-outline-primary">
131 Ver Más 134 Ver Más
132 </button> 135 </button>
133 </div> 136 </div>
134 </div> 137 </div>
135 </div> 138 </div>
136 </div> 139 </div>
137 </div> 140 </div>
138 </div> 141 </div>
139 <!-- FOOTER CARRITO DE COMPRAS --> 142 <!-- FOOTER CARRITO DE COMPRAS -->
140 <div class="row w-90 mx-auto h-auto justify-content-center"> 143 <div class="row w-90 mx-auto h-auto justify-content-center">
141 <div class="col-12 h-75 px-0 border border-primary rounded"> 144 <div class="col-12 h-75 px-0 border border-primary rounded">
142 <!-- CABECERA --> 145 <!-- CABECERA -->
143 <div class="row mx-0 h-15 border-bottom border-primary"> 146 <div class="row mx-0 h-15 border-bottom border-primary">
144 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 147 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
145 </div> 148 </div>
146 <!-- CUERPO --> 149 <!-- CUERPO -->
147 <div class="row h-85 mx-0 justify-content-around"> 150 <div class="row h-85 mx-0 justify-content-around">
148 <!-- BOTON SCROLL IZQUIERDA --> 151 <!-- BOTON SCROLL IZQUIERDA -->
149 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 152 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
150 <img 153 <img
151 draggable="false" 154 draggable="false"
152 ondragstart="return false;" 155 ondragstart="return false;"
153 (contextmenu)="false" 156 (contextmenu)="false"
154 class="icon-30 rotate-180-neg" 157 class="icon-30 rotate-180-neg"
155 src="assets/img/ir-fondo-color.svg" 158 src="assets/img/ir-fondo-color.svg"
156 (mousedown)="scrollX(templateCarrito, -100)" 159 (mousedown)="scrollX(templateCarrito, -100)"
157 (mouseup)="mouseup()" 160 (mouseup)="mouseup()"
158 (mouseleave)="mouseup()"> 161 (mouseleave)="mouseup()">
159 </div> 162 </div>
160 <!-- CARRITO --> 163 <!-- CARRITO -->
161 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 164 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
162 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"> 165 <div
166 #templateCarrito
167 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
168 (scroll)="scrollEvent($event)">
163 <!-- MENSAJE DE ADVERTENCIA --> 169 <!-- MENSAJE DE ADVERTENCIA -->
164 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 170 <div *ngIf="!articuloService.carrito.length" class="col h-100">
165 <p class="text-center py-5">No hay articulos en el carrito</p> 171 <p class="text-center py-5">No hay articulos en el carrito</p>
166 </div> 172 </div>
167 <!-- ARTICULOS --> 173 <!-- ARTICULOS -->
168 <div 174 <div
169 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 175 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
170 *ngFor="let articulo of articuloService.carrito; let i = index;"> 176 *ngFor="let articulo of articuloService.carrito; let i = index;">
171 <div class="swing-in-top-fwd"> 177 <div class="swing-in-top-fwd">
172 <img 178 <img
173 draggable="false" 179 draggable="false"
174 ondragstart="return false;" 180 ondragstart="return false;"
175 (contextmenu)="false" 181 (contextmenu)="false"
176 class="d-block img-fluid p-2 mx-auto rounded" 182 class="d-block img-fluid p-2 mx-auto rounded"
177 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 183 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
178 onerror="this.src='assets/img/image-not-found.jpg'"> 184 onerror="this.src='assets/img/image-not-found.jpg'">
179 <p class="d-block mt-auto text-center text-primary text-truncate"> 185 <p class="d-block mt-auto text-center text-primary text-truncate">
180 <small>{{articulo.DetArt}}</small> 186 <small>{{articulo.DetArt}}</small>
181 </p> 187 </p>
182 </div> 188 </div>
183 </div> 189 </div>
184 </div> 190 </div>
185 </div> 191 </div>
186 <!-- BOTON SCROLL DERECHA --> 192 <!-- BOTON SCROLL DERECHA -->
187 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 193 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
188 <img 194 <img
189 draggable="false" 195 draggable="false"
190 ondragstart="return false;" 196 ondragstart="return false;"
191 (contextmenu)="false" 197 (contextmenu)="false"
192 class="icon-30" 198 class="icon-30"
193 src="assets/img/ir-fondo-color.svg" 199 src="assets/img/ir-fondo-color.svg"
194 (mousedown)="scrollX(templateCarrito, 100)" 200 (mousedown)="scrollX(templateCarrito, 100)"
195 (mouseup)="mouseup()" 201 (mouseup)="mouseup()"
196 (mouseleave)="mouseup()"> 202 (mouseleave)="mouseup()">
197 </div> 203 </div>
198 </div> 204 </div>
199 </div> 205 </div>
200 <!-- VER CARRITO Y TOTAL--> 206 <!-- VER CARRITO Y TOTAL-->
201 <div 207 <div
202 class="col-auto p-0 mt-2 ml-auto h-20" 208 class="col-auto p-0 mt-2 ml-auto h-20"
203 *ngIf="articuloService.carrito.length"> 209 *ngIf="articuloService.carrito.length">
204 <div 210 <div
205 class="btn-effect col-auto align-self-center px-0 bg-white" 211 class="btn-effect col-auto align-self-center px-0 bg-white"
206 [routerLink]="['/carrito']"> 212 [routerLink]="['/carrito']">
207 <div class="row justify-content-between mx-0"> 213 <div class="row justify-content-between mx-0">
208 <div class="col-auto align-self-center text-primary">TOTAL</div> 214 <div class="col-auto align-self-center text-primary">TOTAL</div>
209 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total"> 215 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
210 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 216 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
211 </div> 217 </div>
212 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div> 218 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
213 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 219 <div class="col-auto p-0 bg-primary d-none d-sm-block">
214 <img 220 <img
215 draggable="false" 221 draggable="false"
216 ondragstart="return false;" 222 ondragstart="return false;"
217 (contextmenu)="false" 223 (contextmenu)="false"
218 class="p-2 icon-40" 224 class="p-2 icon-40"
219 src="assets/img/carrito.svg"> 225 src="assets/img/carrito.svg">
220 </div> 226 </div>
221 </div> 227 </div>
222 </div> 228 </div>
223 </div> 229 </div>
224 230
225 </div> 231 </div>
226 </div> 232 </div>
227 233
228 </div> 234 </div>
229 235
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 1f0b738
1 import { Component, OnInit, TemplateRef, OnDestroy } 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 11
11 @Component({ 12 @Component({
12 selector: 'app-seleccion-articulos', 13 selector: 'app-seleccion-articulos',
13 templateUrl: './seleccion-articulos.component.html', 14 templateUrl: './seleccion-articulos.component.html',
14 styleUrls: ['./seleccion-articulos.component.scss'] 15 styleUrls: ['./seleccion-articulos.component.scss']
15 }) 16 })
16 export class SeleccionArticulosComponent implements OnInit, OnDestroy { 17 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
17 showSpinner = true; 18 showSpinner = true;
18 timeoutHandler: any; 19 timeoutHandler: any;
19 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
20 articulos: IArticulo[] = []; 21 articulos: IArticulo[] = [];
21 auxArticulos: IArticulo[] = []; 22 auxArticulos: IArticulo[] = [];
22 showQuantity = 100; 23 showQuantity = 100;
23 queMostrar = 'todos'; 24 queMostrar = 'todos';
24 categoriaActive = null; 25 categoriaActive = null;
25 categorias: ICategoria[] = []; 26 categorias: ICategoria[] = [];
26 searchTerm = ''; 27 searchTerm = '';
27 ordenandoByVendidos = true; 28 ordenandoByVendidos = true;
28 allActive = true; 29 allActive = true;
29 modalRef: BsModalRef; 30 modalRef: BsModalRef;
30 total = 0; 31 total = 0;
31 32
32 constructor( 33 constructor(
33 public articuloService: ArticuloService, 34 public articuloService: ArticuloService,
34 private categoriaService: CategoriaService, 35 private categoriaService: CategoriaService,
35 private modalService: BsModalService, 36 private modalService: BsModalService,
37 private inactiveScreen: InactiveScreenService,
36 ) { } 38 ) { }
37 39
38 ngOnInit() { 40 ngOnInit() {
39 this.getCategorias(); 41 this.getCategorias();
40 } 42 }
41 43
42 ngOnDestroy() { 44 ngOnDestroy() {
43 if (this.modalRef) this.modalRef.hide(); 45 if (this.modalRef) this.modalRef.hide();
44 } 46 }
45 47
46 getCategorias() { 48 getCategorias() {
47 this.categoriaService.getAll() 49 this.categoriaService.getAll()
48 .subscribe((categorias: ICategoria[]) => { 50 .subscribe((categorias: ICategoria[]) => {
49 switch (this.queMostrar) { 51 switch (this.queMostrar) {
50 case 'todos': 52 case 'todos':
51 this.categorias = categorias; 53 this.categorias = categorias;
52 this.categoriaActive = 0; 54 this.categoriaActive = 0;
53 break; 55 break;
54 case 'promociones': 56 case 'promociones':
55 this.categorias = categorias; 57 this.categorias = categorias;
56 this.categoriaActive = 19; 58 this.categoriaActive = 19;
57 break; 59 break;
58 case 'ordenar': 60 case 'ordenar':
59 this.categorias = categorias.filter((categoria: ICategoria) => { 61 this.categorias = categorias.filter((categoria: ICategoria) => {
60 return categoria.ES_PEDIDO; 62 return categoria.ES_PEDIDO;
61 }); 63 });
62 this.categoriaActive = 4; 64 this.categoriaActive = 4;
63 break; 65 break;
64 default: 66 default:
65 this.categorias = categorias; 67 this.categorias = categorias;
66 this.categoriaActive = 0; 68 this.categoriaActive = 0;
67 break; 69 break;
68 } 70 }
69 !localStorage.getItem('articulos') ? 71 !localStorage.getItem('articulos') ?
70 this.getProductos() : 72 this.getProductos() :
71 this.setProductos(); 73 this.setProductos();
72 }); 74 });
73 } 75 }
74 76
75 getProductos() { 77 getProductos() {
76 this.articuloService.getAll() 78 this.articuloService.getAll()
77 .subscribe((result: IArticulo[]) => { 79 .subscribe((result: IArticulo[]) => {
78 this.articuloService.setArticulosSinImagen(result); 80 this.articuloService.setArticulosSinImagen(result);
79 if (this.queMostrar === 'ordenar') { 81 if (this.queMostrar === 'ordenar') {
80 this.categorias.forEach((categoria: ICategoria) => { 82 this.categorias.forEach((categoria: ICategoria) => {
81 const tempArticulos = result.filter((articulo: IArticulo) => { 83 const tempArticulos = result.filter((articulo: IArticulo) => {
82 return articulo.categoria_selfservice === categoria.id; 84 return articulo.categoria_selfservice === categoria.id;
83 }); 85 });
84 result = tempArticulos; 86 result = tempArticulos;
85 }); 87 });
86 } 88 }
87 localStorage.setItem('articulos', JSON.stringify(result)); 89 localStorage.setItem('articulos', JSON.stringify(result));
88 this.setProductos(); 90 this.setProductos();
89 }, (error) => { 91 }, (error) => {
90 this.showSpinner = false; 92 this.showSpinner = false;
91 console.error(error); 93 console.error(error);
92 }); 94 });
93 } 95 }
94 96
95 setProductos() { 97 setProductos() {
96 this.articulos = JSON.parse(localStorage.getItem('articulos')); 98 this.articulos = JSON.parse(localStorage.getItem('articulos'));
97 this.filterItems(); 99 this.filterItems();
98 } 100 }
99 101
100 filterItems() { 102 filterItems() {
101 if (this.categoriaActive === 0) { 103 if (this.categoriaActive === 0) {
102 this.auxArticulos = this.articulos; 104 this.auxArticulos = this.articulos;
103 return; 105 return;
104 } 106 }
105 this.auxArticulos = this.articulos.filter(x => { 107 this.auxArticulos = this.articulos.filter(x => {
106 return x.categoria_selfservice === this.categoriaActive; 108 return x.categoria_selfservice === this.categoriaActive;
107 }); 109 });
108 this.ordenar(); 110 this.ordenar();
109 } 111 }
110 112
111 ordenar() { 113 ordenar() {
112 if (this.ordenandoByVendidos) { 114 if (this.ordenandoByVendidos) {
113 this.auxArticulos.sort((a, b) => { 115 this.auxArticulos.sort((a, b) => {
114 return b.cantidadVendida - a.cantidadVendida; 116 return b.cantidadVendida - a.cantidadVendida;
115 }); 117 });
116 } 118 }
117 } 119 }
118 120
119 selectCategoria(index: number, idCategoria?: number) { 121 selectCategoria(index: number, idCategoria?: number) {
120 if (this.categoriaActive === idCategoria) return; 122 if (this.categoriaActive === idCategoria) return;
121 this.categoriaActive = idCategoria; 123 this.categoriaActive = idCategoria;
122 this.allActive = idCategoria === 0 ? true : false; 124 this.allActive = idCategoria === 0 ? true : false;
123 this.categorias.forEach((categoria, i) => { 125 this.categorias.forEach((categoria, i) => {
124 categoria.selected = index === i ? true : false; 126 categoria.selected = index === i ? true : false;
125 }); 127 });
126 this.filterItems(); 128 this.filterItems();
127 } 129 }
128 130
129 elegirArticulo(articulo: IArticulo) { 131 elegirArticulo(articulo: IArticulo) {
130 if (!articulo.FPP) { 132 if (!articulo.FPP) {
131 this.getByID(articulo.id); 133 this.getByID(articulo.id);
132 } else { 134 } else {
133 this.openModalPromos(articulo); 135 this.openModalPromos(articulo);
134 } 136 }
135 } 137 }
136 138
137 getByID(id: number) { 139 getByID(id: number) {
138 this.articuloService.getById(id) 140 this.articuloService.getById(id)
139 .subscribe((res: IArticulo) => { 141 .subscribe((res: IArticulo) => {
140 res.cantidad = 1; 142 res.cantidad = 1;
141 this.articuloService.setArticulo(res); 143 this.articuloService.setArticulo(res);
142 }, err => console.error(err)); 144 }, err => console.error(err));
143 } 145 }
144 146
145 openModalPromos(articulo: IArticulo) { 147 openModalPromos(articulo: IArticulo) {
146 this.modalRef = this.modalService.show(PromocionComponent, 148 this.modalRef = this.modalService.show(PromocionComponent,
147 { 149 {
148 initialState: { 150 initialState: {
149 idArticulo: articulo.id 151 idArticulo: articulo.id
150 }, 152 },
151 class: 'modal-promo modal-dialog-centered' 153 class: 'modal-promo modal-dialog-centered'
152 }); 154 });
153 } 155 }
154 156
155 increaseShow() { 157 increaseShow() {
156 this.showQuantity += 100; 158 this.showQuantity += 100;
157 } 159 }
158 160
161 @HostListener("scroll", ['$event'])
162 scrollEvent(event: Event) {
163 clearTimeout(this.inactiveScreen.timerReposo);
164 this.inactiveScreen.startTimeOutInactividad();
165 }
166
159 mouseup() { 167 mouseup() {
160 if (!this.timeoutHandler) return; 168 if (!this.timeoutHandler) return;
161 clearInterval(this.timeoutHandler); 169 clearInterval(this.timeoutHandler);
162 } 170 }
163 171
164 scrollY(el: HTMLElement, value) { 172 scrollY(el: HTMLElement, value) {
165 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 173 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
166 this.timeoutHandler = setInterval(() => { 174 this.timeoutHandler = setInterval(() => {
167 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 175 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
168 }, 500); 176 }, 500);
169 } 177 }
170 178
171 scrollX(el: HTMLElement, value) { 179 scrollX(el: HTMLElement, value) {
172 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 180 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
173 this.timeoutHandler = setInterval(() => { 181 this.timeoutHandler = setInterval(() => {
174 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 182 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
175 }, 500); 183 }, 500);
176 } 184 }
177 } 185 }
178 186
src/app/services/inactive-screen/inactive-screen.service.spec.ts
Diff comments   View file @ 1f0b738
File was created 1 import { TestBed } from '@angular/core/testing';
2
3 import { InactiveScreenService } from './inactive-screen.service';
4
5 describe('InactiveScreenService', () => {
6 beforeEach(() => TestBed.configureTestingModule({}));
7
8 it('should be created', () => {
9 const service: InactiveScreenService = TestBed.get(InactiveScreenService);
10 expect(service).toBeTruthy();
11 });
12 });
13
src/app/services/inactive-screen/inactive-screen.service.ts
Diff comments   View file @ 1f0b738
File was created 1 import { Injectable } from '@angular/core';
2 import { Router } from '@angular/router';
3
4 @Injectable({
5 providedIn: 'root'
6 })
7 export class InactiveScreenService {
8 timerReposo: any;
9
10 constructor(
11 private router: Router,
12 ) { }
13
14 startTimeOutInactividad() {
15 this.timerReposo = setTimeout(() => {
16 this.router.navigate(['cancelar-compra']);
17 }, 90000);
18 }
19 }
20
src/app/shared/promocion/promocion.component.html
Diff comments   View file @ 1f0b738
1 <div class="modal-header bg-primary rounded-top pt-4 px-2"> 1 <div class="modal-header bg-primary rounded-top pt-4 px-2">
2 <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length"> 2 <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length">
3 <div class="col-8"> 3 <div class="col-8">
4 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p> 4 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
5 </div> 5 </div>
6 <div class="col-4 align-self-center"> 6 <div class="col-4 align-self-center">
7 <div 7 <div
8 class="row mx-0 justify-content-between bg-white badge-pill" 8 class="row mx-0 justify-content-between bg-white badge-pill"
9 (click)="elegirPromo(articulosPromo[0])"> 9 (click)="elegirPromo(articulosPromo[0])">
10 <div class="col px-0 align-self-center text-primary"> 10 <div class="col px-0 align-self-center text-primary">
11 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> 11 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
12 </div> 12 </div>
13 <div class="col-3 px-0"> 13 <div class="col-3 px-0">
14 <img 14 <img
15 draggable="false" 15 draggable="false"
16 ondragstart="return false;" 16 ondragstart="return false;"
17 (contextmenu)="false" 17 (contextmenu)="false"
18 class="d-block ml-auto py-1 icon-30 mr-2 pt-2" 18 class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
19 src="assets/img/ir-color.svg"> 19 src="assets/img/ir-color.svg">
20 </div> 20 </div>
21 </div> 21 </div>
22 </div> 22 </div>
23 </div> 23 </div>
24 </div> 24 </div>
25 <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length"> 25 <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
26 <div class="row mx-0 w-100"> 26 <div class="row mx-0 w-100">
27 <div class="col-9"> 27 <div class="col-9">
28 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p> 28 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
29 <h1 class="text-white mb-4">en un combo?</h1> 29 <h1 class="text-white mb-4">en un combo?</h1>
30 </div> 30 </div>
31 <div class="col-3"> 31 <div class="col-3">
32 <img 32 <img
33 draggable="false" 33 draggable="false"
34 ondragstart="return false;" 34 ondragstart="return false;"
35 (contextmenu)="false" 35 (contextmenu)="false"
36 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}" 36 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
37 onerror="this.src='assets/img/image-not-found.jpg'" 37 onerror="this.src='assets/img/image-not-found.jpg'"
38 class="card-img-top img-fluid rounded-circle"> 38 class="card-img-top img-fluid rounded-circle">
39 </div> 39 </div>
40 </div> 40 </div>
41 <div class="row mx-0 lista-promociones scroll-y-visible"> 41 <div
42 class="row mx-0 lista-promociones scroll-y-visible"
43 (scroll)="scrollEvent($event)">
42 <div class="col-12"> 44 <div class="col-12">
43 <div *ngFor="let promo of promociones"> 45 <div *ngFor="let promo of promociones">
44 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)"> 46 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
45 <div class="d-flex"> 47 <div class="d-flex">
46 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p> 48 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
47 <p class="font-weight-bold my-auto pr-2"> 49 <p class="font-weight-bold my-auto pr-2">
48 <span>{{promo.PreVen | currency}}</span> 50 <span>{{promo.PreVen | currency}}</span>
49 </p> 51 </p>
50 <img 52 <img
51 draggable="false" 53 draggable="false"
52 ondragstart="return false;" 54 ondragstart="return false;"
53 (contextmenu)="false" 55 (contextmenu)="false"
54 class="d-block icon-30 py-1" 56 class="d-block icon-30 py-1"
55 src="assets/img/ir-color.svg"> 57 src="assets/img/ir-color.svg">
56 </div> 58 </div>
57 </div> 59 </div>
58 </div> 60 </div>
59 </div> 61 </div>
60 </div> 62 </div>
61 </div> 63 </div>
62 64
src/app/shared/promocion/promocion.component.ts
Diff comments   View file @ 1f0b738
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { BsModalRef } from 'ngx-bootstrap/modal'; 2 import { BsModalRef } from 'ngx-bootstrap/modal';
3 import { IArticulo } from 'src/app/interfaces/IArticulo'; 3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 4 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
5 import { PromocionService } from 'src/app/services/promocion/promocion.service'; 5 import { PromocionService } from 'src/app/services/promocion/promocion.service';
6 import { Subject } from 'rxjs'; 6 import { Subject } from 'rxjs';
7 import { APP_SETTINGS } from 'src/etc/AppSettings'; 7 import { APP_SETTINGS } from 'src/etc/AppSettings';
8 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
8 9
9 @Component({ 10 @Component({
10 selector: 'app-promocion', 11 selector: 'app-promocion',
11 templateUrl: './promocion.component.html', 12 templateUrl: './promocion.component.html',
12 styleUrls: ['./promocion.component.scss'] 13 styleUrls: ['./promocion.component.scss']
13 }) 14 })
14 export class PromocionComponent implements OnInit { 15 export class PromocionComponent implements OnInit {
15 idArticulo: number; 16 idArticulo: number;
16 articulosPromo: IArticulo[] = []; 17 articulosPromo: IArticulo[] = [];
17 promociones: IArticulo[] = []; 18 promociones: IArticulo[] = [];
18 onClose: Subject<any>; 19 onClose: Subject<any>;
19 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
20 21
21 constructor( 22 constructor(
22 public modalRef: BsModalRef, 23 public modalRef: BsModalRef,
23 private articuloService: ArticuloService, 24 private articuloService: ArticuloService,
24 private promocionService: PromocionService, 25 private promocionService: PromocionService,
26 private inactiveScreen: InactiveScreenService,
25 ) { 27 ) {
26 this.onClose = new Subject(); 28 this.onClose = new Subject();
27 } 29 }
28 30
29 ngOnInit() { 31 ngOnInit() {
30 this.articuloService.getById(this.idArticulo) 32 this.articuloService.getById(this.idArticulo)
31 .subscribe((res: IArticulo) => { 33 .subscribe((res: IArticulo) => {
32 this.articulosPromo[0] = res; 34 this.articulosPromo[0] = res;
33 this.getPromociones(); 35 this.getPromociones();
34 }, err => console.error(err)); 36 }, err => console.error(err));
35 } 37 }
36 38
37 elegirPromo(promo: IArticulo) { 39 elegirPromo(promo: IArticulo) {
38 promo.cantidad = 1; 40 promo.cantidad = 1;
39 this.articuloService.setArticulo(promo); 41 this.articuloService.setArticulo(promo);
40 this.modalRef.hide(); 42 this.modalRef.hide();
41 } 43 }
42 44
43 getPromociones() { 45 getPromociones() {
44 const sector = this.articulosPromo[0].CodSec; 46 const sector = this.articulosPromo[0].CodSec;
45 const codigo = this.articulosPromo[0].CodArt; 47 const codigo = this.articulosPromo[0].CodArt;
46 this.promocionService.getPromociones(sector, codigo) 48 this.promocionService.getPromociones(sector, codigo)
47 .subscribe((res: IArticulo[]) => { 49 .subscribe((res: IArticulo[]) => {
48 this.promociones = res; 50 this.promociones = res;
49 }, error => { console.error(error); }); 51 }, error => { console.error(error); });
50 } 52 }
51 53
54 @HostListener('document:click', ['$event'])
55 eventListener(event: Event) {
56 clearTimeout(this.inactiveScreen.timerReposo);
57 this.inactiveScreen.startTimeOutInactividad();
58 }
59
52 } 60 }
53 61