Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 81e1a8fc64917cfecf731820569a9fd9b2c350d4

Authored by Luis Suarez
2 parents 77cc137625 879d5e46ae
Exists in develop

solving merge 2

Showing 27 changed files   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 81e1a8f
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">
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 *ngFor="let articulo of articuloService.carrito; let i = index;" 26 *ngFor="let articulo of articuloService.carrito; let i = index;"
27 @EnterLeave> 27 @EnterLeave>
28 <!-- ARTICULO --> 28 <!-- ARTICULO -->
29 <div class="h-100 border border-primary rounded-sm"> 29 <div class="h-100 border border-primary rounded-sm">
30 <div class="row align-items-center mx-0 h-100"> 30 <div class="row align-items-center mx-0 h-100">
31 <!-- NOMBRE E IMAGEN --> 31 <!-- NOMBRE E IMAGEN -->
32 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary"> 32 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
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-none d-md-block mx-auto h-55 rounded-sm shadow-sm" 37 class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm"
38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
39 onerror="this.src='assets/img/image-not-found.jpg'"> 39 onerror="this.src='assets/img/image-not-found.jpg'">
40 <div class="row mx-0 h-100 h-md-45"> 40 <div class="row mx-0 h-100 h-md-45">
41 <p class="col text-primary text-truncate align-self-center"> 41 <p class="col text-primary text-truncate align-self-center">
42 <small>{{articulo.DetArt | uppercase }}</small> 42 <small>{{articulo.DetArt | uppercase }}</small>
43 </p> 43 </p>
44 </div> 44 </div>
45 </div> 45 </div>
46 <!-- CANTIDAD --> 46 <!-- CANTIDAD -->
47 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary"> 47 <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> 48 <p class="h-40"><small>CANT</small></p>
49 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 49 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
50 <!-- BOTON MENOS -->
51 <div class="col-auto px-0 my-auto">
52 <img
53 draggable="false"
54 ondragstart="return false;"
55 (contextmenu)="false"
56 class="d-block ml-auto py-2 icon-20 btn-effect"
57 src="assets/img/menos-blanco.svg"
58 (click)="substractCant(articulo)">
59 </div>
60 <!-- CANTIDAD -->
61 <div class="col px-0 py-2 my-auto text-white">
62 <p><small>{{articulo.cantidad}}</small></p>
63 </div>
64 <!-- BOTON MAS -->
65 <div class="col-auto px-0 my-auto">
66 <img
67 draggable="false"
68 ondragstart="return false;"
69 (contextmenu)="false"
70 class="d-block ml-auto py-2 icon-20 btn-effect"
71 src="assets/img/mas-blanco.svg"
72 (click)="addCant(articulo)">
73 </div>
74 </div>
75 </div> 50 </div>
76 <!-- PRECIO --> 51 <!-- PRECIO -->
77 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary"> 52 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
78 <p class="h-40"><small>PRECIO</small></p> 53 <p class="h-40"><small>PRECIO</small></p>
79 <div class="py-2 badge-pill bg-dark text-white"> 54 <div class="py-1 badge-pill bg-dark text-white">
80 <p><small>{{articulo.PreVen | currency}}</small></p> 55 <p><small>{{articulo.PreVen | currency}}</small></p>
81 </div> 56 </div>
82 </div> 57 </div>
83 <!-- ELIMINAR --> 58 <!-- ELIMINAR -->
84 <div class="col-6 col-md-3 align-self-center"> 59 <div class="col-6 col-md-3 align-self-center">
85 <div class="row mx-0 justify-content-center"> 60 <div class="row mx-0 justify-content-center">
86 <div 61 <div
87 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 62 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
88 (click)="deleteArticulo(i)"> 63 (click)="deleteArticulo(i)">
89 <span> 64 <span>
90 <small class="pr-2">ELIMINAR</small> 65 <small class="pr-2">ELIMINAR</small>
91 <img 66 <img
92 draggable="false" 67 draggable="false"
93 ondragstart="return false;" 68 ondragstart="return false;"
94 (contextmenu)="false" 69 (contextmenu)="false"
95 class="icon-20 rotate-45" 70 class="icon-20 rotate-45"
96 src="assets/img/mas-blanco.svg"> 71 src="assets/img/mas-blanco.svg">
97 </span> 72 </span>
98 </div> 73 </div>
99 </div> 74 </div>
100 </div> 75 </div>
101 </div> 76 </div>
102 </div> 77 </div>
103 </div> 78 </div>
104 </div> 79 </div>
105 <!-- TOTAL --> 80 <!-- TOTAL -->
106 <div class="row mx-3 mt-2 h-auto justify-content-end"> 81 <div class="row mx-3 mt-2 h-auto justify-content-end">
107 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div> 82 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
108 <div class="col-auto px-3 bg-primary badge-pill"> 83 <div class="col-auto px-3 bg-primary badge-pill">
109 <p class="text-center text-white py-1">{{articuloService.subTotal | currency}}</p> 84 <p class="text-center text-white py-1">{{articuloService.subTotal | currency}}</p>
110 </div> 85 </div>
111 </div> 86 </div>
112 <!-- CONTINUAR --> 87 <!-- CONTINUAR -->
113 <div 88 <div
114 *ngIf="articuloService.carrito.length" 89 *ngIf="articuloService.carrito.length"
115 class="row mx-3 mt-4 h-auto justify-content-end"> 90 class="row mx-3 mt-4 h-auto justify-content-end">
116 <div 91 <div
117 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 92 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
118 [routerLink]="['/forma-pago']"> 93 [routerLink]="['/forma-pago']">
119 <span> 94 <span>
120 <small class="pr-2">CONTINUAR</small> 95 <small class="pr-2">CONTINUAR</small>
121 <img 96 <img
122 draggable="false" 97 draggable="false"
123 ondragstart="return false;" 98 ondragstart="return false;"
124 (contextmenu)="false" 99 (contextmenu)="false"
125 class="icon-20" 100 class="icon-20"
126 src="assets/img/ir.svg"> 101 src="assets/img/ir.svg">
127 </span> 102 </span>
128 </div> 103 </div>
129 </div> 104 </div>
130 </div> 105 </div>
131 106
132 </div> 107 </div>
133 108
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 81e1a8f
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 this.mediaPantallaP();
46 } 46 }
47 47
48 ngOnDestroy() { 48 ngOnDestroy() {
49 if (this.modalRef) this.modalRef.hide(); 49 if (this.modalRef) this.modalRef.hide();
50 } 50 }
51 51
52 deleteArticulo(index: number) { 52 deleteArticulo(index: number) {
53 this.articuloService.deleteArticulo(index); 53 this.articuloService.deleteArticulo(index);
54 } 54 }
55 55
56 substractCant(articulo: IArticulo) {
57 if (articulo.cantidad === 1) return;
58 articulo.cantidad--;
59 this.articuloService.calcularTotal();
60 }
61
62 addCant(articulo: IArticulo) {
63 if (articulo.cantidad >= this.maxCantidad) return;
64 articulo.cantidad++;
65 this.articuloService.calcularTotal();
66 }
67
68 goBack() { 56 goBack() {
69 this.location.back(); 57 this.location.back();
70 } 58 }
71 59
72 @HostListener('document:click', ['$event']) 60 @HostListener('document:click', ['$event'])
73 eventListener(event: Event) { 61 eventListener(event: Event) {
74 clearTimeout(this.inactiveScreen.timerReposo); 62 clearTimeout(this.inactiveScreen.timerReposo);
75 this.inactiveScreen.startTimeOutInactividad(); 63 this.inactiveScreen.startTimeOutInactividad();
76 } 64 }
77 65
78 @HostListener('scroll', ['$event']) 66 @HostListener('scroll', ['$event'])
79 scrollEvent(event: Event) { 67 scrollEvent(event: Event) {
80 clearTimeout(this.inactiveScreen.timerReposo); 68 clearTimeout(this.inactiveScreen.timerReposo);
81 this.inactiveScreen.startTimeOutInactividad(); 69 this.inactiveScreen.startTimeOutInactividad();
82 } 70 }
83 71
84 mediaPantallaP() { 72 mediaPantallaP() {
85 if ($('body').hasClass('media-pantalla')) { 73 if ($('body').hasClass('media-pantalla')) {
86 $('.carrito-content,.carrito-articulo').addClass('media-pantalla'); 74 $('.carrito-content,.carrito-articulo').addClass('media-pantalla');
87 } 75 }
88 } 76 }
89 } 77 }
90 78
src/app/modules/comanda/comanda.component.html
Diff comments   View file @ 81e1a8f
1 <div class="container-fluid d-flex flex-column h-100 fade-in pb-4 pr-2"> 1 <div class="container-fluid d-flex flex-column h-100 fade-in pb-4 pr-2">
2 <div class="row pt-5 mt-n5"> 2 <div class="row pt-5 mt-n5">
3 <div class="col-12"> 3 <div class="col-12">
4 <p class="mb-3 h2 text-center mt-2">Pedidos a elaborar</p> 4 <p class="mb-3 h2 text-center mt-2">Pedidos a elaborar</p>
5 </div> 5 </div>
6 </div> 6 </div>
7 <div class="row flex-fill m-0 overflow-scroll"> 7 <div class="row flex-fill m-0 scroll-y">
8 <div class="col-12 px-2"> 8 <div class="col-12 px-2">
9 <div class="card-columns h-100 m-1 fade-in disable-user-select"> 9 <div class="card-columns h-100 m-1 fade-in disable-user-select">
10 <div 10 <div
11 *ngFor="let comanda of comandas" 11 *ngFor="let comanda of comandas"
12 class="card fade-in rounded-xs shadow-sm mt-2" 12 class="card fade-in rounded-xs shadow-sm mt-2"
13 [ngClass]="{ 13 [ngClass]="{
14 'bg-light': comanda.estado === 1, 14 'bg-light': comanda.estado === 1,
15 'bg-danger': comanda.estado === 2, 15 'bg-danger': comanda.estado === 2,
16 'bg-success swing-out-top-bck': comanda.estado === 3 16 'bg-success swing-out-top-bck': comanda.estado === 3
17 }"> 17 }">
18 <div class="card-body p-2"> 18 <div class="card-body p-2">
19 <div class="row justify-content-between"> 19 <div class="row justify-content-between">
20 <img 20 <img
21 src="../../../assets/img/para-llevar-fondo-sombra.png" 21 src="../../../assets/img/para-llevar-fondo-sombra.png"
22 class="w-25 h-25 float-left ml-0 mt-n3" 22 class="w-25 h-25 float-left ml-0 mt-n3"
23 *ngIf="comanda.paraLlevar == true"> 23 *ngIf="comanda.paraLlevar == true">
24 <div></div> 24 <div></div>
25 <!-- NUMERO DE PEDIDO --> 25 <!-- NUMERO DE PEDIDO -->
26 <p class="h1 text-right mr-3"> 26 <p class="h1 text-right mr-3">
27 {{rellenar(comanda.id.toString().slice(0), 3)}} 27 {{rellenar(comanda.id.toString().slice(0), 3)}}
28 </p> 28 </p>
29 </div> 29 </div>
30 <div> 30 <div>
31 <!-- PEDIDO A NOMBRE DE --> 31 <!-- PEDIDO A NOMBRE DE -->
32 <p class="text-center m-0"> 32 <p class="text-center m-0">
33 {{comanda.pedidoAnombreDe ? comanda.pedidoAnombreDe.toUpperCase() : ''}} 33 {{comanda.pedidoAnombreDe ? comanda.pedidoAnombreDe.toUpperCase() : ''}}
34 </p> 34 </p>
35 <!-- TIMER PEDIDO --> 35 <!-- TIMER PEDIDO -->
36 <div class="d-flex justify-content-between align-items-center mt-2"> 36 <div class="d-flex justify-content-between align-items-center mt-2">
37 <p><i class="fas fa-user-clock text-info"></i></p> 37 <p><i class="fas fa-user-clock text-info"></i></p>
38 <p class="text-center mb-1"> 38 <p class="text-center mb-1">
39 {{comanda.hoursPedido}}:{{comanda.minutesPedido}}:{{comanda.secondsPedido}} 39 {{comanda.hoursPedido}}:{{comanda.minutesPedido}}:{{comanda.secondsPedido}}
40 </p> 40 </p>
41 <p><i class="far fa-clock fa-spin text-info"></i></p> 41 <p><i class="far fa-clock fa-spin text-info"></i></p>
42 </div> 42 </div>
43 <div *ngFor="let detalle of comanda.detalles"> 43 <div *ngFor="let detalle of comanda.detalles">
44 <p 44 <p
45 class="card-text border-top pt-2 mb-2" 45 class="card-text border-top pt-2 mb-2"
46 [ngClass]=" 46 [ngClass]="
47 { 47 {
48 'border-secondary': comanda.estado === 1, 48 'border-secondary': comanda.estado === 1,
49 'border-light': comanda.estado != 1 49 'border-light': comanda.estado != 1
50 }"> 50 }">
51 <!-- DETALLE Y CANTIDAD --> 51 <!-- DETALLE Y CANTIDAD -->
52 <small>{{detalle.DetLar}}</small><br> 52 <small>{{detalle.DetLar}}</small><br>
53 <small>CANT.{{detalle.cantidad}}</small> 53 <small>CANT.{{detalle.cantidad}}</small>
54 </p> 54 </p>
55 <blockquote 55 <blockquote
56 *ngIf="detalle.comentario"> 56 *ngIf="detalle.comentario">
57 <p class="text-muted font-italic px-4" *ngIf="comanda.estado === 1"><small>{{detalle.comentario}}</small></p> 57 <p class="text-muted font-italic px-4" *ngIf="comanda.estado === 1"><small>{{detalle.comentario}}</small></p>
58 <p class="text-white font-italic px-4" *ngIf="comanda.estado !== 1"><small>{{detalle.comentario}}</small></p> 58 <p class="text-white font-italic px-4" *ngIf="comanda.estado !== 1"><small>{{detalle.comentario}}</small></p>
59 </blockquote> 59 </blockquote>
60 </div> 60 </div>
61 <!-- BOTONES --> 61 <!-- BOTONES -->
62 <button 62 <button
63 *ngIf="comanda.estado === 1" 63 *ngIf="comanda.estado === 1"
64 class="btn btn-block btn-primary shadow-sm btn-elaborar" 64 class="btn btn-block btn-primary shadow-sm btn-elaborar"
65 (click)="updateComanda(comanda, 2, 'En elaboracion')"> 65 (click)="updateComanda(comanda, 2, 'En elaboracion')">
66 <div class="row justify-content-between"> 66 <div class="row justify-content-between">
67 <div></div> 67 <div></div>
68 <p class="ml-4" style="color: #fff;">Elaborar</p> 68 <p class="ml-4" style="color: #fff;">Elaborar</p>
69 <img 69 <img
70 draggable="false" 70 draggable="false"
71 ondragstart="return false;" 71 ondragstart="return false;"
72 (contextmenu)="false" 72 (contextmenu)="false"
73 class="icon-30 mr-2" 73 class="icon-30 mr-2"
74 src="assets/img/ir.svg"> 74 src="assets/img/ir.svg">
75 </div> 75 </div>
76 </button> 76 </button>
77 <button 77 <button
78 *ngIf="comanda.estado === 2" 78 *ngIf="comanda.estado === 2"
79 class="btn btn-block shadow-sm btn-terminar" 79 class="btn btn-block shadow-sm btn-terminar"
80 (click)="updateComanda(comanda, 3, 'Terminado')"> 80 (click)="updateComanda(comanda, 3, 'Terminado')">
81 <div class="row justify-content-between"> 81 <div class="row justify-content-between">
82 <div></div> 82 <div></div>
83 <p class="ml-4">Terminar</p> 83 <p class="ml-4">Terminar</p>
84 <img 84 <img
85 draggable="false" 85 draggable="false"
86 ondragstart="return false;" 86 ondragstart="return false;"
87 (contextmenu)="false" 87 (contextmenu)="false"
88 class="icon-30 mr-2" 88 class="icon-30 mr-2"
89 src="assets/img/flecha-borde-color.svg"> 89 src="assets/img/flecha-borde-color.svg">
90 </div> 90 </div>
91 </button> 91 </button>
92 <button 92 <button
93 *ngIf="comanda.estado === 2" 93 *ngIf="comanda.estado === 2"
94 class="btn btn-block btn-deshacer btn-sm shadow-sm p-0" 94 class="btn btn-block btn-deshacer btn-sm shadow-sm p-0"
95 (click)="updateComanda(comanda, 1, 'Pagado')"> 95 (click)="updateComanda(comanda, 1, 'Pagado')">
96 <div class="row justify-content-between"> 96 <div class="row justify-content-between">
97 <div></div> 97 <div></div>
98 <span class="h6 ml-4"><small>Deshacer</small></span> 98 <span class="h6 ml-4"><small>Deshacer</small></span>
99 <i class="fas fa-undo-alt text-info mr-4 my-auto"></i> 99 <i class="fas fa-undo-alt text-info mr-4 my-auto"></i>
100 </div> 100 </div>
101 </button> 101 </button>
102 </div> 102 </div>
103 <!-- TIMER DE ELABORACION --> 103 <!-- TIMER DE ELABORACION -->
104 <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2"> 104 <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2">
105 <div *ngIf="comanda.estado !== 1"> 105 <div *ngIf="comanda.estado !== 1">
106 <i class="fa fa-utensils text-info" aria-hidden="true"></i> 106 <i class="fa fa-utensils text-info" aria-hidden="true"></i>
107 </div> 107 </div>
108 <span *ngIf="comanda.estado === 1" class="text-dark"> 108 <span *ngIf="comanda.estado === 1" class="text-dark">
109 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} 109 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}}
110 </span> 110 </span>
111 <span *ngIf="comanda.estado !== 1" class="text-white"> 111 <span *ngIf="comanda.estado !== 1" class="text-white">
112 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} 112 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}}
113 </span> 113 </span>
114 <i class="fas fa-clock fa-spin text-info"></i> 114 <i class="fas fa-clock fa-spin text-info"></i>
115 </div> 115 </div>
116 </div> 116 </div>
117 </div> 117 </div>
118 </div> 118 </div>
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 122
src/app/modules/info-formas-pago/info-formas-pago.component.html
Diff comments   View file @ 81e1a8f
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-85"> 12 <div class="h-85">
13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> 13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
14 <div 14 <div
15 [routerLink]="['/opcion-pedido']" 15 [routerLink]="['/opcion-pedido']"
16 class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto 16 class="col-11 col-sm-10 col-md-7 p-5 m-5 h-auto
17 btn-effect align-self-end border border-secondary rounded reduce-card-1"> 17 btn-effect align-self-end border border-secondary rounded reduce-card-1">
18 <img 18 <img
19 draggable="false" 19 draggable="false"
20 ondragstart="return false;" 20 ondragstart="return false;"
21 (contextmenu)="false" 21 (contextmenu)="false"
22 class="img-in-top px-4 bg-white" 22 class="img-in-top px-4 bg-white"
23 src="assets/img/icono-tarjetas.svg"> 23 src="assets/img/icono-tarjetas.svg">
24 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> 24 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
25 <p class="h2 mb-3 text-secondary"> 25 <p class="h2 mb-3 text-secondary">
26 tarjetas y 26 tarjetas y
27 <img 27 <img
28 draggable="false" 28 draggable="false"
29 ondragstart="return false;" 29 ondragstart="return false;"
30 (contextmenu)="false" 30 (contextmenu)="false"
31 class="icon-150" 31 class="icon-150"
32 src="assets/img/icono-mercado-pago.svg"> 32 src="assets/img/icono-mercado-pago.svg">
33 </p> 33 </p>
34 <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"> 34 <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white">
35 CONTINUAR 35 CONTINUAR
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="icon-30" 40 class="icon-30"
41 src="assets/img/ir.svg"> 41 src="assets/img/ir.svg">
42 </div> 42 </div>
43 </div> 43 </div>
44 <div class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto align-self-center 44 <div
45 btn-effect border border-primary rounded reduce-card-2"> 45 class="col-11 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center
46 btn-effect border border-primary rounded reduce-card-2"
47 (click)="openGoCaja(templateGoCaja)">
46 <img 48 <img
47 draggable="false" 49 draggable="false"
48 ondragstart="return false;" 50 ondragstart="return false;"
49 (contextmenu)="false" 51 (contextmenu)="false"
50 class="img-in-top px-4 bg-white" 52 class="img-in-top px-4 bg-white"
51 src="assets/img/icono-efectivo.svg"> 53 src="assets/img/icono-efectivo.svg">
52 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 54 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
53 <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p> 55 <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p>
54 </div> 56 </div>
55 </div> 57 </div>
56 </div> 58 </div>
57 </div> 59 </div>
60
61 <ng-template #templateGoCaja>
62 <div class="bg-primary rounded shadow text-white">
63 <div class="modal-body text-center">
64 Por favor, hace tu pedido en la caja.
65 </div>
66 </div>
67 </ng-template>
58 68
src/app/modules/info-formas-pago/info-formas-pago.component.scss
Diff comments   View file @ 81e1a8f
1 .mt-6 { 1 .mt-6 {
2 margin-top: 4.5rem; 2 margin-top: 4.5rem;
3 } 3 }
4 4
5 .reduce-card-1.media-pantalla { 5 .reduce-card-1.media-pantalla {
6 position: absolute; 6 flex: 0 0 35% !important;
7 bottom: 0; 7 max-width: 35% !important;
8 -webkit-box-flex: 0;
9 flex: 0 0 41.6666666667%;
10 max-width: 41.6666666667%;
11 left: 5%;
12 margin-left: 0 !important;
13 } 8 }
14 9
15 .reduce-card-2.media-pantalla { 10 .reduce-card-2.media-pantalla {
16 position: absolute; 11 flex: 0 0 35% !important;
17 bottom: 0; 12 max-width: 35% !important;
18 -webkit-box-flex: 0;
19 flex: 0 0 41.6666666667%;
20 max-width: 41.6666666667%;
21 right: 5%;
22 margin-right: 0 !important;
23 height: 202px !important;
24 } 13 }
25 14
src/app/modules/info-formas-pago/info-formas-pago.component.ts
Diff comments   View file @ 81e1a8f
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
2 import { BsModalService } from 'ngx-bootstrap/modal';
2 3
3 @Component({ 4 @Component({
4 selector: 'app-formas-pago', 5 selector: 'app-formas-pago',
5 templateUrl: './info-formas-pago.component.html', 6 templateUrl: './info-formas-pago.component.html',
6 styleUrls: ['./info-formas-pago.component.scss'] 7 styleUrls: ['./info-formas-pago.component.scss']
7 }) 8 })
8 export class InfoFormasPagoComponent implements OnInit { 9 export class InfoFormasPagoComponent implements OnInit, OnDestroy {
9 mediaPantalla = false; 10 mediaPantalla = false;
11 timer: any;
10 12
11 constructor() { } 13 constructor(
14 private modalService: BsModalService,
15 ) { }
12 16
13 ngOnInit() { 17 ngOnInit() { }
14 this.reducirPantalla(); 18
19 ngOnDestroy() {
20 if (this.timer) clearTimeout(this.timer);
15 } 21 }
16 22
17 reducirPantalla() { 23 openGoCaja(templateRef: TemplateRef<any>) {
18 if ($('body').hasClass('media-pantalla')) { 24 const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-sm modal-dialog-centered' });
19 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); 25 this.timer = setTimeout(() => {
20 } 26 modalRef.hide();
27 }, 3000);
21 } 28 }
22 } 29 }
23 30
src/app/modules/opcion-pedido/opcion-pedido.component.html
Diff comments   View file @ 81e1a8f
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="h-10"></div>
13 <div class="row mt-5 mx-3 h-auto"> 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 <p class="h6 text-truncate text-center">TU PEDIDO ES PARA</p> 16 <p class="col-auto h4 text-truncate text-center">TU PEDIDO ES PARA</p>
16 </div> 17 </div>
17 </div> 18 </div>
18 <div class="row mt-5 h-auto justify-content-center mx-0"> 19 <div class="row mt-5 h-auto justify-content-center mx-0">
19 <div class="col-auto px-0 h-auto align-self-start reduce-card-1"> 20 <div class="col-5 px-0 h-auto align-self-start reduce-card-1">
20 <div 21 <div class="row justify-content-between">
21 class="btn-effect col-auto align-self-center px-0 bg-white" 22 <div class="col-12">
22 (click)="goTo('/seleccion-articulos'); seleccionPedido('false')"> 23 <div
23 <div class="row mx-0 bg-primary badge-pill"> 24 class="btn-effect col-12 px-0 bg-white"
24 <div class="col-auto p-0"> 25 (click)="goTo('/seleccion-articulos'); seleccionPedido('false')">
25 <img 26 <div class="row mx-0 bg-primary badge-pill">
26 draggable="false" 27 <div class="col-2 p-0">
27 ondragstart="return false;" 28 <img
28 (contextmenu)="false" 29 draggable="false"
29 class="p-1 icon-50" 30 ondragstart="return false;"
30 src="assets/img/icono-plato.svg"> 31 (contextmenu)="false"
31 </div> 32 class="p-1 icon-50"
32 <div class="col-auto align-self-center text-white">comer acá</div> 33 src="assets/img/icono-plato.svg">
33 <div class="col-auto align-self-center p-0"> 34 </div>
34 <img 35 <div class="col-8 align-self-center text-center text-white">comer acá</div>
35 draggable="false" 36 <div class="col-2 align-self-center p-0">
36 ondragstart="return false;" 37 <img
37 (contextmenu)="false" 38 draggable="false"
38 class="p-1 icon-30" 39 ondragstart="return false;"
39 src="assets/img/ir.svg"> 40 (contextmenu)="false"
41 class="p-1 icon-30"
42 src="assets/img/ir.svg">
43 </div>
44 </div>
40 </div> 45 </div>
41 </div> 46 </div>
42 </div> 47 </div>
43 </div> 48 </div>
44 </div> 49 </div>
45 <div class="row mt-4 h-auto justify-content-center mx-0"> 50 <div class="row mt-5 h-auto justify-content-center mx-0">
46 <div class="col-auto px-0 h-auto align-self-start reduce-card-2"> 51 <div class="col-5 px-0 h-auto align-self-start reduce-card-2">
47 <div 52 <div class="row justify-content-between">
48 class="btn-effect col-auto align-self-center px-0 bg-white" 53 <div class="col-12">
49 (click)="goTo('/seleccion-articulos'); seleccionPedido('true')"> 54 <div
50 <div class="row mx-0 bg-primary badge-pill"> 55 class="btn-effect col-12 align-self-center px-0 bg-white"
51 <div class="col-auto p-0"> 56 (click)="goTo('/seleccion-articulos'); seleccionPedido('true')">
52 <img 57 <div class="row mx-0 bg-primary badge-pill">
53 draggable="false" 58 <div class="col-2 p-0">
54 ondragstart="return false;" 59 <img
55 (contextmenu)="false" 60 draggable="false"
56 class="p-1 icon-50" 61 ondragstart="return false;"
57 src="assets/img/icono-take-away.svg"> 62 (contextmenu)="false"
58 </div> 63 class="p-1 icon-50"
59 <div class="col-auto align-self-center text-white">para llevar</div> 64 src="assets/img/icono-take-away.svg">
60 <div class="col-auto align-self-center p-0"> 65 </div>
61 <img 66 <div class="col-8 align-self-center text-center text-white">para llevar</div>
62 draggable="false" 67 <div class="col-2 align-self-center p-0">
63 ondragstart="return false;" 68 <img
64 (contextmenu)="false" 69 draggable="false"
65 class="p-1 icon-30" 70 ondragstart="return false;"
66 src="assets/img/ir.svg"> 71 (contextmenu)="false"
72 class="p-1 icon-30"
73 src="assets/img/ir.svg">
74 </div>
75 </div>
67 </div> 76 </div>
68 </div> 77 </div>
69 </div> 78 </div>
70 </div> 79 </div>
71 </div> 80 </div>
72 </div> 81 </div>
73 </div> 82 </div>
74 83
src/app/modules/opcion-pedido/opcion-pedido.component.ts
Diff comments   View file @ 81e1a8f
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.reducirPantalla();
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 === 'true' ? lugar = 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 reducirPantalla() {
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/pedidos-salientes/pedidos-salientes.component.html
Diff comments   View file @ 81e1a8f
1 <div class="row mt-2 justify-content-center h-15"> 1 <div class="row mt-2 justify-content-center h-15">
2 <div class="col-3 col-lg-2"> 2 <div class="col-3 col-lg-2">
3 <img 3 <img
4 draggable="false" 4 draggable="false"
5 ondragstart="return false;" 5 ondragstart="return false;"
6 (contextmenu)="false" 6 (contextmenu)="false"
7 class="w-60 h-auto d-block mx-auto" 7 class="w-60 h-auto d-block mx-auto"
8 src="../../../assets/img/logo-spot.svg"> 8 src="../../../assets/img/logo-spot.svg">
9 </div> 9 </div>
10 </div> 10 </div>
11 <div class="row mt-n5 mx-0 justify-content-around h-75"> 11 <div class="row mt-n5 mx-0 justify-content-around h-75">
12 <div class="col-5 col-md-6 col-lg-3 h-100"> 12 <div class="col-5 col-md-6 col-lg-4 h-100">
13 <div class="p-3 bg-white text-center shadow-lg rounded h-100"> 13 <div class="p-3 bg-white text-center shadow-lg rounded h-100">
14 <h5 class="pt-3">ESTAMOS</h5> 14 <h5 class="pt-3">ESTAMOS</h5>
15 <h3 class="font-weight-bold text-secondary">preparando</h3> 15 <h3 class="font-weight-bold text-secondary">preparando</h3>
16 <h5>TU PEDIDO</h5> 16 <h5>TU PEDIDO</h5>
17 <div 17 <div
18 *ngFor="let pedido of pedidosPendientes; let i = index" 18 *ngFor="let pedido of pedidosPendientes; let i = index"
19 [hidden]="i > 3" 19 [hidden]="i > 3"
20 class="font-weight-bold mb-2 text-muted"> 20 class="font-weight-bold mb-2 text-muted">
21 <h1 class="display-4">{{rellenar(pedido.id.toString().slice(1), 3)}}</h1> 21 <h1 class="display-4">{{rellenar(pedido.id.toString().slice(0), 3)}}</h1>
22 </div> 22 </div>
23 </div> 23 </div>
24 </div> 24 </div>
25 <div class="col-5 col-md-6 col-lg-3 h-100"> 25 <div class="col-5 col-md-6 col-lg-4 h-100">
26 <div class="p-3 bg-white shadow-lg rounded text-center h-100"> 26 <div class="p-3 bg-white shadow-lg rounded text-center h-100">
27 <h5 class="pt-3">LISTO PARA</h5> 27 <h5 class="pt-3">LISTO PARA</h5>
28 <h3 class="font-weight-bold text-primary">retirar</h3> 28 <h3 class="font-weight-bold text-primary">retirar</h3>
29 <div *ngIf="pedidoFinalizado.length"> 29 <div *ngIf="pedidoFinalizado.length">
30 <h1 class="display-1 mt-4 text-primary mb-0">{{rellenar(pedidoFinalizado[0].id.toString().slice(1), 3)}}</h1> 30 <h1 class="display-1 mt-4 text-primary mb-0">{{rellenar(pedidoFinalizado[0].id.toString().slice(0), 3)}}</h1>
31 <hr class="line mt-0"> 31 <hr class="line mt-0">
32 </div> 32 </div>
33 <h3 class="font-weight-bold text-info mt-4">¡Que lo disfrutes!</h3> 33 <h3 class="font-weight-bold text-info mt-4">¡Que lo disfrutes!</h3>
34 </div> 34 </div>
35 </div> 35 </div>
36 </div> 36 </div>
37 37
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.html
Diff comments   View file @ 81e1a8f
File was created 1 <!-- FILTRO CATEGORIAS -->
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">
4 <div class="col-auto btn-effect h-5 cat-btn">
5 <img
6 draggable="false"
7 ondragstart="return false;"
8 (contextmenu)="false"
9 class="h-100 d-block mx-auto rotate-90-neg"
10 src="assets/img/ir-color.svg"
11 (mousedown)="scrollY(templateCategorias, -100)"
12 (mouseup)="mouseup()"
13 (mouseleave)="mouseup()">
14 </div>
15 <!-- CATEGORIAS -->
16 <div
17 #templateCategorias
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"
20 (scroll)="scrollEvent($event)">
21 <div
22 class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
23 [ngClass]="{ 'active rounded shadow px-2': allActive, 'border-bottom-effect': !allActive }"
24 (click)="selectCategoria(-1, 0)">
25 <img
26 draggable="false"
27 ondragstart="return false;"
28 (contextmenu)="false"
29 class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
30 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 </div>
33 <div
34 class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
35 [ngClass]="{ 'active rounded shadow px-2': categoria.selected, 'border-bottom-effect': !categoria.selected }"
36 (click)="selectCategoria(i, categoria.id)"
37 *ngFor="let categoria of categorias; let i = index;">
38 <img
39 draggable="false"
40 ondragstart="return false;"
41 (contextmenu)="false"
42 class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
43 src="{{urlImagenes}}{{categoria.path_imagen}}"
44 onerror="this.src='assets/img/image-not-found.jpg'">
45 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
46 </div>
47 </div>
48 <div class="col-auto btn-effect h-5 cat-btn">
49 <img
50 draggable="false"
51 ondragstart="return false;"
52 (contextmenu)="false"
53 class="h-100 d-block mx-auto rotate-90"
54 src="assets/img/ir-color.svg"
55 (mousedown)="scrollY(templateCategorias, 100)"
56 (mouseup)="mouseup()"
57 (mouseleave)="mouseup()">
58 </div>
59 </div>
60
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.scss
Diff comments   View file @ 81e1a8f
File was created 1 $primary: #aa006b;
2
3 .box-categorias {
4 height: calc(100% - 100px) !important;
5 }
6
7 .active {
8 transition: 0.3s;
9 background-color: white;
10 border-bottom: 3px solid $primary !important;
11 border-top: 3px solid $primary !important;
12 border-left: 3px solid $primary !important;
13 border-right: 3px solid $primary !important;
14 }
15
16 .border-bottom-effect {
17 border: none;
18 position: relative;
19 &:hover {
20 border: none;
21 }
22 &::after {
23 content: "";
24 position: absolute;
25 width: 0px;
26 height: 3px;
27 left: 50%;
28 bottom: 0;
29 background-color: $primary;
30 transition: all ease-in-out 0.2s;
31 }
32 &:hover::after {
33 width: 100%;
34 left: 0;
35 }
36 }
37
38 .cat-content.media-pantalla {
39 margin: 0.5rem 0.7rem !important;
40 height: 76% !important;
41 }
42
43 .cat-box.media-pantalla {
44 height: calc(100% - 85px) !important;
45 }
46
47 .cat-btn.media-pantalla {
48 height: 7% !important;
49 }
50
51 #content.media-pantalla,
52 #boxCarrito.media-pantalla {
53 max-height: 60% !important;
54 }
55
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.spec.ts
Diff comments   View file @ 81e1a8f
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { FiltroCategoriasComponent } from './filtro-categorias.component';
4
5 describe('FiltroCategoriasComponent', () => {
6 let component: FiltroCategoriasComponent;
7 let fixture: ComponentFixture<FiltroCategoriasComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ FiltroCategoriasComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(FiltroCategoriasComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
Diff comments   View file @ 81e1a8f
File was created 1 import { Component, OnInit, Input, HostListener, Output, EventEmitter } from '@angular/core';
2 import { ICategoria } from 'src/app/interfaces/ICategoria';
3 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
4 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6
7 @Component({
8 selector: 'app-filtro-categorias',
9 templateUrl: './filtro-categorias.component.html',
10 styleUrls: ['./filtro-categorias.component.scss']
11 })
12 export class FiltroCategoriasComponent implements OnInit {
13 @Output() getProductos = new EventEmitter<any>();
14 @Output() setProductos = new EventEmitter<any>();
15 @Output() filterItems = new EventEmitter<any>();
16 categorias: ICategoria[] = [];
17 timeoutHandler: any;
18 categoriaActive = null;
19 allActive = true;
20 queMostrar = 'todos';
21 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
22
23 constructor(
24 private categoriaService: CategoriaService,
25 private inactiveScreen: InactiveScreenService,
26 ) { }
27
28 ngOnInit() { }
29
30 getCategorias() {
31 this.categoriaService.getAll()
32 .subscribe((categorias: ICategoria[]) => {
33 switch (this.queMostrar) {
34 case 'todos':
35 this.categorias = categorias;
36 this.categoriaActive = 0;
37 break;
38 case 'promociones':
39 this.categorias = categorias;
40 this.categoriaActive = 19;
41 break;
42 case 'ordenar':
43 this.categorias = categorias.filter((categoria: ICategoria) => {
44 return categoria.ES_PEDIDO;
45 });
46 this.categoriaActive = 4;
47 break;
48 default:
49 this.categorias = categorias;
50 this.categoriaActive = 0;
51 break;
52 }
53 !localStorage.getItem('articulos') ?
54 this.getProductos.emit() :
55 this.setProductos.emit();
56 });
57 }
58
59 selectCategoria(index: number, idCategoria?: number) {
60 if (this.categoriaActive === idCategoria) return;
61 this.categoriaActive = idCategoria;
62 this.allActive = idCategoria === 0 ? true : false;
63 this.categorias.forEach((categoria, i) => {
64 categoria.selected = index === i ? true : false;
65 });
66 this.filterItems.emit();
67 }
68
69 @HostListener('scroll', ['$event'])
70 scrollEvent(event: Event) {
71 clearTimeout(this.inactiveScreen.timerReposo);
72 this.inactiveScreen.startTimeOutInactividad();
73 }
74
75 mouseup() {
76 if (!this.timeoutHandler) return;
77 clearInterval(this.timeoutHandler);
78 }
79
80 scrollY(el: HTMLElement, value) {
81 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
82 this.timeoutHandler = setInterval(() => {
83 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
84 }, 500);
85 }
86 }
87
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 81e1a8f
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 <!-- FILTRO CATEGORIAS --> 18 <app-filtro-categorias
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 class="col-5 col-sm-3 col-xl-2 h-100"
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 #filtroCategorias
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 (getProductos)="getProductos()"
22 <div class="col-auto btn-effect h-5 cat-btn"> 22 (setProductos)="setProductos()"
23 <img 23 (filterItems)="filterItems()">
24 draggable="false" 24 </app-filtro-categorias>
25 ondragstart="return false;"
26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()">
32 </div>
33 <!-- CATEGORIAS -->
34 <div
35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary
37 border-left-0 rounded-right scroll-y cat-box"
38 (scroll)="scrollEvent($event)">
39 <div
40 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
41 [ngClass]="{ 'active rounded-sm shadow': allActive, 'border-bottom-effect': !allActive,
42 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
43 (click)="selectCategoria(-1, 0)">
44 <img
45 draggable="false"
46 ondragstart="return false;"
47 (contextmenu)="false"
48 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
49 src="assets/img/logo-spot.svg">
50 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
51 </div>
52 <div
53 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
54 [ngClass]="{ 'active rounded-sm shadow': categoria.selected, 'border-bottom-effect': !categoria.selected,
55 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
56 (click)="selectCategoria(i, categoria.id)"
57 *ngFor="let categoria of categorias; let i = index;">
58 <img
59 draggable="false"
60 ondragstart="return false;"
61 (contextmenu)="false"
62 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria"
63 [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"
64 src="{{urlImagenes}}{{categoria.path_imagen}}"
65 onerror="this.src='assets/img/image-not-found.jpg'">
66 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
67 </div>
68 </div>
69 <div class="col-auto btn-effect h-5 cat-btn">
70 <img
71 draggable="false"
72 ondragstart="return false;"
73 (contextmenu)="false"
74 class="h-100 d-block mx-auto rotate-90"
75 src="assets/img/ir-color.svg"
76 (mousedown)="scrollY(templateCategorias, 100)"
77 (mouseup)="mouseup()"
78 (mouseleave)="mouseup()">
79 </div>
80 </div>
81 </div>
82 <!-- LISTA DE ARTICULOS --> 25 <!-- LISTA DE ARTICULOS -->
83 <div 26 <div
84 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"
85 (scroll)="scrollEvent($event)"> 28 (scroll)="scrollEvent($event)">
86 <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">
87 <!-- ARTICULO --> 30 <!-- ARTICULO -->
88 <div 31 <div
89 class="col px-2 my-1 my-md-3 h-auto" 32 class="col px-2 my-1 my-md-3 h-auto"
90 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 33 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
91 <div 34 <div
92 class="swing-in-top-fwd btn-effect card h-auto" 35 class="swing-in-top-fwd btn-effect card h-auto"
93 (click)="selectArticulo(articulo)"> 36 (click)="selectArticulo(articulo)">
94 <img 37 <img
95 draggable="false" 38 draggable="false"
96 ondragstart="return false;" 39 ondragstart="return false;"
97 (contextmenu)="false" 40 (contextmenu)="false"
98 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 41 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
99 onerror="this.src='assets/img/image-not-found.jpg'" 42 onerror="this.src='assets/img/image-not-found.jpg'"
100 class="card-img-top h-30 h-md-55 rounded-sm"> 43 class="card-img-top h-30 h-md-55 rounded-sm">
101 <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">
102 <p 45 <p
103 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 46 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
104 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">
105 {{articulo.DetArt | uppercase}} 48 {{articulo.DetArt | uppercase}}
106 </p> 49 </p>
107 <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">
108 <small>{{articulo.DET_LAR}}</small> 51 <small>{{articulo.DET_LAR}}</small>
109 </p> 52 </p>
110 <div class="col-12 px-1 align-self-end h-auto"> 53 <div class="col-12 px-1 align-self-end h-auto">
111 <div 54 <div
112 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 55 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
113 class="row mx-0 justify-content-between badge-pill"> 56 class="row mx-0 justify-content-between badge-pill">
114 <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">
115 {{articulo.PreVen | currency}} 58 {{articulo.PreVen | currency}}
116 </div> 59 </div>
117 <div class="col-5 px-0"> 60 <div class="col-5 px-0">
118 <img 61 <img
119 draggable="false" 62 draggable="false"
120 ondragstart="return false;" 63 ondragstart="return false;"
121 (contextmenu)="false" 64 (contextmenu)="false"
122 class="d-block ml-auto py-1 icon-30" 65 class="d-block ml-auto py-1 icon-30"
123 src="assets/img/ir.svg"> 66 src="assets/img/ir.svg">
124 </div> 67 </div>
125 </div> 68 </div>
126 </div> 69 </div>
127 </div> 70 </div>
128 </div> 71 </div>
129 </div> 72 </div>
130 </div> 73 </div>
131 <!-- BOTON VER MAS --> 74 <!-- BOTON VER MAS -->
132 <div class="row mx-0"> 75 <div class="row mx-0">
133 <div 76 <div
134 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 77 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
135 class="col-12 px-0 mb-2"> 78 class="col-12 px-0 mb-2">
136 <button 79 <button
137 (click)="increaseShow()" 80 (click)="increaseShow()"
138 class="btn btn-block btn-outline-primary"> 81 class="btn btn-block btn-outline-primary">
139 Ver Más 82 Ver Más
140 </button> 83 </button>
141 </div> 84 </div>
142 </div> 85 </div>
143 </div> 86 </div>
144 </div> 87 </div>
145 </div> 88 </div>
146 </div> 89 </div>
147 <!-- FOOTER CARRITO DE COMPRAS --> 90 <!-- FOOTER CARRITO DE COMPRAS -->
148 <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">
149 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 92 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
150 [ngClass]="boxCarrito.classList.contains('media-pantalla') 93 [ngClass]="boxCarrito.classList.contains('media-pantalla')
151 ? 'col-8' : 'col-12'" id="boxCarrito"> 94 ? 'col-8' : 'col-12'" id="boxCarrito">
152 <!-- CABECERA --> 95 <!-- CABECERA -->
153 <div class="row mx-0 h-15 border-bottom border-primary"> 96 <div class="row mx-0 h-15 border-bottom border-primary">
154 <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>
155 </div> 98 </div>
156 <!-- CUERPO --> 99 <!-- CUERPO -->
157 <div class="row h-85 mx-0 justify-content-around"> 100 <div class="row h-85 mx-0 justify-content-around">
158 <!-- BOTON SCROLL IZQUIERDA --> 101 <!-- BOTON SCROLL IZQUIERDA -->
159 <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">
160 <img 103 <img
161 draggable="false" 104 draggable="false"
162 ondragstart="return false;" 105 ondragstart="return false;"
163 (contextmenu)="false" 106 (contextmenu)="false"
164 class="icon-30 rotate-180-neg" 107 class="icon-30 rotate-180-neg"
165 src="assets/img/ir-fondo-color.svg" 108 src="assets/img/ir-fondo-color.svg"
166 (mousedown)="scrollX(templateCarrito, -100)" 109 (mousedown)="scrollX(templateCarrito, -100)"
167 (mouseup)="mouseup()" 110 (mouseup)="mouseup()"
168 (mouseleave)="mouseup()"> 111 (mouseleave)="mouseup()">
169 </div> 112 </div>
170 <!-- CARRITO --> 113 <!-- CARRITO -->
171 <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">
172 <div 115 <div
173 #templateCarrito
174 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
175 (scroll)="scrollEvent($event)">
176 <!-- MENSAJE DE ADVERTENCIA -->
177 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 116 #templateCarrito
178 <p class="text-center py-5">No hay articulos en el carrito</p> 117 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
179 </div> 118 (scroll)="scrollEvent($event)">
180 <!-- ARTICULOS --> 119 <!-- ARTICULOS -->
181 <div 120 <div
182 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"
183 *ngFor="let articulo of articuloService.carrito; let i = index;"> 122 *ngFor="let articulo of articuloService.carrito; let i = index;"
184 <div class="swing-in-top-fwd"> 123 @EnterLeave>
185 <img 124 <img
186 class="btn-effect icon-20 position-absolute right-0" 125 class="btn-effect icon-20 mr-2 position-absolute right-0"
187 src="assets/img/icono-cancelar-color.svg" 126 src="assets/img/icono-cancelar-color.svg"
188 (click)="deleteArticulo(i)"> 127 (click)="deleteArticulo(i)">
189 <img 128 <img
190 draggable="false" 129 draggable="false"
191 ondragstart="return false;" 130 ondragstart="return false;"
192 (contextmenu)="false" 131 (contextmenu)="false"
193 class="d-block img-fluid p-2 mx-auto rounded" 132 class="d-block img-fluid p-2 mx-auto rounded"
194 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 133 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
195 onerror="this.src='assets/img/image-not-found.jpg'"> 134 onerror="this.src='assets/img/image-not-found.jpg'">
196 <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>
137 </p>
138 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
139 </div>
197 <small>{{articulo.DetArt | uppercase}}</small> 140 <!-- MENSAJE DE ADVERTENCIA -->
198 </p> 141 <div *ngIf="!articuloService.carrito.length" class="col h-100">
199 </div> 142 <p class="text-center py-5">No hay articulos en el carrito</p>
200 </div> 143 </div>
201 </div> 144 </div>
202 </div> 145 </div>
203 <!-- BOTON SCROLL DERECHA --> 146 <!-- BOTON SCROLL DERECHA -->
204 <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 h-20 align-self-center">
205 <img 148 <img
206 draggable="false" 149 draggable="false"
207 ondragstart="return false;" 150 ondragstart="return false;"
208 (contextmenu)="false" 151 (contextmenu)="false"
209 class="icon-30" 152 class="icon-30"
210 src="assets/img/ir-fondo-color.svg" 153 src="assets/img/ir-fondo-color.svg"
211 (mousedown)="scrollX(templateCarrito, 100)" 154 (mousedown)="scrollX(templateCarrito, 100)"
212 (mouseup)="mouseup()" 155 (mouseup)="mouseup()"
213 (mouseleave)="mouseup()"> 156 (mouseleave)="mouseup()">
214 </div> 157 </div>
215 </div> 158 </div>
216 </div> 159 </div>
217 <!-- TOTAL--> 160 <!-- TOTAL-->
218 <div 161 <div
219 class="col-auto mt-2 ml-auto h-20"> 162 class="col-auto mt-2 ml-auto h-20">
220 <div class="row mx-0"> 163 <div class="row mx-0">
221 <div class="col-auto align-self-center text-primary">TOTAL</div> 164 <div class="col-auto align-self-center text-primary">TOTAL</div>
222 <div class="col-auto bg-primary badge-pill"> 165 <div class="col-auto bg-primary badge-pill">
223 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 166 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
224 </div> 167 </div>
225 </div> 168 </div>
226 </div> 169 </div>
227 170
228 <!-- VER CARRITO --> 171 <!-- VER CARRITO -->
229 <div 172 <div
230 class="col-auto px-0 mt-2 h-20" 173 class="col-auto px-0 mt-2 h-20"
231 *ngIf="articuloService.carrito.length" 174 *ngIf="articuloService.carrito.length"
232 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 175 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
233 <div 176 <div
234 class="btn-effect col-auto px-0 align-self-center bg-white" 177 class="btn-effect col-auto px-0 align-self-center bg-white"
235 [routerLink]="['/carrito']"> 178 [routerLink]="['/carrito']">
236 <div class="row mx-0 bg-light"> 179 <div class="row mx-0 bg-light">
237 <div class="col-auto p-0 bg-primary"> 180 <div class="col-auto p-0 bg-primary">
238 <img 181 <img
239 draggable="false" 182 draggable="false"
240 ondragstart="return false;" 183 ondragstart="return false;"
241 (contextmenu)="false" 184 (contextmenu)="false"
242 class="p-2 icon-40" 185 class="p-2 icon-40"
243 src="assets/img/carrito.svg"> 186 src="assets/img/carrito.svg">
244 </div> 187 </div>
245 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 188 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
246 </div> 189 </div>
247 </div> 190 </div>
248 </div> 191 </div>
249 192
250 </div> 193 </div>
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ 81e1a8f
1 $primary: #aa006b; 1 #content.media-pantalla,
2 2 #boxCarrito.media-pantalla {
3 .box-categorias {
4 height: calc(100% - 100px) !important;
5 }
6
7 .active {
8 background-color: white;
9 border-bottom: 3px solid $primary !important;
10 border-top: 3px solid $primary !important;
11 border-left: 3px solid $primary !important;
12 border-right: 3px solid $primary !important;
13 }
14
15 .border-bottom-effect {
16 border: none;
17 position: relative;
18 &:hover {
19 border: none;
20 }
21 &::after {
22 content: "";
23 position: absolute;
24 width: 0px;
25 height: 3px;
26 left: 50%;
27 bottom: 0;
28 background-color: $primary;
29 transition: all ease-in-out 0.2s;
30 }
31 &:hover::after {
32 width: 100%;
33 left: 0;
34 }
35 }
36
37 .card {
38 border: none;
39 }
40
41 .line-height-sm {
42 line-height: 1.2;
43 }
44
45 #content.media-pantalla,#boxCarrito.media-pantalla {
46 max-height: 60% !important; 3 max-height: 60% !important;
47 } 4 }
48
49 .cat-content.media-pantalla {
50 margin: 0.5rem 0.7rem !important;
51 height: 76% !important;
52 }
53
54 .cat-box.media-pantalla{
55 height: calc(100% - 85px) !important;
56 }
57
58 .cat-btn.media-pantalla {
59 height: 7% !important;
60 }
61
62 .img-categoria.media-pantalla{
63 min-height: 40px !important;
64 }
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 81e1a8f
1 import { Component, OnInit, OnDestroy, HostListener } 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';
14 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
13 15
14 @Component({ 16 @Component({
15 selector: 'app-seleccion-articulos', 17 selector: 'app-seleccion-articulos',
16 templateUrl: './seleccion-articulos.component.html', 18 templateUrl: './seleccion-articulos.component.html',
17 styleUrls: ['./seleccion-articulos.component.scss'] 19 styleUrls: ['./seleccion-articulos.component.scss'],
20 animations: [
21 trigger('EnterLeave', [
22 state('flyIn', style({ transform: 'translateY(0)' })),
23 transition(':enter', [
24 style({ transform: 'translateY(-100%)' }),
25 animate('0.5s ease-in')
26 ]),
27 transition(':leave', [
28 animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
29 ])
30 ])
31 ]
18 }) 32 })
19 export class SeleccionArticulosComponent implements OnInit, OnDestroy { 33 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
20 showSpinner = true; 34 showSpinner = true;
21 timeoutHandler: any; 35 timeoutHandler: any;
22 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 36 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
23 articulos: IArticulo[] = []; 37 articulos: IArticulo[] = [];
24 auxArticulos: IArticulo[] = []; 38 auxArticulos: IArticulo[] = [];
25 showQuantity = 100; 39 showQuantity = 100;
26 queMostrar = 'todos';
27 categoriaActive = null;
28 categorias: ICategoria[] = [];
29 searchTerm = ''; 40 searchTerm = '';
30 ordenandoByVendidos = true; 41 ordenandoByVendidos = true;
31 allActive = true;
32 modalRef: BsModalRef; 42 modalRef: BsModalRef;
33 total = 0; 43 total = 0;
44 @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
34 modalClass = ''; 45
35 46 constructor(
36 constructor( 47 public articuloService: ArticuloService,
37 public articuloService: ArticuloService, 48 private categoriaService: CategoriaService,
38 private categoriaService: CategoriaService, 49 private sinonimoService: SinonimoService,
39 private sinonimoService: SinonimoService, 50 private modalService: BsModalService,
40 private modalService: BsModalService, 51 private inactiveScreen: InactiveScreenService,
41 private inactiveScreen: InactiveScreenService, 52 ) { }
42 ) { } 53
43 54 ngOnInit() { }
44 ngOnInit() { 55
56 ngAfterViewInit(): void {
57 this.filtroCategorias.getCategorias();
45 this.getCategorias(); 58 this.mediaPantalla();
46 this.mediaPantalla(); 59 }
47 } 60
48 61 ngOnDestroy() {
49 ngOnDestroy() { 62 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
50 for (let i = 1; i <= this.modalService.getModalsCount(); i++) { 63 this.modalService.hide(i);
51 this.modalService.hide(i); 64 }
52 } 65 }
53 } 66
54
55 getCategorias() {
56 this.categoriaService.getAll()
57 .subscribe((categorias: ICategoria[]) => {
58 switch (this.queMostrar) {
59 case 'todos':
60 this.categorias = categorias;
61 this.categoriaActive = 0;
62 break;
63 case 'promociones':
64 this.categorias = categorias;
65 this.categoriaActive = 19;
66 break;
67 case 'ordenar':
68 this.categorias = categorias.filter((categoria: ICategoria) => {
69 return categoria.ES_PEDIDO;
70 });
71 this.categoriaActive = 4;
72 break;
73 default:
74 this.categorias = categorias;
75 this.categoriaActive = 0;
76 break;
77 }
78 !localStorage.getItem('articulos') ?
79 this.getProductos() :
80 this.setProductos();
81 });
82 }
83 67 getProductos() {
84 getProductos() { 68 this.articuloService.getAll()
85 this.articuloService.getAll() 69 .subscribe((result: IArticulo[]) => {
86 .subscribe((result: IArticulo[]) => { 70 this.articuloService.setArticulosSinImagen(result);
87 this.articuloService.setArticulosSinImagen(result); 71 if (this.filtroCategorias.queMostrar === 'ordenar') {
88 if (this.queMostrar === 'ordenar') { 72 this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {
89 this.categorias.forEach((categoria: ICategoria) => { 73 const tempArticulos = result.filter((articulo: IArticulo) => {
90 const tempArticulos = result.filter((articulo: IArticulo) => { 74 return articulo.categoria_selfservice === categoria.id;
91 return articulo.categoria_selfservice === categoria.id; 75 });
92 }); 76 result = tempArticulos;
93 result = tempArticulos; 77 });
94 }); 78 }
95 } 79 localStorage.setItem('articulos', JSON.stringify(result));
96 localStorage.setItem('articulos', JSON.stringify(result)); 80 this.setProductos();
97 this.setProductos(); 81 }, (error) => {
98 }, (error) => { 82 this.showSpinner = false;
99 this.showSpinner = false; 83 console.error(error);
100 console.error(error); 84 });
101 }); 85 }
102 } 86
103 87 setProductos() {
104 setProductos() { 88 this.articulos = JSON.parse(localStorage.getItem('articulos'));
105 this.articulos = JSON.parse(localStorage.getItem('articulos')); 89 this.filterItems();
106 this.filterItems(); 90 }
107 } 91
108 92 filterItems() {
109 filterItems() { 93 if (this.filtroCategorias.categoriaActive === 0) {
110 if (this.categoriaActive === 0) { 94 this.auxArticulos = this.articulos;
111 this.auxArticulos = this.articulos; 95 return;
112 return; 96 }
113 } 97 this.auxArticulos = this.articulos.filter(x => {
114 this.auxArticulos = this.articulos.filter(x => { 98 return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
115 return x.categoria_selfservice === this.categoriaActive; 99 });
116 }); 100 this.ordenar();
117 this.ordenar(); 101 }
118 } 102
119 103 ordenar() {
120 ordenar() { 104 if (this.ordenandoByVendidos) {
121 if (this.ordenandoByVendidos) { 105 this.auxArticulos.sort((a, b) => {
122 this.auxArticulos.sort((a, b) => { 106 return b.cantidadVendida - a.cantidadVendida;
123 return b.cantidadVendida - a.cantidadVendida; 107 });
124 }); 108 }
125 } 109 }
126 } 110
127
128 selectCategoria(index: number, idCategoria?: number) {
129 if (this.categoriaActive === idCategoria) return;
130 this.categoriaActive = idCategoria;
131 this.allActive = idCategoria === 0 ? true : false;
132 this.categorias.forEach((categoria, i) => {
133 categoria.selected = index === i ? true : false;
134 });
135 this.filterItems();
136 }
137 111 selectArticulo(articulo: IArticulo) {
138 selectArticulo(articulo: IArticulo) { 112 this.getByID(articulo.id);
139 this.getByID(articulo.id); 113 }
140 } 114
141 115 getByID(id: number) {
142 getByID(id: number) { 116 this.articuloService.getById(id)
143 this.articuloService.getById(id) 117 .subscribe((res: IArticulo) => {
144 .subscribe((res: IArticulo) => { 118 if (res.FPP) {
145 if (res.FPP) { 119 this.openModalPromos(res);
146 this.openModalPromos(res); 120 } else {
147 } else { 121 this.getSinonimos(res);
148 this.getSinonimos(res); 122 }
149 } 123 }, err => console.error(err));
150 }, err => console.error(err)); 124 }
151 } 125
152 126 getSinonimos(articulo: IArticulo) {
153 getSinonimos(articulo: IArticulo) { 127 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
154 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) 128 .subscribe((res: ISinonimo[]) => {
155 .subscribe((res: ISinonimo[]) => { 129 if (res.length) {
156 if (res.length) { 130 this.openModalSinonimos(res, articulo);
157 this.openModalSinonimos(res, articulo); 131 } else {
158 } else { 132 this.articuloService.setArticulo(articulo);
159 this.articuloService.setArticulo(articulo); 133 }
160 } 134 });
161 }); 135 }
162 } 136
163 137 openModalPromos(articulo: IArticulo) {
164 openModalPromos(articulo: IArticulo) { 138 this.modalRef = this.modalService.show(PromocionComponent, {
165 this.modalRef = this.modalService.show(PromocionComponent, { 139 initialState: { articulosPromo: [articulo] },
166 initialState: { articulosPromo: [articulo] }, 140 class: 'modal-promo modal-dialog-centered'
167 class: 'modal-promo modal-dialog-centered' 141 });
168 }); 142 }
169 } 143
170 144 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
171 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 145 this.modalRef = this.modalService.show(SinonimoComponent, {
172 this.modalRef = this.modalService.show(SinonimoComponent, { 146 initialState: { sinonimos: sinonimosData },
173 initialState: { sinonimos: sinonimosData }, 147 class: 'modal-promo modal-dialog-centered'
174 class: 'modal-promo modal-dialog-centered' 148 });
175 }); 149
176 150 this.modalRef.content.onClose
177 this.modalRef.content.onClose 151 .subscribe((res: any) => {
178 .subscribe((res: any) => { 152 for (const a of articulo.productos) {
179 for (const a of articulo.productos) { 153 if (a.idSinonimo === res.ID_SIN) {
180 if (a.idSinonimo === res.ID_SIN) { 154 a.CODA = res.articulo.CodArt;
181 a.CODA = res.articulo.CodArt; 155 a.CodArt = res.articulo.CodArt;
182 a.CodArt = res.articulo.CodArt; 156 a.SECA = res.articulo.CodSec;
183 a.SECA = res.articulo.CodSec; 157 a.CodSec = res.articulo.CodSec;
184 a.CodSec = res.articulo.CodSec; 158 a.PreVen = res.articulo.PreVen;
185 a.PreVen = res.articulo.PreVen; 159 a.id = res.articulo.id;
186 a.id = res.articulo.id; 160 a.DET_LAR = res.articulo.DET_LAR;
187 a.DET_LAR = res.articulo.DET_LAR; 161 a.DetArt = res.articulo.DetArt;
188 a.DetArt = res.articulo.DetArt; 162 }
189 } 163 }
190 } 164 this.articuloService.setArticulo(articulo);
191 this.articuloService.setArticulo(articulo); 165 });
192 }); 166 }
193 } 167
194 168 deleteArticulo(index: number) {
195 deleteArticulo(index: number) { 169 this.articuloService.deleteArticulo(index);
196 this.articuloService.deleteArticulo(index); 170 }
197 } 171
198 172 increaseShow() {
199 increaseShow() { 173 this.showQuantity += 100;
200 this.showQuantity += 100; 174 }
201 } 175
202 176 @HostListener('scroll', ['$event'])
203 @HostListener('scroll', ['$event']) 177 scrollEvent(event: Event) {
204 scrollEvent(event: Event) { 178 clearTimeout(this.inactiveScreen.timerReposo);
205 clearTimeout(this.inactiveScreen.timerReposo); 179 this.inactiveScreen.startTimeOutInactividad();
206 this.inactiveScreen.startTimeOutInactividad(); 180 }
207 } 181
208 182 mouseup() {
209 mouseup() { 183 if (!this.timeoutHandler) return;
210 if (!this.timeoutHandler) return; 184 clearInterval(this.timeoutHandler);
211 clearInterval(this.timeoutHandler); 185 }
212 } 186
213 187 scrollY(el: HTMLElement, value) {
214 scrollY(el: HTMLElement, value) { 188 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
215 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 189 this.timeoutHandler = setInterval(() => {
216 this.timeoutHandler = setInterval(() => { 190 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
217 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 191 }, 500);
218 }, 500); 192 }
219 } 193
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 81e1a8f
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { CommonModule } from '@angular/common'; 2 import { CommonModule } from '@angular/common';
3 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module'; 3 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module';
4 import { SeleccionArticulosComponent } from './seleccion-articulos.component'; 4 import { SeleccionArticulosComponent } from './seleccion-articulos.component';
5 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component'; 5 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component';
6 import { ModalModule } from 'ngx-bootstrap/modal'; 6 import { ModalModule } from 'ngx-bootstrap/modal';
7 import { CarouselModule } from 'ngx-bootstrap/carousel'; 7 import { CarouselModule } from 'ngx-bootstrap/carousel';
8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
9 import { SharedModule } from '../shared/shared.module'; 9 import { SharedModule } from '../shared/shared.module';
10 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; 10 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
11 import { FormsModule } from '@angular/forms'; 11 import { FormsModule } from '@angular/forms';
12 import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component'; 12 import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
13 import { ArticuloCantidadComponent } from 'src/app/shared/articulo-cantidad/articulo-cantidad.component';
14 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
13 15
14 @NgModule({ 16 @NgModule({
15 declarations: [ 17 declarations: [
16 SeleccionArticulosComponent, 18 SeleccionArticulosComponent,
17 HeaderPublicidadComponent, 19 HeaderPublicidadComponent,
18 PromocionComponent, 20 PromocionComponent,
19 SinonimoComponent, 21 SinonimoComponent,
20 ConfirmacionComponent 22 ConfirmacionComponent,
23 ArticuloCantidadComponent,
24 FiltroCategoriasComponent,
21 ], 25 ],
22 imports: [ 26 imports: [
23 CommonModule, 27 CommonModule,
24 SeleccionArticulosRoutingModule, 28 SeleccionArticulosRoutingModule,
25 FormsModule, 29 FormsModule,
26 ModalModule.forRoot(), 30 ModalModule.forRoot(),
27 CarouselModule.forRoot(), 31 CarouselModule.forRoot(),
28 SharedModule 32 SharedModule
29 ], 33 ],
30 exports: [HeaderPublicidadComponent], 34 exports: [HeaderPublicidadComponent, ArticuloCantidadComponent],
31 entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent] 35 entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent]
32 }) 36 })
33 export class SeleccionArticulosModule { } 37 export class SeleccionArticulosModule { }
34 38
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ 81e1a8f
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http'; 2 import { HttpClient } from '@angular/common/http';
3 import { APP_SETTINGS } from '../../../etc/AppSettings'; 3 import { APP_SETTINGS } from '../../../etc/AppSettings';
4 import { IArticulo } from '../../interfaces/IArticulo'; 4 import { IArticulo } from '../../interfaces/IArticulo';
5 import { ClienteService } from '../cliente/cliente.service'; 5 import { ClienteService } from '../cliente/cliente.service';
6 import { Observable } from 'rxjs'; 6 import { Observable } from 'rxjs';
7 7
8 @Injectable() 8 @Injectable()
9 export class ArticuloService { 9 export class ArticuloService {
10 carrito: IArticulo[] = []; 10 carrito: IArticulo[] = [];
11 articuloAcargar: IArticulo; 11 articuloAcargar: IArticulo;
12 promoAcargar: IArticulo; 12 promoAcargar: IArticulo;
13 mostrar: string; 13 mostrar: string;
14 esPromoPersonalizada = false; 14 esPromoPersonalizada = false;
15 urlDeboSuite = APP_SETTINGS.apiDeboSuite; 15 urlDeboSuite = APP_SETTINGS.apiDeboSuite;
16 medioPago: number; 16 medioPago: number;
17 idComanda: number; 17 idComanda: number;
18 subTotal = 0; 18 subTotal = 0;
19 maxCantidad = 50;
19 20
20 constructor( 21 constructor(
21 private http: HttpClient, 22 private http: HttpClient,
22 private clienteService: ClienteService, 23 private clienteService: ClienteService,
23 ) { } 24 ) { }
24 25
25 getById(id) { 26 getById(id) {
26 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`); 27 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
27 } 28 }
28 29
29 getAll() { 30 getAll() {
30 return this.http.get(`${this.urlDeboSuite}/articulos/`); 31 return this.http.get(`${this.urlDeboSuite}/articulos/`);
31 } 32 }
32 33
33 getAllWithPaginator(page: number = 1) { 34 getAllWithPaginator(page: number = 1) {
34 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`); 35 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
35 } 36 }
36 37
38 substractCant(articulo: IArticulo) {
39 if (articulo.cantidad === 1) return;
40 articulo.cantidad--;
41 this.calcularTotal();
42 }
43
44 addCant(articulo: IArticulo) {
45 if (articulo.cantidad >= this.maxCantidad) return;
46 articulo.cantidad++;
47 this.calcularTotal();
48 }
49
37 calcularTotal() { 50 calcularTotal() {
38 this.subTotal = 0; 51 this.subTotal = 0;
39 this.carrito.forEach(articulo => { 52 this.carrito.forEach(articulo => {
40 this.subTotal += (articulo.PreVen * articulo.cantidad); 53 this.subTotal += (articulo.PreVen * articulo.cantidad);
41 }); 54 });
42 } 55 }
43 56
44 setArticulo(articulo: IArticulo) { 57 setArticulo(articulo: IArticulo) {
45 articulo.cantidad = 1; 58 articulo.cantidad = 1;
46 for (const articuloCarrito of this.carrito) { 59 for (const articuloCarrito of this.carrito) {
47 if (articuloCarrito.id === articulo.id && !articulo.productos.length) { 60 if (articuloCarrito.id === articulo.id && !articulo.productos.length) {
48 articuloCarrito.cantidad++; 61 articuloCarrito.cantidad++;
49 this.calcularTotal(); 62 this.calcularTotal();
50 return; 63 return;
51 } 64 }
52 } 65 }
53 this.setArticulosSinImagen([articulo]); 66 this.setArticulosSinImagen([articulo]);
54 this.carrito.unshift(articulo); 67 this.carrito.unshift(articulo);
55 this.calcularTotal(); 68 this.calcularTotal();
56 } 69 }
57 70
58 deleteArticulo(index: number) { 71 deleteArticulo(index: number) {
59 this.carrito.splice(index, 1); 72 this.carrito.splice(index, 1);
60 this.calcularTotal(); 73 this.calcularTotal();
61 } 74 }
62 75
63 pay(dataPago: any) { 76 pay(dataPago: any) {
64 return new Observable((observer) => { 77 return new Observable((observer) => {
65 this.clienteService.getById(-1) 78 this.clienteService.getById(-1)
66 .subscribe(cliente => { 79 .subscribe(cliente => {
67 this.markArticuloInPromoAsRemoved(); 80 this.markArticuloInPromoAsRemoved();
68 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, { 81 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
69 productos: this.carrito, 82 productos: this.carrito,
70 cliente, 83 cliente,
71 origen: 'autoservicio', 84 origen: 'autoservicio',
72 codigoVendedor: 5, 85 codigoVendedor: 5,
73 puntoVenta: APP_SETTINGS.puntoVenta, 86 puntoVenta: APP_SETTINGS.puntoVenta,
74 pedidoAnombreDe: dataPago.pedidoAnombreDe, 87 pedidoAnombreDe: dataPago.pedidoAnombreDe,
75 numeroPlanilla: APP_SETTINGS.numeroPlanilla, 88 numeroPlanilla: APP_SETTINGS.numeroPlanilla,
76 pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'), 89 pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'),
77 }) 90 })
78 .subscribe((data) => { 91 .subscribe((data) => {
79 observer.next(data); 92 observer.next(data);
80 observer.complete(); 93 observer.complete();
81 }); 94 });
82 }); 95 });
83 }); 96 });
84 } 97 }
85 98
86 cleanShoppingCar() { 99 cleanShoppingCar() {
87 this.articuloAcargar = undefined; 100 this.articuloAcargar = undefined;
88 this.promoAcargar = undefined; 101 this.promoAcargar = undefined;
89 this.carrito = []; 102 this.carrito = [];
90 } 103 }
91 104
92 setArticulosSinImagen(articulos: IArticulo[]) { 105 setArticulosSinImagen(articulos: IArticulo[]) {
93 articulos.forEach((articulo: IArticulo) => { 106 articulos.forEach((articulo: IArticulo) => {
94 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : 107 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
95 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; 108 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
96 }); 109 });
97 } 110 }
98 111
99 markArticuloInPromoAsRemoved() { 112 markArticuloInPromoAsRemoved() {
100 this.carrito.forEach((articuloCarrito: IArticulo) => { 113 this.carrito.forEach((articuloCarrito: IArticulo) => {
101 if (articuloCarrito.PRO) { 114 if (articuloCarrito.PRO) {
102 articuloCarrito.productos.forEach((articulo: IArticulo) => { 115 articuloCarrito.productos.forEach((articulo: IArticulo) => {
103 if (articulo.cantidadAdicionada === 0) { 116 if (articulo.cantidadAdicionada === 0) {
104 articulo.cantidad = 0; 117 articulo.cantidad = 0;
105 articulo.importeValorExtra = 0; 118 articulo.importeValorExtra = 0;
106 } 119 }
107 }); 120 });
108 } 121 }
109 }); 122 });
110 } 123 }
111 } 124 }
112 125
src/app/shared/articulo-cantidad/articulo-cantidad.component.html
Diff comments   View file @ 81e1a8f
File was created 1 <div class="row mx-0 justify-content-between bg-primary badge-pill">
2 <!-- BOTON MENOS -->
3 <div class="col-auto px-0 my-auto">
4 <img
5 draggable="false"
6 ondragstart="return false;"
7 (contextmenu)="false"
8 class="d-block ml-auto py-2 icon-15 btn-effect"
9 src="assets/img/menos-blanco.svg"
10 (click)="substractCant(articulo)">
11 </div>
12 <!-- CANTIDAD -->
13 <div class="col px-0 my-auto text-white text-center">
14 <p><small>{{articulo.cantidad}}</small></p>
15 </div>
16 <!-- BOTON MAS -->
17 <div class="col-auto px-0 my-auto">
18 <img
19 draggable="false"
20 ondragstart="return false;"
21 (contextmenu)="false"
22 class="d-block ml-auto py-2 icon-15 btn-effect"
23 src="assets/img/mas-blanco.svg"
24 (click)="addCant(articulo)">
25 </div>
26 </div>
27
src/app/shared/articulo-cantidad/articulo-cantidad.component.scss
Diff comments   View file @ 81e1a8f
src/app/shared/articulo-cantidad/articulo-cantidad.component.spec.ts
Diff comments   View file @ 81e1a8f
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { ArticuloCantidadComponent } from './articulo-cantidad.component';
4
5 describe('ArticuloCantidadComponent', () => {
6 let component: ArticuloCantidadComponent;
7 let fixture: ComponentFixture<ArticuloCantidadComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ ArticuloCantidadComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(ArticuloCantidadComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/shared/articulo-cantidad/articulo-cantidad.component.ts
Diff comments   View file @ 81e1a8f
File was created 1 import { Component, OnInit, Input } from '@angular/core';
2 import { IArticulo } from 'src/app/interfaces/IArticulo';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4
5 @Component({
6 selector: 'app-articulo-cantidad',
7 templateUrl: './articulo-cantidad.component.html',
8 styleUrls: ['./articulo-cantidad.component.scss']
9 })
10 export class ArticuloCantidadComponent implements OnInit {
11 @Input() articulo: IArticulo;
12
13 constructor(private articuloService: ArticuloService) { }
14
15 ngOnInit() { }
16
17 substractCant(articulo: IArticulo) {
18 this.articuloService.substractCant(articulo);
19 }
20
21 addCant(articulo: IArticulo) {
22 this.articuloService.addCant(articulo);
23 }
24
25 }
26
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ 81e1a8f
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';
11 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
12 import { SinonimoComponent } from '../sinonimo/sinonimo.component';
10 13
11 @Component({ 14 @Component({
12 selector: 'app-header-publicidad', 15 selector: 'app-header-publicidad',
13 templateUrl: './header-publicidad.component.html', 16 templateUrl: './header-publicidad.component.html',
14 styleUrls: ['./header-publicidad.component.scss'] 17 styleUrls: ['./header-publicidad.component.scss']
15 }) 18 })
16 export class HeaderPublicidadComponent implements OnInit { 19 export class HeaderPublicidadComponent implements OnInit {
17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
18 publicidades: IPublicidad[] = []; 21 publicidades: IPublicidad[] = [];
19 modalRef: BsModalRef; 22 modalRef: BsModalRef;
20 23
21 constructor( 24 constructor(
22 private publicidadService: PublicidadService, 25 private publicidadService: PublicidadService,
23 private articuloService: ArticuloService, 26 private articuloService: ArticuloService,
24 private modalService: BsModalService, 27 private modalService: BsModalService,
28 private sinonimoService: SinonimoService
25 ) { } 29 ) { }
26 30
27 ngOnInit() { 31 ngOnInit() {
28 this.getPublicidades(); 32 this.getPublicidades();
29 this.mediaPantalla(); 33 this.mediaPantalla();
30 } 34 }
31 35
32 getPublicidades() { 36 getPublicidades() {
33 this.publicidadService.getAll() 37 this.publicidadService.getAll()
34 .subscribe((res: IPublicidad[]) => { 38 .subscribe((res: IPublicidad[]) => {
35 this.publicidades = res; 39 this.publicidades = res;
36 }, err => console.error(err)); 40 }, err => console.error(err));
37 } 41 }
38 42
39 elegirArticulo(publicidad: IPublicidad) { 43 elegirArticulo(publicidad: IPublicidad) {
40 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo); 44 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo);
41 } 45 }
42 46
43 getByID(id: number) { 47 getByID(id: number) {
44 this.articuloService.getById(id) 48 this.articuloService.getById(id)
45 .subscribe((res: IArticulo) => { 49 .subscribe((res: IArticulo) => {
46 if (res.FPP) { 50 if (res.FPP) {
47 this.openModalPromos(res); 51 this.openModalPromos(res);
48 return; 52 return;
49 } else { 53 } else {
50 this.openModalConfirmacion(res); 54 this.openModalConfirmacion(res);
51 return; 55 return;
52 } 56 }
53 }, err => console.error(err)); 57 }, err => console.error(err));
54 } 58 }
55 59
56 openModalPromos(articulo: IArticulo) { 60 openModalPromos(articulo: IArticulo) {
57 this.modalRef = this.modalService.show(PromocionComponent, 61 this.modalRef = this.modalService.show(PromocionComponent,
58 { 62 {
59 initialState: { 63 initialState: {
60 idArticulo: articulo.id 64 idArticulo: articulo.id
61 }, 65 },
62 class: 'modal-promo modal-dialog-centered' 66 class: 'modal-promo modal-dialog-centered'
63 }); 67 });
64 } 68 }
65 69
66 openModalConfirmacion(articulo: IArticulo) { 70 openModalConfirmacion(articulo: IArticulo) {
67 this.modalRef = this.modalService.show(ConfirmacionComponent, 71 this.modalRef = this.modalService.show(ConfirmacionComponent,
68 { 72 {
69 initialState: { 73 initialState: {
70 titleMessage: articulo.DET_LAR, 74 titleMessage: articulo.DET_LAR,
71 imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : '', 75 imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : 'assets/img/image-not-found.jpg',
72 footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`, 76 footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`,
73 footerMessageSecond: `a su carrito?`, 77 footerMessageSecond: `a su carrito?`,
74 footerConfirmation: articulo.PreVen, 78 footerConfirmation: articulo.PreVen,
75 footerClose: `volver` 79 footerClose: `volver`
76 }, 80 },
77 class: 'modal-promo modal-dialog-centered' 81 class: 'modal-promo modal-dialog-centered'
78 }); 82 });
79 this.modalRef.content.onClose.subscribe(() => { 83 this.modalRef.content.onClose.subscribe(() => {
80 this.articuloService.setArticulo(articulo); 84 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
85 .subscribe((res: ISinonimo[]) => {
86 if (res.length) {
87 this.openModalSinonimos(res, articulo);
88 } else {
89 articulo.cantidad = 1;
90 this.articuloService.setArticulo(articulo);
91 }
92 }, err => console.error(err));
81 }); 93 });
94 this.mediaPantalla();
82 } 95 }
83 96
97 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
98 const modalSinonimo = this.modalService.show(SinonimoComponent, {
99 initialState: { sinonimos: sinonimosData },
100 class: 'modal-promo modal-dialog-centered'
101 });
102 modalSinonimo.content.onClose
103 .subscribe((res: any) => {
104 for (const a of articulo.productos) {
105 if (a.idSinonimo === res.ID_SIN) {
106 a.CODA = res.articulo.CodArt;
107 a.CodArt = res.articulo.CodArt;
108 a.SECA = res.articulo.CodSec;
109 a.CodSec = res.articulo.CodSec;
110 a.PreVen = res.articulo.PreVen;
111 a.id = res.articulo.id;
112 a.DET_LAR = res.articulo.DET_LAR;
113 a.DetArt = res.articulo.DetArt;
114 }
115 }
116 this.articuloService.setArticulo(articulo);
117 });
118 }
119
84 mediaPantalla() { 120 mediaPantalla() {
85 if ($('body').hasClass('media-pantalla')) { 121 if ($('body').hasClass('media-pantalla')) {
86 $('#headerPublicidad,#headerPad').addClass('media-pantalla'); 122 $('#headerPublicidad,#headerPad').addClass('media-pantalla');
87 } 123 }
88 } 124 }
89 } 125 }
90 126
src/app/shared/sinonimo/sinonimo.component.html
Diff comments   View file @ 81e1a8f
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">Seleccione sinonimos</p> 3 <p class="h4">Elige una opción</p>
4 </div> 4 </div>
5 5
6 <div class="modal-body"> 6 <div class="modal-body">
7 <div 7 <div
8 class="lista-sinonimos scroll-y-visible" 8 class="lista-sinonimos scroll-y-visible"
9 *ngFor="let s of sinonimos"> 9 *ngFor="let s of sinonimos">
10 <div *ngFor="let articulo of s.productos"> 10 <div *ngFor="let articulo of s.productos">
11 <div class="custom-control custom-checkbox"> 11 <div class="custom-control custom-checkbox">
12 <input 12 <input
13 type="checkbox" 13 type="checkbox"
14 class="custom-control-input" 14 class="custom-control-input"
15 [(ngModel)]="articulo.seleccionado" 15 [(ngModel)]="articulo.seleccionado"
16 (click)="selectArticulo(articulo)" 16 (click)="selectArticulo(articulo)"
17 [id]="articulo.id"> 17 [id]="articulo.id">
18 <label 18 <label
19 class="custom-control-label" 19 class="custom-control-label"
20 [for]="articulo.id"> 20 [for]="articulo.id">
21 {{articulo.DET_LAR}} 21 {{articulo.DET_LAR.toUpperCase()}}
22 </label> 22 </label>
23 </div> 23 </div>
24 </div> 24 </div>
25 </div> 25 </div>
26 </div> 26 </div>
27 27
28 <div class="modal-footer"> 28 <div class="modal-footer">
29 <div 29 <div
30 [ngClass]="validate()" 30 [ngClass]="validate()"
31 class="d-inline-block py-1 bg-white badge-pill text-primary" 31 class="d-inline-block py-1 bg-white badge-pill text-primary"
32 (click)="continue()"> 32 (click)="continue()">
33 CONTINUAR 33 CONTINUAR
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="icon-30" 38 class="icon-30"
39 src="assets/img/ir-color.svg"> 39 src="assets/img/ir-color.svg">
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 43
1 .icon-15 {
2 width: 15px;
3 }
4
1 .icon-20 { 5 .icon-20 {
2 width: 20px; 6 width: 20px;
3 } 7 }
4 8
5 .icon-30 { 9 .icon-30 {
6 width: 30px; 10 width: 30px;
7 } 11 }
8 12
9 .icon-40 { 13 .icon-40 {
10 width: 40px; 14 width: 40px;
11 } 15 }
12 16
13 .icon-50 { 17 .icon-50 {
14 width: 50px; 18 width: 50px;
15 } 19 }
16 20
17 .icon-60 { 21 .icon-60 {
18 width: 60px; 22 width: 60px;
19 } 23 }
20 24
21 .icon-150 { 25 .icon-150 {
22 width: 150px; 26 width: 150px;
23 } 27 }
24 28
src/scss/styles-bootstrap.scss
Diff comments   View file @ 81e1a8f
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-input:checked ~ .custom-control-label::before { 43 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
44 background-color: $primary !important; 44 background-color: $primary !important;
45 } 45 }
46 46
47 .custom-control-input:checked ~ .custom-control-label::before { 47 .custom-control-input:checked ~ .custom-control-label::before {
48 border-color: $primary !important; 48 border-color: $primary !important;
49 background-color: $primary !important; 49 background-color: $primary !important;
50 } 50 }
51 51
52 .custom-control-input:checked ~ .custom-control-label::before { 52 .custom-control-input:checked ~ .custom-control-label::before {
53 color: #fff; 53 color: #fff;
54 border-color: $primary !important; 54 border-color: $primary !important;
55 background-color: $primary !important; 55 background-color: $primary !important;
56 } 56 }
57 57
58 .modal-promo > div { 58 .modal-promo > div {
59 border: none !important; 59 border: none !important;
60 border-radius: $border-radius; 60 border-radius: $border-radius;
61 margin-left: 10px !important; 61 margin-left: 10px !important;
62 } 62 }
63 63
64 .modal-content.media-pantalla {
65 margin-top: auto !important;
66 margin-bottom: 50px !important;
67 }
68
69 .card {
70 border: none !important;
71 }
72
64 @import "node_modules/bootstrap/scss/bootstrap"; 73 @import "node_modules/bootstrap/scss/bootstrap";
65 74
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 {
26 height: 50% !important;
27 position: absolute;
28 bottom: 0;
29 width: 100%;
30 }
31
25 .btn-effect { 32 .btn-effect {
26 transition: all 0.3s !important; 33 transition: all 0.3s !important;
27 &:hover { 34 &:hover {
28 cursor: pointer !important; 35 cursor: pointer !important;
29 opacity: 0.7 !important; 36 opacity: 0.7 !important;
30 } 37 }
31 &:active { 38 &:active {
32 transform: scale(1.02) !important; 39 transform: scale(1.02) !important;
33 } 40 }
34 } 41 }
35 42
36 .cursor-pointer { 43 .cursor-pointer {
37 cursor: pointer; 44 cursor: pointer;
38 } 45 }
39 46
40 p { 47 p {
41 margin: 0 !important; 48 margin: 0 !important;
42 } 49 }
43 50
44 .img-in-top { 51 .img-in-top {
45 position: absolute; 52 position: absolute;
46 top: -35px; 53 top: -35px;
47 left: 50%; 54 left: 50%;
48 height: 70px; 55 height: 70px;
49 -webkit-transform: translateX(-50%); 56 -webkit-transform: translateX(-50%);
50 transform: translateX(-50%); 57 transform: translateX(-50%);
51 } 58 }
52 59
53 .right-0 { 60 .right-0 {
54 right: 0; 61 right: 0;
55 } 62 }
56 63
57 .left-0 { 64 .left-0 {
58 left: 0; 65 left: 0;
59 } 66 }
60 67
61 .rotate-45 { 68 .rotate-45 {
62 transform: rotate(45deg); 69 transform: rotate(45deg);
63 } 70 }
64 71
65 .rotate-90 { 72 .rotate-90 {
66 transform: rotate(90deg); 73 transform: rotate(90deg);
67 } 74 }
68 75
69 .rotate-90-neg { 76 .rotate-90-neg {
70 transform: rotate(-90deg); 77 transform: rotate(-90deg);
71 } 78 }
72 79
73 .rotate-180-neg { 80 .rotate-180-neg {
74 transform: rotate(-180deg); 81 transform: rotate(-180deg);
75 } 82 }
76 83
77 .disabled { 84 .disabled {
78 opacity: 0.5; 85 opacity: 0.5;
79 } 86 }
80
81 body.media-pantalla {
82 height: 50% !important;
83 position: absolute;
84 bottom: 0;
85 width: 100%;
86 }
87
88 .modal-content.media-pantalla {
89 margin-top: auto !important;
90 margin-bottom: 50px !important;
91 }
92 87
93 .modal-content { 88 body.media-pantalla {
94 background: transparent !important; 89 height: 50% !important;
95 } 90 position: absolute;
96 91 bottom: 0;