Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 0111a6921cfc3b3541fc391371c08abbca7ac82c

Authored by Marcelo Puebla
2 parents 92394b2887 0d3b9b8f73
Exists in develop

Merge branch 'develop' into 'develop' 

Develop

En respuesta a las tareas "Pantalla Silla de ruedas", "pantalla adaptada (silla de ruedas)" y "optimizar espacios en pantalla completa..."

See merge request !71
Showing 25 changed files   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 0111a69
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="h-75 carrito-content"> 5 <div class="h-75 carrito-content" #carritoContent>
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- CARRITO --> 15 <!-- CARRITO -->
16 <div 16 <div
17 class="row mx-2 mt-4 h-80 h-lg-60 align-content-start scroll-y-visible" 17 class="row mx-2 mt-4 h-80 h-lg-60 align-content-start scroll-y-visible"
18 (scroll)="scrollEvent($event)"> 18 (scroll)="scrollEvent($event)">
19 <!-- MENSAJE DE ADVERTENCIA --> 19 <!-- MENSAJE DE ADVERTENCIA -->
20 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> 20 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
21 <p class="h5 text-center">No hay artículos en el carrito</p> 21 <p class="h5 text-center">No hay artículos en el carrito</p>
22 </div> 22 </div>
23 <!-- ARTICULOS --> 23 <!-- ARTICULOS -->
24 <div 24 <div
25 class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate carrito-articulo" 25 class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate carrito-articulo"
26 [ngClass]="{'media-pantalla': carritoContent.classList.contains('media-pantalla')}"
26 *ngFor="let articulo of articuloService.carrito; let i = index;" 27 *ngFor="let articulo of articuloService.carrito; let i = index;"
27 @EnterLeaveX> 28 @EnterLeaveX>
28 <!-- ARTICULO --> 29 <!-- ARTICULO -->
29 <div class="h-100 border border-primary rounded-sm"> 30 <div class="h-100 border border-primary rounded-sm">
30 <div class="row align-items-center mx-0 h-100"> 31 <div class="row align-items-center mx-0 h-100">
31 <!-- NOMBRE E IMAGEN --> 32 <!-- NOMBRE E IMAGEN -->
32 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary"> 33 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
33 <img 34 <img
34 draggable="false" 35 draggable="false"
35 ondragstart="return false;" 36 ondragstart="return false;"
36 (contextmenu)="false" 37 (contextmenu)="false"
37 class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm" 38 class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm"
38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 39 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
39 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"> 40 onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
40 <div class="row mx-0 h-100 h-md-45"> 41 <div class="row mx-0 h-100 h-md-45">
41 <p class="col text-primary text-truncate align-self-center"> 42 <p class="col text-primary text-truncate align-self-center">
42 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small> 43 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
43 </p> 44 </p>
44 </div> 45 </div>
45 </div> 46 </div>
46 <!-- CANTIDAD --> 47 <!-- CANTIDAD -->
47 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary"> 48 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
48 <p class="h-40"><small>CANT</small></p> 49 <p class="h-40"><small>CANT</small></p>
49 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> 50 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
50 </div> 51 </div>
51 <!-- PRECIO --> 52 <!-- PRECIO -->
52 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary"> 53 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
53 <p class="h-40"><small>PRECIO</small></p> 54 <p class="h-40"><small>PRECIO</small></p>
54 <div class="py-1 badge-pill bg-dark text-white"> 55 <div class="py-1 badge-pill bg-dark text-white">
55 <p><small>{{articulo.PreVen | currency}}</small></p> 56 <p><small>{{articulo.PreVen | currency}}</small></p>
56 </div> 57 </div>
57 </div> 58 </div>
58 <!-- ELIMINAR --> 59 <!-- ELIMINAR -->
59 <div class="col-6 col-md-3 align-self-center"> 60 <div class="col-6 col-md-3 align-self-center">
60 <div class="row mx-0 justify-content-center"> 61 <div class="row mx-0 justify-content-center">
61 <div 62 <div
62 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 63 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
63 (click)="deleteArticulo(i)"> 64 (click)="deleteArticulo(i)">
64 <span> 65 <span>
65 <small class="pr-2">ELIMINAR</small> 66 <small class="pr-2">ELIMINAR</small>
66 <img 67 <img
67 draggable="false" 68 draggable="false"
68 ondragstart="return false;" 69 ondragstart="return false;"
69 (contextmenu)="false" 70 (contextmenu)="false"
70 class="icon-20 rotate-45" 71 class="icon-20 rotate-45"
71 src="assets/img/mas-blanco.svg"> 72 src="assets/img/mas-blanco.svg">
72 </span> 73 </span>
73 </div> 74 </div>
74 </div> 75 </div>
75 </div> 76 </div>
76 </div> 77 </div>
77 </div> 78 </div>
78 </div> 79 </div>
79 </div> 80 </div>
80 <!-- TOTAL --> 81 <!-- TOTAL -->
81 <div class="row mx-3 mt-2 h-auto justify-content-end"> 82 <div class="row mx-3 mt-2 h-auto justify-content-end">
82 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div> 83 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
83 <div class="col-auto px-3 bg-primary badge-pill"> 84 <div class="col-auto px-3 bg-primary badge-pill">
84 <p class="text-center text-white py-1">{{articuloService.subTotal | currency}}</p> 85 <p class="text-center text-white py-1">{{articuloService.subTotal | currency}}</p>
85 </div> 86 </div>
86 </div> 87 </div>
87 <!-- CONTINUAR --> 88 <!-- CONTINUAR -->
88 <div 89 <div
89 *ngIf="articuloService.carrito.length" 90 *ngIf="articuloService.carrito.length"
90 class="row mx-3 mt-4 h-auto justify-content-end"> 91 class="row mx-3 mt-4 h-auto justify-content-end">
91 <div 92 <div
92 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 93 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
93 [routerLink]="['/forma-pago']"> 94 [routerLink]="['/forma-pago']">
94 <span> 95 <span>
95 <small class="pr-2">CONTINUAR</small> 96 <small class="pr-2">CONTINUAR</small>
96 <img 97 <img
97 draggable="false" 98 draggable="false"
98 ondragstart="return false;" 99 ondragstart="return false;"
99 (contextmenu)="false" 100 (contextmenu)="false"
100 class="icon-20" 101 class="icon-20"
101 src="assets/img/ir.svg"> 102 src="assets/img/ir.svg">
102 </span> 103 </span>
103 </div> 104 </div>
104 </div> 105 </div>
105 </div> 106 </div>
106 107
107 </div> 108 </div>
108 109
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 0111a69
1 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core'; 1 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
2 import { Location } from '@angular/common'; 2 import { Location } from '@angular/common';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { APP_SETTINGS } from 'src/etc/AppSettings'; 4 import { APP_SETTINGS } from 'src/etc/AppSettings';
5 import { Router } from '@angular/router'; 5 import { Router } from '@angular/router';
6 import { BsModalRef } from 'ngx-bootstrap/modal/public_api'; 6 import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
7 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 7 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
8 import { ANIMATIONS } from 'src/app/utils/animations'; 8 import { ANIMATIONS } from 'src/app/utils/animations';
9 9
10 @Component({ 10 @Component({
11 selector: 'app-carrito', 11 selector: 'app-carrito',
12 templateUrl: './carrito.component.html', 12 templateUrl: './carrito.component.html',
13 styleUrls: ['./carrito.component.scss'], 13 styleUrls: ['./carrito.component.scss'],
14 animations: [ANIMATIONS.EnterLeaveX] 14 animations: [ANIMATIONS.EnterLeaveX]
15 }) 15 })
16 export class CarritoComponent implements OnInit, OnDestroy { 16 export class CarritoComponent implements OnInit, OnDestroy {
17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
18 maxCantidad = 50; 18 maxCantidad = 50;
19 modalRef: BsModalRef; 19 modalRef: BsModalRef;
20 20
21 constructor( 21 constructor(
22 public articuloService: ArticuloService, 22 public articuloService: ArticuloService,
23 private location: Location, 23 private location: Location,
24 private router: Router, 24 private router: Router,
25 private inactiveScreen: InactiveScreenService, 25 private inactiveScreen: InactiveScreenService,
26 ) { } 26 ) { }
27 27
28 ngOnInit() { 28 ngOnInit() {
29 if (!this.articuloService.carrito.length) { 29 if (!this.articuloService.carrito.length) {
30 this.router.navigate(['']); 30 this.router.navigate(['']);
31 return; 31 return;
32 } 32 }
33 this.mediaPantallaP(); 33 this.mediaPantalla();
34 } 34 }
35 35
36 ngOnDestroy() { 36 ngOnDestroy() {
37 if (this.modalRef) this.modalRef.hide(); 37 if (this.modalRef) this.modalRef.hide();
38 } 38 }
39 39
40 deleteArticulo(index: number) { 40 deleteArticulo(index: number) {
41 this.articuloService.deleteArticulo(index); 41 this.articuloService.deleteArticulo(index);
42 } 42 }
43 43
44 goBack() { 44 goBack() {
45 this.location.back(); 45 this.location.back();
46 } 46 }
47 47
48 @HostListener('document:click', ['$event']) 48 @HostListener('document:click', ['$event'])
49 eventListener(event: Event) { 49 eventListener(event: Event) {
50 clearTimeout(this.inactiveScreen.timerReposo); 50 clearTimeout(this.inactiveScreen.timerReposo);
51 this.inactiveScreen.startTimeOutInactividad(); 51 this.inactiveScreen.startTimeOutInactividad();
52 } 52 }
53 53
54 @HostListener('scroll', ['$event']) 54 @HostListener('scroll', ['$event'])
55 scrollEvent(event: Event) { 55 scrollEvent(event: Event) {
56 clearTimeout(this.inactiveScreen.timerReposo); 56 clearTimeout(this.inactiveScreen.timerReposo);
57 this.inactiveScreen.startTimeOutInactividad(); 57 this.inactiveScreen.startTimeOutInactividad();
58 } 58 }
59 59
60 mediaPantallaP() { 60 mediaPantalla() {
61 if ($('body').hasClass('media-pantalla')) { 61 if ($('body').hasClass('media-pantalla')) {
62 $('.carrito-content,.carrito-articulo').addClass('media-pantalla'); 62 $(`.carrito-content`).addClass('media-pantalla').addBack('media-pantalla');
63 } 63 }
64 } 64 }
65 } 65 }
66 66
src/app/modules/forma-pago/forma-pago.component.html
Diff comments   View file @ 0111a69
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-20"> 2 <div class="row mx-0 h-20">
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-100"> 12 <div class="h-100">
13 <div class="h-10"></div> 13 <div class="h-10"></div>
14 <div class="row mt-5 mx-3 h-auto"> 14 <div class="row mt-5 mx-3 h-auto">
15 <div class="col-12 px-0 py-2 align-self-center"> 15 <div class="col-12 px-0 py-2 align-self-center">
16 <div class="px-3 text-center"> 16 <div class="px-3 text-center">
17 <p class="h4 text-truncate">SELECCIONA UNA FORMA DE PAGO</p> 17 <p class="h4 text-truncate">SELECCIONA UNA FORMA DE PAGO</p>
18 </div> 18 </div>
19 </div> 19 </div>
20 </div> 20 </div>
21 <!-- OPCION PAGO ELECTRONICO --> 21 <!-- OPCION PAGO ELECTRONICO -->
22 <div class="row mt-5 h-auto justify-content-center mx-0"> 22 <div class="row mt-5 h-auto justify-content-center mx-0">
23 <div class="col-5 px-0 h-auto align-self-start reduce-card-1"> 23 <div class="col-5 px-0 h-auto align-self-start reduce-card-1">
24 <div class="row justify-content-between"> 24 <div class="row justify-content-between">
25 <div class="col-12"> 25 <div class="col-12">
26 <div 26 <div
27 class="btn-effect col-auto align-self-center px-0 bg-white" 27 class="btn-effect col-auto align-self-center px-0 bg-white"
28 (click)="medioPago(9)"> 28 (click)="medioPago(9)">
29 <div class="row mx-0 bg-primary badge-pill heigth-80"> 29 <div class="row mx-0 bg-primary badge-pill heigth-80">
30 <div class="col-2 p-0"> 30 <div class="col-2 p-0">
31 <img 31 <img
32 draggable="false" 32 draggable="false"
33 ondragstart="return false;" 33 ondragstart="return false;"
34 (contextmenu)="false" 34 (contextmenu)="false"
35 class="pt-3 pl-2 icon-50" 35 class="pt-3 pl-2 icon-50"
36 src="assets/img/icono-pago-electronico.svg"> 36 src="assets/img/icono-pago-electronico.svg">
37 </div> 37 </div>
38 <div class="col-8 align-self-center text-center text-white h4">Pago electrónico</div> 38 <div class="col-8 align-self-center text-center text-white h4">Pago electrónico</div>
39 <div class="col-1 align-self-center p-0"> 39 <div class="col-1 align-self-center p-0">
40 <img 40 <img
41 draggable="false" 41 draggable="false"
42 ondragstart="return false;" 42 ondragstart="return false;"
43 (contextmenu)="false" 43 (contextmenu)="false"
44 class="p-1 icon-50" 44 class="p-1 icon-50"
45 src="assets/img/ir.svg"> 45 src="assets/img/ir.svg">
46 </div> 46 </div>
47 </div> 47 </div>
48 </div> 48 </div>
49 </div> 49 </div>
50 </div> 50 </div>
51 </div> 51 </div>
52 </div> 52 </div>
53 <!-- OPCION PAGO CON TARJETA --> 53 <!-- OPCION PAGO CON TARJETA -->
54 <div class="row mt-5 h-auto justify-content-center mx-0"> 54 <div class="row mt-5 h-auto justify-content-center mx-0">
55 <div class="col-5 px-0 h-auto align-self-start reduce-card-1"> 55 <div class="col-5 px-0 h-auto align-self-start reduce-card-2">
56 <div class="row justify-content-between"> 56 <div class="row justify-content-between">
57 <div class="col-12"> 57 <div class="col-12">
58 <div 58 <div
59 class="btn-effect col-auto align-self-center px-0 bg-white" 59 class="btn-effect col-auto align-self-center px-0 bg-white"
60 (click)="medioPago(4)"> 60 (click)="medioPago(4)">
61 <div class="row mx-0 bg-primary badge-pill heigth-80"> 61 <div class="row mx-0 bg-primary badge-pill heigth-80">
62 <div class="col-2 p-0"> 62 <div class="col-2 p-0">
63 <img 63 <img
64 draggable="false" 64 draggable="false"
65 ondragstart="return false;" 65 ondragstart="return false;"
66 (contextmenu)="false" 66 (contextmenu)="false"
67 class="pt-4 pl-2 icon-50" 67 class="pt-4 pl-2 icon-50"
68 src="assets/img/icono-pago-tarjeta.svg"> 68 src="assets/img/icono-pago-tarjeta.svg">
69 </div> 69 </div>
70 <div class="col-8 align-self-center text-center text-white h4">Pago con tarjeta</div> 70 <div class="col-8 align-self-center text-center text-white h4">Pago con tarjeta</div>
71 <div class="col-2 align-self-center p-0"> 71 <div class="col-2 align-self-center p-0">
72 <img 72 <img
73 draggable="false" 73 draggable="false"
74 ondragstart="return false;" 74 ondragstart="return false;"
75 (contextmenu)="false" 75 (contextmenu)="false"
76 class="p-1 icon-50" 76 class="p-1 icon-50"
77 src="assets/img/ir.svg"> 77 src="assets/img/ir.svg">
78 </div> 78 </div>
79 </div> 79 </div>
80 </div> 80 </div>
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 87
src/app/modules/forma-pago/forma-pago.component.scss
Diff comments   View file @ 0111a69
1 .reduce-card-1.media-pantalla { 1 .reduce-card-1.media-pantalla {
2 position: absolute; 2 position: absolute;
3 bottom: 150px; 3 bottom: 150px;
4 -webkit-box-flex: 0; 4 -webkit-box-flex: 0;
5 flex: 0 0 41.6666666667%; 5 flex: 0 0 35%;
6 max-width: 41.6666666667%; 6 max-width: 35%;
7 left: 10%; 7 left: 10%;
8 margin-left: 0 !important; 8 margin-left: 0 !important;
9 } 9 }
10 10
11 .reduce-card-2.media-pantalla { 11 .reduce-card-2.media-pantalla {
12 position: absolute; 12 position: absolute;
13 bottom: 150px; 13 bottom: 150px;
14 -webkit-box-flex: 0; 14 -webkit-box-flex: 0;
15 flex: 0 0 41.6666666667%; 15 flex: 0 0 35%;
16 max-width: 41.6666666667%; 16 max-width: 35%;
17 right: 10%; 17 right: 10%;
18 margin-right: 0 !important; 18 margin-right: 0 !important;
19 } 19 }
20 20
src/app/modules/info-formas-pago/info-formas-pago.component.ts
Diff comments   View file @ 0111a69
1 import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core'; 1 import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
2 import { BsModalService } from 'ngx-bootstrap/modal'; 2 import { BsModalService } from 'ngx-bootstrap/modal';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-formas-pago', 5 selector: 'app-formas-pago',
6 templateUrl: './info-formas-pago.component.html', 6 templateUrl: './info-formas-pago.component.html',
7 styleUrls: ['./info-formas-pago.component.scss'] 7 styleUrls: ['./info-formas-pago.component.scss']
8 }) 8 })
9 export class InfoFormasPagoComponent implements OnInit, OnDestroy { 9 export class InfoFormasPagoComponent implements OnInit, OnDestroy {
10 mediaPantalla = false;
11 timer: any; 10 timer: any;
12 11
13 constructor( 12 constructor(
14 private modalService: BsModalService, 13 private modalService: BsModalService,
15 ) { } 14 ) { }
16 15
17 ngOnInit() { } 16 ngOnInit() {
17 this.mediaPantalla();
18 }
18 19
19 ngOnDestroy() { 20 ngOnDestroy() {
20 if (this.timer) clearTimeout(this.timer); 21 if (this.timer) clearTimeout(this.timer);
21 } 22 }
22 23
23 openGoCaja(templateRef: TemplateRef<any>) { 24 openGoCaja(templateRef: TemplateRef<any>) {
24 const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-dialog-centered' }); 25 const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-dialog-centered' });
25 this.timer = setTimeout(() => { 26 this.timer = setTimeout(() => {
26 modalRef.hide(); 27 modalRef.hide();
27 }, 3000); 28 }, 3000);
28 } 29 }
30
31 mediaPantalla() {
32 if ($('body').hasClass('media-pantalla')) {
33 $('.reduce-card-1,.reduce-card-2')
34 .addClass('media-pantalla')
35 .addBack('media-pantalla');
36 }
37 }
29 } 38 }
src/app/modules/mensaje-final/mensaje-final.component.html
Diff comments   View file @ 0111a69
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 mt-5 mx-3 h-auto"> 13 <div class="row mt-5 mx-3 h-auto">
14 <div class="col-12 px-0 py-2 align-self-center text-center"> 14 <div class="col-12 px-0 py-2 align-self-center text-center">
15 <p class="h6 text-truncate">SEGUÍ ESTOS PASOS PARA</p> 15 <p class="h6 text-truncate">SEGUÍ ESTOS PASOS PARA</p>
16 <p class="h2 text-truncate text-secondary">retirar tu comida</p> 16 <p class="h2 text-truncate text-secondary">retirar tu comida</p>
17 </div> 17 </div>
18 </div> 18 </div>
19 <div class="row h-auto mt-5 mx-0 justify-content-center text-center"> 19 <div class="row h-auto mt-5 mx-0 justify-content-center text-center">
20 <div class="col-8 p-5 h-auto align-self-end border border-primary rounded"> 20 <div class="col-8 p-5 h-auto align-self-end border border-primary rounded">
21 <img 21 <img
22 draggable="false" 22 draggable="false"
23 ondragstart="return false;" 23 ondragstart="return false;"
24 (contextmenu)="false" 24 (contextmenu)="false"
25 class="img-in-top px-4 bg-white" 25 class="img-in-top px-4 bg-white"
26 src="assets/img/ticket.svg"> 26 src="assets/img/ticket.svg">
27 <p class="h6 mb-2"><small>PRESENTÁ EL TICKET EN CAJA Y AGUARDÁ TU PEDIDO</small></p> 27 <p class="h6 mb-2"><small>PRESENTÁ EL TICKET EN CAJA Y AGUARDÁ TU PEDIDO</small></p>
28 <p class="h2 text-primary">Número de pedido {{articuloService.idComanda}}</p> 28 <p class="h2 text-primary">Número de pedido {{articuloService.idComanda}}</p>
29 </div> 29 </div>
30 </div> 30 </div>
31 <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> 31 <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
32 <div class="col-8 p-5 h-auto align-self-end border border-primary rounded"> 32 <div class="col-8 p-5 h-auto align-self-end border border-primary rounded">
33 <img 33 <img
34 draggable="false" 34 draggable="false"
35 ondragstart="return false;" 35 ondragstart="return false;"
36 (contextmenu)="false" 36 (contextmenu)="false"
37 class="img-in-top px-4 bg-white" 37 class="img-in-top px-4 bg-white"
38 src="assets/img/bebidas.svg"> 38 src="assets/img/bebidas.svg">
39 <p class="h6"> 39 <p class="h6">
40 <small>TUS BEBIDAS Y COMIDAS FRÍAS RETIRALAS EN LAS HELADERAS Y DISPENSERS</small> 40 <small>TUS BEBIDAS Y COMIDAS FRÍAS RETIRALAS EN LAS HELADERAS Y DISPENSERS</small>
41 </p> 41 </p>
42 </div> 42 </div>
43 </div> 43 </div>
44 <div class="row h-auto mt-5 mx-0 justify-content-center text-center"> 44 <div class="row h-auto mt-5 mx-0 justify-content-center text-center">
45 <div class="col-8 p-5 h-auto align-self-end"> 45 <div class="col-8 p-5 h-auto align-self-end">
46 <p class="h2 text-info"> 46 <p class="h2 text-info">
47 ¡Listo!<br> 47 ¡Listo!<br>
48 Que lo disfrutes 48 Que lo disfrutes
49 </p> 49 </p>
50 </div> 50 </div>
51 </div> 51 </div>
52 <div class="row justify-content-center"> 52 <div class="row justify-content-center">
53 <div class="col-auto"> 53 <div class="col-auto">
54 <div 54 <div
55 class="d-inline-block py-1 btn-effect bg-primary badge-pill text-white" 55 class="d-inline-block w-100 py-1 btn-effect
56 bg-primary badge-pill text-white text-center"
56 (click)="goToSplash()"> 57 (click)="goToSplash()">
57 <span class="px-4">FINALIZAR</span> 58 <span class="px-4">FINALIZAR</span>
58 <img 59 <img
59 draggable="false" 60 draggable="false"
60 ondragstart="return false;" 61 ondragstart="return false;"
61 (contextmenu)="false" 62 (contextmenu)="false"
62 class="icon-30" 63 class="icon-30"
63 src="assets/img/ir.svg"> 64 src="assets/img/ir.svg">
64 </div> 65 </div>
65 </div> 66 </div>
66 </div> 67 </div>
67 </div> 68 </div>
68 </div> 69 </div>
69 70
src/app/modules/opcion-pedido/opcion-pedido.component.scss
Diff comments   View file @ 0111a69
1 .reduce-card-1.media-pantalla { 1 .reduce-card-1.media-pantalla {
2 position: absolute; 2 position: absolute;
3 bottom: 150px; 3 bottom: 150px;
4 -webkit-box-flex: 0; 4 -webkit-box-flex: 0;
5 flex: 0 0 41.6666666667%; 5 flex: 0 0 35%;
6 max-width: 41.6666666667%; 6 max-width: 35%;
7 left: 10%; 7 left: 10%;
8 margin-left: 0 !important; 8 margin-left: 0 !important;
9 } 9 }
10 10
11 .reduce-card-2.media-pantalla { 11 .reduce-card-2.media-pantalla {
12 position: absolute; 12 position: absolute;
13 bottom: 150px; 13 bottom: 150px;
14 -webkit-box-flex: 0; 14 -webkit-box-flex: 0;
15 flex: 0 0 41.6666666667%; 15 flex: 0 0 35%;
16 max-width: 41.6666666667%; 16 max-width: 35%;
17 right: 10%; 17 right: 10%;
18 margin-right: 0 !important; 18 margin-right: 0 !important;
19 } 19 }
20 20
src/app/modules/opcion-pedido/opcion-pedido.component.ts
Diff comments   View file @ 0111a69
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Router } from '@angular/router'; 2 import { Router } from '@angular/router';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-opcion-pedido', 5 selector: 'app-opcion-pedido',
6 templateUrl: './opcion-pedido.component.html', 6 templateUrl: './opcion-pedido.component.html',
7 styleUrls: ['./opcion-pedido.component.scss'] 7 styleUrls: ['./opcion-pedido.component.scss']
8 }) 8 })
9 export class OpcionPedidoComponent implements OnInit { 9 export class OpcionPedidoComponent implements OnInit {
10 10
11 constructor( 11 constructor(
12 private router: Router, 12 private router: Router,
13 ) { } 13 ) { }
14 14
15 ngOnInit() { 15 ngOnInit() {
16 this.reducirPantalla(); 16 this.mediaPantalla();
17 } 17 }
18 18
19 goTo(path) { 19 goTo(path) {
20 this.router.navigate([path]); 20 this.router.navigate([path]);
21 } 21 }
22 22
23 seleccionPedido(lugar) { 23 seleccionPedido(lugar) {
24 lugar = lugar === 'true' ? true : false; 24 lugar = lugar === 'true' ? true : false;
25 localStorage.setItem('pedidoParaLlevar', lugar); 25 localStorage.setItem('pedidoParaLlevar', lugar);
26 } 26 }
27 27
28 reducirPantalla() { 28 mediaPantalla() {
29 if ($('body').hasClass('media-pantalla')) { 29 if ($('body').hasClass('media-pantalla')) {
30 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); 30 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
31 } 31 }
32 } 32 }
33 } 33 }
34 34
src/app/modules/pago-electronico/pago-electronico.component.html
Diff comments   View file @ 0111a69
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 mt-5 mx-3 h-auto border border-primary rounded-sm"> 13 <div class="row mt-5 mx-3 h-auto border border-primary rounded-sm">
14 <div class="col-12 px-0 py-2 align-self-center"> 14 <div class="col-12 px-0 py-2 align-self-center">
15 <div class="px-3 text-center"> 15 <div class="px-3 text-center">
16 <p class="h6 text-truncate">PAGO ELECTRÓNICO</p> 16 <p class="h6 text-truncate">PAGO ELECTRÓNICO</p>
17 </div> 17 </div>
18 </div> 18 </div>
19 </div> 19 </div>
20 <!-- QR --> 20 <!-- QR -->
21 <div class="row mx-0 mt-5 h-60 justify-content-center"> 21 <div class="row mx-0 mt-5 h-60 justify-content-center">
22 <div class="col-10 px-0 h-55 position-absolute"> 22 <div class="col-10 px-0 h-55 position-absolute">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="d-block mx-auto h-100 w-auto shadow rounded" 27 class="d-block mx-auto h-100 w-auto shadow rounded"
28 src="assets/img/qr-skin.jpg"> 28 src="assets/img/qr-skin.jpg">
29 </div> 29 </div>
30 <div class="col-10 px-0 h-100 mt-7 mt-lg-5"> 30 <div class="col-10 px-0 h-100 mt-7 mt-5">
31 <img 31 <img
32 draggable="false" 32 draggable="false"
33 ondragstart="return false;" 33 ondragstart="return false;"
34 (contextmenu)="false" 34 (contextmenu)="false"
35 class="d-block mx-auto h-40" 35 class="d-block mx-auto mt-7 qr-mt h-40"
36 [src]="urlQr"> 36 [src]="urlQr">
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 41
src/app/modules/pago-electronico/pago-electronico.component.scss
Diff comments   View file @ 0111a69
1 .mt-7 { 1 .mt-7 {
2 margin-top: 6rem; 2 margin-top: 6rem;
3 } 3 }
4
5 .qr-mt.media-pantalla {
6 margin-top: 2rem !important;;
7 }
4 8
src/app/modules/pago-electronico/pago-electronico.component.ts
Diff comments   View file @ 0111a69
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 import { APP_SETTINGS } from 'src/etc/AppSettings'; 4 import { APP_SETTINGS } from 'src/etc/AppSettings';
5 5
6 @Component({ 6 @Component({
7 selector: 'app-pago-electronico', 7 selector: 'app-pago-electronico',
8 templateUrl: './pago-electronico.component.html', 8 templateUrl: './pago-electronico.component.html',
9 styleUrls: ['./pago-electronico.component.scss'] 9 styleUrls: ['./pago-electronico.component.scss']
10 }) 10 })
11 export class PagoElectronicoComponent implements OnInit { 11 export class PagoElectronicoComponent implements OnInit {
12 urlQr = `${APP_SETTINGS.apiDeboSuite}/qr/${APP_SETTINGS.deploy}/${APP_SETTINGS.codigoP}/tienda/${APP_SETTINGS.terminal}`; 12 urlQr = `${APP_SETTINGS.apiDeboSuite}/qr/${APP_SETTINGS.numeroPlanilla}/${APP_SETTINGS.codigoP}/tienda/${APP_SETTINGS.terminal}`;
13 13
14 constructor( 14 constructor(
15 private articuloService: ArticuloService, 15 private articuloService: ArticuloService,
16 private router: Router, 16 private router: Router,
17 ) { } 17 ) { }
18 18
19 ngOnInit() { 19 ngOnInit() {
20 if (!this.articuloService.carrito.length) { 20 if (!this.articuloService.carrito.length) {
21 this.router.navigate(['']); 21 this.router.navigate(['']);
22 return; 22 return;
23 } 23 }
24 const dataPago = { 24 const dataPago = {
25 pedidoAnombreDe: '' 25 pedidoAnombreDe: ''
26 }; 26 };
27 dataPago.pedidoAnombreDe = ''; 27 dataPago.pedidoAnombreDe = '';
28 this.articuloService.pay(dataPago) 28 this.articuloService.pay(dataPago)
29 .subscribe((res: any) => { 29 .subscribe((res: any) => {
30 this.articuloService.idComanda = res.data; 30 this.articuloService.idComanda = res.data;
31 this.router.navigate(['mensaje-final']); 31 this.router.navigate(['mensaje-final']);
32 }, err => console.error(err)); 32 }, err => console.error(err));
33 this.mediaPantalla();
34 }
35 mediaPantalla() {
36 if ($('body').hasClass('media-pantalla')) {
37 $('.qr-mt').addClass('media-pantalla');
38 }
33 } 39 }
34
35 } 40 }
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.html
Diff comments   View file @ 0111a69
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-md-32 h-lg-45 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 d-sm-block rounded-circle" 29 class="col-12 img-fluid align-self-end d-none
30 d-sm-block rounded-circle w-100 h-auto"
30 src="assets/img/logo-spot.svg"> 31 src="assets/img/logo-spot.svg">
31 <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>
32 </div> 33 </div>
33 <div 34 <div
34 class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" 35 class="row mx-2 mb-2 h-25 h-lg-30 justify-content-center tab cat-content"
35 [ngClass]="{ 'active rounded shadow px-2': categoria.selected, 'border-bottom-effect': !categoria.selected }" 36 [ngClass]="{ 'active rounded shadow px-2': categoria.selected,
37 'border-bottom-effect': !categoria.selected,
38 'media-pantalla': templateCategorias.classList.contains('media-pantalla')}"
36 (click)="selectCategoria(i, categoria.id)" 39 (click)="selectCategoria(i, categoria.id)"
40 id="cat-content"
37 *ngFor="let categoria of categorias; let i = index;"> 41 *ngFor="let categoria of categorias; let i = index;">
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="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle" 46 class="col-12 img-fluid align-self-end d-none
47 d-sm-block rounded-circle w-100 h-auto"
43 src="{{urlImagenes}}{{categoria.path_imagen}}" 48 src="{{urlImagenes}}{{categoria.path_imagen}}"
44 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"> 49 onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
45 <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>
46 </div> 51 </div>
47 </div> 52 </div>
48 <div class="col-auto btn-effect h-5 cat-btn"> 53 <div class="col-auto btn-effect h-5 cat-btn">
49 <img 54 <img
50 draggable="false" 55 draggable="false"
51 ondragstart="return false;" 56 ondragstart="return false;"
52 (contextmenu)="false" 57 (contextmenu)="false"
53 class="h-100 d-block mx-auto rotate-90" 58 class="h-100 d-block mx-auto rotate-90"
54 src="assets/img/ir-color.svg" 59 src="assets/img/ir-color.svg"
55 (mousedown)="scrollY(templateCategorias, 100)" 60 (mousedown)="scrollY(templateCategorias, 100)"
56 (mouseup)="mouseup()" 61 (mouseup)="mouseup()"
57 (mouseleave)="mouseup()"> 62 (mouseleave)="mouseup()">
58 </div> 63 </div>
59 </div> 64 </div>
60 65
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.scss
Diff comments   View file @ 0111a69
1 $primary: #aa006b; 1 $primary: #aa006b;
2 2
3 .box-categorias { 3 .box-categorias {
4 height: calc(100% - 100px) !important; 4 height: calc(100% - 100px) !important;
5 } 5 }
6 6
7 .active { 7 .active {
8 transition: 0.3s; 8 transition: 0.3s;
9 background-color: white; 9 background-color: white;
10 border-bottom: 3px solid $primary !important; 10 border-bottom: 3px solid $primary !important;
11 border-top: 3px solid $primary !important; 11 border-top: 3px solid $primary !important;
12 border-left: 3px solid $primary !important; 12 border-left: 3px solid $primary !important;
13 border-right: 3px solid $primary !important; 13 border-right: 3px solid $primary !important;
14 } 14 }
15 15
16 .border-bottom-effect { 16 .border-bottom-effect {
17 border: none; 17 border: none;
18 position: relative; 18 position: relative;
19 &:hover { 19 &:hover {
20 border: none; 20 border: none;
21 } 21 }
22 &::after { 22 &::after {
23 content: ""; 23 content: "";
24 position: absolute; 24 position: absolute;
25 width: 0px; 25 width: 0px;
26 height: 3px; 26 height: 3px;
27 left: 50%; 27 left: 50%;
28 bottom: 0; 28 bottom: 0;
29 background-color: $primary; 29 background-color: $primary;
30 transition: all ease-in-out 0.2s; 30 transition: all ease-in-out 0.2s;
31 } 31 }
32 &:hover::after { 32 &:hover::after {
33 width: 100%; 33 width: 100%;
34 left: 0; 34 left: 0;
35 } 35 }
36 } 36 }
37 37
38 .cat-content.media-pantalla { 38 .cat-content.media-pantalla,
39 #cat-content.media-pantalla {
39 margin: 0.5rem 0.7rem !important; 40 margin: 0.5rem 0.7rem !important;
40 height: 76% !important; 41 height: 95% !important;
41 } 42 }
42 43
43 .cat-box.media-pantalla { 44 .cat-box.media-pantalla {
44 height: calc(100% - 85px) !important; 45 height: calc(100% - 85px) !important;
45 } 46 }
46 47
47 .cat-btn.media-pantalla { 48 .cat-btn.media-pantalla {
48 height: 7% !important; 49 height: 7% !important;
49 } 50 }
50 51
51 #content.media-pantalla, 52 #content.media-pantalla,
52 #boxCarrito.media-pantalla { 53 #boxCarrito.media-pantalla {
53 max-height: 60% !important; 54 max-height: 60% !important;
54 } 55 }
55 56
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
Diff comments   View file @ 0111a69
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.apiDeboSuite}/imagenes/`; 21 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/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();
30 }
29 31
30 getCategorias() { 32 getCategorias() {
31 this.categoriaService.getAll() 33 this.categoriaService.getAll()
32 .subscribe((categorias: ICategoria[]) => { 34 .subscribe((categorias: ICategoria[]) => {
33 switch (this.queMostrar) { 35 switch (this.queMostrar) {
34 case 'todos': 36 case 'todos':
35 this.categorias = categorias; 37 this.categorias = categorias;
36 this.categoriaActive = 0; 38 this.categoriaActive = 0;
37 break; 39 break;
38 case 'promociones': 40 case 'promociones':
39 this.categorias = categorias; 41 this.categorias = categorias;
40 this.categoriaActive = 19; 42 this.categoriaActive = 19;
41 break; 43 break;
42 case 'ordenar': 44 case 'ordenar':
43 this.categorias = categorias.filter((categoria: ICategoria) => { 45 this.categorias = categorias.filter((categoria: ICategoria) => {
44 return categoria.ES_PEDIDO; 46 return categoria.ES_PEDIDO;
45 }); 47 });
46 this.categoriaActive = 4; 48 this.categoriaActive = 4;
47 break; 49 break;
48 default: 50 default:
49 this.categorias = categorias; 51 this.categorias = categorias;
50 this.categoriaActive = 0; 52 this.categoriaActive = 0;
51 break; 53 break;
52 } 54 }
53 !localStorage.getItem('articulos') ? 55 !localStorage.getItem('articulos') ?
54 this.getProductos.emit() : 56 this.getProductos.emit() :
55 this.setProductos.emit(); 57 this.setProductos.emit();
56 }); 58 });
59 this.mediaPantalla();
57 } 60 }
58 61
59 selectCategoria(index: number, idCategoria?: number) { 62 selectCategoria(index: number, idCategoria?: number) {
60 if (this.categoriaActive === idCategoria) return; 63 if (this.categoriaActive === idCategoria) return;
61 this.categoriaActive = idCategoria; 64 this.categoriaActive = idCategoria;
62 this.allActive = idCategoria === 0 ? true : false; 65 this.allActive = idCategoria === 0 ? true : false;
63 this.categorias.forEach((categoria, i) => { 66 this.categorias.forEach((categoria, i) => {
64 categoria.selected = index === i ? true : false; 67 categoria.selected = index === i ? true : false;
65 }); 68 });
66 this.filterItems.emit(); 69 this.filterItems.emit();
67 } 70 }
68 71
69 @HostListener('scroll', ['$event']) 72 @HostListener('scroll', ['$event'])
70 scrollEvent(event: Event) { 73 scrollEvent(event: Event) {
71 clearTimeout(this.inactiveScreen.timerReposo); 74 clearTimeout(this.inactiveScreen.timerReposo);
72 this.inactiveScreen.startTimeOutInactividad(); 75 this.inactiveScreen.startTimeOutInactividad();
73 } 76 }
74 77
75 mouseup() { 78 mouseup() {
76 if (!this.timeoutHandler) return; 79 if (!this.timeoutHandler) return;
77 clearInterval(this.timeoutHandler); 80 clearInterval(this.timeoutHandler);
78 } 81 }
79 82
80 scrollY(el: HTMLElement, value) { 83 scrollY(el: HTMLElement, value) {
81 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 84 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
82 this.timeoutHandler = setInterval(() => { 85 this.timeoutHandler = setInterval(() => {
83 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 86 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
84 }, 500); 87 }, 500);
85 } 88 }
89
90 mediaPantalla() {
91 if ($('body').hasClass('media-pantalla')) {
92 $('.cat-content,#cat-content')
93 .addClass('media-pantalla')
94 .addBack('media-pantalla');
95 }
96 }
86 } 97 }
87 98
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 0111a69
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="row mx-0 h-80 align-items-end"> 5 <div class="row mx-0 align-items-end"
6 [ngClass]="boxCarrito.classList.contains('media-pantalla')
7 ? 'h-68' : 'h-80'">
6 <!-- CABECERA --> 8 <!-- CABECERA -->
7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 9 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 10 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 11 <div class="px-3">
10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 12 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11 </div> 13 </div>
12 </div> 14 </div>
13 </div> 15 </div>
14 <!-- CUERPO --> 16 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-50 h-md-70" id="content"> 17 <div class="row w-100 mr-4 h-50 h-md-70" id="content">
16 <div class="col-12 h-100 px-0 py-3"> 18 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 19 <div class="row mx-0 h-100">
18 <app-filtro-categorias 20 <app-filtro-categorias
19 class="col-5 col-sm-3 col-xl-2 h-100" 21 class="col-5 col-sm-3 col-xl-2 h-100"
20 #filtroCategorias 22 #filtroCategorias
21 (getProductos)="getProductos()" 23 (getProductos)="getProductos()"
22 (setProductos)="setProductos()" 24 (setProductos)="setProductos()"
23 (filterItems)="filterItems()"> 25 (filterItems)="filterItems()">
24 </app-filtro-categorias> 26 </app-filtro-categorias>
25 <!-- LISTA DE ARTICULOS --> 27 <!-- LISTA DE ARTICULOS -->
26 <div 28 <div
27 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 29 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
28 (scroll)="scrollEvent($event)"> 30 (scroll)="scrollEvent($event)">
29 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 31 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
30 <!-- ARTICULO --> 32 <!-- ARTICULO -->
31 <div 33 <div
32 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;" 34 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"
33 class="col px-2 my-1 my-md-3 h-auto"> 35 class="col px-2 my-1 my-md-3 h-auto">
34 <div 36 <div
35 class="swing-in-top-fwd btn-effect card h-auto" 37 class="swing-in-top-fwd btn-effect card h-auto"
36 (click)="selectArticulo(articulo)"> 38 (click)="selectArticulo(articulo)">
37 <img 39 <img
38 draggable="false" 40 draggable="false"
39 ondragstart="return false;" 41 ondragstart="return false;"
40 (contextmenu)="false" 42 (contextmenu)="false"
41 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 43 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
42 onerror="this.src='assets/img/imagen-no-encontrada.jpg'" 44 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
43 class="card-img-top h-30 h-md-55 rounded-sm"> 45 class="card-img-top w-100 h-auto h-md-55 rounded-sm">
44 <div class="row mx-0 py-1 h-auto justify-content-center"> 46 <div class="row mx-0 py-1 h-auto justify-content-center">
45 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60"> 47 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">
46 {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}} 48 {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
47 </p> 49 </p>
48 <div class="col-12 px-1 align-self-end h-auto"> 50 <div class="col-12 px-1 align-self-end h-auto">
49 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 51 <div class="row mx-0 justify-content-between bg-primary badge-pill">
50 <div class="col px-0 align-self-center text-white text-right"> 52 <div class="col px-0 align-self-center text-white text-right">
51 {{articulo.PreVen | currency}} 53 {{articulo.PreVen | currency}}
52 </div> 54 </div>
53 <div class="col-5 px-0"> 55 <div class="col-5 px-0">
54 <img 56 <img
55 draggable="false" 57 draggable="false"
56 ondragstart="return false;" 58 ondragstart="return false;"
57 (contextmenu)="false" 59 (contextmenu)="false"
58 class="d-block ml-auto py-1 icon-30" 60 class="d-block ml-auto py-1 icon-30"
59 src="assets/img/ir.svg"> 61 src="assets/img/ir.svg">
60 </div> 62 </div>
61 </div> 63 </div>
62 </div> 64 </div>
63 </div> 65 </div>
64 </div> 66 </div>
65 </div> 67 </div>
66 </div> 68 </div>
67 <!-- BOTON VER MAS --> 69 <!-- BOTON VER MAS -->
68 <div class="row mx-0"> 70 <div class="row mx-0">
69 <div 71 <div
70 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 72 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
71 class="col-12 px-0 mb-2"> 73 class="col-12 px-0 mb-2">
72 <button 74 <button
73 (click)="increaseShow()" 75 (click)="increaseShow()"
74 class="btn btn-block btn-outline-primary"> 76 class="btn btn-block btn-outline-primary">
75 Ver Más 77 Ver Más
76 </button> 78 </button>
77 </div> 79 </div>
78 </div> 80 </div>
79 </div> 81 </div>
80 </div> 82 </div>
81 </div> 83 </div>
82 </div> 84 </div>
83 <!-- FOOTER CARRITO DE COMPRAS --> 85 <!-- FOOTER CARRITO DE COMPRAS -->
84 <div class="row w-90 mx-auto h-auto justify-content-center"> 86 <div class="row w-90 mx-auto h-auto justify-content-center">
85 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 87 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
86 [ngClass]="boxCarrito.classList.contains('media-pantalla') 88 [ngClass]="boxCarrito.classList.contains('media-pantalla')
87 ? 'col-8' : 'col-12'" id="boxCarrito"> 89 ? 'col-8' : 'col-12'" id="boxCarrito">
88 <!-- CABECERA --> 90 <!-- CABECERA -->
89 <div class="row mx-0 h-15 border-bottom border-primary"> 91 <div class="row mx-0 h-15 border-bottom border-primary">
90 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 92 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
91 </div> 93 </div>
92 <!-- CUERPO --> 94 <!-- CUERPO -->
93 <div class="row h-85 mx-0 justify-content-around"> 95 <div class="row h-85 mx-0 justify-content-around">
94 <!-- BOTON SCROLL IZQUIERDA --> 96 <!-- BOTON SCROLL IZQUIERDA -->
95 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 97 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
96 <img 98 <img
97 draggable="false" 99 draggable="false"
98 ondragstart="return false;" 100 ondragstart="return false;"
99 (contextmenu)="false" 101 (contextmenu)="false"
100 class="icon-30 rotate-180-neg" 102 class="icon-30 rotate-180-neg"
101 src="assets/img/ir-fondo-color.svg" 103 src="assets/img/ir-fondo-color.svg"
102 (mousedown)="scrollX(templateCarrito, -100)" 104 (mousedown)="scrollX(templateCarrito, -100)"
103 (mouseup)="mouseup()" 105 (mouseup)="mouseup()"
104 (mouseleave)="mouseup()"> 106 (mouseleave)="mouseup()">
105 </div> 107 </div>
106 <!-- CARRITO --> 108 <!-- CARRITO -->
107 <div class="col-6 col-sm-8 col-lg-10 h-100"> 109 <div class="col-6 col-sm-8 col-lg-10 h-100">
108 <div 110 <div
109 #templateCarrito 111 #templateCarrito
110 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 112 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
111 (scroll)="scrollEvent($event)"> 113 (scroll)="scrollEvent($event)">
112 <!-- ARTICULOS --> 114 <!-- ARTICULOS -->
113 <div 115 <div
114 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 116 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
115 *ngFor="let articulo of articuloService.carrito; let i = index;" 117 *ngFor="let articulo of articuloService.carrito; let i = index;"
116 @EnterLeaveY> 118 @EnterLeaveY>
117 <img 119 <img
118 class="btn-effect icon-20 mr-2 position-absolute right-0" 120 class="btn-effect icon-20 mr-2 position-absolute right-0"
119 src="assets/img/icono-cancelar-color.svg" 121 src="assets/img/icono-cancelar-color.svg"
120 (click)="deleteArticulo(i)"> 122 (click)="deleteArticulo(i)">
121 <img 123 <img
122 draggable="false" 124 draggable="false"
123 ondragstart="return false;" 125 ondragstart="return false;"
124 (contextmenu)="false" 126 (contextmenu)="false"
125 class="d-block img-fluid p-2 mx-auto rounded" 127 class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto"
126 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 128 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
127 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"> 129 onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
128 <p class="d-block mt-auto text-center text-primary text-truncate"> 130 <p class="d-block mt-auto text-center text-primary text-truncate">
129 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small> 131 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
130 </p> 132 </p>
131 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> 133 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
132 </div> 134 </div>
133 <!-- MENSAJE DE ADVERTENCIA --> 135 <!-- MENSAJE DE ADVERTENCIA -->
134 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 136 <div *ngIf="!articuloService.carrito.length" class="col h-100">
135 <p class="text-center py-5">No hay articulos en el carrito</p> 137 <p class="text-center py-5">No hay articulos en el carrito</p>
136 </div> 138 </div>
137 </div> 139 </div>
138 </div> 140 </div>
139 <!-- BOTON SCROLL DERECHA --> 141 <!-- BOTON SCROLL DERECHA -->
140 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 142 <div *ngIf="articuloService.carrito.length"
143 class="col-auto btn-effect h-20 align-self-center d-contents">
141 <img 144 <img
142 draggable="false" 145 draggable="false"
143 ondragstart="return false;" 146 ondragstart="return false;"
144 (contextmenu)="false" 147 (contextmenu)="false"
145 class="icon-30" 148 class="icon-30"
146 src="assets/img/ir-fondo-color.svg" 149 src="assets/img/ir-fondo-color.svg"
147 (mousedown)="scrollX(templateCarrito, 100)" 150 (mousedown)="scrollX(templateCarrito, 100)"
148 (mouseup)="mouseup()" 151 (mouseup)="mouseup()"
149 (mouseleave)="mouseup()"> 152 (mouseleave)="mouseup()">
150 </div> 153 </div>
151 </div> 154 </div>
152 </div> 155 </div>
153 <!-- TOTAL--> 156 <!-- TOTAL-->
154 <div 157 <div
155 class="col-auto mt-2 ml-auto h-20"> 158 class="col-auto mt-2 ml-auto h-20">
156 <div class="row mx-0"> 159 <div class="row mx-0">
157 <div class="col-auto align-self-center text-primary">TOTAL</div> 160 <div class="col-auto align-self-center text-primary">TOTAL</div>
158 <div class="col-auto bg-primary badge-pill"> 161 <div class="col-auto bg-primary badge-pill">
159 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 162 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
160 </div> 163 </div>
161 </div> 164 </div>
162 </div> 165 </div>
163 166
164 <!-- VER CARRITO --> 167 <!-- VER CARRITO -->
165 <div 168 <div
166 class="col-auto px-0 mt-2 h-20" 169 class="col-auto px-0 mt-2 h-20"
167 *ngIf="articuloService.carrito.length" 170 *ngIf="articuloService.carrito.length"
168 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 171 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
169 <div 172 <div
170 class="btn-effect col-auto px-0 align-self-center bg-white" 173 class="btn-effect col-auto px-0 align-self-center bg-white"
171 [routerLink]="['/carrito']"> 174 [routerLink]="['/carrito']">
172 <div class="row mx-0 bg-light"> 175 <div class="row mx-0 bg-light">
173 <div class="col-auto p-0 bg-primary"> 176 <div class="col-auto p-0 bg-primary">
174 <img 177 <img
175 draggable="false" 178 draggable="false"
176 ondragstart="return false;" 179 ondragstart="return false;"
177 (contextmenu)="false" 180 (contextmenu)="false"
178 class="p-2 icon-40" 181 class="p-2 icon-40"
179 src="assets/img/carrito.svg"> 182 src="assets/img/carrito.svg">
180 </div> 183 </div>
181 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 184 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
182 </div> 185 </div>
183 </div> 186 </div>
184 </div> 187 </div>
185 188
186 </div> 189 </div>
187 </div> 190 </div>
188 191
189 </div> 192 </div>
190 193
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ 0111a69
1 #content.media-pantalla, 1 #content.media-pantalla,
2 #cat-content.media-pantalla,
2 #boxCarrito.media-pantalla { 3 #boxCarrito.media-pantalla {
3 max-height: 60% !important; 4 max-height: 60% !important;
4 } 5 }
6
7 .modal-content.media-pantalla {
8 margin-top: auto !important;
9 }
10
11 .d-contents {
12 display: contents !important;
13 }
5 14
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 0111a69
1 import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core'; 1 import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core';
2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { IArticulo } from 'src/app/interfaces/IArticulo'; 4 import { IArticulo } from 'src/app/interfaces/IArticulo';
5 import { APP_SETTINGS } from 'src/etc/AppSettings'; 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 import { ICategoria } from 'src/app/interfaces/ICategoria'; 6 import { ICategoria } from 'src/app/interfaces/ICategoria';
7 import { ISinonimo } from 'src/app/interfaces/ISinonimo'; 7 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
9 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 9 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
10 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; 10 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
11 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; 11 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
12 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component'; 12 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
13 import * as _ from 'lodash'; 13 import * as _ from 'lodash';
14 import { ANIMATIONS } from 'src/app/utils/animations'; 14 import { ANIMATIONS } from 'src/app/utils/animations';
15 15
16 @Component({ 16 @Component({
17 selector: 'app-seleccion-articulos', 17 selector: 'app-seleccion-articulos',
18 templateUrl: './seleccion-articulos.component.html', 18 templateUrl: './seleccion-articulos.component.html',
19 styleUrls: ['./seleccion-articulos.component.scss'], 19 styleUrls: ['./seleccion-articulos.component.scss'],
20 animations: [ANIMATIONS.EnterLeaveY] 20 animations: [ANIMATIONS.EnterLeaveY]
21 }) 21 })
22 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy { 22 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
23 showSpinner = true; 23 showSpinner = true;
24 timeoutHandler: any; 24 timeoutHandler: any;
25 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 25 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
26 articulos: IArticulo[] = []; 26 articulos: IArticulo[] = [];
27 auxArticulos: IArticulo[] = []; 27 auxArticulos: IArticulo[] = [];
28 showQuantity = 100; 28 showQuantity = 100;
29 searchTerm = ''; 29 searchTerm = '';
30 ordenandoByVendidos = true; 30 ordenandoByVendidos = true;
31 modalRef: BsModalRef; 31 modalRef: BsModalRef;
32 total = 0; 32 total = 0;
33 @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent; 33 @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
34 34
35 constructor( 35 constructor(
36 public articuloService: ArticuloService, 36 public articuloService: ArticuloService,
37 private sinonimoService: SinonimoService, 37 private sinonimoService: SinonimoService,
38 private modalService: BsModalService, 38 private modalService: BsModalService,
39 private inactiveScreen: InactiveScreenService, 39 private inactiveScreen: InactiveScreenService,
40 ) { } 40 ) { }
41 41
42 ngOnInit() { } 42 ngOnInit() { }
43 43
44 ngAfterViewInit(): void { 44 ngAfterViewInit(): void {
45 this.filtroCategorias.getCategorias(); 45 this.filtroCategorias.getCategorias();
46 this.mediaPantalla(); 46 this.mediaPantalla();
47 } 47 }
48 48
49 ngOnDestroy() { 49 ngOnDestroy() {
50 for (let i = 1; i <= this.modalService.getModalsCount(); i++) { 50 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
51 this.modalService.hide(i); 51 this.modalService.hide(i);
52 } 52 }
53 } 53 }
54 54
55 getProductos() { 55 getProductos() {
56 this.articuloService.getAll() 56 this.articuloService.getAll()
57 .subscribe((result: IArticulo[]) => { 57 .subscribe((result: IArticulo[]) => {
58 this.articuloService.setArticulosSinImagen(result); 58 this.articuloService.setArticulosSinImagen(result);
59 if (this.filtroCategorias.queMostrar === 'ordenar') { 59 if (this.filtroCategorias.queMostrar === 'ordenar') {
60 this.filtroCategorias.categorias.forEach((categoria: ICategoria) => { 60 this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {
61 const tempArticulos = result.filter((articulo: IArticulo) => { 61 const tempArticulos = result.filter((articulo: IArticulo) => {
62 return articulo.categoria_selfservice === categoria.id; 62 return articulo.categoria_selfservice === categoria.id;
63 }); 63 });
64 result = tempArticulos; 64 result = tempArticulos;
65 }); 65 });
66 } 66 }
67 localStorage.setItem('articulos', JSON.stringify(result)); 67 localStorage.setItem('articulos', JSON.stringify(result));
68 this.setProductos(); 68 this.setProductos();
69 }, (error) => { 69 }, (error) => {
70 this.showSpinner = false; 70 this.showSpinner = false;
71 console.error(error); 71 console.error(error);
72 }); 72 });
73 } 73 }
74 74
75 setProductos() { 75 setProductos() {
76 this.articulos = JSON.parse(localStorage.getItem('articulos')); 76 this.articulos = JSON.parse(localStorage.getItem('articulos'));
77 this.filterItems(); 77 this.filterItems();
78 } 78 }
79 79
80 filterItems() { 80 filterItems() {
81 if (this.filtroCategorias.categoriaActive === 0) { 81 if (this.filtroCategorias.categoriaActive === 0) {
82 this.auxArticulos = this.articulos; 82 this.auxArticulos = this.articulos;
83 return; 83 return;
84 } 84 }
85 this.auxArticulos = this.articulos.filter(x => { 85 this.auxArticulos = this.articulos.filter(x => {
86 return x.categoria_selfservice === this.filtroCategorias.categoriaActive; 86 return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
87 }); 87 });
88 this.ordenar(); 88 this.ordenar();
89 } 89 }
90 90
91 ordenar() { 91 ordenar() {
92 if (this.ordenandoByVendidos) { 92 if (this.ordenandoByVendidos) {
93 this.auxArticulos.sort((a, b) => { 93 this.auxArticulos.sort((a, b) => {
94 return b.cantidadVendida - a.cantidadVendida; 94 return b.cantidadVendida - a.cantidadVendida;
95 }); 95 });
96 } 96 }
97 } 97 }
98 98
99 selectArticulo(articulo: IArticulo) { 99 selectArticulo(articulo: IArticulo) {
100 this.getByID(articulo.id); 100 this.getByID(articulo.id);
101 } 101 }
102 102
103 getByID(id: number) { 103 getByID(id: number) {
104 this.articuloService.getById(id) 104 this.articuloService.getById(id)
105 .subscribe((res: IArticulo) => { 105 .subscribe((res: IArticulo) => {
106 if (res.FPP) { 106 if (res.FPP) {
107 this.openModalPromos(res); 107 this.openModalPromos(res);
108 } else { 108 } else {
109 this.getSinonimos(res); 109 this.getSinonimos(res);
110 } 110 }
111 }, err => console.error(err)); 111 }, err => console.error(err));
112 } 112 }
113 113
114 getSinonimos(articulo: IArticulo) { 114 getSinonimos(articulo: IArticulo) {
115 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) 115 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
116 .subscribe((res: any[]) => { 116 .subscribe((res: any[]) => {
117 if (res.length) { 117 if (res.length) {
118 const sinonimos = []; 118 const sinonimos = [];
119 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); 119 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
120 Object.keys(gruposArticulos).forEach(key => { 120 Object.keys(gruposArticulos).forEach(key => {
121 sinonimos.push({ productos: gruposArticulos[key] }); 121 sinonimos.push({ productos: gruposArticulos[key] });
122 }); 122 });
123 res = sinonimos; 123 res = sinonimos;
124 this.openModalSinonimos(res, articulo); 124 this.openModalSinonimos(res, articulo);
125 } else { 125 } else {
126 this.articuloService.setArticulo(articulo); 126 this.articuloService.setArticulo(articulo);
127 } 127 }
128 }); 128 });
129 } 129 }
130 130
131 openModalPromos(articulo: IArticulo) { 131 openModalPromos(articulo: IArticulo) {
132 this.modalRef = this.modalService.show(PromocionComponent, { 132 this.modalRef = this.modalService.show(PromocionComponent, {
133 initialState: { articulosPromo: [articulo] }, 133 initialState: { articulosPromo: [articulo] },
134 class: 'modal-promo modal-dialog-centered' 134 class: 'modal-promo modal-dialog-centered'
135 }); 135 });
136 this.mediaPantalla();
136 } 137 }
137 138
138 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 139 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
139 this.modalRef = this.modalService.show(SinonimoComponent, { 140 this.modalRef = this.modalService.show(SinonimoComponent, {
140 initialState: { sinonimos: sinonimosData }, 141 initialState: { sinonimos: sinonimosData },
141 class: 'modal-promo modal-dialog-centered' 142 class: 'modal-promo modal-dialog-centered'
142 }); 143 });
143 144
144 this.modalRef.content.onClose 145 this.modalRef.content.onClose
145 .subscribe((res: any) => { 146 .subscribe((res: any) => {
146 for (const a of articulo.productos) { 147 for (const a of articulo.productos) {
147 for (const aRes of res.articulos) { 148 for (const aRes of res.articulos) {
148 if (a.idSinonimo === aRes.ID_SIN) { 149 if (a.idSinonimo === aRes.ID_SIN) {
149 a.CODA = aRes.CodArt; 150 a.CODA = aRes.CodArt;
150 a.CodArt = aRes.CodArt; 151 a.CodArt = aRes.CodArt;
151 a.SECA = aRes.CodSec; 152 a.SECA = aRes.CodSec;
152 aRes.CodSec = aRes.CodSec; 153 aRes.CodSec = aRes.CodSec;
153 a.PreVen = aRes.PreVen; 154 a.PreVen = aRes.PreVen;
154 a.id = aRes.id; 155 a.id = aRes.id;
155 a.DET_LAR = aRes.DET_LAR; 156 a.DET_LAR = aRes.DET_LAR;
156 a.DetArt = aRes.DetArt; 157 a.DetArt = aRes.DetArt;
157 } 158 }
158 } 159 }
159 } 160 }
160 this.articuloService.setArticulo(articulo); 161 this.articuloService.setArticulo(articulo);
161 }); 162 });
163 this.mediaPantalla();
162 } 164 }
163 165
164 deleteArticulo(index: number) { 166 deleteArticulo(index: number) {
165 this.articuloService.deleteArticulo(index); 167 this.articuloService.deleteArticulo(index);
166 } 168 }
167 169
168 increaseShow() { 170 increaseShow() {
169 this.showQuantity += 100; 171 this.showQuantity += 100;
170 } 172 }
171 173
172 @HostListener('scroll', ['$event']) 174 @HostListener('scroll', ['$event'])
173 scrollEvent(event: Event) { 175 scrollEvent(event: Event) {
174 clearTimeout(this.inactiveScreen.timerReposo); 176 clearTimeout(this.inactiveScreen.timerReposo);
175 this.inactiveScreen.startTimeOutInactividad(); 177 this.inactiveScreen.startTimeOutInactividad();
176 } 178 }
177 179
178 mouseup() { 180 mouseup() {
179 if (!this.timeoutHandler) return; 181 if (!this.timeoutHandler) return;
180 clearInterval(this.timeoutHandler); 182 clearInterval(this.timeoutHandler);
181 } 183 }
182 184
183 scrollY(el: HTMLElement, value) { 185 scrollY(el: HTMLElement, value) {
184 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 186 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
185 this.timeoutHandler = setInterval(() => { 187 this.timeoutHandler = setInterval(() => {
186 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 188 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
187 }, 500); 189 }, 500);
188 } 190 }
189 191
190 scrollX(el: HTMLElement, value) { 192 scrollX(el: HTMLElement, value) {
191 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 193 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
192 this.timeoutHandler = setInterval(() => { 194 this.timeoutHandler = setInterval(() => {
193 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 195 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
194 }, 500); 196 }, 500);
195 } 197 }
196 198
197 mediaPantalla() { 199 mediaPantalla() {
198 if ($('body').hasClass('media-pantalla')) { 200 if ($('body').hasClass('media-pantalla')) {
199 $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria') 201 $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,
202 .cat-box,.img-categoria, .modal-content`)
200 .addClass('media-pantalla') 203 .addClass('media-pantalla')
201 .addBack('media-pantalla'); 204 .addBack('media-pantalla');
202 } 205 }
203 } 206 }
204 } 207 }
205 208
src/app/shared/footer/footer.component.html
Diff comments   View file @ 0111a69
1 <div class="row w-90 mx-auto h-100 justify-content-between bg-white"> 1 <div class="row w-90 mx-auto h-100 w-100 justify-content-between bg-white">
2 <div class="col-auto align-self-center px-0 bg-white"> 2 <div class="col-auto align-self-center px-0 bg-white">
3 <div class="btn-effect row mx-0 bg-light" (click)="reducirPantalla()"> 3 <div class="btn-effect row mx-0 bg-light" (click)="reducirPantalla()">
4 <div class="col-auto align-self-center text-primary">ADAPTAR PANTALLA</div> 4 <div class="col-auto align-self-center text-primary">ADAPTAR PANTALLA</div>
5 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 5 <div class="col-auto p-0 bg-primary d-none d-sm-block">
6 <img 6 <img
7 draggable="false" 7 draggable="false"
8 ondragstart="return false;" 8 ondragstart="return false;"
9 (contextmenu)="false" 9 (contextmenu)="false"
10 class="p-2 icon-60" 10 class="p-2 icon-60"
11 src="assets/img/icono-silla-de-ruedas.svg"> 11 src="assets/img/icono-silla-de-ruedas.svg">
12 </div> 12 </div>
13 </div> 13 </div>
14 </div> 14 </div>
15 <div 15 <div
16 class="btn-effect col-auto align-self-center px-0 bg-white" 16 class="btn-effect col-auto align-self-center px-0 bg-white"
17 (click)="goBack()"> 17 (click)="goBack()">
18 <div class="row mx-0 bg-light"> 18 <div class="row mx-0 bg-light">
19 <div class="col-auto align-self-center text-primary">VOLVER</div> 19 <div class="col-auto align-self-center text-primary">VOLVER</div>
20 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 20 <div class="col-auto p-0 bg-primary d-none d-sm-block">
21 <img 21 <img
22 draggable="false" 22 draggable="false"
23 ondragstart="return false;" 23 ondragstart="return false;"
24 (contextmenu)="false" 24 (contextmenu)="false"
25 class="p-2 icon-40" 25 class="p-2 icon-40"
26 src="assets/img/icono-volver.svg"> 26 src="assets/img/icono-volver.svg">
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 </div> 30 </div>
31 31
src/app/shared/footer/footer.component.ts
Diff comments   View file @ 0111a69
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Location } from '@angular/common'; 2 import { Location } from '@angular/common';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-footer', 5 selector: 'app-footer',
6 templateUrl: './footer.component.html', 6 templateUrl: './footer.component.html',
7 styleUrls: ['./footer.component.scss'] 7 styleUrls: ['./footer.component.scss']
8 }) 8 })
9 export class FooterComponent implements OnInit { 9 export class FooterComponent implements OnInit {
10 constructor(private location: Location) { } 10 constructor(private location: Location) { }
11 11
12 ngOnInit() { } 12 ngOnInit() { }
13 13
14 goBack() { 14 goBack() {
15 this.location.back(); 15 this.location.back();
16 } 16 }
17 17
18 reducirPantalla() { 18 reducirPantalla() {
19 $(` 19 $(`body,
20 body,
21 .reduce-card-1, 20 .reduce-card-1,
22 .reduce-card-2, 21 .reduce-card-2,
23 #content, 22 #content,
24 .cat-content, 23 .cat-content,
25 .cat-btn, 24 .cat-btn,
26 .cat-box, 25 .cat-box,
27 #boxCarrito, 26 #boxCarrito,
28 #headerPublicidad, 27 #headerPublicidad,
29 #headerPad, 28 #headerPad,
30 .img-categoria, 29 .img-categoria,
31 .carrito-articulo, 30 .carrito-articulo,
32 .carrito-content, 31 .carrito-content,
33 .pago-tarjeta, 32 .pago-tarjeta,
34 .modal-promo`) 33 .modal-promo,
34 .modal-content,
35 .qr-mt`)
35 .toggleClass('media-pantalla'); 36 .toggleClass('media-pantalla');
36 } 37 }
37 } 38 }
src/app/shared/header-publicidad/header-publicidad.component.html
Diff comments   View file @ 0111a69
1 <div class="row mx-0 h-20" id="headerPublicidad"> 1 <div class="row mx-0" id="headerPublicidad" #headerPublicidad
2 [ngClass]="headerPublicidad.classList.contains('media-pantalla')
3 ? 'h-31' : 'h-20'" id="boxCarrito">
2 <div class="col-12 p-3 h-100" id="headerPad"> 4 <div class="col-12 p-3 h-100" id="headerPad">
3 <div class="h-100"> 5 <div class="h-100">
4 <carousel [showIndicators]="false" [interval]="4000"> 6 <carousel [showIndicators]="false" [interval]="4000">
5 <slide *ngFor="let p of publicidades"> 7 <slide *ngFor="let p of publicidades">
6 <img 8 <img
7 class="h-100 w-100" 9 class="h-100 w-100"
8 draggable="false" 10 draggable="false"
9 ondragstart="return false;" 11 ondragstart="return false;"
10 (contextmenu)="false" 12 (contextmenu)="false"
11 src="{{urlImagenes}}{{p.imagen}}" 13 src="{{urlImagenes}}{{p.imagen}}"
12 (click)="elegirArticulo(p)"> 14 (click)="elegirArticulo(p)">
13 </slide> 15 </slide>
14 </carousel> 16 </carousel>
15 </div> 17 </div>
16 </div> 18 </div>
17 </div> 19 </div>
18 20
src/app/shared/header-publicidad/header-publicidad.component.scss
Diff comments   View file @ 0111a69
1 #headerPublicidad.media-pantalla { 1 #headerPublicidad.media-pantalla {
2 max-height: 18% !important; 2 max-height: 280px !important;
3 padding-bottom: 0 !important; 3 padding-bottom: 0 !important;
4 } 4 }
5 5
6 #headerPad.media-pantalla { 6 #headerPad.media-pantalla {
7 padding: 0.3rem !important; 7 padding: 0 1rem !important;
8 } 8 }
9 9
src/app/shared/promocion/promocion.component.html
Diff comments   View file @ 0111a69
1 <div class="modal-header bg-primary rounded-top pt-4 px-2"> 1 <div class="d-flex justify-content-center"
2 <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length"> 2 *ngIf="loading">
3 <div class="col-8"> 3 <div class="spinner-border text-primary" role="status">
4 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p> 4 <span class="sr-only">Loading...</span>
5 </div>
6 <div class="col-4 align-self-center">
7 <div
8 class="row mx-0 justify-content-between bg-white badge-pill"
9 (click)="selectPromo(articulosPromo[0])">
10 <div class="col px-0 align-self-center text-primary">
11 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
12 </div>
13 <div class="col-3 px-0">
14 <img
15 draggable="false"
16 ondragstart="return false;"
17 (contextmenu)="false"
18 class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
19 src="assets/img/ir-color.svg">
20 </div>
21 </div>
22 </div>
23 </div> 5 </div>
24 </div> 6 </div>
25 <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length"> 7 <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
26 <div class="row mx-0 w-100"> 8 <div class="row mx-0 w-100">
27 <div class="col-9"> 9 <div class="col-9">
28 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p> 10 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
29 <h1 class="text-white mb-4">en un combo?</h1> 11 <h1 class="text-white mb-4">en un combo?</h1>
30 </div> 12 </div>
31 <div class="col-3"> 13 <div class="col-3">
32 <img 14 <img
33 draggable="false" 15 draggable="false"
34 ondragstart="return false;" 16 ondragstart="return false;"
35 (contextmenu)="false" 17 (contextmenu)="false"
36 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}" 18 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
37 onerror="this.src='assets/img/imagen-no-encontrada.jpg'" 19 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
38 class="card-img-top img-fluid rounded-circle"> 20 class="card-img-top img-fluid rounded-circle">
39 </div> 21 </div>
40 </div> 22 </div>
41 <div 23 <div
42 class="row mx-0 lista-promociones scroll-y-visible" 24 class="row mx-0 lista-promociones scroll-y-visible"
43 (scroll)="scrollEvent($event)"> 25 (scroll)="scrollEvent($event)">
44 <div class="col-12"> 26 <div class="col-12">
45 <div *ngFor="let promo of promociones"> 27 <div *ngFor="let promo of promociones">
46 <div 28 <div
47 class="mx-0 mb-2 btn-effect bg-white badge-pill text-primary" 29 class="mx-0 mb-2 btn-effect bg-white badge-pill text-primary"
48 (click)="selectPromo(promo)"> 30 (click)="selectPromo(promo)">
49 <div class="d-flex"> 31 <div class="d-flex">
50 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p> 32 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
51 <p class="font-weight-bold my-auto pr-2"> 33 <p class="font-weight-bold my-auto pr-2">
52 <span>{{promo.PreVen | currency}}</span> 34 <span>{{promo.PreVen | currency}}</span>
53 </p> 35 </p>
54 <img 36 <img
55 draggable="false" 37 draggable="false"
56 ondragstart="return false;" 38 ondragstart="return false;"
57 (contextmenu)="false" 39 (contextmenu)="false"
58 class="d-block icon-30 py-1" 40 class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
59 src="assets/img/ir-color.svg"> 41 src="assets/img/ir-color.svg">
60 </div> 42 </div>
61 </div> 43 </div>
62 </div> 44 </div>
63 </div> 45 </div>
64 </div> 46 </div>
65 </div>
66 47
src/app/shared/promocion/promocion.component.scss
Diff comments   View file @ 0111a69
1 .lista-promociones { 1 .lista-promociones {
2 min-height: auto; 2 min-height: auto;
3 max-height: 25vh; 3 max-height: 25vh;
4 } 4 }
5
6 .spinner-border {
7 width: 5rem;
8 height: 5rem;
9 }
5 10
src/app/shared/sinonimo/sinonimo.component.ts
Diff comments   View file @ 0111a69
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ISinonimo } from 'src/app/interfaces/ISinonimo'; 2 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
3 import { IArticulo } from 'src/app/interfaces/IArticulo'; 3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { BsModalRef } from 'ngx-bootstrap/modal'; 4 import { BsModalRef } from 'ngx-bootstrap/modal';
5 import { Subject, forkJoin } from 'rxjs'; 5 import { Subject, forkJoin } from 'rxjs';
6 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 6 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
7 import { element } from 'protractor'; 7 import { element } from 'protractor';
8 8
9 @Component({ 9 @Component({
10 selector: 'app-sinonimo', 10 selector: 'app-sinonimo',
11 templateUrl: './sinonimo.component.html', 11 templateUrl: './sinonimo.component.html',
12 styleUrls: ['./sinonimo.component.scss'] 12 styleUrls: ['./sinonimo.component.scss']
13 }) 13 })
14 export class SinonimoComponent implements OnInit { 14 export class SinonimoComponent implements OnInit {
15 sinonimos: ISinonimo[] = []; 15 sinonimos: ISinonimo[] = [];
16 isValid: boolean; 16 isValid: boolean;
17 onClose: Subject<any>; 17 onClose: Subject<any>;
18 articulosSelected: IArticulo[] = []; 18 articulosSelected: IArticulo[] = [];
19 19
20 constructor( 20 constructor(
21 private modalRef: BsModalRef, 21 private modalRef: BsModalRef,
22 private articuloService: ArticuloService, 22 private articuloService: ArticuloService,
23 ) { 23 ) {
24 this.onClose = new Subject(); 24 this.onClose = new Subject();
25 this.articulosSelected.length = this.sinonimos.length; 25 this.articulosSelected.length = this.sinonimos.length;
26 } 26 }
27 27
28 ngOnInit() { } 28 ngOnInit() { }
29 29
30 selectSinonimo(index: number, articulo: IArticulo) { 30 selectSinonimo(index: number, articulo: IArticulo) {
31 for (const a of this.sinonimos[index].productos) { 31 for (const a of this.sinonimos[index].productos) {
32 a.seleccionado = false; 32 a.seleccionado = false;
33 } 33 }
34 articulo.seleccionado = true; 34 articulo.seleccionado = true;
35 this.articulosSelected[index] = articulo; 35 this.articulosSelected[index] = articulo;
36 } 36 }
37 37
38 validate() { 38 validate() {
39 this.isValid = true; 39 this.isValid = true;
40 for (const s of this.sinonimos) { 40 for (const s of this.sinonimos) {
41 for (const a of s.productos) { 41 for (const a of s.productos) {
42 this.isValid = (!a.seleccionado) ? false : true; 42 this.isValid = (!a.seleccionado) ? false : true;
43 if (this.isValid) break; 43 if (this.isValid) break;
44 } 44 }
45 if (!this.isValid) break; 45 if (!this.isValid) break;
46 } 46 }
47 return !this.isValid ? 'disabled' : 'btn-effect'; 47 return !this.isValid ? 'disabled' : 'btn-effect';
48 } 48 }
49 49
50 continue() { 50 continue() {
51 if (!this.isValid) return; 51 if (!this.isValid) return;
52 const ID_SINS = []; 52 const ID_SINS = [];
53 const observables = []; 53 const observables = [];
54 54
55 for (const articulo of this.articulosSelected) { 55 for (const articulo of this.articulosSelected) {
56 ID_SINS.push(articulo.ID_SIN); 56 ID_SINS.push(articulo.ID_SIN);
57 } 57 }
58 58
59 for (const articulo of this.articulosSelected) { 59 for (const articulo of this.articulosSelected) {
60 observables.push(this.articuloService.getById(articulo.id)); 60 observables.push(this.articuloService.getById(articulo.id));
61 } 61 }
62 62
63 forkJoin(observables) 63 forkJoin(observables)
64 .subscribe((res: IArticulo[]) => { 64 .subscribe((res: IArticulo[]) => {
65 for (const articulo of res) { 65 for (const articulo of res) {
66 for (const ID_SIN of ID_SINS) { 66 for (const ID_SIN of ID_SINS) {
67 articulo.ID_SIN = ID_SIN; 67 articulo.ID_SIN = ID_SIN;
68 } 68 }
69 } 69 }
70 this.modalRef.hide(); 70 this.modalRef.hide();
71 this.onClose.next({ 71 this.onClose.next({
72 articulos: res, 72 articulos: res,
73 }); 73 });
74 }, err => console.error(err)); 74 }, err => console.error(err));
75 } 75 }
76 76
77 scrollTo(index: number) { 77 scrollTo(index: number) {
78 const element = document.getElementById(index.toString()); 78 const element = document.getElementById(index.toString());
79 element.scrollIntoView({ behavior: "smooth", block: "center" }); 79 element.scrollIntoView({ behavior: 'smooth', block: 'center' });
80 } 80 }
81 81
82 } 82 }
83 83
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/typography.scss"; 2 @import "scss/typography.scss";
3 @import "scss/height-width.scss"; 3 @import "scss/height-width.scss";
4 @import "scss/animations.scss"; 4 @import "scss/animations.scss";
5 @import "scss/icons.scss"; 5 @import "scss/icons.scss";
6 @import "scss/scroll.scss"; 6 @import "scss/scroll.scss";
7 @import "node_modules/bootstrap/scss/_variables.scss"; 7 @import "node_modules/bootstrap/scss/_variables.scss";
8 8
9 @font-face { 9 @font-face {
10 font-family: "Gotham"; 10 font-family: "Gotham";
11 font-style: normal; 11 font-style: normal;
12 font-weight: normal; 12 font-weight: normal;
13 src: url("assets/fonts/gotham-medium.woff") format("woff"); 13 src: url("assets/fonts/gotham-medium.woff") format("woff");
14 } 14 }
15 15
16 html, 16 html,
17 body { 17 body {
18 max-height: 100vh; 18 max-height: 100vh;
19 height: 100%; 19 height: 100%;
20 font-family: "Gotham"; 20 font-family: "Gotham";
21 overflow: hidden; 21 overflow: hidden;
22 user-select: none; 22 user-select: none;
23 } 23 }
24 24
25 body.media-pantalla { 25 body.media-pantalla {
26 height: 50% !important; 26 height: calc(50%) !important;
27 position: absolute; 27 position: absolute;
28 bottom: 0; 28 bottom: 0;
29 width: 100%; 29 width: 100%;
30 background-color: #3d3d3d;
30 } 31 }
31 32
32 .btn-effect { 33 .btn-effect {
33 transition: all 0.3s !important; 34 transition: all 0.3s !important;
34 &:hover { 35 &:hover {
35 cursor: pointer !important; 36 cursor: pointer !important;
36 opacity: 0.7 !important; 37 opacity: 0.7 !important;
37 } 38 }
38 &:active { 39 &:active {
39 transform: scale(1.02) !important; 40 transform: scale(1.02) !important;
40 } 41 }
41 } 42 }
42 43
43 .cursor-pointer { 44 .cursor-pointer {
44 cursor: pointer; 45 cursor: pointer;
45 } 46 }
46 47
47 p { 48 p {
48 margin: 0 !important; 49 margin: 0 !important;
49 } 50 }
50 51
51 .img-in-top { 52 .img-in-top {
52 position: absolute; 53 position: absolute;
53 top: -35px; 54 top: -35px;
54 left: 50%; 55 left: 50%;
55 height: 70px; 56 height: 70px;
56 -webkit-transform: translateX(-50%); 57 -webkit-transform: translateX(-50%);
57 transform: translateX(-50%); 58 transform: translateX(-50%);
58 } 59 }
59 60
60 .right-0 { 61 .right-0 {
61 right: 0; 62 right: 0;
62 } 63 }
63 64
64 .left-0 { 65 .left-0 {
65 left: 0; 66 left: 0;
66 } 67 }
67 68
68 .rotate-45 { 69 .rotate-45 {
69 transform: rotate(45deg); 70 transform: rotate(45deg);
70 } 71 }
71 72
72 .rotate-90 { 73 .rotate-90 {
73 transform: rotate(90deg); 74 transform: rotate(90deg);
74 } 75 }
75 76
76 .rotate-90-neg { 77 .rotate-90-neg {
77 transform: rotate(-90deg); 78 transform: rotate(-90deg);
78 } 79 }
79 80
80 .rotate-180-neg { 81 .rotate-180-neg {
81 transform: rotate(-180deg); 82 transform: rotate(-180deg);
82 } 83 }
83 84
84 .disabled { 85 .disabled {
85 opacity: 0.5; 86 opacity: 0.5;
86 } 87 }
88
89 .modal-content.media-pantalla {
90 margin-top: auto !important;
91 margin-bottom: 50px !important;
92 }
93
94 .modal-content {
95 background: transparent !important;
96 }
87 97