Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 51a6c068d5d0114fe99c070d87e1c57d7a6d94fd

Authored by Benjamin Rodriguez
1 parent c371b8831f
Exists in develop

modal promociones

Showing 6 changed files with 107 additions and 14 deletions   Show diff stats
src/app/app.module.ts
Diff comments   View file @ 51a6c06
1 import { BrowserModule } from '@angular/platform-browser'; 1 import { BrowserModule } from '@angular/platform-browser';
2 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 2 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
3 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { HttpClientModule } from '@angular/common/http'; 5 import { HttpClientModule } from '@angular/common/http';
6 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 6 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
7 import { SplitPipe } from './pipes/split.pipe'; 7 import { SplitPipe } from './pipes/split.pipe';
8 import { AppComponent } from './app.component'; 8 import { AppComponent } from './app.component';
9 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 9 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
10 import { AdminComponent } from './modules/admin/admin.component'; 10 import { AdminComponent } from './modules/admin/admin.component';
11 import { FooterComponent } from './shared/footer/footer.component'; 11 import { FooterComponent } from './shared/footer/footer.component';
12 import { SharedModule } from './modules/shared/shared.module'; 12 import { SharedModule } from './modules/shared/shared.module';
13 import { ModalModule } from 'ngx-bootstrap/modal';
13 14
14 @NgModule({ 15 @NgModule({
15 declarations: [ 16 declarations: [
16 AppComponent, 17 AppComponent,
17 SplashScreenComponent, 18 SplashScreenComponent,
18 SplitPipe, 19 SplitPipe,
19 AdminComponent, 20 AdminComponent,
20 FooterComponent, 21 FooterComponent,
21 ], 22 ],
22 imports: [ 23 imports: [
23 BrowserModule, 24 BrowserModule,
24 BrowserAnimationsModule, 25 BrowserAnimationsModule,
25 AppRoutingModule, 26 AppRoutingModule,
26 HttpClientModule, 27 HttpClientModule,
27 FormsModule, 28 FormsModule,
29 ModalModule.forRoot(),
28 ReactiveFormsModule, 30 ReactiveFormsModule,
29 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), 31 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
30 SharedModule.forRoot(), 32 SharedModule.forRoot(),
31 ], 33 ],
32 bootstrap: [AppComponent] 34 bootstrap: [AppComponent]
33 }) 35 })
34 export class AppModule { } 36 export class AppModule { }
35 37
src/app/modules/admin/admin.component.ts
Diff comments   View file @ 51a6c06
1 import { Component, OnInit, HostListener } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { Router } from '@angular/router'; 2 import { Router } from '@angular/router';
3 import { BsModalRef } from 'ngx-bootstrap/modal';
3 4
4 @Component({ 5 @Component({
5 selector: 'app-admin', 6 selector: 'app-admin',
6 templateUrl: './admin.component.html', 7 templateUrl: './admin.component.html',
7 styleUrls: ['./admin.component.scss'] 8 styleUrls: ['./admin.component.scss']
8 }) 9 })
9 10
10 export class AdminComponent implements OnInit { 11 export class AdminComponent implements OnInit {
11 timerReposo: any; 12 timerReposo: any;
12 13
13 constructor( 14 constructor(
14 private router: Router, 15 private router: Router,
16 // private modalRef: BsModalRef
15 ) { } 17 ) { }
16 18
17 ngOnInit() { 19 ngOnInit() {
18 this.startTimeOutInactividad(); 20 // this.startTimeOutInactividad();
19 } 21 }
20 22
21 @HostListener('document:click', ['$event']) 23 @HostListener('document:click', ['$event'])
22 24
23 documentClick(event: MouseEvent) { 25 // documentClick(event: MouseEvent) {
24 if (event) { 26 // if (event) {
25 this.restartTimer(); 27 // this.restartTimer();
26 } 28 // }
27 } 29 // }
28 30
29 restartTimer() { 31 restartTimer() {
30 clearTimeout(this.timerReposo); 32 clearTimeout(this.timerReposo);
31 this.startTimeOutInactividad(); 33 this.startTimeOutInactividad();
32 } 34 }
33 35
34 startTimeOutInactividad() { 36 startTimeOutInactividad() {
35 this.timerReposo = setTimeout(() => { 37 this.timerReposo = setTimeout(() => {
38 // this.modalRef.hide();
36 this.router.navigate(['cancelar-compra']); 39 this.router.navigate(['cancelar-compra']);
37 }, 90000); 40 }, 90000);
38 } 41 }
39 42
40 } 43 }
41 44
src/app/modules/cancelar-compra/cancelar-compra.component.ts
Diff comments   View file @ 51a6c06
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } 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 {
12 12
13 constructor( 13 constructor(
14 private location: Location, 14 private location: Location,
15 private router: Router, 15 private router: Router,
16 private articuloService: ArticuloService 16 private articuloService: ArticuloService
17 ) { } 17 ) { }
18 18
19 ngOnInit() { 19 ngOnInit() {
20 setTimeout(() => { 20 setTimeout(() => {
21 this.limpiarCarritoYvolver(); 21 this.limpiarCarritoYvolver();
22 }, 90000); 22 }, 90000);
23 } 23 }
24 24
25 volverPreviousPage() { 25 volverPreviousPage() {
26 this.location.back(); 26 this.location.back();
27 } 27 }
28 28
29 limpiarCarritoYvolver() { 29 limpiarCarritoYvolver() {
30 this.articuloService.carrito = undefined; 30 this.articuloService.carrito = [];
31 this.router.navigate(['/']); 31 this.router.navigate(['/']);
32 } 32 }
33 } 33 }
34 34
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 51a6c06
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="row mx-0 h-80 align-items-end"> 5 <div class="row mx-0 h-80 align-items-end">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 <!-- CUERPO --> 14 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-70"> 15 <div class="row w-100 mr-4 h-70">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22 <div class="col-auto btn-effect h-5"> 22 <div class="col-auto btn-effect h-5">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -100)" 29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
37 <div 37 <div
38 class="row mx-4 mb-2 h-32 justify-content-center tab" 38 class="row mx-4 mb-2 h-32 justify-content-center tab"
39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }" 39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
40 (click)="selectCategoria(-1, 0)"> 40 (click)="selectCategoria(-1, 0)">
41 <img 41 <img
42 draggable="false" 42 draggable="false"
43 ondragstart="return false;" 43 ondragstart="return false;"
44 (contextmenu)="false" 44 (contextmenu)="false"
45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
46 src="assets/img/ir-color.svg"> 46 src="assets/img/ir-color.svg">
47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small> 47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
48 </div> 48 </div>
49 <div 49 <div
50 class="row mx-4 mb-2 h-32 justify-content-center tab" 50 class="row mx-4 mb-2 h-32 justify-content-center tab"
51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
52 (click)="selectCategoria(i, categoria.id)" 52 (click)="selectCategoria(i, categoria.id)"
53 *ngFor="let categoria of categorias; let i = index;"> 53 *ngFor="let categoria of categorias; let i = index;">
54 <img 54 <img
55 draggable="false" 55 draggable="false"
56 ondragstart="return false;" 56 ondragstart="return false;"
57 (contextmenu)="false" 57 (contextmenu)="false"
58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
59 src="assets/img/ir-color.svg"> 59 src="assets/img/ir-color.svg">
60 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 60 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
61 </div> 61 </div>
62 </div> 62 </div>
63 <div class="col-auto btn-effect h-5"> 63 <div class="col-auto btn-effect h-5">
64 <img 64 <img
65 draggable="false" 65 draggable="false"
66 ondragstart="return false;" 66 ondragstart="return false;"
67 (contextmenu)="false" 67 (contextmenu)="false"
68 class="h-100 d-block mx-auto rotate-90" 68 class="h-100 d-block mx-auto rotate-90"
69 src="assets/img/ir-color.svg" 69 src="assets/img/ir-color.svg"
70 (mousedown)="scrollY(templateCategorias, 100)" 70 (mousedown)="scrollY(templateCategorias, 100)"
71 (mouseup)="mouseup()" 71 (mouseup)="mouseup()"
72 (mouseleave)="mouseup()"> 72 (mouseleave)="mouseup()">
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 <!-- LISTA DE ARTICULOS --> 76 <!-- LISTA DE ARTICULOS -->
77 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible"> 77 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
78 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 78 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
79 <!-- ARTICULO --> 79 <!-- ARTICULO -->
80 <div 80 <div
81 class="col px-2 my-1 my-md-3 h-auto" 81 class="col px-2 my-1 my-md-3 h-auto"
82 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 82 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
83 <div class="swing-in-top-fwd card h-auto"> 83 <div class="swing-in-top-fwd card h-auto">
84 <div *ngIf="articulo.PRO">
85 <i class="fas fa-piggy-bank"></i>
86 </div>
84 <img 87 <img
85 draggable="false" 88 draggable="false"
86 ondragstart="return false;" 89 ondragstart="return false;"
87 (contextmenu)="false" 90 (contextmenu)="false"
88 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 91 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
89 onerror="this.src='assets/img/image-not-found.jpg'" 92 onerror="this.src='assets/img/image-not-found.jpg'"
90 class="card-img-top h-55 rounded-sm"> 93 class="card-img-top h-55 rounded-sm">
91 <div class="row mx-0 py-1 h-auto justify-content-center"> 94 <div class="row mx-0 py-1 h-auto justify-content-center">
92 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">{{articulo.DetArt}}</p> 95 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">{{articulo.DetArt}}</p>
93 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50"> 96 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
94 <small>{{articulo.DET_LAR}}</small> 97 <small>{{articulo.DET_LAR}}</small>
95 </p> 98 </p>
96 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 99 <div class="col-12 px-1 align-self-end btn-effect h-auto">
97 <div 100 <div
98 [ngClass]="{'bg-secondary': articulo.promo}" 101 [ngClass]="{'bg-secondary': articulo.promo}"
99 class="row mx-0 justify-content-between bg-primary badge-pill" 102 class="row mx-0 justify-content-between bg-primary badge-pill"
100 (click)="elegirArticulo(articulo)"> 103 (click)="!articulo.FPP ? elegirArticulo(articulo) : openModalPromos(articulo, templatePromos)">
101 <div class="col px-0 align-self-center text-white text-right"> 104 <div class="col px-0 align-self-center text-white text-right">
102 {{articulo.PreVen | currency}} 105 {{articulo.PreVen | currency}}
103 </div> 106 </div>
104 <div class="col-5 px-0"> 107 <div class="col-5 px-0">
105 <img 108 <img
106 draggable="false" 109 draggable="false"
107 ondragstart="return false;" 110 ondragstart="return false;"
108 (contextmenu)="false" 111 (contextmenu)="false"
109 class="d-block ml-auto py-1 icon-30" 112 class="d-block ml-auto py-1 icon-30"
110 src="assets/img/ir.svg"> 113 src="assets/img/ir.svg">
111 </div> 114 </div>
112 </div> 115 </div>
113 </div> 116 </div>
114 </div> 117 </div>
115 </div> 118 </div>
116 </div> 119 </div>
117 </div> 120 </div>
118 <!-- BOTON VER MAS --> 121 <!-- BOTON VER MAS -->
119 <div class="row mx-0"> 122 <div class="row mx-0">
120 <div 123 <div
121 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 124 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
122 class="col-12 px-0 mb-2"> 125 class="col-12 px-0 mb-2">
123 <button 126 <button
124 (click)="increaseShow()" 127 (click)="increaseShow()"
125 class="btn btn-block btn-outline-primary"> 128 class="btn btn-block btn-outline-primary">
126 Ver Más 129 Ver Más
127 </button> 130 </button>
128 </div> 131 </div>
129 </div> 132 </div>
130 </div> 133 </div>
131 </div> 134 </div>
132 </div> 135 </div>
133 </div> 136 </div>
134 <!-- FOOTER CARRITO DE COMPRAS --> 137 <!-- FOOTER CARRITO DE COMPRAS -->
135 <div class="row w-90 mx-auto h-auto justify-content-center"> 138 <div class="row w-90 mx-auto h-auto justify-content-center">
136 <div class="col-12 h-75 px-0 border border-primary rounded"> 139 <div class="col-12 h-75 px-0 border border-primary rounded">
137 <!-- CABECERA --> 140 <!-- CABECERA -->
138 <div class="row mx-0 h-15 border-bottom border-primary"> 141 <div class="row mx-0 h-15 border-bottom border-primary">
139 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 142 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
140 </div> 143 </div>
141 <!-- CUERPO --> 144 <!-- CUERPO -->
142 <div class="row h-85 mx-0 justify-content-around"> 145 <div class="row h-85 mx-0 justify-content-around">
143 <!-- BOTON SCROLL IZQUIERDA --> 146 <!-- BOTON SCROLL IZQUIERDA -->
144 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 147 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
145 <img 148 <img
146 draggable="false" 149 draggable="false"
147 ondragstart="return false;" 150 ondragstart="return false;"
148 (contextmenu)="false" 151 (contextmenu)="false"
149 class="icon-30 rotate-180-neg" 152 class="icon-30 rotate-180-neg"
150 src="assets/img/ir-fondo-color.svg" 153 src="assets/img/ir-fondo-color.svg"
151 (mousedown)="scrollX(templateCarrito, -100)" 154 (mousedown)="scrollX(templateCarrito, -100)"
152 (mouseup)="mouseup()" 155 (mouseup)="mouseup()"
153 (mouseleave)="mouseup()"> 156 (mouseleave)="mouseup()">
154 </div> 157 </div>
155 <!-- CARRITO --> 158 <!-- CARRITO -->
156 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 159 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
157 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"> 160 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
158 <!-- MENSAJE DE ADVERTENCIA --> 161 <!-- MENSAJE DE ADVERTENCIA -->
159 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 162 <div *ngIf="!articuloService.carrito.length" class="col h-100">
160 <p class="text-center py-5">No hay articulos en el carrito</p> 163 <p class="text-center py-5">No hay articulos en el carrito</p>
161 </div> 164 </div>
162 <!-- ARTICULOS --> 165 <!-- ARTICULOS -->
163 <div 166 <div
164 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 167 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
165 *ngFor="let articulo of articuloService.carrito; let i = index;"> 168 *ngFor="let articulo of articuloService.carrito; let i = index;">
166 <div class="swing-in-top-fwd"> 169 <div class="swing-in-top-fwd">
167 <img 170 <img
168 draggable="false" 171 draggable="false"
169 ondragstart="return false;" 172 ondragstart="return false;"
170 (contextmenu)="false" 173 (contextmenu)="false"
171 class="d-block img-fluid p-2 mx-auto rounded" 174 class="d-block img-fluid p-2 mx-auto rounded"
172 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 175 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
173 onerror="this.src='assets/img/image-not-found.jpg'"> 176 onerror="this.src='assets/img/image-not-found.jpg'">
174 <p class="d-block mt-auto text-center text-primary text-truncate"> 177 <p class="d-block mt-auto text-center text-primary text-truncate">
175 <small>{{articulo.DetArt}}</small> 178 <small>{{articulo.DetArt}}</small>
176 </p> 179 </p>
177 </div> 180 </div>
178 </div> 181 </div>
179 </div> 182 </div>
180 </div> 183 </div>
181 <!-- BOTON SCROLL DERECHA --> 184 <!-- BOTON SCROLL DERECHA -->
182 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 185 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
183 <img 186 <img
184 draggable="false" 187 draggable="false"
185 ondragstart="return false;" 188 ondragstart="return false;"
186 (contextmenu)="false" 189 (contextmenu)="false"
187 class="icon-30" 190 class="icon-30"
188 src="assets/img/ir-fondo-color.svg" 191 src="assets/img/ir-fondo-color.svg"
189 (mousedown)="scrollX(templateCarrito, 100)" 192 (mousedown)="scrollX(templateCarrito, 100)"
190 (mouseup)="mouseup()" 193 (mouseup)="mouseup()"
191 (mouseleave)="mouseup()"> 194 (mouseleave)="mouseup()">
192 </div> 195 </div>
193 </div> 196 </div>
194 </div> 197 </div>
195 <!-- VER CARRITO Y TOTAL--> 198 <!-- VER CARRITO Y TOTAL-->
196 <div 199 <div
197 class="col-auto p-0 mt-2 ml-auto h-20" 200 class="col-auto p-0 mt-2 ml-auto h-20"
198 *ngIf="articuloService.carrito.length"> 201 *ngIf="articuloService.carrito.length">
199 <div 202 <div
200 class="btn-effect col-auto align-self-center px-0 bg-white" 203 class="btn-effect col-auto align-self-center px-0 bg-white"
201 [routerLink]="['/carrito']"> 204 [routerLink]="['/carrito']">
202 <div class="row justify-content-between mx-0"> 205 <div class="row justify-content-between mx-0">
203 <div class="col-auto align-self-center text-primary">TOTAL</div> 206 <div class="col-auto align-self-center text-primary">TOTAL</div>
204 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total"> 207 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
205 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 208 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
206 </div> 209 </div>
207 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div> 210 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
208 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 211 <div class="col-auto p-0 bg-primary d-none d-sm-block">
209 <img 212 <img
210 draggable="false" 213 draggable="false"
211 ondragstart="return false;" 214 ondragstart="return false;"
212 (contextmenu)="false" 215 (contextmenu)="false"
213 class="p-2 icon-40" 216 class="p-2 icon-40"
214 src="assets/img/carrito.svg"> 217 src="assets/img/carrito.svg">
215 </div> 218 </div>
216 </div> 219 </div>
217 </div> 220 </div>
218 </div> 221 </div>
219 222
220 </div> 223 </div>
221 </div> 224 </div>
222 225
223 </div> 226 </div>
227
228 <ng-template #templatePromos>
229 <div class="modal-header bg-primary">
230 <div class="col-12">
231 <div class="row justify-content-between" *ngIf="articuloPromo.length">
232 <div>
233 <h3 class="ml-2 text-white mt-2">{{articuloPromo[0].DetArt}}</h3>
234 </div>
235 <div class="row"(click)="elegirArticulo(articuloPromo[0]); modalRef.hide()">
236 <div
237 class="row mr-3 justify-content-between bg-white badge-pill">
238 <div class="col px-0 align-self-center text-primary">
239 <p class="font-weight-bold">{{articuloPromo[0].PreVen | currency}}</p>
240 </div>
241 <div class="col-3 px-0">
242 <img
243 draggable="false"
244 ondragstart="return false;"
245 (contextmenu)="false"
246 class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
247 src="assets/img/ir-color.svg">
248 </div>
249 </div>
250 </div>
251 </div>
252 <div class="col-12 border-bottom mt-3 mx-n3"></div>
253 </div>
254 </div>
255 <div class="modal-body bg-primary" *ngIf="articuloPromo.length">
256 <div class="row">
257 <div class="col-9">
258 <p class="text-white"><small>¿TE GUSTARIA LLEVAR ESTE ARTÍCULO</small></p>
259 <h1 class="text-white mb-4">en un combo?</h1>
260 <div *ngFor="let promo of promociones">
261 <div class="mx-0 bg-white badge-pill text-primary" (click)="elegirArticulo(promo); modalRef.hide()">
262 <div class="row justify-content-between">
263 <p class="ml-4 text-truncate">{{promo.DetArt}}</p>
264 <p class="mr-4 font-weight-bold">{{promo.PreVen | currency}}</p>
265 </div>
266 </div>
267 </div>
268 </div>
269 <div class="col-3 rounded-circle">
270 <img
271 draggable="false"
272 ondragstart="return false;"
273 (contextmenu)="false"
274 src="{{urlImagenes}}{{articuloPromo[0].imagenes[0].imagen}}"
275 onerror="this.src='assets/img/image-not-found.jpg'"
276 class="card-img-top h-90 w-90 rounded-circle">
277 </div>
278 </div>
279 </div>
280 </ng-template>
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 51a6c06
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit, TemplateRef } from '@angular/core';
2 import { BsModalRef } from 'ngx-bootstrap/modal'; 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { IArticulo } from 'src/app/interfaces/IArticulo'; 4 import { IArticulo } from 'src/app/interfaces/IArticulo';
5 import { APP_SETTINGS } from 'src/etc/AppSettings'; 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 import { ICategoria } from 'src/app/interfaces/ICategoria'; 6 import { ICategoria } from 'src/app/interfaces/ICategoria';
7 import { CategoriaService } from 'src/app/services/categoria/categoria.service'; 7 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
8 import { PromocionService } from 'src/app/services/promocion/promocion.service';
8 9
9 @Component({ 10 @Component({
10 selector: 'app-seleccion-articulos', 11 selector: 'app-seleccion-articulos',
11 templateUrl: './seleccion-articulos.component.html', 12 templateUrl: './seleccion-articulos.component.html',
12 styleUrls: ['./seleccion-articulos.component.scss'] 13 styleUrls: ['./seleccion-articulos.component.scss']
13 }) 14 })
14 export class SeleccionArticulosComponent implements OnInit { 15 export class SeleccionArticulosComponent implements OnInit {
15 showSpinner = true; 16 showSpinner = true;
16 timeoutHandler: any; 17 timeoutHandler: any;
17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 18 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
18 articulos: IArticulo[] = []; 19 articulos: IArticulo[] = [];
19 auxArticulos: IArticulo[] = []; 20 auxArticulos: IArticulo[] = [];
20 showQuantity = 100; 21 showQuantity = 100;
21 queMostrar = 'todos'; 22 queMostrar = 'todos';
22 categoriaActive: number = null; 23 categoriaActive: number = null;
23 categorias: ICategoria[] = []; 24 categorias: ICategoria[] = [];
24 searchTerm = ''; 25 searchTerm = '';
25 ordenandoByVendidos = true; 26 ordenandoByVendidos = true;
26 allActive = true; 27 allActive = true;
27 modalRef: BsModalRef; 28 modalRef: BsModalRef;
28 total: number = 0; 29 total: number = 0;
30 articuloPromo: IArticulo[] = [];
31 promociones: IArticulo[] = [];
29 32
30 constructor( 33 constructor(
31 public articuloService: ArticuloService, 34 public articuloService: ArticuloService,
32 private categoriaService: CategoriaService, 35 private categoriaService: CategoriaService,
36 private modalService: BsModalService,
37 private promocionService: PromocionService
33 ) { } 38 ) { }
34 39
35 ngOnInit() { 40 ngOnInit() {
36 this.getCategorias(); 41 this.getCategorias();
37 } 42 }
38 43
39 getCategorias() { 44 getCategorias() {
40 this.categoriaService.getCategorias() 45 this.categoriaService.getCategorias()
41 .subscribe((categorias: ICategoria[]) => { 46 .subscribe((categorias: ICategoria[]) => {
42 switch (this.queMostrar) { 47 switch (this.queMostrar) {
43 case 'todos': 48 case 'todos':
44 this.categorias = categorias; 49 this.categorias = categorias;
45 this.categoriaActive = 0; 50 this.categoriaActive = 0;
46 break; 51 break;
47 case 'promociones': 52 case 'promociones':
48 this.categorias = categorias; 53 this.categorias = categorias;
49 this.categoriaActive = 19; 54 this.categoriaActive = 19;
50 break; 55 break;
51 case 'ordenar': 56 case 'ordenar':
52 this.categorias = categorias.filter((categoria: ICategoria) => { 57 this.categorias = categorias.filter((categoria: ICategoria) => {
53 return categoria.ES_PEDIDO; 58 return categoria.ES_PEDIDO;
54 }); 59 });
55 this.categoriaActive = 4; 60 this.categoriaActive = 4;
56 break; 61 break;
57 default: 62 default:
58 this.categorias = categorias; 63 this.categorias = categorias;
59 this.categoriaActive = 0; 64 this.categoriaActive = 0;
60 break; 65 break;
61 } 66 }
62 !localStorage.getItem('articulos') ? 67 !localStorage.getItem('articulos') ?
63 this.getProductos() : 68 this.getProductos() :
64 this.setProductos(); 69 this.setProductos();
65 }); 70 });
66 } 71 }
67 72
68 getProductos() { 73 getProductos() {
69 this.articuloService.getAll() 74 this.articuloService.getAll()
70 .subscribe((result: IArticulo[]) => { 75 .subscribe((result: IArticulo[]) => {
71 this.articuloService.setArticulosSinImagen(result); 76 this.articuloService.setArticulosSinImagen(result);
72 if (this.queMostrar === 'ordenar') { 77 if (this.queMostrar === 'ordenar') {
73 this.categorias.forEach((categoria: ICategoria) => { 78 this.categorias.forEach((categoria: ICategoria) => {
74 const tempArticulos = result.filter((articulo: IArticulo) => { 79 const tempArticulos = result.filter((articulo: IArticulo) => {
75 return articulo.categoria_selfservice === categoria.id; 80 return articulo.categoria_selfservice === categoria.id;
76 }); 81 });
77 result = tempArticulos; 82 result = tempArticulos;
78 }); 83 });
79 } 84 }
80 localStorage.setItem('articulos', JSON.stringify(result)); 85 localStorage.setItem('articulos', JSON.stringify(result));
81 this.setProductos(); 86 this.setProductos();
82 }, (error) => { 87 }, (error) => {
83 this.showSpinner = false; 88 this.showSpinner = false;
84 console.error(error); 89 console.error(error);
85 }); 90 });
86 } 91 }
87 92
88 setProductos() { 93 setProductos() {
89 this.articulos = JSON.parse(localStorage.getItem('articulos')); 94 this.articulos = JSON.parse(localStorage.getItem('articulos'));
90 this.filterItems(); 95 this.filterItems();
91 } 96 }
92 97
93 filterItems() { 98 filterItems() {
94 if (this.categoriaActive === 0) { 99 if (this.categoriaActive === 0) {
95 this.auxArticulos = this.articulos; 100 this.auxArticulos = this.articulos;
96 return; 101 return;
97 } 102 }
98 this.auxArticulos = this.articulos.filter(x => { 103 this.auxArticulos = this.articulos.filter(x => {
99 return x.categoria_selfservice === this.categoriaActive; 104 return x.categoria_selfservice === this.categoriaActive;
100 }); 105 });
101 this.ordenar(); 106 this.ordenar();
102 } 107 }
103 108
104 ordenar() { 109 ordenar() {
105 if (this.ordenandoByVendidos) { 110 if (this.ordenandoByVendidos) {
106 this.auxArticulos.sort((a, b) => { 111 this.auxArticulos.sort((a, b) => {
107 return b.cantidadVendida - a.cantidadVendida; 112 return b.cantidadVendida - a.cantidadVendida;
108 }); 113 });
109 } 114 }
110 } 115 }
111 116
112 selectCategoria(index: number, idCategoria?: number) { 117 selectCategoria(index: number, idCategoria?: number) {
113 if (this.categoriaActive === idCategoria) return; 118 if (this.categoriaActive === idCategoria) return;
114 this.categoriaActive = idCategoria; 119 this.categoriaActive = idCategoria;
115 this.allActive = idCategoria === 0 ? true : false; 120 this.allActive = idCategoria === 0 ? true : false;
116 this.categorias.forEach((categoria, i) => { 121 this.categorias.forEach((categoria, i) => {
117 categoria.selected = index === i ? true : false; 122 categoria.selected = index === i ? true : false;
118 }); 123 });
119 this.filterItems(); 124 this.filterItems();
120 } 125 }
121 126
122 elegirArticulo(articulo: IArticulo) { 127 elegirArticulo(articulo: IArticulo) {
128 console.log(this.articuloService.carrito)
123 this.articuloService.getById(articulo.id) 129 this.articuloService.getById(articulo.id)
124 .subscribe((res: IArticulo) => { 130 .subscribe((res: IArticulo) => {
125 res.cantidad = 1; 131 res.cantidad = 1;
126 this.articuloService.setArticulo(res); 132 this.articuloService.setArticulo(res);
127 }, err => console.error(err)); 133 }, err => console.error(err));
128 } 134 }
129 135
136 openModalPromos(articulo: IArticulo, templatePromos: TemplateRef<any>) {
137 this.articuloService.getById(articulo.id)
138 .subscribe((res: IArticulo) => {
139 this.articuloPromo[0] = res;
140 this.getPromociones();
141 }, err => console.error(err));
142 this.modalRef = this.modalService.show(templatePromos, { class: 'custom-modal modal-dialog-centered', backdrop: 'static' });
143 }
144
145 getPromociones() {
146 var sector = this.articuloPromo[0].CodSec;
147 var codigo = this.articuloPromo[0].CodArt;
148 this.promocionService.getPromociones(sector, codigo)
149 .subscribe((res: IArticulo[]) => {
150 this.promociones = res;
151 }, error => { console.error(error); })
152 }
153
130 increaseShow() { 154 increaseShow() {
131 this.showQuantity += 100; 155 this.showQuantity += 100;
132 } 156 }
133 157
134 mouseup() { 158 mouseup() {
135 if (!this.timeoutHandler) return; 159 if (!this.timeoutHandler) return;
136 clearInterval(this.timeoutHandler); 160 clearInterval(this.timeoutHandler);
137 } 161 }
138 162
139 scrollY(el: HTMLElement, value) { 163 scrollY(el: HTMLElement, value) {
140 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 164 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
141 this.timeoutHandler = setInterval(() => { 165 this.timeoutHandler = setInterval(() => {
142 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 166 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
143 }, 500); 167 }, 500);
144 } 168 }
145 169
146 scrollX(el: HTMLElement, value) { 170 scrollX(el: HTMLElement, value) {
147 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 171 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
148 this.timeoutHandler = setInterval(() => { 172 this.timeoutHandler = setInterval(() => {
149 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 173 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
150 }, 500); 174 }, 500);
151 } 175 }
152 } 176 }
src/scss/styles-bootstrap.scss
Diff comments   View file @ 51a6c06
1 @import "node_modules/bootstrap/scss/functions"; 1 @import "node_modules/bootstrap/scss/functions";
2 @import "node_modules/bootstrap/scss/variables"; 2 @import "node_modules/bootstrap/scss/variables";
3 @import "node_modules/bootstrap/scss/mixins"; 3 @import "node_modules/bootstrap/scss/mixins";
4 4
5 $primary: #aa006b; 5 $primary: #aa006b;
6 $secondary: #00acd8; 6 $secondary: #00acd8;
7 $info: #f4b223; 7 $info: #f4b223;
8 $light: #e6e7e9; 8 $light: #e6e7e9;
9 $dark: #61666c; 9 $dark: #61666c;
10 $theme-colors: ( 10 $theme-colors: (
11 primary: $primary, 11 primary: $primary,
12 secondary: $secondary, 12 secondary: $secondary,
13 info: $info, 13 info: $info,
14 light: $light, 14 light: $light,
15 dark: $dark 15 dark: $dark
16 ); 16 );
17 $border-radius: 1.5rem; 17 $border-radius: 1.5rem;
18 $border-radius-lg: 2.5rem; 18 $border-radius-lg: 2.5rem;
19 $border-radius-sm: 0.5rem; 19 $border-radius-sm: 0.5rem;
20 20
21 .custom-modal { 21 .custom-modal {
22 max-width: 90% !important; 22 max-width: 90% !important;
23 & > .modal-content { 23 & > .modal-content {
24 background-color: $primary !important; 24 background-color: $primary !important;
25 color: white; 25 color: white;
26 border: none !important; 26 border: none !important;
27 border-radius: $border-radius !important; 27 border-radius: $border-radius !important;
28 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; 28 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
29 } 29 }
30 } 30 }
31 31
32 .carousel-control { 32 .carousel-control {
33 visibility: hidden !important; 33 visibility: hidden !important;
34 } 34 }
35 35
36 .carousel, 36 .carousel,
37 .carousel-inner, 37 .carousel-inner,
38 .carousel-item, 38 .carousel-item,
39 .item { 39 .item {
40 height: 100% !important; 40 height: 100% !important;
41 } 41 }
42 42
43 @import "node_modules/bootstrap/scss/bootstrap"; 43 @import "node_modules/bootstrap/scss/bootstrap";
44 44
45 .min-h-50 { 45 .min-h-50 {
46 min-height: 50px; 46 min-height: 50px;
47 } 47 }
48 48
49 .min-h-60 { 49 .min-h-60 {
50 min-height: 60px; 50 min-height: 60px;
51 } 51 }
52
53 .custom-modal > div > div {
54 background-color: $primary !important;
55 border: none !important;
56 border-radius: 10rem;
57 margin-left: 10px !important;
58 }
52 59