Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 147013c705fce06bb7ee1b43788659fdda1d6d6f

Authored by Benjamin Rodriguez
1 parent 42ee8886f2
Exists in develop

cambio modal de pago-efectico

Showing 3 changed files with 4 additions and 4 deletions   Show diff stats
src/app/modules/info-formas-pago/info-formas-pago.component.html
Diff comments   View file @ 147013c
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 h-auto mt-6 mx-0 justify-content-center text-center"> 13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
14 <div 14 <div
15 [routerLink]="['/opcion-pedido']" 15 [routerLink]="['/opcion-pedido']"
16 class="col-11 col-sm-10 col-md-7 p-5 m-5 h-auto 16 class="col-11 col-sm-10 col-md-7 p-5 m-5 h-auto
17 btn-effect align-self-end border border-secondary rounded reduce-card-1"> 17 btn-effect align-self-end border border-secondary rounded reduce-card-1">
18 <img 18 <img
19 draggable="false" 19 draggable="false"
20 ondragstart="return false;" 20 ondragstart="return false;"
21 (contextmenu)="false" 21 (contextmenu)="false"
22 class="img-in-top px-4 bg-white" 22 class="img-in-top px-4 bg-white"
23 src="assets/img/icono-tarjetas.svg"> 23 src="assets/img/icono-tarjetas.svg">
24 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> 24 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
25 <p class="h2 mb-3 text-secondary"> 25 <p class="h2 mb-3 text-secondary">
26 tarjetas y 26 tarjetas y
27 <img 27 <img
28 draggable="false" 28 draggable="false"
29 ondragstart="return false;" 29 ondragstart="return false;"
30 (contextmenu)="false" 30 (contextmenu)="false"
31 class="icon-150" 31 class="icon-150"
32 src="assets/img/icono-mercado-pago.svg"> 32 src="assets/img/icono-mercado-pago.svg">
33 </p> 33 </p>
34 <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"> 34 <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white">
35 CONTINUAR 35 CONTINUAR
36 <img 36 <img
37 draggable="false" 37 draggable="false"
38 ondragstart="return false;" 38 ondragstart="return false;"
39 (contextmenu)="false" 39 (contextmenu)="false"
40 class="icon-30" 40 class="icon-30"
41 src="assets/img/ir.svg"> 41 src="assets/img/ir.svg">
42 </div> 42 </div>
43 </div> 43 </div>
44 <div 44 <div
45 class="col-11 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center 45 class="col-11 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center
46 btn-effect border border-primary rounded reduce-card-2" 46 btn-effect border border-primary rounded reduce-card-2"
47 (click)="openGoCaja(templateGoCaja)"> 47 (click)="openGoCaja(templateGoCaja)">
48 <img 48 <img
49 draggable="false" 49 draggable="false"
50 ondragstart="return false;" 50 ondragstart="return false;"
51 (contextmenu)="false" 51 (contextmenu)="false"
52 class="img-in-top px-4 bg-white" 52 class="img-in-top px-4 bg-white"
53 src="assets/img/icono-efectivo.svg"> 53 src="assets/img/icono-efectivo.svg">
54 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 54 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
55 <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p> 55 <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p>
56 </div> 56 </div>
57 </div> 57 </div>
58 </div> 58 </div>
59 </div> 59 </div>
60 60
61 <ng-template #templateGoCaja> 61 <ng-template #templateGoCaja>
62 <div class="bg-primary rounded shadow text-white"> 62 <div class="bg-primary rounded shadow text-white">
63 <div class="modal-body text-center"> 63 <div class="modal-body text-center h1 my-4">
64 Por favor, hacé tu pedido en la caja. 64 Por favor, hacé tu pedido en la caja.
65 </div> 65 </div>
66 </div> 66 </div>
67 </ng-template> 67 </ng-template>
68 68
src/app/modules/info-formas-pago/info-formas-pago.component.ts
Diff comments   View file @ 147013c
1 import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core'; 1 import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
2 import { BsModalService } from 'ngx-bootstrap/modal'; 2 import { BsModalService } from 'ngx-bootstrap/modal';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-formas-pago', 5 selector: 'app-formas-pago',
6 templateUrl: './info-formas-pago.component.html', 6 templateUrl: './info-formas-pago.component.html',
7 styleUrls: ['./info-formas-pago.component.scss'] 7 styleUrls: ['./info-formas-pago.component.scss']
8 }) 8 })
9 export class InfoFormasPagoComponent implements OnInit, OnDestroy { 9 export class InfoFormasPagoComponent implements OnInit, OnDestroy {
10 mediaPantalla = false; 10 mediaPantalla = false;
11 timer: any; 11 timer: any;
12 12
13 constructor( 13 constructor(
14 private modalService: BsModalService, 14 private modalService: BsModalService,
15 ) { } 15 ) { }
16 16
17 ngOnInit() { } 17 ngOnInit() { }
18 18
19 ngOnDestroy() { 19 ngOnDestroy() {
20 if (this.timer) clearTimeout(this.timer); 20 if (this.timer) clearTimeout(this.timer);
21 } 21 }
22 22
23 openGoCaja(templateRef: TemplateRef<any>) { 23 openGoCaja(templateRef: TemplateRef<any>) {
24 const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-sm modal-dialog-centered' }); 24 const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-dialog-centered' });
25 this.timer = setTimeout(() => { 25 this.timer = setTimeout(() => {
26 modalRef.hide(); 26 modalRef.hide();
27 }, 3000); 27 }, 3000);
28 } 28 }
29 } 29 }
30 30
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 147013c
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" id="content"> 15 <div class="row w-100 mr-4 h-50 h-md-70" id="content">
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 <app-filtro-categorias 18 <app-filtro-categorias
19 class="col-5 col-sm-3 col-xl-2 h-100" 19 class="col-5 col-sm-3 col-xl-2 h-100"
20 #filtroCategorias 20 #filtroCategorias
21 (getProductos)="getProductos()" 21 (getProductos)="getProductos()"
22 (setProductos)="setProductos()" 22 (setProductos)="setProductos()"
23 (filterItems)="filterItems()"> 23 (filterItems)="filterItems()">
24 </app-filtro-categorias> 24 </app-filtro-categorias>
25 <!-- LISTA DE ARTICULOS --> 25 <!-- LISTA DE ARTICULOS -->
26 <div 26 <div
27 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 27 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
28 (scroll)="scrollEvent($event)"> 28 (scroll)="scrollEvent($event)">
29 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 29 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
30 <!-- ARTICULO --> 30 <!-- ARTICULO -->
31 <div 31 <div
32 class="col px-2 my-1 my-md-3 h-auto" 32 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"
33 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 33 class="col px-2 my-1 my-md-3 h-auto">
34 <div 34 <div
35 class="swing-in-top-fwd btn-effect card h-auto" 35 class="swing-in-top-fwd btn-effect card h-auto"
36 (click)="selectArticulo(articulo)"> 36 (click)="selectArticulo(articulo)">
37 <img 37 <img
38 draggable="false" 38 draggable="false"
39 ondragstart="return false;" 39 ondragstart="return false;"
40 (contextmenu)="false" 40 (contextmenu)="false"
41 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 41 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
42 onerror="this.src='assets/img/imagen-no-encontrada.jpg'" 42 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
43 class="card-img-top h-30 h-md-55 rounded-sm"> 43 class="card-img-top h-30 h-md-55 rounded-sm">
44 <div class="row mx-0 py-1 h-auto justify-content-center"> 44 <div class="row mx-0 py-1 h-auto justify-content-center">
45 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60"> 45 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">
46 {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}} 46 {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
47 </p> 47 </p>
48 <div class="col-12 px-1 align-self-end h-auto"> 48 <div class="col-12 px-1 align-self-end 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 <div class="col px-0 align-self-center text-white text-right"> 50 <div class="col px-0 align-self-center text-white text-right">
51 {{articulo.PreVen | currency}} 51 {{articulo.PreVen | currency}}
52 </div> 52 </div>
53 <div class="col-5 px-0"> 53 <div class="col-5 px-0">
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="d-block ml-auto py-1 icon-30" 58 class="d-block ml-auto py-1 icon-30"
59 src="assets/img/ir.svg"> 59 src="assets/img/ir.svg">
60 </div> 60 </div>
61 </div> 61 </div>
62 </div> 62 </div>
63 </div> 63 </div>
64 </div> 64 </div>
65 </div> 65 </div>
66 </div> 66 </div>
67 <!-- BOTON VER MAS --> 67 <!-- BOTON VER MAS -->
68 <div class="row mx-0"> 68 <div class="row mx-0">
69 <div 69 <div
70 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 70 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
71 class="col-12 px-0 mb-2"> 71 class="col-12 px-0 mb-2">
72 <button 72 <button
73 (click)="increaseShow()" 73 (click)="increaseShow()"
74 class="btn btn-block btn-outline-primary"> 74 class="btn btn-block btn-outline-primary">
75 Ver Más 75 Ver Más
76 </button> 76 </button>
77 </div> 77 </div>
78 </div> 78 </div>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 <!-- FOOTER CARRITO DE COMPRAS --> 83 <!-- FOOTER CARRITO DE COMPRAS -->
84 <div class="row w-90 mx-auto h-auto justify-content-center"> 84 <div class="row w-90 mx-auto h-auto justify-content-center">
85 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 85 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
86 [ngClass]="boxCarrito.classList.contains('media-pantalla') 86 [ngClass]="boxCarrito.classList.contains('media-pantalla')
87 ? 'col-8' : 'col-12'" id="boxCarrito"> 87 ? 'col-8' : 'col-12'" id="boxCarrito">
88 <!-- CABECERA --> 88 <!-- CABECERA -->
89 <div class="row mx-0 h-15 border-bottom border-primary"> 89 <div class="row mx-0 h-15 border-bottom border-primary">
90 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 90 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
91 </div> 91 </div>
92 <!-- CUERPO --> 92 <!-- CUERPO -->
93 <div class="row h-85 mx-0 justify-content-around"> 93 <div class="row h-85 mx-0 justify-content-around">
94 <!-- BOTON SCROLL IZQUIERDA --> 94 <!-- BOTON SCROLL IZQUIERDA -->
95 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 95 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
96 <img 96 <img
97 draggable="false" 97 draggable="false"
98 ondragstart="return false;" 98 ondragstart="return false;"
99 (contextmenu)="false" 99 (contextmenu)="false"
100 class="icon-30 rotate-180-neg" 100 class="icon-30 rotate-180-neg"
101 src="assets/img/ir-fondo-color.svg" 101 src="assets/img/ir-fondo-color.svg"
102 (mousedown)="scrollX(templateCarrito, -100)" 102 (mousedown)="scrollX(templateCarrito, -100)"
103 (mouseup)="mouseup()" 103 (mouseup)="mouseup()"
104 (mouseleave)="mouseup()"> 104 (mouseleave)="mouseup()">
105 </div> 105 </div>
106 <!-- CARRITO --> 106 <!-- CARRITO -->
107 <div class="col-6 col-sm-8 col-lg-10 h-100"> 107 <div class="col-6 col-sm-8 col-lg-10 h-100">
108 <div 108 <div
109 #templateCarrito 109 #templateCarrito
110 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 110 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
111 (scroll)="scrollEvent($event)"> 111 (scroll)="scrollEvent($event)">
112 <!-- ARTICULOS --> 112 <!-- ARTICULOS -->
113 <div 113 <div
114 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 114 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
115 *ngFor="let articulo of articuloService.carrito; let i = index;" 115 *ngFor="let articulo of articuloService.carrito; let i = index;"
116 @EnterLeaveY> 116 @EnterLeaveY>
117 <img 117 <img
118 class="btn-effect icon-20 mr-2 position-absolute right-0" 118 class="btn-effect icon-20 mr-2 position-absolute right-0"
119 src="assets/img/icono-cancelar-color.svg" 119 src="assets/img/icono-cancelar-color.svg"
120 (click)="deleteArticulo(i)"> 120 (click)="deleteArticulo(i)">
121 <img 121 <img
122 draggable="false" 122 draggable="false"
123 ondragstart="return false;" 123 ondragstart="return false;"
124 (contextmenu)="false" 124 (contextmenu)="false"
125 class="d-block img-fluid p-2 mx-auto rounded" 125 class="d-block img-fluid p-2 mx-auto rounded"
126 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 126 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
127 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"> 127 onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
128 <p class="d-block mt-auto text-center text-primary text-truncate"> 128 <p class="d-block mt-auto text-center text-primary text-truncate">
129 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small> 129 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
130 </p> 130 </p>
131 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> 131 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
132 </div> 132 </div>
133 <!-- MENSAJE DE ADVERTENCIA --> 133 <!-- MENSAJE DE ADVERTENCIA -->
134 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 134 <div *ngIf="!articuloService.carrito.length" class="col h-100">
135 <p class="text-center py-5">No hay articulos en el carrito</p> 135 <p class="text-center py-5">No hay articulos en el carrito</p>
136 </div> 136 </div>
137 </div> 137 </div>
138 </div> 138 </div>
139 <!-- BOTON SCROLL DERECHA --> 139 <!-- BOTON SCROLL DERECHA -->
140 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 140 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
141 <img 141 <img
142 draggable="false" 142 draggable="false"
143 ondragstart="return false;" 143 ondragstart="return false;"
144 (contextmenu)="false" 144 (contextmenu)="false"
145 class="icon-30" 145 class="icon-30"
146 src="assets/img/ir-fondo-color.svg" 146 src="assets/img/ir-fondo-color.svg"
147 (mousedown)="scrollX(templateCarrito, 100)" 147 (mousedown)="scrollX(templateCarrito, 100)"
148 (mouseup)="mouseup()" 148 (mouseup)="mouseup()"
149 (mouseleave)="mouseup()"> 149 (mouseleave)="mouseup()">
150 </div> 150 </div>
151 </div> 151 </div>
152 </div> 152 </div>
153 <!-- TOTAL--> 153 <!-- TOTAL-->
154 <div 154 <div
155 class="col-auto mt-2 ml-auto h-20"> 155 class="col-auto mt-2 ml-auto h-20">
156 <div class="row mx-0"> 156 <div class="row mx-0">
157 <div class="col-auto align-self-center text-primary">TOTAL</div> 157 <div class="col-auto align-self-center text-primary">TOTAL</div>
158 <div class="col-auto bg-primary badge-pill"> 158 <div class="col-auto bg-primary badge-pill">
159 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 159 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
160 </div> 160 </div>
161 </div> 161 </div>
162 </div> 162 </div>
163 163
164 <!-- VER CARRITO --> 164 <!-- VER CARRITO -->
165 <div 165 <div
166 class="col-auto px-0 mt-2 h-20" 166 class="col-auto px-0 mt-2 h-20"
167 *ngIf="articuloService.carrito.length" 167 *ngIf="articuloService.carrito.length"
168 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 168 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
169 <div 169 <div
170 class="btn-effect col-auto px-0 align-self-center bg-white" 170 class="btn-effect col-auto px-0 align-self-center bg-white"
171 [routerLink]="['/carrito']"> 171 [routerLink]="['/carrito']">
172 <div class="row mx-0 bg-light"> 172 <div class="row mx-0 bg-light">
173 <div class="col-auto p-0 bg-primary"> 173 <div class="col-auto p-0 bg-primary">
174 <img 174 <img
175 draggable="false" 175 draggable="false"
176 ondragstart="return false;" 176 ondragstart="return false;"
177 (contextmenu)="false" 177 (contextmenu)="false"
178 class="p-2 icon-40" 178 class="p-2 icon-40"
179 src="assets/img/carrito.svg"> 179 src="assets/img/carrito.svg">
180 </div> 180 </div>
181 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 181 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
182 </div> 182 </div>
183 </div> 183 </div>
184 </div> 184 </div>
185 185
186 </div> 186 </div>
187 </div> 187 </div>
188 188
189 </div> 189 </div>
190 190