Commit 77cc13762559f043ba777af28abe0101a18cd5b5

Authored by Luis Suarez
Exists in develop

solving merge

src/app/modules/info-formas-pago/info-formas-pago.component.html
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-7 col-xl-4 p-5 m-5 h-auto align-self-end 16 class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto
17 btn-effect align-self-end border border-secondary rounded reduce-card-1">
17 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 class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border 45 btn-effect border border-primary rounded reduce-card-2">
45 border-primary rounded reduce-card-2"> 46 <img
46 <img 47 draggable="false"
47 draggable="false" 48 ondragstart="return false;"
48 ondragstart="return false;" 49 (contextmenu)="false"
49 (contextmenu)="false" 50 class="img-in-top px-4 bg-white"
50 class="img-in-top px-4 bg-white" 51 src="assets/img/icono-efectivo.svg">
51 src="assets/img/icono-efectivo.svg"> 52 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
52 <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>
53 <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p> 54 </div>
54 </div> 55 </div>
55 </div> 56 </div>
56 </div> 57 </div>
57 </div> 58
src/app/modules/pago-electronico/pago-electronico.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { Router } from '@angular/router'; 3 import { Router } from '@angular/router';
4 import { APP_SETTINGS } from 'src/etc/AppSettings'; 4 import { APP_SETTINGS } from 'src/etc/AppSettings';
5 5
6 @Component({ 6 @Component({
7 selector: 'app-pago-electronico', 7 selector: 'app-pago-electronico',
8 templateUrl: './pago-electronico.component.html', 8 templateUrl: './pago-electronico.component.html',
9 styleUrls: ['./pago-electronico.component.scss'] 9 styleUrls: ['./pago-electronico.component.scss']
10 }) 10 })
11 export class PagoElectronicoComponent implements OnInit { 11 export class PagoElectronicoComponent implements OnInit {
12 urlQr = `${APP_SETTINGS.apiDeboSuite}/qr/dev/${APP_SETTINGS.codigoP}/tienda/${APP_SETTINGS.terminal}`; 12 urlQr = `${APP_SETTINGS.apiDeboSuite}/qr/${APP_SETTINGS.deploy}/${APP_SETTINGS.codigoP}/tienda/${APP_SETTINGS.terminal}`;
13 13
14 constructor( 14 constructor(
15 private articuloService: ArticuloService, 15 private articuloService: ArticuloService,
16 private router: Router, 16 private router: Router,
17 ) { } 17 ) { }
18 18
19 ngOnInit() { 19 ngOnInit() {
20 if (!this.articuloService.carrito.length) { 20 if (!this.articuloService.carrito.length) {
21 this.router.navigate(['']); 21 this.router.navigate(['']);
22 return; 22 return;
23 } 23 }
24 const dataPago = { 24 const dataPago = {
25 pedidoAnombreDe: '' 25 pedidoAnombreDe: ''
26 }; 26 };
27 dataPago.pedidoAnombreDe = ''; 27 dataPago.pedidoAnombreDe = '';
28 this.articuloService.pay(dataPago) 28 this.articuloService.pay(dataPago)
29 .subscribe((res: any) => { 29 .subscribe((res: any) => {
30 this.articuloService.idComanda = res.data; 30 this.articuloService.idComanda = res.data;
31 this.router.navigate(['mensaje-final']); 31 this.router.navigate(['mensaje-final']);
32 }, err => console.error(err)); 32 }, err => console.error(err));
33 } 33 }
34 34
35 } 35 }
36 36
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
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 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div 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 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22 <div class="col-auto btn-effect h-5 cat-btn"> 22 <div class="col-auto btn-effect h-5 cat-btn">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -100)" 29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary 36 class="col-12 px-0 box-categorias border border-primary
37 border-left-0 rounded-right scroll-y cat-box" 37 border-left-0 rounded-right scroll-y cat-box"
38 (scroll)="scrollEvent($event)"> 38 (scroll)="scrollEvent($event)">
39 <div 39 <div
40 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" 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, 41 [ngClass]="{ 'active rounded-sm shadow': allActive, 'border-bottom-effect': !allActive,
42 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }" 42 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
43 (click)="selectCategoria(-1, 0)"> 43 (click)="selectCategoria(-1, 0)">
44 <img 44 <img
45 draggable="false" 45 draggable="false"
46 ondragstart="return false;" 46 ondragstart="return false;"
47 (contextmenu)="false" 47 (contextmenu)="false"
48 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 48 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
49 src="assets/img/logo-spot.svg"> 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> 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> 51 </div>
52 <div 52 <div
53 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" 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, 54 [ngClass]="{ 'active rounded-sm shadow': categoria.selected, 'border-bottom-effect': !categoria.selected,
55 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }" 55 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
56 (click)="selectCategoria(i, categoria.id)" 56 (click)="selectCategoria(i, categoria.id)"
57 *ngFor="let categoria of categorias; let i = index;"> 57 *ngFor="let categoria of categorias; let i = index;">
58 <img 58 <img
59 draggable="false" 59 draggable="false"
60 ondragstart="return false;" 60 ondragstart="return false;"
61 (contextmenu)="false" 61 (contextmenu)="false"
62 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria" 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')}" 63 [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"
64 src="{{urlImagenes}}{{categoria.path_imagen}}" 64 src="{{urlImagenes}}{{categoria.path_imagen}}"
65 onerror="this.src='assets/img/image-not-found.jpg'"> 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> 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> 67 </div>
68 </div> 68 </div>
69 <div class="col-auto btn-effect h-5 cat-btn"> 69 <div class="col-auto btn-effect h-5 cat-btn">
70 <img 70 <img
71 draggable="false" 71 draggable="false"
72 ondragstart="return false;" 72 ondragstart="return false;"
73 (contextmenu)="false" 73 (contextmenu)="false"
74 class="h-100 d-block mx-auto rotate-90" 74 class="h-100 d-block mx-auto rotate-90"
75 src="assets/img/ir-color.svg" 75 src="assets/img/ir-color.svg"
76 (mousedown)="scrollY(templateCategorias, 100)" 76 (mousedown)="scrollY(templateCategorias, 100)"
77 (mouseup)="mouseup()" 77 (mouseup)="mouseup()"
78 (mouseleave)="mouseup()"> 78 (mouseleave)="mouseup()">
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 <!-- LISTA DE ARTICULOS --> 82 <!-- LISTA DE ARTICULOS -->
83 <div 83 <div
84 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 84 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
85 (scroll)="scrollEvent($event)"> 85 (scroll)="scrollEvent($event)">
86 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 86 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
87 <!-- ARTICULO --> 87 <!-- ARTICULO -->
88 <div 88 <div
89 class="col px-2 my-1 my-md-3 h-auto" 89 class="col px-2 my-1 my-md-3 h-auto"
90 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 90 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
91 <div 91 <div
92 class="swing-in-top-fwd btn-effect card h-auto" 92 class="swing-in-top-fwd btn-effect card h-auto"
93 (click)="selectArticulo(articulo)"> 93 (click)="selectArticulo(articulo)">
94 <img 94 <img
95 draggable="false" 95 draggable="false"
96 ondragstart="return false;" 96 ondragstart="return false;"
97 (contextmenu)="false" 97 (contextmenu)="false"
98 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 98 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
99 onerror="this.src='assets/img/image-not-found.jpg'" 99 onerror="this.src='assets/img/image-not-found.jpg'"
100 class="card-img-top h-30 h-md-55 rounded-sm"> 100 class="card-img-top h-30 h-md-55 rounded-sm">
101 <div class="row mx-0 py-1 h-auto justify-content-center"> 101 <div class="row mx-0 py-1 h-auto justify-content-center">
102 <p 102 <p
103 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 103 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
104 class="col-12 px-1 h6 h-auto text-center min-h-60"> 104 class="col-12 px-1 h6 h-auto text-center min-h-60">
105 {{articulo.DetArt | uppercase}} 105 {{articulo.DetArt | uppercase}}
106 </p> 106 </p>
107 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50"> 107 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
108 <small>{{articulo.DET_LAR}}</small> 108 <small>{{articulo.DET_LAR}}</small>
109 </p> 109 </p>
110 <div class="col-12 px-1 align-self-end h-auto"> 110 <div class="col-12 px-1 align-self-end h-auto">
111 <div 111 <div
112 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 112 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
113 class="row mx-0 justify-content-between badge-pill"> 113 class="row mx-0 justify-content-between badge-pill">
114 <div class="col px-0 align-self-center text-white text-right"> 114 <div class="col px-0 align-self-center text-white text-right">
115 {{articulo.PreVen | currency}} 115 {{articulo.PreVen | currency}}
116 </div> 116 </div>
117 <div class="col-5 px-0"> 117 <div class="col-5 px-0">
118 <img 118 <img
119 draggable="false" 119 draggable="false"
120 ondragstart="return false;" 120 ondragstart="return false;"
121 (contextmenu)="false" 121 (contextmenu)="false"
122 class="d-block ml-auto py-1 icon-30" 122 class="d-block ml-auto py-1 icon-30"
123 src="assets/img/ir.svg"> 123 src="assets/img/ir.svg">
124 </div> 124 </div>
125 </div> 125 </div>
126 </div> 126 </div>
127 </div> 127 </div>
128 </div> 128 </div>
129 </div> 129 </div>
130 </div> 130 </div>
131 <!-- BOTON VER MAS --> 131 <!-- BOTON VER MAS -->
132 <div class="row mx-0"> 132 <div class="row mx-0">
133 <div 133 <div
134 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 134 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
135 class="col-12 px-0 mb-2"> 135 class="col-12 px-0 mb-2">
136 <button 136 <button
137 (click)="increaseShow()" 137 (click)="increaseShow()"
138 class="btn btn-block btn-outline-primary"> 138 class="btn btn-block btn-outline-primary">
139 Ver Más 139 Ver Más
140 </button> 140 </button>
141 </div> 141 </div>
142 </div> 142 </div>
143 </div> 143 </div>
144 </div> 144 </div>
145 </div> 145 </div>
146 </div> 146 </div>
147 <!-- FOOTER CARRITO DE COMPRAS --> 147 <!-- FOOTER CARRITO DE COMPRAS -->
148 <div class="row w-90 mx-auto h-auto justify-content-center"> 148 <div class="row w-90 mx-auto h-auto justify-content-center">
149 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 149 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
150 [ngClass]="boxCarrito.classList.contains('media-pantalla') 150 [ngClass]="boxCarrito.classList.contains('media-pantalla')
151 ? 'col-8' : 'col-12'" id="boxCarrito"> 151 ? 'col-8' : 'col-12'" id="boxCarrito">
152 <!-- CABECERA --> 152 <!-- CABECERA -->
153 <div class="row mx-0 h-15 border-bottom border-primary"> 153 <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> 154 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
155 </div> 155 </div>
156 <!-- CUERPO --> 156 <!-- CUERPO -->
157 <div class="row h-85 mx-0 justify-content-around"> 157 <div class="row h-85 mx-0 justify-content-around">
158 <!-- BOTON SCROLL IZQUIERDA --> 158 <!-- BOTON SCROLL IZQUIERDA -->
159 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 159 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
160 <img 160 <img
161 draggable="false" 161 draggable="false"
162 ondragstart="return false;" 162 ondragstart="return false;"
163 (contextmenu)="false" 163 (contextmenu)="false"
164 class="icon-30 rotate-180-neg" 164 class="icon-30 rotate-180-neg"
165 src="assets/img/ir-fondo-color.svg" 165 src="assets/img/ir-fondo-color.svg"
166 (mousedown)="scrollX(templateCarrito, -100)" 166 (mousedown)="scrollX(templateCarrito, -100)"
167 (mouseup)="mouseup()" 167 (mouseup)="mouseup()"
168 (mouseleave)="mouseup()"> 168 (mouseleave)="mouseup()">
169 </div> 169 </div>
170 <!-- CARRITO --> 170 <!-- CARRITO -->
171 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 171 <div class="col-6 col-sm-8 col-lg-10 h-100">
172 <div 172 <div
173 #templateCarrito 173 #templateCarrito
174 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 174 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
175 (scroll)="scrollEvent($event)"> 175 (scroll)="scrollEvent($event)">
176 <!-- MENSAJE DE ADVERTENCIA --> 176 <!-- MENSAJE DE ADVERTENCIA -->
177 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 177 <div *ngIf="!articuloService.carrito.length" class="col h-100">
178 <p class="text-center py-5">No hay articulos en el carrito</p> 178 <p class="text-center py-5">No hay articulos en el carrito</p>
179 </div> 179 </div>
180 <!-- ARTICULOS --> 180 <!-- ARTICULOS -->
181 <div 181 <div
182 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 182 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;"> 183 *ngFor="let articulo of articuloService.carrito; let i = index;">
184 <div class="swing-in-top-fwd"> 184 <div class="swing-in-top-fwd">
185 <img 185 <img
186 class="btn-effect icon-20 position-absolute right-0" 186 class="btn-effect icon-20 position-absolute right-0"
187 src="assets/img/icono-cancelar-color.svg" 187 src="assets/img/icono-cancelar-color.svg"
188 (click)="deleteArticulo(i)"> 188 (click)="deleteArticulo(i)">
189 <img 189 <img
190 draggable="false" 190 draggable="false"
191 ondragstart="return false;" 191 ondragstart="return false;"
192 (contextmenu)="false" 192 (contextmenu)="false"
193 class="d-block img-fluid p-2 mx-auto rounded" 193 class="d-block img-fluid p-2 mx-auto rounded"
194 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 194 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
195 onerror="this.src='assets/img/image-not-found.jpg'"> 195 onerror="this.src='assets/img/image-not-found.jpg'">
196 <p class="d-block mt-auto text-center text-primary text-truncate"> 196 <p class="d-block mt-auto text-center text-primary text-truncate">
197 <small>{{articulo.DetArt | uppercase}}</small> 197 <small>{{articulo.DetArt | uppercase}}</small>
198 </p> 198 </p>
199 </div> 199 </div>
200 </div> 200 </div>
201 </div> 201 </div>
202 </div> 202 </div>
203 <!-- BOTON SCROLL DERECHA --> 203 <!-- BOTON SCROLL DERECHA -->
204 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 204 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
205 <img 205 <img
206 draggable="false" 206 draggable="false"
207 ondragstart="return false;" 207 ondragstart="return false;"
208 (contextmenu)="false" 208 (contextmenu)="false"
209 class="icon-30" 209 class="icon-30"
210 src="assets/img/ir-fondo-color.svg" 210 src="assets/img/ir-fondo-color.svg"
211 (mousedown)="scrollX(templateCarrito, 100)" 211 (mousedown)="scrollX(templateCarrito, 100)"
212 (mouseup)="mouseup()" 212 (mouseup)="mouseup()"
213 (mouseleave)="mouseup()"> 213 (mouseleave)="mouseup()">
214 </div> 214 </div>
215 </div> 215 </div>
216 </div> 216 </div>
217 <!-- TOTAL--> 217 <!-- TOTAL-->
218 <div 218 <div
219 class="col-auto mt-2 ml-auto h-20"> 219 class="col-auto mt-2 ml-auto h-20">
220 <div class="row mx-0"> 220 <div class="row mx-0">
221 <div class="col-auto align-self-center text-primary">TOTAL</div> 221 <div class="col-auto align-self-center text-primary">TOTAL</div>
222 <div class="col-auto bg-primary badge-pill"> 222 <div class="col-auto bg-primary badge-pill">
223 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 223 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
224 </div> 224 </div>
225 </div> 225 </div>
226 </div> 226 </div>
227 227
228 <!-- VER CARRITO --> 228 <!-- VER CARRITO -->
229 <div 229 <div
230 class="col-auto px-0 mt-2 h-20" 230 class="col-auto px-0 mt-2 h-20"
231 *ngIf="articuloService.carrito.length" 231 *ngIf="articuloService.carrito.length"
232 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 232 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
233 <div 233 <div
234 class="btn-effect col-auto px-0 align-self-center bg-white" 234 class="btn-effect col-auto px-0 align-self-center bg-white"
235 [routerLink]="['/carrito']"> 235 [routerLink]="['/carrito']">
236 <div class="row mx-0 bg-light"> 236 <div class="row mx-0 bg-light">
237 <div class="col-auto p-0 bg-primary"> 237 <div class="col-auto p-0 bg-primary">
238 <img 238 <img
239 draggable="false" 239 draggable="false"
240 ondragstart="return false;" 240 ondragstart="return false;"
241 (contextmenu)="false" 241 (contextmenu)="false"
242 class="p-2 icon-40" 242 class="p-2 icon-40"
243 src="assets/img/carrito.svg"> 243 src="assets/img/carrito.svg">
244 </div> 244 </div>
245 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 245 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
246 </div> 246 </div>
247 </div> 247 </div>
248 </div> 248 </div>
249 249
250 </div> 250 </div>
251 </div> 251 </div>
252 252
253 </div> 253 </div>
254 254
src/app/shared/promocion/promocion.component.html
1 <div class="d-flex justify-content-center" 1 <div class="d-flex justify-content-center"
2 *ngIf="!articulosPromo.length"> 2 *ngIf="!articulosPromo.length">
3 <div class="spinner-border text-primary" role="status"> 3 <div class="spinner-border text-primary" role="status">
4 <span class="sr-only">Loading...</span> 4 <span class="sr-only">Loading...</span>
5 </div> 5 </div>
6 </div> 6 </div>
7 <div *ngIf="articulosPromo.length"> 7 <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
8 <div class="modal-header bg-primary rounded-top pt-4 px-2"> 8 <div class="row mx-0 w-100">
9 <div class="row mx-0 w-100 justify-content-between"> 9 <div class="col-9">
10 <div class="col-8"> 10 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
11 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p> 11 <h1 class="text-white mb-4">en un combo?</h1>
12 </div> 12 </div>
13 <div class="col-4 align-self-center"> 13 <div class="col-3">
14 <div 14 <img
15 class="row mx-0 justify-content-between bg-white badge-pill" 15 draggable="false"
16 (click)="elegirPromo(articulosPromo[0])"> 16 ondragstart="return false;"
17 <div class="col px-0 align-self-center text-primary"> 17 (contextmenu)="false"
18 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> 18 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
19 </div> 19 onerror="this.src='assets/img/image-not-found.jpg'"
20 <div class="col-3 px-0"> 20 class="card-img-top img-fluid rounded-circle">
21 <img 21 </div>
22 draggable="false" 22 </div>
23 ondragstart="return false;" 23 <div
24 (contextmenu)="false" 24 class="row mx-0 lista-promociones scroll-y-visible"
25 class="d-block ml-auto py-1 icon-30 mr-2 pt-2" 25 (scroll)="scrollEvent($event)">
26 src="assets/img/ir-color.svg"> 26 <div class="col-12">
27 </div> 27 <div *ngFor="let promo of promociones">
28 </div> 28 <div
29 </div> 29 class="mx-0 mb-2 btn-effect bg-white badge-pill text-primary"
30 </div> 30 (click)="selectPromo(promo)">
31 </div> 31 <div class="d-flex">
32 <div class="modal-body bg-primary rounded-bottom pb-3 px-2"> 32 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
33 <div class="row mx-0 w-100"> 33 <p class="font-weight-bold my-auto pr-2">
34 <div class="col-9"> 34 <span>{{promo.PreVen | currency}}</span>
35 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p> 35 </p>
36 <h1 class="text-white mb-4">en un combo?</h1> 36 <img
37 </div> 37 draggable="false"
38 <div class="col-3"> 38 ondragstart="return false;"
39 <img 39 (contextmenu)="false"
40 draggable="false" 40 class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
41 ondragstart="return false;" 41 src="assets/img/ir-color.svg">
42 (contextmenu)="false" 42 </div>
43 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}" 43 </div>
44 onerror="this.src='assets/img/image-not-found.jpg'" 44 </div>
45 class="card-img-top img-fluid rounded-circle"> 45 </div>
46 </div> 46 </div>
47 <div class="modal-body bg-primary rounded-bottom pb-3 px-2">
48 <div class="row mx-0 w-100">
47 </div> 49 <div class="col-9">
48 <div 50 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
49 class="row mx-0 lista-promociones scroll-y-visible" 51 <h1 class="text-white mb-4">en un combo?</h1>
50 (scroll)="scrollEvent($event)"> 52 </div>
51 <div class="col-12"> 53 <div class="col-3">
52 <div *ngFor="let promo of promociones"> 54 <img
53 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)"> 55 draggable="false"
54 <div class="d-flex"> 56 ondragstart="return false;"
55 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p> 57 (contextmenu)="false"
56 <p class="font-weight-bold my-auto pr-2"> 58 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
57 <span>{{promo.PreVen | currency}}</span> 59 onerror="this.src='assets/img/image-not-found.jpg'"
58 </p> 60 class="card-img-top img-fluid rounded-circle">
59 <img 61 </div>
60 draggable="false" 62 </div>
61 ondragstart="return false;" 63 <div
62 (contextmenu)="false" 64 class="row mx-0 lista-promociones scroll-y-visible"
63 class="d-block icon-30 py-1" 65 (scroll)="scrollEvent($event)">
64 src="assets/img/ir-color.svg"> 66 <div class="col-12">
65 </div> 67 <div *ngFor="let promo of promociones">
66 </div> 68 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
67 </div> 69 <div class="d-flex">
68 </div> 70 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
69 </div> 71 <p class="font-weight-bold my-auto pr-2">
70 </div> 72 <span>{{promo.PreVen | currency}}</span>
71 </div> 73 </p>
74 <img
75 draggable="false"
76 ondragstart="return false;"
77 (contextmenu)="false"
78 class="d-block icon-30 py-1"
79 src="assets/img/ir-color.svg">
80 </div>
81 </div>
82 </div>
83 </div>
84 </div>
85 </div>
86 </div>
src/app/shared/sinonimo/sinonimo.component.html
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">Seleccione sinonimos</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}}
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 btn-effect 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
src/app/shared/sinonimo/sinonimo.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ISinonimo } from 'src/app/interfaces/ISinonimo'; 2 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
3 import { IArticulo } from 'src/app/interfaces/IArticulo'; 3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { BsModalRef } from 'ngx-bootstrap/modal'; 4 import { BsModalRef } from 'ngx-bootstrap/modal';
5 import { Subject } from 'rxjs'; 5 import { Subject } from 'rxjs';
6 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 6 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-sinonimo', 9 selector: 'app-sinonimo',
10 templateUrl: './sinonimo.component.html', 10 templateUrl: './sinonimo.component.html',
11 styleUrls: ['./sinonimo.component.scss'] 11 styleUrls: ['./sinonimo.component.scss']
12 }) 12 })
13 export class SinonimoComponent implements OnInit { 13 export class SinonimoComponent implements OnInit {
14 sinonimos: ISinonimo[] = []; 14 sinonimos: ISinonimo[] = [];
15 isValid: boolean; 15 isValid: boolean;
16 onClose: Subject<any>; 16 onClose: Subject<any>;
17 articuloSelected: IArticulo; 17 articuloSelected: IArticulo;
18 18
19 constructor( 19 constructor(
20 private modalRef: BsModalRef, 20 private modalRef: BsModalRef,
21 private articuloService: ArticuloService, 21 private articuloService: ArticuloService,
22 ) { 22 ) {
23 this.onClose = new Subject(); 23 this.onClose = new Subject();
24 } 24 }
25 25
26 ngOnInit() { 26 ngOnInit() {
27 } 27 }
28 28
29 selectArticulo(articulo: IArticulo) { 29 selectArticulo(articulo: IArticulo) {
30 for (const s of this.sinonimos) { 30 for (const s of this.sinonimos) {
31 for (const a of s.productos) { 31 for (const a of s.productos) {
32 a.seleccionado = false; 32 a.seleccionado = false;
33 } 33 }
34 } 34 }
35 articulo.seleccionado = true; 35 articulo.seleccionado = true;
36 this.articuloSelected = articulo; 36 this.articuloSelected = articulo;
37 } 37 }
38 38
39 validate() { 39 validate() {
40 this.isValid = false; 40 this.isValid = false;
41 for (const s of this.sinonimos) { 41 for (const s of this.sinonimos) {
42 for (const articulo of s.productos) { 42 for (const articulo of s.productos) {
43 if (articulo.seleccionado) { 43 if (articulo.seleccionado) {
44 this.isValid = true; 44 this.isValid = true;
45 } 45 }
46 } 46 }
47 } 47 }
48 return !this.isValid ? 'disabled' : ''; 48 return !this.isValid ? 'disabled' : 'btn-effect';
49 } 49 }
50 50
51 continue() { 51 continue() {
52 if (!this.isValid) return; 52 if (!this.isValid) return;
53 const ID_SIN = this.articuloSelected.ID_SIN; 53 const ID_SIN = this.articuloSelected.ID_SIN;
54 this.articuloService.getById(this.articuloSelected.id) 54 this.articuloService.getById(this.articuloSelected.id)
55 .subscribe((res: IArticulo) => { 55 .subscribe((res: IArticulo) => {
56 this.modalRef.hide(); 56 this.modalRef.hide();
57 this.onClose.next({ 57 this.onClose.next({
58 articulo: res, 58 articulo: res,
59 ID_SIN 59 ID_SIN
60 }); 60 });
61 }, err => console.error(err)); 61 }, err => console.error(err));
62 } 62 }
63 63
64 } 64 }
65 65
src/etc/AppSettings.ejemplo.ts
File was created 1 // export const APP_SETTINGS = {
2 // apiDeboSuite: 'http://localhost:1515',
3 // puntoVenta: 9998,
4 // numeroPlanilla: 1111,
5 // codigoP: 99996,
6 // terminal: 101,
7 // deploy: 'dev'
8 // };
9