Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 4ed1161b9dbd7eb2768bdc349ab72dcf82d4a50c

Authored by Marcelo Puebla
2 parents 6877b1afab 7eabd6c705
Exists in develop

Merge branch 'master' into 'develop' 

Master(benjamin)

See merge request !45
Showing 9 changed files   Show diff stats
src/app/modules/info-formas-pago/info-formas-pago.component.html
Diff comments   View file @ 4ed1161
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 class="col-7 col-lg-4 p-5 m-5 h-auto align-self-end border 14 <div
15 border-secondary rounded reduce-card-1"> 15 [routerLink]="['/opcion-pedido']"
16 class="col-7 col-xl-4 p-5 m-5 h-auto align-self-end border border-secondary rounded">
16 <img 17 <img
17 draggable="false" 18 draggable="false"
18 ondragstart="return false;" 19 ondragstart="return false;"
19 (contextmenu)="false" 20 (contextmenu)="false"
20 class="img-in-top px-4 bg-white" 21 class="img-in-top px-4 bg-white"
21 src="assets/img/icono-tarjetas.svg"> 22 src="assets/img/icono-tarjetas.svg">
22 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> 23 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
23 <p class="h2 mb-3 text-secondary"> 24 <p class="h2 mb-3 text-secondary">
24 tarjetas y 25 tarjetas y
25 <img 26 <img
26 draggable="false" 27 draggable="false"
27 ondragstart="return false;" 28 ondragstart="return false;"
28 (contextmenu)="false" 29 (contextmenu)="false"
29 class="icon-150" 30 class="icon-150"
30 src="assets/img/icono-mercado-pago.svg"> 31 src="assets/img/icono-mercado-pago.svg">
31 </p> 32 </p>
32 <div 33 <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white">
33 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"
34 [routerLink]="['/opcion-pedido']">
35 CONTINUAR 34 CONTINUAR
36 <img 35 <img
37 draggable="false" 36 draggable="false"
38 ondragstart="return false;" 37 ondragstart="return false;"
39 (contextmenu)="false" 38 (contextmenu)="false"
40 class="icon-30" 39 class="icon-30"
41 src="assets/img/ir.svg"> 40 src="assets/img/ir.svg">
42 </div> 41 </div>
43 </div> 42 </div>
44 <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border 43 <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border
45 border-primary rounded reduce-card-2"> 44 border-primary rounded reduce-card-2">
46 <img 45 <img
47 draggable="false" 46 draggable="false"
48 ondragstart="return false;" 47 ondragstart="return false;"
49 (contextmenu)="false" 48 (contextmenu)="false"
50 class="img-in-top px-4 bg-white" 49 class="img-in-top px-4 bg-white"
51 src="assets/img/icono-efectivo.svg"> 50 src="assets/img/icono-efectivo.svg">
52 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 51 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
53 <p class="h2 m-0 text-primary">te esperamos en la caja</p> 52 <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p>
54 </div> 53 </div>
55 </div> 54 </div>
56 </div> 55 </div>
57 </div> 56 </div>
src/app/modules/opcion-pedido/opcion-pedido.component.html
Diff comments   View file @ 4ed1161
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 reduce-card-1"> 19 <div class="col-auto px-0 h-auto align-self-start reduce-card-1">
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 reduce-card-2"> 46 <div class="col-auto px-0 h-auto align-self-start reduce-card-2">
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 @ 4ed1161
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 this.reducirPantalla(); 16 this.reducirPantalla();
17 } 17 }
18 18
19 goTo(path) { 19 goTo(path) {
20 this.router.navigate([path]); 20 this.router.navigate([path]);
21 } 21 }
22 22
23 seleccionPedido(lugar) { 23 seleccionPedido(lugar) {
24 localStorage.setItem('pedidoPara', lugar); 24 lugar === 'true' ? lugar = true : false;
25 localStorage.setItem('pedidoParaLlevar', lugar);
25 } 26 }
26 27
27 reducirPantalla() { 28 reducirPantalla() {
28 if ($('body').hasClass('media-pantalla')) { 29 if ($('body').hasClass('media-pantalla')) {
29 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); 30 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
30 } 31 }
31 } 32 }
32 } 33 }
33 34
src/app/modules/pago-electronico/pago-electronico.component.scss
Diff comments   View file @ 4ed1161
1 .mt-6 {
2 margin-top: 4.5rem;
3 }
4
5 .mt-7 { 1 .mt-7 {
6 margin-top: 6rem; 2 margin-top: 6rem;
7 }
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 4ed1161
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 <!-- 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 cat-btn"> 22 <div class="col-auto btn-effect h-5 cat-btn">
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 36 class="col-12 px-0 box-categorias border border-primary
37 border-left-0 rounded-right scroll-y cat-box" 37 border-left-0 rounded-right scroll-y cat-box"
38 (scroll)="scrollEvent($event)"> 38 (scroll)="scrollEvent($event)">
39 <div 39 <div
40 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" 40 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
41 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive, 41 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive,
42 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }" 42 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
43 (click)="selectCategoria(-1, 0)"> 43 (click)="selectCategoria(-1, 0)">
44 <img 44 <img
45 draggable="false" 45 draggable="false"
46 ondragstart="return false;" 46 ondragstart="return false;"
47 (contextmenu)="false" 47 (contextmenu)="false"
48 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 48 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
49 src="assets/img/logo-spot.svg"> 49 src="assets/img/logo-spot.svg">
50 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small> 50 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
51 </div> 51 </div>
52 <div 52 <div
53 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" 53 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
54 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected, 54 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected,
55 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }" 55 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
56 (click)="selectCategoria(i, categoria.id)" 56 (click)="selectCategoria(i, categoria.id)"
57 *ngFor="let categoria of categorias; let i = index;"> 57 *ngFor="let categoria of categorias; let i = index;">
58 <img 58 <img
59 draggable="false" 59 draggable="false"
60 ondragstart="return false;" 60 ondragstart="return false;"
61 (contextmenu)="false" 61 (contextmenu)="false"
62 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria" 62 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria"
63 [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}" 63 [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"
64 src="{{urlImagenes}}{{categoria.path_imagen}}" 64 src="{{urlImagenes}}{{categoria.path_imagen}}"
65 onerror="this.src='assets/img/image-not-found.jpg'"> 65 onerror="this.src='assets/img/image-not-found.jpg'">
66 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 66 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
67 </div> 67 </div>
68 </div> 68 </div>
69 <div class="col-auto btn-effect h-5 cat-btn"> 69 <div class="col-auto btn-effect h-5 cat-btn">
70 <img 70 <img
71 draggable="false" 71 draggable="false"
72 ondragstart="return false;" 72 ondragstart="return false;"
73 (contextmenu)="false" 73 (contextmenu)="false"
74 class="h-100 d-block mx-auto rotate-90" 74 class="h-100 d-block mx-auto rotate-90"
75 src="assets/img/ir-color.svg" 75 src="assets/img/ir-color.svg"
76 (mousedown)="scrollY(templateCategorias, 100)" 76 (mousedown)="scrollY(templateCategorias, 100)"
77 (mouseup)="mouseup()" 77 (mouseup)="mouseup()"
78 (mouseleave)="mouseup()"> 78 (mouseleave)="mouseup()">
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 <!-- LISTA DE ARTICULOS --> 82 <!-- LISTA DE ARTICULOS -->
83 <div 83 <div
84 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 84 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
85 (scroll)="scrollEvent($event)"> 85 (scroll)="scrollEvent($event)">
86 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 86 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
87 <!-- ARTICULO --> 87 <!-- ARTICULO -->
88 <div 88 <div
89 class="col px-2 my-1 my-md-3 h-auto" 89 class="col px-2 my-1 my-md-3 h-auto"
90 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 90 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
91 <div 91 <div
92 class="swing-in-top-fwd btn-effect card h-auto" 92 class="swing-in-top-fwd btn-effect card h-auto"
93 (click)="selectArticulo(articulo)"> 93 (click)="selectArticulo(articulo)">
94 <img 94 <img
95 draggable="false" 95 draggable="false"
96 ondragstart="return false;" 96 ondragstart="return false;"
97 (contextmenu)="false" 97 (contextmenu)="false"
98 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 98 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
99 onerror="this.src='assets/img/image-not-found.jpg'" 99 onerror="this.src='assets/img/image-not-found.jpg'"
100 class="card-img-top h-30 h-md-55 rounded-sm"> 100 class="card-img-top h-30 h-md-55 rounded-sm">
101 <div class="row mx-0 py-1 h-auto justify-content-center"> 101 <div class="row mx-0 py-1 h-auto justify-content-center">
102 <p 102 <p
103 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 103 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
104 class="col-12 px-1 h6 h-auto text-center min-h-60"> 104 class="col-12 px-1 h6 h-auto text-center min-h-60">
105 {{articulo.DetArt}} 105 {{articulo.DetArt.toUpperCase()}}
106 </p>
107 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
108 <small>{{articulo.DET_LAR}}</small>
109 </p> 106 </p>
110 <div class="col-12 px-1 align-self-end h-auto"> 107 <div class="col-12 px-1 align-self-end h-auto">
111 <div 108 <div
112 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 109 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
113 class="row mx-0 justify-content-between badge-pill"> 110 class="row mx-0 justify-content-between badge-pill">
114 <div class="col px-0 align-self-center text-white text-right"> 111 <div class="col px-0 align-self-center text-white text-right">
115 {{articulo.PreVen | currency}} 112 {{articulo.PreVen | currency}}
116 </div> 113 </div>
117 <div class="col-5 px-0"> 114 <div class="col-5 px-0">
118 <img 115 <img
119 draggable="false" 116 draggable="false"
120 ondragstart="return false;" 117 ondragstart="return false;"
121 (contextmenu)="false" 118 (contextmenu)="false"
122 class="d-block ml-auto py-1 icon-30" 119 class="d-block ml-auto py-1 icon-30"
123 src="assets/img/ir.svg"> 120 src="assets/img/ir.svg">
124 </div> 121 </div>
125 </div> 122 </div>
126 </div> 123 </div>
127 </div> 124 </div>
128 </div> 125 </div>
129 </div> 126 </div>
130 </div> 127 </div>
131 <!-- BOTON VER MAS --> 128 <!-- BOTON VER MAS -->
132 <div class="row mx-0"> 129 <div class="row mx-0">
133 <div 130 <div
134 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 131 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
135 class="col-12 px-0 mb-2"> 132 class="col-12 px-0 mb-2">
136 <button 133 <button
137 (click)="increaseShow()" 134 (click)="increaseShow()"
138 class="btn btn-block btn-outline-primary"> 135 class="btn btn-block btn-outline-primary">
139 Ver Más 136 Ver Más
140 </button> 137 </button>
141 </div> 138 </div>
142 </div> 139 </div>
143 </div> 140 </div>
144 </div> 141 </div>
145 </div> 142 </div>
146 </div> 143 </div>
147 <!-- FOOTER CARRITO DE COMPRAS --> 144 <!-- FOOTER CARRITO DE COMPRAS -->
148 <div class="row w-90 mx-auto h-auto justify-content-center"> 145 <div class="row w-90 mx-auto h-auto justify-content-center">
149 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 146 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
150 [ngClass]="boxCarrito.classList.contains('media-pantalla') 147 [ngClass]="boxCarrito.classList.contains('media-pantalla')
151 ? 'col-8' : 'col-12'" id="boxCarrito"> 148 ? 'col-8' : 'col-12'" id="boxCarrito">
152 <!-- CABECERA --> 149 <!-- CABECERA -->
153 <div class="row mx-0 h-15 border-bottom border-primary"> 150 <div class="row mx-0 h-15 border-bottom border-primary">
154 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 151 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
155 </div> 152 </div>
156 <!-- CUERPO --> 153 <!-- CUERPO -->
157 <div class="row h-85 mx-0 justify-content-around"> 154 <div class="row h-85 mx-0 justify-content-around">
158 <!-- BOTON SCROLL IZQUIERDA --> 155 <!-- BOTON SCROLL IZQUIERDA -->
159 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 156 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
160 <img 157 <img
161 draggable="false" 158 draggable="false"
162 ondragstart="return false;" 159 ondragstart="return false;"
163 (contextmenu)="false" 160 (contextmenu)="false"
164 class="icon-30 rotate-180-neg" 161 class="icon-30 rotate-180-neg"
165 src="assets/img/ir-fondo-color.svg" 162 src="assets/img/ir-fondo-color.svg"
166 (mousedown)="scrollX(templateCarrito, -100)" 163 (mousedown)="scrollX(templateCarrito, -100)"
167 (mouseup)="mouseup()" 164 (mouseup)="mouseup()"
168 (mouseleave)="mouseup()"> 165 (mouseleave)="mouseup()">
169 </div> 166 </div>
170 <!-- CARRITO --> 167 <!-- CARRITO -->
171 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 168 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
172 <div 169 <div
173 #templateCarrito 170 #templateCarrito
174 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 171 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
175 (scroll)="scrollEvent($event)"> 172 (scroll)="scrollEvent($event)">
176 <!-- MENSAJE DE ADVERTENCIA --> 173 <!-- MENSAJE DE ADVERTENCIA -->
177 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 174 <div *ngIf="!articuloService.carrito.length" class="col h-100">
178 <p class="text-center py-5">No hay articulos en el carrito</p> 175 <p class="text-center py-5">No hay articulos en el carrito</p>
179 </div> 176 </div>
180 <!-- ARTICULOS --> 177 <!-- ARTICULOS -->
181 <div 178 <div
182 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 179 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
183 *ngFor="let articulo of articuloService.carrito; let i = index;"> 180 *ngFor="let articulo of articuloService.carrito; let i = index;">
184 <div class="swing-in-top-fwd"> 181 <div class="swing-in-top-fwd">
185 <img 182 <img
186 class="btn-effect icon-20 position-absolute right-0" 183 class="btn-effect icon-20 position-absolute right-0"
187 src="assets/img/icono-cancelar-color.svg" 184 src="assets/img/icono-cancelar-color.svg"
188 (click)="deleteArticulo(i)"> 185 (click)="deleteArticulo(i)">
189 <img 186 <img
190 draggable="false" 187 draggable="false"
191 ondragstart="return false;" 188 ondragstart="return false;"
192 (contextmenu)="false" 189 (contextmenu)="false"
193 class="d-block img-fluid p-2 mx-auto rounded" 190 class="d-block img-fluid p-2 mx-auto rounded"
194 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 191 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
195 onerror="this.src='assets/img/image-not-found.jpg'"> 192 onerror="this.src='assets/img/image-not-found.jpg'">
196 <p class="d-block mt-auto text-center text-primary text-truncate"> 193 <p class="d-block mt-auto text-center text-primary text-truncate">
197 <small>{{articulo.DetArt}}</small> 194 <small>{{articulo.DetArt}}</small>
198 </p> 195 </p>
199 </div> 196 </div>
200 </div> 197 </div>
201 </div> 198 </div>
202 </div> 199 </div>
203 <!-- BOTON SCROLL DERECHA --> 200 <!-- BOTON SCROLL DERECHA -->
204 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 201 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
205 <img 202 <img
206 draggable="false" 203 draggable="false"
207 ondragstart="return false;" 204 ondragstart="return false;"
208 (contextmenu)="false" 205 (contextmenu)="false"
209 class="icon-30" 206 class="icon-30"
210 src="assets/img/ir-fondo-color.svg" 207 src="assets/img/ir-fondo-color.svg"
211 (mousedown)="scrollX(templateCarrito, 100)" 208 (mousedown)="scrollX(templateCarrito, 100)"
212 (mouseup)="mouseup()" 209 (mouseup)="mouseup()"
213 (mouseleave)="mouseup()"> 210 (mouseleave)="mouseup()">
214 </div> 211 </div>
215 </div> 212 </div>
216 </div> 213 </div>
217 <!-- TOTAL--> 214 <!-- TOTAL-->
218 <div 215 <div
219 class="col-auto mt-2 ml-auto h-20"> 216 class="col-auto mt-2 ml-auto h-20">
220 <div class="row mx-0"> 217 <div class="row mx-0">
221 <div class="col-auto align-self-center text-primary">TOTAL</div> 218 <div class="col-auto align-self-center text-primary">TOTAL</div>
222 <div class="col-auto bg-primary badge-pill"> 219 <div class="col-auto bg-primary badge-pill">
223 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 220 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
224 </div> 221 </div>
225 </div> 222 </div>
226 </div> 223 </div>
227 224
228 <!-- VER CARRITO --> 225 <!-- VER CARRITO -->
229 <div 226 <div
230 class="col-auto px-0 mt-2 h-20" 227 class="col-auto px-0 mt-2 h-20"
231 *ngIf="articuloService.carrito.length" 228 *ngIf="articuloService.carrito.length"
232 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 229 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
233 <div 230 <div
234 class="btn-effect col-auto px-0 align-self-center bg-white" 231 class="btn-effect col-auto px-0 align-self-center bg-white"
235 [routerLink]="['/carrito']"> 232 [routerLink]="['/carrito']">
236 <div class="row mx-0 bg-light"> 233 <div class="row mx-0 bg-light">
237 <div class="col-auto p-0 bg-primary"> 234 <div class="col-auto p-0 bg-primary">
238 <img 235 <img
239 draggable="false" 236 draggable="false"
240 ondragstart="return false;" 237 ondragstart="return false;"
241 (contextmenu)="false" 238 (contextmenu)="false"
242 class="p-2 icon-40" 239 class="p-2 icon-40"
243 src="assets/img/carrito.svg"> 240 src="assets/img/carrito.svg">
244 </div> 241 </div>
245 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 242 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
246 </div> 243 </div>
247 </div> 244 </div>
248 </div> 245 </div>
249 246
250 </div> 247 </div>
251 </div> 248 </div>
252 249
253 </div> 250 </div>
254 251
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ 4ed1161
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;
10 } 13 }
11 14
12 .border-bottom-effect { 15 .border-bottom-effect {
13 border: none; 16 border: none;
14 position: relative; 17 position: relative;
15 &:hover { 18 &:hover {
16 border: none; 19 border: none;
17 } 20 }
18 &::after { 21 &::after {
19 content: ""; 22 content: "";
20 position: absolute; 23 position: absolute;
21 width: 0px; 24 width: 0px;
22 height: 3px; 25 height: 3px;
23 left: 50%; 26 left: 50%;
24 bottom: 0; 27 bottom: 0;
25 background-color: $primary; 28 background-color: $primary;
26 transition: all ease-in-out 0.2s; 29 transition: all ease-in-out 0.2s;
27 } 30 }
28 &:hover::after { 31 &:hover::after {
29 width: 100%; 32 width: 100%;
30 left: 0; 33 left: 0;
31 } 34 }
32 } 35 }
33 36
34 .card { 37 .card {
35 border: none; 38 border: none;
36 } 39 }
37 40
38 .line-height-sm { 41 .line-height-sm {
39 line-height: 1.2; 42 line-height: 1.2;
40 } 43 }
41 44
42 #content.media-pantalla,#boxCarrito.media-pantalla { 45 #content.media-pantalla,#boxCarrito.media-pantalla {
43 max-height: 60% !important; 46 max-height: 60% !important;
44 } 47 }
45 48
46 .cat-content.media-pantalla { 49 .cat-content.media-pantalla {
47 margin: 0.5rem 0.7rem !important; 50 margin: 0.5rem 0.7rem !important;
48 height: 76% !important; 51 height: 76% !important;
49 } 52 }
50 53
51 .cat-box.media-pantalla{ 54 .cat-box.media-pantalla{
52 height: calc(100% - 85px) !important; 55 height: calc(100% - 85px) !important;
53 } 56 }
54 57
55 .cat-btn.media-pantalla { 58 .cat-btn.media-pantalla {
56 height: 7% !important; 59 height: 7% !important;
57 } 60 }
58 61
59 .img-categoria.media-pantalla{ 62 .img-categoria.media-pantalla{
60 min-height: 40px !important; 63 min-height: 40px !important;
61 } 64 }
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ 4ed1161
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 articulo.cantidad = 1; 45 articulo.cantidad = 1;
46 for (const articuloCarrito of this.carrito) { 46 for (const articuloCarrito of this.carrito) {
47 if (articuloCarrito.id === articulo.id && !articulo.productos.length) { 47 if (articuloCarrito.id === articulo.id && !articulo.productos.length) {
48 articuloCarrito.cantidad++; 48 articuloCarrito.cantidad++;
49 this.calcularTotal(); 49 this.calcularTotal();
50 return; 50 return;
51 } 51 }
52 } 52 }
53 this.setArticulosSinImagen([articulo]); 53 this.setArticulosSinImagen([articulo]);
54 this.carrito.unshift(articulo); 54 this.carrito.unshift(articulo);
55 this.calcularTotal(); 55 this.calcularTotal();
56 } 56 }
57 57
58 deleteArticulo(index: number) { 58 deleteArticulo(index: number) {
59 this.carrito.splice(index, 1); 59 this.carrito.splice(index, 1);
60 this.calcularTotal(); 60 this.calcularTotal();
61 } 61 }
62 62
63 pay(dataPago: any) { 63 pay(dataPago: any) {
64 return new Observable((observer) => { 64 return new Observable((observer) => {
65 this.clienteService.getById(-1) 65 this.clienteService.getById(-1)
66 .subscribe(cliente => { 66 .subscribe(cliente => {
67 this.markArticuloInPromoAsRemoved(); 67 this.markArticuloInPromoAsRemoved();
68 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, { 68 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
69 productos: this.carrito, 69 productos: this.carrito,
70 cliente, 70 cliente,
71 origen: 'autoservicio', 71 origen: 'autoservicio',
72 codigoVendedor: 5, 72 codigoVendedor: 5,
73 puntoVenta: APP_SETTINGS.puntoVenta, 73 puntoVenta: APP_SETTINGS.puntoVenta,
74 pedidoAnombreDe: dataPago.pedidoAnombreDe, 74 pedidoAnombreDe: dataPago.pedidoAnombreDe,
75 numeroPlanilla: APP_SETTINGS.numeroPlanilla, 75 numeroPlanilla: APP_SETTINGS.numeroPlanilla,
76 pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'),
76 }) 77 })
77 .subscribe((data) => { 78 .subscribe((data) => {
78 observer.next(data); 79 observer.next(data);
79 observer.complete(); 80 observer.complete();
80 }); 81 });
81 }); 82 });
82 }); 83 });
83 } 84 }
84 85
85 cleanShoppingCar() { 86 cleanShoppingCar() {
86 this.articuloAcargar = undefined; 87 this.articuloAcargar = undefined;
87 this.promoAcargar = undefined; 88 this.promoAcargar = undefined;
88 this.carrito = []; 89 this.carrito = [];
89 } 90 }
90 91
91 setArticulosSinImagen(articulos: IArticulo[]) { 92 setArticulosSinImagen(articulos: IArticulo[]) {
92 articulos.forEach((articulo: IArticulo) => { 93 articulos.forEach((articulo: IArticulo) => {
93 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : 94 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
94 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; 95 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
95 }); 96 });
96 } 97 }
97 98
98 markArticuloInPromoAsRemoved() { 99 markArticuloInPromoAsRemoved() {
99 this.carrito.forEach((articuloCarrito: IArticulo) => { 100 this.carrito.forEach((articuloCarrito: IArticulo) => {
100 if (articuloCarrito.PRO) { 101 if (articuloCarrito.PRO) {
101 articuloCarrito.productos.forEach((articulo: IArticulo) => { 102 articuloCarrito.productos.forEach((articulo: IArticulo) => {
102 if (articulo.cantidadAdicionada === 0) { 103 if (articulo.cantidadAdicionada === 0) {
103 articulo.cantidad = 0; 104 articulo.cantidad = 0;
104 articulo.importeValorExtra = 0; 105 articulo.importeValorExtra = 0;
105 } 106 }
106 }); 107 });
107 } 108 }
108 }); 109 });
109 } 110 }
110 } 111 }
111 112
src/app/shared/footer/footer.component.html
Diff comments   View file @ 4ed1161
1 <div class="row w-90 mx-auto h-100 justify-content-between bg-white"> 1 <div class="row w-90 mx-auto h-100 justify-content-between bg-white">
2 <div class="col-auto align-self-center px-0 bg-white"> 2 <div class="col-auto align-self-center px-0 bg-white">
3 <div class="btn-effect row mx-0 bg-light" (click)="reducirPantalla()"> 3 <div class="btn-effect row mx-0 bg-light" (click)="reducirPantalla()">
4 <div class="col-auto align-self-center text-primary">REDUCIR PANTALLA</div> 4 <div class="col-auto align-self-center text-primary">ADAPTAR PANTALLA</div>
5 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 5 <div class="col-auto p-0 bg-primary d-none d-sm-block">
6 <img 6 <img
7 draggable="false" 7 draggable="false"
8 ondragstart="return false;" 8 ondragstart="return false;"
9 (contextmenu)="false" 9 (contextmenu)="false"
10 class="p-2 icon-60" 10 class="p-2 icon-60"
11 src="assets/img/iconos-accesibilidad.svg"> 11 src="assets/img/iconos-accesibilidad.svg">
12 </div> 12 </div>
13 </div> 13 </div>
14 </div> 14 </div>
15 <div 15 <div
16 class="btn-effect col-auto align-self-center px-0 bg-white" 16 class="btn-effect col-auto align-self-center px-0 bg-white"
17 (click)="goBack()"> 17 (click)="goBack()">
18 <div class="row mx-0 bg-light"> 18 <div class="row mx-0 bg-light">
19 <div class="col-auto align-self-center text-primary">VOLVER</div> 19 <div class="col-auto align-self-center text-primary">VOLVER</div>
20 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 20 <div class="col-auto p-0 bg-primary d-none d-sm-block">
21 <img 21 <img
22 draggable="false" 22 draggable="false"
23 ondragstart="return false;" 23 ondragstart="return false;"
24 (contextmenu)="false" 24 (contextmenu)="false"
25 class="p-2 icon-40" 25 class="p-2 icon-40"
26 src="assets/img/icono-volver.svg"> 26 src="assets/img/icono-volver.svg">
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 </div> 30 </div>
31 31
src/scss/height-width.scss
Diff comments   View file @ 4ed1161
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