Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit f68a44db2bd259fe6d5141e8ccaf2dd70ffc53b4

Authored by Luis Suarez
2 parents c1ce74398d 7004c1df49
Exists in develop

solving merge

Showing 11 changed files   Show diff stats
src/app/modules/info-formas-pago/info-formas-pago.component.html
Diff comments   View file @ f68a44d
... ... @@ -11,7 +11,7 @@
11 11 </div>
12 12 <div class="h-85">
13 13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
14   - <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-end border border-secondary rounded">
  14 + <div class="col-7 col-xl-4 p-5 m-5 h-auto align-self-end border border-secondary rounded">
15 15 <img
16 16 draggable="false"
17 17 ondragstart="return false;"
... ... @@ -25,7 +25,7 @@
25 25 draggable="false"
26 26 ondragstart="return false;"
27 27 (contextmenu)="false"
28   - class="w-15"
  28 + class="icon-150"
29 29 src="assets/img/icono-mercado-pago.svg">
30 30 </p>
31 31 <div
... ... @@ -40,7 +40,7 @@
40 40 src="assets/img/ir.svg">
41 41 </div>
42 42 </div>
43   - <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border border-primary rounded">
  43 + <div class="col-7 col-xl-4 p-5 m-5 h-auto align-self-center border border-primary rounded">
44 44 <img
45 45 draggable="false"
46 46 ondragstart="return false;"
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ f68a44d
... ... @@ -84,7 +84,9 @@
84 84 <div
85 85 class="col px-2 my-1 my-md-3 h-auto"
86 86 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
87   - <div class="swing-in-top-fwd card h-auto">
  87 + <div
  88 + class="swing-in-top-fwd btn-effect card h-auto"
  89 + (click)="elegirArticulo(articulo)">
88 90 <img
89 91 draggable="false"
90 92 ondragstart="return false;"
... ... @@ -101,11 +103,10 @@
101 103 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
102 104 <small>{{articulo.DET_LAR}}</small>
103 105 </p>
104   - <div class="col-12 px-1 align-self-end btn-effect h-auto">
  106 + <div class="col-12 px-1 align-self-end h-auto">
105 107 <div
106 108 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
107   - class="row mx-0 justify-content-between badge-pill"
108   - (click)="elegirArticulo(articulo)">
  109 + class="row mx-0 justify-content-between badge-pill">
109 110 <div class="col px-0 align-self-center text-white text-right">
110 111 {{articulo.PreVen | currency}}
111 112 </div>
... ... @@ -176,6 +177,10 @@
176 177 *ngFor="let articulo of articuloService.carrito; let i = index;">
177 178 <div class="swing-in-top-fwd">
178 179 <img
  180 + class="btn-effect icon-20 position-absolute right-0"
  181 + src="assets/img/icono-cancelar-color.svg"
  182 + (click)="deleteArticulo(i)">
  183 + <img
179 184 draggable="false"
180 185 ondragstart="return false;"
181 186 (contextmenu)="false"
... ... @@ -222,7 +227,6 @@
222 227 class="btn-effect col-auto px-0 align-self-center bg-white"
223 228 [routerLink]="['/carrito']">
224 229 <div class="row mx-0 bg-light">
225   - <div class="col-auto align-self-center text-primary d-none d-sm-block">VER CARRITO</div>
226 230 <div class="col-auto p-0 bg-primary">
227 231 <img
228 232 draggable="false"
... ... @@ -231,6 +235,7 @@
231 235 class="p-2 icon-40"
232 236 src="assets/img/carrito.svg">
233 237 </div>
  238 + <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
234 239 </div>
235 240 </div>
236 241 </div>
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ f68a44d
... ... @@ -154,11 +154,16 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
154 154 });
155 155 }
156 156  
  157 + deleteArticulo(index: number) {
  158 + this.articuloService.carrito.splice(index, 1);
  159 + this.articuloService.calcularTotal();
  160 + }
  161 +
157 162 increaseShow() {
158 163 this.showQuantity += 100;
159 164 }
160 165  
161   - @HostListener("scroll", ['$event'])
  166 + @HostListener('scroll', ['$event'])
162 167 scrollEvent(event: Event) {
163 168 clearTimeout(this.inactiveScreen.timerReposo);
164 169 this.inactiveScreen.startTimeOutInactividad();
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ f68a44d
... ... @@ -7,12 +7,14 @@ import { ModalModule } from &#39;ngx-bootstrap/modal&#39;;
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 &#39;../shared/shared.module&#39;;
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 @ f68a44d
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 @ f68a44d
... ... @@ -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 @ f68a44d
src/app/shared/confirmacion/confirmacion.component.spec.ts
Diff comments   View file @ f68a44d
... ... @@ -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 @ f68a44d
... ... @@ -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 @ f68a44d
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 }
... ... @@ -23,13 +23,13 @@ body {
23 23 }
24 24  
25 25 .btn-effect {
26   - transition: all 0.3s;
  26 + transition: all 0.3s !important;
27 27 &:hover {
28   - cursor: pointer;
29   - opacity: 0.7;
  28 + cursor: pointer !important;
  29 + opacity: 0.7 !important;
30 30 }
31 31 &:active {
32   - transform: scale(1.02);
  32 + transform: scale(1.02) !important;
33 33 }
34 34 }
35 35  
... ... @@ -50,6 +50,14 @@ p {
50 50 transform: translateX(-50%);
51 51 }
52 52  
  53 +.right-0 {
  54 + right: 0;
  55 +}
  56 +
  57 +.left-0 {
  58 + left: 0;
  59 +}
  60 +
53 61 .rotate-45 {
54 62 transform: rotate(45deg);
55 63 }