Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit c6054a09bfb5bb217af3463f3866344a2fb12f47

Authored by Luis Suarez
2 parents 7e8c4a1298 eb989a5a2b
Exists in develop

resolviendo merges

Showing 30 changed files   Show diff stats
src/app/interfaces/IArticulo.ts
Diff comments   View file @ c6054a0
1 export interface IArticulo { 1 export interface IArticulo {
2 cantidad?: number; 2 cantidad?: number;
3 cantidadAdicionada?: number; 3 cantidadAdicionada?: number;
4 cantidadVendida?: number; 4 cantidadVendida?: number;
5 categoria_selfservice?: number; 5 categoria_selfservice?: number;
6 CodArt: number; 6 CodArt: number;
7 codigoBarra?: ICodigoBarra[]; 7 codigoBarra?: ICodigoBarra[];
8 CodSec: number; 8 CodSec: number;
9 DetArt: string; 9 DetArt: string;
10 DET_LAR: string; 10 DET_LAR: string;
11 ELBPRO: string; 11 ELBPRO: string;
12 esAdicionable?: boolean; 12 esAdicionable?: boolean;
13 esSustraible?: boolean; 13 esSustraible?: boolean;
14 FPP?: boolean; 14 FPP?: boolean;
15 id: number; 15 id: number;
16 idSinonimo?: number; 16 idSinonimo?: number;
17 ID_SIN?: number;
17 imagenes?: any[]; 18 imagenes?: any[];
18 ImpInt: number; 19 ImpInt: number;
19 ImpInt2: number; 20 ImpInt2: number;
20 ImpInt3: number; 21 ImpInt3: number;
21 importeValorExtra?: number; 22 importeValorExtra?: number;
22 PreVen: number; 23 PreVen: number;
23 PRO: boolean; 24 PRO: boolean;
24 productos?: IArticulo[]; 25 productos?: IArticulo[];
25 seleccionado?: boolean; 26 seleccionado?: boolean;
26 tieneSinonimo?: boolean; 27 tieneSinonimo?: boolean;
27 tipo_articulo?: number; 28 tipo_articulo?: number;
28 comentario?: string; 29 CODA?: number;
30 CODP?: number;
31 SECA?: number;
32 SECP?: number;
29 } 33 }
30 34
31 export interface ICodigoBarra { 35 export interface ICodigoBarra {
32 CodBar: string; 36 CodBar: string;
33 CodArt: number; 37 CodArt: number;
34 CodSec: string; 38 CodSec: string;
35 } 39 }
36 40
src/app/interfaces/ISinonimo.ts
Diff comments   View file @ c6054a0
File was created 1 import { IArticulo } from './IArticulo';
2
3 export interface ISinonimo {
4 ID_SIN: number;
5 descripcion: string;
6 productos: IArticulo[];
7 productoPadre?: number;
8 cantidad?: number;
9 }
10
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ c6054a0
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.carrito.splice(index, 1); 53 this.articuloService.deleteArticulo(index);
54 this.articuloService.calcularTotal();
55 } 54 }
56 55
57 substractCant(articulo: IArticulo) { 56 substractCant(articulo: IArticulo) {
58 if (articulo.cantidad === 1) return; 57 if (articulo.cantidad === 1) return;
59 articulo.cantidad--; 58 articulo.cantidad--;
60 this.articuloService.calcularTotal(); 59 this.articuloService.calcularTotal();
61 } 60 }
62 61
63 addCant(articulo: IArticulo) { 62 addCant(articulo: IArticulo) {
64 if (articulo.cantidad >= this.maxCantidad) return; 63 if (articulo.cantidad >= this.maxCantidad) return;
65 articulo.cantidad++; 64 articulo.cantidad++;
66 this.articuloService.calcularTotal(); 65 this.articuloService.calcularTotal();
67 } 66 }
68 67
69 goBack() { 68 goBack() {
70 this.location.back(); 69 this.location.back();
71 } 70 }
72 71
73 @HostListener('document:click', ['$event']) 72 @HostListener('document:click', ['$event'])
74 eventListener(event: Event) { 73 eventListener(event: Event) {
75 clearTimeout(this.inactiveScreen.timerReposo); 74 clearTimeout(this.inactiveScreen.timerReposo);
76 this.inactiveScreen.startTimeOutInactividad(); 75 this.inactiveScreen.startTimeOutInactividad();
77 } 76 }
78 77
78 @HostListener('scroll', ['$event'])
79 scrollEvent(event: Event) {
80 clearTimeout(this.inactiveScreen.timerReposo);
81 this.inactiveScreen.startTimeOutInactividad();
82 }
83
79 mediaPantallaP() { 84 mediaPantallaP() {
80 if ($('body').hasClass('media-pantalla')) { 85 if ($('body').hasClass('media-pantalla')) {
81 $('.carrito-content,.carrito-articulo').addClass('media-pantalla'); 86 $('.carrito-content,.carrito-articulo').addClass('media-pantalla');
82 } 87 }
83 } 88 }
84 } 89 }
src/app/modules/forma-pago/forma-pago.component.ts
Diff comments   View file @ c6054a0
1 import { Component, OnInit } from "@angular/core"; 1 import { Component, OnInit } from '@angular/core';
2 import { ArticuloService } from "src/app/services/articulo/articulo.service"; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { Router } from "@angular/router"; 3 import { Router } from '@angular/router';
4 4
5 @Component({ 5 @Component({
6 selector: "app-forma-pago", 6 selector: 'app-forma-pago',
7 templateUrl: "./forma-pago.component.html", 7 templateUrl: './forma-pago.component.html',
8 styleUrls: ["./forma-pago.component.scss"] 8 styleUrls: ['./forma-pago.component.scss']
9 }) 9 })
10 export class FormaPagoComponent implements OnInit { 10 export class FormaPagoComponent implements OnInit {
11 constructor( 11 constructor(
12 private articuloService: ArticuloService, 12 private articuloService: ArticuloService,
13 private router: Router 13 private router: Router
14 ) {} 14 ) {}
15 15
16 ngOnInit() { 16 ngOnInit() {
17 if (!this.articuloService.carrito.length) { 17 if (!this.articuloService.carrito.length) {
18 this.router.navigate([""]); 18 this.router.navigate(['']);
19 return; 19 return;
20 } 20 }
21 this.mediaPantalla(); 21 this.mediaPantalla();
22 } 22 }
23 23
24 medioPago(medioPago: number) { 24 medioPago(medioPago: number) {
25 this.articuloService.medioPago = medioPago; 25 this.articuloService.medioPago = medioPago;
26 switch (medioPago) { 26 switch (medioPago) {
27 case 4: 27 case 4:
28 this.router.navigate(["pago-tarjeta"]); 28 this.router.navigate(['pago-tarjeta']);
29 break; 29 break;
30 case 9: 30 case 9:
31 this.router.navigate(["pago-electronico"]); 31 this.router.navigate(['pago-electronico']);
32 break; 32 break;
33 } 33 }
34 } 34 }
35 35
36 mediaPantalla() { 36 mediaPantalla() {
37 if ($('body').hasClass('media-pantalla')) { 37 if ($('body').hasClass('media-pantalla')) {
38 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); 38 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
39 } 39 }
40 } 40 }
41 } 41 }
42 42
src/app/modules/info-formas-pago/info-formas-pago.component.html
Diff comments   View file @ c6054a0
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 class="col-7 col-lg-4 p-5 m-5 h-auto align-self-end border 14 <div
15 border-secondary rounded reduce-card-1"> 15 [routerLink]="['/opcion-pedido']"
16 class="col-7 col-xl-4 p-5 m-5 h-auto align-self-end
16 <img 17 border border-secondary rounded reduce-card-1">
17 draggable="false" 18 <img
18 ondragstart="return false;" 19 draggable="false"
19 (contextmenu)="false" 20 ondragstart="return false;"
20 class="img-in-top px-4 bg-white" 21 (contextmenu)="false"
21 src="assets/img/icono-tarjetas.svg"> 22 class="img-in-top px-4 bg-white"
22 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> 23 src="assets/img/icono-tarjetas.svg">
23 <p class="h2 mb-3 text-secondary"> 24 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
24 tarjetas y 25 <p class="h2 mb-3 text-secondary">
25 <img 26 tarjetas y
26 draggable="false" 27 <img
27 ondragstart="return false;" 28 draggable="false"
28 (contextmenu)="false" 29 ondragstart="return false;"
29 class="icon-150" 30 (contextmenu)="false"
30 src="assets/img/icono-mercado-pago.svg"> 31 class="icon-150"
31 </p> 32 src="assets/img/icono-mercado-pago.svg">
32 <div 33 </p>
33 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"
34 [routerLink]="['/opcion-pedido']">
35 CONTINUAR 34 <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white">
36 <img 35 CONTINUAR
37 draggable="false" 36 <img
38 ondragstart="return false;" 37 draggable="false"
39 (contextmenu)="false" 38 ondragstart="return false;"
40 class="icon-30" 39 (contextmenu)="false"
41 src="assets/img/ir.svg"> 40 class="icon-30"
42 </div> 41 src="assets/img/ir.svg">
43 </div> 42 </div>
44 <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border 43 </div>
45 border-primary rounded reduce-card-2"> 44 <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border
46 <img 45 border-primary rounded reduce-card-2">
47 draggable="false" 46 <img
48 ondragstart="return false;" 47 draggable="false"
49 (contextmenu)="false" 48 ondragstart="return false;"
50 class="img-in-top px-4 bg-white" 49 (contextmenu)="false"
51 src="assets/img/icono-efectivo.svg"> 50 class="img-in-top px-4 bg-white"
52 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 51 src="assets/img/icono-efectivo.svg">
53 <p class="h2 m-0 text-primary">te esperamos en la caja</p> 52 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
54 </div> 53 <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p>
55 </div> 54 </div>
56 </div> 55 </div>
57 </div> 56 </div>
src/app/modules/info-formas-pago/info-formas-pago.component.ts
Diff comments   View file @ c6054a0
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 2
3 @Component({ 3 @Component({
4 selector: 'app-formas-pago', 4 selector: 'app-formas-pago',
5 templateUrl: './info-formas-pago.component.html', 5 templateUrl: './info-formas-pago.component.html',
6 styleUrls: ['./info-formas-pago.component.scss'] 6 styleUrls: ['./info-formas-pago.component.scss']
7 }) 7 })
8 export class InfoFormasPagoComponent implements OnInit { 8 export class InfoFormasPagoComponent implements OnInit {
9 mediaPantalla = false; 9 mediaPantalla = false;
10 10
11 constructor() {} 11 constructor() { }
12 12
13 ngOnInit() { 13 ngOnInit() {
14 this.reducirPantalla(); 14 this.reducirPantalla();
15 } 15 }
16 16
17 reducirPantalla() { 17 reducirPantalla() {
18 if ($('body').hasClass('media-pantalla')) { 18 if ($('body').hasClass('media-pantalla')) {
19 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); 19 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
20 } 20 }
21 } 21 }
22 } 22 }
23 23
src/app/modules/opcion-pedido/opcion-pedido.component.html
Diff comments   View file @ c6054a0
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-85"> 12 <div class="h-85">
13 <div class="row mt-5 mx-3 h-auto"> 13 <div class="row mt-5 mx-3 h-auto">
14 <div class="col-12 px-0 py-2 align-self-center"> 14 <div class="col-12 px-0 py-2 align-self-center">
15 <p class="h6 text-truncate text-center">TU PEDIDO ES PARA</p> 15 <p class="h6 text-truncate text-center">TU PEDIDO ES PARA</p>
16 </div> 16 </div>
17 </div> 17 </div>
18 <div class="row mt-5 h-auto justify-content-center mx-0"> 18 <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"> 19 <div class="col-auto px-0 h-auto align-self-start reduce-card-1">
20 <div 20 <div
21 class="btn-effect col-auto align-self-center px-0 bg-white" 21 class="btn-effect col-auto align-self-center px-0 bg-white"
22 (click)="goTo('/seleccion-articulos'); seleccionPedido('comer aca')"> 22 (click)="goTo('/seleccion-articulos'); seleccionPedido('false')">
23 <div class="row mx-0 bg-primary badge-pill"> 23 <div class="row mx-0 bg-primary badge-pill">
24 <div class="col-auto p-0"> 24 <div class="col-auto p-0">
25 <img 25 <img
26 draggable="false" 26 draggable="false"
27 ondragstart="return false;" 27 ondragstart="return false;"
28 (contextmenu)="false" 28 (contextmenu)="false"
29 class="p-1 icon-50" 29 class="p-1 icon-50"
30 src="assets/img/icono-plato.svg"> 30 src="assets/img/icono-plato.svg">
31 </div> 31 </div>
32 <div class="col-auto align-self-center text-white">comer acá</div> 32 <div class="col-auto align-self-center text-white">comer acá</div>
33 <div class="col-auto align-self-center p-0"> 33 <div class="col-auto align-self-center p-0">
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="p-1 icon-30" 38 class="p-1 icon-30"
39 src="assets/img/ir.svg"> 39 src="assets/img/ir.svg">
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 <div class="row mt-4 h-auto justify-content-center mx-0"> 45 <div class="row mt-4 h-auto justify-content-center mx-0">
46 <div class="col-auto px-0 h-auto align-self-start reduce-card-2"> 46 <div class="col-auto px-0 h-auto align-self-start reduce-card-2">
47 <div 47 <div
48 class="btn-effect col-auto align-self-center px-0 bg-white" 48 class="btn-effect col-auto align-self-center px-0 bg-white"
49 (click)="goTo('/seleccion-articulos'); seleccionPedido('para llevar')"> 49 (click)="goTo('/seleccion-articulos'); seleccionPedido('true')">
50 <div class="row mx-0 bg-primary badge-pill"> 50 <div class="row mx-0 bg-primary badge-pill">
51 <div class="col-auto p-0"> 51 <div class="col-auto p-0">
52 <img 52 <img
53 draggable="false" 53 draggable="false"
54 ondragstart="return false;" 54 ondragstart="return false;"
55 (contextmenu)="false" 55 (contextmenu)="false"
56 class="p-1 icon-50" 56 class="p-1 icon-50"
57 src="assets/img/icono-take-away.svg"> 57 src="assets/img/icono-take-away.svg">
58 </div> 58 </div>
59 <div class="col-auto align-self-center text-white">para llevar</div> 59 <div class="col-auto align-self-center text-white">para llevar</div>
60 <div class="col-auto align-self-center p-0"> 60 <div class="col-auto align-self-center p-0">
61 <img 61 <img
62 draggable="false" 62 draggable="false"
63 ondragstart="return false;" 63 ondragstart="return false;"
64 (contextmenu)="false" 64 (contextmenu)="false"
65 class="p-1 icon-30" 65 class="p-1 icon-30"
66 src="assets/img/ir.svg"> 66 src="assets/img/ir.svg">
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 </div> 71 </div>
72 </div> 72 </div>
73 </div> 73 </div>
74 74
src/app/modules/opcion-pedido/opcion-pedido.component.ts
Diff comments   View file @ c6054a0
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 localStorage.setItem('pedidoPara', lugar); 24 lugar === 'true' ? lugar = true : false;
25 localStorage.setItem('pedidoParaLlevar', lugar);
25 } 26 }
26 27
27 reducirPantalla() { 28 reducirPantalla() {
28 if ($('body').hasClass('media-pantalla')) { 29 if ($('body').hasClass('media-pantalla')) {
29 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); 30 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
30 } 31 }
31 } 32 }
32 } 33 }
33 34
src/app/modules/pago-electronico/pago-electronico.component.scss
Diff comments   View file @ c6054a0
1 .mt-6 {
2 margin-top: 4.5rem;
3 }
4
5 .mt-7 { 1 .mt-7 {
6 margin-top: 6rem; 2 margin-top: 6rem;
7 }
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ c6054a0
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': 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': 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-0 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)="elegirArticulo(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>
107 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
108 <small>{{articulo.DET_LAR}}</small>
109 </p> 106 </p>
110 <div class="col-12 px-1 align-self-end h-auto"> 107 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
111 <div 108 <small>{{articulo.DET_LAR}}</small>
112 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 109 </p>
113 class="row mx-0 justify-content-between badge-pill"> 110 <div class="col-12 px-1 align-self-end h-auto">
114 <div class="col px-0 align-self-center text-white text-right"> 111 <div
115 {{articulo.PreVen | currency}} 112 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
116 </div> 113 class="row mx-0 justify-content-between badge-pill">
117 <div class="col-5 px-0"> 114 <div class="col px-0 align-self-center text-white text-right">
118 <img 115 {{articulo.PreVen | currency}}
119 draggable="false" 116 </div>
120 ondragstart="return false;" 117 <div class="col-5 px-0">
121 (contextmenu)="false" 118 <img
122 class="d-block ml-auto py-1 icon-30" 119 draggable="false"
123 src="assets/img/ir.svg"> 120 ondragstart="return false;"
124 </div> 121 (contextmenu)="false"
125 </div> 122 class="d-block ml-auto py-1 icon-30"
126 </div> 123 src="assets/img/ir.svg">
127 </div> 124 </div>
128 </div> 125 </div>
129 </div> 126 </div>
130 </div> 127 </div>
131 <!-- BOTON VER MAS --> 128 </div>
132 <div class="row mx-0"> 129 </div>
133 <div 130 </div>
134 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 131 <!-- BOTON VER MAS -->
135 class="col-12 px-0 mb-2"> 132 <div class="row mx-0">
136 <button 133 <div
137 (click)="increaseShow()" 134 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
138 class="btn btn-block btn-outline-primary"> 135 class="col-12 px-0 mb-2">
139 Ver Más 136 <button
140 </button> 137 (click)="increaseShow()"
141 </div> 138 class="btn btn-block btn-outline-primary">
142 </div> 139 Ver Más
143 </div> 140 </button>
144 </div> 141 </div>
145 </div> 142 </div>
146 </div> 143 </div>
147 <!-- FOOTER CARRITO DE COMPRAS --> 144 </div>
148 <div class="row w-90 mx-auto h-auto justify-content-center"> 145 </div>
149 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 146 </div>
150 [ngClass]="boxCarrito.classList.contains('media-pantalla') 147 <!-- FOOTER CARRITO DE COMPRAS -->
151 ? 'col-8' : 'col-12'" id="boxCarrito"> 148 <div class="row w-90 mx-auto h-auto justify-content-center">
152 <!-- CABECERA --> 149 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
153 <div class="row mx-0 h-15 border-bottom border-primary"> 150 [ngClass]="boxCarrito.classList.contains('media-pantalla')
154 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 151 ? 'col-8' : 'col-12'" id="boxCarrito">
155 </div> 152 <!-- CABECERA -->
156 <!-- CUERPO --> 153 <div class="row mx-0 h-15 border-bottom border-primary">
157 <div class="row h-85 mx-0 justify-content-around"> 154 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
158 <!-- BOTON SCROLL IZQUIERDA --> 155 </div>
159 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 156 <!-- CUERPO -->
160 <img 157 <div class="row h-85 mx-0 justify-content-around">
161 draggable="false" 158 <!-- BOTON SCROLL IZQUIERDA -->
162 ondragstart="return false;" 159 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
163 (contextmenu)="false" 160 <img
164 class="icon-30 rotate-180-neg" 161 draggable="false"
165 src="assets/img/ir-fondo-color.svg" 162 ondragstart="return false;"
166 (mousedown)="scrollX(templateCarrito, -100)" 163 (contextmenu)="false"
167 (mouseup)="mouseup()" 164 class="icon-30 rotate-180-neg"
168 (mouseleave)="mouseup()"> 165 src="assets/img/ir-fondo-color.svg"
169 </div> 166 (mousedown)="scrollX(templateCarrito, -100)"
170 <!-- CARRITO --> 167 (mouseup)="mouseup()"
171 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 168 (mouseleave)="mouseup()">
172 <div 169 </div>
173 #templateCarrito 170 <!-- CARRITO -->
174 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 171 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
175 (scroll)="scrollEvent($event)"> 172 <div
176 <!-- MENSAJE DE ADVERTENCIA --> 173 #templateCarrito
177 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 174 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
178 <p class="text-center py-5">No hay articulos en el carrito</p> 175 (scroll)="scrollEvent($event)">
179 </div> 176 <!-- MENSAJE DE ADVERTENCIA -->
180 <!-- ARTICULOS --> 177 <div *ngIf="!articuloService.carrito.length" class="col h-100">
181 <div 178 <p class="text-center py-5">No hay articulos en el carrito</p>
182 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 179 </div>
183 *ngFor="let articulo of articuloService.carrito; let i = index;"> 180 <!-- ARTICULOS -->
184 <div class="swing-in-top-fwd"> 181 <div
185 <img 182 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
186 class="btn-effect icon-20 position-absolute right-0" 183 *ngFor="let articulo of articuloService.carrito; let i = index;">
187 src="assets/img/icono-cancelar-color.svg" 184 <div class="swing-in-top-fwd">
188 (click)="deleteArticulo(i)"> 185 <img
189 <img 186 class="btn-effect icon-20 position-absolute right-0"
190 draggable="false" 187 src="assets/img/icono-cancelar-color.svg"
191 ondragstart="return false;" 188 (click)="deleteArticulo(i)">
192 (contextmenu)="false" 189 <img
193 class="d-block img-fluid p-2 mx-auto rounded" 190 draggable="false"
194 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 191 ondragstart="return false;"
195 onerror="this.src='assets/img/image-not-found.jpg'"> 192 (contextmenu)="false"
196 <p class="d-block mt-auto text-center text-primary text-truncate"> 193 class="d-block img-fluid p-2 mx-auto rounded"
197 <small>{{articulo.DetArt | uppercase}}</small> 194 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
198 </p> 195 onerror="this.src='assets/img/image-not-found.jpg'">
199 </div> 196 <p class="d-block mt-auto text-center text-primary text-truncate">
200 </div> 197 <small>{{articulo.DetArt | uppercase}}</small>
201 </div> 198 </p>
202 </div> 199 </div>
203 <!-- BOTON SCROLL DERECHA --> 200 </div>
204 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 201 </div>
205 <img 202 </div>
206 draggable="false" 203 <!-- BOTON SCROLL DERECHA -->
207 ondragstart="return false;" 204 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
208 (contextmenu)="false" 205 <img
209 class="icon-30" 206 draggable="false"
210 src="assets/img/ir-fondo-color.svg" 207 ondragstart="return false;"
211 (mousedown)="scrollX(templateCarrito, 100)" 208 (contextmenu)="false"
212 (mouseup)="mouseup()" 209 class="icon-30"
213 (mouseleave)="mouseup()"> 210 src="assets/img/ir-fondo-color.svg"
214 </div> 211 (mousedown)="scrollX(templateCarrito, 100)"
215 </div> 212 (mouseup)="mouseup()"
216 </div> 213 (mouseleave)="mouseup()">
217 <!-- TOTAL--> 214 </div>
218 <div 215 </div>
219 class="col-auto mt-2 ml-auto h-20"> 216 </div>
220 <div class="row mx-0"> 217 <!-- TOTAL-->
221 <div class="col-auto align-self-center text-primary">TOTAL</div> 218 <div
222 <div class="col-auto bg-primary badge-pill"> 219 class="col-auto mt-2 ml-auto h-20">
223 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 220 <div class="row mx-0">
224 </div> 221 <div class="col-auto align-self-center text-primary">TOTAL</div>
225 </div> 222 <div class="col-auto bg-primary badge-pill">
226 </div> 223 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
227 224 </div>
228 <!-- VER CARRITO --> 225 </div>
229 <div 226 </div>
230 class="col-auto px-0 mt-2 h-20" 227
231 *ngIf="articuloService.carrito.length" 228 <!-- VER CARRITO -->
232 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 229 <div
233 <div 230 class="col-auto px-0 mt-2 h-20"
234 class="btn-effect col-auto px-0 align-self-center bg-white" 231 *ngIf="articuloService.carrito.length"
235 [routerLink]="['/carrito']"> 232 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
236 <div class="row mx-0 bg-light"> 233 <div
237 <div class="col-auto p-0 bg-primary"> 234 class="btn-effect col-auto px-0 align-self-center bg-white"
238 <img 235 [routerLink]="['/carrito']">
239 draggable="false" 236 <div class="row mx-0 bg-light">
240 ondragstart="return false;" 237 <div class="col-auto p-0 bg-primary">
241 (contextmenu)="false" 238 <img
242 class="p-2 icon-40" 239 draggable="false"
243 src="assets/img/carrito.svg"> 240 ondragstart="return false;"
244 </div> 241 (contextmenu)="false"
245 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 242 class="p-2 icon-40"
246 </div> 243 src="assets/img/carrito.svg">
247 </div> 244 </div>
248 </div> 245 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
249 246 </div>
250 </div> 247 </div>
251 </div> 248 </div>
252 249
253 </div> 250 </div>
254 251 </div>
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ c6054a0
1 $primary: #aa006b; 1 $primary: #aa006b;
2 2
3 .box-categorias { 3 .box-categorias {
4 height: calc(100% - 100px) !important; 4 height: calc(100% - 100px) !important;
5 } 5 }
6 6
7 .active { 7 .active {
8 background-color: white; 8 background-color: white;
9 border-bottom: 3px solid $primary !important; 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;
10 } 13 }
11 14
12 .border-bottom-effect { 15 .border-bottom-effect {
13 border: none; 16 border: none;
14 position: relative; 17 position: relative;
15 &:hover { 18 &:hover {
16 border: none; 19 border: none;
17 } 20 }
18 &::after { 21 &::after {
19 content: ""; 22 content: "";
20 position: absolute; 23 position: absolute;
21 width: 0px; 24 width: 0px;
22 height: 3px; 25 height: 3px;
23 left: 50%; 26 left: 50%;
24 bottom: 0; 27 bottom: 0;
25 background-color: $primary; 28 background-color: $primary;
26 transition: all ease-in-out 0.2s; 29 transition: all ease-in-out 0.2s;
27 } 30 }
28 &:hover::after { 31 &:hover::after {
29 width: 100%; 32 width: 100%;
30 left: 0; 33 left: 0;
31 } 34 }
32 } 35 }
33 36
34 .card { 37 .card {
35 border: none; 38 border: none;
36 } 39 }
37 40
38 .line-height-sm { 41 .line-height-sm {
39 line-height: 1.2; 42 line-height: 1.2;
40 } 43 }
41 44
42 #content.media-pantalla,#boxCarrito.media-pantalla { 45 #content.media-pantalla,#boxCarrito.media-pantalla {
43 max-height: 60% !important; 46 max-height: 60% !important;
44 } 47 }
45 48
46 .cat-content.media-pantalla { 49 .cat-content.media-pantalla {
47 margin: 0.5rem 0.7rem !important; 50 margin: 0.5rem 0.7rem !important;
48 height: 76% !important; 51 height: 76% !important;
49 } 52 }
50 53
51 .cat-box.media-pantalla{ 54 .cat-box.media-pantalla{
52 height: calc(100% - 85px) !important; 55 height: calc(100% - 85px) !important;
53 } 56 }
54 57
55 .cat-btn.media-pantalla { 58 .cat-btn.media-pantalla {
56 height: 7% !important; 59 height: 7% !important;
57 } 60 }
58 61
59 .img-categoria.media-pantalla{ 62 .img-categoria.media-pantalla{
60 min-height: 40px !important; 63 min-height: 40px !important;
61 } 64 }
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ c6054a0
1 import { Component, OnInit, TemplateRef, OnDestroy, HostListener } from '@angular/core'; 1 import { Component, OnInit, OnDestroy, HostListener } 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 { CategoriaService } from 'src/app/services/categoria/categoria.service'; 8 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
8 import { PromocionService } from 'src/app/services/promocion/promocion.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';
12 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
11 13
12 @Component({ 14 @Component({
13 selector: 'app-seleccion-articulos', 15 selector: 'app-seleccion-articulos',
14 templateUrl: './seleccion-articulos.component.html', 16 templateUrl: './seleccion-articulos.component.html',
15 styleUrls: ['./seleccion-articulos.component.scss'] 17 styleUrls: ['./seleccion-articulos.component.scss']
16 }) 18 })
17 export class SeleccionArticulosComponent implements OnInit, OnDestroy { 19 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
18 showSpinner = true; 20 showSpinner = true;
19 timeoutHandler: any; 21 timeoutHandler: any;
20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 22 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
21 articulos: IArticulo[] = []; 23 articulos: IArticulo[] = [];
22 auxArticulos: IArticulo[] = []; 24 auxArticulos: IArticulo[] = [];
23 showQuantity = 100; 25 showQuantity = 100;
24 queMostrar = 'todos'; 26 queMostrar = 'todos';
25 categoriaActive = null; 27 categoriaActive = null;
26 categorias: ICategoria[] = []; 28 categorias: ICategoria[] = [];
27 searchTerm = ''; 29 searchTerm = '';
28 ordenandoByVendidos = true; 30 ordenandoByVendidos = true;
29 allActive = true; 31 allActive = true;
30 modalRef: BsModalRef; 32 modalRef: BsModalRef;
31 total = 0; 33 total = 0;
32 modalClass = ''; 34 modalClass = '';
33 35
34 constructor( 36 constructor(
35 public articuloService: ArticuloService, 37 public articuloService: ArticuloService,
38 private categoriaService: CategoriaService,
36 private categoriaService: CategoriaService, 39 private sinonimoService: SinonimoService,
37 private modalService: BsModalService, 40 private modalService: BsModalService,
38 private inactiveScreen: InactiveScreenService, 41 private inactiveScreen: InactiveScreenService,
39 ) { } 42 ) { }
40 43
41 ngOnInit() { 44 ngOnInit() {
42 this.getCategorias(); 45 this.getCategorias();
43 this.mediaPantalla(); 46 this.mediaPantalla();
44 } 47 }
45 48
46 ngOnDestroy() { 49 ngOnDestroy() {
50 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
51 this.modalService.hide(i);
47 if (this.modalRef) this.modalRef.hide(); 52 }
48 } 53 }
49 54
50 getCategorias() { 55 getCategorias() {
51 this.categoriaService.getAll() 56 this.categoriaService.getAll()
52 .subscribe((categorias: ICategoria[]) => { 57 .subscribe((categorias: ICategoria[]) => {
53 switch (this.queMostrar) { 58 switch (this.queMostrar) {
54 case 'todos': 59 case 'todos':
55 this.categorias = categorias; 60 this.categorias = categorias;
56 this.categoriaActive = 0; 61 this.categoriaActive = 0;
57 break; 62 break;
58 case 'promociones': 63 case 'promociones':
59 this.categorias = categorias; 64 this.categorias = categorias;
60 this.categoriaActive = 19; 65 this.categoriaActive = 19;
61 break; 66 break;
62 case 'ordenar': 67 case 'ordenar':
63 this.categorias = categorias.filter((categoria: ICategoria) => { 68 this.categorias = categorias.filter((categoria: ICategoria) => {
64 return categoria.ES_PEDIDO; 69 return categoria.ES_PEDIDO;
65 }); 70 });
66 this.categoriaActive = 4; 71 this.categoriaActive = 4;
67 break; 72 break;
68 default: 73 default:
69 this.categorias = categorias; 74 this.categorias = categorias;
70 this.categoriaActive = 0; 75 this.categoriaActive = 0;
71 break; 76 break;
72 } 77 }
73 !localStorage.getItem('articulos') ? 78 !localStorage.getItem('articulos') ?
74 this.getProductos() : 79 this.getProductos() :
75 this.setProductos(); 80 this.setProductos();
76 }); 81 });
77 } 82 }
78 83
79 getProductos() { 84 getProductos() {
80 this.articuloService.getAll() 85 this.articuloService.getAll()
81 .subscribe((result: IArticulo[]) => { 86 .subscribe((result: IArticulo[]) => {
82 this.articuloService.setArticulosSinImagen(result); 87 this.articuloService.setArticulosSinImagen(result);
83 if (this.queMostrar === 'ordenar') { 88 if (this.queMostrar === 'ordenar') {
84 this.categorias.forEach((categoria: ICategoria) => { 89 this.categorias.forEach((categoria: ICategoria) => {
85 const tempArticulos = result.filter((articulo: IArticulo) => { 90 const tempArticulos = result.filter((articulo: IArticulo) => {
86 return articulo.categoria_selfservice === categoria.id; 91 return articulo.categoria_selfservice === categoria.id;
87 }); 92 });
88 result = tempArticulos; 93 result = tempArticulos;
89 }); 94 });
90 } 95 }
91 localStorage.setItem('articulos', JSON.stringify(result)); 96 localStorage.setItem('articulos', JSON.stringify(result));
92 this.setProductos(); 97 this.setProductos();
93 }, (error) => { 98 }, (error) => {
94 this.showSpinner = false; 99 this.showSpinner = false;
95 console.error(error); 100 console.error(error);
96 }); 101 });
97 } 102 }
98 103
99 setProductos() { 104 setProductos() {
100 this.articulos = JSON.parse(localStorage.getItem('articulos')); 105 this.articulos = JSON.parse(localStorage.getItem('articulos'));
101 this.filterItems(); 106 this.filterItems();
102 } 107 }
103 108
104 filterItems() { 109 filterItems() {
105 if (this.categoriaActive === 0) { 110 if (this.categoriaActive === 0) {
106 this.auxArticulos = this.articulos; 111 this.auxArticulos = this.articulos;
107 return; 112 return;
108 } 113 }
109 this.auxArticulos = this.articulos.filter(x => { 114 this.auxArticulos = this.articulos.filter(x => {
110 return x.categoria_selfservice === this.categoriaActive; 115 return x.categoria_selfservice === this.categoriaActive;
111 }); 116 });
112 this.ordenar(); 117 this.ordenar();
113 } 118 }
114 119
115 ordenar() { 120 ordenar() {
116 if (this.ordenandoByVendidos) { 121 if (this.ordenandoByVendidos) {
117 this.auxArticulos.sort((a, b) => { 122 this.auxArticulos.sort((a, b) => {
118 return b.cantidadVendida - a.cantidadVendida; 123 return b.cantidadVendida - a.cantidadVendida;
119 }); 124 });
120 } 125 }
121 } 126 }
122 127
123 selectCategoria(index: number, idCategoria?: number) { 128 selectCategoria(index: number, idCategoria?: number) {
124 if (this.categoriaActive === idCategoria) return; 129 if (this.categoriaActive === idCategoria) return;
125 this.categoriaActive = idCategoria; 130 this.categoriaActive = idCategoria;
126 this.allActive = idCategoria === 0 ? true : false; 131 this.allActive = idCategoria === 0 ? true : false;
127 this.categorias.forEach((categoria, i) => { 132 this.categorias.forEach((categoria, i) => {
128 categoria.selected = index === i ? true : false; 133 categoria.selected = index === i ? true : false;
129 }); 134 });
130 this.filterItems(); 135 this.filterItems();
131 } 136 }
132 137
133 elegirArticulo(articulo: IArticulo) { 138 selectArticulo(articulo: IArticulo) {
134 if (!articulo.FPP) {
135 this.getByID(articulo.id);
136 } else {
137 this.openModalPromos(articulo);
138 } 139 this.getByID(articulo.id);
139 } 140 }
140 141
141 getByID(id: number) { 142 getByID(id: number) {
142 this.articuloService.getById(id) 143 this.articuloService.getById(id)
143 .subscribe((res: IArticulo) => { 144 .subscribe((res: IArticulo) => {
144 res.cantidad = 1; 145 if (res.FPP) {
146 this.openModalPromos(res);
147 } else {
148 this.getSinonimos(res);
145 this.articuloService.setArticulo(res); 149 }
146 }, err => console.error(err)); 150 }, err => console.error(err));
147 } 151 }
152
153 getSinonimos(articulo: IArticulo) {
154 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
155 .subscribe((res: ISinonimo[]) => {
156 if (res.length) {
157 this.openModalSinonimos(res, articulo);
158 } else {
159 this.articuloService.setArticulo(articulo);
160 }
161 });
162 }
148 163
149 openModalPromos(articulo: IArticulo) { 164 openModalPromos(articulo: IArticulo) {
150 this.modalRef = this.modalService.show(PromocionComponent, 165 this.modalRef = this.modalService.show(PromocionComponent, {
151 { 166 initialState: { articulosPromo: [articulo] },
152 initialState: { 167 class: 'modal-promo modal-dialog-centered'
153 idArticulo: articulo.id 168 });
154 }, 169 }
170
171 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
172 this.modalRef = this.modalService.show(SinonimoComponent, {
173 initialState: { sinonimos: sinonimosData },
174 class: 'modal-promo modal-dialog-centered'
175 });
176
177 this.modalRef.content.onClose
178 .subscribe((res: any) => {
179 for (const a of articulo.productos) {
180 if (a.idSinonimo === res.ID_SIN) {
181 a.CODA = res.articulo.CodArt;
182 a.CodArt = res.articulo.CodArt;
183 a.SECA = res.articulo.CodSec;
184 a.CodSec = res.articulo.CodSec;
185 a.PreVen = res.articulo.PreVen;
186 a.id = res.articulo.id;
187 a.DET_LAR = res.articulo.DET_LAR;
188 a.DetArt = res.articulo.DetArt;
189 }
190 }
155 class: 'modal-promo modal-dialog-centered' 191 this.articuloService.setArticulo(articulo);
156 }); 192 });
157 } 193 }
158 194
159 deleteArticulo(index: number) { 195 deleteArticulo(index: number) {
160 this.articuloService.carrito.splice(index, 1);
161 this.articuloService.calcularTotal(); 196 this.articuloService.deleteArticulo(index);
162 } 197 }
163 198
164 increaseShow() { 199 increaseShow() {
165 this.showQuantity += 100; 200 this.showQuantity += 100;
166 } 201 }
167 202
168 @HostListener('scroll', ['$event']) 203 @HostListener('scroll', ['$event'])
169 scrollEvent(event: Event) { 204 scrollEvent(event: Event) {
170 clearTimeout(this.inactiveScreen.timerReposo); 205 clearTimeout(this.inactiveScreen.timerReposo);
171 this.inactiveScreen.startTimeOutInactividad(); 206 this.inactiveScreen.startTimeOutInactividad();
172 } 207 }
173 208
174 mouseup() { 209 mouseup() {
175 if (!this.timeoutHandler) return; 210 if (!this.timeoutHandler) return;
176 clearInterval(this.timeoutHandler); 211 clearInterval(this.timeoutHandler);
177 } 212 }
178 213
179 scrollY(el: HTMLElement, value) { 214 scrollY(el: HTMLElement, value) {
180 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 215 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
181 this.timeoutHandler = setInterval(() => { 216 this.timeoutHandler = setInterval(() => {
182 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 217 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
183 }, 500); 218 }, 500);
184 } 219 }
185 220
186 scrollX(el: HTMLElement, value) { 221 scrollX(el: HTMLElement, value) {
187 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 222 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
188 this.timeoutHandler = setInterval(() => { 223 this.timeoutHandler = setInterval(() => {
189 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 224 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
190 }, 500); 225 }, 500);
191 } 226 }
192 227
193 mediaPantalla() { 228 mediaPantalla() {
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ c6054a0
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';
11 import { FormsModule } from '@angular/forms';
10 import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component'; 12 import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
11 13
12 @NgModule({ 14 @NgModule({
13 declarations: [ 15 declarations: [
14 SeleccionArticulosComponent, 16 SeleccionArticulosComponent,
15 HeaderPublicidadComponent, 17 HeaderPublicidadComponent,
16 PromocionComponent, 18 PromocionComponent,
19 SinonimoComponent,
17 ConfirmacionComponent 20 ConfirmacionComponent
18 ], 21 ],
19 imports: [ 22 imports: [
20 CommonModule, 23 CommonModule,
21 SeleccionArticulosRoutingModule, 24 SeleccionArticulosRoutingModule,
25 FormsModule,
22 ModalModule.forRoot(), 26 ModalModule.forRoot(),
23 CarouselModule.forRoot(), 27 CarouselModule.forRoot(),
24 SharedModule 28 SharedModule
25 ], 29 ],
26 exports: [HeaderPublicidadComponent], 30 exports: [HeaderPublicidadComponent],
27 entryComponents: [PromocionComponent, ConfirmacionComponent] 31 entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent]
28 }) 32 })
29 export class SeleccionArticulosModule { } 33 export class SeleccionArticulosModule { }
30 34
src/app/modules/shared/shared.module.ts
Diff comments   View file @ c6054a0
1 import { NgModule, ModuleWithProviders } from '@angular/core'; 1 import { NgModule, ModuleWithProviders } 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 { CategoriaService } from 'src/app/services/categoria/categoria.service'; 3 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
4 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
4 5
5 @NgModule({}) 6 @NgModule({})
6 export class SharedModule { 7 export class SharedModule {
7 static forRoot(): ModuleWithProviders { 8 static forRoot(): ModuleWithProviders {
8 return { 9 return {
9 ngModule: SharedModule, 10 ngModule: SharedModule,
10 providers: [ 11 providers: [
11 ArticuloService, 12 ArticuloService,
12 CategoriaService 13 CategoriaService,
14 SinonimoService
13 ] 15 ]
14 }; 16 };
15 } 17 }
16 } 18 }
17 19
src/app/modules/splash-screen/splash-screen.component.ts
Diff comments   View file @ c6054a0
1 import { Component, OnInit } from "@angular/core"; 1 import { Component, OnInit } from '@angular/core';
2 2
3 @Component({ 3 @Component({
4 selector: "app-splash-screen", 4 selector: 'app-splash-screen',
5 templateUrl: "./splash-screen.component.html", 5 templateUrl: './splash-screen.component.html',
6 styleUrls: ["./splash-screen.component.scss"] 6 styleUrls: ['./splash-screen.component.scss']
7 }) 7 })
8 export class SplashScreenComponent implements OnInit { 8 export class SplashScreenComponent implements OnInit {
9 timerSplashScreen = 2000; 9 timerSplashScreen = 2000;
10 showSplashScreen = true; 10 showSplashScreen = true;
11 textWelcome = "BIENVENIDO A SPOT!"; 11 textWelcome = 'BIENVENIDO A SPOT!';
12 textComoEstas = "¿cómo estás?"; 12 textComoEstas = '¿cómo estás?';
13 textInvitamos = "TE INVITAMOS A HACER"; 13 textInvitamos = 'TE INVITAMOS A HACER';
14 textTuPedido = "tu pedido acá"; 14 textTuPedido = 'tu pedido acá';
15 15
16 constructor() {} 16 constructor() {}
17 17
18 ngOnInit() { 18 ngOnInit() {
19 localStorage.clear(); 19 localStorage.clear();
20 setTimeout(() => { 20 setTimeout(() => {
21 this.showSplashScreen = false; 21 this.showSplashScreen = false;
22 }, this.timerSplashScreen); 22 }, this.timerSplashScreen);
23 $('body').removeClass('media-pantalla'); 23 $('body').removeClass('media-pantalla');
24 } 24 }
25 } 25 }
26 26
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ c6054a0
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 19
20 constructor( 20 constructor(
21 private http: HttpClient, 21 private http: HttpClient,
22 private clienteService: ClienteService, 22 private clienteService: ClienteService,
23 ) { } 23 ) { }
24 24
25 getById(id) { 25 getById(id) {
26 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`); 26 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
27 } 27 }
28 28
29 getAll() { 29 getAll() {
30 return this.http.get(`${this.urlDeboSuite}/articulos/`); 30 return this.http.get(`${this.urlDeboSuite}/articulos/`);
31 } 31 }
32 32
33 getAllWithPaginator(page: number = 1) { 33 getAllWithPaginator(page: number = 1) {
34 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`); 34 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
35 } 35 }
36 36
37 calcularTotal() { 37 calcularTotal() {
38 this.subTotal = 0; 38 this.subTotal = 0;
39 this.carrito.forEach(articulo => { 39 this.carrito.forEach(articulo => {
40 this.subTotal += (articulo.PreVen * articulo.cantidad); 40 this.subTotal += (articulo.PreVen * articulo.cantidad);
41 }); 41 });
42 } 42 }
43 43
44 setArticulo(articulo: IArticulo) { 44 setArticulo(articulo: IArticulo) {
45 articulo.cantidad = 1;
45 for (const articuloCarrito of this.carrito) { 46 for (const articuloCarrito of this.carrito) {
46 if (articuloCarrito.id === articulo.id) { 47 if (articuloCarrito.id === articulo.id && !articulo.productos.length) {
47 articuloCarrito.cantidad++; 48 articuloCarrito.cantidad++;
48 this.calcularTotal(); 49 this.calcularTotal();
49 return; 50 return;
50 } 51 }
51 } 52 }
52 this.setArticulosSinImagen([articulo]); 53 this.setArticulosSinImagen([articulo]);
53 this.carrito.unshift(articulo); 54 this.carrito.unshift(articulo);
54 this.calcularTotal(); 55 this.calcularTotal();
55 } 56 }
56 57
58 deleteArticulo(index: number) {
59 this.carrito.splice(index, 1);
60 this.calcularTotal();
61 }
62
57 pay(dataPago: any) { 63 pay(dataPago: any) {
58 return new Observable((observer) => { 64 return new Observable((observer) => {
59 this.clienteService.getById(-1) 65 this.clienteService.getById(-1)
60 .subscribe(cliente => { 66 .subscribe(cliente => {
61 this.markArticuloInPromoAsRemoved(); 67 this.markArticuloInPromoAsRemoved();
62 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, { 68 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
63 productos: this.carrito, 69 productos: this.carrito,
64 cliente, 70 cliente,
65 origen: 'autoservicio', 71 origen: 'autoservicio',
66 codigoVendedor: 5, 72 codigoVendedor: 5,
67 puntoVenta: APP_SETTINGS.puntoVenta, 73 puntoVenta: APP_SETTINGS.puntoVenta,
68 pedidoAnombreDe: dataPago.pedidoAnombreDe, 74 pedidoAnombreDe: dataPago.pedidoAnombreDe,
69 numeroPlanilla: APP_SETTINGS.numeroPlanilla, 75 numeroPlanilla: APP_SETTINGS.numeroPlanilla,
76 pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'),
70 }) 77 })
71 .subscribe((data) => { 78 .subscribe((data) => {
72 observer.next(data); 79 observer.next(data);
73 observer.complete(); 80 observer.complete();
74 }); 81 });
75 }); 82 });
76 }); 83 });
77 } 84 }
78 85
79 cleanShoppingCar() { 86 cleanShoppingCar() {
80 this.articuloAcargar = undefined; 87 this.articuloAcargar = undefined;
81 this.promoAcargar = undefined; 88 this.promoAcargar = undefined;
82 this.carrito = []; 89 this.carrito = [];
83 } 90 }
84 91
85 setArticulosSinImagen(articulos: IArticulo[]) { 92 setArticulosSinImagen(articulos: IArticulo[]) {
86 articulos.forEach((articulo: IArticulo) => { 93 articulos.forEach((articulo: IArticulo) => {
87 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : 94 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
88 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; 95 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
89 }); 96 });
90 } 97 }
91 98
92 markArticuloInPromoAsRemoved() { 99 markArticuloInPromoAsRemoved() {
93 this.carrito.forEach((articuloCarrito: IArticulo) => { 100 this.carrito.forEach((articuloCarrito: IArticulo) => {
94 if (articuloCarrito.PRO) { 101 if (articuloCarrito.PRO) {
95 articuloCarrito.productos.forEach((articulo: IArticulo) => { 102 articuloCarrito.productos.forEach((articulo: IArticulo) => {
96 if (articulo.cantidadAdicionada === 0) { 103 if (articulo.cantidadAdicionada === 0) {
97 articulo.cantidad = 0; 104 articulo.cantidad = 0;
98 articulo.importeValorExtra = 0; 105 articulo.importeValorExtra = 0;
99 } 106 }
100 }); 107 });
101 } 108 }
102 }); 109 });
103 } 110 }
104 } 111 }
105 112
src/app/services/sinonimo/sinonimo.service.ts
Diff comments   View file @ c6054a0
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { APP_SETTINGS } from 'src/etc/AppSettings'; 2 import { APP_SETTINGS } from 'src/etc/AppSettings';
3 import { HttpClient } from '@angular/common/http'; 3 import { HttpClient } from '@angular/common/http';
4 4
5 @Injectable({ 5 @Injectable({
6 providedIn: 'root' 6 providedIn: 'root'
7 }) 7 })
8 export class SinonimoService { 8 export class SinonimoService {
9 urlDeboSuite = APP_SETTINGS.apiDeboSuite; 9 urlDeboSuite = APP_SETTINGS.apiDeboSuite;
10 10
11 constructor( 11 constructor(
12 private http: HttpClient, 12 private http: HttpClient,
13 ) { } 13 ) { }
14 14
15 getPromocionSinonimos(sector, codigo) { 15 getSinonimos(sector, codigo) {
16 return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`); 16 return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`);
17 } 17 }
18 } 18 }
19 19
src/app/shared/confirmacion/confirmacion.component.ts
Diff comments   View file @ c6054a0
1 import { Component, OnInit, HostListener } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { BsModalRef } from 'ngx-bootstrap/modal'; 2 import { BsModalRef } from 'ngx-bootstrap/modal';
5 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 3 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
6 import { Subject } from 'rxjs'; 4 import { Subject } from 'rxjs';
5 import { APP_SETTINGS } from 'src/etc/AppSettings';
7 6
8 @Component({ 7 @Component({
9 selector: 'app-confirmacion', 8 selector: 'app-confirmacion',
10 templateUrl: './confirmacion.component.html', 9 templateUrl: './confirmacion.component.html',
11 styleUrls: ['./confirmacion.component.scss'] 10 styleUrls: ['./confirmacion.component.scss']
12 }) 11 })
13 export class ConfirmacionComponent implements OnInit { 12 export class ConfirmacionComponent implements OnInit {
14 idArticulo: number; 13 titleMessage: string;
15 imagenArticulo: any; 14 imagenPath: any;
16 detLarArticulo: string; 15 footerMessageFirst: string;
17 preVenArticulo: any; 16 footerMessageSecond: string;
17 footerConfirmation: number;
18 footerClose: string;
18 onClose: Subject<any>; 19 onClose: Subject<any>;
20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
19 21
20 constructor( 22 constructor(
21 public modalRef: BsModalRef, 23 public modalRef: BsModalRef,
22 private inactiveScreen: InactiveScreenService, 24 private inactiveScreen: InactiveScreenService,
23 ) { 25 ) {
24 this.onClose = new Subject(); 26 this.onClose = new Subject();
25 } 27 }
26 28
27 ngOnInit() { 29 ngOnInit() {
28 } 30 }
29 31
30 confirmarArticulo() { 32 confirmarArticulo() {
31 this.onClose.next(); 33 this.onClose.next();
32 this.modalRef.hide(); 34 this.modalRef.hide();
33 } 35 }
34 36
35 close() { 37 close() {
36 this.modalRef.hide(); 38 this.modalRef.hide();
37 } 39 }
38 40
39 @HostListener('document:click', ['$event']) 41 @HostListener('document:click', ['$event'])
40 eventListener(event: Event) { 42 eventListener(event: Event) {
41 clearTimeout(this.inactiveScreen.timerReposo); 43 clearTimeout(this.inactiveScreen.timerReposo);
42 this.inactiveScreen.startTimeOutInactividad(); 44 this.inactiveScreen.startTimeOutInactividad();
43 } 45 }
src/app/shared/footer/footer.component.html
Diff comments   View file @ c6054a0
1 <div class="row w-90 mx-auto h-100 justify-content-between bg-white"> 1 <div class="row w-90 mx-auto h-100 justify-content-between bg-white">
2 <div class="col-auto align-self-center px-0 bg-white"> 2 <div class="col-auto align-self-center px-0 bg-white">
3 <div class="btn-effect row mx-0 bg-light" (click)="reducirPantalla()"> 3 <div class="btn-effect row mx-0 bg-light" (click)="reducirPantalla()">
4 <div class="col-auto align-self-center text-primary">REDUCIR PANTALLA</div> 4 <div class="col-auto align-self-center text-primary">ADAPTAR PANTALLA</div>
5 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 5 <div class="col-auto p-0 bg-primary d-none d-sm-block">
6 <img 6 <img
7 draggable="false" 7 draggable="false"
8 ondragstart="return false;" 8 ondragstart="return false;"
9 (contextmenu)="false" 9 (contextmenu)="false"
10 class="p-2 icon-60" 10 class="p-2 icon-60"
11 src="assets/img/iconos-accesibilidad.svg"> 11 src="assets/img/iconos-accesibilidad.svg">
12 </div> 12 </div>
13 </div> 13 </div>
14 </div> 14 </div>
15 <div 15 <div
16 class="btn-effect col-auto align-self-center px-0 bg-white" 16 class="btn-effect col-auto align-self-center px-0 bg-white"
17 (click)="goBack()"> 17 (click)="goBack()">
18 <div class="row mx-0 bg-light"> 18 <div class="row mx-0 bg-light">
19 <div class="col-auto align-self-center text-primary">VOLVER</div> 19 <div class="col-auto align-self-center text-primary">VOLVER</div>
20 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 20 <div class="col-auto p-0 bg-primary d-none d-sm-block">
21 <img 21 <img
22 draggable="false" 22 draggable="false"
23 ondragstart="return false;" 23 ondragstart="return false;"
24 (contextmenu)="false" 24 (contextmenu)="false"
25 class="p-2 icon-40" 25 class="p-2 icon-40"
26 src="assets/img/icono-volver.svg"> 26 src="assets/img/icono-volver.svg">
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 </div> 30 </div>
31 31
src/app/shared/footer/footer.component.ts
Diff comments   View file @ c6054a0
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Location } from '@angular/common'; 2 import { Location } from '@angular/common';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-footer', 5 selector: 'app-footer',
6 templateUrl: './footer.component.html', 6 templateUrl: './footer.component.html',
7 styleUrls: ['./footer.component.scss'] 7 styleUrls: ['./footer.component.scss']
8 }) 8 })
9 export class FooterComponent implements OnInit { 9 export class FooterComponent implements OnInit {
10 constructor(private location: Location) {} 10 constructor(private location: Location) { }
11 11
12 ngOnInit() {} 12 ngOnInit() { }
13 13
14 goBack() { 14 goBack() {
15 this.location.back(); 15 this.location.back();
16 } 16 }
17 17
18 reducirPantalla() { 18 reducirPantalla() {
19 $('body,.reduce-card-1,.reduce-card-2,#content,.cat-content,.cat-btn,.cat-box,#boxCarrito,#headerPublicidad,#headerPad,.img-categoria,.carrito-articulo,.carrito-content,.pago-tarjeta,.modal-promo').toggleClass('media-pantalla'); 19 $(`
20 body,
21 .reduce-card-1,
22 .reduce-card-2,
23 #content,
24 .cat-content,
25 .cat-btn,
26 .cat-box,
27 #boxCarrito,
28 #headerPublicidad,
29 #headerPad,
30 .img-categoria,
31 .carrito-articulo,
32 .carrito-content,
33 .pago-tarjeta,
34 .modal-promo`)
35 .toggleClass('media-pantalla');
20 } 36 }
21 } 37 }
22 38
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ c6054a0
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 10
11 @Component({ 11 @Component({
12 selector: 'app-header-publicidad', 12 selector: 'app-header-publicidad',
13 templateUrl: './header-publicidad.component.html', 13 templateUrl: './header-publicidad.component.html',
14 styleUrls: ['./header-publicidad.component.scss'] 14 styleUrls: ['./header-publicidad.component.scss']
15 }) 15 })
16 export class HeaderPublicidadComponent implements OnInit { 16 export class HeaderPublicidadComponent implements OnInit {
17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
18 publicidades: IPublicidad[] = []; 18 publicidades: IPublicidad[] = [];
19 modalRef: BsModalRef; 19 modalRef: BsModalRef;
20 20
21 constructor( 21 constructor(
22 private publicidadService: PublicidadService, 22 private publicidadService: PublicidadService,
23 private articuloService: ArticuloService, 23 private articuloService: ArticuloService,
24 private modalService: BsModalService, 24 private modalService: BsModalService,
25 ) { } 25 ) { }
26 26
27 ngOnInit() { 27 ngOnInit() {
28 this.getPublicidades(); 28 this.getPublicidades();
29 this.mediaPantalla(); 29 this.mediaPantalla();
30 } 30 }
31 31
32 getPublicidades() { 32 getPublicidades() {
33 this.publicidadService.getAll() 33 this.publicidadService.getAll()
34 .subscribe((res: IPublicidad[]) => { 34 .subscribe((res: IPublicidad[]) => {
35 this.publicidades = res; 35 this.publicidades = res;
36 }, err => console.error(err)); 36 }, err => console.error(err));
37 } 37 }
38 38
39 elegirArticulo(publicidad: IPublicidad) { 39 elegirArticulo(publicidad: IPublicidad) {
40 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo); 40 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo);
41 } 41 }
42 42
43 getByID(id: number) { 43 getByID(id: number) {
44 this.articuloService.getById(id) 44 this.articuloService.getById(id)
45 .subscribe((res: IArticulo) => { 45 .subscribe((res: IArticulo) => {
46 if (res.FPP) { 46 if (res.FPP) {
47 this.openModalPromos(res); 47 this.openModalPromos(res);
48 return; 48 return;
49 } else { 49 } else {
50 this.openModalConfirmacion(res); 50 this.openModalConfirmacion(res);
51 return; 51 return;
52 } 52 }
53 }, err => console.error(err)); 53 }, err => console.error(err));
54 } 54 }
55 55
56 openModalPromos(articulo: IArticulo) { 56 openModalPromos(articulo: IArticulo) {
57 this.modalRef = this.modalService.show(PromocionComponent, 57 this.modalRef = this.modalService.show(PromocionComponent,
58 { 58 {
59 initialState: { 59 initialState: {
60 idArticulo: articulo.id 60 idArticulo: articulo.id
61 }, 61 },
62 class: 'modal-promo modal-dialog-centered' 62 class: 'modal-promo modal-dialog-centered'
63 }); 63 });
64 } 64 }
65 65
66 openModalConfirmacion(articulo: IArticulo) { 66 openModalConfirmacion(articulo: IArticulo) {
67 this.modalRef = this.modalService.show(ConfirmacionComponent, 67 this.modalRef = this.modalService.show(ConfirmacionComponent,
68 { 68 {
69 initialState: { 69 initialState: {
70 titleMessage: articulo.DET_LAR, 70 titleMessage: articulo.DET_LAR,
71 imagenPath: articulo.imagenes, 71 imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : '',
72 footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`, 72 footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`,
73 footerMessageSecond: `a su carrito?`, 73 footerMessageSecond: `a su carrito?`,
74 footerConfirmation: articulo.PreVen, 74 footerConfirmation: articulo.PreVen,
75 footerClose: `volver` 75 footerClose: `volver`
76 }, 76 },
77 class: 'modal-promo modal-dialog-centered' 77 class: 'modal-promo modal-dialog-centered'
78 }); 78 });
79 this.modalRef.content.onClose.subscribe(() => { 79 this.modalRef.content.onClose.subscribe(() => {
80 articulo.cantidad = 1;
81 this.articuloService.setArticulo(articulo); 80 this.articuloService.setArticulo(articulo);
82 }); 81 });
83 } 82 }
84 83
85 mediaPantalla() { 84 mediaPantalla() {
86 if ($('body').hasClass('media-pantalla')) { 85 if ($('body').hasClass('media-pantalla')) {
87 $('#headerPublicidad,#headerPad').addClass('media-pantalla'); 86 $('#headerPublicidad,#headerPad').addClass('media-pantalla');
88 } 87 }
89 } 88 }
90 } 89 }
91 90
src/app/shared/promocion/promocion.component.html
Diff comments   View file @ c6054a0
1 <div class="d-flex justify-content-center" 1 <div class="d-flex justify-content-center"
2 *ngIf="!articulosPromo.length" id="loading"> 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 *ngIf="articulosPromo.length">
8 <div class="modal-header bg-primary rounded-top pt-4 px-2"> 8 <div class="modal-header bg-primary rounded-top pt-4 px-2">
9 <div class="row mx-0 w-100 justify-content-between"> 9 <div class="row mx-0 w-100 justify-content-between">
10 <div class="col-8"> 10 <div class="col-8">
11 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p> 11 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
12 </div> 12 </div>
13 <div class="col-4 align-self-center"> 13 <div class="col-4 align-self-center">
14 <div 14 <div
15 class="row mx-0 justify-content-between bg-white badge-pill" 15 class="row mx-0 justify-content-between bg-white badge-pill"
16 (click)="elegirPromo(articulosPromo[0])"> 16 (click)="elegirPromo(articulosPromo[0])">
17 <div class="col px-0 align-self-center text-primary"> 17 <div class="col px-0 align-self-center text-primary">
18 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> 18 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
19 </div> 19 </div>
20 <div class="col-3 px-0"> 20 <div class="col-3 px-0">
21 <img 21 <img
22 draggable="false" 22 draggable="false"
23 ondragstart="return false;" 23 ondragstart="return false;"
24 (contextmenu)="false" 24 (contextmenu)="false"
25 class="d-block ml-auto py-1 icon-30 mr-2 pt-2" 25 class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
26 src="assets/img/ir-color.svg"> 26 src="assets/img/ir-color.svg">
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 </div> 30 </div>
31 </div> 31 </div>
32 <div class="modal-body bg-primary rounded-bottom pb-3 px-2"> 32 <div class="modal-body bg-primary rounded-bottom pb-3 px-2">
33 <div class="row mx-0 w-100"> 33 <div class="row mx-0 w-100">
34 <div class="col-9"> 34 <div class="col-9">
35 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p> 35 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
36 <h1 class="text-white mb-4">en un combo?</h1> 36 <h1 class="text-white mb-4">en un combo?</h1>
37 </div> 37 </div>
38 <div class="col-3"> 38 <div class="col-3">
39 <img 39 <img
40 draggable="false" 40 draggable="false"
41 ondragstart="return false;" 41 ondragstart="return false;"
42 (contextmenu)="false" 42 (contextmenu)="false"
43 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}" 43 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
44 onerror="this.src='assets/img/image-not-found.jpg'" 44 onerror="this.src='assets/img/image-not-found.jpg'"
45 class="card-img-top img-fluid rounded-circle"> 45 class="card-img-top img-fluid rounded-circle">
46 </div> 46 </div>
47 </div> 47 </div>
48 <div 48 <div
49 class="row mx-0 lista-promociones scroll-y-visible" 49 class="row mx-0 lista-promociones scroll-y-visible"
50 (scroll)="scrollEvent($event)"> 50 (scroll)="scrollEvent($event)">
51 <div class="col-12"> 51 <div class="col-12">
52 <div *ngFor="let promo of promociones"> 52 <div *ngFor="let promo of promociones">
53 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)"> 53 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
54 <div class="d-flex"> 54 <div class="d-flex">
55 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p> 55 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
56 <p class="font-weight-bold my-auto pr-2"> 56 <p class="font-weight-bold my-auto pr-2">
57 <span>{{promo.PreVen | currency}}</span> 57 <span>{{promo.PreVen | currency}}</span>
58 </p> 58 </p>
59 <img 59 <img
60 draggable="false" 60 draggable="false"
61 ondragstart="return false;" 61 ondragstart="return false;"
62 (contextmenu)="false" 62 (contextmenu)="false"
63 class="d-block icon-30 py-1" 63 class="d-block icon-30 py-1"
64 src="assets/img/ir-color.svg"> 64 src="assets/img/ir-color.svg">
65 </div> 65 </div>
66 </div> 66 </div>
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 </div> 71 </div>
src/app/shared/promocion/promocion.component.ts
Diff comments   View file @ c6054a0
1 import { Component, OnInit, HostListener } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { BsModalRef } from 'ngx-bootstrap/modal'; 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 import { IArticulo } from 'src/app/interfaces/IArticulo'; 3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 4 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
5 import { PromocionService } from 'src/app/services/promocion/promocion.service'; 5 import { PromocionService } from 'src/app/services/promocion/promocion.service';
6 import { Subject } from 'rxjs'; 6 import { Subject } from 'rxjs';
7 import { APP_SETTINGS } from 'src/etc/AppSettings'; 7 import { APP_SETTINGS } from 'src/etc/AppSettings';
8 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 8 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
9 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
10 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
11 import { SinonimoComponent } from '../sinonimo/sinonimo.component';
9 12
10 @Component({ 13 @Component({
11 selector: 'app-promocion', 14 selector: 'app-promocion',
12 templateUrl: './promocion.component.html', 15 templateUrl: './promocion.component.html',
13 styleUrls: ['./promocion.component.scss'] 16 styleUrls: ['./promocion.component.scss']
14 }) 17 })
15 export class PromocionComponent implements OnInit { 18 export class PromocionComponent implements OnInit {
16 idArticulo: number;
17 articulosPromo: IArticulo[] = []; 19 articulosPromo: IArticulo[] = [];
18 promociones: IArticulo[] = []; 20 promociones: IArticulo[] = [];
19 onClose: Subject<any>; 21 onClose: Subject<any>;
20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 22 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
21 23
22 constructor( 24 constructor(
23 public modalRef: BsModalRef, 25 public modalPromocion: BsModalRef,
26 private modalService: BsModalService,
24 private articuloService: ArticuloService, 27 private articuloService: ArticuloService,
25 private promocionService: PromocionService, 28 private promocionService: PromocionService,
29 private sinonimoService: SinonimoService,
26 private inactiveScreen: InactiveScreenService, 30 private inactiveScreen: InactiveScreenService,
27 ) { 31 ) {
28 this.onClose = new Subject(); 32 this.onClose = new Subject();
29 } 33 }
30 34
31 ngOnInit() { 35 ngOnInit() {
32 this.articuloService.getById(this.idArticulo) 36 this.getPromociones();
33 .subscribe((res: IArticulo) => { 37 }
34 this.articulosPromo[0] = res; 38
35 this.getPromociones(); 39 selectPromo(promo: IArticulo) {
40 this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
41 .subscribe((res: ISinonimo[]) => {
42 if (res.length) {
43 this.openModalSinonimos(res, promo);
44 } else {
45 promo.cantidad = 1;
46 this.articuloService.setArticulo(promo);
47 this.modalPromocion.hide();
48 }
36 }, err => console.error(err)); 49 }, err => console.error(err));
37 this.mediaPantalla(); 50 this.mediaPantalla();
38 } 51 }
39 52
40 elegirPromo(promo: IArticulo) { 53 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
41 promo.cantidad = 1; 54 const modalSinonimo = this.modalService.show(SinonimoComponent, {
42 this.articuloService.setArticulo(promo); 55 initialState: { sinonimos: sinonimosData },
43 this.modalRef.hide(); 56 class: 'modal-promo modal-dialog-centered'
57 });
58
59 modalSinonimo.content.onClose
60 .subscribe((res: any) => {
61 for (const a of articulo.productos) {
62 if (a.idSinonimo === res.ID_SIN) {
63 a.CODA = res.articulo.CodArt;
64 a.CodArt = res.articulo.CodArt;
65 a.SECA = res.articulo.CodSec;
66 a.CodSec = res.articulo.CodSec;
67 a.PreVen = res.articulo.PreVen;
68 a.id = res.articulo.id;
69 a.DET_LAR = res.articulo.DET_LAR;
70 a.DetArt = res.articulo.DetArt;
71 }
72 }
73 this.articuloService.setArticulo(articulo);
74 this.modalPromocion.hide();
75 });
44 } 76 }
45 77
46 getPromociones() { 78 getPromociones() {
47 const sector = this.articulosPromo[0].CodSec; 79 const sector = this.articulosPromo[0].CodSec;
48 const codigo = this.articulosPromo[0].CodArt; 80 const codigo = this.articulosPromo[0].CodArt;
49 this.promocionService.getPromociones(sector, codigo) 81 this.promocionService.getPromociones(sector, codigo)
50 .subscribe((res: IArticulo[]) => { 82 .subscribe((res: IArticulo[]) => {
51 this.promociones = res; 83 this.promociones = res;
52 }, error => { console.error(error); }); 84 }, error => { console.error(error); });
53 } 85 }
54 86
55 @HostListener('document:click', ['$event']) 87 @HostListener('document:click', ['$event'])
56 eventListener(event: Event) { 88 eventListener(event: Event) {
57 clearTimeout(this.inactiveScreen.timerReposo); 89 clearTimeout(this.inactiveScreen.timerReposo);
58 this.inactiveScreen.startTimeOutInactividad(); 90 this.inactiveScreen.startTimeOutInactividad();
59 } 91 }
60 92
93 @HostListener('scroll', ['$event'])
94 scrollEvent(event: Event) {
95 clearTimeout(this.inactiveScreen.timerReposo);
96 this.inactiveScreen.startTimeOutInactividad();
97 }
98
61 mediaPantalla() { 99 mediaPantalla() {
62 if($('body').hasClass('media-pantalla')) { 100 if ($('body').hasClass('media-pantalla')) {
63 $('.modal-content').addClass('media-pantalla'); 101 $('.modal-content').addClass('media-pantalla');
64 } 102 }
65 } 103 }
66 } 104 }
src/app/shared/sinonimo/sinonimo.component.html
Diff comments   View file @ c6054a0
File was created 1 <div class="bg-primary rounded text-white">
2 <div class="modal-header">
3 <p class="h4">Seleccione sinonimos</p>
4 </div>
5
6 <div class="modal-body">
7 <div
8 class="lista-sinonimos scroll-y-visible"
9 *ngFor="let s of sinonimos">
10 <div *ngFor="let articulo of s.productos">
11 <div class="custom-control custom-checkbox">
12 <input
13 type="checkbox"
14 class="custom-control-input"
15 [(ngModel)]="articulo.seleccionado"
16 (click)="selectArticulo(articulo)"
17 [id]="articulo.id">
18 <label
19 class="custom-control-label"
20 [for]="articulo.id">
21 {{articulo.DET_LAR}}
22 </label>
23 </div>
24 </div>
25 </div>
26 </div>
27
28 <div class="modal-footer">
29 <div
30 [ngClass]="validate()"
31 class="d-inline-block py-1 btn-effect bg-white badge-pill text-primary"
32 (click)="continue()">
33 CONTINUAR
34 <img
35 draggable="false"
36 ondragstart="return false;"
37 (contextmenu)="false"
38 class="icon-30"
39 src="assets/img/ir-color.svg">
40 </div>
41 </div>
42 </div>
43
src/app/shared/sinonimo/sinonimo.component.scss
Diff comments   View file @ c6054a0
File was created 1 .lista-sinonimos {
2 min-height: auto;
3 max-height: 25vh;
4 }
5
src/app/shared/sinonimo/sinonimo.component.spec.ts
Diff comments   View file @ c6054a0
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { SinonimoComponent } from './sinonimo.component';
4
5 describe('SinonimoComponent', () => {
6 let component: SinonimoComponent;
7 let fixture: ComponentFixture<SinonimoComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ SinonimoComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(SinonimoComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/shared/sinonimo/sinonimo.component.ts
Diff comments   View file @ c6054a0
File was created 1 import { Component, OnInit } from '@angular/core';
2 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { BsModalRef } from 'ngx-bootstrap/modal';
5 import { Subject } from 'rxjs';
6 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
7
8 @Component({
9 selector: 'app-sinonimo',
10 templateUrl: './sinonimo.component.html',
11 styleUrls: ['./sinonimo.component.scss']
12 })
13 export class SinonimoComponent implements OnInit {
14 sinonimos: ISinonimo[] = [];
15 isValid: boolean;
16 onClose: Subject<any>;
17 articuloSelected: IArticulo;
18
19 constructor(
20 private modalRef: BsModalRef,
21 private articuloService: ArticuloService,
22 ) {
23 this.onClose = new Subject();
24 }
25
26 ngOnInit() {
27 }
28
29 selectArticulo(articulo: IArticulo) {
30 for (const s of this.sinonimos) {
31 for (const a of s.productos) {
32 a.seleccionado = false;
33 }
34 }
35 articulo.seleccionado = true;
36 this.articuloSelected = articulo;
37 }
38
39 validate() {
40 this.isValid = false;
41 for (const s of this.sinonimos) {
42 for (const articulo of s.productos) {
43 if (articulo.seleccionado) {
44 this.isValid = true;
45 }
46 }
47 }
48 return !this.isValid ? 'disabled' : '';
49 }
50
51 continue() {
52 if (!this.isValid) return;
53 const ID_SIN = this.articuloSelected.ID_SIN;
54 this.articuloService.getById(this.articuloSelected.id)
55 .subscribe((res: IArticulo) => {
56 this.modalRef.hide();
57 this.onClose.next({
58 articulo: res,
59 ID_SIN
60 });
61 }, err => console.error(err));
62 }
63
64 }
65
src/scss/height-width.scss
Diff comments   View file @ c6054a0
1 @for $i from 1 through 100 { 1 @for $i from 1 through 100 {
2 $heightValue: 1% * $i; 2 $heightValue: 1% * $i;
3 .h-#{$i} { 3 .h-#{$i} {
4 height: $heightValue; 4 height: $heightValue;
5 } 5 }
6 @media (min-width: 576px) { 6 @media (min-width: 576px) {
7 .h-sm-#{$i} { 7 .h-sm-#{$i} {
8 height: $heightValue !important; 8 height: $heightValue !important;
9 } 9 }
10 } 10 }
11 @media (min-width: 768px) { 11 @media (min-width: 768px) {
12 .h-md-#{$i} { 12 .h-md-#{$i} {
13 height: $heightValue !important; 13 height: $heightValue !important;
14 } 14 }
15 } 15 }
16 @media (min-width: 992px) { 16 @media (min-width: 992px) {
17 .h-lg-#{$i} { 17 .h-lg-#{$i} {
18 height: $heightValue !important; 18 height: $heightValue !important;
19 } 19 }
20 } 20 }
21 @media (min-width: 1200px) { 21 @media (min-width: 1200px) {
22 .h-xl-#{$i} { 22 .h-xl-#{$i} {
23 height: $heightValue !important; 23 height: $heightValue !important;
24 } 24 }
25 } 25 }
26 } 26 }
27 27
28 @for $i from 1 through 100 { 28 @for $i from 1 through 100 {
29 $widthValue: 1% * $i; 29 $widthValue: 1% * $i;
30 .w-#{$i} { 30 .w-#{$i} {
31 width: $widthValue !important; 31 width: $widthValue !important;
32 } 32 }
33 } 33 }
34 34
35 .min-h-50 {
36 min-height: 50px;
37 }
38
39 .min-h-60 { 35 .min-h-60 {
40 min-height: 60px; 36 min-height: 60px;
41 } 37 }
42 38
43 .max-h-80 { 39 .max-h-80 {
44 max-height: 80%; 40 max-height: 80%;
45 } 41 }
46 42
src/scss/styles-bootstrap.scss
Diff comments   View file @ c6054a0
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 {
44 background-color: $primary !important;
45 }
46
47 .custom-control-input:checked ~ .custom-control-label::before {
48 border-color: $primary !important;
49 background-color: $primary !important;
50 }
51
52 .custom-control-input:checked ~ .custom-control-label::before {
53 color: #fff;
54 border-color: $primary !important;
55 background-color: $primary !important;
56 }
57
43 .modal-promo > div { 58 .modal-promo > div {
44 border: none !important; 59 border: none !important;
45 border-radius: 10rem; 60 border-radius: $border-radius;
46 margin-left: 10px !important; 61 margin-left: 10px !important;
47 } 62 }
48 63
49 @import "node_modules/bootstrap/scss/bootstrap"; 64 @import "node_modules/bootstrap/scss/bootstrap";
50 65
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 .btn-effect { 25 .btn-effect {
26 transition: all 0.3s !important; 26 transition: all 0.3s !important;
27 &:hover { 27 &:hover {
28 cursor: pointer !important; 28 cursor: pointer !important;
29 opacity: 0.7 !important; 29 opacity: 0.7 !important;
30 } 30 }
31 &:active { 31 &:active {
32 transform: scale(1.02) !important; 32 transform: scale(1.02) !important;
33 } 33 }
34 } 34 }
35 35
36 .cursor-pointer { 36 .cursor-pointer {
37 cursor: pointer; 37 cursor: pointer;
38 } 38 }
39 39
40 p { 40 p {
41 margin: 0 !important; 41 margin: 0 !important;
42 } 42 }
43 43
44 .img-in-top { 44 .img-in-top {
45 position: absolute; 45 position: absolute;
46 top: -35px; 46 top: -35px;
47 left: 50%; 47 left: 50%;
48 height: 70px; 48 height: 70px;
49 -webkit-transform: translateX(-50%); 49 -webkit-transform: translateX(-50%);
50 transform: translateX(-50%); 50 transform: translateX(-50%);
51 } 51 }
52 52
53 .right-0 { 53 .right-0 {
54 right: 0; 54 right: 0;
55 } 55 }
56 56
57 .left-0 { 57 .left-0 {
58 left: 0; 58 left: 0;
59 } 59 }
60 60
61 .rotate-45 { 61 .rotate-45 {
62 transform: rotate(45deg); 62 transform: rotate(45deg);
63 } 63 }
64 64
65 .rotate-90 { 65 .rotate-90 {
66 transform: rotate(90deg); 66 transform: rotate(90deg);
67 } 67 }
68 68
69 .rotate-90-neg { 69 .rotate-90-neg {
70 transform: rotate(-90deg); 70 transform: rotate(-90deg);
71 } 71 }
72 72
73 .rotate-180-neg { 73 .rotate-180-neg {
74 transform: rotate(-180deg); 74 transform: rotate(-180deg);
75 } 75 }
76 76
77 .disabled {
78 opacity: 0.5;
79 }
80
77 body.media-pantalla { 81 body.media-pantalla {
78 height: 50% !important; 82 height: 50% !important;
79 position: absolute; 83 position: absolute;
80 bottom: 0; 84 bottom: 0;
81 width: 100%; 85 width: 100%;
82 } 86 }
83 87
84 .modal-content.media-pantalla { 88 .modal-content.media-pantalla {
85 margin-top: auto !important; 89 margin-top: auto !important;
86 margin-bottom: 50px !important; 90 margin-bottom: 50px !important;
87 } 91 }
88 92
89 .modal-content { 93 .modal-content {
90 background: transparent !important; 94 background: transparent !important;
91 } 95 }
92 96