Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit c46216a6bb13c07d8694cf35485d5715f4b110f1

Authored by Benjamin Rodriguez
2 parents 873bc25138 10ec5e48c2
Exists in develop

Merge branch 'develop' of git.focasoftware.com:angular/autoservicio-axion

Showing 8 changed files   Show diff stats
src/app/modules/admin/admin.component.ts
Diff comments   View file @ c46216a
1 import { Component, OnInit, HostListener } from '@angular/core'; 1 import { Component, OnInit, HostListener, OnDestroy } from '@angular/core';
2 import { Router } from '@angular/router'; 2 import { Router } from '@angular/router';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-admin', 5 selector: 'app-admin',
6 templateUrl: './admin.component.html', 6 templateUrl: './admin.component.html',
7 styleUrls: ['./admin.component.scss'] 7 styleUrls: ['./admin.component.scss']
8 }) 8 })
9 9
10 export class AdminComponent implements OnInit { 10 export class AdminComponent implements OnInit, OnDestroy {
11 timerReposo: any; 11 timerReposo: any;
12 12
13 constructor( 13 constructor(
14 private router: Router, 14 private router: Router,
15 ) { } 15 ) { }
16 16
17 ngOnInit() { 17 ngOnInit() {
18 this.startTimeOutInactividad(); 18 this.startTimeOutInactividad();
19 } 19 }
20 20
21 @HostListener('document:click', ['$event']) 21 ngOnDestroy() {
22 22 clearTimeout(this.timerReposo);
23 documentClick(event: MouseEvent) {
24 if (event) {
25 this.restartTimer();
26 }
27 } 23 }
28 24
29 restartTimer() { 25 @HostListener('document:click', ['$event'])
26 documentClick(event: MouseEvent) {
30 clearTimeout(this.timerReposo); 27 clearTimeout(this.timerReposo);
31 this.startTimeOutInactividad(); 28 this.startTimeOutInactividad();
32 } 29 }
33 30
34 startTimeOutInactividad() { 31 startTimeOutInactividad() {
35 this.timerReposo = setTimeout(() => { 32 this.timerReposo = setTimeout(() => {
36 this.router.navigate(['cancelar-compra']); 33 this.router.navigate(['cancelar-compra']);
37 }, 5000); 34 }, 5000);
38 } 35 }
39 36
40 } 37 }
src/app/modules/cancelar-compra/cancelar-compra.component.ts
Diff comments   View file @ c46216a
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit, OnDestroy } from '@angular/core';
2 import { Location } from '@angular/common'; 2 import { Location } from '@angular/common';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { Router } from '@angular/router'; 4 import { Router } from '@angular/router';
5 5
6 @Component({ 6 @Component({
7 selector: 'app-cancelar-compra', 7 selector: 'app-cancelar-compra',
8 templateUrl: './cancelar-compra.component.html', 8 templateUrl: './cancelar-compra.component.html',
9 styleUrls: ['./cancelar-compra.component.scss'] 9 styleUrls: ['./cancelar-compra.component.scss']
10 }) 10 })
11 export class CancelarCompraComponent implements OnInit { 11 export class CancelarCompraComponent implements OnInit, OnDestroy {
12 timer: any;
12 13
13 constructor( 14 constructor(
14 private location: Location, 15 private location: Location,
15 private router: Router, 16 private router: Router,
16 private articuloService: ArticuloService 17 private articuloService: ArticuloService
17 ) { } 18 ) { }
18 19
19 ngOnInit() { 20 ngOnInit() {
20 setTimeout(() => { 21 this.timer = setTimeout(() => {
21 this.limpiarCarritoYvolver(); 22 this.limpiarCarritoYvolver();
22 }, 90000); 23 }, 90000);
23 } 24 }
24 25
26 ngOnDestroy() {
27 clearTimeout(this.timer);
28 }
29
25 volverPreviousPage() { 30 volverPreviousPage() {
26 this.location.back(); 31 this.location.back();
27 } 32 }
28 33
29 limpiarCarritoYvolver() { 34 limpiarCarritoYvolver() {
30 this.articuloService.carrito = []; 35 this.articuloService.carrito = [];
31 this.router.navigate(['/']); 36 this.router.navigate(['/']);
32 } 37 }
33 } 38 }
34 39
src/app/modules/pedidos-salientes/pedidos-salientes.component.html
Diff comments   View file @ c46216a
1 <div class="row mt-2 justify-content-center h-15"> 1 <div class="row mt-2 justify-content-center h-15">
2 <div class="col-3 col-lg-2"> 2 <div class="col-3 col-lg-2">
3 <img 3 <img
4 draggable="false" 4 draggable="false"
5 ondragstart="return false;" 5 ondragstart="return false;"
6 (contextmenu)="false" 6 (contextmenu)="false"
7 class="w-60 h-auto d-block mx-auto" 7 class="w-60 h-auto d-block mx-auto"
8 src="../../../assets/img/logo-spot.svg"> 8 src="../../../assets/img/logo-spot.svg">
9 </div> 9 </div>
10 </div> 10 </div>
11 <div class="row mt-n5 mx-0 justify-content-around h-75"> 11 <div class="row mt-n5 mx-0 justify-content-around h-75">
12 <div class="col-5 col-md-6 col-lg-3 h-100"> 12 <div class="col-5 col-md-6 col-lg-3 h-100">
13 <div class="p-3 bg-white text-center shadow-lg rounded h-100"> 13 <div class="p-3 bg-white text-center shadow-lg rounded h-100">
14 <h5 class="pt-3">ESTAMOS</h5> 14 <h5 class="pt-3">ESTAMOS</h5>
15 <h3 class="font-weight-bold text-secondary">preparando</h3> 15 <h3 class="font-weight-bold text-secondary">preparando</h3>
16 <h5>TU PEDIDO</h5> 16 <h5>TU PEDIDO</h5>
17 <div 17 <div
18 *ngFor="let pedido of pedidosPendientes; let i = index" 18 *ngFor="let pedido of pedidosPendientes; let i = index"
19 [hidden]="i > 3" 19 [hidden]="i > 3"
20 class="font-weight-bold mb-2 text-muted"> 20 class="font-weight-bold mb-2 text-muted">
21 <h1 class="display-4">{{rellenar(pedido.id.toString().slice(1), 2)}}</h1> 21 <h1 class="display-4">{{rellenar(pedido.id.toString().slice(1), 3)}}</h1>
22 </div> 22 </div>
23 </div> 23 </div>
24 </div> 24 </div>
25 <div class="col-5 col-md-6 col-lg-3 h-100"> 25 <div class="col-5 col-md-6 col-lg-3 h-100">
26 <div class="p-3 bg-white shadow-lg rounded text-center h-100"> 26 <div class="p-3 bg-white shadow-lg rounded text-center h-100">
27 <h5 class="pt-3">LISTO PARA</h5> 27 <h5 class="pt-3">LISTO PARA</h5>
28 <h3 class="font-weight-bold text-primary">retirar</h3> 28 <h3 class="font-weight-bold text-primary">retirar</h3>
29 <div *ngIf="pedidoFinalizado.length"> 29 <div *ngIf="pedidoFinalizado.length">
30 <h1 class="display-1 mt-4 text-primary mb-0">{{rellenar(pedidoFinalizado[0].id.toString().slice(1), 2)}}</h1> 30 <h1 class="display-1 mt-4 text-primary mb-0">{{rellenar(pedidoFinalizado[0].id.toString().slice(1), 3)}}</h1>
31 <hr class="line mt-0"> 31 <hr class="line mt-0">
32 </div> 32 </div>
33 <h3 class="font-weight-bold text-info mt-4">¡Que lo disfrutes!</h3> 33 <h3 class="font-weight-bold text-info mt-4">¡Que lo disfrutes!</h3>
34 </div> 34 </div>
35 </div> 35 </div>
36 </div> 36 </div>
37 37
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ c46216a
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/logo-spot.svg"> 46 src="assets/img/logo-spot.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="{{urlImagenes}}{{categoria.path_imagen}}"> 59 src="{{urlImagenes}}{{categoria.path_imagen}}"
60 onerror="this.src='assets/img/image-not-found.jpg'">
60 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 61 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
61 </div> 62 </div>
62 </div> 63 </div>
63 <div class="col-auto btn-effect h-5"> 64 <div class="col-auto btn-effect h-5">
64 <img 65 <img
65 draggable="false" 66 draggable="false"
66 ondragstart="return false;" 67 ondragstart="return false;"
67 (contextmenu)="false" 68 (contextmenu)="false"
68 class="h-100 d-block mx-auto rotate-90" 69 class="h-100 d-block mx-auto rotate-90"
69 src="assets/img/ir-color.svg" 70 src="assets/img/ir-color.svg"
70 (mousedown)="scrollY(templateCategorias, 100)" 71 (mousedown)="scrollY(templateCategorias, 100)"
71 (mouseup)="mouseup()" 72 (mouseup)="mouseup()"
72 (mouseleave)="mouseup()"> 73 (mouseleave)="mouseup()">
73 </div> 74 </div>
74 </div> 75 </div>
75 </div> 76 </div>
76 <!-- LISTA DE ARTICULOS --> 77 <!-- LISTA DE ARTICULOS -->
77 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible"> 78 <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"> 79 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
79 <!-- ARTICULO --> 80 <!-- ARTICULO -->
80 <div 81 <div
81 class="col px-2 my-1 my-md-3 h-auto" 82 class="col px-2 my-1 my-md-3 h-auto"
82 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 83 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
83 <div class="swing-in-top-fwd card h-auto"> 84 <div class="swing-in-top-fwd card h-auto">
84 <div *ngIf="articulo.PRO">
85 <i class="fas fa-piggy-bank"></i>
86 </div>
87 <img 85 <img
88 draggable="false" 86 draggable="false"
89 ondragstart="return false;" 87 ondragstart="return false;"
90 (contextmenu)="false" 88 (contextmenu)="false"
91 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 89 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
92 onerror="this.src='assets/img/image-not-found.jpg'" 90 onerror="this.src='assets/img/image-not-found.jpg'"
93 class="card-img-top h-55 rounded-sm"> 91 class="card-img-top h-55 rounded-sm">
94 <div class="row mx-0 py-1 h-auto justify-content-center"> 92 <div class="row mx-0 py-1 h-auto justify-content-center">
95 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">{{articulo.DetArt}}</p> 93 <p
94 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
95 class="col-12 px-1 h6 h-auto text-center min-h-60">
96 {{articulo.DetArt}}
97 </p>
96 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50"> 98 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
97 <small>{{articulo.DET_LAR}}</small> 99 <small>{{articulo.DET_LAR}}</small>
98 </p> 100 </p>
99 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 101 <div class="col-12 px-1 align-self-end btn-effect h-auto">
100 <div 102 <div
101 [ngClass]="{'bg-secondary': articulo.PRO}" 103 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
102 class="row mx-0 justify-content-between bg-primary badge-pill" 104 class="row mx-0 justify-content-between badge-pill"
103 (click)="elegirArticulo(articulo)"> 105 (click)="elegirArticulo(articulo)">
104 <div class="col px-0 align-self-center text-white text-right"> 106 <div class="col px-0 align-self-center text-white text-right">
105 {{articulo.PreVen | currency}} 107 {{articulo.PreVen | currency}}
106 </div> 108 </div>
107 <div class="col-5 px-0"> 109 <div class="col-5 px-0">
108 <img 110 <img
109 draggable="false" 111 draggable="false"
110 ondragstart="return false;" 112 ondragstart="return false;"
111 (contextmenu)="false" 113 (contextmenu)="false"
112 class="d-block ml-auto py-1 icon-30" 114 class="d-block ml-auto py-1 icon-30"
113 src="assets/img/ir.svg"> 115 src="assets/img/ir.svg">
114 </div> 116 </div>
115 </div> 117 </div>
116 </div> 118 </div>
117 </div> 119 </div>
118 </div> 120 </div>
119 </div> 121 </div>
120 </div> 122 </div>
121 <!-- BOTON VER MAS --> 123 <!-- BOTON VER MAS -->
122 <div class="row mx-0"> 124 <div class="row mx-0">
123 <div 125 <div
124 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 126 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
125 class="col-12 px-0 mb-2"> 127 class="col-12 px-0 mb-2">
126 <button 128 <button
127 (click)="increaseShow()" 129 (click)="increaseShow()"
128 class="btn btn-block btn-outline-primary"> 130 class="btn btn-block btn-outline-primary">
129 Ver Más 131 Ver Más
130 </button> 132 </button>
131 </div> 133 </div>
132 </div> 134 </div>
133 </div> 135 </div>
134 </div> 136 </div>
135 </div> 137 </div>
136 </div> 138 </div>
137 <!-- FOOTER CARRITO DE COMPRAS --> 139 <!-- FOOTER CARRITO DE COMPRAS -->
138 <div class="row w-90 mx-auto h-auto justify-content-center"> 140 <div class="row w-90 mx-auto h-auto justify-content-center">
139 <div class="col-12 h-75 px-0 border border-primary rounded"> 141 <div class="col-12 h-75 px-0 border border-primary rounded">
140 <!-- CABECERA --> 142 <!-- CABECERA -->
141 <div class="row mx-0 h-15 border-bottom border-primary"> 143 <div class="row mx-0 h-15 border-bottom border-primary">
142 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 144 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
143 </div> 145 </div>
144 <!-- CUERPO --> 146 <!-- CUERPO -->
145 <div class="row h-85 mx-0 justify-content-around"> 147 <div class="row h-85 mx-0 justify-content-around">
146 <!-- BOTON SCROLL IZQUIERDA --> 148 <!-- BOTON SCROLL IZQUIERDA -->
147 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 149 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
148 <img 150 <img
149 draggable="false" 151 draggable="false"
150 ondragstart="return false;" 152 ondragstart="return false;"
151 (contextmenu)="false" 153 (contextmenu)="false"
152 class="icon-30 rotate-180-neg" 154 class="icon-30 rotate-180-neg"
153 src="assets/img/ir-fondo-color.svg" 155 src="assets/img/ir-fondo-color.svg"
154 (mousedown)="scrollX(templateCarrito, -100)" 156 (mousedown)="scrollX(templateCarrito, -100)"
155 (mouseup)="mouseup()" 157 (mouseup)="mouseup()"
156 (mouseleave)="mouseup()"> 158 (mouseleave)="mouseup()">
157 </div> 159 </div>
158 <!-- CARRITO --> 160 <!-- CARRITO -->
159 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 161 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
160 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"> 162 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
161 <!-- MENSAJE DE ADVERTENCIA --> 163 <!-- MENSAJE DE ADVERTENCIA -->
162 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 164 <div *ngIf="!articuloService.carrito.length" class="col h-100">
163 <p class="text-center py-5">No hay articulos en el carrito</p> 165 <p class="text-center py-5">No hay articulos en el carrito</p>
164 </div> 166 </div>
165 <!-- ARTICULOS --> 167 <!-- ARTICULOS -->
166 <div 168 <div
167 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 169 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
168 *ngFor="let articulo of articuloService.carrito; let i = index;"> 170 *ngFor="let articulo of articuloService.carrito; let i = index;">
169 <div class="swing-in-top-fwd"> 171 <div class="swing-in-top-fwd">
170 <img 172 <img
171 draggable="false" 173 draggable="false"
172 ondragstart="return false;" 174 ondragstart="return false;"
173 (contextmenu)="false" 175 (contextmenu)="false"
174 class="d-block img-fluid p-2 mx-auto rounded" 176 class="d-block img-fluid p-2 mx-auto rounded"
175 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 177 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
176 onerror="this.src='assets/img/image-not-found.jpg'"> 178 onerror="this.src='assets/img/image-not-found.jpg'">
177 <p class="d-block mt-auto text-center text-primary text-truncate"> 179 <p class="d-block mt-auto text-center text-primary text-truncate">
178 <small>{{articulo.DetArt}}</small> 180 <small>{{articulo.DetArt}}</small>
179 </p> 181 </p>
180 </div> 182 </div>
181 </div> 183 </div>
182 </div> 184 </div>
183 </div> 185 </div>
184 <!-- BOTON SCROLL DERECHA --> 186 <!-- BOTON SCROLL DERECHA -->
185 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 187 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
186 <img 188 <img
187 draggable="false" 189 draggable="false"
188 ondragstart="return false;" 190 ondragstart="return false;"
189 (contextmenu)="false" 191 (contextmenu)="false"
190 class="icon-30" 192 class="icon-30"
191 src="assets/img/ir-fondo-color.svg" 193 src="assets/img/ir-fondo-color.svg"
192 (mousedown)="scrollX(templateCarrito, 100)" 194 (mousedown)="scrollX(templateCarrito, 100)"
193 (mouseup)="mouseup()" 195 (mouseup)="mouseup()"
194 (mouseleave)="mouseup()"> 196 (mouseleave)="mouseup()">
195 </div> 197 </div>
196 </div> 198 </div>
197 </div> 199 </div>
198 <!-- VER CARRITO Y TOTAL--> 200 <!-- VER CARRITO Y TOTAL-->
199 <div 201 <div
200 class="col-auto p-0 mt-2 ml-auto h-20" 202 class="col-auto p-0 mt-2 ml-auto h-20"
201 *ngIf="articuloService.carrito.length"> 203 *ngIf="articuloService.carrito.length">
202 <div 204 <div
203 class="btn-effect col-auto align-self-center px-0 bg-white" 205 class="btn-effect col-auto align-self-center px-0 bg-white"
204 [routerLink]="['/carrito']"> 206 [routerLink]="['/carrito']">
205 <div class="row justify-content-between mx-0"> 207 <div class="row justify-content-between mx-0">
206 <div class="col-auto align-self-center text-primary">TOTAL</div> 208 <div class="col-auto align-self-center text-primary">TOTAL</div>
207 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total"> 209 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
208 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 210 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
209 </div> 211 </div>
210 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div> 212 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
211 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 213 <div class="col-auto p-0 bg-primary d-none d-sm-block">
212 <img 214 <img
213 draggable="false" 215 draggable="false"
214 ondragstart="return false;" 216 ondragstart="return false;"
215 (contextmenu)="false" 217 (contextmenu)="false"
216 class="p-2 icon-40" 218 class="p-2 icon-40"
217 src="assets/img/carrito.svg"> 219 src="assets/img/carrito.svg">
218 </div> 220 </div>
219 </div> 221 </div>
220 </div> 222 </div>
221 </div> 223 </div>
222 224
223 </div> 225 </div>
224 </div> 226 </div>
src/app/modules/splash-screen/splash-screen.component.ts
Diff comments   View file @ c46216a
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 2
3 @Component({ 3 @Component({
4 selector: 'app-splash-screen', 4 selector: 'app-splash-screen',
5 templateUrl: './splash-screen.component.html', 5 templateUrl: './splash-screen.component.html',
6 styleUrls: ['./splash-screen.component.scss'] 6 styleUrls: ['./splash-screen.component.scss']
7 }) 7 })
8 export class SplashScreenComponent implements OnInit { 8 export class SplashScreenComponent implements OnInit {
9 timerSplashScreen = 2000; 9 timerSplashScreen = 2000;
10 showSplashScreen = true; 10 showSplashScreen = true;
11 textWelcome = 'BIENVENIDO A SPOT!'; 11 textWelcome = 'BIENVENIDO A SPOT!';
12 textComoEstas = '¿cómo estás?'; 12 textComoEstas = '¿cómo estás?';
13 textInvitamos = 'TE INVITAMOS A HACER'; 13 textInvitamos = 'TE INVITAMOS A HACER';
14 textTuPedido = 'tu pedido acá'; 14 textTuPedido = 'tu pedido acá';
15 15
16 constructor() { } 16 constructor() { }
17 17
18 ngOnInit() { 18 ngOnInit() {
19 localStorage.clear();
19 setTimeout(() => { 20 setTimeout(() => {
20 this.showSplashScreen = false; 21 this.showSplashScreen = false;
21 }, this.timerSplashScreen); 22 }, this.timerSplashScreen);
22 } 23 }
23 24
24 } 25 }
25 26
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ c46216a
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 if (articulo.PRO) break;
48 articuloCarrito.cantidad++; 47 articuloCarrito.cantidad++;
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 }) 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 }
src/app/shared/promocion/promocion.component.html
Diff comments   View file @ c46216a
1 <div class="modal-header bg-primary rounded-top"> 1 <div class="modal-header px-0 bg-primary rounded-top">
2 <div class="col-12"> 2 <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length">
3 <div class="row justify-content-between" *ngIf="articulosPromo.length"> 3 <div class="col-8">
4 <div> 4 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
5 <h3 class="ml-2 text-white mt-2">{{articulosPromo[0].DetArt}}</h3> 5 </div>
6 </div> 6 <div class="col-4 align-self-center">
7 <div> 7 <div
8 <div 8 class="row mx-0 justify-content-between bg-white badge-pill"
9 class="row mr-3 justify-content-between bg-white badge-pill" 9 (click)="elegirPromo(articulosPromo[0])">
10 (click)="elegirPromo(articulosPromo[0])"> 10 <div class="col px-0 align-self-center text-primary">
11 <div class="col px-0 align-self-center text-primary"> 11 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
12 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> 12 </div>
13 </div> 13 <div class="col-3 px-0">
14 <div class="col-3 px-0"> 14 <img
15 <img 15 draggable="false"
16 draggable="false" 16 ondragstart="return false;"
17 ondragstart="return false;" 17 (contextmenu)="false"
18 (contextmenu)="false" 18 class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
19 class="d-block ml-auto py-1 icon-30 mr-2 pt-2" 19 src="assets/img/ir-color.svg">
20 src="assets/img/ir-color.svg">
21 </div>
22 </div> 20 </div>
23 </div> 21 </div>
24 </div> 22 </div>
25 </div> 23 </div>
26 </div> 24 </div>
27 <div class="modal-body bg-primary rounded-bottom" *ngIf="articulosPromo.length"> 25 <div class="modal-body px-0 bg-primary rounded-bottom" *ngIf="articulosPromo.length">
28 <div class="row"> 26 <div class="row mx-0 w-100">
29 <div class="col-9"> 27 <div class="col-9">
30 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p> 28 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
31 <h1 class="text-white mb-4">en un combo?</h1> 29 <h1 class="text-white mb-4">en un combo?</h1>
30 </div>
31 <div class="col-3 rounded-circle">
32 <img
33 draggable="false"
34 ondragstart="return false;"
35 (contextmenu)="false"
36 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
37 onerror="this.src='assets/img/image-not-found.jpg'"
38 class="card-img-top img-fluid rounded-circle">
39 </div>
40 </div>
41 <div class="row mx-0 lista-promociones scroll-y-visible">
42 <div class="col-12">
32 <div *ngFor="let promo of promociones"> 43 <div *ngFor="let promo of promociones">
33 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)"> 44 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
34 <div class="row mx-0 justify-content-between"> 45 <div class="d-flex">
35 <p class="text-truncate"><small>{{promo.DetArt}}</small></p> 46 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
36 <p class="font-weight-bold">{{promo.PreVen | currency}}</p> 47 <p class="font-weight-bold my-auto pr-2">
48 <span>{{promo.PreVen | currency}}</span>
49 </p>
50 <img
51 draggable="false"
52 ondragstart="return false;"
53 (contextmenu)="false"
54 class="d-block icon-30 py-1"
55 src="assets/img/ir-color.svg">
37 </div> 56 </div>
38 </div> 57 </div>
39 </div> 58 </div>
40 </div> 59 </div>
41 <div class="col-3 rounded-circle">
src/app/shared/promocion/promocion.component.scss
Diff comments   View file @ c46216a
1 .lista-promociones {
2 min-height: auto;
3 max-height: 25vh;
4 }
5