Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit f89651860a2e46d408cbcd437f29b1dcefa30542

Authored by Benjamin Rodriguez
1 parent 26bf5d0993
Exists in develop

envio pedidoPara en forma de booleano e guardar comprobantes

Showing 7 changed files with 17 additions and 20 deletions   Show diff stats
src/app/modules/opcion-pedido/opcion-pedido.component.html
Diff comments   View file @ f896518
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-85"> 12 <div class="h-85">
13 <div class="row mt-5 mx-3 h-auto"> 13 <div class="row mt-5 mx-3 h-auto">
14 <div class="col-12 px-0 py-2 align-self-center"> 14 <div class="col-12 px-0 py-2 align-self-center">
15 <p class="h6 text-truncate text-center">TU PEDIDO ES PARA</p> 15 <p class="h6 text-truncate text-center">TU PEDIDO ES PARA</p>
16 </div> 16 </div>
17 </div> 17 </div>
18 <div class="row mt-5 h-auto justify-content-center mx-0"> 18 <div class="row mt-5 h-auto justify-content-center mx-0">
19 <div class="col-auto px-0 h-auto align-self-start"> 19 <div class="col-auto px-0 h-auto align-self-start">
20 <div 20 <div
21 class="btn-effect col-auto align-self-center px-0 bg-white" 21 class="btn-effect col-auto align-self-center px-0 bg-white"
22 (click)="goTo('/seleccion-articulos'); seleccionPedido('comer aca')"> 22 (click)="goTo('/seleccion-articulos'); seleccionPedido('false')">
23 <div class="row mx-0 bg-primary badge-pill"> 23 <div class="row mx-0 bg-primary badge-pill">
24 <div class="col-auto p-0"> 24 <div class="col-auto p-0">
25 <img 25 <img
26 draggable="false" 26 draggable="false"
27 ondragstart="return false;" 27 ondragstart="return false;"
28 (contextmenu)="false" 28 (contextmenu)="false"
29 class="p-1 icon-50" 29 class="p-1 icon-50"
30 src="assets/img/icono-plato.svg"> 30 src="assets/img/icono-plato.svg">
31 </div> 31 </div>
32 <div class="col-auto align-self-center text-white">comer acá</div> 32 <div class="col-auto align-self-center text-white">comer acá</div>
33 <div class="col-auto align-self-center p-0"> 33 <div class="col-auto align-self-center p-0">
34 <img 34 <img
35 draggable="false" 35 draggable="false"
36 ondragstart="return false;" 36 ondragstart="return false;"
37 (contextmenu)="false" 37 (contextmenu)="false"
38 class="p-1 icon-30" 38 class="p-1 icon-30"
39 src="assets/img/ir.svg"> 39 src="assets/img/ir.svg">
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 <div class="row mt-4 h-auto justify-content-center mx-0"> 45 <div class="row mt-4 h-auto justify-content-center mx-0">
46 <div class="col-auto px-0 h-auto align-self-start"> 46 <div class="col-auto px-0 h-auto align-self-start">
47 <div 47 <div
48 class="btn-effect col-auto align-self-center px-0 bg-white" 48 class="btn-effect col-auto align-self-center px-0 bg-white"
49 (click)="goTo('/seleccion-articulos'); seleccionPedido('para llevar')"> 49 (click)="goTo('/seleccion-articulos'); seleccionPedido('true')">
50 <div class="row mx-0 bg-primary badge-pill"> 50 <div class="row mx-0 bg-primary badge-pill">
51 <div class="col-auto p-0"> 51 <div class="col-auto p-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="p-1 icon-50" 56 class="p-1 icon-50"
57 src="assets/img/icono-take-away.svg"> 57 src="assets/img/icono-take-away.svg">
58 </div> 58 </div>
59 <div class="col-auto align-self-center text-white">para llevar</div> 59 <div class="col-auto align-self-center text-white">para llevar</div>
60 <div class="col-auto align-self-center p-0"> 60 <div class="col-auto align-self-center p-0">
61 <img 61 <img
62 draggable="false" 62 draggable="false"
63 ondragstart="return false;" 63 ondragstart="return false;"
64 (contextmenu)="false" 64 (contextmenu)="false"
65 class="p-1 icon-30" 65 class="p-1 icon-30"
66 src="assets/img/ir.svg"> 66 src="assets/img/ir.svg">
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 </div> 71 </div>
72 </div> 72 </div>
73 </div> 73 </div>
74 74
src/app/modules/opcion-pedido/opcion-pedido.component.ts
Diff comments   View file @ f896518
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Router } from '@angular/router'; 2 import { Router } from '@angular/router';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-opcion-pedido', 5 selector: 'app-opcion-pedido',
6 templateUrl: './opcion-pedido.component.html', 6 templateUrl: './opcion-pedido.component.html',
7 styleUrls: ['./opcion-pedido.component.scss'] 7 styleUrls: ['./opcion-pedido.component.scss']
8 }) 8 })
9 export class OpcionPedidoComponent implements OnInit { 9 export class OpcionPedidoComponent implements OnInit {
10 10
11 constructor( 11 constructor(
12 private router: Router, 12 private router: Router,
13 ) { } 13 ) { }
14 14
15 ngOnInit() { 15 ngOnInit() {
16 } 16 }
17 17
18 goTo(path) { 18 goTo(path) {
19 this.router.navigate([path]); 19 this.router.navigate([path]);
20 } 20 }
21 21
22 seleccionPedido(lugar) { 22 seleccionPedido(lugar) {
23 localStorage.setItem('pedidoPara', lugar); 23 lugar === 'true' ? lugar = true : false;
24 localStorage.setItem('pedidoParaLlevar', lugar);
24 } 25 }
25 } 26 }
26 27
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ f896518
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-50 h-md-70"> 15 <div class="row w-100 mr-4 h-50 h-md-70">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-2">
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 pt-1"
37 (scroll)="scrollEvent($event)"> 37 (scroll)="scrollEvent($event)">
38 <div 38 <div
39 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab" 39 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab"
40 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }" 40 [ngClass]="{ 'active rounded-sm shadow': allActive, 'border-bottom-effect': !allActive }"
41 (click)="selectCategoria(-1, 0)"> 41 (click)="selectCategoria(-1, 0)">
42 <img 42 <img
43 draggable="false" 43 draggable="false"
44 ondragstart="return false;" 44 ondragstart="return false;"
45 (contextmenu)="false" 45 (contextmenu)="false"
46 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 46 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
47 src="assets/img/logo-spot.svg"> 47 src="assets/img/logo-spot.svg">
48 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small> 48 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
49 </div> 49 </div>
50 <div 50 <div
51 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab" 51 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab"
52 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 52 [ngClass]="{ 'active rounded-sm shadow': categoria.selected, 'border-bottom-effect': !categoria.selected }"
53 (click)="selectCategoria(i, categoria.id)" 53 (click)="selectCategoria(i, categoria.id)"
54 *ngFor="let categoria of categorias; let i = index;"> 54 *ngFor="let categoria of categorias; let i = index;">
55 <img 55 <img
56 draggable="false" 56 draggable="false"
57 ondragstart="return false;" 57 ondragstart="return false;"
58 (contextmenu)="false" 58 (contextmenu)="false"
59 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 59 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
60 src="{{urlImagenes}}{{categoria.path_imagen}}" 60 src="{{urlImagenes}}{{categoria.path_imagen}}"
61 onerror="this.src='assets/img/image-not-found.jpg'"> 61 onerror="this.src='assets/img/image-not-found.jpg'">
62 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 62 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
63 </div> 63 </div>
64 </div> 64 </div>
65 <div class="col-auto btn-effect h-5"> 65 <div class="col-auto btn-effect h-5">
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="h-100 d-block mx-auto rotate-90" 70 class="h-100 d-block mx-auto rotate-90"
71 src="assets/img/ir-color.svg" 71 src="assets/img/ir-color.svg"
72 (mousedown)="scrollY(templateCategorias, 100)" 72 (mousedown)="scrollY(templateCategorias, 100)"
73 (mouseup)="mouseup()" 73 (mouseup)="mouseup()"
74 (mouseleave)="mouseup()"> 74 (mouseleave)="mouseup()">
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 <!-- LISTA DE ARTICULOS --> 78 <!-- LISTA DE ARTICULOS -->
79 <div 79 <div
80 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 80 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
81 (scroll)="scrollEvent($event)"> 81 (scroll)="scrollEvent($event)">
82 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 82 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
83 <!-- ARTICULO --> 83 <!-- ARTICULO -->
84 <div 84 <div
85 class="col px-2 my-1 my-md-3 h-auto" 85 class="col px-2 my-1 my-md-3 h-auto"
86 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 86 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
87 <div 87 <div
88 class="swing-in-top-fwd btn-effect card h-auto" 88 class="swing-in-top-fwd btn-effect card h-auto"
89 (click)="elegirArticulo(articulo)"> 89 (click)="elegirArticulo(articulo)">
90 <img 90 <img
91 draggable="false" 91 draggable="false"
92 ondragstart="return false;" 92 ondragstart="return false;"
93 (contextmenu)="false" 93 (contextmenu)="false"
94 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 94 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
95 onerror="this.src='assets/img/image-not-found.jpg'" 95 onerror="this.src='assets/img/image-not-found.jpg'"
96 class="card-img-top h-30 h-md-55 rounded-sm"> 96 class="card-img-top h-30 h-md-55 rounded-sm">
97 <div class="row mx-0 py-1 h-auto justify-content-center"> 97 <div class="row mx-0 py-1 h-auto justify-content-center">
98 <p 98 <p
99 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 99 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
100 class="col-12 px-1 h6 h-auto text-center min-h-60"> 100 class="col-12 px-1 h6 h-auto text-center min-h-60">
101 {{articulo.DetArt}} 101 {{articulo.DetArt.toUpperCase()}}
102 </p>
103 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
104 <small>{{articulo.DET_LAR}}</small>
105 </p> 102 </p>
106 <div class="col-12 px-1 align-self-end h-auto"> 103 <div class="col-12 px-1 align-self-end h-auto">
107 <div 104 <div
108 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 105 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
109 class="row mx-0 justify-content-between badge-pill"> 106 class="row mx-0 justify-content-between badge-pill">
110 <div class="col px-0 align-self-center text-white text-right"> 107 <div class="col px-0 align-self-center text-white text-right">
111 {{articulo.PreVen | currency}} 108 {{articulo.PreVen | currency}}
112 </div> 109 </div>
113 <div class="col-5 px-0"> 110 <div class="col-5 px-0">
114 <img 111 <img
115 draggable="false" 112 draggable="false"
116 ondragstart="return false;" 113 ondragstart="return false;"
117 (contextmenu)="false" 114 (contextmenu)="false"
118 class="d-block ml-auto py-1 icon-30" 115 class="d-block ml-auto py-1 icon-30"
119 src="assets/img/ir.svg"> 116 src="assets/img/ir.svg">
120 </div> 117 </div>
121 </div> 118 </div>
122 </div> 119 </div>
123 </div> 120 </div>
124 </div> 121 </div>
125 </div> 122 </div>
126 </div> 123 </div>
127 <!-- BOTON VER MAS --> 124 <!-- BOTON VER MAS -->
128 <div class="row mx-0"> 125 <div class="row mx-0">
129 <div 126 <div
130 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 127 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
131 class="col-12 px-0 mb-2"> 128 class="col-12 px-0 mb-2">
132 <button 129 <button
133 (click)="increaseShow()" 130 (click)="increaseShow()"
134 class="btn btn-block btn-outline-primary"> 131 class="btn btn-block btn-outline-primary">
135 Ver Más 132 Ver Más
136 </button> 133 </button>
137 </div> 134 </div>
138 </div> 135 </div>
139 </div> 136 </div>
140 </div> 137 </div>
141 </div> 138 </div>
142 </div> 139 </div>
143 <!-- FOOTER CARRITO DE COMPRAS --> 140 <!-- FOOTER CARRITO DE COMPRAS -->
144 <div class="row w-90 mx-auto h-auto justify-content-center"> 141 <div class="row w-90 mx-auto h-auto justify-content-center">
145 <div class="col-12 h-75 px-0 border border-primary rounded"> 142 <div class="col-12 h-75 px-0 border border-primary rounded">
146 <!-- CABECERA --> 143 <!-- CABECERA -->
147 <div class="row mx-0 h-15 border-bottom border-primary"> 144 <div class="row mx-0 h-15 border-bottom border-primary">
148 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 145 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
149 </div> 146 </div>
150 <!-- CUERPO --> 147 <!-- CUERPO -->
151 <div class="row h-85 mx-0 justify-content-around"> 148 <div class="row h-85 mx-0 justify-content-around">
152 <!-- BOTON SCROLL IZQUIERDA --> 149 <!-- BOTON SCROLL IZQUIERDA -->
153 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 150 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
154 <img 151 <img
155 draggable="false" 152 draggable="false"
156 ondragstart="return false;" 153 ondragstart="return false;"
157 (contextmenu)="false" 154 (contextmenu)="false"
158 class="icon-30 rotate-180-neg" 155 class="icon-30 rotate-180-neg"
159 src="assets/img/ir-fondo-color.svg" 156 src="assets/img/ir-fondo-color.svg"
160 (mousedown)="scrollX(templateCarrito, -100)" 157 (mousedown)="scrollX(templateCarrito, -100)"
161 (mouseup)="mouseup()" 158 (mouseup)="mouseup()"
162 (mouseleave)="mouseup()"> 159 (mouseleave)="mouseup()">
163 </div> 160 </div>
164 <!-- CARRITO --> 161 <!-- CARRITO -->
165 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 162 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
166 <div 163 <div
167 #templateCarrito 164 #templateCarrito
168 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 165 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
169 (scroll)="scrollEvent($event)"> 166 (scroll)="scrollEvent($event)">
170 <!-- MENSAJE DE ADVERTENCIA --> 167 <!-- MENSAJE DE ADVERTENCIA -->
171 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 168 <div *ngIf="!articuloService.carrito.length" class="col h-100">
172 <p class="text-center py-5">No hay articulos en el carrito</p> 169 <p class="text-center py-5">No hay articulos en el carrito</p>
173 </div> 170 </div>
174 <!-- ARTICULOS --> 171 <!-- ARTICULOS -->
175 <div 172 <div
176 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 173 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
177 *ngFor="let articulo of articuloService.carrito; let i = index;"> 174 *ngFor="let articulo of articuloService.carrito; let i = index;">
178 <div class="swing-in-top-fwd"> 175 <div class="swing-in-top-fwd">
179 <img 176 <img
180 class="btn-effect icon-20 position-absolute right-0" 177 class="btn-effect icon-20 position-absolute right-0"
181 src="assets/img/icono-cancelar-color.svg" 178 src="assets/img/icono-cancelar-color.svg"
182 (click)="deleteArticulo(i)"> 179 (click)="deleteArticulo(i)">
183 <img 180 <img
184 draggable="false" 181 draggable="false"
185 ondragstart="return false;" 182 ondragstart="return false;"
186 (contextmenu)="false" 183 (contextmenu)="false"
187 class="d-block img-fluid p-2 mx-auto rounded" 184 class="d-block img-fluid p-2 mx-auto rounded"
188 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 185 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
189 onerror="this.src='assets/img/image-not-found.jpg'"> 186 onerror="this.src='assets/img/image-not-found.jpg'">
190 <p class="d-block mt-auto text-center text-primary text-truncate"> 187 <p class="d-block mt-auto text-center text-primary text-truncate">
191 <small>{{articulo.DetArt}}</small> 188 <small>{{articulo.DetArt}}</small>
192 </p> 189 </p>
193 </div> 190 </div>
194 </div> 191 </div>
195 </div> 192 </div>
196 </div> 193 </div>
197 <!-- BOTON SCROLL DERECHA --> 194 <!-- BOTON SCROLL DERECHA -->
198 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 195 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
199 <img 196 <img
200 draggable="false" 197 draggable="false"
201 ondragstart="return false;" 198 ondragstart="return false;"
202 (contextmenu)="false" 199 (contextmenu)="false"
203 class="icon-30" 200 class="icon-30"
204 src="assets/img/ir-fondo-color.svg" 201 src="assets/img/ir-fondo-color.svg"
205 (mousedown)="scrollX(templateCarrito, 100)" 202 (mousedown)="scrollX(templateCarrito, 100)"
206 (mouseup)="mouseup()" 203 (mouseup)="mouseup()"
207 (mouseleave)="mouseup()"> 204 (mouseleave)="mouseup()">
208 </div> 205 </div>
209 </div> 206 </div>
210 </div> 207 </div>
211 <!-- TOTAL--> 208 <!-- TOTAL-->
212 <div 209 <div
213 class="col-auto mt-2 ml-auto h-20"> 210 class="col-auto mt-2 ml-auto h-20">
214 <div class="row mx-0"> 211 <div class="row mx-0">
215 <div class="col-auto align-self-center text-primary">TOTAL</div> 212 <div class="col-auto align-self-center text-primary">TOTAL</div>
216 <div class="col-auto bg-primary badge-pill"> 213 <div class="col-auto bg-primary badge-pill">
217 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 214 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
218 </div> 215 </div>
219 </div> 216 </div>
220 </div> 217 </div>
221 218
222 <!-- VER CARRITO --> 219 <!-- VER CARRITO -->
223 <div 220 <div
224 class="col-auto px-0 mt-2 h-20" 221 class="col-auto px-0 mt-2 h-20"
225 *ngIf="articuloService.carrito.length"> 222 *ngIf="articuloService.carrito.length">
226 <div 223 <div
227 class="btn-effect col-auto px-0 align-self-center bg-white" 224 class="btn-effect col-auto px-0 align-self-center bg-white"
228 [routerLink]="['/carrito']"> 225 [routerLink]="['/carrito']">
229 <div class="row mx-0 bg-light"> 226 <div class="row mx-0 bg-light">
230 <div class="col-auto p-0 bg-primary"> 227 <div class="col-auto p-0 bg-primary">
231 <img 228 <img
232 draggable="false" 229 draggable="false"
233 ondragstart="return false;" 230 ondragstart="return false;"
234 (contextmenu)="false" 231 (contextmenu)="false"
235 class="p-2 icon-40" 232 class="p-2 icon-40"
236 src="assets/img/carrito.svg"> 233 src="assets/img/carrito.svg">
237 </div> 234 </div>
238 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 235 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
239 </div> 236 </div>
240 </div> 237 </div>
241 </div> 238 </div>
242 239
243 </div> 240 </div>
244 </div> 241 </div>
245 242
246 </div> 243 </div>
247 244
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ f896518
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 border-top: 3px solid $primary !important;
11 border-left: 3px solid $primary !important;
12 border-right: 3px solid $primary !important;
13 .border {
14 opacity: 40%;
15 }
10 } 16 }
11 17
12 .border-bottom-effect { 18 .border-bottom-effect {
13 border: none; 19 border: none;
14 position: relative; 20 position: relative;
15 &:hover { 21 &:hover {
16 border: none; 22 border: none;
17 } 23 }
18 &::after { 24 &::after {
19 content: ""; 25 content: "";
20 position: absolute; 26 position: absolute;
21 width: 0px; 27 width: 0px;
22 height: 3px; 28 height: 3px;
23 left: 50%; 29 left: 50%;
24 bottom: 0; 30 bottom: 0;
25 background-color: $primary; 31 background-color: $primary;
26 transition: all ease-in-out 0.2s; 32 transition: all ease-in-out 0.2s;
27 } 33 }
28 &:hover::after { 34 &:hover::after {
29 width: 100%; 35 width: 100%;
30 left: 0; 36 left: 0;
31 } 37 }
32 } 38 }
33 39
34 .card { 40 .card {
35 border: none; 41 border: none;
36 } 42 }
37 43
38 .line-height-sm { 44 .line-height-sm {
39 line-height: 1.2; 45 line-height: 1.2;
40 } 46 }
41 47
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ f896518
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 = 0; 18 subTotal = 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 articuloCarrito.cantidad++; 47 articuloCarrito.cantidad++;
48 this.calcularTotal(); 48 this.calcularTotal();
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 pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'),
70 }) 71 })
71 .subscribe((data) => { 72 .subscribe((data) => {
72 observer.next(data); 73 observer.next(data);
73 observer.complete(); 74 observer.complete();
74 }); 75 });
75 }); 76 });
76 }); 77 });
77 } 78 }
78 79
79 cleanShoppingCar() { 80 cleanShoppingCar() {
80 this.articuloAcargar = undefined; 81 this.articuloAcargar = undefined;
81 this.promoAcargar = undefined; 82 this.promoAcargar = undefined;
82 this.carrito = []; 83 this.carrito = [];
83 } 84 }
84 85
85 setArticulosSinImagen(articulos: IArticulo[]) { 86 setArticulosSinImagen(articulos: IArticulo[]) {
86 articulos.forEach((articulo: IArticulo) => { 87 articulos.forEach((articulo: IArticulo) => {
87 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : 88 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
88 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; 89 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
89 }); 90 });
90 } 91 }
91 92
92 markArticuloInPromoAsRemoved() { 93 markArticuloInPromoAsRemoved() {
93 this.carrito.forEach((articuloCarrito: IArticulo) => { 94 this.carrito.forEach((articuloCarrito: IArticulo) => {
94 if (articuloCarrito.PRO) { 95 if (articuloCarrito.PRO) {
95 articuloCarrito.productos.forEach((articulo: IArticulo) => { 96 articuloCarrito.productos.forEach((articulo: IArticulo) => {
96 if (articulo.cantidadAdicionada === 0) { 97 if (articulo.cantidadAdicionada === 0) {
97 articulo.cantidad = 0; 98 articulo.cantidad = 0;
98 articulo.importeValorExtra = 0; 99 articulo.importeValorExtra = 0;
99 } 100 }
100 }); 101 });
101 } 102 }
102 }); 103 });
103 } 104 }
104 } 105 }
105 106
src/app/shared/confirmacion/confirmacion.component.ts
Diff comments   View file @ f896518
1 import { Component, OnInit, HostListener } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { IArticulo } from 'src/app/interfaces/IArticulo'; 3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { BsModalRef } from 'ngx-bootstrap/modal'; 4 import { BsModalRef } from 'ngx-bootstrap/modal';
5 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 5 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
6 import { Subject } from 'rxjs'; 6 import { Subject } from 'rxjs';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-confirmacion', 9 selector: 'app-confirmacion',
10 templateUrl: './confirmacion.component.html', 10 templateUrl: './confirmacion.component.html',
11 styleUrls: ['./confirmacion.component.scss'] 11 styleUrls: ['./confirmacion.component.scss']
12 }) 12 })
13 export class ConfirmacionComponent implements OnInit { 13 export class ConfirmacionComponent implements OnInit {
14 idArticulo: number;
15 imagenArticulo: any;
16 detLarArticulo: string;
17 preVenArticulo: any;
18 onClose: Subject<any>; 14 onClose: Subject<any>;
19 15
20 constructor( 16 constructor(
21 public modalRef: BsModalRef, 17 public modalRef: BsModalRef,
22 private inactiveScreen: InactiveScreenService, 18 private inactiveScreen: InactiveScreenService,
23 ) { 19 ) {
24 this.onClose = new Subject(); 20 this.onClose = new Subject();
25 } 21 }
26 22
27 ngOnInit() { 23 ngOnInit() {
28 } 24 }
29 25
30 confirmarArticulo() { 26 confirmarArticulo() {
31 this.onClose.next(); 27 this.onClose.next();
32 this.modalRef.hide(); 28 this.modalRef.hide();
33 } 29 }
34 30
35 close() { 31 close() {
36 this.modalRef.hide(); 32 this.modalRef.hide();
37 } 33 }
38 34
39 @HostListener('document:click', ['$event']) 35 @HostListener('document:click', ['$event'])
40 eventListener(event: Event) { 36 eventListener(event: Event) {
41 clearTimeout(this.inactiveScreen.timerReposo); 37 clearTimeout(this.inactiveScreen.timerReposo);
42 this.inactiveScreen.startTimeOutInactividad(); 38 this.inactiveScreen.startTimeOutInactividad();
43 } 39 }
44 } 40 }
45 41
src/scss/height-width.scss
Diff comments   View file @ f896518
1 @for $i from 1 through 100 { 1 @for $i from 1 through 100 {
2 $heightValue: 1% * $i; 2 $heightValue: 1% * $i;
3 .h-#{$i} { 3 .h-#{$i} {
4 height: $heightValue; 4 height: $heightValue;
5 } 5 }
6 @media (min-width: 576px) { 6 @media (min-width: 576px) {
7 .h-sm-#{$i} { 7 .h-sm-#{$i} {
8 height: $heightValue !important; 8 height: $heightValue !important;
9 } 9 }
10 } 10 }
11 @media (min-width: 768px) { 11 @media (min-width: 768px) {
12 .h-md-#{$i} { 12 .h-md-#{$i} {
13 height: $heightValue !important; 13 height: $heightValue !important;
14 } 14 }
15 } 15 }
16 @media (min-width: 992px) { 16 @media (min-width: 992px) {
17 .h-lg-#{$i} { 17 .h-lg-#{$i} {
18 height: $heightValue !important; 18 height: $heightValue !important;
19 } 19 }
20 } 20 }
21 @media (min-width: 1200px) { 21 @media (min-width: 1200px) {
22 .h-xl-#{$i} { 22 .h-xl-#{$i} {
23 height: $heightValue !important; 23 height: $heightValue !important;
24 } 24 }
25 } 25 }
26 } 26 }
27 27
28 @for $i from 1 through 100 { 28 @for $i from 1 through 100 {
29 $widthValue: 1% * $i; 29 $widthValue: 1% * $i;
30 .w-#{$i} { 30 .w-#{$i} {
31 width: $widthValue !important; 31 width: $widthValue !important;
32 } 32 }
33 } 33 }
34 34
35 .min-h-50 {
36 min-height: 50px;
37 }
38
39 .min-h-60 { 35 .min-h-60 {
40 min-height: 60px; 36 min-height: 60px;
41 } 37 }
42 38
43 .max-h-80 { 39 .max-h-80 {
44 max-height: 80%; 40 max-height: 80%;
45 } 41 }
46 42