Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit bdfdb8709c835fd912fe46facf728430e6b2c3d1

Authored by Luis Suarez
1 parent 81e1a8fc64
Exists in develop

optimizar espacios en pantalla completa

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