Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 6215ca50b443d771d3c5da4848bc04bb029ad610

Authored by Luis Suarez
2 parents 5b476e62c2 246138abf9
Exists in develop

solving merge

Showing 23 changed files   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 6215ca5
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" #carritoContent> 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 [ngClass]="{'media-pantalla': carritoContent.classList.contains('media-pantalla')}"
27 *ngFor="let articulo of articuloService.carrito; let i = index;" 27 *ngFor="let articulo of articuloService.carrito; let i = index;"
28 @EnterLeave> 28 @EnterLeaveX>
29 <!-- ARTICULO --> 29 <!-- ARTICULO -->
30 <div class="h-100 border border-primary rounded-sm"> 30 <div class="h-100 border border-primary rounded-sm">
31 <div class="row align-items-center mx-0 h-100"> 31 <div class="row align-items-center mx-0 h-100">
32 <!-- NOMBRE E IMAGEN --> 32 <!-- NOMBRE E IMAGEN -->
33 <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">
34 <img 34 <img
35 draggable="false" 35 draggable="false"
36 ondragstart="return false;" 36 ondragstart="return false;"
37 (contextmenu)="false" 37 (contextmenu)="false"
38 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"
39 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 39 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
40 onerror="this.src='assets/img/image-not-found.jpg'"> 40 onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
41 <div class="row mx-0 h-100 h-md-45"> 41 <div class="row mx-0 h-100 h-md-45">
42 <p class="col text-primary text-truncate align-self-center"> 42 <p class="col text-primary text-truncate align-self-center">
43 <small>{{articulo.DetArt | uppercase }}</small> 43 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
44 </p> 44 </p>
45 </div> 45 </div>
46 </div> 46 </div>
47 <!-- CANTIDAD --> 47 <!-- CANTIDAD -->
48 <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">
49 <p class="h-40"><small>CANT</small></p> 49 <p class="h-40"><small>CANT</small></p>
50 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> 50 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
51 </div> 51 </div>
52 <!-- PRECIO --> 52 <!-- PRECIO -->
53 <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">
54 <p class="h-40"><small>PRECIO</small></p> 54 <p class="h-40"><small>PRECIO</small></p>
55 <div class="py-1 badge-pill bg-dark text-white"> 55 <div class="py-1 badge-pill bg-dark text-white">
56 <p><small>{{articulo.PreVen | currency}}</small></p> 56 <p><small>{{articulo.PreVen | currency}}</small></p>
57 </div> 57 </div>
58 </div> 58 </div>
59 <!-- ELIMINAR --> 59 <!-- ELIMINAR -->
60 <div class="col-6 col-md-3 align-self-center"> 60 <div class="col-6 col-md-3 align-self-center">
61 <div class="row mx-0 justify-content-center"> 61 <div class="row mx-0 justify-content-center">
62 <div 62 <div
63 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"
64 (click)="deleteArticulo(i)"> 64 (click)="deleteArticulo(i)">
65 <span> 65 <span>
66 <small class="pr-2">ELIMINAR</small> 66 <small class="pr-2">ELIMINAR</small>
67 <img 67 <img
68 draggable="false" 68 draggable="false"
69 ondragstart="return false;" 69 ondragstart="return false;"
70 (contextmenu)="false" 70 (contextmenu)="false"
71 class="icon-20 rotate-45" 71 class="icon-20 rotate-45"
72 src="assets/img/mas-blanco.svg"> 72 src="assets/img/mas-blanco.svg">
73 </span> 73 </span>
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 </div>
81 <!-- TOTAL --> 81 <!-- TOTAL -->
82 <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">
83 <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>
84 <div class="col-auto px-3 bg-primary badge-pill"> 84 <div class="col-auto px-3 bg-primary badge-pill">
85 <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>
86 </div> 86 </div>
87 </div> 87 </div>
88 <!-- CONTINUAR --> 88 <!-- CONTINUAR -->
89 <div 89 <div
90 *ngIf="articuloService.carrito.length" 90 *ngIf="articuloService.carrito.length"
91 class="row mx-3 mt-4 h-auto justify-content-end"> 91 class="row mx-3 mt-4 h-auto justify-content-end">
92 <div 92 <div
93 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"
94 [routerLink]="['/forma-pago']"> 94 [routerLink]="['/forma-pago']">
95 <span> 95 <span>
96 <small class="pr-2">CONTINUAR</small> 96 <small class="pr-2">CONTINUAR</small>
97 <img 97 <img
98 draggable="false" 98 draggable="false"
99 ondragstart="return false;" 99 ondragstart="return false;"
100 (contextmenu)="false" 100 (contextmenu)="false"
101 class="icon-20" 101 class="icon-20"
102 src="assets/img/ir.svg"> 102 src="assets/img/ir.svg">
103 </span> 103 </span>
104 </div> 104 </div>
105 </div> 105 </div>
106 </div> 106 </div>
107 107
108 </div> 108 </div>
109 109
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 6215ca5
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 { trigger, state, style, transition, animate } from '@angular/animations';
6 import { IArticulo } from 'src/app/interfaces/IArticulo';
7 import { Router } from '@angular/router'; 5 import { Router } from '@angular/router';
8 import { BsModalRef } from 'ngx-bootstrap/modal/public_api'; 6 import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
9 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';
10 9
11 @Component({ 10 @Component({
12 selector: 'app-carrito', 11 selector: 'app-carrito',
13 templateUrl: './carrito.component.html', 12 templateUrl: './carrito.component.html',
14 styleUrls: ['./carrito.component.scss'], 13 styleUrls: ['./carrito.component.scss'],
15 animations: [ 14 animations: [ANIMATIONS.EnterLeaveX]
16 trigger('EnterLeave', [
17 state('flyIn', style({ transform: 'translateX(0)' })),
18 transition(':enter', [
19 style({ transform: 'translateX(-100%)' }),
20 animate('1s ease-in')
21 ]),
22 transition(':leave', [
23 animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
24 ])
25 ])
26 ]
27 }) 15 })
28 export class CarritoComponent implements OnInit, OnDestroy { 16 export class CarritoComponent implements OnInit, OnDestroy {
29 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
30 maxCantidad = 50; 18 maxCantidad = 50;
31 modalRef: BsModalRef; 19 modalRef: BsModalRef;
32 20
33 constructor( 21 constructor(
34 public articuloService: ArticuloService, 22 public articuloService: ArticuloService,
35 private location: Location, 23 private location: Location,
36 private router: Router, 24 private router: Router,
37 private inactiveScreen: InactiveScreenService, 25 private inactiveScreen: InactiveScreenService,
38 ) { } 26 ) { }
39 27
40 ngOnInit() { 28 ngOnInit() {
41 if (!this.articuloService.carrito.length) { 29 if (!this.articuloService.carrito.length) {
42 this.router.navigate(['']); 30 this.router.navigate(['']);
43 return; 31 return;
44 } 32 }
45 // console.log('COMPONENTE INICIADO'); 33 // console.log('COMPONENTE INICIADO');
46 34
47 this.mediaPantalla(); 35 this.mediaPantalla();
48 } 36 }
49 37
50 ngOnDestroy() { 38 ngOnDestroy() {
51 if (this.modalRef) this.modalRef.hide(); 39 if (this.modalRef) this.modalRef.hide();
52 } 40 }
53 41
54 deleteArticulo(index: number) { 42 deleteArticulo(index: number) {
55 this.articuloService.deleteArticulo(index); 43 this.articuloService.deleteArticulo(index);
56 } 44 }
57 45
58 goBack() { 46 goBack() {
59 this.location.back(); 47 this.location.back();
60 } 48 }
61 49
62 @HostListener('document:click', ['$event']) 50 @HostListener('document:click', ['$event'])
63 eventListener(event: Event) { 51 eventListener(event: Event) {
64 clearTimeout(this.inactiveScreen.timerReposo); 52 clearTimeout(this.inactiveScreen.timerReposo);
65 this.inactiveScreen.startTimeOutInactividad(); 53 this.inactiveScreen.startTimeOutInactividad();
66 } 54 }
67 55
68 @HostListener('scroll', ['$event']) 56 @HostListener('scroll', ['$event'])
69 scrollEvent(event: Event) { 57 scrollEvent(event: Event) {
70 clearTimeout(this.inactiveScreen.timerReposo); 58 clearTimeout(this.inactiveScreen.timerReposo);
71 this.inactiveScreen.startTimeOutInactividad(); 59 this.inactiveScreen.startTimeOutInactividad();
72 } 60 }
73 61
74 mediaPantalla() { 62 mediaPantalla() {
75 if ($('body').hasClass('media-pantalla')) { 63 if ($('body').hasClass('media-pantalla')) {
76 $(`.carrito-content`).addClass('media-pantalla').addBack('media-pantalla'); 64 $(`.carrito-content`).addClass('media-pantalla').addBack('media-pantalla');
77 } 65 }
78 console.log('AGARRA CONIOO'); 66 console.log('AGARRA CONIOO');
79 } 67 }
80 } 68 }
src/app/modules/forma-pago/forma-pago.component.html
Diff comments   View file @ 6215ca5
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-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-85"> 12 <div class="h-100">
13 <div class="row mt-5 mx-3 h-auto border border-primary rounded-sm"> 13 <div class="h-10"></div>
14 <div class="row mt-5 mx-3 h-auto">
14 <div class="col-12 px-0 py-2 align-self-center"> 15 <div class="col-12 px-0 py-2 align-self-center">
15 <div class="px-3 text-center"> 16 <div class="px-3 text-center">
16 <p class="h6 text-truncate">SELECCIONA UNA FORMA DE PAGO</p> 17 <p class="h4 text-truncate">SELECCIONA UNA FORMA DE PAGO</p>
17 </div> 18 </div>
18 </div> 19 </div>
19 </div> 20 </div>
20 <!-- OPCION PAGO ELECTRONICO --> 21 <!-- OPCION PAGO ELECTRONICO -->
21 <div class="row mt-5 h-auto justify-content-center mx-0 reduce-card-1"> 22 <div class="row mt-5 h-auto justify-content-center mx-0">
22 <div class="col-auto px-0 h-auto align-self-start"> 23 <div class="col-5 px-0 h-auto align-self-start reduce-card-1">
23 <div 24 <div class="row justify-content-between">
24 class="btn-effect col-auto align-self-center px-0 bg-white" 25 <div class="col-12">
25 (click)="medioPago(9)"> 26 <div
26 <div class="row mx-0 bg-primary badge-pill"> 27 class="btn-effect col-auto align-self-center px-0 bg-white"
27 <div class="col-auto p-0"> 28 (click)="medioPago(9)">
28 <img 29 <div class="row mx-0 bg-primary badge-pill heigth-80">
29 draggable="false" 30 <div class="col-2 p-0">
30 ondragstart="return false;" 31 <img
31 (contextmenu)="false" 32 draggable="false"
32 class="p-1 icon-50" 33 ondragstart="return false;"
33 src="assets/img/icono-plato.svg"> 34 (contextmenu)="false"
34 </div> 35 class="pt-3 pl-2 icon-50"
35 <div class="col-auto align-self-center text-white">Pago electrónico</div> 36 src="assets/img/icono-pago-electronico.svg">
36 <div class="col-auto align-self-center p-0"> 37 </div>
37 <img 38 <div class="col-8 align-self-center text-center text-white h4">Pago electrónico</div>
38 draggable="false" 39 <div class="col-1 align-self-center p-0">
39 ondragstart="return false;" 40 <img
40 (contextmenu)="false" 41 draggable="false"
41 class="p-1 icon-30" 42 ondragstart="return false;"
42 src="assets/img/ir.svg"> 43 (contextmenu)="false"
44 class="p-1 icon-50"
45 src="assets/img/ir.svg">
46 </div>
47 </div>
43 </div> 48 </div>
44 </div> 49 </div>
45 </div> 50 </div>
46 </div> 51 </div>
47 </div> 52 </div>
48 <!-- OPCION PAGO CON TARJETA --> 53 <!-- OPCION PAGO CON TARJETA -->
49 <div class="row mt-5 h-auto justify-content-center mx-0 reduce-card-2"> 54 <div class="row mt-5 h-auto justify-content-center mx-0">
50 <div class="col-auto px-0 h-auto align-self-start"> 55 <div class="col-5 px-0 h-auto align-self-start reduce-card-1">
51 <div 56 <div class="row justify-content-between">
52 class="btn-effect col-auto align-self-center px-0 bg-white" 57 <div class="col-12">
53 (click)="medioPago(4)"> 58 <div
54 <div class="row mx-0 bg-primary badge-pill"> 59 class="btn-effect col-auto align-self-center px-0 bg-white"
55 <div class="col-auto p-0"> 60 (click)="medioPago(4)">
56 <img 61 <div class="row mx-0 bg-primary badge-pill heigth-80">
57 draggable="false" 62 <div class="col-2 p-0">
58 ondragstart="return false;" 63 <img
59 (contextmenu)="false" 64 draggable="false"
60 class="p-1 icon-50" 65 ondragstart="return false;"
61 src="assets/img/icono-take-away.svg"> 66 (contextmenu)="false"
62 </div> 67 class="pt-4 pl-2 icon-50"
63 <div class="col-auto align-self-center text-white">Pago con tarjeta</div> 68 src="assets/img/icono-pago-tarjeta.svg">
64 <div class="col-auto align-self-center p-0"> 69 </div>
65 <img 70 <div class="col-8 align-self-center text-center text-white h4">Pago con tarjeta</div>
66 draggable="false" 71 <div class="col-2 align-self-center p-0">
67 ondragstart="return false;" 72 <img
68 (contextmenu)="false" 73 draggable="false"
69 class="p-1 icon-30" 74 ondragstart="return false;"
70 src="assets/img/ir.svg"> 75 (contextmenu)="false"
76 class="p-1 icon-50"
77 src="assets/img/ir.svg">
78 </div>
79 </div>
71 </div> 80 </div>
72 </div> 81 </div>
73 </div> 82 </div>
74 </div> 83 </div>
75 </div> 84 </div>
76 </div> 85 </div>
77 </div> 86 </div>
78 87
src/app/modules/opcion-pedido/opcion-pedido.component.scss
Diff comments   View file @ 6215ca5
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 35%; 5 flex: 0 0 35%;
6 max-width: 35%; 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 35%; 15 flex: 0 0 35%;
16 max-width: 35%; 16 max-width: 35%;
17 right: 10%; 17 right: 10%;
18 margin-right: 0 !important; 18 margin-right: 0 !important;
19 } 19 }
20
21 .heigth-80 {
22 height: 80px;
23 }
24 20
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.html
Diff comments   View file @ 6215ca5
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 w-100 h-auto" 30 d-sm-block rounded-circle w-100 h-auto"
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
35 class="row mx-2 mb-2 h-25 h-lg-30 justify-content-center tab cat-content" 35 class="row mx-2 mb-2 h-25 h-lg-30 justify-content-center tab cat-content"
36 [ngClass]="{ 'active rounded shadow px-2': categoria.selected, 36 [ngClass]="{ 'active rounded shadow px-2': categoria.selected,
37 'border-bottom-effect': !categoria.selected, 37 'border-bottom-effect': !categoria.selected,
38 'media-pantalla': templateCategorias.classList.contains('media-pantalla')}" 38 'media-pantalla': templateCategorias.classList.contains('media-pantalla')}"
39 (click)="selectCategoria(i, categoria.id)" 39 (click)="selectCategoria(i, categoria.id)"
40 id="cat-content" 40 id="cat-content"
41 *ngFor="let categoria of categorias; let i = index;"> 41 *ngFor="let categoria of categorias; let i = index;">
42 <img 42 <img
43 draggable="false" 43 draggable="false"
44 ondragstart="return false;" 44 ondragstart="return false;"
45 (contextmenu)="false" 45 (contextmenu)="false"
46 class="col-12 img-fluid align-self-end d-none 46 class="col-12 img-fluid align-self-end d-none
47 d-sm-block rounded-circle w-100 h-auto" 47 d-sm-block rounded-circle w-100 h-auto"
48 src="{{urlImagenes}}{{categoria.path_imagen}}" 48 src="{{urlImagenes}}{{categoria.path_imagen}}"
49 onerror="this.src='assets/img/image-not-found.jpg'"> 49 onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
50 <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> 51 </div>
52 </div> 52 </div>
53 <div class="col-auto btn-effect h-5 cat-btn"> 53 <div class="col-auto btn-effect h-5 cat-btn">
54 <img 54 <img
55 draggable="false" 55 draggable="false"
56 ondragstart="return false;" 56 ondragstart="return false;"
57 (contextmenu)="false" 57 (contextmenu)="false"
58 class="h-100 d-block mx-auto rotate-90" 58 class="h-100 d-block mx-auto rotate-90"
59 src="assets/img/ir-color.svg" 59 src="assets/img/ir-color.svg"
60 (mousedown)="scrollY(templateCategorias, 100)" 60 (mousedown)="scrollY(templateCategorias, 100)"
61 (mouseup)="mouseup()" 61 (mouseup)="mouseup()"
62 (mouseleave)="mouseup()"> 62 (mouseleave)="mouseup()">
63 </div> 63 </div>
64 </div> 64 </div>
65 65
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
Diff comments   View file @ 6215ca5
1 import { Component, OnInit, Input, 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(); 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 @HostListener('scroll', ['$event']) 72 @HostListener('scroll', ['$event'])
73 scrollEvent(event: Event) { 73 scrollEvent(event: Event) {
74 clearTimeout(this.inactiveScreen.timerReposo); 74 clearTimeout(this.inactiveScreen.timerReposo);
75 this.inactiveScreen.startTimeOutInactividad(); 75 this.inactiveScreen.startTimeOutInactividad();
76 } 76 }
77 77
78 mouseup() { 78 mouseup() {
79 if (!this.timeoutHandler) return; 79 if (!this.timeoutHandler) return;
80 clearInterval(this.timeoutHandler); 80 clearInterval(this.timeoutHandler);
81 } 81 }
82 82
83 scrollY(el: HTMLElement, value) { 83 scrollY(el: HTMLElement, value) {
84 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 84 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
85 this.timeoutHandler = setInterval(() => { 85 this.timeoutHandler = setInterval(() => {
86 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 86 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
87 }, 500); 87 }, 500);
88 } 88 }
89 89
90 mediaPantalla() { 90 mediaPantalla() {
91 if ($('body').hasClass('media-pantalla')) { 91 if ($('body').hasClass('media-pantalla')) {
92 $('.cat-content,#cat-content') 92 $('.cat-content,#cat-content')
93 .addClass('media-pantalla') 93 .addClass('media-pantalla')
94 .addBack('media-pantalla'); 94 .addBack('media-pantalla');
95 } 95 }
96 } 96 }
97 } 97 }
98 98
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 6215ca5
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 align-items-end" 5 <div class="row mx-0 align-items-end"
6 [ngClass]="boxCarrito.classList.contains('media-pantalla') 6 [ngClass]="boxCarrito.classList.contains('media-pantalla')
7 ? 'h-68' : 'h-80'"> 7 ? 'h-68' : 'h-80'">
8 <!-- CABECERA --> 8 <!-- CABECERA -->
9 <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">
10 <div class="col-12 p-2 align-self-center"> 10 <div class="col-12 p-2 align-self-center">
11 <div class="px-3"> 11 <div class="px-3">
12 <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>
13 </div> 13 </div>
14 </div> 14 </div>
15 </div> 15 </div>
16 <!-- CUERPO --> 16 <!-- CUERPO -->
17 <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">
18 <div class="col-12 h-100 px-0 py-3"> 18 <div class="col-12 h-100 px-0 py-3">
19 <div class="row mx-0 h-100"> 19 <div class="row mx-0 h-100">
20 <app-filtro-categorias 20 <app-filtro-categorias
21 class="col-5 col-sm-3 col-xl-2 h-100" 21 class="col-5 col-sm-3 col-xl-2 h-100"
22 #filtroCategorias 22 #filtroCategorias
23 (getProductos)="getProductos()" 23 (getProductos)="getProductos()"
24 (setProductos)="setProductos()" 24 (setProductos)="setProductos()"
25 (filterItems)="filterItems()"> 25 (filterItems)="filterItems()">
26 </app-filtro-categorias> 26 </app-filtro-categorias>
27 <!-- LISTA DE ARTICULOS --> 27 <!-- LISTA DE ARTICULOS -->
28 <div 28 <div
29 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"
30 (scroll)="scrollEvent($event)"> 30 (scroll)="scrollEvent($event)">
31 <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">
32 <!-- ARTICULO --> 32 <!-- ARTICULO -->
33 <div 33 <div
34 class="col px-2 my-1 my-md-3 h-auto" 34 class="col px-2 my-1 my-md-3 h-auto"
35 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 35 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
36 <div 36 <div
37 class="swing-in-top-fwd btn-effect card h-auto" 37 class="swing-in-top-fwd btn-effect card h-auto"
38 (click)="selectArticulo(articulo)"> 38 (click)="selectArticulo(articulo)">
39 <img 39 <img
40 draggable="false" 40 draggable="false"
41 ondragstart="return false;" 41 ondragstart="return false;"
42 (contextmenu)="false" 42 (contextmenu)="false"
43 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 43 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
44 onerror="this.src='assets/img/image-not-found.jpg'" 44 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
45 class="card-img-top w-100 h-auto h-md-55 rounded-sm"> 45 class="card-img-top w-100 h-auto h-md-55 rounded-sm">
46 <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">
47 <p
48 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
49 class="col-12 px-1 h6 h-auto text-center min-h-60"> 47 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">
50 {{articulo.DetArt | uppercase}} 48 {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
51 </p> 49 </p>
52 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
53 <small>{{articulo.DET_LAR}}</small>
54 </p> 50 <div class="col-12 px-1 align-self-end h-auto">
55 <div class="col-12 px-1 align-self-end h-auto"> 51 <div class="row mx-0 justify-content-between bg-primary badge-pill">
56 <div 52 <div class="col px-0 align-self-center text-white text-right">
57 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 53 {{articulo.PreVen | currency}}
58 class="row mx-0 justify-content-between badge-pill"> 54 </div>
59 <div class="col px-0 align-self-center text-white text-right"> 55 <div class="col-5 px-0">
60 {{articulo.PreVen | currency}} 56 <img
61 </div> 57 draggable="false"
62 <div class="col-5 px-0"> 58 ondragstart="return false;"
63 <img 59 (contextmenu)="false"
64 draggable="false" 60 class="d-block ml-auto py-1 icon-30"
65 ondragstart="return false;" 61 src="assets/img/ir.svg">
66 (contextmenu)="false" 62 </div>
67 class="d-block ml-auto py-1 icon-30" 63 </div>
68 src="assets/img/ir.svg"> 64 </div>
69 </div> 65 </div>
70 </div> 66 </div>
71 </div> 67 </div>
72 </div> 68 </div>
73 </div> 69 <!-- BOTON VER MAS -->
74 </div> 70 <div class="row mx-0">
75 </div> 71 <div
76 <!-- BOTON VER MAS --> 72 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
77 <div class="row mx-0"> 73 class="col-12 px-0 mb-2">
78 <div 74 <button
79 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 75 (click)="increaseShow()"
80 class="col-12 px-0 mb-2"> 76 class="btn btn-block btn-outline-primary">
81 <button 77 Ver Más
82 (click)="increaseShow()" 78 </button>
83 class="btn btn-block btn-outline-primary"> 79 </div>
84 Ver Más 80 </div>
85 </button> 81 </div>
86 </div> 82 </div>
87 </div> 83 </div>
88 </div> 84 </div>
89 </div> 85 <!-- FOOTER CARRITO DE COMPRAS -->
90 </div> 86 <div class="row w-90 mx-auto h-auto justify-content-center">
91 </div> 87 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
92 <!-- FOOTER CARRITO DE COMPRAS --> 88 [ngClass]="boxCarrito.classList.contains('media-pantalla')
93 <div class="row w-90 mx-auto h-auto justify-content-center"> 89 ? 'col-8' : 'col-12'" id="boxCarrito">
94 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 90 <!-- CABECERA -->
95 [ngClass]="boxCarrito.classList.contains('media-pantalla') 91 <div class="row mx-0 h-15 border-bottom border-primary">
96 ? 'col-8' : 'col-12'" id="boxCarrito"> 92 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
97 <!-- CABECERA --> 93 </div>
98 <div class="row mx-0 h-15 border-bottom border-primary"> 94 <!-- CUERPO -->
99 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 95 <div class="row h-85 mx-0 justify-content-around">
100 </div> 96 <!-- BOTON SCROLL IZQUIERDA -->
101 <!-- CUERPO --> 97 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
102 <div class="row h-85 mx-0 justify-content-around"> 98 <img
103 <!-- BOTON SCROLL IZQUIERDA --> 99 draggable="false"
104 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 100 ondragstart="return false;"
105 <img 101 (contextmenu)="false"
106 draggable="false" 102 class="icon-30 rotate-180-neg"
107 ondragstart="return false;" 103 src="assets/img/ir-fondo-color.svg"
108 (contextmenu)="false" 104 (mousedown)="scrollX(templateCarrito, -100)"
109 class="icon-30 rotate-180-neg" 105 (mouseup)="mouseup()"
110 src="assets/img/ir-fondo-color.svg" 106 (mouseleave)="mouseup()">
111 (mousedown)="scrollX(templateCarrito, -100)" 107 </div>
112 (mouseup)="mouseup()" 108 <!-- CARRITO -->
113 (mouseleave)="mouseup()"> 109 <div class="col-6 col-sm-8 col-lg-10 h-100">
114 </div> 110 <div
115 <!-- CARRITO --> 111 #templateCarrito
116 <div class="col-6 col-sm-8 col-lg-10 h-100"> 112 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
117 <div 113 (scroll)="scrollEvent($event)">
118 #templateCarrito 114 <!-- ARTICULOS -->
119 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 115 <div
120 (scroll)="scrollEvent($event)"> 116 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
121 <!-- ARTICULOS --> 117 *ngFor="let articulo of articuloService.carrito; let i = index;"
122 <div 118 @EnterLeaveY>
123 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 119 <img
124 *ngFor="let articulo of articuloService.carrito; let i = index;" 120 class="btn-effect icon-20 mr-2 position-absolute right-0"
125 @EnterLeave> 121 src="assets/img/icono-cancelar-color.svg"
126 <img 122 (click)="deleteArticulo(i)">
127 class="btn-effect icon-20 mr-2 position-absolute right-0" 123 <img
128 src="assets/img/icono-cancelar-color.svg" 124 draggable="false"
129 (click)="deleteArticulo(i)"> 125 ondragstart="return false;"
130 <img 126 (contextmenu)="false"
131 draggable="false" 127 class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto"
132 ondragstart="return false;" 128 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
133 (contextmenu)="false" 129 onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
134 class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto" 130 <p class="d-block mt-auto text-center text-primary text-truncate">
135 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 131 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
136 onerror="this.src='assets/img/image-not-found.jpg'"> 132 </p>
137 <p class="d-block mt-auto text-center text-primary text-truncate"> 133 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
138 <small>{{articulo.DetArt}}</small> 134 </div>
139 </p> 135 <!-- MENSAJE DE ADVERTENCIA -->
140 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> 136 <div *ngIf="!articuloService.carrito.length" class="col h-100">
141 </div> 137 <p class="text-center py-5">No hay articulos en el carrito</p>
142 <!-- MENSAJE DE ADVERTENCIA --> 138 </div>
143 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 139 </div>
144 <p class="text-center py-5">No hay articulos en el carrito</p> 140 </div>
145 </div> 141 <!-- BOTON SCROLL DERECHA -->
146 </div> 142 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect
147 </div> 143 h-20 align-self-center d-contents">
148 <!-- BOTON SCROLL DERECHA --> 144 <img
149 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect 145 draggable="false"
150 h-20 align-self-center d-contents"> 146 ondragstart="return false;"
151 <img 147 (contextmenu)="false"
152 draggable="false" 148 class="icon-30"
153 ondragstart="return false;" 149 src="assets/img/ir-fondo-color.svg"
154 (contextmenu)="false" 150 (mousedown)="scrollX(templateCarrito, 100)"
155 class="icon-30" 151 (mouseup)="mouseup()"
156 src="assets/img/ir-fondo-color.svg" 152 (mouseleave)="mouseup()">
157 (mousedown)="scrollX(templateCarrito, 100)" 153 </div>
158 (mouseup)="mouseup()" 154 </div>
159 (mouseleave)="mouseup()"> 155 </div>
160 </div> 156 <!-- TOTAL-->
161 </div> 157 <div
162 </div> 158 class="col-auto mt-2 ml-auto h-20">
163 <!-- TOTAL--> 159 <div class="row mx-0">
164 <div 160 <div class="col-auto align-self-center text-primary">TOTAL</div>
165 class="col-auto mt-2 ml-auto h-20"> 161 <div class="col-auto bg-primary badge-pill">
166 <div class="row mx-0"> 162 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
167 <div class="col-auto align-self-center text-primary">TOTAL</div> 163 </div>
168 <div class="col-auto bg-primary badge-pill"> 164 </div>
169 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 165 </div>
170 </div> 166
171 </div> 167 <!-- VER CARRITO -->
172 </div> 168 <div
173 169 class="col-auto px-0 mt-2 h-20"
174 <!-- VER CARRITO --> 170 *ngIf="articuloService.carrito.length"
175 <div 171 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
176 class="col-auto px-0 mt-2 h-20" 172 <div
177 *ngIf="articuloService.carrito.length" 173 class="btn-effect col-auto px-0 align-self-center bg-white"
178 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 174 [routerLink]="['/carrito']">
179 <div 175 <div class="row mx-0 bg-light">
180 class="btn-effect col-auto px-0 align-self-center bg-white" 176 <div class="col-auto p-0 bg-primary">
181 [routerLink]="['/carrito']"> 177 <img
182 <div class="row mx-0 bg-light"> 178 draggable="false"
183 <div class="col-auto p-0 bg-primary"> 179 ondragstart="return false;"
184 <img 180 (contextmenu)="false"
185 draggable="false" 181 class="p-2 icon-40"
186 ondragstart="return false;" 182 src="assets/img/carrito.svg">
187 (contextmenu)="false" 183 </div>
188 class="p-2 icon-40" 184 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
189 src="assets/img/carrito.svg"> 185 </div>
190 </div> 186 </div>
191 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 187 </div>
192 </div> 188
193 </div> 189 </div>
194 </div> 190 </div>
195 191
196 </div> 192 </div>
197 </div> 193
198
199 </div>
200
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 6215ca5
1 import { Component, OnInit, OnDestroy, HostListener, ViewChild, ViewChildren, 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 { CategoriaService } from 'src/app/services/categoria/categoria.service';
9 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
10 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 9 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
11 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; 10 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
12 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; 11 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
13 import { trigger, state, style, transition, animate } from '@angular/animations';
14 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component'; 12 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
15 import * as _ from 'lodash'; 13 import * as _ from 'lodash';
14 import { ANIMATIONS } from 'src/app/utils/animations';
16 15
17 @Component({ 16 @Component({
18 selector: 'app-seleccion-articulos', 17 selector: 'app-seleccion-articulos',
19 templateUrl: './seleccion-articulos.component.html', 18 templateUrl: './seleccion-articulos.component.html',
20 styleUrls: ['./seleccion-articulos.component.scss'], 19 styleUrls: ['./seleccion-articulos.component.scss'],
21 animations: [ 20 animations: [ANIMATIONS.EnterLeaveY]
22 trigger('EnterLeave', [
23 state('flyIn', style({ transform: 'translateY(0)' })),
24 transition(':enter', [
25 style({ transform: 'translateY(-100%)' }),
26 animate('0.5s ease-in')
27 ]),
28 transition(':leave', [
29 animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
30 ])
31 ])
32 ]
33 }) 21 })
34 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy { 22 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
35 showSpinner = true; 23 showSpinner = true;
36 timeoutHandler: any; 24 timeoutHandler: any;
37 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 25 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
38 articulos: IArticulo[] = []; 26 articulos: IArticulo[] = [];
39 auxArticulos: IArticulo[] = []; 27 auxArticulos: IArticulo[] = [];
40 showQuantity = 100; 28 showQuantity = 100;
41 searchTerm = ''; 29 searchTerm = '';
42 ordenandoByVendidos = true; 30 ordenandoByVendidos = true;
43 modalRef: BsModalRef; 31 modalRef: BsModalRef;
44 total = 0; 32 total = 0;
45 @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent; 33 @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
46 34
47 constructor( 35 constructor(
48 public articuloService: ArticuloService, 36 public articuloService: ArticuloService,
49 private categoriaService: CategoriaService,
50 private sinonimoService: SinonimoService, 37 private sinonimoService: SinonimoService,
51 private modalService: BsModalService, 38 private modalService: BsModalService,
52 private inactiveScreen: InactiveScreenService, 39 private inactiveScreen: InactiveScreenService,
53 ) { } 40 ) { }
54 41
55 ngOnInit() { } 42 ngOnInit() { }
56 43
57 ngAfterViewInit(): void { 44 ngAfterViewInit(): void {
58 this.filtroCategorias.getCategorias(); 45 this.filtroCategorias.getCategorias();
59 this.mediaPantalla(); 46 this.mediaPantalla();
60 } 47 }
61 48
62 ngOnDestroy() { 49 ngOnDestroy() {
63 for (let i = 1; i <= this.modalService.getModalsCount(); i++) { 50 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
64 this.modalService.hide(i); 51 this.modalService.hide(i);
65 } 52 }
66 } 53 }
67 54
68 getProductos() { 55 getProductos() {
69 this.articuloService.getAll() 56 this.articuloService.getAll()
70 .subscribe((result: IArticulo[]) => { 57 .subscribe((result: IArticulo[]) => {
71 this.articuloService.setArticulosSinImagen(result); 58 this.articuloService.setArticulosSinImagen(result);
72 if (this.filtroCategorias.queMostrar === 'ordenar') { 59 if (this.filtroCategorias.queMostrar === 'ordenar') {
73 this.filtroCategorias.categorias.forEach((categoria: ICategoria) => { 60 this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {
74 const tempArticulos = result.filter((articulo: IArticulo) => { 61 const tempArticulos = result.filter((articulo: IArticulo) => {
75 return articulo.categoria_selfservice === categoria.id; 62 return articulo.categoria_selfservice === categoria.id;
76 }); 63 });
77 result = tempArticulos; 64 result = tempArticulos;
78 }); 65 });
79 } 66 }
80 localStorage.setItem('articulos', JSON.stringify(result)); 67 localStorage.setItem('articulos', JSON.stringify(result));
81 this.setProductos(); 68 this.setProductos();
82 }, (error) => { 69 }, (error) => {
83 this.showSpinner = false; 70 this.showSpinner = false;
84 console.error(error); 71 console.error(error);
85 }); 72 });
86 } 73 }
87 74
88 setProductos() { 75 setProductos() {
89 this.articulos = JSON.parse(localStorage.getItem('articulos')); 76 this.articulos = JSON.parse(localStorage.getItem('articulos'));
90 this.filterItems(); 77 this.filterItems();
91 } 78 }
92 79
93 filterItems() { 80 filterItems() {
94 if (this.filtroCategorias.categoriaActive === 0) { 81 if (this.filtroCategorias.categoriaActive === 0) {
95 this.auxArticulos = this.articulos; 82 this.auxArticulos = this.articulos;
96 return; 83 return;
97 } 84 }
98 this.auxArticulos = this.articulos.filter(x => { 85 this.auxArticulos = this.articulos.filter(x => {
99 return x.categoria_selfservice === this.filtroCategorias.categoriaActive; 86 return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
100 }); 87 });
101 this.ordenar(); 88 this.ordenar();
102 } 89 }
103 90
104 ordenar() { 91 ordenar() {
105 if (this.ordenandoByVendidos) { 92 if (this.ordenandoByVendidos) {
106 this.auxArticulos.sort((a, b) => { 93 this.auxArticulos.sort((a, b) => {
107 return b.cantidadVendida - a.cantidadVendida; 94 return b.cantidadVendida - a.cantidadVendida;
108 }); 95 });
109 } 96 }
110 } 97 }
111 98
112 selectArticulo(articulo: IArticulo) { 99 selectArticulo(articulo: IArticulo) {
113 this.getByID(articulo.id); 100 this.getByID(articulo.id);
114 } 101 }
115 102
116 getByID(id: number) { 103 getByID(id: number) {
117 this.articuloService.getById(id) 104 this.articuloService.getById(id)
118 .subscribe((res: IArticulo) => { 105 .subscribe((res: IArticulo) => {
119 if (res.FPP) { 106 if (res.FPP) {
120 this.openModalPromos(res); 107 this.openModalPromos(res);
121 } else { 108 } else {
122 this.getSinonimos(res); 109 this.getSinonimos(res);
123 } 110 }
124 }, err => console.error(err)); 111 }, err => console.error(err));
125 } 112 }
126 113
127 getSinonimos(articulo: IArticulo) { 114 getSinonimos(articulo: IArticulo) {
128 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) 115 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
129 .subscribe((res: any[]) => { 116 .subscribe((res: any[]) => {
130 const sinonimos = [];
131 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
132 Object.keys(gruposArticulos).forEach(key => {
133 sinonimos.push({ productos: gruposArticulos[key] });
134 });
135 res = sinonimos;
136 if (res.length) { 117 if (res.length) {
118 const sinonimos = [];
119 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
120 Object.keys(gruposArticulos).forEach(key => {
121 sinonimos.push({ productos: gruposArticulos[key] });
122 });
123 res = sinonimos;
137 this.openModalSinonimos(res, articulo); 124 this.openModalSinonimos(res, articulo);
138 } else { 125 } else {
139 this.articuloService.setArticulo(articulo); 126 this.articuloService.setArticulo(articulo);
140 } 127 }
141 }); 128 });
142 } 129 }
143 130
144 openModalPromos(articulo: IArticulo) { 131 openModalPromos(articulo: IArticulo) {
145 this.modalRef = this.modalService.show(PromocionComponent, { 132 this.modalRef = this.modalService.show(PromocionComponent, {
146 initialState: { articulosPromo: [articulo] }, 133 initialState: { articulosPromo: [articulo] },
147 class: 'modal-promo modal-dialog-centered' 134 class: 'modal-promo modal-dialog-centered'
148 }); 135 });
149 this.mediaPantalla(); 136 this.mediaPantalla();
150 } 137 }
151 138
152 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 139 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
153 this.modalRef = this.modalService.show(SinonimoComponent, { 140 this.modalRef = this.modalService.show(SinonimoComponent, {
154 initialState: { sinonimos: sinonimosData }, 141 initialState: { sinonimos: sinonimosData },
155 class: 'modal-promo modal-dialog-centered' 142 class: 'modal-promo modal-dialog-centered'
156 }); 143 });
157 144
158 this.modalRef.content.onClose 145 this.modalRef.content.onClose
159 .subscribe((res: any) => { 146 .subscribe((res: any) => {
160 for (const a of articulo.productos) { 147 for (const a of articulo.productos) {
161 for (const aRes of res.articulos) { 148 for (const aRes of res.articulos) {
162 if (a.idSinonimo === aRes.ID_SIN) { 149 if (a.idSinonimo === aRes.ID_SIN) {
163 a.CODA = aRes.CodArt; 150 a.CODA = aRes.CodArt;
164 a.CodArt = aRes.CodArt; 151 a.CodArt = aRes.CodArt;
165 a.SECA = aRes.CodSec; 152 a.SECA = aRes.CodSec;
166 aRes.CodSec = aRes.CodSec; 153 aRes.CodSec = aRes.CodSec;
167 a.PreVen = aRes.PreVen; 154 a.PreVen = aRes.PreVen;
168 a.id = aRes.id; 155 a.id = aRes.id;
169 a.DET_LAR = aRes.DET_LAR; 156 a.DET_LAR = aRes.DET_LAR;
170 a.DetArt = aRes.DetArt; 157 a.DetArt = aRes.DetArt;
171 } 158 }
172 } 159 }
173 } 160 }
174 this.articuloService.setArticulo(articulo); 161 this.articuloService.setArticulo(articulo);
175 }); 162 });
176 this.mediaPantalla(); 163 this.mediaPantalla();
177 } 164 }
178 165
179 deleteArticulo(index: number) { 166 deleteArticulo(index: number) {
180 this.articuloService.deleteArticulo(index); 167 this.articuloService.deleteArticulo(index);
181 } 168 }
182 169
183 increaseShow() { 170 increaseShow() {
184 this.showQuantity += 100; 171 this.showQuantity += 100;
185 } 172 }
186 173
187 @HostListener('scroll', ['$event']) 174 @HostListener('scroll', ['$event'])
188 scrollEvent(event: Event) { 175 scrollEvent(event: Event) {
189 clearTimeout(this.inactiveScreen.timerReposo); 176 clearTimeout(this.inactiveScreen.timerReposo);
190 this.inactiveScreen.startTimeOutInactividad(); 177 this.inactiveScreen.startTimeOutInactividad();
191 } 178 }
192 179
193 mouseup() { 180 mouseup() {
194 if (!this.timeoutHandler) return; 181 if (!this.timeoutHandler) return;
195 clearInterval(this.timeoutHandler); 182 clearInterval(this.timeoutHandler);
196 } 183 }
197 184
198 scrollY(el: HTMLElement, value) { 185 scrollY(el: HTMLElement, value) {
199 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 186 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
200 this.timeoutHandler = setInterval(() => { 187 this.timeoutHandler = setInterval(() => {
201 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 188 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
202 }, 500); 189 }, 500);
203 } 190 }
204 191
205 scrollX(el: HTMLElement, value) { 192 scrollX(el: HTMLElement, value) {
206 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 193 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
207 this.timeoutHandler = setInterval(() => { 194 this.timeoutHandler = setInterval(() => {
208 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 195 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
209 }, 500); 196 }, 500);
210 } 197 }
211 198
212 mediaPantalla() { 199 mediaPantalla() {
213 if ($('body').hasClass('media-pantalla')) { 200 if ($('body').hasClass('media-pantalla')) {
214 $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito, 201 $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,
src/app/shared/confirmacion/confirmacion.component.html
Diff comments   View file @ 6215ca5
1 <div class="modal-header bg-primary rounded-top pt-4 px-2"> 1 <div class="modal-header bg-primary rounded-top pt-4 px-2">
2 <div class="row mx-0 w-100 justify-content-between"> 2 <div class="row mx-0 w-100 justify-content-between">
3 <div class="col-8"> 3 <div class="col-8">
4 <p *ngIf="titleMessage" class="h3 text-white">{{titleMessage}}</p> 4 <p *ngIf="titleMessage" class="h3 text-white">{{titleMessage}}</p>
5 </div> 5 </div>
6 </div> 6 </div>
7 <div *ngIf="imagenPath" class="col-4 align-self-center"> 7 <div *ngIf="imagenPath" class="col-4 align-self-center">
8 <img 8 <img
9 draggable="false" 9 draggable="false"
10 ondragstart="return false;" 10 ondragstart="return false;"
11 (contextmenu)="false" 11 (contextmenu)="false"
12 src="{{urlImagenes}}{{imagenPath}}" 12 src="{{urlImagenes}}{{imagenPath}}"
13 onerror="this.src='assets/img/image-not-found.jpg'" 13 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
14 class="card-img-top img-fluid rounded-circle"> 14 class="card-img-top img-fluid rounded-circle">
15 </div> 15 </div>
16 </div> 16 </div>
17 <div class=" col-12 modal-body bg-primary rounded-bottom pb-3 px-2"> 17 <div class=" col-12 modal-body bg-primary rounded-bottom pb-3 px-2">
18 <div class="row justify-content-between mx-0 w-100"> 18 <div class="row justify-content-between mx-0 w-100">
19 <div class="col-8"> 19 <div class="col-8">
20 <p *ngIf="footerMessageFirst" class="text-white"><small>{{footerMessageFirst}}</small></p > 20 <p *ngIf="footerMessageFirst" class="text-white"><small>{{footerMessageFirst}}</small></p >
21 <h1 *ngIf="footerMessageSecond" class="text-white mb-4">{{footerMessageSecond}}</h1> 21 <h1 *ngIf="footerMessageSecond" class="text-white mb-4">{{footerMessageSecond}}</h1>
22 </div> 22 </div>
23 <div class="col-4"> 23 <div class="col-4">
24 <div 24 <div
25 class="mx-0" 25 class="mx-0"
26 (click)="confirmarArticulo()"> 26 (click)="confirmarArticulo()">
27 <div class="col-auto bg-white badge-pill"> 27 <div class="col-auto bg-white badge-pill">
28 <div class="row justify-content-between"> 28 <div class="row justify-content-between">
29 <div *ngIf="footerConfirmation" class="col-auto px-0 align-self-center text-primary pl-3"> 29 <div *ngIf="footerConfirmation" class="col-auto px-0 align-self-center text-primary pl-3">
30 <p class="font-weight-bold">{{footerConfirmation | currency}}</p> 30 <p class="font-weight-bold">{{footerConfirmation | currency}}</p>
31 </div> 31 </div>
32 <div class="col-auto px-0"> 32 <div class="col-auto px-0">
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="d-block ml-auto my-1 icon-30 pr-2" 37 class="d-block ml-auto my-1 icon-30 pr-2"
38 src="assets/img/ir-color.svg"> 38 src="assets/img/ir-color.svg">
39 </div> 39 </div>
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 <div *ngIf="footerClose" class="bg-white badge-pill mt-2"> 43 <div *ngIf="footerClose" class="bg-white badge-pill mt-2">
44 <div class="row justify-content-between"> 44 <div class="row justify-content-between">
45 <div 45 <div
46 class="col-auto mx-0 " 46 class="col-auto mx-0 "
47 (click)="close()"> 47 (click)="close()">
48 <p class="font-weight-bold text-center text-primary">{{footerClose}}</p> 48 <p class="font-weight-bold text-center text-primary">{{footerClose}}</p>
49 </div> 49 </div>
50 <i class="fas fa-undo-alt text-info mr-3 my-auto"></i> 50 <i class="fas fa-undo-alt text-info mr-3 my-auto"></i>
51 </div> 51 </div>
52 </div> 52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 </div> 55 </div>
56 56
src/app/shared/footer/footer.component.html
Diff comments   View file @ 6215ca5
1 <div class="row w-90 mx-auto h-100 w-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/iconos-accesibilidad.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/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ 6215ca5
1 import { Component, OnInit, TemplateRef } from '@angular/core'; 1 import { Component, OnInit, TemplateRef } from '@angular/core';
2 import { APP_SETTINGS } from 'src/etc/AppSettings'; 2 import { APP_SETTINGS } from 'src/etc/AppSettings';
3 import { IPublicidad } from 'src/app/interfaces/IPublicidad'; 3 import { IPublicidad } from 'src/app/interfaces/IPublicidad';
4 import { PublicidadService } from 'src/app/services/publicidad/publicidad.service'; 4 import { PublicidadService } from 'src/app/services/publicidad/publicidad.service';
5 import { IArticulo } from 'src/app/interfaces/IArticulo'; 5 import { IArticulo } from 'src/app/interfaces/IArticulo';
6 import { PromocionComponent } from '../promocion/promocion.component'; 6 import { PromocionComponent } from '../promocion/promocion.component';
7 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; 7 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
8 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 8 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
9 import { ConfirmacionComponent } from '../confirmacion/confirmacion.component'; 9 import { ConfirmacionComponent } from '../confirmacion/confirmacion.component';
10 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; 10 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
11 import { ISinonimo } from 'src/app/interfaces/ISinonimo'; 11 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
12 import { SinonimoComponent } from '../sinonimo/sinonimo.component'; 12 import { SinonimoComponent } from '../sinonimo/sinonimo.component';
13 13
14 @Component({ 14 @Component({
15 selector: 'app-header-publicidad', 15 selector: 'app-header-publicidad',
16 templateUrl: './header-publicidad.component.html', 16 templateUrl: './header-publicidad.component.html',
17 styleUrls: ['./header-publicidad.component.scss'] 17 styleUrls: ['./header-publicidad.component.scss']
18 }) 18 })
19 export class HeaderPublicidadComponent implements OnInit { 19 export class HeaderPublicidadComponent implements OnInit {
20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
21 publicidades: IPublicidad[] = []; 21 publicidades: IPublicidad[] = [];
22 modalRef: BsModalRef; 22 modalRef: BsModalRef;
23 23
24 constructor( 24 constructor(
25 private publicidadService: PublicidadService, 25 private publicidadService: PublicidadService,
26 private articuloService: ArticuloService, 26 private articuloService: ArticuloService,
27 private modalService: BsModalService, 27 private modalService: BsModalService,
28 private sinonimoService: SinonimoService 28 private sinonimoService: SinonimoService
29 ) { } 29 ) { }
30 30
31 ngOnInit() { 31 ngOnInit() {
32 this.getPublicidades(); 32 this.getPublicidades();
33 this.mediaPantalla(); 33 this.mediaPantalla();
34 } 34 }
35 35
36 getPublicidades() { 36 getPublicidades() {
37 this.publicidadService.getAll() 37 this.publicidadService.getAll()
38 .subscribe((res: IPublicidad[]) => { 38 .subscribe((res: IPublicidad[]) => {
39 this.publicidades = res; 39 this.publicidades = res;
40 }, err => console.error(err)); 40 }, err => console.error(err));
41 } 41 }
42 42
43 elegirArticulo(publicidad: IPublicidad) { 43 elegirArticulo(publicidad: IPublicidad) {
44 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo); 44 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo);
45 } 45 }
46 46
47 getByID(id: number) { 47 getByID(id: number) {
48 this.articuloService.getById(id) 48 this.articuloService.getById(id)
49 .subscribe((res: IArticulo) => { 49 .subscribe((res: IArticulo) => {
50 if (res.FPP) { 50 if (res.FPP) {
51 this.openModalPromos(res); 51 this.openModalPromos(res);
52 return; 52 return;
53 } else { 53 } else {
54 this.openModalConfirmacion(res); 54 this.openModalConfirmacion(res);
55 return; 55 return;
56 } 56 }
57 }, err => console.error(err)); 57 }, err => console.error(err));
58 } 58 }
59 59
60 openModalPromos(articulo: IArticulo) { 60 openModalPromos(articulo: IArticulo) {
61 this.modalRef = this.modalService.show(PromocionComponent, 61 this.modalRef = this.modalService.show(PromocionComponent,
62 { 62 {
63 initialState: { 63 initialState: {
64 idArticulo: articulo.id 64 idArticulo: articulo.id
65 }, 65 },
66 class: 'modal-promo modal-dialog-centered' 66 class: 'modal-promo modal-dialog-centered'
67 }); 67 });
68 } 68 }
69 69
70 openModalConfirmacion(articulo: IArticulo) { 70 openModalConfirmacion(articulo: IArticulo) {
71 this.modalRef = this.modalService.show(ConfirmacionComponent, 71 this.modalRef = this.modalService.show(ConfirmacionComponent,
72 { 72 {
73 initialState: { 73 initialState: {
74 titleMessage: articulo.DET_LAR, 74 titleMessage: articulo.DET_LAR,
75 imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : 'assets/img/image-not-found.jpg', 75 imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : 'assets/img/imagen-no-encontrada.jpg',
76 footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`, 76 footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`,
77 footerMessageSecond: `a su carrito?`, 77 footerMessageSecond: `a su carrito?`,
78 footerConfirmation: articulo.PreVen, 78 footerConfirmation: articulo.PreVen,
79 footerClose: `volver` 79 footerClose: `volver`
80 }, 80 },
81 class: 'modal-promo modal-dialog-centered' 81 class: 'modal-promo modal-dialog-centered'
82 }); 82 });
83 this.modalRef.content.onClose.subscribe(() => { 83 this.modalRef.content.onClose.subscribe(() => {
84 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) 84 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
85 .subscribe((res: ISinonimo[]) => { 85 .subscribe((res: ISinonimo[]) => {
86 if (res.length) { 86 if (res.length) {
87 this.openModalSinonimos(res, articulo); 87 this.openModalSinonimos(res, articulo);
88 } else { 88 } else {
89 articulo.cantidad = 1; 89 articulo.cantidad = 1;
90 this.articuloService.setArticulo(articulo); 90 this.articuloService.setArticulo(articulo);
91 } 91 }
92 }, err => console.error(err)); 92 }, err => console.error(err));
93 }); 93 });
94 this.mediaPantalla(); 94 this.mediaPantalla();
95 } 95 }
96 96
97 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 97 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
98 const modalSinonimo = this.modalService.show(SinonimoComponent, { 98 const modalSinonimo = this.modalService.show(SinonimoComponent, {
99 initialState: { sinonimos: sinonimosData }, 99 initialState: { sinonimos: sinonimosData },
100 class: 'modal-promo modal-dialog-centered' 100 class: 'modal-promo modal-dialog-centered'
101 }); 101 });
102 modalSinonimo.content.onClose 102 modalSinonimo.content.onClose
103 .subscribe((res: any) => { 103 .subscribe((res: any) => {
104 for (const a of articulo.productos) { 104 for (const a of articulo.productos) {
105 if (a.idSinonimo === res.ID_SIN) { 105 if (a.idSinonimo === res.ID_SIN) {
106 a.CODA = res.articulo.CodArt; 106 a.CODA = res.articulo.CodArt;
107 a.CodArt = res.articulo.CodArt; 107 a.CodArt = res.articulo.CodArt;
108 a.SECA = res.articulo.CodSec; 108 a.SECA = res.articulo.CodSec;
109 a.CodSec = res.articulo.CodSec; 109 a.CodSec = res.articulo.CodSec;
110 a.PreVen = res.articulo.PreVen; 110 a.PreVen = res.articulo.PreVen;
111 a.id = res.articulo.id; 111 a.id = res.articulo.id;
112 a.DET_LAR = res.articulo.DET_LAR; 112 a.DET_LAR = res.articulo.DET_LAR;
113 a.DetArt = res.articulo.DetArt; 113 a.DetArt = res.articulo.DetArt;
114 } 114 }
115 } 115 }
116 this.articuloService.setArticulo(articulo); 116 this.articuloService.setArticulo(articulo);
117 }); 117 });
118 } 118 }
119 119
120 mediaPantalla() { 120 mediaPantalla() {
121 if ($('body').hasClass('media-pantalla')) { 121 if ($('body').hasClass('media-pantalla')) {
122 $('#headerPublicidad,#headerPad').addClass('media-pantalla'); 122 $('#headerPublicidad,#headerPad').addClass('media-pantalla');
123 } 123 }
124 } 124 }
125 } 125 }
126 126
src/app/shared/promocion/promocion.component.html
Diff comments   View file @ 6215ca5
1 <div class="d-flex justify-content-center" 1 <div class="d-flex justify-content-center"
2 *ngIf="loading"> 2 *ngIf="loading">
3 <div class="spinner-border text-primary" role="status"> 3 <div class="spinner-border text-primary" role="status">
4 <span class="sr-only">Loading...</span> 4 <span class="sr-only">Loading...</span>
5 </div> 5 </div>
6 </div> 6 </div>
7 <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">
8 <div class="row mx-0 w-100"> 8 <div class="row mx-0 w-100">
9 <div class="col-9"> 9 <div class="col-9">
10 <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>
11 <h1 class="text-white mb-4">en un combo?</h1> 11 <h1 class="text-white mb-4">en un combo?</h1>
12 </div> 12 </div>
13 <div class="col-3"> 13 <div class="col-3">
14 <img 14 <img
15 draggable="false" 15 draggable="false"
16 ondragstart="return false;" 16 ondragstart="return false;"
17 (contextmenu)="false" 17 (contextmenu)="false"
18 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}" 18 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
19 onerror="this.src='assets/img/image-not-found.jpg'" 19 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
20 class="card-img-top img-fluid rounded-circle"> 20 class="card-img-top img-fluid rounded-circle">
21 </div> 21 </div>
22 </div> 22 </div>
23 <div 23 <div
24 class="row mx-0 lista-promociones scroll-y-visible" 24 class="row mx-0 lista-promociones scroll-y-visible"
25 (scroll)="scrollEvent($event)"> 25 (scroll)="scrollEvent($event)">
26 <div class="col-12"> 26 <div class="col-12">
27 <div *ngFor="let promo of promociones"> 27 <div *ngFor="let promo of promociones">
28 <div 28 <div
29 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"
30 (click)="selectPromo(promo)"> 30 (click)="selectPromo(promo)">
31 <div class="d-flex"> 31 <div class="d-flex">
32 <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>
33 <p class="font-weight-bold my-auto pr-2"> 33 <p class="font-weight-bold my-auto pr-2">
34 <span>{{promo.PreVen | currency}}</span> 34 <span>{{promo.PreVen | currency}}</span>
35 </p> 35 </p>
36 <img 36 <img
37 draggable="false" 37 draggable="false"
38 ondragstart="return false;" 38 ondragstart="return false;"
39 (contextmenu)="false" 39 (contextmenu)="false"
40 class="d-block ml-auto py-1 icon-30 mr-2 pt-2" 40 class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
41 src="assets/img/ir-color.svg"> 41 src="assets/img/ir-color.svg">
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 </div> 45 </div>
46 </div> 46 </div>
47 47
src/app/shared/promocion/promocion.component.ts
Diff comments   View file @ 6215ca5
1 import { Component, OnInit, HostListener } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 import { IArticulo } from 'src/app/interfaces/IArticulo'; 3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 4 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
5 import { PromocionService } from 'src/app/services/promocion/promocion.service'; 5 import { PromocionService } from 'src/app/services/promocion/promocion.service';
6 import { Subject } from 'rxjs'; 6 import { Subject } from 'rxjs';
7 import { APP_SETTINGS } from 'src/etc/AppSettings'; 7 import { APP_SETTINGS } from 'src/etc/AppSettings';
8 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 8 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
9 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; 9 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
10 import { ISinonimo } from 'src/app/interfaces/ISinonimo'; 10 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
11 import { SinonimoComponent } from '../sinonimo/sinonimo.component'; 11 import { SinonimoComponent } from '../sinonimo/sinonimo.component';
12 import * as _ from 'lodash';
12 13
13 @Component({ 14 @Component({
14 selector: 'app-promocion', 15 selector: 'app-promocion',
15 templateUrl: './promocion.component.html', 16 templateUrl: './promocion.component.html',
16 styleUrls: ['./promocion.component.scss'] 17 styleUrls: ['./promocion.component.scss']
17 }) 18 })
18 export class PromocionComponent implements OnInit { 19 export class PromocionComponent implements OnInit {
19 articulosPromo: IArticulo[] = []; 20 articulosPromo: IArticulo[] = [];
20 promociones: IArticulo[] = []; 21 promociones: IArticulo[] = [];
21 onClose: Subject<any>; 22 onClose: Subject<any>;
22 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 23 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
23 24
24 constructor( 25 constructor(
25 public modalPromocion: BsModalRef, 26 public modalPromocion: BsModalRef,
26 private modalService: BsModalService, 27 private modalService: BsModalService,
27 private articuloService: ArticuloService, 28 private articuloService: ArticuloService,
28 private promocionService: PromocionService, 29 private promocionService: PromocionService,
29 private sinonimoService: SinonimoService, 30 private sinonimoService: SinonimoService,
30 private inactiveScreen: InactiveScreenService, 31 private inactiveScreen: InactiveScreenService,
31 ) { 32 ) {
32 this.onClose = new Subject(); 33 this.onClose = new Subject();
33 } 34 }
34 35
35 ngOnInit() { 36 ngOnInit() {
36 this.getPromociones(); 37 this.getPromociones();
37 } 38 }
38 39
39 selectPromo(promo: IArticulo) { 40 selectPromo(promo: IArticulo) {
40 this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt) 41 this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
41 .subscribe((res: ISinonimo[]) => { 42 .subscribe((res: ISinonimo[]) => {
42 if (res.length) { 43 if (res.length) {
44 const sinonimos = [];
45 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
46 Object.keys(gruposArticulos).forEach(key => {
47 sinonimos.push({ productos: gruposArticulos[key] });
48 });
49 res = sinonimos;
43 this.openModalSinonimos(res, promo); 50 this.openModalSinonimos(res, promo);
44 } else { 51 } else {
45 promo.cantidad = 1; 52 promo.cantidad = 1;
46 this.articuloService.setArticulo(promo); 53 this.articuloService.setArticulo(promo);
47 this.modalPromocion.hide(); 54 this.modalPromocion.hide();
48 } 55 }
49 }, err => console.error(err)); 56 }, err => console.error(err));
50 this.mediaPantalla(); 57 this.mediaPantalla();
51 } 58 }
52 59
53 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 60 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
54 console.log('lanzado open sinonimos'); 61 console.log('lanzado open sinonimos');
55 const modalSinonimo = this.modalService.show(SinonimoComponent, { 62 const modalSinonimo = this.modalService.show(SinonimoComponent, {
56 initialState: { sinonimos: sinonimosData }, 63 initialState: { sinonimos: sinonimosData },
57 class: 'modal-promo modal-dialog-centered' 64 class: 'modal-promo modal-dialog-centered'
58 }); 65 });
59 66
60 modalSinonimo.content.onClose 67 modalSinonimo.content.onClose
61 .subscribe((res: any) => { 68 .subscribe((res: any) => {
62 for (const a of articulo.productos) { 69 for (const a of articulo.productos) {
63 for (const aRes of res.articulos) { 70 for (const aRes of res.articulos) {
64 if (a.idSinonimo === aRes.ID_SIN) { 71 if (a.idSinonimo === aRes.ID_SIN) {
65 a.CODA = aRes.CodArt; 72 a.CODA = aRes.CodArt;
66 a.CodArt = aRes.CodArt; 73 a.CodArt = aRes.CodArt;
67 a.SECA = aRes.CodSec; 74 a.SECA = aRes.CodSec;
68 aRes.CodSec = aRes.CodSec; 75 aRes.CodSec = aRes.CodSec;
69 a.PreVen = aRes.PreVen; 76 a.PreVen = aRes.PreVen;
70 a.id = aRes.id; 77 a.id = aRes.id;
71 a.DET_LAR = aRes.DET_LAR; 78 a.DET_LAR = aRes.DET_LAR;
72 a.DetArt = aRes.DetArt; 79 a.DetArt = aRes.DetArt;
73 } 80 }
74 } 81 }
75 } 82 }
76 this.articuloService.setArticulo(articulo); 83 this.articuloService.setArticulo(articulo);
77 this.modalPromocion.hide(); 84 this.modalPromocion.hide();
78 }); 85 });
79 } 86 }
80 87
81 getPromociones() { 88 getPromociones() {
82 const sector = this.articulosPromo[0].CodSec; 89 const sector = this.articulosPromo[0].CodSec;
83 const codigo = this.articulosPromo[0].CodArt; 90 const codigo = this.articulosPromo[0].CodArt;
84 this.promocionService.getPromociones(sector, codigo) 91 this.promocionService.getPromociones(sector, codigo)
85 .subscribe((res: IArticulo[]) => { 92 .subscribe((res: IArticulo[]) => {
86 this.promociones = res; 93 this.promociones = res;
87 }, error => { console.error(error); }); 94 }, error => { console.error(error); });
88 } 95 }
89 96
90 @HostListener('document:click', ['$event']) 97 @HostListener('document:click', ['$event'])
91 eventListener(event: Event) { 98 eventListener(event: Event) {
92 clearTimeout(this.inactiveScreen.timerReposo); 99 clearTimeout(this.inactiveScreen.timerReposo);
93 this.inactiveScreen.startTimeOutInactividad(); 100 this.inactiveScreen.startTimeOutInactividad();
94 } 101 }
95 102
96 @HostListener('scroll', ['$event']) 103 @HostListener('scroll', ['$event'])
97 scrollEvent(event: Event) { 104 scrollEvent(event: Event) {
98 clearTimeout(this.inactiveScreen.timerReposo); 105 clearTimeout(this.inactiveScreen.timerReposo);
99 this.inactiveScreen.startTimeOutInactividad(); 106 this.inactiveScreen.startTimeOutInactividad();
100 } 107 }
101 108
102 mediaPantalla() { 109 mediaPantalla() {
103 if ($('body').hasClass('media-pantalla')) { 110 if ($('body').hasClass('media-pantalla')) {
104 $('.modal-content').addClass('media-pantalla'); 111 $('.modal-content').addClass('media-pantalla');
105 } 112 }
106 } 113 }
107 } 114 }
108 115
src/app/shared/sinonimo/sinonimo.component.html
Diff comments   View file @ 6215ca5
1 <div class="bg-primary rounded text-white"> 1 <div class="bg-primary rounded text-white">
2 <div class="modal-header"> 2 <div class="modal-header">
3 <p class="h4">Elige una opción</p> 3 <p class="h4 col-6 px-0 align-self-center">Eliga opciones {{sinonimos.length}}</p>
4 <div class="col-6 text-right">
5 <p *ngFor="let s of sinonimos; let i = index">
6 <span
7 class="pr-2 btn-effect"
8 (click)="scrollTo(i)">
9 Ir a opción {{i+1}}</span>
10 <i class="far fa-hand-point-left"></i>
11 </p>
12 </div>
4 </div> 13 </div>
5 14
6 <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2"> 15 <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2">
7 <div *ngFor="let s of sinonimos; let i = index"> 16 <div *ngFor="let s of sinonimos; let i = index">
8 <br> 17 <div [id]="i"></div>
18 <hr [hidden]="i === 0" class="bg-white">
9 <div *ngFor="let articulo of s.productos"> 19 <div *ngFor="let articulo of s.productos">
10 <div class="custom-control custom-checkbox"> 20 <div class="custom-control custom-checkbox">
11 <input 21 <input
12 type="checkbox" 22 type="checkbox"
13 class="custom-control-input" 23 class="custom-control-input"
14 [(ngModel)]="articulo.seleccionado" 24 [(ngModel)]="articulo.seleccionado"
15 (click)="selectSinonimo(i, articulo)" 25 (click)="selectSinonimo(i, articulo)"
16 [id]="articulo.id"> 26 [id]="articulo.id">
17 <label 27 <label
18 class="custom-control-label" 28 class="custom-control-label"
19 [for]="articulo.id"> 29 [for]="articulo.id">
20 {{articulo.DET_LAR.toUpperCase()}} 30 {{articulo.DET_LAR.toUpperCase()}}
21 </label> 31 </label>
22 </div> 32 </div>
23 </div> 33 </div>
24 </div> 34 </div>
25 </div> 35 </div>
26 36
27 <div class="modal-footer"> 37 <div class="modal-footer">
28 <div 38 <div
29 [ngClass]="validate()" 39 [ngClass]="validate()"
30 class="d-inline-block py-1 bg-white badge-pill text-primary" 40 class="d-inline-block py-1 bg-white badge-pill text-primary"
31 (click)="continue()"> 41 (click)="continue()">
32 CONTINUAR 42 CONTINUAR
33 <img 43 <img
34 draggable="false" 44 draggable="false"
35 ondragstart="return false;" 45 ondragstart="return false;"
36 (contextmenu)="false" 46 (contextmenu)="false"
37 class="icon-30" 47 class="icon-30"
38 src="assets/img/ir-color.svg"> 48 src="assets/img/ir-color.svg">
39 </div> 49 </div>
40 </div> 50 </div>
41 </div> 51 </div>
42 52
src/app/shared/sinonimo/sinonimo.component.ts
Diff comments   View file @ 6215ca5
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 8
8 @Component({ 9 @Component({
9 selector: 'app-sinonimo', 10 selector: 'app-sinonimo',
10 templateUrl: './sinonimo.component.html', 11 templateUrl: './sinonimo.component.html',
11 styleUrls: ['./sinonimo.component.scss'] 12 styleUrls: ['./sinonimo.component.scss']
12 }) 13 })
13 export class SinonimoComponent implements OnInit { 14 export class SinonimoComponent implements OnInit {
14 sinonimos: ISinonimo[] = []; 15 sinonimos: ISinonimo[] = [];
15 isValid: boolean; 16 isValid: boolean;
16 onClose: Subject<any>; 17 onClose: Subject<any>;
17 articulosSelected: IArticulo[] = []; 18 articulosSelected: IArticulo[] = [];
18 19
19 constructor( 20 constructor(
20 private modalRef: BsModalRef, 21 private modalRef: BsModalRef,
21 private articuloService: ArticuloService, 22 private articuloService: ArticuloService,
22 ) { 23 ) {
23 this.onClose = new Subject(); 24 this.onClose = new Subject();
24 this.articulosSelected.length = this.sinonimos.length; 25 this.articulosSelected.length = this.sinonimos.length;
25 } 26 }
26 27
27 ngOnInit() { } 28 ngOnInit() { }
28 29
29 selectSinonimo(index: number, articulo: IArticulo) { 30 selectSinonimo(index: number, articulo: IArticulo) {
30 for (const a of this.sinonimos[index].productos) { 31 for (const a of this.sinonimos[index].productos) {
31 a.seleccionado = false; 32 a.seleccionado = false;
32 } 33 }
33 articulo.seleccionado = true; 34 articulo.seleccionado = true;
34 this.articulosSelected[index] = articulo; 35 this.articulosSelected[index] = articulo;
35 } 36 }
36 37
37 validate() { 38 validate() {
38 this.isValid = true; 39 this.isValid = true;
39 for (const s of this.sinonimos) { 40 for (const s of this.sinonimos) {
40 for (const a of s.productos) { 41 for (const a of s.productos) {
41 this.isValid = (!a.seleccionado) ? false : true; 42 this.isValid = (!a.seleccionado) ? false : true;
42 if (this.isValid) break; 43 if (this.isValid) break;
43 } 44 }
44 if (!this.isValid) break; 45 if (!this.isValid) break;
45 } 46 }
46 return !this.isValid ? 'disabled' : 'btn-effect'; 47 return !this.isValid ? 'disabled' : 'btn-effect';
47 } 48 }
48 49
49 continue() { 50 continue() {
50 if (!this.isValid) return; 51 if (!this.isValid) return;
51 const ID_SINS = []; 52 const ID_SINS = [];
52 const observables = []; 53 const observables = [];
53 54
54 for (const articulo of this.articulosSelected) { 55 for (const articulo of this.articulosSelected) {
55 ID_SINS.push(articulo.ID_SIN); 56 ID_SINS.push(articulo.ID_SIN);
56 } 57 }
57 58
58 for (const articulo of this.articulosSelected) { 59 for (const articulo of this.articulosSelected) {
59 observables.push(this.articuloService.getById(articulo.id)); 60 observables.push(this.articuloService.getById(articulo.id));
60 } 61 }
61 62
62 forkJoin(observables) 63 forkJoin(observables)
63 .subscribe((res: IArticulo[]) => { 64 .subscribe((res: IArticulo[]) => {
64 for (const articulo of res) { 65 for (const articulo of res) {
65 for (const ID_SIN of ID_SINS) { 66 for (const ID_SIN of ID_SINS) {
66 articulo.ID_SIN = ID_SIN; 67 articulo.ID_SIN = ID_SIN;
67 } 68 }
68 } 69 }
69 this.modalRef.hide(); 70 this.modalRef.hide();
70 this.onClose.next({ 71 this.onClose.next({
71 articulos: res, 72 articulos: res,
72 }); 73 });
73 }, err => console.error(err)); 74 }, err => console.error(err));
74 } 75 }
75 76
77 scrollTo(index: number) {
78 const element = document.getElementById(index.toString());
79 element.scrollIntoView({ behavior: "smooth", block: "center" });
80 }
81
76 } 82 }
77 83
src/app/utils/animations.ts
Diff comments   View file @ 6215ca5
File was created 1 import { trigger, state, style, transition, animate } from '@angular/animations';
2
3 export const ANIMATIONS = {
4 EnterLeaveY: trigger('EnterLeaveY', [
5 state('flyIn', style({ transform: 'translateY(0)' })),
6 transition(':enter', [
7 style({ transform: 'translateY(-100%)' }),
8 animate('0.5s ease-in')
9 ]),
10 transition(':leave', [
11 animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
12 ])
13 ]),
14 EnterLeaveX: trigger('EnterLeaveX', [
15 state('flyIn', style({ transform: 'translateX(0)' })),
16 transition(':enter', [
17 style({ transform: 'translateX(-100%)' }),
18 animate('1s ease-in')
19 ]),
20 transition(':leave', [
21 animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
22 ])
23 ])
24 };
25
src/assets/img/icono-pago-electronico.svg
Diff comments   View file @ 6215ca5
File was created 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <!-- Creator: CorelDRAW X7 -->
4 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="29.7016mm" height="29.6264mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
5 viewBox="0 0 677 675"
6 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <defs>
8 <style type="text/css">
9 <![CDATA[
10 .fil0 {fill:#F4B223}
11 ]]>
12 </style>
13 </defs>
14 <g id="Capa_x0020_1">
15 <metadata id="CorelCorpID_0Corel-Layer"/>
16 <path class="fil0" d="M0 656c9,11 6,19 32,19 16,0 34,3 44,-7 11,-12 -7,-8 32,-19 12,-4 30,-10 41,-12 7,-4 27,-9 36,-11 12,-4 26,-7 38,-11 27,-9 36,-27 51,-45 27,-35 56,-73 83,-108 5,-5 7,-9 11,-14l32 -41c18,-23 35,-36 12,-61 -8,-7 -13,-19 -32,-16 -11,2 -20,14 -27,20 -2,1 -5,3 -7,5l-25 23c-4,4 -14,14 -19,16 -14,-6 -25,-32 -31,-51 -11,-34 -10,-31 -3,-66 3,-11 6,-22 8,-34 2,-7 11,-29 -5,-27 -8,1 -9,16 -12,29 -12,55 -20,53 -5,100 7,21 16,41 28,55 3,4 18,16 28,10 6,-4 14,-13 21,-19 5,-3 6,-6 11,-9l32 -29c4,-3 6,-9 14,-7 1,1 18,16 18,23 0,6 -38,52 -44,59l-71 92c-5,8 -12,16 -18,24 -24,31 -29,46 -64,57 -21,7 -42,13 -63,19 -21,6 -42,14 -63,19 0,-30 0,-61 0,-91 0,-19 -3,-71 4,-85l127 -254 30 -36c6,-8 13,-17 20,-25 4,-5 19,-21 16,-28 -8,-11 -14,-2 -19,4l-59 75c-7,9 -115,227 -122,241 -9,-9 -10,-12 -28,-12 -11,0 -29,-2 -38,3 -19,9 -13,42 -13,66 0,24 1,146 -1,159zm520 -97c15,-25 6,-34 0,-49 33,1 73,0 107,0 24,1 15,-13 11,-15 -4,-3 -222,-1 -263,-1 -13,0 -28,-4 -25,11 3,9 34,5 49,5 18,0 36,0 54,0 -11,26 -11,23 0,50 -16,0 -115,1 -124,-2 -7,-3 -10,-10 -17,-8 -10,2 -9,17 15,24 12,4 269,2 304,2 15,0 23,-3 33,-12 12,-12 12,-26 12,-46l0 -409c0,-48 12,-109 -45,-109l-255 0c-36,0 -64,-4 -76,26 -6,15 -3,81 -3,101 0,68 0,136 0,204 0,8 0,18 0,26 0,8 6,15 14,8 5,-4 3,-38 3,-48 0,-34 0,-68 0,-102l0 -153c0,-50 10,-45 57,-45l255 0c42,0 33,25 33,68l0 410c0,11 2,42 -2,49 -5,14 -17,16 -35,16 -17,0 -34,0 -51,0 -15,0 -37,1 -51,-1zm-503 -101l0 179c0,23 -3,21 32,21 21,0 18,-2 18,-22l0 -178c0,-17 -8,-13 -24,-13 -17,0 -26,-4 -26,13zm494 -280l0 54c0,19 5,15 42,15 49,0 41,12 41,-69 0,-17 -8,-13 -41,-13 -34,0 -42,-5 -42,13zm-51 67c3,-11 2,-27 2,-40 0,-47 7,-40 -43,-40 -47,0 -40,-7 -40,42 0,8 -2,34 3,38 5,4 72,3 78,0zm-116 -163l287 1c16,0 16,-17 0,-17l-287 0c-8,0 -14,0 -14,8 0,8 6,8 14,8zm183 148l50 1 0 -50 -49 0 -1 49zm-131 0l49 0 0 -49 -49 0 0 49zm2 83l47 0c0,15 0,31 0,46 0,7 -1,16 5,19 9,4 12,-4 12,-12 0,-14 0,-27 0,-41 0,-34 10,-29 -71,-29 -7,0 -13,4 -11,12 2,7 10,5 18,5zm80 -33c0,23 -3,36 15,31 3,-8 2,-18 2,-29 0,-16 0,-19 -16,-19l-75 0c-9,0 -26,-3 -24,10 1,10 19,7 28,7 21,0 51,-2 70,0zm33 82l-16 0c0,-19 3,-39 -15,-31 -3,9 -2,17 -2,27 0,10 -2,19 9,21 6,1 20,0 27,0 13,0 14,-4 14,-16l0 -51c0,-8 0,-15 -9,-16 -9,0 -8,9 -8,17 0,17 0,33 0,49zm-29 149c-12,2 -22,14 -20,29 2,12 15,22 30,19 31,-7 21,-54 -10,-48zm96 -168c21,10 16,-17 16,-41 0,-10 4,-37 -8,-38 -14,-2 -9,24 -9,34 0,13 -1,35 1,45zm-98 -98c13,5 15,-1 15,-14l0 -51c0,-8 -1,-18 -12,-15 -7,2 -5,15 -5,24 0,15 -2,44 2,56zm-33 -210c-6,20 13,15 30,15 9,0 43,1 48,-3 5,-5 2,-13 -5,-14 -5,-1 -19,0 -25,0 -10,0 -42,-1 -48,2zm66 244c10,2 21,0 31,1 0,11 -1,22 2,31 13,5 15,-1 15,-14 -1,-38 5,-34 -34,-34 -13,0 -19,3 -14,16zm48 83c0,-7 0,-18 0,-24 -1,-7 -8,-12 -14,-7 -4,4 -4,41 -1,45 4,4 41,4 45,1 6,-6 1,-14 -5,-15 -5,-1 -19,0 -25,0z"/>
17 </g>
18 </svg>
19
src/assets/img/icono-pago-tarjeta.svg
Diff comments   View file @ 6215ca5
File was created 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <!-- Creator: CorelDRAW X7 -->
4 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="40.8317mm" height="28.4598mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
5 viewBox="0 0 6182 4309"
6 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <defs>
8 <style type="text/css">
9 <![CDATA[
10 .fil0 {fill:#F4B223}
11 ]]>
12 </style>
13 </defs>
14 <g id="Capa_x0020_1">
15 <metadata id="CorelCorpID_0Corel-Layer"/>
16 <path class="fil0" d="M255 1396l1430 0 0 -1141c0,-141 115,-255 255,-255l3987 0c141,0 255,114 255,255 0,801 0,1602 0,2403 0,140 -115,254 -255,254l-1431 0 0 1141c0,141 -114,256 -254,256l-3987 0c-140,0 -255,-115 -255,-256 0,-801 0,-1601 0,-2402 0,-140 114,-255 255,-255zm1551 0l2436 0c140,0 254,115 254,255l0 1141 1431 0c74,0 135,-61 135,-134l0 -1737 -4256 0 0 475zm4256 -595l0 -209 -4256 0 0 209 4256 0zm0 -329l0 -217c0,-74 -61,-135 -135,-135l-3987 0c-74,0 -134,61 -134,135l0 217 4256 0zm-5942 1395l4256 0 0 -216c0,-74 -61,-134 -134,-134l-3987 0c-74,0 -135,60 -135,134l0 216zm4256 451l-4256 0 0 1735c0,74 61,135 135,135l3987 0c73,0 134,-61 134,-135l0 -1735zm0 -330l-4256 0 0 209 4256 0 0 -209z"/>
17 <path class="fil0" d="M595 2984l919 0 0 361 -982 0 0 -361 63 0zm794 125l-731 0 0 111 731 0 0 -111z"/>
18 <polygon class="fil0" points="514,3843 2095,3843 2095,3963 514,3963 "/>
19 </g>
20 </svg>
21
src/assets/img/icono-silla-de-ruedas.svg
Diff comments   View file @ 6215ca5
File was created 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <!-- Creator: CorelDRAW X7 -->
4 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="19.7986mm" height="18.7181mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
5 viewBox="0 0 176 166"
6 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <defs>
8 <style type="text/css">
9 <![CDATA[
10 .fil0 {fill:#CFD1D2}
11 ]]>
12 </style>
13 </defs>
14 <g id="Capa_x0020_1">
15 <metadata id="CorelCorpID_0Corel-Layer"/>
16 <path class="fil0" d="M119 148c0,4 3,8 7,8 5,0 8,-4 8,-8 0,-4 -3,-8 -8,-8 -4,0 -7,4 -7,8l0 0zm10 0c0,2 -1,3 -3,3 -1,0 -2,-1 -2,-3 0,-1 1,-2 2,-2 2,0 3,1 3,2l0 0zm0 0z"/>
17 <path class="fil0" d="M49 78c-21,0 -39,18 -39,39 0,22 18,39 39,39 21,0 39,-17 39,-39 0,-21 -18,-39 -39,-39l0 0zm0 73c-19,0 -34,-15 -34,-34 0,-18 15,-34 34,-34 18,0 33,16 33,34 0,19 -15,34 -33,34l0 0zm0 0z"/>
18 <path class="fil0" d="M49 107c-6,0 -10,4 -10,10 0,6 4,10 10,10 6,0 10,-4 10,-10 0,-6 -4,-10 -10,-10l0 0zm0 15c-3,0 -5,-2 -5,-5 0,-3 2,-5 5,-5 3,0 5,2 5,5 0,3 -2,5 -5,5l0 0zm0 0z"/>
19 <path class="fil0" d="M173 135l-20 0 -6 -31c-2,-6 -7,-10 -13,-10l-5 0 0 -39c0,-7 -6,-13 -13,-13l-8 0c-1,-6 -6,-10 -13,-10l-38 0 0 -19c0,-7 -6,-13 -13,-13l-36 0c-2,0 -5,1 -6,3 -2,1 -2,3 -2,6 1,4 4,7 8,7l33 0 0 53c-23,3 -41,24 -41,48 0,27 22,49 49,49 27,0 49,-22 49,-49 0,-6 -1,-12 -4,-18l30 0 0 16 -18 0c-2,0 -3,1 -3,2 0,2 1,3 3,3l18 0 0 10c-9,2 -16,9 -16,18 0,10 8,18 18,18 10,0 18,-8 18,-18 0,-9 -6,-16 -15,-18l0 -31 5 0c4,0 7,3 8,6l6 33c0,0 0,0 0,0l2 11c0,1 1,2 3,2l20 0c2,0 3,-1 3,-3l0 -10c0,-2 -1,-3 -3,-3l0 0zm-34 13c0,7 -6,13 -13,13 -7,0 -13,-6 -13,-13 0,-7 6,-13 13,-13 7,0 13,6 13,13l0 0zm-44 -111c4,0 7,2 8,5l-46 0 0 -5 38 0zm-87 -27c-1,0 -3,-1 -3,-2 0,-1 0,-1 1,-2 0,0 1,-1 2,-1l33 0 0 5 -33 0zm38 -4c3,1 6,4 6,7l0 55c-1,0 -2,0 -3,0 -1,0 -2,0 -3,0l0 -62 0 0zm3 155c-24,0 -44,-20 -44,-44 0,-24 20,-44 44,-44 24,0 44,20 44,44 0,24 -20,44 -44,44l0 0zm43 -67c-7,-13 -20,-23 -35,-25l0 -6 49 0c1,0 2,-1 2,-3 0,-1 -1,-2 -2,-2l-49 0 0 -11 59 0c4,0 8,4 8,8l0 3 -8 0c-1,0 -3,1 -3,2 0,2 2,3 3,3l8 0 0 31 -32 0zm79 52l-16 0 -1 -6 17 0 0 6zm0 0z"/>
20 </g>
21 </svg>
22
src/assets/img/image-not-found.jpg
View file @ 6215ca5

41.5 KB
src/assets/img/imagen-no-encontrada.jpg
Diff comments   View file @ 6215ca5

30.5 KB
src/scss/height-width.scss
Diff comments   View file @ 6215ca5
1 @for $i from 1 through 100 { 1 @for $i from 1 through 100 {
2 $heightValue: 1% * $i; 2 $heightValue: 1% * $i;
3 .h-#{$i} { 3 .h-#{$i} {
4 height: $heightValue; 4 height: $heightValue;
5 } 5 }
6 @media (min-width: 576px) { 6 @media (min-width: 576px) {
7 .h-sm-#{$i} { 7 .h-sm-#{$i} {
8 height: $heightValue !important; 8 height: $heightValue !important;
9 } 9 }
10 } 10 }
11 @media (min-width: 768px) { 11 @media (min-width: 768px) {
12 .h-md-#{$i} { 12 .h-md-#{$i} {
13 height: $heightValue !important; 13 height: $heightValue !important;
14 } 14 }
15 } 15 }
16 @media (min-width: 992px) { 16 @media (min-width: 992px) {
17 .h-lg-#{$i} { 17 .h-lg-#{$i} {
18 height: $heightValue !important; 18 height: $heightValue !important;
19 } 19 }
20 } 20 }
21 @media (min-width: 1200px) { 21 @media (min-width: 1200px) {
22 .h-xl-#{$i} { 22 .h-xl-#{$i} {
23 height: $heightValue !important; 23 height: $heightValue !important;
24 } 24 }
25 } 25 }
26 } 26 }
27 27
28 @for $i from 1 through 100 { 28 @for $i from 1 through 100 {
29 $widthValue: 1% * $i; 29 $widthValue: 1% * $i;
30 .w-#{$i} { 30 .w-#{$i} {
31 width: $widthValue !important; 31 width: $widthValue !important;
32 } 32 }
33 } 33 }
34 34
35 .min-h-60 { 35 .min-h-60 {
36 min-height: 60px; 36 min-height: 60px;
37 } 37 }
38 38
39 .max-h-80 { 39 .max-h-80 {
40 max-height: 80%; 40 max-height: 80%;
41 } 41 }
42
43 .heigth-80 {
44 height: 80px;
45 }
42 46
src/scss/styles-bootstrap.scss
Diff comments   View file @ 6215ca5
1 @import "node_modules/bootstrap/scss/functions"; 1 @import "node_modules/bootstrap/scss/functions";
2 @import "node_modules/bootstrap/scss/variables"; 2 @import "node_modules/bootstrap/scss/variables";
3 @import "node_modules/bootstrap/scss/mixins"; 3 @import "node_modules/bootstrap/scss/mixins";
4 4
5 $primary: #aa006b; 5 $primary: #aa006b;
6 $secondary: #00acd8; 6 $secondary: #00acd8;
7 $info: #f4b223; 7 $info: #f4b223;
8 $light: #e6e7e9; 8 $light: #e6e7e9;
9 $dark: #61666c; 9 $dark: #61666c;
10 $theme-colors: ( 10 $theme-colors: (
11 primary: $primary, 11 primary: $primary,
12 secondary: $secondary, 12 secondary: $secondary,
13 info: $info, 13 info: $info,
14 light: $light, 14 light: $light,
15 dark: $dark 15 dark: $dark
16 ); 16 );
17 $border-radius: 1.5rem; 17 $border-radius: 1.5rem;
18 $border-radius-lg: 2.5rem; 18 $border-radius-lg: 2.5rem;
19 $border-radius-sm: 0.5rem; 19 $border-radius-sm: 0.5rem;
20 20
21 .custom-modal { 21 .custom-modal {
22 max-width: 90% !important; 22 max-width: 90% !important;
23 & > .modal-content { 23 & > .modal-content {
24 background-color: $primary !important; 24 background-color: $primary !important;
25 color: white; 25 color: white;
26 border: none !important; 26 border: none !important;
27 border-radius: $border-radius !important; 27 border-radius: $border-radius !important;
28 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; 28 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
29 } 29 }
30 } 30 }
31 31
32 .carousel-control { 32 .carousel-control {
33 visibility: hidden !important; 33 visibility: hidden !important;
34 } 34 }
35 35
36 .carousel, 36 .carousel,
37 .carousel-inner, 37 .carousel-inner,
38 .carousel-item, 38 .carousel-item,
39 .item { 39 .item {
40 height: 100% !important; 40 height: 100% !important;
41 } 41 }
42 42
43 .custom-checkbox .custom-control-label::before {
44 border-radius: 50% !important;
45 }
46
43 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { 47 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
44 background-color: $primary !important; 48 background-color: $primary !important;
45 } 49 }
46 50
47 .custom-control-input:checked ~ .custom-control-label::before { 51 .custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before {
48 border-color: $primary !important; 52 box-shadow: none !important;
49 background-color: $primary !important; 53 }
54 .custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
55 box-shadow: none !important;
50 } 56 }
51 57
52 .custom-control-input:checked ~ .custom-control-label::before { 58 .custom-control-input:checked ~ .custom-control-label::before {
53 color: #fff; 59 background-color: white !important;
54 border-color: $primary !important; 60 border-color: white !important;
61 border-width: 2px;
62 }
63
64 .custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
55 background-color: $primary !important; 65 background-color: $primary !important;
56 } 66 }
57 67
68 .modal {
69 background-color: #0000004d;
70 }
71
58 .modal-promo > div { 72 .modal-promo > div {
59 border: none !important; 73 border: none !important;
60 border-radius: $border-radius; 74 border-radius: $border-radius;
61 margin-left: 10px !important; 75 margin-left: 10px !important;
62 } 76 }
63 77
64 .modal-content.media-pantalla { 78 .modal-content.media-pantalla {
65 margin-top: auto !important; 79 margin-top: auto !important;
66 margin-bottom: 50px !important; 80 margin-bottom: 50px !important;
67 } 81 }
68 82
69 .card { 83 .card {
70 border: none !important; 84 border: none !important;
71 } 85 }
72 86
73 @import "node_modules/bootstrap/scss/bootstrap"; 87 @import "node_modules/bootstrap/scss/bootstrap";
74 88