Martin Macola / autoservicio

Download as
Browse Code »

Commit 5a8d8acb7489f08282472f959205b6462de9251c

Authored by Eric Fernandez
2 parents edcb94a1a3 d494d55e1a
Exists in master

Merge branch 'master' of http://git.focasoftware.com/angular/autoservicio

Showing 16 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 5a8d8ac
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { HomeComponent } from './components/home/home.component'; 3 import { HomeComponent } from './components/home/home.component';
4 import { InicioComponent } from './components/inicio/inicio.component'; 4 import { InicioComponent } from './components/inicio/inicio.component';
5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
7 import { MasterComponent } from './components/master/master.component'; 7 import { MasterComponent } from './components/master/master.component';
8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; 8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
9 import { PagoComponent } from './components/pago/pago.component'; 9 import { PagoComponent } from './components/pago/pago.component';
10 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; 10 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
11 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
11 12
12 const routes: Routes = [ 13 const routes: Routes = [
13 { path: '', component: HomeComponent }, 14 { path: '', component: HomeComponent },
14 { path: 'home', component: HomeComponent }, 15 { path: 'home', component: HomeComponent },
15 { path: 'abm-imagenes', component: AmbImagenesComponent }, 16 { path: 'abm-imagenes', component: AmbImagenesComponent },
16 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, 17 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
17 { path: 'pago', component: PagoComponent }, 18 { path: 'pago', component: PagoComponent },
18 { path: 'cancelar-compra', component: CancelarCompraComponent }, 19 { path: 'cancelar-compra', component: CancelarCompraComponent },
20 { path: 'mensaje-final', component: MensajeFinalComponent },
19 { 21 {
20 path: '', 22 path: '',
21 component: MasterComponent, 23 component: MasterComponent,
22 children: [ 24 children: [
23 { path: 'inicio', component: InicioComponent }, 25 { path: 'inicio', component: InicioComponent },
24 { path: 'busqueda-productos', component: BusquedaProductosComponent } 26 { path: 'busqueda-productos', component: BusquedaProductosComponent }
25 ] 27 ]
26 }, 28 },
27 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 29 { path: '**', redirectTo: '/home', pathMatch: 'full' },
28 ]; 30 ];
29 31
30 @NgModule({ 32 @NgModule({
31 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})], 33 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
32 exports: [RouterModule] 34 exports: [RouterModule]
33 }) 35 })
34 36
35 export class AppRoutingModule { } 37 export class AppRoutingModule { }
36 38
src/app/app.module.ts
Diff comments   View file @ 5a8d8ac
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 //#endregion 9 //#endregion
10 10
11 //#region Keyboard 11 //#region Keyboard
12 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 12 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
13 import { MatButtonModule } from '@angular/material/button'; 13 import { MatButtonModule } from '@angular/material/button';
14 import { MatKeyboardModule } from '@ngx-material-keyboard/core'; 14 import { MatKeyboardModule } from '@ngx-material-keyboard/core';
15 //#endregion 15 //#endregion
16 16
17 //#region COMPONENTS 17 //#region COMPONENTS
18 import { AppComponent } from './app.component'; 18 import { AppComponent } from './app.component';
19 import { HeaderComponent } from './components/header/header.component'; 19 import { HeaderComponent } from './components/header/header.component';
20 import { SidebarComponent } from './components/sidebar/sidebar.component'; 20 import { SidebarComponent } from './components/sidebar/sidebar.component';
21 import { HomeComponent } from './components/home/home.component'; 21 import { HomeComponent } from './components/home/home.component';
22 import { InicioComponent } from './components/inicio/inicio.component'; 22 import { InicioComponent } from './components/inicio/inicio.component';
23 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 23 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
24 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 24 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
25 import { MasterComponent } from './components/master/master.component';
25 import { MasterComponent } from './components/master/master.component'; 26 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
26 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component'; 27 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
27 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component'; 28 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
28 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; 29 import { PagoComponent } from './components/pago/pago.component';
29 import { PagoComponent } from './components/pago/pago.component'; 30 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
30 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; 31 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
31 //#endregion 32 //#endregion
32 33
33 @NgModule({ 34 @NgModule({
34 declarations: [ 35 declarations: [
35 AppComponent, 36 AppComponent,
36 HeaderComponent, 37 HeaderComponent,
37 SidebarComponent, 38 SidebarComponent,
38 HomeComponent, 39 HomeComponent,
39 InicioComponent, 40 InicioComponent,
40 BusquedaProductosComponent, 41 BusquedaProductosComponent,
41 ConfirmacionCarritoComponent, 42 ConfirmacionCarritoComponent,
43 MasterComponent,
42 MasterComponent, 44 PopoverPromosComponent,
43 PopoverPromosComponent, 45 PopoverSinonimosComponent,
44 PopoverSinonimosComponent, 46 AmbImagenesComponent,
45 AmbImagenesComponent, 47 PagoComponent,
46 PagoComponent, 48 CancelarCompraComponent,
47 CancelarCompraComponent 49 MensajeFinalComponent
48 ], 50 ],
49 imports: [ 51 imports: [
50 BrowserModule, 52 BrowserModule,
51 AppRoutingModule, 53 AppRoutingModule,
52 HttpClientModule, 54 HttpClientModule,
53 FormsModule, 55 FormsModule,
54 ReactiveFormsModule, 56 ReactiveFormsModule,
55 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), 57 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
56 TooltipModule.forRoot(), 58 TooltipModule.forRoot(),
57 PopoverModule.forRoot(), 59 PopoverModule.forRoot(),
58 BrowserAnimationsModule, 60 BrowserAnimationsModule,
59 MatKeyboardModule, 61 MatKeyboardModule,
60 MatButtonModule 62 MatButtonModule
61 ], 63 ],
62 providers: [], 64 providers: [],
63 bootstrap: [AppComponent] 65 bootstrap: [AppComponent]
64 }) 66 })
65 export class AppModule { } 67 export class AppModule { }
66 68
src/app/components/cancelar-compra/cancelar-compra.component.ts
Diff comments   View file @ 5a8d8ac
1 import { Component, OnInit } 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 { Router } from '@angular/router'; 4 import { Router } from '@angular/router';
5 import { ProductoService } from 'src/app/services/producto.service'; 5 import { ProductoService } from 'src/app/services/producto.service';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-cancelar-compra', 8 selector: 'app-cancelar-compra',
9 templateUrl: './cancelar-compra.component.html', 9 templateUrl: './cancelar-compra.component.html',
10 styleUrls: ['./cancelar-compra.component.scss'] 10 styleUrls: ['./cancelar-compra.component.scss']
11 }) 11 })
12 export class CancelarCompraComponent implements OnInit { 12 export class CancelarCompraComponent implements OnInit, OnDestroy {
13 13
14 private apiUrl: string = appSettings.apiUrl; 14 private apiUrl: string = appSettings.apiUrl;
15 private timer: any;
15 16
16 constructor( 17 constructor(
17 private location: Location, 18 private location: Location,
18 private router: Router, 19 private router: Router,
19 private productoService : ProductoService 20 private productoService: ProductoService
20 ) { } 21 ) { }
21 22
22 ngOnInit() { 23 ngOnInit() {
23 24
24 setTimeout(() => { 25 this.timer = setTimeout(() => {
25 this.limpiarCarritoYvolver(); 26 this.limpiarCarritoYvolver();
26 }, 30000) 27 }, 30000)
27 } 28 }
28 29
30 ngOnDestroy() {
31
32 clearTimeout(this.timer);
33 }
34
29 volverPreviousPage() { 35 volverPreviousPage() {
30 36
31 this.location.back(); 37 this.location.back();
32 } 38 }
33 39
34 limpiarCarritoYvolver(){ 40 limpiarCarritoYvolver() {
35 41
36 this.productoService.productoAcargar = undefined; 42 this.productoService.productoAcargar = undefined;
37 this.productoService.promoAcargar = undefined; 43 this.productoService.promoAcargar = undefined;
38 this.productoService.productos = []; 44 this.productoService.productos = [];
39 this.router.navigate(['/home']); 45 this.router.navigate(['/home']);
40 } 46 }
41 47
42 } 48 }
43 49
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 5a8d8ac
1 <div class="row m-0 fade-in bg-primary-gradient disable-user-select"> 1 <div class="row m-0 fade-in bg-primary-gradient disable-user-select">
2 <div class="col-12 p-0 vh-100"> 2 <div class="col-12 p-0 vh-100">
3 3
4 <!-- TOP HEADER --> 4 <!-- TOP HEADER -->
5 <app-header></app-header> 5 <app-header></app-header>
6 6
7 <!-- NOMBRE DE SECCION --> 7 <!-- NOMBRE DE SECCION -->
8 <div class="row m-0"> 8 <div class="row m-0">
9 <div class="col-12 p-0"> 9 <div class="col-12 p-0">
10 <p class="h5 py-1 bg-gray text-muted text-center m-0"> 10 <p class="h5 py-1 bg-gray text-muted text-center m-0">
11 Pagar 11 Pagar
12 <i class="fa fa-usd"></i> 12 <i class="fa fa-usd"></i>
13 </p> 13 </p>
14 </div> 14 </div>
15 </div> 15 </div>
16 16
17 <div class="row m-0"> 17 <div class="row m-0">
18 <div class="col-12"> 18 <div class="col-12">
19 19
20 <!-- TEXTO DE IZQUIERDA --> 20 <!-- TEXTO DE IZQUIERDA -->
21 <div class="row mx-2 mt-4 text-white"> 21 <div class="row mx-2 mt-4 text-white">
22 <div class="col-sm-2 my-auto"> 22 <div class="col-sm-2 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-4 my-auto"> 27 <div class="col-sm-4 my-auto">
28 <p class="h3">¿Desea finalizar su compra?</p> 28 <p class="h3">¿Desea finalizar su compra?</p>
29 <p class="h4">Por favor, controle y confirme su compra.</p> 29 <p class="h4">Por favor, controle y confirme su compra.</p>
30 </div> 30 </div>
31 </div> 31 </div>
32 32
33 <div class="row"> 33 <div class="row">
34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
35 <div class="col-sm-7"> 35 <div class="col-sm-7">
36 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> 36 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
37 <div class="col-4 p-2" *ngFor="let producto of productos"> 37 <div class="col-4 p-2" *ngFor="let producto of productos">
38 <div class="bg-white rounded-sm shadow border-0"> 38 <div class="bg-white rounded-sm shadow border-0">
39 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto"> 39 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
40 <div class="p-2"> 40 <div class="p-2">
41 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 41 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
42 <div class="row justify-content-between m-0"> 42 <div class="row justify-content-between m-0">
43 <div class="col-12 p-0"> 43 <div class="col-12 p-0">
44 <div class="text-left"> 44 <div class="text-left">
45 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p> 45 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p>
46 <p class="m-0 h6"><small>{{producto.CodSec}}-{{producto.CodArt}}</small></p> 46 <p class="m-0 h6"><small>{{producto.CodSec}}-{{producto.CodArt}}</small></p>
47 </div> 47 </div>
48 </div> 48 </div>
49 <div class="col-12 my-auto pt-2 pr-2 p-0"> 49 <div class="col-12 my-auto pt-2 pr-2 p-0">
50 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 50 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
51 </div> 51 </div>
52 </div> 52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 58
59 <div class="col-sm-5"> 59 <div class="col-sm-5 pl-0">
60 <div class="row ml-3"> 60 <div class="row ml-3">
61 <!-- TICKET --> 61 <!-- TICKET -->
62 <div class="col-sm-7"> 62 <div class="col-sm-7 p-0">
63 <div class="card rounded-sm shadow"> 63 <div class="card rounded-sm shadow">
64 <div class="card-body"> 64 <div class="card-body">
65 <p class="h5 card-title">Su Ticket</p> 65 <p class="h5 card-title">Su Ticket</p>
66 <p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll"> 66 <div class="row mt-4 m-0">
67 Ticket detalle. 67 <div class="col-12 p-0 mb-2">
68 </p> 68 <p class="h6 m-0 card-text text-left">
69 <p class="h4 card-text text-right mt-3 mb-0"> 69 <small class="font-weight-bold">DESCRIPCIÓN</small>
70 Total {{230 | currency}} 70 </p>
71 <p class="h6 m-0 card-text text-left">
72 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
73 </p>
74 </div>
75 </div>
76 <div class="row vh-50 px-2 overflow-scroll m-0">
77 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
78 <p class="h6 m-0 card-text text-left">
79 <small>{{producto.DetArt}}</small>
80 </p>
81 <div class="row d-flex justify-content-between m-0">
82 <div class="col p-0">
83 <p class="h6 m-0 card-text text-left">
84 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
85 </p>
86 </div>
87 <div class="col p-0">
88 <p class="h6 m-0 card-text text-right">
89 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
90 </p>
91 </div>
92 </div>
93 </div>
94 </div>
95 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
96 Total {{getTotal() | currency}}
71 </p> 97 </p>
72 </div> 98 </div>
73 </div> 99 </div>
74 </div> 100 </div>
75 </div> 101 </div>
76 </div> 102 </div>
77 </div> 103 </div>
78 104
79 <!-- OPCIONES ABAJO DERECHA --> 105 <!-- OPCIONES ABAJO DERECHA -->
80 <div class="row m-0 fixed-bottom"> 106 <div class="row m-0 fixed-bottom">
81 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 107 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
82 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 108 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
83 <div class="card-body row m-0"> 109 <div class="card-body row m-0">
84 <div class="col-12 p-3"> 110 <div class="col-12 p-3">
85 <button 111 <button
86 type="button" 112 type="button"
87 class="btn btn-block btn-light shadow btn-sm shadow" 113 class="btn btn-block btn-light shadow btn-sm shadow"
88 (click)="volverPreviousPage()"> 114 (click)="volverPreviousPage()">
89 <span class="pr-2">Volver</span> 115 <span class="pr-2">Volver</span>
90 <i class="fa fa-undo text-warning"></i> 116 <i class="fa fa-undo text-warning"></i>
91 </button> 117 </button>
92 <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> 118 <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
93 <span class="font-weight-bold pr-2">Finalizar y Pagar</span> 119 <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
94 <i class="fa fa-check text-success"></i> 120 <i class="fa fa-check text-success"></i>
95 </button> 121 </button>
96 <button 122 <button
97 type="button" 123 type="button"
98 class="btn btn-block btn-light shadow btn-sm shadow" 124 class="btn btn-block btn-light shadow btn-sm shadow"
99 [routerLink]="['/cancelar-compra']"> 125 [routerLink]="['/cancelar-compra']">
100 <span class="pr-2">Cancelar</span> 126 <span class="pr-2">Cancelar</span>
101 <i class="fa fa-times text-danger"></i> 127 <i class="fa fa-times text-danger"></i>
102 </button> 128 </button>
103 </div> 129 </div>
104 </div> 130 </div>
105 </div> 131 </div>
106 </div> 132 </div>
107 </div> 133 </div>
108 134
109 </div> 135 </div>
110 </div> 136 </div>
111 137
112 </div> 138 </div>
113 139
114 </div> 140 </div>
115 141
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
Diff comments   View file @ 5a8d8ac
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } 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 6
6 @Component({ 7 @Component({
7 selector: 'app-confirmacion-carrito', 8 selector: 'app-confirmacion-carrito',
8 templateUrl: './confirmacion-carrito.component.html', 9 templateUrl: './confirmacion-carrito.component.html',
9 styleUrls: ['./confirmacion-carrito.component.scss'] 10 styleUrls: ['./confirmacion-carrito.component.scss']
10 }) 11 })
11 export class ConfirmacionCarritoComponent implements OnInit { 12 export class ConfirmacionCarritoComponent implements OnInit {
12 13
13 productos = []; 14 productos: Producto[] = [];
15 total: number = 0;
14 private apiUrl: string = appSettings.apiUrl; 16 private apiUrl: string = appSettings.apiUrl;
15 17
16 constructor(private location: Location, private productoService: ProductoService) { } 18 constructor(
19 private location: Location,
20 private productoService: ProductoService
21 ) { }
17 22
18 ngOnInit() { 23 ngOnInit() {
24
19 this.productos = this.productoService.productos; 25 this.productos = this.productoService.productos;
20 } 26 }
21 27
22 volverPreviousPage() { 28 volverPreviousPage() {
29
23 this.location.back(); 30 this.location.back();
24 } 31 }
25 32
33 getTotal() {
34
35 var subTotal = 0;
36 this.productos.forEach(producto => {
37
38 subTotal = subTotal + (producto.PreVen * producto.cantidad);
39 });
40 return this.total = subTotal;
41 }
42
26 } 43 }
27 44
src/app/components/header/header.component.html
Diff comments   View file @ 5a8d8ac
1 <div class="row m-0 bg-light p-4 justify-content-between"> 1 <div class="row m-0 bg-light p-4 justify-content-between">
2 <div class="col-auto"> 2 <div class="col-6">
3 <img src="{{apiUrl}}/imagenes/logoaxion.png"> 3 <img class="w-25 float-left" src="{{apiUrl}}/imagenes/logoempresa.png">
4 </div> 4 </div>
5 <div class="col-auto"> 5 <div class="col-6">
6 <img src="{{apiUrl}}/imagenes/logodebo.png"> 6 <img class="w-25 float-right" src="{{apiUrl}}/imagenes/logodebo.png">
7 </div> 7 </div>
8 </div> 8 </div>
9 9
src/app/components/home/home.component.html
Diff comments   View file @ 5a8d8ac
1 <div class="container-fluid p-0"> 1 <div class="container-fluid p-0">
2 <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image vh-100 w-100"> 2 <img
3 src="{{apiUrl}}/imagenes/homeBackground.jpg"
4 class="background-image vh-100 w-100">
3 <div class="row m-0"> 5 <div class="row m-0">
4 <div class="col p-0"> 6 <div class="col p-0">
5 <div 7 <div
6 class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select" 8 class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select"
7 [routerLink]="['/inicio']"> 9 [routerLink]="['/inicio']">
8 10
9 <!-- HEADER --> 11 <!-- HEADER -->
10 <div class="row m-0 w-100 bg-primary-gradient-horizontal"> 12 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
11 <div class="col-6 bg-white p-3 rounded-bottom-right"> 13 <div class="col-6 bg-white p-3 rounded-bottom-right">
12 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png"> 14 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoempresa.png">
13 </div> 15 </div>
14 </div> 16 </div>
15 17
16 <!-- INFO DE BIENVENIDA --> 18 <!-- INFO DE BIENVENIDA -->
17 <div class="row w-100"> 19 <div class="row w-100">
18 <div class="col-4 offset-2"> 20 <div class="col-4 offset-2">
19 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-100"> 21
22 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
23 <div class="carousel-inner">
24 <div class="carousel-item active">
25 <img
26 src="{{apiUrl}}/imagenes/coca1.jpg"
27 class="d-block rounded-sm shadow w-100">
28 </div>
29 <div class="carousel-item">
30 <img
31 src="{{apiUrl}}/imagenes/coca2.jpg"
32 class="d-block rounded-sm shadow w-100">
33 </div>
34 <div class="carousel-item">
35 <img
36 src="{{apiUrl}}/imagenes/coca3.jpg"
37 class="d-block rounded-sm shadow w-100">
38 </div>
39 </div>
40 </div>
41
20 </div> 42 </div>
21 <div class="col-6 text-center text-white my-auto"> 43 <div class="col-6 text-center text-white my-auto">
22 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p> 44 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p>
23 <p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p> 45 <p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
24 </div> 46 </div>
25 </div> 47 </div>
26 48
27 <!-- FOOTER --> 49 <!-- FOOTER -->
28 <div class="row m-0 w-100 bg-gray"> 50 <div class="row m-0 w-100 bg-gray">
29 <div class="col-6 bg-white offset-6 p-3 rounded-top-left"> 51 <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
30 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png"> 52 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
31 </div> 53 </div>
32 </div> 54 </div>
33 55
34 </div> 56 </div>
35 </div> 57 </div>
36 </div> 58 </div>
37 </div> 59 </div>
38 60
src/app/components/mensaje-final/mensaje-final.component.html
Diff comments   View file @ 5a8d8ac
File was created 1 <div class="container-fluid fade-in p-0 disable-user-select">
2 <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image vh-100 w-100">
3 <div class="row m-0">
4 <div class="col p-0">
5 <div class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select">
6
7 <!-- HEADER -->
8 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
9 <div class="col-6 bg-white p-3 rounded-bottom-right">
10 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoempresa.png">
11 </div>
12 </div>
13
14 <div class="row py-5 m-0 w-100">
15 <div class="col-6 offset-3">
16 <div class="row h-100">
17 <div class="col-12 my-auto">
18 <div>
19 <div class="mb-5 mt-4">
20 <p class="display-1 card-text text-center text-white font-weight-bold">
21 Gracias
22 </p>
23 <p class="display-4 card-text text-center text-white font-weight-bold">
24 Por su compra
25 </p>
26 </div>
27 </div>
28 </div>
29 </div>
30 </div>
31 </div>
32
33 <!-- FOOTER -->
34 <div class="row m-0 w-100 bg-gray">
35 <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
36 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
37 </div>
38 </div>
39
40 </div>
41 </div>
42 </div>
43 </div>
44
src/app/components/mensaje-final/mensaje-final.component.scss
Diff comments   View file @ 5a8d8ac
src/app/components/mensaje-final/mensaje-final.component.spec.ts
Diff comments   View file @ 5a8d8ac
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { MensajeFinalComponent } from './mensaje-final.component';
4
5 describe('MensajeFinalComponent', () => {
6 let component: MensajeFinalComponent;
7 let fixture: ComponentFixture<MensajeFinalComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ MensajeFinalComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(MensajeFinalComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/mensaje-final/mensaje-final.component.ts
Diff comments   View file @ 5a8d8ac
File was created 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings';
3 import { ProductoService } from 'src/app/services/producto.service';
4 import { Router } from '@angular/router';
5
6 @Component({
7 selector: 'app-mensaje-final',
8 templateUrl: './mensaje-final.component.html',
9 styleUrls: ['./mensaje-final.component.scss']
10 })
11 export class MensajeFinalComponent implements OnInit {
12
13 private apiUrl: string = appSettings.apiUrl;
14 private timer: any;
15
16 constructor(
17 private productoService: ProductoService,
18 private router: Router
19 ) { }
20
21 ngOnInit() {
22
23 this.timer = setTimeout(() => {
24
25 this.limpiarCarritoYvolver();
26 }, 3000)
27 }
28
29 ngOnDestroy() {
30
31 clearTimeout(this.timer);
32 }
33
34 limpiarCarritoYvolver() {
35
36 this.productoService.productoAcargar = undefined;
37 this.productoService.promoAcargar = undefined;
38 this.productoService.productos = [];
39 this.router.navigate(['/home']);
40 }
41
42 }
43
src/app/components/pago/pago.component.html
Diff comments   View file @ 5a8d8ac
1 <div class="row"> 1 <div
2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
3 class="row m-0 fade-in bg-primary-gradient disable-user-select">
4
5 <div class="col-12 p-0 vh-100">
2 6
3 <app-header></app-header> 7 <app-header></app-header>
4
5 <div class="col-12">
6 8
7 <!-- NOMBRE DE SECCION --> 9 <!-- NOMBRE DE SECCION -->
8 <div class="row m-0"> 10 <div class="row m-0">
9 <div class="col-12 p-0"> 11 <div class="col-12 p-0">
10 <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p> 12 <p class="h5 py-1 bg-gray text-muted text-center m-0">
13 Pagar
14 <i class="fa fa-usd"></i>
15 </p>
11 </div> 16 </div>
12 </div> 17 </div>
13 18
14 <div class="row m-3 d-flex align-items-center"> 19 <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center">
15 <div class="col-4"> 20 <div class="col-7 text-center">
16 <h1>Mi Compra <i class="fa fa-shopping-cart"></i></h1> 21 <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p>
17 </div>
18 <div class="col-8">
19 <h2 *ngIf="!verQR">Seleccione medio de pago</h2>
20 <h2 *ngIf="verQR">Escane QR</h2>
21 </div> 22 </div>
22 </div> 23 </div>
23 24
24 </div> 25 <div *ngIf="!verQR" class="row fade-in mt-3">
26 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
27 <div class="col-sm-7">
28 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
29 <div class="col-4 p-2">
30 <div class="bg-white rounded-sm shadow border-0">
31 <img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block">
32 <div class="p-2 card-text text-center">
33 <p class="h6 text-center m-0">Efectivo</p>
34 </div>
35 </div>
36 </div>
37 <div class="col-4 p-2">
38 <div class="bg-white rounded-sm shadow border-0">
39 <img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block">
40 <div class="p-2 card-text text-center">
41 <p class="h6 text-center m-0">Tarjeta</p>
42 </div>
43 </div>
44 </div>
45 <div class="col-4 p-2">
46 <div
47 class="bg-white rounded-sm shadow border-0"
48 (click)="pagar()">
49 <img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block">
50 <div class="p-2 card-text text-center">
51 <p class="h6 text-center m-0">Pago Electrónico</p>
52 </div>
53 </div>
54 </div>
55 </div>
56 </div>
25 57
26 <div *ngIf="!verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto"> 58 <div class="col-sm-5 pl-0">
27 <input type="radio"> 59 <div class="row ml-3">
28 <label>Mercado Pago</label> 60 <!-- TICKET -->
29 </div> 61 <div class="col-sm-7 p-0">
62 <div class="card rounded-sm shadow">
63 <div class="card-body">
64 <p class="h5 card-title">Su Ticket</p>
65 <div class="row mt-4 m-0">
66 <div class="col-12 p-0 mb-2">
67 <p class="h6 m-0 card-text text-left">
68 <small class="font-weight-bold">DESCRIPCIÓN</small>
69 </p>
70 <p class="h6 m-0 card-text text-left">
71 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
72 </p>
73 </div>
74 </div>
75 <div class="row px-2 vh-50 overflow-scroll m-0">
76 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
77 <p class="h6 m-0 card-text text-left">
78 <small>{{producto.DetArt}}</small>
79 </p>
80 <div class="row d-flex justify-content-between m-0">
81 <div class="col p-0">
82 <p class="h6 m-0 card-text text-left">
83 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
84 </p>
85 </div>
86 <div class="col p-0">
87 <p class="h6 m-0 card-text text-right">
88 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
89 </p>
90 </div>
91 </div>
92 </div>
93 </div>
94 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
95 Total {{getTotal() | currency}}
96 </p>
97 </div>
98 </div>
99 </div>
100 </div>
101 </div>
102 </div>
30 103
31 <div *ngIf="verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto"> 104 <div *ngIf="verQR" class="row fade-in mt-5">
32 <h3>Pago con QR mercado pago</h3> 105 <div class="col-6 offset-3 border-0 mb-auto">
33 <div class="card-body"> 106 <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm">
34 <img src="{{apiUrl}}/imagenes/qrmp.jpg" alt=""> 107 </div>
35 </div> 108 </div>
36 </div>
37 109
38 <!-- OPCIONES ABAJO DERECHA --> 110 <!-- OPCIONES ABAJO DERECHA -->
39 <div class="row m-0 fixed-bottom" > 111 <div class="row m-0 fixed-bottom" >
40 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 112 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
41 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 113 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
42 <div class="card-body row m-0"> 114 <div class="card-body row m-0">
43 <div class="col-12 p-3"> 115 <div class="col-12 p-3">
44 <button 116 <button
45 type="button" 117 type="button"
46 class="btn btn-block btn-light shadow btn-sm shadow" 118 class="btn btn-block btn-light shadow btn-sm shadow"
47 (click)="volverPreviousPage()"> 119 (click)="volverPreviousPage()">
48 <span class="pr-2">Volver</span> 120 <span class="pr-2">Volver</span>
49 <i class="fa fa-undo text-warning"></i> 121 <i class="fa fa-undo text-warning"></i>
50 </button> 122 </button>
51 <button *ngIf="!verQR" (click)="pagar()" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> 123 <button
52 <span class="font-weight-bold pr-2">Finalizar y Pagar</span> 124 type="button"
53 <i class="fa fa-check text-success"></i> 125 class="btn btn-block btn-light shadow btn-sm shadow"
54 </button> 126 [routerLink]="['/cancelar-compra']">
55 <button *ngIf="!verQR" 127 <span class="pr-2">Cancelar</span>
56 type="button" 128 <i class="fa fa-times text-danger"></i>
57 class="btn btn-block btn-light shadow btn-sm shadow" 129 </button>
58 [routerLink]="['/cancelar-compra']"> 130 </div>
59 <span class="pr-2">Cancelar</span>
60 <i class="fa fa-times text-danger"></i>
61 </button>
62 </div> 131 </div>
63 </div> 132 </div>
64 </div> 133 </div>
65 </div> 134 </div>
135
66 </div> 136 </div>
67 137
68 </div> 138 </div>
139
140 <div
141 *ngIf="compraConQRfinalizada"
142 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
143 <div class="col-12 text-center text-white my-auto">
144 <p class="font-weight-bold display-4">
145 Su pago fue<br>
146 acreditado
147 exitosamente
148 </p>
149 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
150 </div>
151 </div>
152
153 <div
154 *ngIf="compraConEfectivofinalizada"
src/app/components/pago/pago.component.ts
Diff comments   View file @ 5a8d8ac
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } 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 { ProductoService } from 'src/app/services/producto.service'; 4 import { ProductoService } from 'src/app/services/producto.service';
4 import { RouterLink } from '@angular/router'; 5 import { RouterLink, Router } from '@angular/router';
6 import { Producto } from 'src/app/wrappers/producto';
5 7
6 @Component({ 8 @Component({
7 selector: 'app-pago', 9 selector: 'app-pago',
8 templateUrl: './pago.component.html', 10 templateUrl: './pago.component.html',
9 styleUrls: ['./pago.component.scss'] 11 styleUrls: ['./pago.component.scss']
10 }) 12 })
11 export class PagoComponent implements OnInit { 13 export class PagoComponent implements OnInit {
12 14
13 private apiUrl: string = appSettings.apiUrl; 15 private apiUrl: string = appSettings.apiUrl;
14 private verQR: boolean = false; 16 private verQR: boolean = false;
17 private productos: Producto[] = [];
18 private total: number = 0;
15 19
16 constructor(private productoService: ProductoService) { } 20 private compraConQRfinalizada: boolean = false;
21 private compraConEfectivofinalizada: boolean = false;
22
23 constructor(
24 private productoService: ProductoService,
25 private location: Location,
26 private router: Router,
27 ) { }
17 28
18 ngOnInit() { 29 ngOnInit() {
30 this.productos = this.productoService.productos;
19 } 31 }
20 32
21 pagar() { 33 pagar() {
22 34
23 this.verQR = true; 35 this.verQR = true;
24 alert('Procesando Pago'); 36 alert('Procesando Pago');
25 37
26 this.productoService.pagar() 38 this.productoService.pagar()
27 .subscribe(() => { 39 .subscribe(() => {
28 alert('Compra finalizada'); 40 // alert('Compra finalizada');
41 this.compraConQRfinalizada = true;
42 setTimeout(() => {
43
44 this.router.navigate(['mensaje-final']);
45 }, 1000);
29 }, err => { 46 }, err => {
30 console.log(err); 47 console.log(err);
31 alert('algo salió mal'); 48 alert('algo salió mal');
32 }) 49 })
33 } 50 }
34 51
52 volverPreviousPage() {
53
54 if (this.verQR) {
55 this.verQR = false;
56 return;
57 }
58 this.location.back();
59 }
60
61 getTotal() {
62
63 var subTotal = 0;
64 this.productos.forEach(producto => {
65
66 subTotal = subTotal + (producto.PreVen * producto.cantidad);
67 });
68 return this.total = subTotal;
69 }
70
35 } 71 }
36 72
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 5a8d8ac
1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center"> 1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
2 2
3 <!-- ENCABEZADO --> 3 <!-- ENCABEZADO -->
4 <p class="h4 border-bottom border-white text-white mt-4 pb-2"> 4 <p class="h4 border-bottom border-white text-white mt-4 pb-2">
5 Mi compra 5 Mi compra
6 <i class="fa fa-shopping-cart" aria-hidden="true"></i> 6 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
7 </p> 7 </p>
8 8
9 <div class="overflow-auto overflow-scroll mb-2 w-100"> 9 <div class="overflow-auto overflow-scroll mb-2 w-100">
10 <!-- PRODUCTOS CARRITO --> 10 <!-- PRODUCTOS CARRITO -->
11 <div 11 <div
12 class="slide-in-bl my-2 bg-white border-0 rounded-sm" 12 class="slide-in-bl my-2 bg-white border-0 rounded-sm"
13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index"> 13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
14 <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> 14 <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}">
15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> 15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
16 <div class="col-12 p-0 pt-2 text-left my-auto"> 16 <div class="col-12 p-0 pt-2 text-left my-auto">
17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
18 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
19 </div> 18 </div>
20 <div class="col-12 pr-1 text-right h6 my-auto "> 19 <div class="col-12 pr-1 text-right h6 my-auto ">
21 <p class="m-0">{{producto.PreVen | currency}}</p> 20 <p class="m-0">{{producto.PreVen | currency}}</p>
22 </div> 21 </div>
23 </div> 22 </div>
24 23
25 <!-- BOTONES --> 24 <!-- BOTONES -->
26 <div class="row m-0 d-flex justify-content-between"> 25 <div class="row m-0 d-flex justify-content-between">
27 26
28 <!-- SUMAR - RESTAR CANTIDAD --> 27 <!-- SUMAR - RESTAR CANTIDAD -->
29 <div class="col-auto px-1 my-2"> 28 <div class="col-auto px-1 my-2">
30 <div class="btn-group-sm btn-group float-left my-auto" role="group"> 29 <div class="btn-group-sm btn-group float-left my-auto" role="group">
31 <button 30 <button
32 type="button" 31 type="button"
33 class="btn btn-light btn-sm my-auto border shadow" 32 class="btn btn-light btn-sm my-auto border shadow"
34 (click)="aumentarCantidad(producto)"> 33 (click)="aumentarCantidad(producto)">
35 <i class="fa fa-plus" aria-hidden="true"></i> 34 <i class="fa fa-plus" aria-hidden="true"></i>
36 </button> 35 </button>
37 <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow"> 36 <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow">
38 <small>{{producto.cantidad}}</small> 37 <small>{{producto.cantidad}}</small>
39 </div> 38 </div>
40 <button 39 <button
41 type="button" 40 type="button"
42 class="btn btn-light btn-sm my-auto border shadow" 41 class="btn btn-light btn-sm my-auto border shadow"
43 (click)="restarCantidad(producto)"> 42 (click)="restarCantidad(producto)">
44 <i class="fa fa-minus" aria-hidden="true"></i> 43 <i class="fa fa-minus" aria-hidden="true"></i>
45 </button> 44 </button>
46 </div> 45 </div>
47 </div> 46 </div>
48 47
49 <!-- PERSONALIZAR --> 48 <!-- PERSONALIZAR -->
50 <div class="col-auto px-1 my-2"> 49 <div class="col-auto px-1 my-2">
51 <button 50 <button
52 *ngIf="producto.tieneSinonimos" 51 *ngIf="producto.tieneSinonimos"
53 type="button" 52 type="button"
54 class="btn btn-light btn-sm my-auto float-left border shadow" 53 class="btn btn-light btn-sm my-auto float-left border shadow"
55 (click)="personalizarPromo(producto, i)"> 54 (click)="personalizarPromo(producto, i)">
56 <i class="fa fa-refresh text-purple" aria-hidden="true"></i> 55 <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
57 </button> 56 </button>
58 </div> 57 </div>
59 58
60 <!-- BORRAR --> 59 <!-- BORRAR -->
61 <div class="col-auto px-1 my-2"> 60 <div class="col-auto px-1 my-2">
62 <button 61 <button
63 type="button" 62 type="button"
64 class="btn btn-secondary btn-sm my-auto shadow" 63 class="btn btn-secondary btn-sm my-auto shadow"
65 (click)="deleteProducto(producto, i)"> 64 (click)="deleteProducto(producto, i)">
66 <i class="fa fa-trash" aria-hidden="true"></i> 65 <i class="fa fa-trash" aria-hidden="true"></i>
67 </button> 66 </button>
68 </div> 67 </div>
69 </div> 68 </div>
70 </div> 69 </div>
71 </div> 70 </div>
72 71
73 <!-- TOTAL --> 72 <!-- TOTAL -->
74 <div class="card rounded-top-sm mt-auto blue-gradient border-0"> 73 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
75 <div class="card-body row"> 74 <div class="card-body row">
76 <div class="col-12"> 75 <div class="col-12">
77 <p 76 <p
78 class="h4 border-bottom border-secondary text-secondary pb-2"> 77 class="h4 border-bottom border-secondary text-secondary pb-2">
79 ({{getCantidadProductos()}}) artículos 78 ({{getCantidadProductos()}}) artículos
80 </p> 79 </p>
81 <p class="h3 text-secondary">Total</p> 80 <p class="h3 text-secondary">Total</p>
82 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p> 81 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
83 </div> 82 </div>
84 <div class="col-12"> 83 <div class="col-12">
85 <button 84 <button
86 *ngIf="getCantidadProductos() > 0" 85 *ngIf="getCantidadProductos() > 0"
87 type="button" 86 type="button"
88 class="btn btn-block btn-light btn-lg shadow mb-2 p-1" 87 class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
89 routerLink="/confirmacion-carrito"> 88 routerLink="/confirmacion-carrito">
90 <span class="font-weight-bold pr-1">Finalizar y Pagar</span> 89 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
91 <i class="fa fa-check text-success" aria-hidden="true"></i> 90 <i class="fa fa-check text-success" aria-hidden="true"></i>
92 </button> 91 </button>
93 <button 92 <button
94 type="button" 93 type="button"
95 class="btn btn-block btn-light shadow btn-sm shadow" 94 class="btn btn-block btn-light shadow btn-sm shadow"
96 [routerLink]="['/cancelar-compra']"> 95 [routerLink]="['/cancelar-compra']">
97 <span class="pr-1">Cancelar</span> 96 <span class="pr-1">Cancelar</span>
98 <i class="fa fa-times text-danger" aria-hidden="true"></i> 97 <i class="fa fa-times text-danger" aria-hidden="true"></i>
99 </button> 98 </button>
100 </div> 99 </div>
101 </div> 100 </div>
102 </div> 101 </div>
103 </div> 102 </div>
104 103
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ 5a8d8ac
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Producto } from 'src/app/wrappers/producto'; 2 import { Producto } from 'src/app/wrappers/producto';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { ProductoService } from 'src/app/services/producto.service'; 4 import { ProductoService } from 'src/app/services/producto.service';
5 import { Router } from '@angular/router'; 5 import { Router } from '@angular/router';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-sidebar', 8 selector: 'app-sidebar',
9 templateUrl: './sidebar.component.html', 9 templateUrl: './sidebar.component.html',
10 styleUrls: ['./sidebar.component.scss'], 10 styleUrls: ['./sidebar.component.scss'],
11 }) 11 })
12 export class SidebarComponent implements OnInit { 12 export class SidebarComponent implements OnInit {
13 13
14 private cantTotal: number = 0; 14 private cantTotal: number = 0;
15 private cantMin: number = 1; 15 private cantMin: number = 1;
16 private cantMax: number = 50; 16 private cantMax: number = 50;
17 private total: number = 0; 17 private total: number = 0;
18 private apiUrl: string = appSettings.apiUrl; 18 private apiUrl: string = appSettings.apiUrl;
19 19
20 public productosCarrito: Producto[] = []; 20 public productosCarrito: Producto[] = [];
21 21
22 constructor( 22 constructor(
23 private productoService: ProductoService, 23 private productoService: ProductoService,
24 private router: Router) { 24 private router: Router) {
25 this.router.routeReuseStrategy.shouldReuseRoute = function () { 25 this.router.routeReuseStrategy.shouldReuseRoute = function () {
26 return false; 26 return false;
27 } 27 }
28 } 28 }
29 29
30 ngOnInit() { 30 ngOnInit() {
31 31
32 this.productosCarrito = this.productoService.productos; 32 this.productosCarrito = this.productoService.productos;
33 } 33 }
34 34
35 getCantidadProductos() { 35 getCantidadProductos() {
36 36
37 var cantTotalAux = 0; 37 var cantTotalAux = 0;
38 this.productosCarrito.forEach(producto => { 38 this.productosCarrito.forEach(producto => {
39 39
40 cantTotalAux += producto.cantidad; 40 cantTotalAux += producto.cantidad;
41 }); 41 });
42 this.cantTotal = cantTotalAux; 42 this.cantTotal = cantTotalAux;
43 43
44 return this.cantTotal; 44 return this.cantTotal;
45 } 45 }
46 46
47 getTotal() { 47 getTotal() {
48 48
49 var subTotal = 0; 49 var subTotal = 0;
50 for (let i = 0; i < this.productosCarrito.length; i++) { 50 for (let i = 0; i < this.productosCarrito.length; i++) {
51 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); 51 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
52 } 52 }
53 return this.total = subTotal; 53 return this.total = subTotal;
54 } 54 }
55 55
56 aumentarCantidad(producto: Producto) { 56 aumentarCantidad(producto: Producto) {
57 57
58 if (producto.cantidad < this.cantMax) { 58 if (producto.cantidad < this.cantMax) {
59 producto.cantidad++; 59 producto.cantidad++;
60 this.cantTotal++ 60 this.cantTotal++
61 } 61 }
62 } 62 }
63 63
64 restarCantidad(producto: Producto) { 64 restarCantidad(producto: Producto) {
65 65
66 if (producto.cantidad > this.cantMin) { 66 if (producto.cantidad > this.cantMin) {
67 producto.cantidad--; 67 producto.cantidad--;
68 this.cantTotal--; 68 this.cantTotal--;
69 } 69 }
70 } 70 }
71 71
72 deleteProducto(producto: Producto, index: number) { 72 deleteProducto(producto: Producto, index: number) {
73 73
74 this.cantTotal -= producto.cantidad; 74 this.cantTotal -= producto.cantidad;
75 this.total -= producto.PreVen * producto.cantidad; 75 this.total -= producto.PreVen * producto.cantidad;
76 this.productosCarrito.reverse().splice(index, 1); 76 this.productosCarrito.reverse().splice(index, 1);
77 return; 77 return;
78 } 78 }
79 79
80 personalizarPromo(producto: Producto, index) {
81
82 this.productoService.productoAcargar = producto;
83 this.deleteProducto(producto, index);
84 this.router.navigate(['inicio']);
85 }
86
87 }
88
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 background-color: #f0f0f0; 7 background-color: #f0f0f0;
8 font-family: bahnschrift; 8 font-family: bahnschrift;
9 overflow: hidden !important; 9 overflow: hidden !important;
10 } 10 }
11 11
12 .blur { 12 .blur {
13 filter: blur(10px); 13 filter: blur(10px);
14 -webkit-filter: blur(10px); 14 -webkit-filter: blur(10px);
15 } 15 }
16 16
17 .disable-user-select { 17 .disable-user-select {
18 -webkit-user-select: none; 18 -webkit-user-select: none;
19 -moz-user-select: none; 19 -moz-user-select: none;
20 -ms-user-select: none; 20 -ms-user-select: none;
21 user-select: none; 21 user-select: none;
22 } 22 }
23 23
24 .blue-gradient { 24 .blue-gradient {
25 background: linear-gradient(0deg, #ffffff00, $white); 25 background: linear-gradient(0deg, #ffffff00, $white);
26 } 26 }
27 27
28 .rounded { 28 .rounded {
29 border-radius: 1.5rem !important; 29 border-radius: 1.5rem !important;
30 } 30 }
31 31
32 .rounded-top-sm { 32 .rounded-top-sm {
33 border-top-left-radius: 0.75rem !important; 33 border-top-left-radius: 0.75rem !important;
34 border-top-right-radius: 0.75rem !important; 34 border-top-right-radius: 0.75rem !important;
35 } 35 }
36 36
37 .rounded-sm { 37 .rounded-sm {
38 border-radius: 0.75rem !important; 38 border-radius: 0.75rem !important;
39 } 39 }
40 40
41 .card-effect { 41 .card-effect {
42 &:active { 42 &:active {
43 background-color: #c9c9c9b3 !important; 43 background-color: #c9c9c9b3 !important;
44 transition: background-color 0.5s; 44 transition: background-color 0.5s;
45 } 45 }
46 &:focus { 46 &:focus {
47 background-color: #c9c9c9b3 !important; 47 background-color: #c9c9c9b3 !important;
48 transition: background-color 0.5s; 48 transition: background-color 0.5s;
49 } 49 }
50 } 50 }
51 51
52 .overflow-scroll { 52 .overflow-scroll {
53 overflow-y: auto !important; 53 overflow-y: auto !important;
54 overflow-x: hidden !important; 54 overflow-x: hidden !important;
55 &::-webkit-scrollbar { 55 &::-webkit-scrollbar {
56 width: 1em; 56 width: 1em;
57 } 57 }
58 &::-webkit-scrollbar-track { 58 &::-webkit-scrollbar-track {
59 border-radius: 10px; 59 border-radius: 10px;
60 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 60 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
61 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 61 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
62 background-color: $white; 62 background-color: $white;
63 } 63 }
64 &::-webkit-scrollbar-thumb { 64 &::-webkit-scrollbar-thumb {
65 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 65 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
66 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 66 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
67 outline: 1px solid slategrey; 67 outline: 1px solid slategrey;
68 border-radius: 10px; 68 border-radius: 10px;
69 height: 12px; 69 height: 12px;
70 &:active { 70 &:active {
71 box-shadow: inset 0 0 8px $primary; 71 box-shadow: inset 0 0 8px $primary;
72 -webkit-box-shadow: inset 0 0 8px $primary; 72 -webkit-box-shadow: inset 0 0 8px $primary;
73 } 73 }
74 } 74 }
75 &::-webkit-scrollbar-corner { 75 &::-webkit-scrollbar-corner {
76 border-radius: 10px; 76 border-radius: 10px;
77 } 77 }
78 } 78 }
79 79
80 .bg-gray { 80 .bg-gray {
81 background-color: #e6e6e6; 81 background-color: #e6e6e6;
82 } 82 }
83 83
84 .bg-primary-gradient { 84 .bg-primary-gradient {
85 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 85 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
86 } 86 }
87 87
88 .bg-primary-gradient-horizontal { 88 .bg-primary-gradient-horizontal {
89 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 89 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
90 } 90 }
91 91
92 .icon-dim { 92 .icon-dim {
93 height: 40px !important; 93 height: 40px !important;
94 width: auto !important; 94 width: auto !important;
95 background-color: white !important; 95 background-color: white !important;
96 } 96 }
97 97
98 .text-purple { 98 .text-purple {
99 color: $purple; 99 color: $purple;
100 } 100 }
101 101
102 .vh-70 { 102 .vh-70 {
103 min-height: auto !important; 103 min-height: auto !important;
104 max-height: 70vh !important; 104 max-height: 70vh !important;
105 } 105 }
106 106
107 .vh-60 { 107 .vh-60 {
108 min-height: auto !important; 108 min-height: auto !important;
109 max-height: 60vh !important; 109 max-height: 60vh !important;
110 } 110 }
111 111
112 .vh-50 {
113 min-height: auto !important;
114 max-height: 50vh !important;
115 }
116
112 .spinner-lg { 117 .spinner-lg {
113 width: 3rem !important; 118 width: 3rem !important;
114 height: 3rem !important; 119 height: 3rem !important;
115 } 120 }
116 121
117 .sidebar { 122 .sidebar {
118 right: 0; 123 right: 0;
119 } 124 }
120 125
121 .background-image { 126 .background-image {
122 background-repeat: no-repeat; 127 background-repeat: no-repeat;
123 background-size: cover; 128 background-size: cover;
124 position: fixed; 129 position: fixed;
125 } 130 }
126 131
127 .rounded-bottom-right { 132 .rounded-bottom-right {
128 border-bottom-right-radius: 10rem; 133 border-bottom-right-radius: 10rem;
129 &:before { 134 &:before {
130 border-radius: 0 40px 40px 0; 135 border-radius: 0 40px 40px 0;
131 background-color: #fff; 136 background-color: #fff;
132 } 137 }
133 } 138 }
134 139
135 .rounded-top-left { 140 .rounded-top-left {
136 border-top-left-radius: 10rem; 141 border-top-left-radius: 10rem;
137 } 142 }
138 143
139 .bg-gray { 144 .bg-gray {
140 background-color: #cccccc; 145 background-color: #cccccc;
141 } 146 }
142 147
143 .cdk-overlay-container { 148 .cdk-overlay-container {
144 position: absolute; 149 position: absolute;
145 top: 65%; 150 top: 65%;
146 width: 100%; 151 width: 100%;
147 } 152 }
148 153