Luis Suarez / autoservicio-axion

Browse Code »

Commit d0335a69929bb780a9f98e83bcb02c671b7b4264

Authored by Marcelo Puebla 2020-01-22 13:00:10 -0300

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

 import { Component, OnInit, HostListener, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
+import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 @Component({
   selector: 'app-admin',
   templateUrl: './admin.component.html',
   styleUrls: ['./admin.component.scss']
 })
 export class AdminComponent implements OnInit, OnDestroy {
-  timerReposo: any;
   constructor(
-    private router: Router,
+    private inactiveScreen: InactiveScreenService,
   ) { }
   ngOnInit() {
-    this.startTimeOutInactividad();
+    this.inactiveScreen.startTimeOutInactividad();
   }
   ngOnDestroy() {
-    clearTimeout(this.timerReposo);
+    clearTimeout(this.inactiveScreen.timerReposo);
   }
   @HostListener('document:click', ['$event'])
-  documentClick(event: MouseEvent) {
+  eventListener(event: Event) {
-    clearTimeout(this.timerReposo);
+    clearTimeout(this.inactiveScreen.timerReposo);
-    this.startTimeOutInactividad();
+    this.inactiveScreen.startTimeOutInactividad();
-  }
-  startTimeOutInactividad() {
-    this.timerReposo = setTimeout(() => {
-      this.router.navigate(['cancelar-compra']);
-    }, 90000);
   }
 }

src/app/modules/carrito/carrito.component.html

Diff comments View file @ d0335a6

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
   <div class="h-75">
     <!-- CABECERA -->
     <div class="row mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 px-0 py-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
         </div>
       </div>
     </div>
     <!-- CARRITO -->
-    <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
+    <div
+      class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"
+      (scroll)="scrollEvent($event)">
       <!-- MENSAJE DE ADVERTENCIA -->
       <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
         <p class="h5 text-center">No hay artículos en el carrito</p>
       </div>
       <!-- ARTICULOS -->
       <div
         class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
         *ngFor="let articulo of articuloService.carrito; let i = index;"
         @EnterLeave>
         <!-- ARTICULO -->
         <div class="h-100 px-2 py-4 border border-primary rounded-sm">
           <div class="row mx-0 h-100">
             <!-- NOMBRE E IMAGEN -->
             <div class="col-3 h-100 border-right border-primary align-self-center">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="d-block mx-auto h-55 rounded-sm shadow-sm"
                 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                 onerror="this.src='assets/img/image-not-found.jpg'">
               <div class="row mx-0 h-45">
                 <p class="col text-primary text-truncate align-self-end">
                   <small>{{articulo.DetArt}}</small>
                 </p>
               </div>
             </div>
             <!-- CANTIDAD -->
             <div class="col-3 border-right border-primary">
               <p><small>CANT</small></p>
               <div class="row mt-2 mx-0">
                 <div class="col-12 h-auto">
                   <div class="row mx-0 justify-content-between bg-primary badge-pill">
                     <!-- BOTON MENOS -->
                     <div class="col-auto px-0">
                       <img
                         draggable="false"
                         ondragstart="return false;"
                         (contextmenu)="false"
                         class="d-block ml-auto py-2 icon-20 btn-effect"
                         src="assets/img/menos-blanco.svg"
                         (click)="substractCant(articulo)">
                     </div>
                     <!-- CANTIDAD -->
                     <div class="col px-0 align-self-center text-white">
                       <p><small>{{articulo.cantidad}}</small></p>
                     </div>
                     <!-- BOTON MAS -->
                     <div class="col-auto px-0">
                       <img
                         draggable="false"
                         ondragstart="return false;"
                         (contextmenu)="false"
                         class="d-block ml-auto py-2 icon-20 btn-effect"
                         src="assets/img/mas-blanco.svg"
                         (click)="addCant(articulo)">
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- OPCIONALES -->
             <!-- <div class="col-3 border-right border-primary">
               <p><small>OPCIONALES</small></p>
              <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
               <div class="row mx-0 mt-2 justify-content-center">
                 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
                   <span>
                     <small class="pr-2">CAMBIAR</small>
                     <img
                       draggable="false"
                       ondragstart="return false;"
                       (contextmenu)="false"
                       class="icon-20"
                       src="assets/img/ir.svg">
                   </span>
                 </div>
               </div> -->
             <!-- PRECIO -->
             <div class="col-3 border-right border-primary">
               <p><small>PRECIO</small></p>
               <div class="py-1 mt-2 badge-pill bg-dark text-white">
                 <p><small>{{articulo.PreVen | currency}}</small></p>
               </div>
             </div>
             <!-- ELIMINAR -->
             <div class="col-3 align-self-center">
               <div class="row mx-0 justify-content-center">
                 <div
                   class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
                   (click)="deleteArticulo(i)">
                   <span>
                     <small class="pr-2">ELIMINAR</small>
                     <img
                       draggable="false"
                       ondragstart="return false;"
                       (contextmenu)="false"
                       class="icon-20 rotate-45"
                       src="assets/img/mas-blanco.svg">
                   </span>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- TOTAL -->
     <div class="row mx-3 mt-2 h-auto justify-content-end">
       <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
       <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
         <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
       </div>
     </div>
     <!-- CONTINUAR -->
     <div
       *ngIf="articuloService.carrito.length"
       class="row mx-3 mt-4 h-auto justify-content-end">
       <div
         class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
         [routerLink]="['/forma-pago']">
         <span>
           <small class="pr-2">CONTINUAR</small>
           <img
             draggable="false"
             ondragstart="return false;"
             (contextmenu)="false"
             class="icon-20"
             src="assets/img/ir.svg">
         </span>
       </div>
     </div>
     <!-- SEGUIR COMPRANDO -->
     <!-- <div class="row mx-3 mt-2 h-auto justify-content-end">
       <div
         class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
         (click)="goBack()">
         <span>
           <small class="pr-2">SEGUIR COMPRANDO</small>
           <img
             draggable="false"
             ondragstart="return false;"
             (contextmenu)="false"
             class="icon-20"
             src="assets/img/ir.svg">
         </span>
       </div>
     </div> -->
   </div>
 </div>

src/app/modules/carrito/carrito.component.ts

Diff comments View file @ d0335a6

-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { Location } from '@angular/common';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { Router } from '@angular/router';
 import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
+import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 @Component({
   selector: 'app-carrito',
   templateUrl: './carrito.component.html',
   styleUrls: ['./carrito.component.scss'],
   animations: [
     trigger('EnterLeave', [
       state('flyIn', style({ transform: 'translateX(0)' })),
       transition(':enter', [
         style({ transform: 'translateX(-100%)' }),
         animate('1s ease-in')
       ]),
       transition(':leave', [
         animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
       ])
     ])
   ]
 })
 export class CarritoComponent implements OnInit, OnDestroy {
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   maxCantidad = 50;
   modalRef: BsModalRef;
   constructor(
     public articuloService: ArticuloService,
     private location: Location,
     private router: Router,
+    private inactiveScreen: InactiveScreenService,
   ) { }
   ngOnInit() {
     if (!this.articuloService.carrito.length) {
       this.router.navigate(['']);
       return;
     }
   }
   ngOnDestroy() {
     if (this.modalRef) this.modalRef.hide();
   }
   deleteArticulo(index: number) {
     this.articuloService.carrito.splice(index, 1);
     this.articuloService.calcularTotal();
   }
   substractCant(articulo: IArticulo) {
     if (articulo.cantidad === 1) return;
     articulo.cantidad--;
     this.articuloService.calcularTotal();
   }
   addCant(articulo: IArticulo) {
     if (articulo.cantidad >= this.maxCantidad) return;
     articulo.cantidad++;
     this.articuloService.calcularTotal();
   }
   goBack() {
     this.location.back();
   }
+  @HostListener('document:click', ['$event'])
+  eventListener(event: Event) {
+    clearTimeout(this.inactiveScreen.timerReposo);
+    this.inactiveScreen.startTimeOutInactividad();
+  }
 }

src/app/modules/seleccion-articulos/seleccion-articulos.component.html

Diff comments View file @ d0335a6

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
   <div class="row mx-0 h-80 align-items-end">
     <!-- CABECERA -->
     <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 p-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
         </div>
       </div>
     </div>
     <!-- CUERPO -->
     <div class="row w-100 mr-4 h-70">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <!-- FILTRO CATEGORIAS -->
           <div class="col-5 col-sm-3 col-xl-2 h-100">
             <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
             <div class="row mx-0 h-94 justify-content-center align-items-center">
               <div class="col-auto btn-effect h-5">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90-neg"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, -100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
               <!-- CATEGORIAS -->
               <div
                 #templateCategorias
-                class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
+                class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"
+                (scroll)="scrollEvent($event)">
                 <div
                   class="row mx-4 mb-2 h-32 justify-content-center tab"
                   [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
                   (click)="selectCategoria(-1, 0)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/logo-spot.svg">
                   <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
                 </div>
                 <div
                   class="row mx-4 mb-2 h-32 justify-content-center tab"
                   [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
                   (click)="selectCategoria(i, categoria.id)"
                   *ngFor="let categoria of categorias; let i = index;">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="{{urlImagenes}}{{categoria.path_imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'">
                   <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
                 </div>
               </div>
               <div class="col-auto btn-effect h-5">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, 100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
             </div>
           </div>
           <!-- LISTA DE ARTICULOS -->
-          <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
+          <div
+            class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible"
+            (scroll)="scrollEvent($event)">
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
               <!-- ARTICULO -->
               <div
                 class="col px-2 my-1 my-md-3 h-auto"
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
                 <div class="swing-in-top-fwd card h-auto">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'"
                     class="card-img-top h-55 rounded-sm">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
                     <p
                     [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
                       class="col-12 px-1 h6 h-auto text-center min-h-60">
                       {{articulo.DetArt}}
                     </p>
                     <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
                       <small>{{articulo.DET_LAR}}</small>
                     </p>
                     <div class="col-12 px-1 align-self-end btn-effect h-auto">
                       <div
                         [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
                         class="row mx-0 justify-content-between badge-pill"
                         (click)="elegirArticulo(articulo)">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{articulo.PreVen | currency}}
                         </div>
                         <div class="col-5 px-0">
                           <img
                             draggable="false"
                             ondragstart="return false;"
                             (contextmenu)="false"
                             class="d-block ml-auto py-1 icon-30"
                             src="assets/img/ir.svg">
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- BOTON VER MAS -->
             <div class="row mx-0">
               <div
                 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
                 class="col-12 px-0 mb-2">
                 <button
                   (click)="increaseShow()"
                   class="btn btn-block btn-outline-primary">
                   Ver Más
                 </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- FOOTER CARRITO DE COMPRAS -->
     <div class="row w-90 mx-auto h-auto justify-content-center">
       <div class="col-12 h-75 px-0 border border-primary rounded">
         <!-- CABECERA -->
         <div class="row mx-0 h-15 border-bottom border-primary">
           <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
         <!-- CUERPO -->
         <div class="row h-85 mx-0 justify-content-around">
           <!-- BOTON SCROLL IZQUIERDA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30 rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
           <!-- CARRITO -->
           <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
-            <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
+            <div
+              #templateCarrito
+              class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
+              (scroll)="scrollEvent($event)">
               <!-- MENSAJE DE ADVERTENCIA -->
               <div *ngIf="!articuloService.carrito.length" class="col h-100">
                 <p class="text-center py-5">No hay articulos en el carrito</p>
               </div>
               <!-- ARTICULOS -->
               <div
                 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
                 *ngFor="let articulo of articuloService.carrito; let i = index;">
                 <div class="swing-in-top-fwd">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="d-block img-fluid p-2 mx-auto rounded"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'">
                   <p class="d-block mt-auto text-center text-primary text-truncate">
                     <small>{{articulo.DetArt}}</small>
                   </p>
                 </div>
               </div>
             </div>
           </div>
           <!-- BOTON SCROLL DERECHA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
         </div>
       </div>
       <!-- VER CARRITO Y TOTAL-->
       <div
         class="col-auto p-0 mt-2 ml-auto h-20"
         *ngIf="articuloService.carrito.length">
         <div
           class="btn-effect col-auto align-self-center px-0 bg-white"
           [routerLink]="['/carrito']">
           <div class="row justify-content-between mx-0">
             <div class="col-auto align-self-center text-primary">TOTAL</div>
             <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
               <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
             </div>
             <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
             <div class="col-auto p-0 bg-primary d-none d-sm-block">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="p-2 icon-40"
                 src="assets/img/carrito.svg">
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

src/app/modules/seleccion-articulos/seleccion-articulos.component.ts

Diff comments View file @ d0335a6

-import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, TemplateRef, OnDestroy, HostListener } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { ICategoria } from 'src/app/interfaces/ICategoria';
 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
 import { PromocionService } from 'src/app/services/promocion/promocion.service';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
+import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 @Component({
   selector: 'app-seleccion-articulos',
   templateUrl: './seleccion-articulos.component.html',
   styleUrls: ['./seleccion-articulos.component.scss']
 })
 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
   showSpinner = true;
   timeoutHandler: any;
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   articulos: IArticulo[] = [];
   auxArticulos: IArticulo[] = [];
   showQuantity = 100;
   queMostrar = 'todos';
   categoriaActive = null;
   categorias: ICategoria[] = [];
   searchTerm = '';
   ordenandoByVendidos = true;
   allActive = true;
   modalRef: BsModalRef;
   total = 0;
   constructor(
     public articuloService: ArticuloService,
     private categoriaService: CategoriaService,
     private modalService: BsModalService,
+    private inactiveScreen: InactiveScreenService,
   ) { }
   ngOnInit() {
     this.getCategorias();
   }
   ngOnDestroy() {
     if (this.modalRef) this.modalRef.hide();
   }
   getCategorias() {
     this.categoriaService.getAll()
       .subscribe((categorias: ICategoria[]) => {
         switch (this.queMostrar) {
           case 'todos':
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
           case 'promociones':
             this.categorias = categorias;
             this.categoriaActive = 19;
             break;
           case 'ordenar':
             this.categorias = categorias.filter((categoria: ICategoria) => {
               return categoria.ES_PEDIDO;
             });
             this.categoriaActive = 4;
             break;
           default:
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
         }
         !localStorage.getItem('articulos') ?
           this.getProductos() :
           this.setProductos();
       });
   }
   getProductos() {
     this.articuloService.getAll()
       .subscribe((result: IArticulo[]) => {
         this.articuloService.setArticulosSinImagen(result);
         if (this.queMostrar === 'ordenar') {
           this.categorias.forEach((categoria: ICategoria) => {
             const tempArticulos = result.filter((articulo: IArticulo) => {
               return articulo.categoria_selfservice === categoria.id;
             });
             result = tempArticulos;
           });
         }
         localStorage.setItem('articulos', JSON.stringify(result));
         this.setProductos();
       }, (error) => {
         this.showSpinner = false;
         console.error(error);
       });
   }
   setProductos() {
     this.articulos = JSON.parse(localStorage.getItem('articulos'));
     this.filterItems();
   }
   filterItems() {
     if (this.categoriaActive === 0) {
       this.auxArticulos = this.articulos;
       return;
     }
     this.auxArticulos = this.articulos.filter(x => {
       return x.categoria_selfservice === this.categoriaActive;
     });
     this.ordenar();
   }
   ordenar() {
     if (this.ordenandoByVendidos) {
       this.auxArticulos.sort((a, b) => {
         return b.cantidadVendida - a.cantidadVendida;
       });
     }
   }
   selectCategoria(index: number, idCategoria?: number) {
     if (this.categoriaActive === idCategoria) return;
     this.categoriaActive = idCategoria;
     this.allActive = idCategoria === 0 ? true : false;
     this.categorias.forEach((categoria, i) => {
       categoria.selected = index === i ? true : false;
     });
     this.filterItems();
   }
   elegirArticulo(articulo: IArticulo) {
     if (!articulo.FPP) {
       this.getByID(articulo.id);
     } else {
       this.openModalPromos(articulo);
     }
   }
   getByID(id: number) {
     this.articuloService.getById(id)
       .subscribe((res: IArticulo) => {
         res.cantidad = 1;
         this.articuloService.setArticulo(res);
       }, err => console.error(err));
   }
   openModalPromos(articulo: IArticulo) {
     this.modalRef = this.modalService.show(PromocionComponent,
       {
         initialState: {
           idArticulo: articulo.id
         },
         class: 'modal-promo modal-dialog-centered'
       });
   }
   increaseShow() {
     this.showQuantity += 100;
   }
+  @HostListener("scroll", ['$event'])
+  scrollEvent(event: Event) {
+    clearTimeout(this.inactiveScreen.timerReposo);
+    this.inactiveScreen.startTimeOutInactividad();
+  }
   mouseup() {
     if (!this.timeoutHandler) return;
     clearInterval(this.timeoutHandler);
   }
   scrollY(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     }, 500);
   }
   scrollX(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     }, 500);
   }
 }

