Commit 9a1421ccfc911f3b75a32ed5e62b95934ab4ad3e

Authored by Benjamin Rodriguez
1 parent 03a1244b65

cancelar-compra y timeout

src/app/app-routing.module.ts
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
4 import { AdminComponent } from './modules/admin/admin.component'; 4 import { AdminComponent } from './modules/admin/admin.component';
5 5
6 const routes: Routes = [ 6 const routes: Routes = [
7 { path: '', component: SplashScreenComponent }, 7 { path: '', component: SplashScreenComponent },
8 { 8 {
9 path: '', 9 path: '',
10 component: AdminComponent, 10 component: AdminComponent,
11 children: [ 11 children: [
12 { 12 {
13 path: 'info-formas-pago', 13 path: 'info-formas-pago',
14 loadChildren: () => import('./modules/info-formas-pago/info-formas-pago.module').then(m => m.InfoFormasPagoModule) 14 loadChildren: () => import('./modules/info-formas-pago/info-formas-pago.module').then(m => m.InfoFormasPagoModule)
15 }, 15 },
16 { 16 {
17 path: 'opcion-pedido', 17 path: 'opcion-pedido',
18 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule) 18 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule)
19 }, 19 },
20 { 20 {
21 path: 'seleccion-articulos', 21 path: 'seleccion-articulos',
22 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule) 22 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule)
23 }, 23 },
24 { 24 {
25 path: 'carrito', 25 path: 'carrito',
26 loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule) 26 loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
27 }, 27 },
28 { 28 {
29 path: 'forma-pago', 29 path: 'forma-pago',
30 loadChildren: () => import('./modules/forma-pago/forma-pago.module').then(m => m.FormaPagoModule) 30 loadChildren: () => import('./modules/forma-pago/forma-pago.module').then(m => m.FormaPagoModule)
31 }, 31 },
32 { 32 {
33 path: 'pago-electronico', 33 path: 'pago-electronico',
34 loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule) 34 loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule)
35 }, 35 },
36 { 36 {
37 path: 'pago-tarjeta', 37 path: 'pago-tarjeta',
38 loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule) 38 loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule)
39 }, 39 },
40 ] 40 ]
41 }, 41 },
42 { 42 {
43 path: 'mensaje-final', 43 path: 'mensaje-final',
44 loadChildren: () => import('./modules/mensaje-final/mensaje-final.module').then(m => m.MensajeFinalModule) 44 loadChildren: () => import('./modules/mensaje-final/mensaje-final.module').then(m => m.MensajeFinalModule)
45 }, 45 },
46 { 46 {
47 path: 'pedidos-salientes', 47 path: 'pedidos-salientes',
48 loadChildren: () => import('./modules/pedidos-salientes/pedidos-salientes.module').then(m => m.PedidosSalientesModule) 48 loadChildren: () => import('./modules/pedidos-salientes/pedidos-salientes.module').then(m => m.PedidosSalientesModule)
49 }, 49 },
50 { 50 {
51 path: 'comanda', 51 path: 'comanda',
52 loadChildren: () => import('./modules/comanda/comanda.module').then(m => m.ComandaModule) 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 { path: '**', redirectTo: '', pathMatch: 'full' }, 58 { path: '**', redirectTo: '', pathMatch: 'full' },
55 ]; 59 ];
56 60
57 @NgModule({ 61 @NgModule({
58 imports: [RouterModule.forRoot(routes, { useHash: true })], 62 imports: [RouterModule.forRoot(routes, { useHash: true })],
59 exports: [RouterModule] 63 exports: [RouterModule]
60 }) 64 })
61 export class AppRoutingModule { } 65 export class AppRoutingModule { }
62 66
src/app/app.component.html
1 <router-outlet></router-outlet> 1 <div click="restartTimer()">
2 <router-outlet></router-outlet>
3 </div>
2 4
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 @Component({ 4 @Component({
4 selector: 'app-root', 5 selector: 'app-root',
5 templateUrl: './app.component.html', 6 templateUrl: './app.component.html',
6 styleUrls: ['./app.component.scss'] 7 styleUrls: ['./app.component.scss']
7 }) 8 })
8 export class AppComponent { 9 export class AppComponent implements OnInit {
9 title = 'autoservicio-axion'; 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 }
11 40
src/app/modules/cancelar-compra/cancelar-compra-routing.module.ts
File was created 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 { }
15
src/app/modules/cancelar-compra/cancelar-compra.component.html
File was created 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>
54
src/app/modules/cancelar-compra/cancelar-compra.component.scss
File was created 1 .cancelar-compra {
2 background-color: rgb(212, 212, 212);
3 }
4
src/app/modules/cancelar-compra/cancelar-compra.component.spec.ts
File was created 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 });
26
src/app/modules/cancelar-compra/cancelar-compra.component.ts
File was created 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 }
34
src/app/modules/cancelar-compra/cancelar-compra.module.ts
File was created 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 { }
16
src/assets/img/icono-cancelar-color.svg
File was created 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>
20