Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit 2161684256bb30ba327b1f4370aae678c6c398ea

Authored by Benjamin Rodriguez
1 parent d36ba06638
Exists in develop

Modal confirmacion terminado + sacar el splash clickeando en cualquier lado

Showing 8 changed files with 155 additions and 11 deletions   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 2161684
1 import { Component, OnInit, TemplateRef, OnDestroy, HostListener } from '@angular/core'; 1 import { Component, OnInit, TemplateRef, 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 { CategoriaService } from 'src/app/services/categoria/categoria.service'; 7 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
8 import { PromocionService } from 'src/app/services/promocion/promocion.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 11
12 @Component({ 12 @Component({
13 selector: 'app-seleccion-articulos', 13 selector: 'app-seleccion-articulos',
14 templateUrl: './seleccion-articulos.component.html', 14 templateUrl: './seleccion-articulos.component.html',
15 styleUrls: ['./seleccion-articulos.component.scss'] 15 styleUrls: ['./seleccion-articulos.component.scss']
16 }) 16 })
17 export class SeleccionArticulosComponent implements OnInit, OnDestroy { 17 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
18 showSpinner = true; 18 showSpinner = true;
19 timeoutHandler: any; 19 timeoutHandler: any;
20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
21 articulos: IArticulo[] = []; 21 articulos: IArticulo[] = [];
22 auxArticulos: IArticulo[] = []; 22 auxArticulos: IArticulo[] = [];
23 showQuantity = 100; 23 showQuantity = 100;
24 queMostrar = 'todos'; 24 queMostrar = 'todos';
25 categoriaActive = null; 25 categoriaActive = null;
26 categorias: ICategoria[] = []; 26 categorias: ICategoria[] = [];
27 searchTerm = ''; 27 searchTerm = '';
28 ordenandoByVendidos = true; 28 ordenandoByVendidos = true;
29 allActive = true; 29 allActive = true;
30 modalRef: BsModalRef; 30 modalRef: BsModalRef;
31 total = 0; 31 total = 0;
32 32
33 constructor( 33 constructor(
34 public articuloService: ArticuloService, 34 public articuloService: ArticuloService,
35 private categoriaService: CategoriaService, 35 private categoriaService: CategoriaService,
36 private modalService: BsModalService, 36 private modalService: BsModalService,
37 private inactiveScreen: InactiveScreenService, 37 private inactiveScreen: InactiveScreenService,
38 ) { } 38 ) { }
39 39
40 ngOnInit() { 40 ngOnInit() {
41 this.getCategorias(); 41 this.getCategorias();
42 } 42 }
43 43
44 ngOnDestroy() { 44 ngOnDestroy() {
45 if (this.modalRef) this.modalRef.hide(); 45 if (this.modalRef) this.modalRef.hide();
46 } 46 }
47 47
48 getCategorias() { 48 getCategorias() {
49 this.categoriaService.getAll() 49 this.categoriaService.getAll()
50 .subscribe((categorias: ICategoria[]) => { 50 .subscribe((categorias: ICategoria[]) => {
51 switch (this.queMostrar) { 51 switch (this.queMostrar) {
52 case 'todos': 52 case 'todos':
53 this.categorias = categorias; 53 this.categorias = categorias;
54 this.categoriaActive = 0; 54 this.categoriaActive = 0;
55 break; 55 break;
56 case 'promociones': 56 case 'promociones':
57 this.categorias = categorias; 57 this.categorias = categorias;
58 this.categoriaActive = 19; 58 this.categoriaActive = 19;
59 break; 59 break;
60 case 'ordenar': 60 case 'ordenar':
61 this.categorias = categorias.filter((categoria: ICategoria) => { 61 this.categorias = categorias.filter((categoria: ICategoria) => {
62 return categoria.ES_PEDIDO; 62 return categoria.ES_PEDIDO;
63 }); 63 });
64 this.categoriaActive = 4; 64 this.categoriaActive = 4;
65 break; 65 break;
66 default: 66 default:
67 this.categorias = categorias; 67 this.categorias = categorias;
68 this.categoriaActive = 0; 68 this.categoriaActive = 0;
69 break; 69 break;
70 } 70 }
71 !localStorage.getItem('articulos') ? 71 !localStorage.getItem('articulos') ?
72 this.getProductos() : 72 this.getProductos() :
73 this.setProductos(); 73 this.setProductos();
74 }); 74 });
75 } 75 }
76 76
77 getProductos() { 77 getProductos() {
78 this.articuloService.getAll() 78 this.articuloService.getAll()
79 .subscribe((result: IArticulo[]) => { 79 .subscribe((result: IArticulo[]) => {
80 this.articuloService.setArticulosSinImagen(result); 80 this.articuloService.setArticulosSinImagen(result);
81 if (this.queMostrar === 'ordenar') { 81 if (this.queMostrar === 'ordenar') {
82 this.categorias.forEach((categoria: ICategoria) => { 82 this.categorias.forEach((categoria: ICategoria) => {
83 const tempArticulos = result.filter((articulo: IArticulo) => { 83 const tempArticulos = result.filter((articulo: IArticulo) => {
84 return articulo.categoria_selfservice === categoria.id; 84 return articulo.categoria_selfservice === categoria.id;
85 }); 85 });
86 result = tempArticulos; 86 result = tempArticulos;
87 }); 87 });
88 } 88 }
89 localStorage.setItem('articulos', JSON.stringify(result)); 89 localStorage.setItem('articulos', JSON.stringify(result));
90 this.setProductos(); 90 this.setProductos();
91 }, (error) => { 91 }, (error) => {
92 this.showSpinner = false; 92 this.showSpinner = false;
93 console.error(error); 93 console.error(error);
94 }); 94 });
95 } 95 }
96 96
97 setProductos() { 97 setProductos() {
98 this.articulos = JSON.parse(localStorage.getItem('articulos')); 98 this.articulos = JSON.parse(localStorage.getItem('articulos'));
99 this.filterItems(); 99 this.filterItems();
100 } 100 }
101 101
102 filterItems() { 102 filterItems() {
103 if (this.categoriaActive === 0) { 103 if (this.categoriaActive === 0) {
104 this.auxArticulos = this.articulos; 104 this.auxArticulos = this.articulos;
105 return; 105 return;
106 } 106 }
107 this.auxArticulos = this.articulos.filter(x => { 107 this.auxArticulos = this.articulos.filter(x => {
108 return x.categoria_selfservice === this.categoriaActive; 108 return x.categoria_selfservice === this.categoriaActive;
109 }); 109 });
110 this.ordenar(); 110 this.ordenar();
111 } 111 }
112 112
113 ordenar() { 113 ordenar() {
114 if (this.ordenandoByVendidos) { 114 if (this.ordenandoByVendidos) {
115 this.auxArticulos.sort((a, b) => { 115 this.auxArticulos.sort((a, b) => {
116 return b.cantidadVendida - a.cantidadVendida; 116 return b.cantidadVendida - a.cantidadVendida;
117 }); 117 });
118 } 118 }
119 } 119 }
120 120
121 selectCategoria(index: number, idCategoria?: number) { 121 selectCategoria(index: number, idCategoria?: number) {
122 if (this.categoriaActive === idCategoria) return; 122 if (this.categoriaActive === idCategoria) return;
123 this.categoriaActive = idCategoria; 123 this.categoriaActive = idCategoria;
124 this.allActive = idCategoria === 0 ? true : false; 124 this.allActive = idCategoria === 0 ? true : false;
125 this.categorias.forEach((categoria, i) => { 125 this.categorias.forEach((categoria, i) => {
126 categoria.selected = index === i ? true : false; 126 categoria.selected = index === i ? true : false;
127 }); 127 });
128 this.filterItems(); 128 this.filterItems();
129 } 129 }
130 130
131 elegirArticulo(articulo: IArticulo) { 131 elegirArticulo(articulo: IArticulo) {
132 if (!articulo.FPP) { 132 if (!articulo.FPP) {
133 this.getByID(articulo.id); 133 this.getByID(articulo.id);
134 } else { 134 } else {
135 this.openModalPromos(articulo); 135 this.openModalPromos(articulo);
136 } 136 }
137 } 137 }
138 138
139 getByID(id: number) { 139 getByID(id: number) {
140 this.articuloService.getById(id) 140 this.articuloService.getById(id)
141 .subscribe((res: IArticulo) => { 141 .subscribe((res: IArticulo) => {
142 res.cantidad = 1; 142 res.cantidad = 1;
143 this.articuloService.setArticulo(res); 143 this.articuloService.setArticulo(res);
144 }, err => console.error(err)); 144 }, err => console.error(err));
145 } 145 }
146 146
147 openModalPromos(articulo: IArticulo) { 147 openModalPromos(articulo: IArticulo) {
148 this.modalRef = this.modalService.show(PromocionComponent, 148 this.modalRef = this.modalService.show(PromocionComponent,
149 { 149 {
150 initialState: { 150 initialState: {
151 idArticulo: articulo.id 151 idArticulo: articulo.id
152 }, 152 },
153 class: 'modal-promo modal-dialog-centered' 153 class: 'modal-promo modal-dialog-centered'
154 }); 154 });
155 } 155 }
156 156
157 increaseShow() { 157 increaseShow() {
158 this.showQuantity += 100; 158 this.showQuantity += 100;
159 } 159 }
160 160
161 @HostListener("scroll", ['$event']) 161 @HostListener('scroll', ['$event'])
162 scrollEvent(event: Event) { 162 scrollEvent(event: Event) {
163 clearTimeout(this.inactiveScreen.timerReposo); 163 clearTimeout(this.inactiveScreen.timerReposo);
164 this.inactiveScreen.startTimeOutInactividad(); 164 this.inactiveScreen.startTimeOutInactividad();
165 } 165 }
166 166
167 mouseup() { 167 mouseup() {
168 if (!this.timeoutHandler) return; 168 if (!this.timeoutHandler) return;
169 clearInterval(this.timeoutHandler); 169 clearInterval(this.timeoutHandler);
170 } 170 }
171 171
172 scrollY(el: HTMLElement, value) { 172 scrollY(el: HTMLElement, value) {
173 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 173 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
174 this.timeoutHandler = setInterval(() => { 174 this.timeoutHandler = setInterval(() => {
175 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 175 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
176 }, 500); 176 }, 500);
177 } 177 }
178 178
179 scrollX(el: HTMLElement, value) { 179 scrollX(el: HTMLElement, value) {
180 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 180 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
181 this.timeoutHandler = setInterval(() => { 181 this.timeoutHandler = setInterval(() => {
182 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 182 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
183 }, 500); 183 }, 500);
184 } 184 }
185 } 185 }
186 186
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 2161684
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 { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
10 11
11 @NgModule({ 12 @NgModule({
12 declarations: [ 13 declarations: [
13 SeleccionArticulosComponent, 14 SeleccionArticulosComponent,
14 HeaderPublicidadComponent, 15 HeaderPublicidadComponent,
15 PromocionComponent 16 PromocionComponent,
17 ConfirmacionComponent
16 ], 18 ],
17 imports: [ 19 imports: [
18 CommonModule, 20 CommonModule,
19 SeleccionArticulosRoutingModule, 21 SeleccionArticulosRoutingModule,
20 ModalModule.forRoot(), 22 ModalModule.forRoot(),
21 CarouselModule.forRoot(), 23 CarouselModule.forRoot(),
22 SharedModule 24 SharedModule
23 ], 25 ],
24 exports: [HeaderPublicidadComponent], 26 exports: [HeaderPublicidadComponent],
25 entryComponents: [PromocionComponent] 27 entryComponents: [PromocionComponent, ConfirmacionComponent]
26 }) 28 })
27 export class SeleccionArticulosModule { } 29 export class SeleccionArticulosModule { }
28 30
src/app/modules/splash-screen/splash-screen.component.html
Diff comments   View file @ 2161684
1 <div *ngIf="showSplashScreen" class="h-100 bg-splash"> 1 <div *ngIf="showSplashScreen" class="h-100 bg-splash">
2 <div class="row mx-0 h-100"> 2 <div
3 class="row mx-0 h-100"
4 [routerLink]="['/info-formas-pago']">
3 <div class="col-12 px-0 h-30 my-auto"> 5 <div class="col-12 px-0 h-30 my-auto">
4 <img 6 <img
5 draggable="false" 7 draggable="false"
6 ondragstart="return false;" 8 ondragstart="return false;"
7 (contextmenu)="false" 9 (contextmenu)="false"
8 class="d-block mx-auto h-100 focus-in-blur" 10 class="d-block mx-auto h-100 focus-in-blur"
9 src="assets/img/logo-spot.svg"> 11 src="assets/img/logo-spot.svg">
10 </div> 12 </div>
11 </div> 13 </div>
12 </div> 14 </div>
13 15
14 <div *ngIf="!showSplashScreen" class="h-100 bg-primary fade-in"> 16 <div *ngIf="!showSplashScreen" class="h-100 bg-primary fade-in">
15 <div class="row mx-0 h-100"> 17 <div
18 class="row mx-0 h-100"
19 [routerLink]="['/info-formas-pago']">
16 <div class="col-12 px-0 h-100 my-auto"> 20 <div class="col-12 px-0 h-100 my-auto">
17 <div class="row mx-0 h-15"> 21 <div class="row mx-0 h-15">
18 <div class="col-12 px-0 h-80 my-auto"> 22 <div class="col-12 px-0 h-80 my-auto">
19 <img 23 <img
20 draggable="false" 24 draggable="false"
21 ondragstart="return false;" 25 ondragstart="return false;"
22 (contextmenu)="false" 26 (contextmenu)="false"
23 class="d-block mx-auto h-100" 27 class="d-block mx-auto h-100"
24 src="assets/img/negativo-spot.svg"> 28 src="assets/img/negativo-spot.svg">
25 </div> 29 </div>
26 </div> 30 </div>
27 <div class="row mx-0 h-75 justify-content-center text-white text-center"> 31 <div class="row mx-0 h-75 justify-content-center text-white text-center">
28 <div class="col-7 h-auto px-0 py-5 mb-5 align-self-end box"> 32 <div class="col-7 h-auto px-0 py-5 mb-5 align-self-end box">
29 <div class="h6 m-0 welcome-text text-info"> 33 <div class="h6 m-0 welcome-text text-info">
30 <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span> 34 <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span>
31 </div> 35 </div>
32 <div class="h1 m-0 como-estas-text"> 36 <div class="h1 m-0 como-estas-text">
33 <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span> 37 <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span>
34 </div> 38 </div>
35 </div> 39 </div>
36 <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2"> 40 <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2">
37 <div class="h6 m-0 invitamos-text text-info"> 41 <div class="h6 m-0 invitamos-text text-info">
38 <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span> 42 <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span>
39 </div> 43 </div>
40 <div class="h1 m-0 tu-pedido-text"> 44 <div class="h1 m-0 tu-pedido-text">
41 <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span> 45 <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span>
42 </div> 46 </div>
43 </div> 47 </div>
44 </div> 48 </div>
45 <div 49 <div class="row mx-0 h-10 loop-color cursor-pointer">
46 class="row mx-0 h-10 loop-color cursor-pointer"
47 [routerLink]="['/info-formas-pago']">
48 <div class="col-12 text-center align-self-center px-0"> 50 <div class="col-12 text-center align-self-center px-0">
49 <p class="h6 text-white">TOCA PARA COMENZAR</p> 51 <p class="h6 text-white">TOCA PARA COMENZAR</p>
50 </div> 52 </div>
51 </div> 53 </div>
52 </div> 54 </div>
53 </div> 55 </div>
src/app/shared/confirmacion/confirmacion.component.html
Diff comments   View file @ 2161684
File was created 1 <div class="modal-header bg-primary rounded-top pt-4 px-2" *ngIf="articulo">
2 <div class="row mx-0 w-100 justify-content-between">
3 <div class="col-8">
4 <p class="h3 text-white">{{articulo.DetArt}}</p>
5 </div>
6 </div>
7 <div class="col-4 align-self-center">
8 <img
9 draggable="false"
10 ondragstart="return false;"
11 (contextmenu)="false"
12 src="{{urlImagenes}}{{articulo.imagenes}}"
13 onerror="this.src='assets/img/image-not-found.jpg'"
14 class="card-img-top img-fluid rounded-circle">
15 </div>
16 </div>
17 <div class=" col-12 modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulo">
18 <div class="row justify-content-between mx-0 w-100">
19 <div class="col-8">
20 <p class="text-white"><small>¿DESEA AGREGAR ESTE ARTÍCULO</small></p>
21 <h1 class="text-white mb-4">a su carrito?</h1>
22 </div>
23 <div class="col-4">
24 <div
25 class="mx-0"
26 (click)="elegirArticulo(articulo)">
27 <div class="col-auto bg-white badge-pill">
28 <div class="row justify-content-between">
29 <div class="col-auto px-0 align-self-center text-primary pl-3">
30 <p class="font-weight-bold">{{articulo.PreVen | currency}}</p>
31 </div>
32 <div class="col-auto px-0">
33 <img
34 draggable="false"
35 ondragstart="return false;"
36 (contextmenu)="false"
37 class="d-block ml-auto my-1 icon-30 pr-2"
38 src="assets/img/ir-color.svg">
39 </div>
40 </div>
41 </div>
42 </div>
43 <div class="bg-white badge-pill mt-2">
44 <div class="row justify-content-between">
45 <div
46 class="col-auto mx-0 "
47 (click)="close()">
48 <p class="font-weight-bold text-center text-primary">volver</p>
49 </div>
50 <i class="fas fa-undo-alt text-info mr-3 my-auto"></i>
51 </div>
52 </div>
53 </div>
54 </div>
55
56
57
58 </div>
59
src/app/shared/confirmacion/confirmacion.component.scss
Diff comments   View file @ 2161684
src/app/shared/confirmacion/confirmacion.component.spec.ts
Diff comments   View file @ 2161684
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { ConfirmacionComponent } from './confirmacion.component';
4
5 describe('ConfirmacionComponent', () => {
6 let component: ConfirmacionComponent;
7 let fixture: ComponentFixture<ConfirmacionComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ ConfirmacionComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(ConfirmacionComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/shared/confirmacion/confirmacion.component.ts
Diff comments   View file @ 2161684
File was created 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';
5 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
6
7 @Component({
8 selector: 'app-confirmacion',
9 templateUrl: './confirmacion.component.html',
10 styleUrls: ['./confirmacion.component.scss']
11 })
12 export class ConfirmacionComponent implements OnInit {
13 idArticulo: number;
14 articulo: IArticulo;
15
16 constructor(
17 public modalRef: BsModalRef,
18 private articuloService: ArticuloService,
19 private inactiveScreen: InactiveScreenService,
20 ) { }
21
22 ngOnInit() {
23 this.articuloService.getById(this.idArticulo)
24 .subscribe((res: IArticulo) => {
25 this.articulo = res;
26 }, err => console.error(err));
27 }
28
29 elegirArticulo(articulo: IArticulo) {
30 articulo.cantidad = 1;
31 this.articuloService.setArticulo(articulo);
32 this.modalRef.hide();
33 }
34
35 close() {
36 this.modalRef.hide();
37 }
38
39 @HostListener('document:click', ['$event'])
40 eventListener(event: Event) {
41 clearTimeout(this.inactiveScreen.timerReposo);
42 this.inactiveScreen.startTimeOutInactividad();
43 }
44 }
45
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ 2161684
1 import { Component, OnInit } 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 10
10 @Component({ 11 @Component({
11 selector: 'app-header-publicidad', 12 selector: 'app-header-publicidad',
12 templateUrl: './header-publicidad.component.html', 13 templateUrl: './header-publicidad.component.html',
13 styleUrls: ['./header-publicidad.component.scss'] 14 styleUrls: ['./header-publicidad.component.scss']
14 }) 15 })
15 export class HeaderPublicidadComponent implements OnInit { 16 export class HeaderPublicidadComponent implements OnInit {
16 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
17 publicidades: IPublicidad[] = []; 18 publicidades: IPublicidad[] = [];
18 modalRef: BsModalRef; 19 modalRef: BsModalRef;
20 template: any;
19 21
20 constructor( 22 constructor(
21 private publicidadService: PublicidadService, 23 private publicidadService: PublicidadService,
22 private articuloService: ArticuloService, 24 private articuloService: ArticuloService,
23 private modalService: BsModalService, 25 private modalService: BsModalService,
24 ) { } 26 ) { }
25 27
26 ngOnInit() { 28 ngOnInit() {
27 this.getPublicidades(); 29 this.getPublicidades();
28 } 30 }
29 31
30 getPublicidades() { 32 getPublicidades() {
31 this.publicidadService.getAll() 33 this.publicidadService.getAll()
32 .subscribe((res: IPublicidad[]) => { 34 .subscribe((res: IPublicidad[]) => {
33 this.publicidades = res; 35 this.publicidades = res;
34 }, err => console.error(err)); 36 }, err => console.error(err));
35 } 37 }
36 38
37 elegirArticulo(publicidad: IPublicidad) { 39 elegirArticulo(publicidad: IPublicidad) {
38 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo); 40 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo);
39 } 41 }
40 42
41 getByID(id: number) { 43 getByID(id: number) {
42 this.articuloService.getById(id) 44 this.articuloService.getById(id)
43 .subscribe((res: IArticulo) => { 45 .subscribe((res: IArticulo) => {
44 if (res.FPP) { 46 if (res.FPP) {
45 this.openModalPromos(res); 47 this.openModalPromos(res);
46 return; 48 return;
49 } else {
50 this.openModalConfirmacion(res);
51 return;
47 } 52 }
48 res.cantidad = 1;
49 this.articuloService.setArticulo(res);
50 }, err => console.error(err)); 53 }, err => console.error(err));
51 } 54 }
52 55
53 openModalPromos(articulo: IArticulo) { 56 openModalPromos(articulo: IArticulo) {
54 this.modalRef = this.modalService.show(PromocionComponent, 57 this.modalRef = this.modalService.show(PromocionComponent,
55 { 58 {
56 initialState: { 59 initialState: {
57 idArticulo: articulo.id 60 idArticulo: articulo.id
58 }, 61 },
59 class: 'modal-promo modal-dialog-centered' 62 class: 'modal-promo modal-dialog-centered'
60 }); 63 });
61 } 64 }
62 65
66 openModalConfirmacion(articulo: IArticulo) {
67 this.modalRef = this.modalService.show(ConfirmacionComponent,
68 {
69 initialState: {
70 idArticulo: articulo.id
71 },
72 class: 'modal-promo modal-dialog-centered'
73 });
74 }
75