Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit 75cc19975708ce203363a93d5d25ff7bbb9db00f

Authored by Marcelo Puebla
2 parents 373baac2fe df2615f81c
Exists in develop

Merge branch 'develop' into 'develop' 

Develop

categorias con 0 articulos no se muestran desde front

See merge request !137
Showing 5 changed files   Show diff stats
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.html
Diff comments   View file @ 75cc199
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-7 p-5 m-5 h-auto align-self-center 15 class="col-12 col-sm-10 col-md-4 p-5 ml-auto h-auto align-self-center
16 btn-effect border border-primary rounded reduce-card-2"> 16 btn-effect border border-primary rounded reduce-card-1">
17 <div class="row h-auto"> 17 <div class="row h-auto">
18 <div class="col-12 col-md-4"> 18 <div class="col-12 col-md-12">
19 <img 19 <img
20 draggable="false" 20 draggable="false"
21 ondragstart="return false;" 21 ondragstart="return false;"
22 (contextmenu)="(false)" 22 (contextmenu)="(false)"
23 class="w-100 h-auto bg-white" 23 class="w-100 h-auto bg-white"
24 src="assets/img/tarjeta-banda.jpg"/> 24 src="assets/img/tarjeta-banda.jpg"/>
25 </div> 25 </div>
26 <div class="col-12 col-md-8 h-auto"> 26 <div class="col-12 col-md-12 h-auto">
27 <p class="h2 m-0 text-primary">Banda Magnética</p> 27 <p class="h2 m-0 text-primary">Banda Magnética</p>
28 <small class=" m-0"> 28 <small class=" m-0">
29 DESLIZÁ LA TARJETA POR LA RANURA<br> 29 DESLIZÁ LA TARJETA POR LA RANURA<br>
30 CUANDO LA PANTALLA LO INDIQUE 30 CUANDO LA PANTALLA LO INDIQUE
31 </small> 31 </small>
32 <div class="btn-effect col-10 px-0 bg-white mt-4 mx-auto"> 32 <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"> 33 <div class="row mx-0 bg-primary badge-pill h-auto">
34 <div class="col-10 align-self-center text-center text-white"> 34 <div class="col-10 align-self-center text-center text-white">
35 Continuar 35 Continuar
36 </div> 36 </div>
37 <div class="col-2 align-self-center p-0"> 37 <div class="col-2 align-self-center p-0">
38 <img 38 <img
39 draggable="false" 39 draggable="false"
40 ondragstart="return false;" 40 ondragstart="return false;"
41 (contextmenu)="(false)" 41 (contextmenu)="(false)"
42 class="p-1 icon-50" 42 class="p-1 icon-50"
43 src="assets/img/ir.svg"/> 43 src="assets/img/ir.svg"/>
44 </div> 44 </div>
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
48 </div> 48 </div>
49 </div> 49 </div>
50 <div 50 <div
51 class="col-12 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center 51 class="col-12 col-sm-10 col-md-4 p-5 my-auto mx-3 h-auto align-self-center
52 btn-effect border border-primary rounded reduce-card-2"> 52 btn-effect border border-primary rounded reduce-card-1">
53 <div class="row h-auto"> 53 <div class="row h-auto">
54 <div class="col-12 col-md-4"> 54 <div class="col-12 col-md-12">
55 <img 55 <img
56 draggable="false" 56 draggable="false"
57 ondragstart="return false;" 57 ondragstart="return false;"
58 (contextmenu)="(false)" 58 (contextmenu)="(false)"
59 class="w-100 h-auto bg-white" 59 class="w-100 h-auto bg-white"
60 src="assets/img/tarjeta-chip.jpg"/> 60 src="assets/img/tarjeta-chip.jpg"/>
61 </div> 61 </div>
62 <div class="col-12 col-md-8 h-auto"> 62 <div class="col-12 col-md-12 h-auto">
63 <p class="h2 m-0 text-primary">Chip</p> 63 <p class="h2 m-0 text-primary">Chip</p>
64 <small class=" m-0"> 64 <small class=" m-0">
65 INTRODUCÍ TU TARJETA POR LA<br> 65 INTRODUCÍ TU TARJETA POR LA<br>
66 PARTE INFERIOR DE LECTOR <br> 66 PARTE INFERIOR DE LECTOR <br>
67 CUANDO LA PANTALLA LO INDIQUE 67 CUANDO LA PANTALLA LO INDIQUE
68 </small> 68 </small>
69 <div class="btn-effect col-10 px-0 bg-white mt-4 mx-auto"> 69 <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"> 70 <div class="row mx-0 bg-primary badge-pill h-auto">
71 <div class="col-10 align-self-center text-center text-white"> 71 <div class="col-10 align-self-center text-center text-white">
72 Continuar 72 Continuar
73 </div> 73 </div>
74 <div class="col-2 align-self-center p-0"> 74 <div class="col-2 align-self-center p-0">
75 <img 75 <img
76 draggable="false" 76 draggable="false"
77 ondragstart="return false;" 77 ondragstart="return false;"
78 (contextmenu)="(false)" 78 (contextmenu)="(false)"
79 class="p-1 icon-50" 79 class="p-1 icon-50"
80 src="assets/img/ir.svg"/> 80 src="assets/img/ir.svg"/>
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 </div> 84 </div>
85 </div> 85 </div>
86 </div> 86 </div>
87 <div 87 <div
88 class="col-12 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center 88 class="col-12 col-sm-10 col-md-4 p-5 mr-auto h-auto align-self-center
89 btn-effect border border-primary rounded reduce-card-2"> 89 btn-effect border border-primary rounded reduce-card-1">
90 <div class="row h-auto"> 90 <div class="row h-auto">
91 <div class="col-12 col-md-4"> 91 <div class="col-12 col-md-12">
92 <img 92 <img
93 draggable="false" 93 draggable="false"
94 ondragstart="return false;" 94 ondragstart="return false;"
95 (contextmenu)="(false)" 95 (contextmenu)="(false)"
96 class="w-100 h-auto bg-white" 96 class="w-100 h-auto bg-white"
97 src="assets/img/tarjeta-contact-less.jpg"/> 97 src="assets/img/tarjeta-contact-less.jpg"/>
98 </div> 98 </div>
99 <div class="col-12 col-md-8 h-auto"> 99 <div class="col-12 col-md-12 h-auto">
100 <p class="h2 m-0 text-primary">Contact-less</p> 100 <p class="h2 m-0 text-primary">Contact-less</p>
101 <small class=" m-0"> 101 <small class=" m-0">
102 ACERCÁ LA TARJETA AL POSNET<br> 102 ACERCÁ LA TARJETA AL POSNET<br>
103 CUANDO LA PANTALLA LO INDIQUE 103 CUANDO LA PANTALLA LO INDIQUE
104 </small> 104 </small>
105 <div class="btn-effect col-10 px-0 bg-white mt-4 mx-auto"> 105 <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"> 106 <div class="row mx-0 bg-primary badge-pill h-auto">
107 <div class="col-10 align-self-center text-center text-white"> 107 <div class="col-10 align-self-center text-center text-white">
108 Continuar 108 <small>Continuar</small>
109 </div> 109 </div>
110 <div class="col-2 align-self-center p-0"> 110 <div class="col-2 align-self-center p-0">
111 <img 111 <img
112 draggable="false" 112 draggable="false"
113 ondragstart="return false;" 113 ondragstart="return false;"
114 (contextmenu)="(false)" 114 (contextmenu)="(false)"
115 class="p-1 icon-50" 115 class="p-1 icon-50"
116 src="assets/img/ir.svg"/> 116 src="assets/img/ir.svg"/>
117 </div> 117 </div>
118 </div> 118 </div>
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 </div> 124 </div>
125 </div> 125 </div>
126 126
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.scss
Diff comments   View file @ 75cc199
1 .reduce-card-1.media-pantalla {
2 max-width: 30% !important;
3 margin: 0px 15px !important;
4 height: 670px !important;
5 }
6
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.ts
Diff comments   View file @ 75cc199
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 mediaPantalla: boolean;
10 constructor() { } 9 constructor() { }
11 10
12 ngOnInit() {} 11 ngOnInit() {
12 this.mediaPantalla();
13 }
14
15 mediaPantalla() {
16 if ($('body').hasClass('media-pantalla')) {
17 $('.reduce-card').addClass('media-pantalla');
18 }
19 }
13 } 20 }
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.html
Diff comments   View file @ 75cc199
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 34 <div *ngFor="let categoria of categorias; let i = index;">
35 class="row mx-2 mb-2 h-25 h-lg-30 justify-content-center tab cat-content" 35 <div
36 [ngClass]="{ 'active rounded shadow px-2': categoria.selected, 36 class="row mx-2 mb-2 h-25 h-lg-30 justify-content-center tab cat-content"
37 'border-bottom-effect': !categoria.selected, 37 [ngClass]="{ 'active rounded shadow px-2': categoria.selected,
38 'media-pantalla': templateCategorias.classList.contains('media-pantalla')}" 38 'border-bottom-effect': !categoria.selected,
39 (click)="selectCategoria(i, categoria.id)" 39 'media-pantalla': templateCategorias.classList.contains('media-pantalla')}"
40 id="cat-content" 40 (click)="selectCategoria(i, categoria.id)"
41 *ngFor="let categoria of categorias; let i = index;"> 41 id="cat-content"
42 <img 42 *ngIf="categoria.articulos > 0">
43 <img
43 draggable="false" 44 draggable="false"
44 ondragstart="return false;" 45 ondragstart="return false;"
45 (contextmenu)="false" 46 (contextmenu)="false"
46 class="d-none d-sm-block rounded-circle w-auto h-75" 47 class="d-none d-sm-block rounded-circle w-auto h-auto col-12"
47 src="{{urlImagenes}}{{categoria.path_imagen}}" 48 src="{{urlImagenes}}{{categoria.path_imagen}}"
48 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"> 49 onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
49 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 50 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
51 </div>
50 </div> 52 </div>
51 </div> 53 </div>
52 <div class="col-auto btn-effect h-5 cat-btn"> 54 <div class="col-auto btn-effect h-5 cat-btn">
53 <img 55 <img
54 draggable="false" 56 draggable="false"
55 ondragstart="return false;" 57 ondragstart="return false;"
56 (contextmenu)="false" 58 (contextmenu)="false"
57 class="h-100 d-block mx-auto rotate-90" 59 class="h-100 d-block mx-auto rotate-90"
58 src="assets/img/ir-color.svg" 60 src="assets/img/ir-color.svg"
59 (mousedown)="scrollY(templateCategorias, 100)" 61 (mousedown)="scrollY(templateCategorias, 100)"
60 (mouseup)="mouseup()" 62 (mouseup)="mouseup()"
61 (mouseleave)="mouseup()"> 63 (mouseleave)="mouseup()">
62 </div> 64 </div>
63 </div> 65 </div>
64 66
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
Diff comments   View file @ 75cc199
1 import { Component, OnInit, HostListener, Output, EventEmitter } from '@angular/core'; 1 import { Component, OnInit, HostListener, Output, EventEmitter } from '@angular/core';
2 import { ICategoria } from 'src/app/interfaces/ICategoria'; 2 import { ICategoria } from 'src/app/interfaces/ICategoria';
3 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 3 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
4 import { CategoriaService } from 'src/app/services/categoria/categoria.service'; 4 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
5 import { APP_SETTINGS } from 'src/etc/AppSettings'; 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-filtro-categorias', 8 selector: 'app-filtro-categorias',
9 templateUrl: './filtro-categorias.component.html', 9 templateUrl: './filtro-categorias.component.html',
10 styleUrls: ['./filtro-categorias.component.scss'] 10 styleUrls: ['./filtro-categorias.component.scss']
11 }) 11 })
12 export class FiltroCategoriasComponent implements OnInit { 12 export class FiltroCategoriasComponent implements OnInit {
13 @Output() getProductos = new EventEmitter<any>(); 13 @Output() getProductos = new EventEmitter<any>();
14 @Output() setProductos = new EventEmitter<any>(); 14 @Output() setProductos = new EventEmitter<any>();
15 @Output() filterItems = new EventEmitter<any>(); 15 @Output() filterItems = new EventEmitter<any>();
16 categorias: ICategoria[] = []; 16 categorias: ICategoria[] = [];
17 timeoutHandler: any; 17 timeoutHandler: any;
18 categoriaActive = null; 18 categoriaActive = null;
19 allActive = true; 19 allActive = true;
20 queMostrar = 'todos'; 20 queMostrar = 'todos';
21 urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`; 21 urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
22 22
23 constructor( 23 constructor(
24 private categoriaService: CategoriaService, 24 private categoriaService: CategoriaService,
25 private inactiveScreen: InactiveScreenService, 25 private inactiveScreen: InactiveScreenService
26 ) { } 26 ) { }
27 27
28 ngOnInit() { 28 ngOnInit() {
29 this.mediaPantalla(); 29 this.mediaPantalla();
30 } 30 }
31 31
32 getCategorias() { 32 getCategorias() {
33 this.categoriaService.getAll() 33 this.categoriaService.getAll()
34 .subscribe((categorias: ICategoria[]) => { 34 .subscribe((categorias: ICategoria[]) => {
35 switch (this.queMostrar) { 35 switch (this.queMostrar) {
36 case 'todos': 36 case 'todos':
37 this.categorias = categorias; 37 this.categorias = categorias;
38 this.categoriaActive = 0; 38 this.categoriaActive = 0;
39 break; 39 break;
40 case 'promociones': 40 case 'promociones':
41 this.categorias = categorias; 41 this.categorias = categorias;
42 this.categoriaActive = 19; 42 this.categoriaActive = 19;
43 break; 43 break;
44 case 'ordenar': 44 case 'ordenar':
45 this.categorias = categorias.filter((categoria: ICategoria) => { 45 this.categorias = categorias.filter((categoria: ICategoria) => {
46 return categoria.ES_PEDIDO; 46 return categoria.ES_PEDIDO;
47 }); 47 });
48 this.categoriaActive = 4; 48 this.categoriaActive = 4;
49 break; 49 break;
50 default: 50 default:
51 this.categorias = categorias; 51 this.categorias = categorias;
52 this.categoriaActive = 0; 52 this.categoriaActive = 0;
53 break; 53 break;
54 } 54 }
55 !localStorage.getItem('articulos') ? 55 !localStorage.getItem('articulos') ?
56 this.getProductos.emit() : 56 this.getProductos.emit() :
57 this.setProductos.emit(); 57 this.setProductos.emit();
58 }); 58 });
59 this.mediaPantalla(); 59 this.mediaPantalla();
60 } 60 }
61 61
62 selectCategoria(index: number, idCategoria?: number) { 62 selectCategoria(index: number, idCategoria?: number) {
63 if (this.categoriaActive === idCategoria) return; 63 if (this.categoriaActive === idCategoria) return;
64 this.categoriaActive = idCategoria; 64 this.categoriaActive = idCategoria;
65 this.allActive = idCategoria === 0 ? true : false; 65 this.allActive = idCategoria === 0 ? true : false;
66 this.categorias.forEach((categoria, i) => { 66 this.categorias.forEach((categoria, i) => {
67 categoria.selected = index === i ? true : false; 67 categoria.selected = index === i ? true : false;
68 }); 68 });
69 this.filterItems.emit(); 69 this.filterItems.emit();
70
70 } 71 }
71 72
72 @HostListener('scroll', ['$event']) 73 @HostListener('scroll', ['$event'])
73 scrollEvent(event: Event) { 74 scrollEvent(event: Event) {
74 clearTimeout(this.inactiveScreen.timerReposo); 75 clearTimeout(this.inactiveScreen.timerReposo);
75 this.inactiveScreen.startTimeOutInactividad(); 76 this.inactiveScreen.startTimeOutInactividad();
76 } 77 }
77 78
78 mouseup() { 79 mouseup() {
79 if (!this.timeoutHandler) return; 80 if (!this.timeoutHandler) return;
80 clearInterval(this.timeoutHandler); 81 clearInterval(this.timeoutHandler);
81 } 82 }
82 83
83 scrollY(el: HTMLElement, value) { 84 scrollY(el: HTMLElement, value) {
84 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 85 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
85 this.timeoutHandler = setInterval(() => { 86 this.timeoutHandler = setInterval(() => {
86 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 87 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
87 }, 500); 88 }, 500);
88 } 89 }
89 90
90 mediaPantalla() { 91 mediaPantalla() {
91 if ($('body').hasClass('media-pantalla')) { 92 if ($('body').hasClass('media-pantalla')) {
92 $('.cat-content,#cat-content') 93 $('.cat-content,#cat-content')
93 .addClass('media-pantalla') 94 .addClass('media-pantalla')
94 .addBack('media-pantalla'); 95 .addBack('media-pantalla');
95 } 96 }
96 } 97 }
97 } 98 }
98 99