Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit d37959514711466cbce67839a6fe7fa33c0ceae1

Authored by Marcelo Puebla
2 parents fc90983e6b 9848d3e6c5
Exists in develop and in 1 other branch 20200117-axion-responsive

Merge branch 'master' into 'develop' 

Master(benjamin)

See merge request !20
Showing 15 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ d379595
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 { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
4 import { AdminComponent } from './modules/admin/admin.component'; 4 import { AdminComponent } from './modules/admin/admin.component';
5 5
6 const routes: Routes = [ 6 const routes: Routes = [
7 { path: '', component: SplashScreenComponent }, 7 { path: '', component: SplashScreenComponent },
8 { 8 {
9 path: '', 9 path: '',
10 component: AdminComponent, 10 component: AdminComponent,
11 children: [ 11 children: [
12 { 12 {
13 path: 'info-formas-pago', 13 path: 'info-formas-pago',
14 loadChildren: () => import('./modules/info-formas-pago/info-formas-pago.module').then(m => m.InfoFormasPagoModule) 14 loadChildren: () => import('./modules/info-formas-pago/info-formas-pago.module').then(m => m.InfoFormasPagoModule)
15 }, 15 },
16 { 16 {
17 path: 'opcion-pedido', 17 path: 'opcion-pedido',
18 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule) 18 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule)
19 }, 19 },
20 { 20 {
21 path: 'seleccion-articulos', 21 path: 'seleccion-articulos',
22 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule) 22 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule)
23 }, 23 },
24 { 24 {
25 path: 'carrito', 25 path: 'carrito',
26 loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule) 26 loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
27 }, 27 },
28 { 28 {
29 path: 'forma-pago', 29 path: 'forma-pago',
30 loadChildren: () => import('./modules/forma-pago/forma-pago.module').then(m => m.FormaPagoModule) 30 loadChildren: () => import('./modules/forma-pago/forma-pago.module').then(m => m.FormaPagoModule)
31 }, 31 },
32 { 32 {
33 path: 'pago-electronico', 33 path: 'pago-electronico',
34 loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule) 34 loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule)
35 }, 35 },
36 { 36 {
37 path: 'pago-tarjeta', 37 path: 'pago-tarjeta',
38 loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule) 38 loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule)
39 }, 39 },
40 ] 40 ]
41 }, 41 },
42 { 42 {
43 path: 'mensaje-final', 43 path: 'mensaje-final',
44 loadChildren: () => import('./modules/mensaje-final/mensaje-final.module').then(m => m.MensajeFinalModule) 44 loadChildren: () => import('./modules/mensaje-final/mensaje-final.module').then(m => m.MensajeFinalModule)
45 }, 45 },
46 { 46 {
47 path: 'pedidos-salientes', 47 path: 'pedidos-salientes',
48 loadChildren: () => import('./modules/pedidos-salientes/pedidos-salientes.module').then(m => m.PedidosSalientesModule) 48 loadChildren: () => import('./modules/pedidos-salientes/pedidos-salientes.module').then(m => m.PedidosSalientesModule)
49 }, 49 },
50 { 50 {
51 path: 'comanda', 51 path: 'comanda',
52 loadChildren: () => import('./modules/comanda/comanda.module').then(m => m.ComandaModule) 52 loadChildren: () => import('./modules/comanda/comanda.module').then(m => m.ComandaModule)
53 }, 53 },
54 {
55 path: 'cancelar-compra',
56 loadChildren: () => import('./modules/cancelar-compra/cancelar-compra.module').then(m => m.CancelarCompraModule)
57 },
54 { path: '**', redirectTo: '', pathMatch: 'full' }, 58 { path: '**', redirectTo: '', pathMatch: 'full' },
55 ]; 59 ];
56 60
57 @NgModule({ 61 @NgModule({
58 imports: [RouterModule.forRoot(routes, { useHash: true })], 62 imports: [RouterModule.forRoot(routes, { useHash: true })],
59 exports: [RouterModule] 63 exports: [RouterModule]
60 }) 64 })
61 export class AppRoutingModule { } 65 export class AppRoutingModule { }
62 66
src/app/modules/admin/admin.component.ts
Diff comments   View file @ d379595
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { Router } from '@angular/router';
2 3
3 @Component({ 4 @Component({
4 selector: 'app-admin', 5 selector: 'app-admin',
5 templateUrl: './admin.component.html', 6 templateUrl: './admin.component.html',
6 styleUrls: ['./admin.component.scss'] 7 styleUrls: ['./admin.component.scss']
7 }) 8 })
9
8 export class AdminComponent implements OnInit { 10 export class AdminComponent implements OnInit {
11 timerReposo: any;
12
13 constructor(
14 private router: Router,
15 ) { }
16
17 ngOnInit() {
18 this.startTimeOutInactividad();
19 }
20
21 @HostListener('document:click', ['$event'])
22
23 documentClick(event: MouseEvent) {
24 if (event) {
25 this.restartTimer();
26 }
27 }
9 28
10 constructor() { } 29 restartTimer() {
30 clearTimeout(this.timerReposo);
31 this.startTimeOutInactividad();
32 }
11 33
12 ngOnInit() { } 34 startTimeOutInactividad() {
35 this.timerReposo = setTimeout(() => {
36 this.router.navigate(['cancelar-compra']);
37 }, 90000);
38 }
13 39
14 } 40 }
15 41
src/app/modules/cancelar-compra/cancelar-compra-routing.module.ts
Diff comments   View file @ d379595
File was created 1 import { NgModule, Component } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router';
3 import { CancelarCompraComponent } from './cancelar-compra.component';
4
5
6 const routes: Routes = [
7 { path: '', component: CancelarCompraComponent }
8 ];
9
10 @NgModule({
11 imports: [RouterModule.forChild(routes)],
12 exports: [RouterModule]
13 })
14 export class CancelarCompraRoutingModule { }
15
src/app/modules/cancelar-compra/cancelar-compra.component.html
Diff comments   View file @ d379595
File was created 1 <div class="row justify-content-center mt-2 h-15">
2 <img class="w-20 my-auto" src="../../../assets/img/logo-spot.svg">
3 </div>
4 <div class="row mt-5 mx-0 justify-content-around h-30">
5 <div class="col-5 col-md-6 col-lg-3 h-100">
6 <div class="p-3 bg-white text-center shadow-lg rounded h-100">
7 <h4 class="pt-3 mt-5">NECESITA</h4>
8 <h2 class="font-weight-bold text-secondary mt-4">más tiempo</h2>
9 <h4 class="mt-4">PARA SU PEDIDO?</h4>
10 </div>
11 </div>
12 </div>
13 <!-- BUTTONS -->
14 <div class="row mt-5 h-auto justify-content-center mx-0">
15 <div class="col-auto px-0 h-auto align-self-start">
16 <div
17 class="btn-effect col-auto align-self-center px-0 bg-white"
18 (click)="volverPreviousPage()">
19 <div class="row mx-0 bg-primary badge-pill">
20 <div class="col-auto align-self-center text-white">continuar compra</div>
21 <div class="col-auto align-self-center p-0">
22 <img
23 draggable="false"
24 ondragstart="return false;"
25 (contextmenu)="false"
26 class="p-1 icon-30"
27 src="assets/img/ir.svg">
28 </div>
29 </div>
30 </div>
31 </div>
32 </div>
33 <div class="row mt-4 h-auto justify-content-center mx-0">
34 <div class="col-auto px-0 h-auto align-self-start">
35 <div
36 class="btn-effect col-auto align-self-center px-0 bg-white"
37 (click)="limpiarCarritoYvolver()">
38 <div class="row mx-0 bg-grey badge-pill">
39 <div class="col-auto align-self-center">cancelar compra</div>
40 <div class="col-auto align-self-center p-0">
41 <img
42 draggable="false"
43 ondragstart="return false;"
44 (contextmenu)="false"
45 class="p-1 icon-30"
46 src="assets/img/icono-cancelar-color.svg">
47 </div>
48 </div>
49 </div>
50 </div>
51 </div>
52
src/app/modules/cancelar-compra/cancelar-compra.component.scss
Diff comments   View file @ d379595
File was created 1 .bg-grey {
2 background-color: rgb(212, 212, 212);
3 }
4
src/app/modules/cancelar-compra/cancelar-compra.component.spec.ts
Diff comments   View file @ d379595
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { CancelarCompraComponent } from './cancelar-compra.component';
4
5 describe('CancelarCompraComponent', () => {
6 let component: CancelarCompraComponent;
7 let fixture: ComponentFixture<CancelarCompraComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ CancelarCompraComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(CancelarCompraComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/modules/cancelar-compra/cancelar-compra.component.ts
Diff comments   View file @ d379595
File was created 1 import { Component, OnInit } from '@angular/core';
2 import { Location } from '@angular/common';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { Router } from '@angular/router';
5
6 @Component({
7 selector: 'app-cancelar-compra',
8 templateUrl: './cancelar-compra.component.html',
9 styleUrls: ['./cancelar-compra.component.scss']
10 })
11 export class CancelarCompraComponent implements OnInit {
12
13 constructor(
14 private location: Location,
15 private router: Router,
16 private articuloService: ArticuloService
17 ) { }
18
19 ngOnInit() {
20 setTimeout(() => {
21 this.limpiarCarritoYvolver();
22 }, 90000);
23 }
24
25 volverPreviousPage() {
26 this.location.back();
27 }
28
29 limpiarCarritoYvolver() {
30 this.articuloService.carrito = undefined;
31 this.router.navigate(['/']);
32 }
33 }
34
src/app/modules/cancelar-compra/cancelar-compra.module.ts
Diff comments   View file @ d379595
File was created 1 import { NgModule } from '@angular/core';
2 import { CommonModule } from '@angular/common';
3
4 import { CancelarCompraRoutingModule } from './cancelar-compra-routing.module';
5 import { CancelarCompraComponent } from './cancelar-compra.component';
6
7
8 @NgModule({
9 declarations: [CancelarCompraComponent],
10 imports: [
11 CommonModule,
12 CancelarCompraRoutingModule
13 ]
14 })
15 export class CancelarCompraModule { }
16
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ d379595
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="h-75"> 5 <div class="h-75">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- CARRITO --> 15 <!-- CARRITO -->
16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"> 16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
17 <!-- MENSAJE DE ADVERTENCIA --> 17 <!-- MENSAJE DE ADVERTENCIA -->
18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> 18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
19 <p class="h5 text-center">No hay artículos en el carrito</p> 19 <p class="h5 text-center">No hay artículos en el carrito</p>
20 </div> 20 </div>
21 <!-- ARTICULOS --> 21 <!-- ARTICULOS -->
22 <div 22 <div
23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" 23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
24 *ngFor="let articulo of articuloService.carrito; let i = index;" 24 *ngFor="let articulo of articuloService.carrito; let i = index;"
25 @EnterLeave> 25 @EnterLeave>
26 <!-- ARTICULO --> 26 <!-- ARTICULO -->
27 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 27 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
28 <div class="row mx-0 h-100"> 28 <div class="row mx-0 h-100">
29 <!-- NOMBRE E IMAGEN --> 29 <!-- NOMBRE E IMAGEN -->
30 <div class="col-3 h-100 border-right border-primary align-self-center"> 30 <div class="col-3 h-100 border-right border-primary align-self-center">
31 <img 31 <img
32 draggable="false" 32 draggable="false"
33 ondragstart="return false;" 33 ondragstart="return false;"
34 (contextmenu)="false" 34 (contextmenu)="false"
35 class="d-block mx-auto h-55 rounded-sm shadow-sm" 35 class="d-block mx-auto h-55 rounded-sm shadow-sm"
36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
37 onerror="this.src='assets/img/image-not-found.jpg'"> 37 onerror="this.src='assets/img/image-not-found.jpg'">
38 <div class="row mx-0 h-45"> 38 <div class="row mx-0 h-45">
39 <p class="col text-primary text-truncate align-self-end"> 39 <p class="col text-primary text-truncate align-self-end">
40 <small>{{articulo.DetArt}}</small> 40 <small>{{articulo.DetArt}}</small>
41 </p> 41 </p>
42 </div> 42 </div>
43 </div> 43 </div>
44 <!-- CANTIDAD --> 44 <!-- CANTIDAD -->
45 <div class="col-3 border-right border-primary"> 45 <div class="col-3 border-right border-primary">
46 <p><small>CANT</small></p> 46 <p><small>CANT</small></p>
47 <div class="row mt-2 mx-0"> 47 <div class="row mt-2 mx-0">
48 <div class="col-12 h-auto"> 48 <div class="col-12 h-auto">
49 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 49 <div class="row mx-0 justify-content-between bg-primary badge-pill">
50 <!-- BOTON MENOS --> 50 <!-- BOTON MENOS -->
51 <div class="col-auto px-0"> 51 <div class="col-auto px-0">
52 <img 52 <img
53 draggable="false" 53 draggable="false"
54 ondragstart="return false;" 54 ondragstart="return false;"
55 (contextmenu)="false" 55 (contextmenu)="false"
56 class="d-block ml-auto py-2 icon-20 btn-effect" 56 class="d-block ml-auto py-2 icon-20 btn-effect"
57 src="assets/img/menos-blanco.svg" 57 src="assets/img/menos-blanco.svg"
58 (click)="substractCant(articulo)"> 58 (click)="substractCant(articulo)">
59 </div> 59 </div>
60 <!-- CANTIDAD --> 60 <!-- CANTIDAD -->
61 <div class="col px-0 align-self-center text-white"> 61 <div class="col px-0 align-self-center text-white">
62 <p><small>{{articulo.cantidad}}</small></p> 62 <p><small>{{articulo.cantidad}}</small></p>
63 </div> 63 </div>
64 <!-- BOTON MAS --> 64 <!-- BOTON MAS -->
65 <div class="col-auto px-0"> 65 <div class="col-auto px-0">
66 <img 66 <img
67 draggable="false" 67 draggable="false"
68 ondragstart="return false;" 68 ondragstart="return false;"
69 (contextmenu)="false" 69 (contextmenu)="false"
70 class="d-block ml-auto py-2 icon-20 btn-effect" 70 class="d-block ml-auto py-2 icon-20 btn-effect"
71 src="assets/img/mas-blanco.svg" 71 src="assets/img/mas-blanco.svg"
72 (click)="addCant(articulo)"> 72 (click)="addCant(articulo)">
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 <!-- OPCIONALES --> 78 <!-- OPCIONALES -->
79 <!-- <div class="col-3 border-right border-primary"> 79 <!-- <div class="col-3 border-right border-primary">
80 <p><small>OPCIONALES</small></p> 80 <p><small>OPCIONALES</small></p>
81 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 81 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
82 <div class="row mx-0 mt-2 justify-content-center"> 82 <div class="row mx-0 mt-2 justify-content-center">
83 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white"> 83 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
84 <span> 84 <span>
85 <small class="pr-2">CAMBIAR</small> 85 <small class="pr-2">CAMBIAR</small>
86 <img 86 <img
87 draggable="false" 87 draggable="false"
88 ondragstart="return false;" 88 ondragstart="return false;"
89 (contextmenu)="false" 89 (contextmenu)="false"
90 class="icon-20" 90 class="icon-20"
91 src="assets/img/ir.svg"> 91 src="assets/img/ir.svg">
92 </span> 92 </span>
93 </div> 93 </div>
94 </div> --> 94 </div> -->
95 <!-- PRECIO --> 95 <!-- PRECIO -->
96 <div class="col-3 border-right border-primary"> 96 <div class="col-3 border-right border-primary">
97 <p><small>PRECIO</small></p> 97 <p><small>PRECIO</small></p>
98 <div class="py-1 mt-2 badge-pill bg-dark text-white"> 98 <div class="py-1 mt-2 badge-pill bg-dark text-white">
99 <p><small>{{articulo.PreVen | currency}}</small></p> 99 <p><small>{{articulo.PreVen | currency}}</small></p>
100 </div> 100 </div>
101 </div> 101 </div>
102 <!-- ELIMINAR --> 102 <!-- ELIMINAR -->
103 <div class="col-3 align-self-center"> 103 <div class="col-3 align-self-center">
104 <div class="row mx-0 justify-content-center"> 104 <div class="row mx-0 justify-content-center">
105 <div 105 <div
106 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 106 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
107 (click)="deleteArticulo(i)"> 107 (click)="deleteArticulo(i)">
108 <span> 108 <span>
109 <small class="pr-2">ELIMINAR</small> 109 <small class="pr-2">ELIMINAR</small>
110 <img 110 <img
111 draggable="false" 111 draggable="false"
112 ondragstart="return false;" 112 ondragstart="return false;"
113 (contextmenu)="false" 113 (contextmenu)="false"
114 class="icon-20 rotate-45" 114 class="icon-20 rotate-45"
115 src="assets/img/mas-blanco.svg"> 115 src="assets/img/mas-blanco.svg">
116 </span> 116 </span>
117 </div> 117 </div>
118 </div> 118 </div>
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 <!-- TOTAL -->
125 <div class="row mx-3 mt-2 h-auto justify-content-end">
126 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
127 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
128 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
129 </div>
130 </div>
124 <!-- CONTINUAR --> 131 <!-- CONTINUAR -->
125 <div 132 <div
126 *ngIf="articuloService.carrito.length" 133 *ngIf="articuloService.carrito.length"
127 class="row mx-3 mt-4 h-auto justify-content-end"> 134 class="row mx-3 mt-4 h-auto justify-content-end">
128 <div 135 <div
129 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 136 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
130 [routerLink]="['/forma-pago']"> 137 [routerLink]="['/forma-pago']">
131 <span> 138 <span>
132 <small class="pr-2">CONTINUAR</small> 139 <small class="pr-2">CONTINUAR</small>
133 <img 140 <img
134 draggable="false" 141 draggable="false"
135 ondragstart="return false;" 142 ondragstart="return false;"
136 (contextmenu)="false" 143 (contextmenu)="false"
137 class="icon-20" 144 class="icon-20"
138 src="assets/img/ir.svg"> 145 src="assets/img/ir.svg">
139 </span> 146 </span>
140 </div> 147 </div>
141 </div> 148 </div>
142 <!-- SEGUIR COMPRANDO --> 149 <!-- SEGUIR COMPRANDO -->
143 <div class="row mx-3 mt-2 h-auto justify-content-end"> 150 <!-- <div class="row mx-3 mt-2 h-auto justify-content-end">
144 <div 151 <div
145 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 152 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
146 (click)="goBack()"> 153 (click)="goBack()">
147 <span> 154 <span>
148 <small class="pr-2">SEGUIR COMPRANDO</small> 155 <small class="pr-2">SEGUIR COMPRANDO</small>
149 <img 156 <img
150 draggable="false" 157 draggable="false"
151 ondragstart="return false;" 158 ondragstart="return false;"
152 (contextmenu)="false" 159 (contextmenu)="false"
153 class="icon-20" 160 class="icon-20"
154 src="assets/img/ir.svg"> 161 src="assets/img/ir.svg">
155 </span> 162 </span>
156 </div> 163 </div>
157 </div> 164 </div> -->
158 </div> 165 </div>
159 166
160 </div> 167 </div>
161 168
src/app/modules/carrito/carrito.component.scss
Diff comments   View file @ d379595
1 .bg-total {
2 width: 75px;
3 border-radius: 1.5rem;
4 }
5
src/app/modules/comanda/comanda.component.ts
Diff comments   View file @ d379595
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { IComanda, IComandaDetalle, IComponente } from 'src/app/interfaces/IComanda'; 2 import { IComanda, IComandaDetalle, IComponente } from 'src/app/interfaces/IComanda';
3 import { ComandaService } from 'src/app/services/comanda/comanda.service'; 3 import { ComandaService } from 'src/app/services/comanda/comanda.service';
4 import * as _ from 'lodash'; 4 import * as _ from 'lodash';
5 5
6 @Component({ 6 @Component({
7 selector: 'app-comanda', 7 selector: 'app-comanda',
8 templateUrl: './comanda.component.html', 8 templateUrl: './comanda.component.html',
9 styleUrls: ['./comanda.component.scss'] 9 styleUrls: ['./comanda.component.scss']
10 }) 10 })
11 export class ComandaComponent implements OnInit { 11 export class ComandaComponent implements OnInit {
12 comandas: IComanda[] = []; 12 comandas: IComanda[] = [];
13 cicloTime: any; 13 cicloTime: any;
14 14
15 constructor( 15 constructor(
16 private comandaService: ComandaService, 16 private comandaService: ComandaService,
17 ) { } 17 ) { }
18 18
19 ngOnInit() { 19 ngOnInit() {
20 this.getComandas(); 20 this.getComandas();
21 this.timerGetComandas(); 21 this.timerGetComandas();
22 } 22 }
23 23
24 ngOnDestroy() { 24 ngOnDestroy() {
25 clearInterval(this.cicloTime); 25 clearInterval(this.cicloTime);
26 } 26 }
27 27
28 timerGetComandas() { 28 timerGetComandas() {
29 this.cicloTime = setInterval(() => { 29 this.cicloTime = setInterval(() => {
30 this.getComandas(); 30 this.getComandas();
31 }, 5000); 31 }, 5000);
32 } 32 }
33 33
34 getComandas() { 34 getComandas() {
35 this.comandaService.getAll() 35 this.comandaService.getAll()
36 .subscribe((resComandas: IComanda[]) => { 36 .subscribe((resComandas: IComanda[]) => {
37 this.addNewComandas(resComandas); 37 this.addNewComandas(resComandas);
38 }, e => console.error(e)); 38 }, e => console.error(e));
39 } 39 }
40 40
41 addNewComandas(resComandas: IComanda[]) { 41 addNewComandas(resComandas: IComanda[]) {
42 for (let j = 0; j < resComandas.length; j++) { 42 for (let j = 0; j < resComandas.length; j++) {
43 for (let i = 0; i < this.comandas.length; i++) { 43 for (let i = 0; i < this.comandas.length; i++) {
44 if (this.comandas[i].id === resComandas[j].id) { 44 if (this.comandas[i].id === resComandas[j].id) {
45 resComandas.splice(j, 1); 45 resComandas.splice(j, 1);
46 } 46 }
47 } 47 }
48 } 48 }
49 if (!resComandas.length) return; 49 if (!resComandas.length) return;
50 Array.prototype.push.apply(this.comandas, resComandas); 50 Array.prototype.push.apply(this.comandas, resComandas);
51 this.startTimersPedido(resComandas); 51 this.startTimersPedido(resComandas);
52 } 52 }
53 53
54 updateComanda(comanda: IComanda, estadoNuevo: number, observacionNueva: string) { 54 updateComanda(comanda: IComanda, estadoNuevo: number, observacionNueva: string) {
55 let data = { 55 const data = {
56 idComanda: comanda.id, 56 idComanda: comanda.id,
57 estado: estadoNuevo, 57 estado: estadoNuevo,
58 observacion: observacionNueva, 58 observacion: observacionNueva,
59 tiempoEspera: `${comanda.hoursPedido}:${comanda.secondsPedido}:${comanda.secondsPedido}`, 59 tiempoEspera: `${comanda.hoursPedido}:${comanda.secondsPedido}:${comanda.secondsPedido}`,
60 tiempoElaboracion: `${comanda.hoursElaboracion}:${comanda.secondsElaboracion}:${comanda.secondsElaboracion}`, 60 tiempoElaboracion: `${comanda.hoursElaboracion}:${comanda.secondsElaboracion}:${comanda.secondsElaboracion}`,
61 }; 61 };
62 if (data.estado === 3) { 62 if (data.estado === 3) {
63 this.comandaService.imprimirComandaCocina(parseInt(data.idComanda)) 63 this.comandaService.imprimirComandaCocina(parseInt(data.idComanda))
64 .subscribe(res => { }, err => console.error(err) 64 .subscribe(res => { }, err => console.error(err)
65 ); 65 );
66 } 66 }
67 67
68 if (estadoNuevo !== 2) comanda.detalles.forEach(d => d.seeDetalle = false); 68 if (estadoNuevo !== 2) comanda.detalles.forEach(d => d.seeDetalle = false);
69 69
70 this.comandaService.update(data) 70 this.comandaService.update(data)
71 .subscribe((res: any) => { 71 .subscribe((res: any) => {
72 if (res.data) { 72 if (res.data) {
73 comanda.estado = estadoNuevo; 73 comanda.estado = estadoNuevo;
74 comanda.observacion = observacionNueva; 74 comanda.observacion = observacionNueva;
75 if (estadoNuevo === 2) { 75 if (estadoNuevo === 2) {
76 this.startTimerElaboracion(comanda); 76 this.startTimerElaboracion(comanda);
77 } else if (comanda.timerElaboracion) { 77 } else if (comanda.timerElaboracion) {
78 clearInterval(comanda.timerElaboracion); 78 clearInterval(comanda.timerElaboracion);
79 } 79 }
80 } 80 }
81 }, e => console.error(e)); 81 }, e => console.error(e));
82 } 82 }
83 83
84 rellenar(relleno, longitud) { 84 rellenar(relleno, longitud) {
85 relleno = '' + relleno; 85 relleno = '' + relleno;
86 while (relleno.length < longitud) { 86 while (relleno.length < longitud) {
87 relleno = '0' + relleno; 87 relleno = '0' + relleno;
88 } 88 }
89 return relleno; 89 return relleno;
90 } 90 }
91 91
92 toggleVerComponentes(detalle: IComandaDetalle, comanda: IComanda) { 92 toggleVerComponentes(detalle: IComandaDetalle, comanda: IComanda) {
93 detalle.seeDetalle = !detalle.seeDetalle; 93 detalle.seeDetalle = !detalle.seeDetalle;
94 } 94 }
95 95
96 hasTipo(componentes: IComponente[]) { 96 hasTipo(componentes: IComponente[]) {
97 return componentes.some(c => c.tipoArticulo === 6); 97 return componentes.some(c => c.tipoArticulo === 6);
98 } 98 }
99 99
100 //#region TIMERS 100 //#region TIMERS
101 startTimersPedido(comandas) { 101 startTimersPedido(comandas) {
102 comandas.forEach((comanda: IComanda) => { 102 comandas.forEach((comanda: IComanda) => {
103 this.comandaService.startTimerComanda(comanda, 'Pedido'); 103 this.comandaService.startTimerComanda(comanda, 'Pedido');
104 if (comanda.estado === 2) { 104 if (comanda.estado === 2) {
105 this.startTimerElaboracion(comanda); 105 this.startTimerElaboracion(comanda);
106 } 106 }
107 }); 107 });
108 } 108 }
109 109
110 startTimerElaboracion(comanda: IComanda) { 110 startTimerElaboracion(comanda: IComanda) {
111 this.comandaService.startTimerComanda(comanda, 'Elaboracion'); 111 this.comandaService.startTimerComanda(comanda, 'Elaboracion');
112 } 112 }
113 //#endregion 113 //#endregion
114 114
115 } 115 }
116 116
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ d379595
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="row mx-0 h-80 align-items-end"> 5 <div class="row mx-0 h-80 align-items-end">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 <!-- CUERPO --> 14 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-70"> 15 <div class="row w-100 mr-4 h-70">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22 <div class="col-auto btn-effect h-5"> 22 <div class="col-auto btn-effect h-5">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -100)" 29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
37 <div 37 <div
38 class="row mx-4 mb-2 h-32 justify-content-center tab" 38 class="row mx-4 mb-2 h-32 justify-content-center tab"
39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }" 39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
40 (click)="selectCategoria(-1, 0)"> 40 (click)="selectCategoria(-1, 0)">
41 <img 41 <img
42 draggable="false" 42 draggable="false"
43 ondragstart="return false;" 43 ondragstart="return false;"
44 (contextmenu)="false" 44 (contextmenu)="false"
45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
46 src="assets/img/ir-color.svg"> 46 src="assets/img/ir-color.svg">
47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small> 47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
48 </div> 48 </div>
49 <div 49 <div
50 class="row mx-4 mb-2 h-32 justify-content-center tab" 50 class="row mx-4 mb-2 h-32 justify-content-center tab"
51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
52 (click)="selectCategoria(i, categoria.id)" 52 (click)="selectCategoria(i, categoria.id)"
53 *ngFor="let categoria of categorias; let i = index;"> 53 *ngFor="let categoria of categorias; let i = index;">
54 <img 54 <img
55 draggable="false" 55 draggable="false"
56 ondragstart="return false;" 56 ondragstart="return false;"
57 (contextmenu)="false" 57 (contextmenu)="false"
58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
59 src="assets/img/ir-color.svg"> 59 src="assets/img/ir-color.svg">
60 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 60 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
61 </div> 61 </div>
62 </div> 62 </div>
63 <div class="col-auto btn-effect h-5"> 63 <div class="col-auto btn-effect h-5">
64 <img 64 <img
65 draggable="false" 65 draggable="false"
66 ondragstart="return false;" 66 ondragstart="return false;"
67 (contextmenu)="false" 67 (contextmenu)="false"
68 class="h-100 d-block mx-auto rotate-90" 68 class="h-100 d-block mx-auto rotate-90"
69 src="assets/img/ir-color.svg" 69 src="assets/img/ir-color.svg"
70 (mousedown)="scrollY(templateCategorias, 100)" 70 (mousedown)="scrollY(templateCategorias, 100)"
71 (mouseup)="mouseup()" 71 (mouseup)="mouseup()"
72 (mouseleave)="mouseup()"> 72 (mouseleave)="mouseup()">
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 <!-- LISTA DE ARTICULOS --> 76 <!-- LISTA DE ARTICULOS -->
77 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible"> 77 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
78 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 78 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
79 <!-- ARTICULO --> 79 <!-- ARTICULO -->
80 <div 80 <div
81 class="col px-2 my-1 my-md-3 h-auto" 81 class="col px-2 my-1 my-md-3 h-auto"
82 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 82 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
83 <div class="swing-in-top-fwd card h-auto"> 83 <div class="swing-in-top-fwd card h-auto">
84 <img 84 <img
85 draggable="false" 85 draggable="false"
86 ondragstart="return false;" 86 ondragstart="return false;"
87 (contextmenu)="false" 87 (contextmenu)="false"
88 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 88 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
89 onerror="this.src='assets/img/image-not-found.jpg'" 89 onerror="this.src='assets/img/image-not-found.jpg'"
90 class="card-img-top h-55 rounded-sm"> 90 class="card-img-top h-55 rounded-sm">
91 <div class="row mx-0 py-1 h-auto justify-content-center"> 91 <div class="row mx-0 py-1 h-auto justify-content-center">
92 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p> 92 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p>
93 <p class="col-12 px-1 h-auto text-center line-height-sm"> 93 <p class="col-12 px-1 h-auto text-center line-height-sm">
94 <small>{{articulo.DET_LAR}}</small> 94 <small>{{articulo.DET_LAR}}</small>
95 </p> 95 </p>
96 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 96 <div class="col-12 px-1 align-self-end btn-effect h-auto">
97 <div 97 <div
98 [ngClass]="{'bg-secondary': articulo.promo}" 98 [ngClass]="{'bg-secondary': articulo.promo}"
99 class="row mx-0 justify-content-between bg-primary badge-pill" 99 class="row mx-0 justify-content-between bg-primary badge-pill"
100 (click)="elegirArticulo(articulo)"> 100 (click)="elegirArticulo(articulo)">
101 <div class="col px-0 align-self-center text-white text-right"> 101 <div class="col px-0 align-self-center text-white text-right">
102 {{articulo.PreVen | currency}} 102 {{articulo.PreVen | currency}}
103 </div> 103 </div>
104 <div class="col-5 px-0"> 104 <div class="col-5 px-0">
105 <img 105 <img
106 draggable="false" 106 draggable="false"
107 ondragstart="return false;" 107 ondragstart="return false;"
108 (contextmenu)="false" 108 (contextmenu)="false"
109 class="d-block ml-auto py-1 icon-30" 109 class="d-block ml-auto py-1 icon-30"
110 src="assets/img/ir.svg"> 110 src="assets/img/ir.svg">
111 </div> 111 </div>
112 </div> 112 </div>
113 </div> 113 </div>
114 </div> 114 </div>
115 </div> 115 </div>
116 </div> 116 </div>
117 </div> 117 </div>
118 <!-- BOTON VER MAS --> 118 <!-- BOTON VER MAS -->
119 <div class="row mx-0"> 119 <div class="row mx-0">
120 <div 120 <div
121 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 121 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
122 class="col-12 px-0 mb-2"> 122 class="col-12 px-0 mb-2">
123 <button 123 <button
124 (click)="increaseShow()" 124 (click)="increaseShow()"
125 class="btn btn-block btn-outline-primary"> 125 class="btn btn-block btn-outline-primary">
126 Ver Más 126 Ver Más
127 </button> 127 </button>
128 </div> 128 </div>
129 </div> 129 </div>
130 </div> 130 </div>
131 </div> 131 </div>
132 </div> 132 </div>
133 </div> 133 </div>
134 <!-- FOOTER CARRITO DE COMPRAS --> 134 <!-- FOOTER CARRITO DE COMPRAS -->
135 <div class="row w-90 mx-auto h-auto justify-content-center"> 135 <div class="row w-90 mx-auto h-auto justify-content-center">
136 <div class="col-12 h-75 px-0 border border-primary rounded"> 136 <div class="col-12 h-75 px-0 border border-primary rounded">
137 <!-- CABECERA --> 137 <!-- CABECERA -->
138 <div class="row mx-0 h-15 border-bottom border-primary"> 138 <div class="row mx-0 h-15 border-bottom border-primary">
139 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 139 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
140 </div> 140 </div>
141 <!-- CUERPO --> 141 <!-- CUERPO -->
142 <div class="row h-85 mx-0 justify-content-around"> 142 <div class="row h-85 mx-0 justify-content-around">
143 <!-- BOTON SCROLL IZQUIERDA --> 143 <!-- BOTON SCROLL IZQUIERDA -->
144 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 144 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
145 <img 145 <img
146 draggable="false" 146 draggable="false"
147 ondragstart="return false;" 147 ondragstart="return false;"
148 (contextmenu)="false" 148 (contextmenu)="false"
149 class="icon-30 rotate-180-neg" 149 class="icon-30 rotate-180-neg"
150 src="assets/img/ir-fondo-color.svg" 150 src="assets/img/ir-fondo-color.svg"
151 (mousedown)="scrollX(templateCarrito, -100)" 151 (mousedown)="scrollX(templateCarrito, -100)"
152 (mouseup)="mouseup()" 152 (mouseup)="mouseup()"
153 (mouseleave)="mouseup()"> 153 (mouseleave)="mouseup()">
154 </div> 154 </div>
155 <!-- CARRITO --> 155 <!-- CARRITO -->
156 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 156 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
157 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"> 157 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
158 <!-- MENSAJE DE ADVERTENCIA --> 158 <!-- MENSAJE DE ADVERTENCIA -->
159 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 159 <div *ngIf="!articuloService.carrito.length" class="col h-100">
160 <p class="text-center py-5">No hay articulos en el carrito</p> 160 <p class="text-center py-5">No hay articulos en el carrito</p>
161 </div> 161 </div>
162 <!-- ARTICULOS --> 162 <!-- ARTICULOS -->
163 <div 163 <div
164 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 164 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
165 *ngFor="let articulo of articuloService.carrito; let i = index;"> 165 *ngFor="let articulo of articuloService.carrito; let i = index;">
166 <div class="swing-in-top-fwd"> 166 <div class="swing-in-top-fwd">
167 <img 167 <img
168 draggable="false" 168 draggable="false"
169 ondragstart="return false;" 169 ondragstart="return false;"
170 (contextmenu)="false" 170 (contextmenu)="false"
171 class="d-block img-fluid p-2 mx-auto rounded" 171 class="d-block img-fluid p-2 mx-auto rounded"
172 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 172 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
173 onerror="this.src='assets/img/image-not-found.jpg'"> 173 onerror="this.src='assets/img/image-not-found.jpg'">
174 <p class="d-block mt-auto text-center text-primary text-truncate"> 174 <p class="d-block mt-auto text-center text-primary text-truncate">
175 <small>{{articulo.DetArt}}</small> 175 <small>{{articulo.DetArt}}</small>
176 </p> 176 </p>
177 </div> 177 </div>
178 </div> 178 </div>
179 </div> 179 </div>
180 </div> 180 </div>
181 <!-- BOTON SCROLL DERECHA --> 181 <!-- BOTON SCROLL DERECHA -->
182 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 182 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
183 <img 183 <img
184 draggable="false" 184 draggable="false"
185 ondragstart="return false;" 185 ondragstart="return false;"
186 (contextmenu)="false" 186 (contextmenu)="false"
187 class="icon-30" 187 class="icon-30"
188 src="assets/img/ir-fondo-color.svg" 188 src="assets/img/ir-fondo-color.svg"
189 (mousedown)="scrollX(templateCarrito, 100)" 189 (mousedown)="scrollX(templateCarrito, 100)"
190 (mouseup)="mouseup()" 190 (mouseup)="mouseup()"
191 (mouseleave)="mouseup()"> 191 (mouseleave)="mouseup()">
192 </div> 192 </div>
193 </div> 193 </div>
194 </div> 194 </div>
195 <!-- VER CARRITO Y TOTAL--> 195 <!-- VER CARRITO Y TOTAL-->
196 <div 196 <div
197 class="col-auto p-0 mt-2 ml-auto h-20" 197 class="col-auto p-0 mt-2 ml-auto h-20"
198 *ngIf="articuloService.carrito.length"> 198 *ngIf="articuloService.carrito.length">
199 <div 199 <div
200 class="btn-effect col-auto align-self-center px-0 bg-white" 200 class="btn-effect col-auto align-self-center px-0 bg-white"
201 [routerLink]="['/carrito']"> 201 [routerLink]="['/carrito']">
202 <div class="row justify-content-between mx-0"> 202 <div class="row justify-content-between mx-0">
203 <div class="col-auto align-self-center text-primary">TOTAL</div> 203 <div class="col-auto align-self-center text-primary">TOTAL</div>
204 <div class="col-auto p-0 bg-primary d-none d-sm-block total-background"> 204 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
205 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 205 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
206 </div> 206 </div>
207 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div> 207 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
208 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 208 <div class="col-auto p-0 bg-primary d-none d-sm-block">
209 <img 209 <img
210 draggable="false" 210 draggable="false"
211 ondragstart="return false;" 211 ondragstart="return false;"
212 (contextmenu)="false" 212 (contextmenu)="false"
213 class="p-2 icon-40" 213 class="p-2 icon-40"
214 src="assets/img/carrito.svg"> 214 src="assets/img/carrito.svg">
215 </div> 215 </div>
216 </div> 216 </div>
217 </div> 217 </div>
218 </div> 218 </div>
219 219
220 </div> 220 </div>
221 </div> 221 </div>
222 222
223 </div> 223 </div>
224 224
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ d379595
1 $primary: #aa006b; 1 $primary: #aa006b;
2 2
3 .box-categorias { 3 .box-categorias {
4 height: calc(100% - 100px) !important; 4 height: calc(100% - 100px) !important;
5 } 5 }
6 6
7 .active { 7 .active {
8 background-color: white; 8 background-color: white;
9 border-bottom: 3px solid $primary !important; 9 border-bottom: 3px solid $primary !important;
10 } 10 }
11 11
12 .border-bottom-effect { 12 .border-bottom-effect {
13 border: none; 13 border: none;
14 position: relative; 14 position: relative;
15 &:hover { 15 &:hover {
16 border: none; 16 border: none;
17 } 17 }
18 &::after { 18 &::after {
19 content: ""; 19 content: "";
20 position: absolute; 20 position: absolute;
21 width: 0px; 21 width: 0px;
22 height: 3px; 22 height: 3px;
23 left: 50%; 23 left: 50%;
24 bottom: 0; 24 bottom: 0;
25 background-color: $primary; 25 background-color: $primary;
26 transition: all ease-in-out 0.2s; 26 transition: all ease-in-out 0.2s;
27 } 27 }
28 &:hover::after { 28 &:hover::after {
29 width: 100%; 29 width: 100%;
30 left: 0; 30 left: 0;
31 } 31 }
32 } 32 }
33 33
34 .card { 34 .card {
35 border: none; 35 border: none;
36 } 36 }
37 37
38 .line-height-sm { 38 .line-height-sm {
39 line-height: 1.2; 39 line-height: 1.2;
40 } 40 }
41 41
42 .total-background { 42 .bg-total {
43 width: 110px; 43 width: 110px;
44 border-radius: 1.5rem; 44 border-radius: 1.5rem;
45 } 45 }
46 46
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ d379595
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http'; 2 import { HttpClient } from '@angular/common/http';
3 import { APP_SETTINGS } from '../../../etc/AppSettings'; 3 import { APP_SETTINGS } from '../../../etc/AppSettings';
4 import { IArticulo } from '../../interfaces/IArticulo'; 4 import { IArticulo } from '../../interfaces/IArticulo';
5 import { ClienteService } from '../cliente/cliente.service'; 5 import { ClienteService } from '../cliente/cliente.service';
6 import { Observable } from 'rxjs'; 6 import { Observable } from 'rxjs';
7 7
8 @Injectable() 8 @Injectable()
9 export class ArticuloService { 9 export class ArticuloService {
10 carrito: IArticulo[] = []; 10 carrito: IArticulo[] = [];
11 articuloAcargar: IArticulo; 11 articuloAcargar: IArticulo;
12 promoAcargar: IArticulo; 12 promoAcargar: IArticulo;
13 mostrar: string; 13 mostrar: string;
14 esPromoPersonalizada = false; 14 esPromoPersonalizada = false;
15 urlDeboSuite = APP_SETTINGS.apiDeboSuite; 15 urlDeboSuite = APP_SETTINGS.apiDeboSuite;
16 medioPago: number; 16 medioPago: number;
17 idComanda: number; 17 idComanda: number;
18 subTotal: number = 0; 18 subTotal: number = 0;
19 19
20 constructor( 20 constructor(
21 private http: HttpClient, 21 private http: HttpClient,
22 private clienteService: ClienteService, 22 private clienteService: ClienteService,
23 ) { } 23 ) { }
24 24
25 getById(id) { 25 getById(id) {
26 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`); 26 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
27 } 27 }
28 28
29 getAll() { 29 getAll() {
30 return this.http.get(`${this.urlDeboSuite}/articulos/`); 30 return this.http.get(`${this.urlDeboSuite}/articulos/`);
31 } 31 }
32 32
33 getAllWithPaginator(page: number = 1) { 33 getAllWithPaginator(page: number = 1) {
34 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`); 34 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
35 } 35 }
36 36
37 calcularTotal() { 37 calcularTotal() {
38 this.subTotal=0 38 this.subTotal = 0;
39 this.carrito.forEach(articulo => { 39 this.carrito.forEach(articulo => {
40 this.subTotal += (articulo.PreVen * articulo.cantidad); 40 this.subTotal += (articulo.PreVen * articulo.cantidad);
41 }); 41 });
42 } 42 }
43 43
44 setArticulo(articulo: IArticulo) { 44 setArticulo(articulo: IArticulo) {
45 for (const articuloCarrito of this.carrito) { 45 for (const articuloCarrito of this.carrito) {
46 if (articuloCarrito.id === articulo.id) { 46 if (articuloCarrito.id === articulo.id) {
47 if (articulo.PRO) break; 47 if (articulo.PRO) break;
48 articuloCarrito.cantidad++; 48 articuloCarrito.cantidad++;
49 return; 49 return;
50 } 50 }
51 } 51 }
52 this.setArticulosSinImagen([articulo]); 52 this.setArticulosSinImagen([articulo]);
53 this.carrito.unshift(articulo); 53 this.carrito.unshift(articulo);
54 this.calcularTotal(); 54 this.calcularTotal();
55 } 55 }
56 56
57 pay(dataPago: any) { 57 pay(dataPago: any) {
58 return new Observable((observer) => { 58 return new Observable((observer) => {
59 this.clienteService.getById(-1) 59 this.clienteService.getById(-1)
60 .subscribe(cliente => { 60 .subscribe(cliente => {
61 this.markArticuloInPromoAsRemoved(); 61 this.markArticuloInPromoAsRemoved();
62 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, { 62 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
63 productos: this.carrito, 63 productos: this.carrito,
64 cliente, 64 cliente,
65 origen: 'autoservicio', 65 origen: 'autoservicio',
66 codigoVendedor: 5, 66 codigoVendedor: 5,
67 puntoVenta: APP_SETTINGS.puntoVenta, 67 puntoVenta: APP_SETTINGS.puntoVenta,
68 pedidoAnombreDe: dataPago.pedidoAnombreDe, 68 pedidoAnombreDe: dataPago.pedidoAnombreDe,
69 numeroPlanilla: APP_SETTINGS.numeroPlanilla, 69 numeroPlanilla: APP_SETTINGS.numeroPlanilla,
70 }) 70 })
71 .subscribe((data) => { 71 .subscribe((data) => {
72 observer.next(data); 72 observer.next(data);
73 observer.complete(); 73 observer.complete();
74 }); 74 });
75 }); 75 });
76 }); 76 });
77 } 77 }
78 78
79 cleanShoppingCar() { 79 cleanShoppingCar() {
80 this.articuloAcargar = undefined; 80 this.articuloAcargar = undefined;
81 this.promoAcargar = undefined; 81 this.promoAcargar = undefined;
82 this.carrito = []; 82 this.carrito = [];
83 } 83 }
84 84
85 setArticulosSinImagen(articulos: IArticulo[]) { 85 setArticulosSinImagen(articulos: IArticulo[]) {
86 articulos.forEach((articulo: IArticulo) => { 86 articulos.forEach((articulo: IArticulo) => {
87 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : 87 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
88 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; 88 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
89 }); 89 });
90 } 90 }
91 91
92 markArticuloInPromoAsRemoved() { 92 markArticuloInPromoAsRemoved() {
93 this.carrito.forEach((articuloCarrito: IArticulo) => { 93 this.carrito.forEach((articuloCarrito: IArticulo) => {
94 if (articuloCarrito.PRO) { 94 if (articuloCarrito.PRO) {
95 articuloCarrito.productos.forEach((articulo: IArticulo) => { 95 articuloCarrito.productos.forEach((articulo: IArticulo) => {
96 if (articulo.cantidadAdicionada === 0) { 96 if (articulo.cantidadAdicionada === 0) {
97 articulo.cantidad = 0; 97 articulo.cantidad = 0;
98 articulo.importeValorExtra = 0; 98 articulo.importeValorExtra = 0;
99 } 99 }
100 }); 100 });
101 } 101 }
102 }); 102 });
103 } 103 }
104 } 104 }
105 105
src/assets/img/icono-cancelar-color.svg
Diff comments   View file @ d379595
File was created 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <!-- Creator: CorelDRAW X7 -->
4 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="19.8306mm" height="19.8306mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
5 viewBox="0 0 1652 1652"
6 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <defs>
8 <style type="text/css">
9 <![CDATA[
10 .fil0 {fill:#AA006B;fill-rule:nonzero}
11 ]]>
12 </style>
13 </defs>
14 <g id="Capa_x0020_1">
15 <metadata id="CorelCorpID_0Corel-Layer"/>
16 <polygon class="fil0" points="494,409 826,766 1158,409 1214,457 882,826 1214,1196 1158,1244 826,886 494,1244 439,1196 770,826 439,457 "/>
17 <path class="fil0" d="M1360 292c-136,-137 -325,-221 -534,-221 -208,0 -397,84 -534,221 -137,137 -221,326 -221,534 0,209 84,398 221,534 137,137 326,222 534,222 209,0 398,-85 534,-222 137,-136 222,-325 222,-534 0,-208 -85,-397 -222,-534zm-534 -292c228,0 435,92 584,242 150,149 242,356 242,584 0,228 -92,435 -242,584 -149,150 -356,242 -584,242 -228,0 -435,-92 -584,-242 -150,-149 -242,-356 -242,-584 0,-228 92,-435 242,-584 149,-150 356,-242 584,-242z"/>
18 </g>
19 </svg>
20