Commit 9a1421ccfc911f3b75a32ed5e62b95934ab4ad3e

Authored by Benjamin Rodriguez
1 parent 03a1244b65

cancelar-compra y timeout

src/app/app-routing.module.ts
... ... @@ -51,6 +51,10 @@ const routes: Routes = [
51 51 path: 'comanda',
52 52 loadChildren: () => import('./modules/comanda/comanda.module').then(m => m.ComandaModule)
53 53 },
  54 + {
  55 + path: 'cancelar-compra',
  56 + loadChildren: () => import('./modules/cancelar-compra/cancelar-compra.module').then(m => m.CancelarCompraModule)
  57 + },
54 58 { path: '**', redirectTo: '', pathMatch: 'full' },
55 59 ];
56 60  
src/app/app.component.html
1   -<router-outlet></router-outlet>
  1 +<div click="restartTimer()">
  2 + <router-outlet></router-outlet>
  3 +</div>
src/app/app.component.ts
1   -import { Component } from '@angular/core';
  1 +import { Component, OnInit } from '@angular/core';
  2 +import { Router, RouterModule, RoutesRecognized, RouterLink, RouterState, ActivatedRoute, RouterLinkActive } from '@angular/router';
2 3  
3 4 @Component({
4 5 selector: 'app-root',
5 6 templateUrl: './app.component.html',
6 7 styleUrls: ['./app.component.scss']
7 8 })
8   -export class AppComponent {
  9 +export class AppComponent implements OnInit {
9 10 title = 'autoservicio-axion';
  11 + timerReposo: any;
  12 +
  13 + constructor (
  14 + private router: Router,
  15 + ) { }
  16 +
  17 + ngOnInit(): void {
  18 + if (
  19 + window.location.href !== 'http://localhost:4206/#/' &&
  20 + window.location.href !== 'http://localhost:4206/#/comanda' &&
  21 + window.location.href !== 'http://localhost:4206/#/pedidos-salientes'
  22 + ) {
  23 + this.startTimeOutInactividad();
  24 + } else {
  25 + console.log(window.location.href)
  26 + }
  27 + }
  28 +
  29 + restartTimer() {
  30 + clearTimeout(this.timerReposo);
  31 + this.startTimeOutInactividad();
  32 + }
  33 +
  34 + startTimeOutInactividad() {
  35 + setTimeout(() => {
  36 + this.router.navigate(['cancelar-compra']);
  37 + }, 1000);
  38 + }
10 39 }
src/app/modules/cancelar-compra/cancelar-compra-routing.module.ts
... ... @@ -0,0 +1,14 @@
  1 +import { NgModule, Component } from '@angular/core';
  2 +import { Routes, RouterModule } from '@angular/router';
  3 +import { CancelarCompraComponent } from './cancelar-compra.component';
  4 +
  5 +
  6 +const routes: Routes = [
  7 + { path: '', component: CancelarCompraComponent }
  8 +];
  9 +
  10 +@NgModule({
  11 + imports: [RouterModule.forChild(routes)],
  12 + exports: [RouterModule]
  13 +})
  14 +export class CancelarCompraRoutingModule { }
src/app/modules/cancelar-compra/cancelar-compra.component.html
... ... @@ -0,0 +1,53 @@
  1 +<div class="row justify-content-center mt-2">
  2 + <img class="w-15 h-15" src="../../../assets/img/logo-spot.svg">
  3 +</div>
  4 +<div class="row mt-3 mx-0 justify-content-around h-75">
  5 + <div class="col-5 col-md-6 col-lg-3 h-100">
  6 + <div class="p-3 bg-white text-center shadow-lg rounded h-100">
  7 + <h5 class="pt-3 mt-3">NECESITA</h5>
  8 + <h3 class="font-weight-bold text-secondary">mรกs tiempo</h3>
  9 + <h5>PARA SU PEDIDO?</h5>
  10 + </div>
  11 + </div>
  12 +</div>
  13 +<!-- BUTTONS -->
  14 +<div class="h-25">
  15 + <div class="row mt-5 h-auto justify-content-center mx-0">
  16 + <div class="col-auto px-0 h-auto align-self-start">
  17 + <div
  18 + class="btn-effect col-auto align-self-center px-0 bg-white"
  19 + (click)="volverPreviousPage()">
  20 + <div class="row mx-0 bg-primary badge-pill">
  21 + <div class="col-auto align-self-center text-white">continuar compra</div>
  22 + <div class="col-auto align-self-center p-0">
  23 + <img
  24 + draggable="false"
  25 + ondragstart="return false;"
  26 + (contextmenu)="false"
  27 + class="p-1 icon-30"
  28 + src="assets/img/ir.svg">
  29 + </div>
  30 + </div>
  31 + </div>
  32 + </div>
  33 + </div>
  34 + <div class="row mt-4 h-auto justify-content-center mx-0">
  35 + <div class="col-auto px-0 h-auto align-self-start">
  36 + <div
  37 + class="btn-effect col-auto align-self-center px-0 bg-white"
  38 + (click)="limpiarCarritoYvolver()">
  39 + <div class="row mx-0 cancelar-compra badge-pill">
  40 + <div class="col-auto align-self-center">cancelar compra</div>
  41 + <div class="col-auto align-self-center p-0">
  42 + <img
  43 + draggable="false"
  44 + ondragstart="return false;"
  45 + (contextmenu)="false"
  46 + class="p-1 icon-30"
  47 + src="assets/img/icono-cancelar-color.svg">
  48 + </div>
  49 + </div>
  50 + </div>
  51 + </div>
  52 + </div>
  53 +</div>
src/app/modules/cancelar-compra/cancelar-compra.component.scss
... ... @@ -0,0 +1,3 @@
  1 +.cancelar-compra {
  2 + background-color: rgb(212, 212, 212);
  3 +}
src/app/modules/cancelar-compra/cancelar-compra.component.spec.ts
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { CancelarCompraComponent } from './cancelar-compra.component';
  4 +
  5 +describe('CancelarCompraComponent', () => {
  6 + let component: CancelarCompraComponent;
  7 + let fixture: ComponentFixture<CancelarCompraComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ CancelarCompraComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(CancelarCompraComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/modules/cancelar-compra/cancelar-compra.component.ts
... ... @@ -0,0 +1,33 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +import { Location } from '@angular/common';
  3 +import { ArticuloService } from 'src/app/services/articulo/articulo.service';
  4 +import { Router } from '@angular/router';
  5 +
  6 +@Component({
  7 + selector: 'app-cancelar-compra',
  8 + templateUrl: './cancelar-compra.component.html',
  9 + styleUrls: ['./cancelar-compra.component.scss']
  10 +})
  11 +export class CancelarCompraComponent implements OnInit {
  12 +
  13 + constructor(
  14 + private location: Location,
  15 + private router: Router,
  16 + private articuloService: ArticuloService
  17 + ) { }
  18 +
  19 + ngOnInit() {
  20 + setTimeout(() => {
  21 + this.limpiarCarritoYvolver();
  22 + }, 90000);
  23 + }
  24 +
  25 + volverPreviousPage() {
  26 + this.location.back();
  27 + }
  28 +
  29 + limpiarCarritoYvolver() {
  30 + this.articuloService.carrito = undefined;
  31 + this.router.navigate(['/']);
  32 + }
  33 +}
src/app/modules/cancelar-compra/cancelar-compra.module.ts
... ... @@ -0,0 +1,15 @@
  1 +import { NgModule } from '@angular/core';
  2 +import { CommonModule } from '@angular/common';
  3 +
  4 +import { CancelarCompraRoutingModule } from './cancelar-compra-routing.module';
  5 +import { CancelarCompraComponent } from './cancelar-compra.component';
  6 +
  7 +
  8 +@NgModule({
  9 + declarations: [CancelarCompraComponent],
  10 + imports: [
  11 + CommonModule,
  12 + CancelarCompraRoutingModule
  13 + ]
  14 +})
  15 +export class CancelarCompraModule { }
src/assets/img/icono-cancelar-color.svg
... ... @@ -0,0 +1,19 @@
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  3 +<!-- Creator: CorelDRAW X7 -->
  4 +<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="19.8306mm" height="19.8306mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
  5 +viewBox="0 0 1652 1652"
  6 + xmlns:xlink="http://www.w3.org/1999/xlink">
  7 + <defs>
  8 + <style type="text/css">
  9 + <![CDATA[
  10 + .fil0 {fill:#AA006B;fill-rule:nonzero}
  11 + ]]>
  12 + </style>
  13 + </defs>
  14 + <g id="Capa_x0020_1">
  15 + <metadata id="CorelCorpID_0Corel-Layer"/>
  16 + <polygon class="fil0" points="494,409 826,766 1158,409 1214,457 882,826 1214,1196 1158,1244 826,886 494,1244 439,1196 770,826 439,457 "/>
  17 + <path class="fil0" d="M1360 292c-136,-137 -325,-221 -534,-221 -208,0 -397,84 -534,221 -137,137 -221,326 -221,534 0,209 84,398 221,534 137,137 326,222 534,222 209,0 398,-85 534,-222 137,-136 222,-325 222,-534 0,-208 -85,-397 -222,-534zm-534 -292c228,0 435,92 584,242 150,149 242,356 242,584 0,228 -92,435 -242,584 -149,150 -356,242 -584,242 -228,0 -435,-92 -584,-242 -150,-149 -242,-356 -242,-584 0,-228 92,-435 242,-584 149,-150 356,-242 584,-242z"/>
  18 + </g>
  19 +</svg>