Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit d0335a69929bb780a9f98e83bcb02c671b7b4264

Authored by Marcelo Puebla
1 parent b9d91aaa0b
Exists in develop

Reseteado timeout de inactividad con evento scroll

Showing 9 changed files with 80 additions and 22 deletions   Show diff stats
src/app/modules/admin/admin.component.ts
Diff comments   View file @ d0335a6
1 1 import { Component, OnInit, HostListener, OnDestroy } from '@angular/core';
2 2 import { Router } from '@angular/router';
  3 +import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
3 4  
4 5 @Component({
5 6 selector: 'app-admin',
... ... @@ -8,30 +9,22 @@ import { Router } from '@angular/router';
8 9 })
9 10  
10 11 export class AdminComponent implements OnInit, OnDestroy {
11   - timerReposo: any;
12   -
13 12 constructor(
14   - private router: Router,
  13 + private inactiveScreen: InactiveScreenService,
15 14 ) { }
16 15  
17 16 ngOnInit() {
18   - this.startTimeOutInactividad();
  17 + this.inactiveScreen.startTimeOutInactividad();
19 18 }
20 19  
21 20 ngOnDestroy() {
22   - clearTimeout(this.timerReposo);
  21 + clearTimeout(this.inactiveScreen.timerReposo);
23 22 }
24 23  
25 24 @HostListener('document:click', ['$event'])
26   - documentClick(event: MouseEvent) {
27   - clearTimeout(this.timerReposo);
28   - this.startTimeOutInactividad();
29   - }
30   -
31   - startTimeOutInactividad() {
32   - this.timerReposo = setTimeout(() => {
33   - this.router.navigate(['cancelar-compra']);
34   - }, 90000);
  25 + eventListener(event: Event) {
  26 + clearTimeout(this.inactiveScreen.timerReposo);
  27 + this.inactiveScreen.startTimeOutInactividad();
35 28 }
36 29  
37 30 }
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ d0335a6
... ... @@ -13,7 +13,9 @@
13 13 </div>
14 14  
15 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 19 <!-- MENSAJE DE ADVERTENCIA -->
18 20 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
19 21 <p class="h5 text-center">No hay artículos en el carrito</p>
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ d0335a6
1   -import { Component, OnInit, OnDestroy } from '@angular/core';
  1 +import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
2 2 import { Location } from '@angular/common';
3 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 4 import { APP_SETTINGS } from 'src/etc/AppSettings';
... ... @@ -6,6 +6,7 @@ import { trigger, state, style, transition, animate } from &#39;@angular/animations&#39;
6 6 import { IArticulo } from 'src/app/interfaces/IArticulo';
7 7 import { Router } from '@angular/router';
8 8 import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
  9 +import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
9 10  
10 11 @Component({
11 12 selector: 'app-carrito',
... ... @@ -33,6 +34,7 @@ export class CarritoComponent implements OnInit, OnDestroy {
33 34 public articuloService: ArticuloService,
34 35 private location: Location,
35 36 private router: Router,
  37 + private inactiveScreen: InactiveScreenService,
36 38 ) { }
37 39  
38 40 ngOnInit() {
... ... @@ -67,4 +69,10 @@ export class CarritoComponent implements OnInit, OnDestroy {
67 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 }
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ d0335a6
... ... @@ -33,7 +33,8 @@
33 33 <!-- CATEGORIAS -->
34 34 <div
35 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 38 <div
38 39 class="row mx-4 mb-2 h-32 justify-content-center tab"
39 40 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
... ... @@ -75,7 +76,9 @@
75 76 </div>
76 77 </div>
77 78 <!-- LISTA DE ARTICULOS -->
78   - <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
  79 + <div
  80 + class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible"
  81 + (scroll)="scrollEvent($event)">
79 82 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
80 83 <!-- ARTICULO -->
81 84 <div
... ... @@ -159,7 +162,10 @@
159 162 </div>
160 163 <!-- CARRITO -->
161 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 169 <!-- MENSAJE DE ADVERTENCIA -->
164 170 <div *ngIf="!articuloService.carrito.length" class="col h-100">
165 171 <p class="text-center py-5">No hay articulos en el carrito</p>
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ d0335a6
1   -import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
  1 +import { Component, OnInit, TemplateRef, OnDestroy, HostListener } from '@angular/core';
2 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 4 import { IArticulo } from 'src/app/interfaces/IArticulo';
... ... @@ -7,6 +7,7 @@ import { ICategoria } from &#39;src/app/interfaces/ICategoria&#39;;
7 7 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
8 8 import { PromocionService } from 'src/app/services/promocion/promocion.service';
9 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 12 @Component({
12 13 selector: 'app-seleccion-articulos',
... ... @@ -33,6 +34,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
33 34 public articuloService: ArticuloService,
34 35 private categoriaService: CategoriaService,
35 36 private modalService: BsModalService,
  37 + private inactiveScreen: InactiveScreenService,
36 38 ) { }
37 39  
38 40 ngOnInit() {
... ... @@ -156,6 +158,12 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
156 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 167 mouseup() {
160 168 if (!this.timeoutHandler) return;
161 169 clearInterval(this.timeoutHandler);
src/app/services/inactive-screen/inactive-screen.service.spec.ts
Diff comments   View file @ d0335a6
... ... @@ -0,0 +1,12 @@
  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 +});
src/app/services/inactive-screen/inactive-screen.service.ts
Diff comments   View file @ d0335a6
... ... @@ -0,0 +1,19 @@
  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 +}
src/app/shared/promocion/promocion.component.html
Diff comments   View file @ d0335a6
... ... @@ -38,7 +38,9 @@
38 38 class="card-img-top img-fluid rounded-circle">
39 39 </div>
40 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 44 <div class="col-12">
43 45 <div *ngFor="let promo of promociones">
44 46 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
src/app/shared/promocion/promocion.component.ts
Diff comments   View file @ d0335a6
1   -import { Component, OnInit } from '@angular/core';
  1 +import { Component, OnInit, HostListener } from '@angular/core';
2 2 import { BsModalRef } from 'ngx-bootstrap/modal';
3 3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 4 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
5 5 import { PromocionService } from 'src/app/services/promocion/promocion.service';
6 6 import { Subject } from 'rxjs';
7 7 import { APP_SETTINGS } from 'src/etc/AppSettings';
  8 +import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
8 9  
9 10 @Component({
10 11 selector: 'app-promocion',
... ... @@ -22,6 +23,7 @@ export class PromocionComponent implements OnInit {
22 23 public modalRef: BsModalRef,
23 24 private articuloService: ArticuloService,
24 25 private promocionService: PromocionService,
  26 + private inactiveScreen: InactiveScreenService,
25 27 ) {
26 28 this.onClose = new Subject();
27 29 }
... ... @@ -49,4 +51,10 @@ export class PromocionComponent implements OnInit {
49 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 }