Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit 7004c1df495d5ac2e703f7ff659d1d8c3b384953

Authored by Marcelo Puebla
2 parents 5016bb28f3 ef1b783c12
Exists in develop

Merge branch 'master' into 'develop' 

Master

See merge request !41
Showing 7 changed files   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 7004c1d
... ... @@ -7,12 +7,14 @@ import { ModalModule } from 'ngx-bootstrap/modal';
7 7 import { CarouselModule } from 'ngx-bootstrap/carousel';
8 8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
9 9 import { SharedModule } from '../shared/shared.module';
  10 +import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
10 11  
11 12 @NgModule({
12 13 declarations: [
13 14 SeleccionArticulosComponent,
14 15 HeaderPublicidadComponent,
15   - PromocionComponent
  16 + PromocionComponent,
  17 + ConfirmacionComponent
16 18 ],
17 19 imports: [
18 20 CommonModule,
... ... @@ -22,6 +24,6 @@ import { SharedModule } from '../shared/shared.module';
22 24 SharedModule
23 25 ],
24 26 exports: [HeaderPublicidadComponent],
25   - entryComponents: [PromocionComponent]
  27 + entryComponents: [PromocionComponent, ConfirmacionComponent]
26 28 })
27 29 export class SeleccionArticulosModule { }
src/app/modules/splash-screen/splash-screen.component.html
Diff comments   View file @ 7004c1d
1 1 <div *ngIf="showSplashScreen" class="h-100 bg-splash">
2   - <div class="row mx-0 h-100">
  2 + <div
  3 + class="row mx-0 h-100"
  4 + [routerLink]="['/info-formas-pago']">
3 5 <div class="col-12 px-0 h-30 my-auto">
4 6 <img
5 7 draggable="false"
... ... @@ -12,7 +14,9 @@
12 14 </div>
13 15  
14 16 <div *ngIf="!showSplashScreen" class="h-100 bg-primary fade-in">
15   - <div class="row mx-0 h-100">
  17 + <div
  18 + class="row mx-0 h-100"
  19 + [routerLink]="['/info-formas-pago']">
16 20 <div class="col-12 px-0 h-100 my-auto">
17 21 <div class="row mx-0 h-15">
18 22 <div class="col-12 px-0 h-80 my-auto">
... ... @@ -42,9 +46,7 @@
42 46 </div>
43 47 </div>
44 48 </div>
45   - <div
46   - class="row mx-0 h-10 loop-color cursor-pointer"
47   - [routerLink]="['/info-formas-pago']">
  49 + <div class="row mx-0 h-10 loop-color cursor-pointer">
48 50 <div class="col-12 text-center align-self-center px-0">
49 51 <p class="h6 text-white">TOCA PARA COMENZAR</p>
50 52 </div>
src/app/shared/confirmacion/confirmacion.component.html
Diff comments   View file @ 7004c1d
... ... @@ -0,0 +1,55 @@
  1 +<div class="modal-header bg-primary rounded-top pt-4 px-2">
  2 + <div class="row mx-0 w-100 justify-content-between">
  3 + <div class="col-8">
  4 + <p *ngIf="titleMessage" class="h3 text-white">{{titleMessage}}</p>
  5 + </div>
  6 + </div>
  7 + <div *ngIf="imagenPath" class="col-4 align-self-center">
  8 + <img
  9 + draggable="false"
  10 + ondragstart="return false;"
  11 + (contextmenu)="false"
  12 + src="{{urlImagenes}}{{imagenPath}}"
  13 + onerror="this.src='assets/img/image-not-found.jpg'"
  14 + class="card-img-top img-fluid rounded-circle">
  15 + </div>
  16 +</div>
  17 +<div class=" col-12 modal-body bg-primary rounded-bottom pb-3 px-2">
  18 + <div class="row justify-content-between mx-0 w-100">
  19 + <div class="col-8">
  20 + <p *ngIf="footerMessageFirst" class="text-white"><small>{{footerMessageFirst}}</small></p >
  21 + <h1 *ngIf="footerMessageSecond" class="text-white mb-4">{{footerMessageSecond}}</h1>
  22 + </div>
  23 + <div class="col-4">
  24 + <div
  25 + class="mx-0"
  26 + (click)="confirmarArticulo()">
  27 + <div class="col-auto bg-white badge-pill">
  28 + <div class="row justify-content-between">
  29 + <div *ngIf="footerConfirmation" class="col-auto px-0 align-self-center text-primary pl-3">
  30 + <p class="font-weight-bold">{{footerConfirmation | currency}}</p>
  31 + </div>
  32 + <div class="col-auto px-0">
  33 + <img
  34 + draggable="false"
  35 + ondragstart="return false;"
  36 + (contextmenu)="false"
  37 + class="d-block ml-auto my-1 icon-30 pr-2"
  38 + src="assets/img/ir-color.svg">
  39 + </div>
  40 + </div>
  41 + </div>
  42 + </div>
  43 + <div *ngIf="footerClose" class="bg-white badge-pill mt-2">
  44 + <div class="row justify-content-between">
  45 + <div
  46 + class="col-auto mx-0 "
  47 + (click)="close()">
  48 + <p class="font-weight-bold text-center text-primary">{{footerClose}}</p>
  49 + </div>
  50 + <i class="fas fa-undo-alt text-info mr-3 my-auto"></i>
  51 + </div>
  52 + </div>
  53 + </div>
  54 + </div>
  55 +</div>
