Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 72f2a153fba5d21007db4eec0d639af7558f61cb

Authored by Marcelo Puebla
2 parents e89398eb9e 58ed706992
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !121
Showing 46 changed files   Show diff stats
1 { 1 {
2 "name": "autoservicio", 2 "name": "autoservicio",
3 "version": "0.0.0", 3 "version": "0.0.0",
4 "scripts": { 4 "scripts": {
5 "ng": "ng", 5 "ng": "ng",
6 "start": "ng serve", 6 "start": "ng serve",
7 "build": "ng build", 7 "build": "ng build",
8 "test": "ng test", 8 "test": "ng test",
9 "lint": "ng lint", 9 "lint": "ng lint",
10 "e2e": "ng e2e" 10 "e2e": "ng e2e"
11 }, 11 },
12 "private": true, 12 "private": true,
13 "dependencies": { 13 "dependencies": {
14 "@angular/animations": "^8.2.3", 14 "@angular/animations": "^8.2.3",
15 "@angular/cdk": "^8.1.3", 15 "@angular/cdk": "^8.1.3",
16 "@angular/common": "~8.0.0", 16 "@angular/common": "~8.0.0",
17 "@angular/compiler": "~8.0.0", 17 "@angular/compiler": "~8.0.0",
18 "@angular/core": "~8.0.0", 18 "@angular/core": "~8.0.0",
19 "@angular/forms": "~8.0.0", 19 "@angular/forms": "~8.0.0",
20 "@angular/material": "^8.1.3", 20 "@angular/material": "^8.1.3",
21 "@angular/platform-browser": "~8.0.0", 21 "@angular/platform-browser": "~8.0.0",
22 "@angular/platform-browser-dynamic": "~8.0.0", 22 "@angular/platform-browser-dynamic": "~8.0.0",
23 "@angular/router": "~8.0.0", 23 "@angular/router": "~8.0.0",
24 "@ngx-material-keyboard/core": "^0.1.1", 24 "@ngx-material-keyboard/core": "^0.1.1",
25 "bootstrap": "^4.3.1", 25 "bootstrap": "^4.3.1",
26 "font-awesome": "^4.7.0", 26 "font-awesome": "^4.7.0",
27 "hammerjs": "^2.0.8",
27 "jquery": "^1.12.4", 28 "jquery": "^1.12.4",
28 "lodash": "^4.17.15", 29 "lodash": "^4.17.15",
29 "material-design-icons": "^3.0.1", 30 "material-design-icons": "^3.0.1",
30 "ngx-bootstrap": "^5.1.1", 31 "ngx-bootstrap": "^5.1.1",
31 "popper.js": "^1.15.0", 32 "popper.js": "^1.15.0",
32 "rxjs": "~6.4.0", 33 "rxjs": "~6.4.0",
33 "rxjs-compat": "^6.5.2", 34 "rxjs-compat": "^6.5.2",
34 "simple-keyboard": "^2.26.2", 35 "simple-keyboard": "^2.26.2",
35 "tslib": "^1.9.0", 36 "tslib": "^1.9.0",
36 "zone.js": "~0.9.1" 37 "zone.js": "~0.9.1"
37 }, 38 },
38 "devDependencies": { 39 "devDependencies": {
39 "@angular-devkit/build-angular": "~0.800.0", 40 "@angular-devkit/build-angular": "~0.800.0",
40 "@angular/cli": "^8.3.2", 41 "@angular/cli": "^8.3.2",
41 "@angular/compiler-cli": "~8.0.0", 42 "@angular/compiler-cli": "~8.0.0",
42 "@angular/language-service": "~8.0.0", 43 "@angular/language-service": "~8.0.0",
43 "@types/jasmine": "~3.3.8", 44 "@types/jasmine": "~3.3.8",
44 "@types/jasminewd2": "~2.0.3", 45 "@types/jasminewd2": "~2.0.3",
45 "@types/lodash": "^4.14.138", 46 "@types/lodash": "^4.14.138",
46 "@types/node": "~8.9.4", 47 "@types/node": "~8.9.4",
47 "codelyzer": "^5.0.0", 48 "codelyzer": "^5.0.0",
48 "jasmine-core": "~3.4.0", 49 "jasmine-core": "~3.4.0",
49 "jasmine-spec-reporter": "~4.2.1", 50 "jasmine-spec-reporter": "~4.2.1",
50 "karma": "~4.1.0", 51 "karma": "~4.1.0",
51 "karma-chrome-launcher": "~2.2.0", 52 "karma-chrome-launcher": "~2.2.0",
52 "karma-coverage-istanbul-reporter": "~2.0.1", 53 "karma-coverage-istanbul-reporter": "~2.0.1",
53 "karma-jasmine": "~2.0.1", 54 "karma-jasmine": "~2.0.1",
54 "karma-jasmine-html-reporter": "^1.4.0", 55 "karma-jasmine-html-reporter": "^1.4.0",
55 "protractor": "~5.4.0", 56 "protractor": "~5.4.0",
56 "ts-node": "~7.0.0", 57 "ts-node": "~7.0.0",
57 "tslint": "~5.15.0", 58 "tslint": "~5.15.0",
58 "typescript": "~3.4.3" 59 "typescript": "~3.4.3"
59 } 60 }
60 } 61 }
61 62
src/app/app.module.ts
Diff comments   View file @ 72f2a15
1 //#region MODULES 1 //#region MODULES
2 import { BrowserModule } from '@angular/platform-browser'; 2 import { BrowserModule } from '@angular/platform-browser';
3 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { HttpClientModule } from '@angular/common/http'; 5 import { HttpClientModule } from '@angular/common/http';
6 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 6 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
7 import { TooltipModule } from 'ngx-bootstrap/tooltip'; 7 import { TooltipModule } from 'ngx-bootstrap/tooltip';
8 import { PopoverModule } from 'ngx-bootstrap/popover'; 8 import { PopoverModule } from 'ngx-bootstrap/popover';
9 import { CarouselModule } from 'ngx-bootstrap/carousel'; 9 import { CarouselModule } from 'ngx-bootstrap/carousel';
10 import { PaginationModule } from 'ngx-bootstrap/pagination'; 10 import { PaginationModule } from 'ngx-bootstrap/pagination';
11 import { ModalModule } from 'ngx-bootstrap/modal';
11 //#endregion 12 //#endregion
12 13
13 //#region Keyboard 14 //#region Keyboard
14 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 15 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
15 import { MatButtonModule } from '@angular/material/button'; 16 import { MatButtonModule } from '@angular/material/button';
16 import { MatKeyboardModule } from '@ngx-material-keyboard/core'; 17 import { MatKeyboardModule } from '@ngx-material-keyboard/core';
17 //#endregion 18 //#endregion
18 19
19 //#region COMPONENTS 20 //#region COMPONENTS
20 import { AppComponent } from './app.component'; 21 import { AppComponent } from './app.component';
21 import { HeaderComponent } from './components/header/header.component'; 22 import { HeaderComponent } from './components/header/header.component';
22 import { SidebarComponent } from './components/sidebar/sidebar.component'; 23 import { SidebarComponent } from './components/sidebar/sidebar.component';
23 import { HomeComponent } from './components/home/home.component'; 24 import { HomeComponent } from './components/home/home.component';
24 import { InicioComponent } from './components/inicio/inicio.component'; 25 import { InicioComponent } from './components/inicio/inicio.component';
25 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 26 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
26 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 27 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
27 import { MasterComponent } from './components/master/master.component'; 28 import { MasterComponent } from './components/master/master.component';
28 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component'; 29 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
29 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component'; 30 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
30 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; 31 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
31 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; 32 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
32 import { ComandaComponent } from './components/comanda/comanda.component'; 33 import { ComandaComponent } from './components/comanda/comanda.component';
33 import { PedidosSalientesComponent } from './components/pedidos-salientes/pedidos-salientes.component'; 34 import { PedidosSalientesComponent } from './components/pedidos-salientes/pedidos-salientes.component';
35 import { PagoConTarjetaComponent } from './components/pago-con-tarjeta/pago-con-tarjeta.component';
36 import { ConfiguracionComponent } from './components/configuracion/configuracion.component';
34 //#endregion 37 //#endregion
35 38
36 @NgModule({ 39 @NgModule({
37 declarations: [ 40 declarations: [
38 AppComponent, 41 AppComponent,
39 HeaderComponent, 42 HeaderComponent,
40 SidebarComponent, 43 SidebarComponent,
41 HomeComponent, 44 HomeComponent,
42 InicioComponent, 45 InicioComponent,
43 BusquedaProductosComponent, 46 BusquedaProductosComponent,
44 ConfirmacionCarritoComponent, 47 ConfirmacionCarritoComponent,
45 MasterComponent, 48 MasterComponent,
46 PopoverPromosComponent, 49 PopoverPromosComponent,
47 PopoverSinonimosComponent, 50 PopoverSinonimosComponent,
48 CancelarCompraComponent, 51 CancelarCompraComponent,
49 MensajeFinalComponent, 52 MensajeFinalComponent,
50 ComandaComponent, 53 ComandaComponent,
51 PedidosSalientesComponent 54 PedidosSalientesComponent,
55 PagoConTarjetaComponent,
56 ConfiguracionComponent
52 ], 57 ],
53 imports: [ 58 imports: [
54 BrowserModule, 59 BrowserModule,
55 AppRoutingModule, 60 AppRoutingModule,
56 HttpClientModule, 61 HttpClientModule,
57 FormsModule, 62 FormsModule,
58 ReactiveFormsModule, 63 ReactiveFormsModule,
59 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), 64 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
60 TooltipModule.forRoot(), 65 TooltipModule.forRoot(),
61 PopoverModule.forRoot(), 66 PopoverModule.forRoot(),
62 BrowserAnimationsModule, 67 BrowserAnimationsModule,
63 MatKeyboardModule, 68 MatKeyboardModule,
64 MatButtonModule, 69 MatButtonModule,
65 CarouselModule.forRoot(), 70 CarouselModule.forRoot(),
66 PaginationModule.forRoot() 71 PaginationModule.forRoot(),
72 ModalModule.forRoot(),
67 ], 73 ],
68 providers: [], 74 providers: [],
69 bootstrap: [AppComponent] 75 bootstrap: [AppComponent],
76 entryComponents: [PagoConTarjetaComponent, ConfiguracionComponent]
70 }) 77 })
71 export class AppModule { } 78 export class AppModule { }
72 79
src/app/components/configuracion/configuracion.component.html
Diff comments   View file @ 72f2a15
File was created 1 <form [formGroup]="form" class="modal-body" id="modal-body">
2
3 <div class="row">
4 <div class="col-12">
5
6 <p>¿Este punto de venta trabaja con planilla propia?</p>
7
8 <!-- RADIO BUTTONS -->
9 <div class="text-center">
10 <div class="disabled form-check form-check-inline">
11 <input
12 class="form-check-input"
13 type="radio"
14 id="radio1"
15 formControlName="usePlanillaPropia"
16 [value]="true">
17
18 <label class="form-check-label" for="radio1">Si</label>
19 </div>
20 <div class="form-check form-check-inline">
21 <input
22 class="form-check-input"
23 type="radio"
24 id="radio2"
25 formControlName="usePlanillaPropia"
26 [value]="false">
27 <label class="form-check-label" for="radio2">No</label>
28 </div>
29 </div>
30 <div *ngIf="form.get('usePlanillaPropia').value === false" class="form-group">
31 <select
32 formControlName="puntoVenta"
33 class="form-control form-control-sm w-50 mx-auto mt-2">
34 <option [ngValue]="null" disabled>Seleccione una opción</option>
35 <option
36 *ngFor="let ptoVenta of puntosVenta"
37 [ngValue]="ptoVenta.ID">
38 {{ptoVenta.ID}} {{ptoVenta.NOM}}
39 </option>
40 </select>
41 </div>
42 </div>
43 </div>
44
45 <div *ngIf="impresoras.length > 0" class="row">
46 <div class="col-12">
47 <p>Salida de impresión de comprobantes</p>
48 <select
49 formControlName="impresora"
50 class="form-control form-control-sm w-50 mx-auto mt-2">
51 <option [ngValue]="null" disabled>Seleccione una opción</option>
52 <option
53 *ngFor="let imp of impresoras"
54 [ngValue]="imp.PVE">
55 {{imp.PVE}} {{imp.DES}}
56 </option>
57 </select>
58 </div>
59 </div>
60
61 </form>
62
63 <div class="modal-footer py-1">
64 <button
65 class="btn btn-sm btn-secondary"
66 type="button"
67 (click)="close()">Cancelar
68 </button>
69 <button
70 class="btn btn-sm btn-primary"
71 type="button"
72 (click)="acept()"
73 >Aceptar
74 </button>
75 </div>
76
src/app/components/configuracion/configuracion.component.scss
Diff comments   View file @ 72f2a15
File was created 1 .disabled {
2 pointer-events: none;
3 opacity: 0.5;
4 }
5
src/app/components/configuracion/configuracion.component.spec.ts
Diff comments   View file @ 72f2a15
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { ConfiguracionComponent } from './configuracion.component';
4
5 describe('ConfiguracionComponent', () => {
6 let component: ConfiguracionComponent;
7 let fixture: ComponentFixture<ConfiguracionComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ ConfiguracionComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(ConfiguracionComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/configuracion/configuracion.component.ts
Diff comments   View file @ 72f2a15
File was created 1 import { Component, OnInit } from '@angular/core';
2 import { BsModalRef } from 'ngx-bootstrap';
3 import { PuntoVentaService } from 'src/app/services/punto-venta.service';
4 import { PuntoVenta } from 'src/app/wrappers/puntoVenta';
5 import { ImpresoraService } from 'src/app/services/impresora.service';
6 import { Impresora } from 'src/app/wrappers/impresora';
7 import { FormGroup, FormControl } from '@angular/forms';
8
9 @Component({
10 selector: 'app-configuracion',
11 templateUrl: './configuracion.component.html',
12 styleUrls: ['./configuracion.component.scss']
13 })
14 export class ConfiguracionComponent implements OnInit {
15
16 puntosVenta: PuntoVenta[] = [];
17 impresoras: Impresora[] = [];
18 form: FormGroup;
19
20 constructor(
21 private activeModal: BsModalRef,
22 private puntoVentaService: PuntoVentaService,
23 private impresoraService: ImpresoraService,
24 ) { }
25
26 ngOnInit() {
27
28 this.form = new FormGroup({
29 usePlanillaPropia: new FormControl(false, []),
30 puntoVenta: new FormControl(null, []),
31 impresora: new FormControl(null, []),
32 })
33
34 this.puntoVentaService.getAll()
35 .subscribe((res: PuntoVenta[]) => {
36
37 this.puntosVenta = res;
38 this.setPuntoVenta();
39 }, console.error);
40
41 this.impresoraService.getAll()
42 .subscribe((res: Impresora[]) => {
43
44 this.impresoras = res;
45 this.setImpresora();
46 }, console.error);
47
48 }
49
50 close() {
51
52 this.activeModal.hide();
53 }
54
55 acept() {
56
57 let auxPuntoVenta = this.puntosVenta.find(p => p.ID === this.form.get('puntoVenta').value);
58 let auxImpresora = this.impresoras.find(p => p.PVE === this.form.get('impresora').value);
59 localStorage.setItem('pve', auxPuntoVenta ? auxPuntoVenta.ID.toString() : null);
60 localStorage.setItem('impresoraPVE', auxImpresora ? auxImpresora.PVE.toString() : null);
61 this.close();
62 }
63
64 setPuntoVenta() {
65
66 let pve = parseInt(localStorage.getItem('pve'));
67 let auxPuntoVenta = this.puntosVenta.find(x => x.ID === pve);
68 this.form.get('puntoVenta').setValue(auxPuntoVenta ? auxPuntoVenta.ID : null);
69 }
70
71 setImpresora() {
72
73 let impresoraPVE = parseInt(localStorage.getItem('impresoraPVE'));
74 let auxImpresora = this.impresoras.find(x => x.PVE === impresoraPVE);
75 this.form.get('impresora').setValue(auxImpresora ? auxImpresora.PVE : null);
76 }
77
78 }
79
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 72f2a15
1 <div 1 <div
2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada" 2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
3 class="row m-0 fade-in bg-primary-gradient disable-user-select" 3 class="row m-0 fade-in bg-primary-gradient disable-user-select"
4 (click)="reiniciarTimer()"> 4 (click)="reiniciarTimer()">
5 <div class="col-12 p-0 vh-100"> 5 <div class="col-12 p-0 vh-100">
6 <!-- TOP HEADER --> 6 <!-- TOP HEADER -->
7 <app-header></app-header> 7 <app-header></app-header>
8 8
9 <!-- NOMBRE DE SECCION --> 9 <!-- NOMBRE DE SECCION -->
10 <div class="row m-0"> 10 <div class="row m-0">
11 <div class="col-12 p-0"> 11 <div class="col-12 p-0">
12 <p class="h5 py-1 bg-gray text-muted text-center m-0"> 12 <p class="h5 py-1 bg-gray text-muted text-center m-0">
13 &nbsp; 13 &nbsp;
14 </p> 14 </p>
15 </div> 15 </div>
16 </div> 16 </div>
17 17
18 <div class="row m-0"> 18 <div class="row m-0">
19 <div class="col-10 px-1"> 19 <div class="col-10 px-1">
20 <!-- TEXTO DE IZQUIERDA --> 20 <!-- TEXTO DE IZQUIERDA -->
21 <div *ngIf="!verQR" class="row mx-2 mt-4 text-white"> 21 <div *ngIf="!verQR" class="row mx-2 mt-4 text-white">
22 <div class="col-sm-auto my-auto"> 22 <div class="col-sm-auto my-auto">
23 <p class="h2">Mi Compra 23 <p class="h2">Mi Compra
24 <i class="fa fa-shopping-cart "></i> 24 <i class="fa fa-shopping-cart "></i>
25 </p> 25 </p>
26 </div> 26 </div>
27 <div class="col-sm-9 my-auto"> 27 <div class="col-sm-9 my-auto">
28 <p class="h4">Por favor, controle y confirme su compra.</p> 28 <p class="h4">Por favor, controle y confirme su compra.</p>
29 </div> 29 </div>
30 <label for="customLabel" class="col-auto font-weight-bold h4 m-0">
31 Pedido a nombre de:
32 </label>
33 <div class="col-12 col-sm-6 col-md-5 col-lg-5">
34 <input
35 type="text"
36 class="form-control text-center"
37 id="customLabel"
38 maxlength="24"
39 [(ngModel)]="pedidoAnombreDe"
40 autofocus
41 >
42 </div>
30 </div> 43 </div>
31 44
32 <div [ngClass]="{'mt-5': verQR}" class="row m-0"> 45 <div [ngClass]="{'mt-5': verQR}" class="row m-0">
33 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 46 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
34 <div *ngIf="!verQR" class="col-sm-9 pr-1"> 47 <div *ngIf="!verQR" class="col-sm-9 pr-1">
35 <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark"> 48 <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
36 <div class="mh-100 col-4 p-2" *ngFor="let producto of productos"> 49 <div class="mh-100 col-4 p-2" *ngFor="let producto of productos">
37 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0"> 50 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0">
38 <div class="d-flex align-items-end flex-column"> 51 <div class="d-flex align-items-end flex-column">
39 <div class="w-100"> 52 <div class="w-100">
40 <img 53 <img
41 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" 54 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
42 class="shadow rounded-sm w-100 m-auto"> 55 class="shadow rounded-sm w-100 m-auto">
43 </div> 56 </div>
44 <div class="w-100 pt-2 px-2"> 57 <div class="w-100 pt-2 px-2">
45 <p class="h6 text-left"> 58 <p class="h6 text-left">
46 <small class="font-weight-bold"> 59 <small class="font-weight-bold">
47 {{producto.DET_LAR}} 60 {{producto.DET_LAR}}
48 </small> 61 </small>
49 </p> 62 </p>
50 <div *ngIf="producto.tieneSinonimos"> 63 <div *ngIf="producto.tieneSinonimos">
51 <p *ngFor="let p of producto.productos" class="h6 text-left m-0"> 64 <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
52 <small> 65 <small>
53 - {{producto.cantidad}} {{p.DET_LAR}} 66 - {{producto.cantidad}} {{p.DET_LAR}}
54 </small> 67 </small>
55 </p> 68 </p>
56 </div> 69 </div>
57 </div> 70 </div>
58 <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2"> 71 <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">
59 <span class="text-left m-0 px-1 h6"> 72 <span class="text-left m-0 px-1 h6">
60 {{producto.cantidad}} x {{producto.PreVen | currency}} 73 {{producto.cantidad}} x {{producto.PreVen | currency}}
61 </span> 74 </span>
62 <span class="text-right m-0 px-1 h6"> 75 <span class="text-right m-0 px-1 h6">
63 {{producto.cantidad * producto.PreVen | currency}} 76 {{producto.cantidad * producto.PreVen | currency}}
64 </span> 77 </span>
65 </div> 78 </div>
66 </div> 79 </div>
67 </div> 80 </div>
68 </div> 81 </div>
69 </div> 82 </div>
70 </div> 83 </div>
71 84
72 <!-- CODIGO QR --> 85 <!-- CODIGO QR -->
73 <div *ngIf="verQR" class="col-sm-9"> 86 <div *ngIf="verQR" class="col-sm-9">
74 <div class="col-6 offset-3 border-0 mb-auto"> 87 <div class="col-6 offset-3 border-0 mb-auto">
75 <img 88 <img
76 src="{{apiImagenes}}/imagenes/qrmp.jpg" 89 src="{{apiImagenes}}/imagenes/qrmp.jpg"
77 class="w-100 mx-auto d-block shadow rounded-sm"> 90 class="w-100 mx-auto d-block shadow rounded-sm">
78 </div> 91 </div>
79 </div> 92 </div>
80 93
81 <!-- TICKET --> 94 <!-- TICKET -->
82 <div class="col-sm-3 px-1"> 95 <div class="col-sm-3 px-1">
83 <div class="card shadow"> 96 <div class="card shadow">
84 <div class="card-body"> 97 <div class="card-body">
85 <p class="h5 card-title">Su Ticket</p> 98 <p class="h5 card-title">Su Ticket</p>
86 <div class="row mt-4 m-0"> 99 <div class="row mt-4 m-0">
87 <div class="col-12 p-0 mb-2"> 100 <div class="col-12 p-0 mb-2">
88 <p class="h6 m-0 card-text text-left"> 101 <p class="h6 m-0 card-text text-left">
89 <small class="font-weight-bold">DESCRIPCIÓN</small> 102 <small class="font-weight-bold">DESCRIPCIÓN</small>
90 </p> 103 </p>
91 <p class="h6 m-0 card-text text-left"> 104 <p class="h6 m-0 card-text text-left">
92 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 105 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
93 </p> 106 </p>
94 </div> 107 </div>
95 </div> 108 </div>
96 <div class="row vh-50 px-2 overflow-scroll m-0"> 109 <div class="row vh-50 px-2 overflow-scroll m-0">
97 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 110 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
98 <p class="h6 m-0 card-text text-left"> 111 <p class="h6 m-0 card-text text-left">
99 <small>{{producto.DET_LAR}}</small> 112 <small>{{producto.DET_LAR}}</small>
100 </p> 113 </p>
101 <div class="row d-flex justify-content-between m-0"> 114 <div class="row d-flex justify-content-between m-0">
102 <div class="col p-0"> 115 <div class="col p-0">
103 <p class="h6 m-0 card-text text-left"> 116 <p class="h6 m-0 card-text text-left">
104 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 117 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
105 </p> 118 </p>
106 </div> 119 </div>
107 <div class="col p-0"> 120 <div class="col p-0">
108 <p class="h6 m-0 card-text text-right"> 121 <p class="h6 m-0 card-text text-right">
109 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 122 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
110 </p> 123 </p>
111 </div> 124 </div>
112 </div> 125 </div>
113 </div> 126 </div>
114 </div> 127 </div>
115 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> 128 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
116 Total {{getTotal() | currency}} 129 Total {{getTotal() | currency}}
117 </p> 130 </p>
118 </div> 131 </div>
119 </div> 132 </div>
120 </div> 133 </div>
121 </div> 134 </div>
122 135
123 <!-- OPCIONES ABAJO DERECHA --> 136 <!-- OPCIONES ABAJO DERECHA -->
124 <div class="row m-0 fixed-bottom"> 137 <div class="row m-0 fixed-bottom">
125 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 138 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
126 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 139 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
127 <div class="card-body row m-0 p-1"> 140 <div class="card-body row m-0 p-1">
128 <div class="col-12 p-3"> 141 <div class="col-12 p-3">
129 <button 142 <button
130 type="button" 143 type="button"
131 class="btn btn-block btn-light shadow btn-sm shadow" 144 class="btn btn-block btn-light shadow btn-sm shadow"
132 (click)="volverPreviousPage()"> 145 (click)="volverPreviousPage()">
133 <span class="pr-2">Volver</span> 146 <span class="pr-2">Volver</span>
134 <i class="fa fa-undo text-warning"></i> 147 <i class="fa fa-undo text-warning"></i>
135 </button> 148 </button>
136 <button 149 <button
137 type="button" 150 type="button"
138 class="btn btn-block btn-light shadow btn-sm shadow" 151 class="btn btn-block btn-light shadow btn-sm shadow"
139 [routerLink]="['/cancelar-compra']"> 152 [routerLink]="['/cancelar-compra']">
140 <span class="pr-2">Cancelar</span> 153 <span class="pr-2">Cancelar</span>
141 <i class="fa fa-times text-danger"></i> 154 <i class="fa fa-times text-danger"></i>
142 </button> 155 </button>
143 </div> 156 </div>
144 </div> 157 </div>
145 </div> 158 </div>
146 </div> 159 </div>
147 </div> 160 </div>
148 </div> 161 </div>
149 162
150 <!-- FORMAS DE PAGO --> 163 <!-- FORMAS DE PAGO -->
151 <div *ngIf="!verQR" class="col-2 px-1"> 164 <div *ngIf="!verQR" class="col-2 px-1">
152 <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white"> 165 <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
153 Forma de pago 166 Forma de pago
154 </p> 167 </p>
155 168
156 <!-- EFECTIVO --> 169 <!-- EFECTIVO -->
157 <div 170 <div
158 class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white" 171 class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
159 (click)="pagar(1)"> 172 (click)="pagar(1)">
160 <div class="col-7 text-center my-auto px-2"> 173 <div class="col-7 text-center my-auto px-2">
161 <span class="h5 font-weight-bold">Efectivo</span> 174 <span class="h5 font-weight-bold">Efectivo</span>
162 </div> 175 </div>
163 <div class="col-5 my-auto p-0"> 176 <div class="col-5 my-auto p-0">
164 <img 177 <img
165 src="{{apiImagenes}}/imagenes/efectivo.png" 178 src="{{apiImagenes}}/imagenes/efectivo.png"
166 class="w-100 float-right"> 179 class="w-100 float-right">
167 </div> 180 </div>
168 </div> 181 </div>
169 182
170 <!-- TARJETA --> 183 <!-- TARJETA -->
171 <div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"> 184 <div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
185 (click)="abrirPagoConTarjeta()">
172 <div class="col-7 text-center my-auto px-2"> 186 <div class="col-7 text-center my-auto px-2">
173 <span class="h5 font-weight-bold">Tarjeta</span> 187 <span class="h5 font-weight-bold">Tarjeta</span>
174 </div> 188 </div>
175 <div class="col-5 my-auto p-0"> 189 <div class="col-5 my-auto p-0">
176 <img 190 <img
177 src="{{apiImagenes}}/imagenes/tarjeta.png" 191 src="{{apiImagenes}}/imagenes/tarjeta.png"
178 class="w-100 float-right"> 192 class="w-100 float-right">
179 </div> 193 </div>
180 </div> 194 </div>
181 195
182 <!-- QR --> 196 <!-- QR -->
183 <div 197 <div
184 class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white" 198 class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
185 (click)="pagar(9)"> 199 (click)="pagar(9)">
186 <div class="col-7 text-center my-auto px-2"> 200 <div class="col-7 text-center my-auto px-2">
187 <span class="h5 font-weight-bold">Pago Electrónico</span> 201 <span class="h5 font-weight-bold">Pago Electrónico</span>
188 </div> 202 </div>
189 <div class="col-5 my-auto p-0"> 203 <div class="col-5 my-auto p-0">
190 <img 204 <img
191 src="{{apiImagenes}}/imagenes/qr.png" 205 src="{{apiImagenes}}/imagenes/qr.png"
192 class="w-100 float-right"> 206 class="w-100 float-right">
193 </div> 207 </div>
194 </div> 208 </div>
195 </div> 209 </div>
196 </div> 210 </div>
197 211
198 </div> 212 </div>
199 </div> 213 </div>
200 214
201 <div 215 <div
202 *ngIf="compraConQRfinalizada" 216 *ngIf="compraConQRfinalizada"
203 [routerLink]="['/mensaje-final']" 217 [routerLink]="['/mensaje-final']"
204 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 218 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
205 <div class="col-12 text-center text-white my-auto"> 219 <div class="col-12 text-center text-white my-auto">
206 <p class="font-weight-bold display-4"> 220 <p class="font-weight-bold display-4">
207 Su pago fue<br> 221 Su pago fue<br>
208 acreditado 222 acreditado
209 exitosamente 223 exitosamente
210 </p> 224 </p>
211 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p> 225 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
212 </div> 226 </div>
213 <div class="row z-index-0 fixed-top m-0 w-100"> 227 <div class="row z-index-0 fixed-top m-0 w-100">
214 <div class="col-12 p-3"> 228 <div class="col-12 p-3">
215 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png"> 229 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
216 </div> 230 </div>
217 </div> 231 </div>
218 </div> 232 </div>
219 233
220 <div 234 <div
221 *ngIf="compraConEfectivofinalizada" 235 *ngIf="compraConEfectivofinalizada"
222 [routerLink]="['/mensaje-final']" 236 [routerLink]="['/mensaje-final']"
223 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 237 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
224 <div class="col-12 text-center text-white my-auto"> 238 <div class="col-12 text-center text-white my-auto">
225 <p class="font-weight-bold display-4"> 239 <p class="font-weight-bold display-4">
226 Retire su ticket<br> 240 Retire su ticket<br>
227 y diríjase a caja para<br> 241 y diríjase a caja para<br>
228 efectuar el pago. 242 efectuar el pago.
229 </p> 243 </p>
230 </div> 244 </div>
231 <div class="row z-index-0 fixed-top m-0 w-100"> 245 <div class="row z-index-0 fixed-top m-0 w-100">
232 <div class="col-12 p-3"> 246 <div class="col-12 p-3">
233 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png"> 247 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
234 </div> 248 </div>
235 </div> 249 </div>
236 </div> 250 </div>
237 251
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
Diff comments   View file @ 72f2a15
1 import { Component, OnInit, OnDestroy } from '@angular/core'; 1 import { Component, OnInit, OnDestroy } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 2 import { appSettings } from 'src/etc/AppSettings';
3 import { Location } from '@angular/common'; 3 import { Location } from '@angular/common';
4 import { ProductoService } from 'src/app/services/producto.service'; 4 import { ProductoService } from 'src/app/services/producto.service';
5 import { Producto } from 'src/app/wrappers/producto'; 5 import { Producto } from 'src/app/wrappers/producto';
6 import { Router } from '@angular/router'; 6 import { Router } from '@angular/router';
7 import { Subscription } from 'rxjs'; 7 import { Subscription } from 'rxjs';
8 import { BsModalService } from 'ngx-bootstrap';
9 import { PagoConTarjetaComponent } from '../pago-con-tarjeta/pago-con-tarjeta.component';
8 10
9 @Component({ 11 @Component({
10 selector: 'app-confirmacion-carrito', 12 selector: 'app-confirmacion-carrito',
11 templateUrl: './confirmacion-carrito.component.html', 13 templateUrl: './confirmacion-carrito.component.html',
12 styleUrls: ['./confirmacion-carrito.component.scss'] 14 styleUrls: ['./confirmacion-carrito.component.scss']
13 }) 15 })
14 export class ConfirmacionCarritoComponent implements OnInit, OnDestroy { 16 export class ConfirmacionCarritoComponent implements OnInit, OnDestroy {
15 17
16 private productos: Producto[] = [];
17 private total: number = 0;
18 private apiImagenes: string = appSettings.apiImagenes; 18 private apiImagenes: string = appSettings.apiImagenes;
19 private timerReposo: any;
20 private compraConEfectivofinalizada: boolean = false; 19 private compraConEfectivofinalizada: boolean = false;
21 private compraConQRfinalizada: boolean = false; 20 private compraConQRfinalizada: boolean = false;
21 private productos: Producto[] = [];
22 private total: number = 0;
23 private timerReposo: any;
22 private verQR: boolean = false; 24 private verQR: boolean = false;
23 private subscribePago: Subscription; 25 private subscribePago: Subscription;
26 private pedidoAnombreDe: string = '';
24 27
25 constructor( 28 constructor(
26 private location: Location, 29 private location: Location,
27 private productoService: ProductoService, 30 private productoService: ProductoService,
28 private router: Router 31 private router: Router,
32 private modalService: BsModalService,
29 ) { } 33 ) { }
30 34
31 ngOnInit() { 35 ngOnInit() {
32 36
33 this.timerReposo = setTimeout(() => { 37 this.timerReposo = setTimeout(() => {
34 38
35 this.router.navigate(['cancelar-compra']); 39 this.router.navigate(['cancelar-compra']);
36 }, 90000) 40 }, 90000)
37 this.productos = this.productoService.productos; 41 this.productos = this.productoService.productos;
38 } 42 }
39 43
40 ngOnDestroy() { 44 ngOnDestroy() {
41 45
42 this.subscribePago.unsubscribe(); 46 if (this.subscribePago !== undefined) {
47 this.subscribePago.unsubscribe();
48 }
43 clearTimeout(this.timerReposo); 49 clearTimeout(this.timerReposo);
44 } 50 }
45 51
46 volverPreviousPage() { 52 volverPreviousPage() {
47 53
48 this.subscribePago.unsubscribe(); 54 if (this.subscribePago !== undefined) {
55 this.subscribePago.unsubscribe();
56 }
49 57
50 if (this.verQR) { 58 if (this.verQR) {
51 this.verQR = !this.verQR; 59 this.verQR = !this.verQR;
52 return; 60 return;
53 } 61 }
54 62
55 this.location.back(); 63 this.location.back();
56 } 64 }
57 65
58 getTotal() { 66 getTotal() {
59 67
60 var subTotal = 0; 68 var subTotal = 0;
61 this.productos.forEach(producto => { 69 this.productos.forEach(producto => {
62 70
63 subTotal = subTotal + (producto.PreVen * producto.cantidad); 71 subTotal = subTotal + (producto.PreVen * producto.cantidad);
64 }); 72 });
65 return this.total = subTotal; 73 return this.total = subTotal;
66 } 74 }
67 75
68 reiniciarTimer() { 76 reiniciarTimer() {
69 77
70 clearTimeout(this.timerReposo); 78 clearTimeout(this.timerReposo);
71 this.timerReposo = setTimeout(() => { 79 this.timerReposo = setTimeout(() => {
72 80
73 this.router.navigate(['cancelar-compra']); 81 this.router.navigate(['cancelar-compra']);
74 }, 90000) 82 }, 90000)
75 } 83 }
76 84
77 //#region METODOS PARA LA FORMA DE PAGO 85 //#region METODOS PARA LA FORMA DE PAGO
78 pagar(medioPago: number) { 86 pagar(medioPago: number) {
79 87
80 if (medioPago === 9) { 88 this.verQR = medioPago === 9 ? true : false;
81 89 let dataPago = {
82 this.verQR = true; 90 medioPago: medioPago,
91 pedidoAnombreDe: this.pedidoAnombreDe
83 } 92 }
84 93 this.subscribePago = this.productoService.pagar(dataPago)
85 this.subscribePago = this.productoService.pagar(medioPago) 94 .subscribe((res: any) => {
86 .subscribe(() => {
87 95
88 clearTimeout(this.timerReposo); 96 clearTimeout(this.timerReposo);
89 97
90 if (medioPago === 1) { 98 if (medioPago === 1) {
91
92 this.compraConEfectivofinalizada = true; 99 this.compraConEfectivofinalizada = true;
93 } else if (medioPago === 9) { 100 } else if (medioPago === 9) {
94
95 this.compraConQRfinalizada = true; 101 this.compraConQRfinalizada = true;
96 } 102 }
97 103
98 setTimeout(() => { 104 setTimeout(() => {
99 105
100 this.router.navigate(['mensaje-final']); 106 this.router.navigate(['mensaje-final']);
101 }, 10000); 107 }, 10000);
102 }, err => { 108 }, err => {
103 console.log(err); 109
104 alert('algo salió mal'); 110 console.error(err);
111 alert('Algo salió mal');
105 }) 112 })
106 } 113 }
107 //#endregion 114 //#endregion
108 115
116 abrirPagoConTarjeta() {
117
118 this.modalService.show(PagoConTarjetaComponent, {
119 class: 'modal-lg',
src/app/components/header/header.component.html
Diff comments   View file @ 72f2a15
1 <div class="row m-0 bg-light p-3 justify-content-between"> 1 <div class="row m-0 bg-light p-3 justify-content-between">
2 <div class="col-6"> 2 <div class="col-6">
3 <img class="w-25 float-left" src="{{apiImagenes}}/imagenes/logoempresa.png"> 3 <img
4 draggable="false"
5 ondragstart="return false;"
6 (contextmenu)="false"
7 (press)="openConfigurationScreen()"
8 class="w-25 float-left"
9 src="{{apiImagenes}}/imagenes/logoempresa.png">
4 </div> 10 </div>
5 <div class="col-6"> 11 <div class="col-6">
6 <img class="w-25 float-right" src="{{apiImagenes}}/imagenes/logodebo.png"> 12 <img class="w-25 float-right" src="{{apiImagenes}}/imagenes/logodebo.png">
7 </div> 13 </div>
8 </div> 14 </div>
9 15
src/app/components/header/header.component.ts
Diff comments   View file @ 72f2a15
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 2 import { appSettings } from 'src/etc/AppSettings';
3 import { BsModalService } from 'ngx-bootstrap';
4 import { ConfiguracionComponent } from '../configuracion/configuracion.component';
3 5
4 @Component({ 6 @Component({
5 selector: 'app-header', 7 selector: 'app-header',
6 templateUrl: './header.component.html', 8 templateUrl: './header.component.html',
7 styleUrls: ['./header.component.scss'] 9 styleUrls: ['./header.component.scss']
8 }) 10 })
9 export class HeaderComponent implements OnInit { 11 export class HeaderComponent implements OnInit {
10 12
11 private apiImagenes : string = appSettings.apiImagenes; 13 private apiImagenes : string = appSettings.apiImagenes;
14 timer: any;
15 isShowModalConfiguration = false;
12 16
13 constructor() { } 17 constructor(
18 private modalService: BsModalService,
19 ) { }
14 20
15 ngOnInit() { 21 ngOnInit() {
16 } 22 }
17 23
24 @HostListener('document:keydown.Control.Shift.A', ['$event'])
25 openConfigurationScreen(delay: number = 3000) {
26
27 if (this.isShowModalConfiguration) return;
28
29 this.modalService.onHide
30 .subscribe(() => this.isShowModalConfiguration = false);
31
32 this.timer = setTimeout(() => {
33
34 this.isShowModalConfiguration = true;
35 this.modalService.show(ConfiguracionComponent, {
36 class: 'modal-md',
37 ignoreBackdropClick: true,
38 });
39 }, delay);
40 }
41
42 resetCountDown() {
43
44 clearTimeout(this.timer);
45 }
46
18 } 47 }
19 48
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.html
Diff comments   View file @ 72f2a15
File was created 1 <div class="modal-header p-2">
2 <div class="row m-0 w-100">
3 <div class="col">
4 <span class="h4 m-0">Pago con tarjeta</span>
5 </div>
6 </div>
7 </div>
8
9 <div class="modal-body" id="modal-body">
10 <!-- TARJETAS -->
11 <div class="w-75 mx-auto card-columns">
12 <div
13 class="card card-effect shadow-sm rounded-sm"
14 [ngClass]="{'active': tarjetaSeleccionada && tarjetaSeleccionada.ID === tarjeta.ID}"
15 (click)="seleccionarTarjeta(tarjeta)"
16 *ngFor="let tarjeta of tarjetas">
17 <img
18 class="w-100 p-1"
19 src="../../../assets/img/{{tarjeta.nombreImagen ? tarjeta.nombreImagen : 'generica.png'}}">
20 </div>
21 </div>
22 <!-- FORMULARIO -->
23 <div class="border-top w-75 mx-auto" *ngIf="showForm">
24 <div class="row mt-2 fade-in">
25 <form [formGroup]="form" class="col" novalidate>
26 <!-- TARJETA SELECCIONADA -->
27 <div class="row py-2">
28 <div class="col-auto pr-1">
29 <span class="font-weight-bold">{{tarjetaSeleccionada.ID}}</span>
30 </div>
31 <div class="col-auto pl-2">
32 <span class="font-weight-bold">{{tarjetaSeleccionada.NOM}}</span>
33 </div>
34 </div>
35 <!-- IMPORTE -->
36 <div class="row pb-2">
37 <div class="col-auto pr-1">
38 <span>Importe</span>
39 </div>
40 <div class="col-auto pl-2">
41 <span class="font-weight-bold">{{ importeTotal | currency}}</span>
42 </div>
43 </div>
44 <!-- NUMERO TERMINAL -->
45 <div class="row pb-2">
46 <div class="col-auto pr-1">
47 <span>Terminal Nº</span>
48 </div>
49 <div class="col-12 col-md-auto pl-md-1">
50 <div class="input-group">
51 <input
52 formControlName="terminal"
53 class="form-control form-control-sm"
54 maxlength="45">
55 </div>
56 <p
57 *ngIf="form.get('terminal').errors?.required && form.get('terminal').dirty"
58 class="m-0 wobble-hor-bottom text-danger font-weight-light">
59 <small>Campo requerido*</small>
60 </p>
61 <p
62 *ngIf="form.get('terminal').errors?.pattern && form.get('terminal').dirty"
63 class="m-0 wobble-hor-bottom text-danger font-weight-light">
64 <small>Solo números*</small>
65 </p>
66 </div>
67 </div>
68 <!-- NUMERO DE CUPON -->
69 <div class="row pb-2">
70 <div class="col-auto pr-1">
71 <span>Número de Cupón</span>
72 </div>
73 <div class="col-12 col-md-auto pl-md-1">
74 <div class="input-group">
75 <input
76 formControlName="numeroCupon"
77 class="form-control form-control-sm"
78 maxlength="45">
79 </div>
80 <p
81 *ngIf="form.get('numeroCupon').errors?.required && form.get('numeroCupon').dirty"
82 class="m-0 wobble-hor-bottom text-danger font-weight-light">
83 <small>Campo requerido*</small>
84 </p>
85 <p
86 *ngIf="form.get('numeroCupon').errors?.pattern && form.get('numeroCupon').dirty"
87 class="m-0 wobble-hor-bottom text-danger font-weight-light">
88 <small>Solo números*</small>
89 </p>
90 </div>
91 </div>
92 <!-- CUOTAS -->
93 <div class="row pb-2">
94 <div class="col-auto pr-1">
95 <span>Cuotas</span>
96 </div>
97 <div class="col-12 col-md-auto pl-md-1">
98 <div class="input-group">
99 <input
100 formControlName="cuotas"
101 class="form-control form-control-sm"
102 maxlength="45">
103 </div>
104 <p
105 *ngIf="form.get('cuotas').errors?.required && form.get('cuotas').dirty"
106 class="m-0 wobble-hor-bottom text-danger font-weight-light">
107 <small>Campo requerido*</small>
108 </p>
109 <p
110 *ngIf="form.get('cuotas').errors?.pattern && form.get('cuotas').dirty"
111 class="m-0 wobble-hor-bottom text-danger font-weight-light">
112 <small>Solo números*</small>
113 </p>
114 </div>
115 </div>
116 </form>
117 </div>
118 </div>
119 </div>
120
121 <div class="modal-footer py-1">
122 <button
123 class="btn btn-sm btn-secondary"
124 type="button"
125 (click)="close()">
126 Cancelar
127 </button>
128 <button
129 class="btn btn-sm btn-primary"
130 type="button"
131 [disabled]="!form.valid">
132 Guardar
133 </button>
134 </div>
135
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.scss
Diff comments   View file @ 72f2a15
File was created 1 app-pago-con-tarjeta {
2 user-select: none !important;
3 }
4
5 .card-columns {
6 column-count: 6 !important;
7 column-gap: 0.5rem !important;
8 @media (max-width: 576px) {
9 column-count: 3 !important;
10 }
11 }
12
13 .card-effect {
14 border-width: 2px !important;
15 &:hover {
16 background-color: #c9c9c9b3 !important;
17 transition: background-color 0.3s;
18 }
19 &:active {
20 border-color: #2872ae !important;
21 transition: background-color 0.3s;
22 }
23 }
24
25 .active {
26 border-color: #2872ae !important;
27 transition: background-color 0.3s;
28 }
29
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.spec.ts
Diff comments   View file @ 72f2a15
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { PagoConTarjetaComponent } from './pago-con-tarjeta.component';
4
5 describe('PagoConTarjetaComponent', () => {
6 let component: PagoConTarjetaComponent;
7 let fixture: ComponentFixture<PagoConTarjetaComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ PagoConTarjetaComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(PagoConTarjetaComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.ts
Diff comments   View file @ 72f2a15
File was created 1 import { Component, OnInit } from '@angular/core';
2 import { BsModalRef } from 'ngx-bootstrap';
3 import { TarjetasService } from 'src/app/services/tarjetas.service';
4 import { Tarjeta } from 'src/app/wrappers/tarjeta';
5 import { FormGroup, FormControl, Validators } from '@angular/forms';
6
7 @Component({
8 selector: 'app-pago-con-tarjeta',
9 templateUrl: './pago-con-tarjeta.component.html',
10 styleUrls: ['./pago-con-tarjeta.component.scss'],
11 })
12 export class PagoConTarjetaComponent implements OnInit {
13
14 private showForm = false;
15 private importeTotal: number;
16 private tarjetas: Tarjeta[] = [];
17 private tarjetaSeleccionada: Tarjeta;
18 private form: FormGroup;
19
20 constructor(
21 private modalRef: BsModalRef,
22 private tarjetasService: TarjetasService,
23 ) { }
24
25 ngOnInit() {
26
27 this.tarjetasService.getTarjetas()
28 .subscribe((res: Tarjeta[]) => {
29
30 this.tarjetas = res;
31 }, err => console.error(err));
32
33 this.setForm();
34 }
35
36 setForm() {
37
38 this.form = new FormGroup({
39 terminal: new FormControl('', [Validators.required, Validators.pattern("^[0-9]*$")]),
40 numeroCupon: new FormControl('', [Validators.required, Validators.pattern("^[0-9]*$")]),
41 cuotas: new FormControl('', [Validators.required, Validators.pattern("^[0-9]*$")]),
42 })
43 }
44
45 seleccionarTarjeta(tarjeta: Tarjeta) {
46
47 this.tarjetaSeleccionada = tarjeta;
48 this.showForm = true;
49 }
50
51 close() {
52
53 this.modalRef.hide()
54 }
55 }
56
src/app/services/impresora.service.spec.ts
Diff comments   View file @ 72f2a15
File was created 1 import { TestBed } from '@angular/core/testing';
2
3 import { ImpresoraService } from './impresora.service';
4
5 describe('ImpresoraService', () => {
6 beforeEach(() => TestBed.configureTestingModule({}));
7
8 it('should be created', () => {
9 const service: ImpresoraService = TestBed.get(ImpresoraService);
10 expect(service).toBeTruthy();
11 });
12 });
13
src/app/services/impresora.service.ts
Diff comments   View file @ 72f2a15
File was created 1 import { Injectable } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings';
3 import { HttpClient } from '@angular/common/http';
4 import { Observable } from 'rxjs/internal/Observable';
5
6 @Injectable({
7 providedIn: 'root'
8 })
9 export class ImpresoraService {
10
11 private apiAutoservicio = appSettings.apiUrl;
12
13 constructor(
14 private http: HttpClient,
15 ) { }
16
17 getAll(): Observable<any> {
18
19 return this.http.get(`${this.apiAutoservicio}/get/impresoras`);
20 }
21
22 }
23
src/app/services/producto.service.ts
Diff comments   View file @ 72f2a15
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 { Observable } from 'rxjs'; 3 import { Observable } from 'rxjs';
4 import { appSettings } from 'src/etc/AppSettings'; 4 import { appSettings } from 'src/etc/AppSettings';
5 import { Producto } from '../wrappers/producto'; 5 import { Producto } from '../wrappers/producto';
6 import { ClienteService } from './cliente.service'; 6 import { ClienteService } from './cliente.service';
7 7
8 @Injectable({ 8 @Injectable({
9 providedIn: 'root' 9 providedIn: 'root'
10 }) 10 })
11 export class ProductoService { 11 export class ProductoService {
12 12
13 productos: Producto[] = []; 13 productos: Producto[] = [];
14 productoAcargar: Producto; 14 productoAcargar: Producto;
15 promoAcargar: Producto; 15 promoAcargar: Producto;
16 mostrar: string; 16 mostrar: string;
17 esPromoPersonalizada: boolean = false; 17 esPromoPersonalizada: boolean = false;
18 18
19 constructor(private http: HttpClient, private clienteService: ClienteService) { } 19 constructor(private http: HttpClient, private clienteService: ClienteService) { }
20 20
21 getProductoById(id): Observable<any> { 21 getProductoById(id): Observable<any> {
22 22
23 return this.http.get(`${appSettings.apiUrl}/articulos/${id}`); 23 return this.http.get(`${appSettings.apiUrl}/articulos/${id}`);
24 } 24 }
25 25
26 getAll(): Observable<any> { 26 getAll(): Observable<any> {
27 27
28 return this.http.get(`${appSettings.apiUrl}/articulos/`); 28 return this.http.get(`${appSettings.apiUrl}/articulos/`);
29 } 29 }
30 30
31 getAllWithPaginator(page: number = 1): Observable<any> { 31 getAllWithPaginator(page: number = 1): Observable<any> {
32 32
33 return this.http.get(`${appSettings.apiUrl}/articulos/${page}`); 33 return this.http.get(`${appSettings.apiUrl}/articulos/${page}`);
34 } 34 }
35 35
36 setProductos(producto: Producto) { 36 setProductos(producto: Producto) {
37 37
38 for (let i = 0; i < this.productos.length; i++) { 38 for (let i = 0; i < this.productos.length; i++) {
39 39
40 if (this.productos[i].id === producto.id) { 40 if (this.productos[i].id === producto.id) {
41 41
42 if (producto.PRO) { 42 if (producto.PRO) {
43 if (this.promosIdenticas(this.productos[i], producto)) { 43 if (this.promosIdenticas(this.productos[i], producto)) {
44 this.productos[i].cantidad++; 44 this.productos[i].cantidad++;
45 return; 45 return;
46 } else { 46 } else {
47 break; 47 break;
48 } 48 }
49 } 49 }
50 this.productos[i].cantidad++; 50 this.productos[i].cantidad++;
51 return; 51 return;
52 } 52 }
53 } 53 }
54 54
55 this.productos.unshift(producto); 55 this.productos.unshift(producto);
56 } 56 }
57 57
58 getPromocionByCodigos(sector, codigo): Observable<any> { 58 getPromocionByCodigos(sector, codigo): Observable<any> {
59 59
60 var url = `${appSettings.apiUrl}/promociones/by-codigos/${sector}/${codigo}`; 60 var url = `${appSettings.apiUrl}/promociones/by-codigos/${sector}/${codigo}`;
61 // var url = `${appSettings.apiUrl}/promociones/by-codigos/${2}/${7}`; 61 // var url = `${appSettings.apiUrl}/promociones/by-codigos/${2}/${7}`;
62 return this.http.get(url); 62 return this.http.get(url);
63 } 63 }
64 64
65 getPromociones(sector, codigo): Observable<any> { 65 getPromociones(sector, codigo): Observable<any> {
66 66
67 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`; 67 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
68 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`; 68 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`;
69 return this.http.get(url); 69 return this.http.get(url);
70 } 70 }
71 71
72 getPromocionSinonimos(sector, codigo): Observable<any> { 72 getPromocionSinonimos(sector, codigo): Observable<any> {
73 73
74 var url = `${appSettings.apiUrl}/sinonimos/promo/${sector}/${codigo}`; 74 var url = `${appSettings.apiUrl}/sinonimos/promo/${sector}/${codigo}`;
75 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`; 75 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`;
76 return this.http.get(url); 76 return this.http.get(url);
77 } 77 }
78 78
79 getCategorias() { 79 getCategorias() {
80
80 return this.http.get(`${appSettings.apiUrl}/categorias`); 81 return this.http.get(`${appSettings.apiUrl}/categorias`);
81 } 82 }
82 83
83 pagar(medioPago: number) { 84 pagar(dataPago: any) {
84 85
85 return new Observable((observer) => { 86 return new Observable((observer) => {
86 87
87 this.clienteService.getClienteById(-1).subscribe(cliente => { 88 this.clienteService.getClienteById(-1).subscribe(cliente => {
88 89
89 this.http.post(`${appSettings.apiUrl}/comprobante/guardar/${medioPago}`, { 90 this.http.post(`${appSettings.apiUrl}/comprobante/guardar/${dataPago.medioPago}`, {
90 productos: this.productos, 91 productos: this.productos,
91 cliente: cliente, 92 cliente: cliente,
92 origen: 'autoservicio' 93 origen: 'autoservicio',
94 codigoVendedor: 5,
95 puntoVenta: parseInt(localStorage.getItem('impresoraPVE')),
96 pedidoAnombreDe: dataPago.pedidoAnombreDe,
93 }).subscribe((data) => { 97 }).subscribe((data) => {
94 98
95 observer.next(data); 99 observer.next(data);
96 observer.complete(); 100 observer.complete();
97 }); 101 });
98 }); 102 });
99 }); 103 });
100 } 104 }
101 105
102 private promosIdenticas(promoEnCarrito: Producto, promo: Producto) { 106 private promosIdenticas(promoEnCarrito: Producto, promo: Producto) {
103 107
104 var sonIdenticas = true; 108 var sonIdenticas = true;
105 var productosPromoCarrito = promoEnCarrito.productos; 109 var productosPromoCarrito = promoEnCarrito.productos;
106 var productosPromoAcargar = promo.productos; 110 var productosPromoAcargar = promo.productos;
107 111
108 if (productosPromoCarrito.length !== productosPromoAcargar.length) { 112 if (productosPromoCarrito.length !== productosPromoAcargar.length) {
109 return false; 113 return false;
110 } 114 }
111 115
112 for (let i = 0; i < productosPromoCarrito.length; i++) { 116 for (let i = 0; i < productosPromoCarrito.length; i++) {
113 117
114 if (productosPromoCarrito[i].id !== productosPromoAcargar[i].id) { 118 if (productosPromoCarrito[i].id !== productosPromoAcargar[i].id) {
115 return false; 119 return false;
116 } 120 }
117 } 121 }
118 122
119 return sonIdenticas; 123 return sonIdenticas;
120 } 124 }
121 125
122 } 126 }
123 127
src/app/services/punto-venta.service.spec.ts
Diff comments   View file @ 72f2a15
File was created 1 import { TestBed } from '@angular/core/testing';
2
3 import { PuntoVentaService } from './punto-venta.service';
4
5 describe('PuntoVentaService', () => {
6 beforeEach(() => TestBed.configureTestingModule({}));
7
8 it('should be created', () => {
9 const service: PuntoVentaService = TestBed.get(PuntoVentaService);
10 expect(service).toBeTruthy();
11 });
12 });
13
src/app/services/punto-venta.service.ts
Diff comments   View file @ 72f2a15
File was created 1 import { Injectable } from '@angular/core';
2 import { Observable } from 'rxjs/internal/Observable';
3 import { appSettings } from 'src/etc/AppSettings';
4 import { HttpClient } from '@angular/common/http';
5
6 @Injectable({
7 providedIn: 'root'
8 })
9 export class PuntoVentaService {
10
11 private apiAutoservico = appSettings.apiUrl;
12
13 constructor(
14 private http: HttpClient
15 ) { }
16
17 getAll(): Observable<any> {
18
19 return this.http.get(`${this.apiAutoservico}/get/puntos-venta`);
20 }
21
22 getByID(id: number): Observable<any> {
23
24 return this.http.get(`${this.apiAutoservico}/get/punto-venta/${id}`);
25 }
26
27 getVendedor(filter: any = {}): Observable<any> {
28
29 return this.http.get(`${this.apiAutoservico}/get/vendedor/${JSON.stringify(filter)}`);
30 }
31
32 }
33
src/app/services/tarjetas.service.spec.ts
Diff comments   View file @ 72f2a15
File was created 1 import { TestBed } from '@angular/core/testing';
2
3 import { TarjetasService } from './tarjetas.service';
4
5 describe('TarjetasService', () => {
6 beforeEach(() => TestBed.configureTestingModule({}));
7
8 it('should be created', () => {
9 const service: TarjetasService = TestBed.get(TarjetasService);
10 expect(service).toBeTruthy();
11 });
12 });
13
src/app/services/tarjetas.service.ts
Diff comments   View file @ 72f2a15
File was created 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http';
3 import { Observable } from 'rxjs';
4 import { appSettings } from 'src/etc/AppSettings';
5
6 @Injectable({
7 providedIn: 'root'
8 })
9 export class TarjetasService {
10
11 constructor(private http: HttpClient) { }
12
13 getTarjetas(): Observable<any> {
14
15 return this.http.get(`${appSettings.apiUrl}/tarjetas`);
16 }
17 }
18
src/app/wrappers/impresora.ts
Diff comments   View file @ 72f2a15
File was created 1 export interface Impresora {
2 PVE: number;
3 TIP: string;
4 MAR: string;
5 DES: string;
6 IMP: string;
7 PVM: number;
8 COM: string;
9 LPT: string;
10 LRE: string;
11 CAJ: boolean;
12 NUI: string;
13 EFA: boolean;
14 NCA: number;
15 OPE: number;
16 EJE: number;
17 IDF: number;
18 POS: number;
19 UCZ: Date;
20 MIH: number;
21 EPS: boolean;
22 BAU: number;
23 RSP: string;
24 ERR: string;
25 HAC: boolean;
26 CAI: string;
27 FCAI: Date;
28 PNFF: boolean;
29 PVERS: boolean;
30 NOIMPCYNC: boolean;
31 H23L_CC: number;
32 SINCRO: boolean;
33 COM_CTRLM: number;
34 TCAE: boolean;
35 USA_FT_NC: boolean;
36 RNFH: boolean;
37 NDF: boolean;
38 MAX_ITEM: string;
39 CTRL_NUM: boolean;
40 MULTI_PV: boolean;
41 MOD_SLIP: boolean;
42 NCC_FISCAL: boolean;
43 CT_FISCAL: boolean;
44 CPI: number;
45 E_HD: string;
46 C_HD: string;
47 ITEM_EXT_PR4: boolean;
48 BMAIL: boolean;
49 RE_PDF_ELEC: boolean;
50 LX300_DIR3: number;
51 TIP_AP_CAJ: number;
52 RNREU: boolean;
53 PUERTO: number;
54 IP: string;
55 AUTORIZA_CAE_MANUAL: boolean;
56 MUE_FEV_IMP: boolean;
57 FAC_LX300: boolean;
58 IMAGEN_FE_A: string;
59 IMAGEN_FE_B: string;
60 CanItemRem: number;
61 TCAEA: boolean;
62 CaCoRe: number;
63 RCUYT: boolean;
64 CanItemFE: string;
65 ImprimeElecTermica: boolean;
66 }
67
src/app/wrappers/puntoVenta.ts
Diff comments   View file @ 72f2a15
File was created 1 export interface PuntoVenta {
2 ID: number;
3 NOM: string;
4 DES: string;
5 LUG: string;
6 EST: string;
7 MAR: string;
8 NSE: string;
9 MOD: string;
10 MEM: number;
11 OBS: string;
12 PVE: number;
13 EJE: number;
14 OPE: number;
15 IDC: boolean;
16 TER_TOUCH: boolean;
17 ARQ_PENDIENTE: boolean;
18 FAT: boolean;
19 COM_VISOR: number;
20 TIPO_VISOR: number;
21 DireccionNavegador: string;
22 ES_FE: boolean;
23 LECTORHUELLA_TER: boolean;
24 MK_TIPOTRX: string;
25 INTERFAZ_TC: number;
26 PUERTO_PRISMA: string;
27 PVOS: boolean;
28 RutaExp: string;
29 ImpRenParc: boolean;
30 PUERTO_POSNET: string;
31 EXTRACASH: boolean;
32 FIRMA_DIGITAL: boolean;
33 contactless: boolean;
34 MensajeExtraCash: boolean;
35 PLA: number;
36 FON: number;
37 PVE_CI: number;
38 PVE_RE: number;
39 GRP_PLA: number;
40 ImpRecCob: boolean;
41 }
42
src/app/wrappers/tarjeta.ts
Diff comments   View file @ 72f2a15
File was created 1 export interface Tarjeta {
2 ID: number;
3 NOM: string;
4 NCO: string;
5 DTO: number;
6 DCO: number;
7 PAU: string;
8 BCO: number;
9 CBD: string;
10 CCA: number;
11 NEM: number;
12 NPR: string;
13 UPR: number;
14 FPR?: string;
15 ULIQ: number;
16 UFEC?: string;
17 CUIT: string;
18 PRO: number;
19 TIP: string;
20 E_HD: string;
21 C_HD: string;
22 COD_PRISMA: string;
23 PAGOELEC: boolean;
24 COD_POSNET: string;
25 ExtraCash: boolean;
26 MuestraPlanes: boolean;
27 CodPosnetLiquidacion: string;
28 nombreImagen?: string;
29 }
src/assets/img/americanExpress.png
Diff comments   View file @ 72f2a15

10.4 KB
src/assets/img/argencard.png
Diff comments   View file @ 72f2a15

7.48 KB
src/assets/img/cabal.png
Diff comments   View file @ 72f2a15

7.38 KB
src/assets/img/cencosud.png
Diff comments   View file @ 72f2a15

10.6 KB
src/assets/img/galiciaRural.png
Diff comments   View file @ 72f2a15

10.1 KB
src/assets/img/generica.png
Diff comments   View file @ 72f2a15

6.44 KB
src/assets/img/macro.png
Diff comments   View file @ 72f2a15

9.1 KB
src/assets/img/macroAgro.png
Diff comments   View file @ 72f2a15

11.8 KB
src/assets/img/maestro.png
Diff comments   View file @ 72f2a15

9 KB
src/assets/img/mastercard.png
Diff comments   View file @ 72f2a15

9.46 KB
src/assets/img/mercadoPago.png
Diff comments   View file @ 72f2a15

13.9 KB
src/assets/img/naranja.png
Diff comments   View file @ 72f2a15

10.4 KB
src/assets/img/nativa.png
Diff comments   View file @ 72f2a15

12.1 KB
src/assets/img/tarjetaShopping.png
Diff comments   View file @ 72f2a15

15.2 KB
src/assets/img/visa.png
Diff comments   View file @ 72f2a15

7.03 KB
src/assets/img/visaCredito.png
Diff comments   View file @ 72f2a15

10.3 KB
src/assets/img/visaDebito.png
Diff comments   View file @ 72f2a15

10.1 KB
src/assets/img/visaElectron.png
Diff comments   View file @ 72f2a15

9.8 KB
src/assets/scss/animation.scss
Diff comments   View file @ 72f2a15
1 .fade-in { 1 .fade-in {
2 -webkit-animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; 2 -webkit-animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
3 animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; 3 animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
4 } 4 }
5 5
6 @-webkit-keyframes fadein { 6 @-webkit-keyframes fadein {
7 0% { 7 0% {
8 -webkit-transform: translateZ(80px); 8 -webkit-transform: translateZ(80px);
9 transform: translateZ(80px); 9 transform: translateZ(80px);
10 opacity: 0; 10 opacity: 0;
11 } 11 }
12 100% { 12 100% {
13 -webkit-transform: translateZ(0); 13 -webkit-transform: translateZ(0);
14 transform: translateZ(0); 14 transform: translateZ(0);
15 opacity: 1; 15 opacity: 1;
16 } 16 }
17 } 17 }
18 18
19 @keyframes fadein { 19 @keyframes fadein {
20 0% { 20 0% {
21 -webkit-transform: translateZ(80px); 21 -webkit-transform: translateZ(80px);
22 transform: translateZ(80px); 22 transform: translateZ(80px);
23 opacity: 0; 23 opacity: 0;
24 } 24 }
25 100% { 25 100% {
26 -webkit-transform: translateZ(0); 26 -webkit-transform: translateZ(0);
27 transform: translateZ(0); 27 transform: translateZ(0);
28 opacity: 1; 28 opacity: 1;
29 } 29 }
30 } 30 }
31 31
32 .fade-right { 32 .fade-right {
33 animation: faderight 1s; 33 animation: faderight 1s;
34 -moz-animation: faderight 1s; /* Firefox */ 34 -moz-animation: faderight 1s; /* Firefox */
35 -webkit-animation: faderight 1s; /* Safari and Chrome */ 35 -webkit-animation: faderight 1s; /* Safari and Chrome */
36 -o-animation: faderight 1s; /* Opera */ 36 -o-animation: faderight 1s; /* Opera */
37 } 37 }
38 38
39 @keyframes faderight { 39 @keyframes faderight {
40 from { 40 from {
41 opacity: 0; 41 opacity: 0;
42 transform: translateX(-20px); 42 transform: translateX(-20px);
43 } 43 }
44 to { 44 to {
45 opacity: 1; 45 opacity: 1;
46 transform: translateX(0); 46 transform: translateX(0);
47 } 47 }
48 } 48 }
49 49
50 @-moz-keyframes faderight { 50 @-moz-keyframes faderight {
51 /* Firefox */ 51 /* Firefox */
52 from { 52 from {
53 opacity: 0; 53 opacity: 0;
54 -moz-transform: translateX(-20px); 54 -moz-transform: translateX(-20px);
55 } 55 }
56 to { 56 to {
57 opacity: 1; 57 opacity: 1;
58 -moz-transform: translateX(0); 58 -moz-transform: translateX(0);
59 } 59 }
60 } 60 }
61 61
62 @-webkit-keyframes faderight { 62 @-webkit-keyframes faderight {
63 /* Safari and Chrome */ 63 /* Safari and Chrome */
64 from { 64 from {
65 opacity: 0; 65 opacity: 0;
66 -webkit-transform: translateX(-20px); 66 -webkit-transform: translateX(-20px);
67 } 67 }
68 to { 68 to {
69 opacity: 1; 69 opacity: 1;
70 -webkit-transform: translateX(0); 70 -webkit-transform: translateX(0);
71 } 71 }
72 } 72 }
73 73
74 .fade-left { 74 .fade-left {
75 -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 75 -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
76 animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 76 animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
77 } 77 }
78 78
79 @-webkit-keyframes fadeleft { 79 @-webkit-keyframes fadeleft {
80 0% { 80 0% {
81 -webkit-transform: scaleX(0); 81 -webkit-transform: scaleX(0);
82 transform: scaleX(0); 82 transform: scaleX(0);
83 -webkit-transform-origin: 100% 100%; 83 -webkit-transform-origin: 100% 100%;
84 transform-origin: 100% 100%; 84 transform-origin: 100% 100%;
85 opacity: 1; 85 opacity: 1;
86 } 86 }
87 100% { 87 100% {
88 -webkit-transform: scaleX(1); 88 -webkit-transform: scaleX(1);
89 transform: scaleX(1); 89 transform: scaleX(1);
90 -webkit-transform-origin: 100% 100%; 90 -webkit-transform-origin: 100% 100%;
91 transform-origin: 100% 100%; 91 transform-origin: 100% 100%;
92 opacity: 1; 92 opacity: 1;
93 } 93 }
94 } 94 }
95 95
96 @keyframes fadeleft { 96 @keyframes fadeleft {
97 0% { 97 0% {
98 -webkit-transform: scaleX(0); 98 -webkit-transform: scaleX(0);
99 transform: scaleX(0); 99 transform: scaleX(0);
100 -webkit-transform-origin: 100% 100%; 100 -webkit-transform-origin: 100% 100%;
101 transform-origin: 100% 100%; 101 transform-origin: 100% 100%;
102 opacity: 1; 102 opacity: 1;
103 } 103 }
104 100% { 104 100% {
105 -webkit-transform: scaleX(1); 105 -webkit-transform: scaleX(1);
106 transform: scaleX(1); 106 transform: scaleX(1);
107 -webkit-transform-origin: 100% 100%; 107 -webkit-transform-origin: 100% 100%;
108 transform-origin: 100% 100%; 108 transform-origin: 100% 100%;
109 opacity: 1; 109 opacity: 1;
110 } 110 }
111 } 111 }
112 112
113 .fade-bottom { 113 .fade-bottom {
114 -webkit-animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; 114 -webkit-animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
115 animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; 115 animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
116 } 116 }
117 117
118 @-webkit-keyframes fade-bottom { 118 @-webkit-keyframes fade-bottom {
119 0% { 119 0% {
120 -webkit-transform: scaleY(0.4); 120 -webkit-transform: scaleY(0.4);
121 transform: scaleY(0.4); 121 transform: scaleY(0.4);
122 -webkit-transform-origin: 100% 0%; 122 -webkit-transform-origin: 100% 0%;
123 transform-origin: 100% 0%; 123 transform-origin: 100% 0%;
124 } 124 }
125 100% { 125 100% {
126 -webkit-transform: scaleY(1); 126 -webkit-transform: scaleY(1);
127 transform: scaleY(1); 127 transform: scaleY(1);
128 -webkit-transform-origin: 100% 0%; 128 -webkit-transform-origin: 100% 0%;
129 transform-origin: 100% 0%; 129 transform-origin: 100% 0%;
130 } 130 }
131 } 131 }
132 132
133 @keyframes fade-bottom { 133 @keyframes fade-bottom {
134 0% { 134 0% {
135 -webkit-transform: scaleY(0.4); 135 -webkit-transform: scaleY(0.4);
136 transform: scaleY(0.4); 136 transform: scaleY(0.4);
137 -webkit-transform-origin: 100% 0%; 137 -webkit-transform-origin: 100% 0%;
138 transform-origin: 100% 0%; 138 transform-origin: 100% 0%;
139 } 139 }
140 100% { 140 100% {
141 -webkit-transform: scaleY(1); 141 -webkit-transform: scaleY(1);
142 transform: scaleY(1); 142 transform: scaleY(1);
143 -webkit-transform-origin: 100% 0%; 143 -webkit-transform-origin: 100% 0%;
144 transform-origin: 100% 0%; 144 transform-origin: 100% 0%;
145 } 145 }
146 } 146 }
147 147
148 .slide-in-bl { 148 .slide-in-bl {
149 -webkit-animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 149 -webkit-animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
150 animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 150 animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
151 } 151 }
152 152
153 @-webkit-keyframes slide-in-bl { 153 @-webkit-keyframes slide-in-bl {
154 0% { 154 0% {
155 -webkit-transform: translateY(1000px) translateX(-1000px); 155 -webkit-transform: translateY(1000px) translateX(-1000px);
156 transform: translateY(1000px) translateX(-1000px); 156 transform: translateY(1000px) translateX(-1000px);
157 opacity: 0; 157 opacity: 0;
158 } 158 }
159 100% { 159 100% {
160 -webkit-transform: translateY(0) translateX(0); 160 -webkit-transform: translateY(0) translateX(0);
161 transform: translateY(0) translateX(0); 161 transform: translateY(0) translateX(0);
162 opacity: 1; 162 opacity: 1;
163 } 163 }
164 } 164 }
165 165
166 @keyframes slide-in-bl { 166 @keyframes slide-in-bl {
167 0% { 167 0% {
168 -webkit-transform: translateY(1000px) translateX(-1000px); 168 -webkit-transform: translateY(1000px) translateX(-1000px);
169 transform: translateY(1000px) translateX(-1000px); 169 transform: translateY(1000px) translateX(-1000px);
170 opacity: 0; 170 opacity: 0;
171 } 171 }
172 100% { 172 100% {
173 -webkit-transform: translateY(0) translateX(0); 173 -webkit-transform: translateY(0) translateX(0);
174 transform: translateY(0) translateX(0); 174 transform: translateY(0) translateX(0);
175 opacity: 1; 175 opacity: 1;
176 } 176 }
177 } 177 }
178 178
179 .heartbeat { 179 .heartbeat {
180 -webkit-animation: heartbeat 1.5s ease-in-out infinite both; 180 -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
181 animation: heartbeat 1.5s ease-in-out infinite both; 181 animation: heartbeat 1.5s ease-in-out infinite both;
182 } 182 }
183 183
184 @-webkit-keyframes heartbeat { 184 @-webkit-keyframes heartbeat {
185 from { 185 from {
186 -webkit-transform: scale(1); 186 -webkit-transform: scale(1);
187 transform: scale(1); 187 transform: scale(1);
188 -webkit-transform-origin: center center; 188 -webkit-transform-origin: center center;
189 transform-origin: center center; 189 transform-origin: center center;
190 -webkit-animation-timing-function: ease-out; 190 -webkit-animation-timing-function: ease-out;
191 animation-timing-function: ease-out; 191 animation-timing-function: ease-out;
192 } 192 }
193 10% { 193 10% {
194 -webkit-transform: scale(0.91); 194 -webkit-transform: scale(0.91);
195 transform: scale(0.91); 195 transform: scale(0.91);
196 -webkit-animation-timing-function: ease-in; 196 -webkit-animation-timing-function: ease-in;
197 animation-timing-function: ease-in; 197 animation-timing-function: ease-in;
198 } 198 }
199 17% { 199 17% {
200 -webkit-transform: scale(0.98); 200 -webkit-transform: scale(0.98);
201 transform: scale(0.98); 201 transform: scale(0.98);
202 -webkit-animation-timing-function: ease-out; 202 -webkit-animation-timing-function: ease-out;
203 animation-timing-function: ease-out; 203 animation-timing-function: ease-out;
204 } 204 }
205 33% { 205 33% {
206 -webkit-transform: scale(0.87); 206 -webkit-transform: scale(0.87);
207 transform: scale(0.87); 207 transform: scale(0.87);
208 -webkit-animation-timing-function: ease-in; 208 -webkit-animation-timing-function: ease-in;
209 animation-timing-function: ease-in; 209 animation-timing-function: ease-in;
210 } 210 }
211 45% { 211 45% {
212 -webkit-transform: scale(1); 212 -webkit-transform: scale(1);
213 transform: scale(1); 213 transform: scale(1);
214 -webkit-animation-timing-function: ease-out; 214 -webkit-animation-timing-function: ease-out;
215 animation-timing-function: ease-out; 215 animation-timing-function: ease-out;
216 } 216 }
217 } 217 }
218 218
219 @keyframes heartbeat { 219 @keyframes heartbeat {
220 from { 220 from {
221 -webkit-transform: scale(1); 221 -webkit-transform: scale(1);
222 transform: scale(1); 222 transform: scale(1);
223 -webkit-transform-origin: center center; 223 -webkit-transform-origin: center center;
224 transform-origin: center center; 224 transform-origin: center center;
225 -webkit-animation-timing-function: ease-out; 225 -webkit-animation-timing-function: ease-out;
226 animation-timing-function: ease-out; 226 animation-timing-function: ease-out;
227 } 227 }
228 10% { 228 10% {
229 -webkit-transform: scale(0.91); 229 -webkit-transform: scale(0.91);
230 transform: scale(0.91); 230 transform: scale(0.91);
231 -webkit-animation-timing-function: ease-in; 231 -webkit-animation-timing-function: ease-in;
232 animation-timing-function: ease-in; 232 animation-timing-function: ease-in;
233 } 233 }
234 17% { 234 17% {
235 -webkit-transform: scale(0.98); 235 -webkit-transform: scale(0.98);
236 transform: scale(0.98); 236 transform: scale(0.98);
237 -webkit-animation-timing-function: ease-out; 237 -webkit-animation-timing-function: ease-out;
238 animation-timing-function: ease-out; 238 animation-timing-function: ease-out;
239 } 239 }
240 33% { 240 33% {
241 -webkit-transform: scale(0.87); 241 -webkit-transform: scale(0.87);
242 transform: scale(0.87); 242 transform: scale(0.87);
243 -webkit-animation-timing-function: ease-in; 243 -webkit-animation-timing-function: ease-in;
244 animation-timing-function: ease-in; 244 animation-timing-function: ease-in;
245 } 245 }
246 45% { 246 45% {
247 -webkit-transform: scale(1); 247 -webkit-transform: scale(1);
248 transform: scale(1); 248 transform: scale(1);
249 -webkit-animation-timing-function: ease-out; 249 -webkit-animation-timing-function: ease-out;
250 animation-timing-function: ease-out; 250 animation-timing-function: ease-out;
251 } 251 }
252 } 252 }
253
254 .wobble-hor-bottom {
255 -webkit-animation: wobble-hor-bottom 0.8s both;
256 animation: wobble-hor-bottom 0.8s both;
257 }
258
259 @-webkit-keyframes wobble-hor-bottom {
260 0%,
261 100% {
262 -webkit-transform: translateX(0%);
263 transform: translateX(0%);
264 -webkit-transform-origin: 50% 50%;
265 transform-origin: 50% 50%;
266 }
267 15% {
268 -webkit-transform: translateX(-30px) rotate(-6deg);
269 transform: translateX(-30px) rotate(-6deg);
270 }
271 30% {
272 -webkit-transform: translateX(15px) rotate(6deg);
273 transform: translateX(15px) rotate(6deg);
274 }
275 45% {
276 -webkit-transform: translateX(-15px) rotate(-3.6deg);
277 transform: translateX(-15px) rotate(-3.6deg);
278 }
279 60% {
280 -webkit-transform: translateX(9px) rotate(2.4deg);
281 transform: translateX(9px) rotate(2.4deg);
282 }
283 75% {
284 -webkit-transform: translateX(-6px) rotate(-1.2deg);
285 transform: translateX(-6px) rotate(-1.2deg);
286 }
287 }
288
289 @keyframes wobble-hor-bottom {
290 0%,
291 100% {
292 -webkit-transform: translateX(0%);
293 transform: translateX(0%);
294 -webkit-transform-origin: 50% 50%;
295 transform-origin: 50% 50%;
296 }
297 15% {
298 -webkit-transform: translateX(-30px) rotate(-6deg);
299 transform: translateX(-30px) rotate(-6deg);
300 }
301 30% {
302 -webkit-transform: translateX(15px) rotate(6deg);
303 transform: translateX(15px) rotate(6deg);
304 }
305 45% {
306 -webkit-transform: translateX(-15px) rotate(-3.6deg);
307 transform: translateX(-15px) rotate(-3.6deg);
308 }
309 60% {
310 -webkit-transform: translateX(9px) rotate(2.4deg);
311 transform: translateX(9px) rotate(2.4deg);
312 }
313 75% {
314 -webkit-transform: translateX(-6px) rotate(-1.2deg);
315 transform: translateX(-6px) rotate(-1.2deg);
316 }
317 }
253 318
1 import { enableProdMode } from '@angular/core'; 1 import { enableProdMode } from '@angular/core';
2 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 3
4 import { AppModule } from './app/app.module'; 4 import { AppModule } from './app/app.module';
5 import { environment } from './environments/environment'; 5 import { environment } from './environments/environment';
6 import 'hammerjs';
6 7
7 if (environment.production) { 8 if (environment.production) {
8 enableProdMode(); 9 enableProdMode();
9 } 10 }
10 11
11 platformBrowserDynamic().bootstrapModule(AppModule) 12 platformBrowserDynamic().bootstrapModule(AppModule)
12 .catch(err => console.error(err)); 13 .catch(err => console.error(err));
13 14
1 @import "./assets/scss/animation.scss"; 1 @import "./assets/scss/animation.scss";
2 @import "./assets/scss/bootstrap-override.scss"; 2 @import "./assets/scss/bootstrap-override.scss";
3 @import "../node_modules/bootstrap/scss/_variables.scss"; 3 @import "../node_modules/bootstrap/scss/_variables.scss";
4 4
5 html, 5 html,
6 body { 6 body {
7 height: 100%; 7 height: 100%;
8 background: linear-gradient(0deg, #e6e6e6, #fff); 8 background: linear-gradient(0deg, #e6e6e6, #fff);
9 font-family: bahnschrift; 9 font-family: bahnschrift;
10 overflow: hidden !important; 10 overflow: hidden !important;
11 } 11 }
12 12
13 .blur { 13 .blur {
14 filter: blur(10px); 14 filter: blur(10px);
15 -webkit-filter: blur(10px); 15 -webkit-filter: blur(10px);
16 } 16 }
17 17
18 app-pago-con-tarjeta,
18 .disable-user-select { 19 .disable-user-select {
19 -webkit-user-select: none; 20 -webkit-user-select: none;
20 -moz-user-select: none; 21 -moz-user-select: none;
21 -ms-user-select: none; 22 -ms-user-select: none;
22 user-select: none; 23 user-select: none;
23 } 24 }
24 25
25 .blue-gradient { 26 .blue-gradient {
26 background: linear-gradient(0deg, #ffffff00, $white); 27 background: linear-gradient(0deg, #ffffff00, $white);
27 } 28 }
28 29
29 .rounded { 30 .rounded {
30 border-radius: 1.5rem !important; 31 border-radius: 1.5rem !important;
31 } 32 }
32 33
33 .rounded-top-sm { 34 .rounded-top-sm {
34 border-top-left-radius: 0.75rem !important; 35 border-top-left-radius: 0.75rem !important;
35 border-top-right-radius: 0.75rem !important; 36 border-top-right-radius: 0.75rem !important;
36 } 37 }
37 38
38 .rounded-sm { 39 .rounded-sm {
39 border-radius: 0.75rem !important; 40 border-radius: 0.75rem !important;
40 } 41 }
41 42
42 .card-effect { 43 .card-effect {
44 transition: background-color 0.3s;
43 &:active { 45 &:active {
44 background-color: #c9c9c9b3 !important; 46 background-color: #c9c9c9b3 !important;
45 transition: background-color 0.5s; 47 transition: background-color 0.3s;
46 } 48 }
47 &:focus { 49 &:focus {
48 background-color: #c9c9c9b3 !important; 50 background-color: #c9c9c9b3 !important;
49 transition: background-color 0.5s; 51 transition: background-color 0.3s;
50 } 52 }
51 } 53 }
52 54
53 .overflow-scroll { 55 .overflow-scroll {
54 overflow-y: auto !important; 56 overflow-y: auto !important;
55 overflow-x: hidden !important; 57 overflow-x: hidden !important;
56 &::-webkit-scrollbar { 58 &::-webkit-scrollbar {
57 width: 0.75em; 59 width: 0.75em;
58 } 60 }
59 &::-webkit-scrollbar-track { 61 &::-webkit-scrollbar-track {
60 border-radius: 10px; 62 border-radius: 10px;
61 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 63 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
62 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 64 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
63 background-color: $white; 65 background-color: $white;
64 } 66 }
65 &::-webkit-scrollbar-thumb { 67 &::-webkit-scrollbar-thumb {
66 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 68 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
67 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 69 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
68 outline: 1px solid slategrey; 70 outline: 1px solid slategrey;
69 border-radius: 10px; 71 border-radius: 10px;
70 height: 12px; 72 height: 12px;
71 &:active { 73 &:active {
72 box-shadow: inset 0 0 8px $primary; 74 box-shadow: inset 0 0 8px $primary;
73 -webkit-box-shadow: inset 0 0 8px $primary; 75 -webkit-box-shadow: inset 0 0 8px $primary;
74 } 76 }
75 } 77 }
76 &::-webkit-scrollbar-corner { 78 &::-webkit-scrollbar-corner {
77 border-radius: 10px; 79 border-radius: 10px;
78 } 80 }
79 } 81 }
80 82
81 .bg-gray { 83 .bg-gray {
82 background-color: #e6e6e6; 84 background-color: #e6e6e6;
83 } 85 }
84 86
85 .bg-primary-gradient { 87 .bg-primary-gradient {
86 background: linear-gradient( 88 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
87 135deg,
88 rgba(40, 112, 175, 1) 0%,
89 rgba(0, 32, 66, 1) 100%
90 );
91 } 89 }
92 90
93 .bg-primary-gradient-horizontal { 91 .bg-primary-gradient-horizontal {
94 background: linear-gradient( 92 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
95 90deg,
96 rgba(40, 112, 175, 1) 0%,
97 rgba(0, 32, 66, 1) 100%
98 );
99 } 93 }
100 94
101 .icon-dim { 95 .icon-dim {
102 height: 40px !important; 96 height: 40px !important;
103 width: auto !important; 97 width: auto !important;
104 background-color: white !important; 98 background-color: white !important;
105 } 99 }
106 100
107 .text-purple { 101 .text-purple {
108 color: $purple; 102 color: $purple;
109 } 103 }
110 104
111 .vh-70 { 105 .vh-70 {
112 max-height: 70vh !important; 106 max-height: 70vh !important;
113 } 107 }
114 108
115 .vh-60 { 109 .vh-60 {
116 max-height: 60vh !important; 110 max-height: 60vh !important;
117 } 111 }
118 112
119 .vh-50 { 113 .vh-50 {
120 max-height: 50vh !important; 114 max-height: 50vh !important;
121 } 115 }
122 116
123 .vh-15 { 117 .vh-15 {
124 max-height: 15vh !important; 118 max-height: 15vh !important;
125 } 119 }
126 120
127 .spinner-lg { 121 .spinner-lg {
128 width: 3rem !important; 122 width: 3rem !important;
129 height: 3rem !important; 123 height: 3rem !important;
130 } 124 }
131 125
132 .sidebar { 126 .sidebar {
133 right: 0; 127 right: 0;
134 } 128 }
135 129
136 .background-image { 130 .background-image {
137 background-repeat: no-repeat; 131 background-repeat: no-repeat;
138 background-size: cover; 132 background-size: cover;
139 position: fixed; 133 position: fixed;
140 } 134 }
141 135
142 .rounded-bottom-right { 136 .rounded-bottom-right {
143 border-bottom-right-radius: 10rem; 137 border-bottom-right-radius: 10rem;
144 &:before { 138 &:before {
145 border-radius: 0 40px 40px 0; 139 border-radius: 0 40px 40px 0;
146 background-color: #fff; 140 background-color: #fff;
147 } 141 }
148 } 142 }
149 143
150 .rounded-top-left { 144 .rounded-top-left {
151 border-top-left-radius: 10rem; 145 border-top-left-radius: 10rem;
152 } 146 }
153 147
154 .bg-gray { 148 .bg-gray {
155 background-color: #cccccc; 149 background-color: #cccccc;
156 } 150 }
157 151
158 .cdk-overlay-container { 152 .cdk-overlay-container {
159 position: absolute; 153 position: absolute;
160 top: 65%; 154 top: 65%;
161 width: 100%; 155 width: 100%;
162 } 156 }
163 157
164 .min-h-40 { 158 .min-h-40 {
165 min-height: 40px; 159 min-height: 40px;
166 } 160 }
167 161
168 .min-h-55 { 162 .min-h-55 {
169 min-height: 55px; 163 min-height: 55px;
170 } 164 }
171 165
172 .pagination { 166 .pagination {
173 justify-content: center !important; 167 justify-content: center !important;
174 display: flex !important; 168 display: flex !important;
175 } 169 }
176 170
177 .z-index-0 { 171 .z-index-0 {
178 z-index: 0; 172 z-index: 0;
179 } 173 }
180 174
181 .w-15 { 175 .w-15 {
182 width: 15% !important; 176 width: 15% !important;