Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 98b8c1ae52fcded5cba33ba32f2ed8c7f3ca8215

Authored by Marcelo Puebla
2 parents e7ad30b837 cd76e82cc3
Exists in develop

Merge branch 'develop' into 'develop' 

Develop

agrega vista indicaciones pago tarjetas y soluciona vigencia de categorias

See merge request !149
Showing 5 changed files   Show diff stats
src/app/modules/forma-pago/forma-pago.component.ts
Diff comments   View file @ 98b8c1a
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { Router } from '@angular/router'; 3 import { Router } from '@angular/router';
4 4
5 @Component({ 5 @Component({
6 selector: 'app-forma-pago', 6 selector: 'app-forma-pago',
7 templateUrl: './forma-pago.component.html', 7 templateUrl: './forma-pago.component.html',
8 styleUrls: ['./forma-pago.component.scss'] 8 styleUrls: ['./forma-pago.component.scss']
9 }) 9 })
10 export class FormaPagoComponent implements OnInit { 10 export class FormaPagoComponent implements OnInit {
11 constructor( 11 constructor(
12 private articuloService: ArticuloService, 12 private articuloService: ArticuloService,
13 private router: Router 13 private router: Router
14 ) {} 14 ) {}
15 15
16 ngOnInit() { 16 ngOnInit() {
17 if (!this.articuloService.carrito.length) { 17 if (!this.articuloService.carrito.length) {
18 this.router.navigate(['']); 18 this.router.navigate(['']);
19 return; 19 return;
20 } 20 }
21 this.mediaPantalla(); 21 this.mediaPantalla();
22 } 22 }
23 23
24 medioPago(medioPago: number) { 24 medioPago(medioPago: number) {
25 this.articuloService.medioPago = medioPago; 25 this.articuloService.medioPago = medioPago;
26 switch (medioPago) { 26 switch (medioPago) {
27 case 4: 27 case 4:
28 this.router.navigate(['pago-tarjeta']); 28 this.router.navigate(['indicaciones-pago-tarjeta']);
29 break; 29 break;
30 case 9: 30 case 9:
31 this.router.navigate(['pago-electronico']); 31 this.router.navigate(['pago-electronico']);
32 break; 32 break;
33 } 33 }
34 } 34 }
35 35
36 mediaPantalla() { 36 mediaPantalla() {
37 if ($('body').hasClass('media-pantalla')) { 37 if ($('body').hasClass('media-pantalla')) {
38 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); 38 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
39 } 39 }
40 } 40 }
41 } 41 }
42 42
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.html
Diff comments   View file @ 98b8c1a
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="(false)" 7 (contextmenu)="(false)"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"/> 9 src="assets/img/logo-spot.svg"/>
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-85"> 12 <div class="h-85">
13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> 13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
14 <div 14 <div
15 class="col-12 col-sm-10 col-md-4 p-5 ml-auto h-auto align-self-center 15 #card
16 btn-effect border border-primary rounded reduce-card-1"> 16 class="p-5 mx-auto mt-4 h-30 align-self-center
17 btn-effect border border-primary rounded reduce-card-1"
18 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'"
19 [routerLink]="['/pago-tarjeta']">
17 <div class="row h-auto"> 20 <div class="row h-auto">
18 <div class="col-12 col-md-12"> 21 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
19 <img 22 <img
20 draggable="false" 23 draggable="false"
21 ondragstart="return false;" 24 ondragstart="return false;"
22 (contextmenu)="(false)" 25 (contextmenu)="(false)"
23 class="w-100 h-auto bg-white" 26 class="w-100 h-auto bg-white"
24 src="assets/img/tarjeta-banda.jpg"/> 27 src="assets/img/tarjeta-banda.jpg"/>
25 </div> 28 </div>
26 <div class="col-12 col-md-12 h-auto"> 29 <div class="h-auto"
30 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
27 <p class="h2 m-0 text-primary">Banda Magnética</p> 31 <p class="h2 m-0 text-primary">Banda Magnética</p>
28 <small class=" m-0"> 32 <small class=" m-0">
29 DESLIZÁ LA TARJETA POR LA RANURA<br> 33 DESLIZÁ LA TARJETA POR LA RANURA<br>
30 CUANDO LA PANTALLA LO INDIQUE 34 CUANDO LA PANTALLA LO INDIQUE
31 </small> 35 </small>
32 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto"> 36 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto">
33 <div class="row mx-0 bg-primary badge-pill h-auto"> 37 <div class="row mx-0 bg-primary badge-pill h-auto">
34 <div class="col-10 align-self-center text-center text-white"> 38 <div class="col-10 align-self-center text-center text-white">
35 Continuar 39 Continuar
36 </div> 40 </div>
37 <div class="col-2 align-self-center p-0"> 41 <div class="col-2 align-self-center p-0">
38 <img 42 <img
39 draggable="false" 43 draggable="false"
40 ondragstart="return false;" 44 ondragstart="return false;"
41 (contextmenu)="(false)" 45 (contextmenu)="(false)"
42 class="p-1 icon-50" 46 class="p-1 icon-50"
43 src="assets/img/ir.svg"/> 47 src="assets/img/ir.svg"/>
44 </div> 48 </div>
45 </div> 49 </div>
46 </div> 50 </div>
47 </div> 51 </div>
48 </div> 52 </div>
49 </div> 53 </div>
50 <div 54 <div
51 class="col-12 col-sm-10 col-md-4 p-5 my-auto mx-3 h-auto align-self-center 55 class="p-5 mx-auto mt-6 h-auto align-self-center
52 btn-effect border border-primary rounded reduce-card-1"> 56 btn-effect border border-primary rounded reduce-card-1"
57 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'"
58 [routerLink]="['/pago-tarjeta']">
53 <div class="row h-auto"> 59 <div class="row h-auto">
54 <div class="col-12 col-md-12"> 60 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
55 <img 61 <img
56 draggable="false" 62 draggable="false"
57 ondragstart="return false;" 63 ondragstart="return false;"
58 (contextmenu)="(false)" 64 (contextmenu)="(false)"
59 class="w-100 h-auto bg-white" 65 class="w-100 h-auto bg-white"
60 src="assets/img/tarjeta-chip.jpg"/> 66 src="assets/img/tarjeta-chip.jpg"/>
61 </div> 67 </div>
62 <div class="col-12 col-md-12 h-auto"> 68 <div
69 class="h-auto"
70 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
63 <p class="h2 m-0 text-primary">Chip</p> 71 <p class="h2 m-0 text-primary">Chip</p>
64 <small class=" m-0"> 72 <small class=" m-0">
65 INTRODUCÍ TU TARJETA POR LA<br> 73 INTRODUCÍ TU TARJETA POR LA<br>
66 PARTE INFERIOR DE LECTOR <br> 74 PARTE INFERIOR DE LECTOR <br>
67 CUANDO LA PANTALLA LO INDIQUE 75 CUANDO LA PANTALLA LO INDIQUE
68 </small> 76 </small>
69 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto"> 77 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto">
70 <div class="row mx-0 bg-primary badge-pill h-auto"> 78 <div class="row mx-0 bg-primary badge-pill h-auto">
71 <div class="col-10 align-self-center text-center text-white"> 79 <div
80 class="col-10 align-self-center text-center text-white">
72 Continuar 81 Continuar
73 </div> 82 </div>
74 <div class="col-2 align-self-center p-0"> 83 <div class="col-2 align-self-center p-0">
75 <img 84 <img
76 draggable="false" 85 draggable="false"
77 ondragstart="return false;" 86 ondragstart="return false;"
78 (contextmenu)="(false)" 87 (contextmenu)="(false)"
79 class="p-1 icon-50" 88 class="p-1 icon-50"
80 src="assets/img/ir.svg"/> 89 src="assets/img/ir.svg"/>
81 </div> 90 </div>
82 </div> 91 </div>
83 </div> 92 </div>
84 </div> 93 </div>
85 </div> 94 </div>
86 </div> 95 </div>
87 <div 96 <div
88 class="col-12 col-sm-10 col-md-4 p-5 mr-auto h-auto align-self-center 97 class="col-sm-10 col-md-4 p-5 mx-auto mt-6 align-self-center
89 btn-effect border border-primary rounded reduce-card-1"> 98 btn-effect border border-primary rounded reduce-card-1"
99 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'"
100 [routerLink]="['/pago-tarjeta']">
90 <div class="row h-auto"> 101 <div class="row h-auto">
91 <div class="col-12 col-md-12"> 102 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
92 <img 103 <img
93 draggable="false" 104 draggable="false"
94 ondragstart="return false;" 105 ondragstart="return false;"
95 (contextmenu)="(false)" 106 (contextmenu)="(false)"
96 class="w-100 h-auto bg-white" 107 class="w-100 h-auto bg-white"
97 src="assets/img/tarjeta-contact-less.jpg"/> 108 src="assets/img/tarjeta-contact-less.jpg"/>
98 </div> 109 </div>
99 <div class="col-12 col-md-12 h-auto"> 110 <div
111 class="h-auto"
112 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
100 <p class="h2 m-0 text-primary">Contact-less</p> 113 <p class="h2 m-0 text-primary">Contact-less</p>
101 <small class=" m-0"> 114 <small class=" m-0">
102 ACERCÁ LA TARJETA AL POSNET<br> 115 ACERCÁ LA TARJETA AL POSNET<br>
103 CUANDO LA PANTALLA LO INDIQUE 116 CUANDO LA PANTALLA LO INDIQUE
104 </small> 117 </small>
105 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto"> 118 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto">
106 <div class="row mx-0 bg-primary badge-pill h-auto"> 119 <div class="row mx-0 bg-primary badge-pill h-auto">
107 <div class="col-10 align-self-center text-center text-white"> 120 <div
121 class="col-10 align-self-center text-center text-white">
108 <small>Continuar</small> 122 <small>Continuar</small>
109 </div> 123 </div>
110 <div class="col-2 align-self-center p-0"> 124 <div class="col-2 align-self-center p-0">
111 <img 125 <img
112 draggable="false" 126 draggable="false"
113 ondragstart="return false;" 127 ondragstart="return false;"
114 (contextmenu)="(false)" 128 (contextmenu)="(false)"
115 class="p-1 icon-50" 129 class="p-1 icon-50"
116 src="assets/img/ir.svg"/> 130 src="assets/img/ir.svg"/>
117 </div> 131 </div>
118 </div> 132 </div>
119 </div> 133 </div>
120 </div> 134 </div>
121 </div> 135 </div>
122 </div> 136 </div>
123 </div> 137 </div>
124 </div> 138 </div>
125 </div> 139 </div>
126 140
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.scss
Diff comments   View file @ 98b8c1a
1 .reduce-card-1.media-pantalla { 1 .reduce-card-1.media-pantalla {
2 max-width: 30% !important; 2 max-width: 30% !important;
3 margin: 0px 15px !important; 3 margin: 0px 15px !important;
4 height: 670px !important; 4 height: 670px !important;
5 } 5 }
6
7 .mt-6 {
8 margin-top: 4.5rem;
9 }
6 10
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.ts
Diff comments   View file @ 98b8c1a
1 import { Component, OnInit, OnChanges } from '@angular/core'; 1 import { Component, OnInit, OnChanges } from '@angular/core';
2 2
3 @Component({ 3 @Component({
4 selector: 'app-indicaciones-pago-tarjeta', 4 selector: 'app-indicaciones-pago-tarjeta',
5 templateUrl: './indicaciones-pago-tarjeta.component.html', 5 templateUrl: './indicaciones-pago-tarjeta.component.html',
6 styleUrls: ['./indicaciones-pago-tarjeta.component.scss'] 6 styleUrls: ['./indicaciones-pago-tarjeta.component.scss']
7 }) 7 })
8 export class IndicacionesPagoTarjetaComponent implements OnInit { 8 export class IndicacionesPagoTarjetaComponent implements OnInit {
9 constructor() { } 9 constructor() { }
10 10
11 ngOnInit() { 11 ngOnInit() {
12 this.mediaPantalla(); 12 this.mediaPantalla();
13 } 13 }
14 14
15 mediaPantalla() { 15 mediaPantalla() {
16 if ($('body').hasClass('media-pantalla')) { 16 if ($('body').hasClass('media-pantalla')) {
17 $('.reduce-card').addClass('media-pantalla'); 17 $('.reduce-card-1').addClass('media-pantalla');
18 } 18 }
19 } 19 }
20 } 20 }
21 21
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.html
Diff comments   View file @ 98b8c1a
1 <!-- FILTRO CATEGORIAS --> 1 <!-- FILTRO CATEGORIAS -->
2 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 2 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
3 <div class="row mx-0 h-94 justify-content-center align-items-center"> 3 <div class="row mx-0 h-94 justify-content-center align-items-center">
4 <div class="col-auto btn-effect h-5 cat-btn"> 4 <div class="col-auto btn-effect h-5 cat-btn">
5 <img 5 <img
6 draggable="false" 6 draggable="false"
7 ondragstart="return false;" 7 ondragstart="return false;"
8 (contextmenu)="false" 8 (contextmenu)="false"
9 class="h-100 d-block mx-auto rotate-90-neg" 9 class="h-100 d-block mx-auto rotate-90-neg"
10 src="assets/img/ir-color.svg" 10 src="assets/img/ir-color.svg"
11 (mousedown)="scrollY(templateCategorias, -100)" 11 (mousedown)="scrollY(templateCategorias, -100)"
12 (mouseup)="mouseup()" 12 (mouseup)="mouseup()"
13 (mouseleave)="mouseup()"> 13 (mouseleave)="mouseup()">
14 </div> 14 </div>
15 <!-- CATEGORIAS --> 15 <!-- CATEGORIAS -->
16 <div 16 <div
17 #templateCategorias 17 #templateCategorias
18 class="col-12 px-0 mx-0 box-categorias border border-primary py-1 18 class="col-12 px-0 mx-0 box-categorias border border-primary py-1
19 border-left-0 rounded-right scroll-y cat-box" 19 border-left-0 rounded-right scroll-y cat-box"
20 (scroll)="scrollEvent($event)"> 20 (scroll)="scrollEvent($event)">
21 <div 21 <div
22 class="row mx-2 mb-2 h-25 h-lg-30 justify-content-center tab cat-content" 22 class="row mx-2 mb-2 h-25 h-lg-30 justify-content-center tab cat-content"
23 [ngClass]="{ 'active rounded shadow px-2': allActive, 'border-bottom-effect': !allActive }" 23 [ngClass]="{ 'active rounded shadow px-2': allActive, 'border-bottom-effect': !allActive }"
24 (click)="selectCategoria(-1, 0)"> 24 (click)="selectCategoria(-1, 0)">
25 <img 25 <img
26 draggable="false" 26 draggable="false"
27 ondragstart="return false;" 27 ondragstart="return false;"
28 (contextmenu)="false" 28 (contextmenu)="false"
29 class="col-12 img-fluid align-self-end d-none 29 class="col-12 img-fluid align-self-end d-none
30 d-sm-block rounded-circle h-50" 30 d-sm-block rounded-circle h-50"
31 src="assets/img/logo-spot.svg"> 31 src="assets/img/logo-spot.svg">
32 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small> 32 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
33 </div> 33 </div>
34 <div *ngFor="let categoria of categorias; let i = index;"> 34
35 <div 35 <div
36 class="row mx-2 mb-2 h-25 h-lg-30 justify-content-center tab cat-content" 36 class="row mx-2 mb-2 h-25 h-lg-30 justify-content-center tab cat-content"
37 [ngClass]="{ 'active rounded shadow px-2': categoria.selected, 37 [ngClass]="{ 'active rounded shadow px-2': categoria.selected,
38 'border-bottom-effect': !categoria.selected, 38 'border-bottom-effect': !categoria.selected,
39 'media-pantalla': templateCategorias.classList.contains('media-pantalla')}" 39 'media-pantalla': templateCategorias.classList.contains('media-pantalla')}"
40 (click)="selectCategoria(i, categoria.id)" 40 (click)="selectCategoria(i, categoria.id)"
41 id="cat-content" 41 id="cat-content"
42 *ngIf="categoria.articulos > 0 42 *ngFor="let categoria of categorias; let i = index;"
43 && validarFecha(categoria.vigencia_desde, categoria.vigencia_hasta)"> 43 [hidden]="categoria.articulos > 0
44 && validarFecha(categoria.vigencia_desde, categoria.vigencia_hasta)">
44 <img 45 <img
45 draggable="false" 46 draggable="false"
46 ondragstart="return false;" 47 ondragstart="return false;"
47 (contextmenu)="false" 48 (contextmenu)="false"
48 class="d-none d-sm-block rounded-circle w-auto h-auto col-12" 49 class="d-none d-sm-block rounded-circle w-auto h-auto col-12"
49 src="{{urlImagenes}}{{categoria.path_imagen}}" 50 src="{{urlImagenes}}{{categoria.path_imagen}}"
50 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"> 51 onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
51 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 52 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
52 </div> 53 </div>
53 </div> 54
54 </div> 55 </div>
55 <div class="col-auto btn-effect h-5 cat-btn"> 56 <div class="col-auto btn-effect h-5 cat-btn">
56 <img 57 <img
57 draggable="false" 58 draggable="false"
58 ondragstart="return false;" 59 ondragstart="return false;"
59 (contextmenu)="false" 60 (contextmenu)="false"
60 class="h-100 d-block mx-auto rotate-90" 61 class="h-100 d-block mx-auto rotate-90"
61 src="assets/img/ir-color.svg" 62 src="assets/img/ir-color.svg"
62 (mousedown)="scrollY(templateCategorias, 100)" 63 (mousedown)="scrollY(templateCategorias, 100)"
63 (mouseup)="mouseup()" 64 (mouseup)="mouseup()"
64 (mouseleave)="mouseup()"> 65 (mouseleave)="mouseup()">
65 </div> 66 </div>
66 </div> 67 </div>
67 68