src/app/services/inactive-screen/inactive-screen.service.spec.ts

Diff comments View file @ d0335a6

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 @ d0335a6

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 @ d0335a6

 <div class="modal-header px-0 bg-primary rounded-top">
   <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length">
     <div class="col-8">
       <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
     </div>
     <div class="col-4 align-self-center">
       <div
         class="row mx-0 justify-content-between bg-white badge-pill"
         (click)="elegirPromo(articulosPromo[0])">
         <div class="col px-0 align-self-center text-primary">
           <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
         </div>
         <div class="col-3 px-0">
           <img
             draggable="false"
             ondragstart="return false;"
             (contextmenu)="false"
             class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
             src="assets/img/ir-color.svg">
         </div>
       </div>
     </div>
   </div>
 </div>
 <div class="modal-body px-0 bg-primary rounded-bottom" *ngIf="articulosPromo.length">
   <div class="row mx-0 w-100">
     <div class="col-9">
       <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
       <h1 class="text-white mb-4">en un combo?</h1>
     </div>
     <div class="col-3">
       <img
         draggable="false"
         ondragstart="return false;"
         (contextmenu)="false"
         src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
         onerror="this.src='assets/img/image-not-found.jpg'"
         class="card-img-top img-fluid rounded-circle">
     </div>
   </div>