src/app/shared/confirmacion/confirmacion.component.scss
Diff comments   View file @ 7004c1d
src/app/shared/confirmacion/confirmacion.component.spec.ts
Diff comments   View file @ 7004c1d
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { ConfirmacionComponent } from './confirmacion.component';
  4 +
  5 +describe('ConfirmacionComponent', () => {
  6 + let component: ConfirmacionComponent;
  7 + let fixture: ComponentFixture<ConfirmacionComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ ConfirmacionComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(ConfirmacionComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/shared/confirmacion/confirmacion.component.ts
Diff comments   View file @ 7004c1d
... ... @@ -0,0 +1,44 @@
  1 +import { Component, OnInit, HostListener } from '@angular/core';
  2 +import { ArticuloService } from 'src/app/services/articulo/articulo.service';
  3 +import { IArticulo } from 'src/app/interfaces/IArticulo';
  4 +import { BsModalRef } from 'ngx-bootstrap/modal';
  5 +import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
  6 +import { Subject } from 'rxjs';
  7 +
  8 +@Component({
  9 + selector: 'app-confirmacion',
  10 + templateUrl: './confirmacion.component.html',
  11 + styleUrls: ['./confirmacion.component.scss']
  12 +})
  13 +export class ConfirmacionComponent implements OnInit {
  14 + idArticulo: number;
  15 + imagenArticulo: any;
  16 + detLarArticulo: string;
  17 + preVenArticulo: any;
  18 + onClose: Subject<any>;
  19 +
  20 + constructor(
  21 + public modalRef: BsModalRef,
  22 + private inactiveScreen: InactiveScreenService,
  23 + ) {
  24 + this.onClose = new Subject();
  25 + }
  26 +
  27 + ngOnInit() {
  28 + }
  29 +
  30 + confirmarArticulo() {
  31 + this.onClose.next();
  32 + this.modalRef.hide();
  33 + }
  34 +
  35 + close() {
  36 + this.modalRef.hide();
  37 + }
  38 +
  39 + @HostListener('document:click', ['$event'])
  40 + eventListener(event: Event) {
  41 + clearTimeout(this.inactiveScreen.timerReposo);
  42 + this.inactiveScreen.startTimeOutInactividad();
  43 + }
  44 +}
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ 7004c1d
1   -import { Component, OnInit } from '@angular/core';
  1 +import { Component, OnInit, TemplateRef } from '@angular/core';
2 2 import { APP_SETTINGS } from 'src/etc/AppSettings';
3 3 import { IPublicidad } from 'src/app/interfaces/IPublicidad';
4 4 import { PublicidadService } from 'src/app/services/publicidad/publicidad.service';
... ... @@ -6,6 +6,7 @@ import { IArticulo } from &#39;src/app/interfaces/IArticulo&#39;;
6 6 import { PromocionComponent } from '../promocion/promocion.component';
7 7 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
8 8 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
  9 +import { ConfirmacionComponent } from '../confirmacion/confirmacion.component';
9 10  
10 11 @Component({
11 12 selector: 'app-header-publicidad',
... ... @@ -44,9 +45,10 @@ export class HeaderPublicidadComponent implements OnInit {
44 45 if (res.FPP) {
45 46 this.openModalPromos(res);
46 47 return;
  48 + } else {
  49 + this.openModalConfirmacion(res);
  50 + return;
47 51 }
48   - res.cantidad = 1;
49   - this.articuloService.setArticulo(res);
50 52 }, err => console.error(err));
51 53 }
52 54  
... ... @@ -60,4 +62,23 @@ export class HeaderPublicidadComponent implements OnInit {
60 62 });
61 63 }
62 64  
  65 + openModalConfirmacion(articulo: IArticulo) {
  66 + this.modalRef = this.modalService.show(ConfirmacionComponent,
  67 + {
  68 + initialState: {
  69 + titleMessage: articulo.DET_LAR,
  70 + imagenPath: articulo.imagenes,
  71 + footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`,
  72 + footerMessageSecond: `a su carrito?`,
  73 + footerConfirmation: articulo.PreVen,
  74 + footerClose: `volver`
  75 + },
  76 + class: 'modal-promo modal-dialog-centered'
  77 + });
  78 + this.modalRef.content.onClose.subscribe(() => {
  79 + articulo.cantidad = 1;
  80 + this.articuloService.setArticulo(articulo);
  81 + });
  82 + }
  83 +
63 84 }