Commit 8c93448006f30cbe6a61273f36c2d5f44ec82ecb
Exists in
develop
Merge branch 'develop' of git.focasoftware.com:angular/autoservicio-axion into develop
Showing
7 changed files
 
Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
| 1 | import { NgModule } from '@angular/core'; | 1 | import { NgModule } from '@angular/core'; | 
| 2 | import { CommonModule } from '@angular/common'; | 2 | import { CommonModule } from '@angular/common'; | 
| 3 | import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module'; | 3 | import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module'; | 
| 4 | import { SeleccionArticulosComponent } from './seleccion-articulos.component'; | 4 | import { SeleccionArticulosComponent } from './seleccion-articulos.component'; | 
| 5 | import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component'; | 5 | import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component'; | 
| 6 | import { ModalModule } from 'ngx-bootstrap/modal'; | 6 | import { ModalModule } from 'ngx-bootstrap/modal'; | 
| 7 | import { CarouselModule } from 'ngx-bootstrap/carousel'; | 7 | import { CarouselModule } from 'ngx-bootstrap/carousel'; | 
| 8 | import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; | 8 | import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; | 
| 9 | import { SharedModule } from '../shared/shared.module'; | 9 | import { SharedModule } from '../shared/shared.module'; | 
| 10 | import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; | ||
| 10 | import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; | 11 | import { FormsModule } from '@angular/forms'; | 
| 11 | import { FormsModule } from '@angular/forms'; | 12 | import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component'; | 
| 12 | 13 | ||
| 13 | @NgModule({ | 14 | @NgModule({ | 
| 14 | declarations: [ | 15 | declarations: [ | 
| 15 | SeleccionArticulosComponent, | 16 | SeleccionArticulosComponent, | 
| 17 | HeaderPublicidadComponent, | ||
| 16 | HeaderPublicidadComponent, | 18 | PromocionComponent, | 
| 17 | PromocionComponent, | 19 | SinonimoComponent, | 
| 18 | SinonimoComponent, | 20 | ConfirmacionComponent | 
| 19 | ], | 21 | ], | 
| 20 | imports: [ | 22 | imports: [ | 
| 21 | CommonModule, | 23 | CommonModule, | 
| 22 | SeleccionArticulosRoutingModule, | 24 | SeleccionArticulosRoutingModule, | 
| 23 | FormsModule, | 25 | FormsModule, | 
| 24 | ModalModule.forRoot(), | 26 | ModalModule.forRoot(), | 
| 25 | CarouselModule.forRoot(), | 27 | CarouselModule.forRoot(), | 
| 26 | SharedModule | 28 | SharedModule | 
| 27 | ], | 29 | ], | 
| 28 | exports: [HeaderPublicidadComponent], | 30 | exports: [HeaderPublicidadComponent], | 
| 29 | entryComponents: [PromocionComponent, SinonimoComponent] | 31 | entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent] | 
| 30 | }) | 32 | }) | 
| 31 | export class SeleccionArticulosModule { } | 33 | export class SeleccionArticulosModule { } | 
| 32 | 34 | 
src/app/modules/splash-screen/splash-screen.component.html
| 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
| File was created | 1 | <div class="modal-header bg-primary rounded-top pt-4 px-2"> | |
| 2 | <div class="row mx-0 w-100 justify-content-between"> | ||
| 3 | <div class="col-8"> | ||
| 4 | <p *ngIf="titleMessage" class="h3 text-white">{{titleMessage}}</p> | ||
| 5 | </div> | ||
| 6 | </div> | ||
| 7 | <div *ngIf="imagenPath" class="col-4 align-self-center"> | ||
| 8 | <img | ||
| 9 | draggable="false" | ||
| 10 | ondragstart="return false;" | ||
| 11 | (contextmenu)="false" | ||
| 12 | src="{{urlImagenes}}{{imagenPath}}" | ||
| 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"> | ||
| 18 | <div class="row justify-content-between mx-0 w-100"> | ||
| 19 | <div class="col-8"> | ||
| 20 | <p *ngIf="footerMessageFirst" class="text-white"><small>{{footerMessageFirst}}</small></p > | ||
| 21 | <h1 *ngIf="footerMessageSecond" class="text-white mb-4">{{footerMessageSecond}}</h1> | ||
| 22 | </div> | ||
| 23 | <div class="col-4"> | ||
| 24 | <div | ||
| 25 | class="mx-0" | ||
| 26 | (click)="confirmarArticulo()"> | ||
| 27 | <div class="col-auto bg-white badge-pill"> | ||
| 28 | <div class="row justify-content-between"> | ||
| 29 | <div *ngIf="footerConfirmation" class="col-auto px-0 align-self-center text-primary pl-3"> | ||
| 30 | <p class="font-weight-bold">{{footerConfirmation | 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 *ngIf="footerClose" 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">{{footerClose}}</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 | </div> | ||
| 56 | 
src/app/shared/confirmacion/confirmacion.component.scss
src/app/shared/confirmacion/confirmacion.component.spec.ts
| 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
| 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 | import { Subject } from 'rxjs'; | ||
| 7 | |||
| 8 | @Component({ | ||
| 9 | selector: 'app-confirmacion', | ||
| 10 | templateUrl: './confirmacion.component.html', | ||
| 11 | styleUrls: ['./confirmacion.component.scss'] | ||
| 12 | }) | ||
| 13 | export class ConfirmacionComponent implements OnInit { | ||
| 14 | idArticulo: number; | ||
| 15 | imagenArticulo: any; | ||
| 16 | detLarArticulo: string; | ||
| 17 | preVenArticulo: any; | ||
| 18 | onClose: Subject<any>; | ||
| 19 | |||
| 20 | constructor( | ||
| 21 | public modalRef: BsModalRef, | ||
| 22 | private inactiveScreen: InactiveScreenService, | ||
| 23 | ) { | ||
| 24 | this.onClose = new Subject(); | ||
| 25 | } | ||
| 26 | |||
| 27 | ngOnInit() { | ||
| 28 | } | ||
| 29 | |||
| 30 | confirmarArticulo() { | ||
| 31 | this.onClose.next(); | ||
| 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
| 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; | 
| 19 | 20 | ||
| 20 | constructor( | 21 | constructor( | 
| 21 | private publicidadService: PublicidadService, | 22 | private publicidadService: PublicidadService, | 
| 22 | private articuloService: ArticuloService, | 23 | private articuloService: ArticuloService, | 
| 23 | private modalService: BsModalService, | 24 | private modalService: BsModalService, | 
| 24 | ) { } | 25 | ) { } | 
| 25 | 26 | ||
| 26 | ngOnInit() { | 27 | ngOnInit() { | 
| 27 | this.getPublicidades(); | 28 | this.getPublicidades(); | 
| 28 | } | 29 | } | 
| 29 | 30 | ||
| 30 | getPublicidades() { | 31 | getPublicidades() { | 
| 31 | this.publicidadService.getAll() | 32 | this.publicidadService.getAll() | 
| 32 | .subscribe((res: IPublicidad[]) => { | 33 | .subscribe((res: IPublicidad[]) => { | 
| 33 | this.publicidades = res; | 34 | this.publicidades = res; | 
| 34 | }, err => console.error(err)); | 35 | }, err => console.error(err)); | 
| 35 | } | 36 | } | 
| 36 | 37 | ||
| 37 | elegirArticulo(publicidad: IPublicidad) { | 38 | elegirArticulo(publicidad: IPublicidad) { | 
| 38 | if (publicidad.id_articulo) this.getByID(publicidad.id_articulo); | 39 | if (publicidad.id_articulo) this.getByID(publicidad.id_articulo); | 
| 39 | } | 40 | } | 
| 40 | 41 | ||
| 41 | getByID(id: number) { | 42 | getByID(id: number) { | 
| 42 | this.articuloService.getById(id) | 43 | this.articuloService.getById(id) | 
| 43 | .subscribe((res: IArticulo) => { | 44 | .subscribe((res: IArticulo) => { | 
| 44 | if (res.FPP) { | 45 | if (res.FPP) { | 
| 45 | this.openModalPromos(res); | 46 | this.openModalPromos(res); | 
| 46 | return; | 47 | return; | 
| 48 | } else { | ||
| 49 | this.openModalConfirmacion(res); | ||
| 50 | return; | ||
| 47 | } | 51 | } | 
| 48 | res.cantidad = 1; | ||
| 49 | this.articuloService.setArticulo(res); | ||
| 50 | }, err => console.error(err)); | 52 | }, err => console.error(err)); | 
| 51 | } | 53 | } | 
| 52 | 54 | ||
| 53 | openModalPromos(articulo: IArticulo) { | 55 | openModalPromos(articulo: IArticulo) { | 
| 54 | this.modalRef = this.modalService.show(PromocionComponent, | 56 | this.modalRef = this.modalService.show(PromocionComponent, | 
| 55 | { | 57 | { | 
| 56 | initialState: { | 58 | initialState: { | 
| 57 | idArticulo: articulo.id | 59 | idArticulo: articulo.id | 
| 58 | }, | 60 | }, | 
| 59 | class: 'modal-promo modal-dialog-centered' | 61 | class: 'modal-promo modal-dialog-centered' | 
| 60 | }); | 62 | }); | 
| 61 | } | 63 | } | 
| 62 | 64 | ||
| 65 | openModalConfirmacion(articulo: IArticulo) { | ||
| 66 | this.modalRef = this.modalService.show(ConfirmacionComponent, | ||
| 67 | { | ||
| 68 | initialState: { | ||
| 69 | titleMessage: articulo.DET_LAR, | ||
| 70 | imagenPath: articulo.imagenes, | ||
| 71 | footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`, | ||
| 72 | footerMessageSecond: `a su carrito?`, | ||
| 73 | footerConfirmation: articulo.PreVen, | ||
| 74 | footerClose: `volver` | ||
| 75 | }, | ||
| 76 | class: 'modal-promo modal-dialog-centered' | ||
| 77 | }); | ||
| 78 | this.modalRef.content.onClose.subscribe(() => { | ||
| 79 | articulo.cantidad = 1; | ||
| 80 | this.articuloService.setArticulo(articulo); | ||
| 81 | }); | ||
| 82 | } | ||
| 83 |