-  <div class="row mx-0 lista-promociones scroll-y-visible">
+  <div
+    class="row mx-0 lista-promociones scroll-y-visible"
+    (scroll)="scrollEvent($event)">
     <div class="col-12">
       <div *ngFor="let promo of promociones">
         <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
           <div class="d-flex">
             <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
             <p class="font-weight-bold my-auto pr-2">
               <span>{{promo.PreVen | currency}}</span>
             </p>
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="d-block icon-30 py-1"
               src="assets/img/ir-color.svg">
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

src/app/shared/promocion/promocion.component.ts

Diff comments View file @ d0335a6

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { PromocionService } from 'src/app/services/promocion/promocion.service';
 import { Subject } from 'rxjs';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
+import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 @Component({
   selector: 'app-promocion',
   templateUrl: './promocion.component.html',
   styleUrls: ['./promocion.component.scss']
 })
 export class PromocionComponent implements OnInit {
   idArticulo: number;
   articulosPromo: IArticulo[] = [];
   promociones: IArticulo[] = [];
   onClose: Subject<any>;
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   constructor(
     public modalRef: BsModalRef,
     private articuloService: ArticuloService,
     private promocionService: PromocionService,
+    private inactiveScreen: InactiveScreenService,
   ) {
     this.onClose = new Subject();
   }
   ngOnInit() {
     this.articuloService.getById(this.idArticulo)
       .subscribe((res: IArticulo) => {
         this.articulosPromo[0] = res;
         this.getPromociones();
       }, err => console.error(err));
   }
   elegirPromo(promo: IArticulo) {
     promo.cantidad = 1;
     this.articuloService.setArticulo(promo);
     this.modalRef.hide();
   }
   getPromociones() {
     const sector = this.articulosPromo[0].CodSec;
     const codigo = this.articulosPromo[0].CodArt;
     this.promocionService.getPromociones(sector, codigo)
       .subscribe((res: IArticulo[]) => {
         this.promociones = res;
       }, error => { console.error(error); });
   }
+  @HostListener('document:click', ['$event'])
+  eventListener(event: Event) {
+    clearTimeout(this.inactiveScreen.timerReposo);
+    this.inactiveScreen.startTimeOutInactividad();
+  }
 }