Commit 6dba37fd59e964cac5809fe1b6fe1ceba655bcab
Exists in
master
and in
1 other branch
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !60
Showing
6 changed files
Show diff stats
src/app/app.module.ts
| ... | ... | @@ -6,6 +6,7 @@ import { HttpClientModule } from '@angular/common/http'; |
| 6 | 6 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; |
| 7 | 7 | import { TooltipModule } from 'ngx-bootstrap/tooltip'; |
| 8 | 8 | import { PopoverModule } from 'ngx-bootstrap/popover'; |
| 9 | +import { CarouselModule } from 'ngx-bootstrap/carousel'; | |
| 9 | 10 | //#endregion |
| 10 | 11 | |
| 11 | 12 | //#region Keyboard |
| ... | ... | @@ -59,7 +60,8 @@ import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final. |
| 59 | 60 | PopoverModule.forRoot(), |
| 60 | 61 | BrowserAnimationsModule, |
| 61 | 62 | MatKeyboardModule, |
| 62 | - MatButtonModule | |
| 63 | + MatButtonModule, | |
| 64 | + CarouselModule.forRoot() | |
| 63 | 65 | ], |
| 64 | 66 | providers: [], |
| 65 | 67 | bootstrap: [AppComponent] |
src/app/components/home/home.component.html
| ... | ... | @@ -18,26 +18,24 @@ |
| 18 | 18 | <!-- INFO DE BIENVENIDA --> |
| 19 | 19 | <div class="row my-auto h-50 w-100"> |
| 20 | 20 | <div class="col-3 col-lg-4 offset-lg-1 h-100 my-auto"> |
| 21 | - | |
| 22 | - <div id="carouselExampleSlidesOnly" class="carousel slide h-100" data-ride="carousel"> | |
| 23 | - <div class="carousel-inner h-100"> | |
| 24 | - <div class="carousel-item active h-100"> | |
| 25 | - <img | |
| 26 | - src="{{apiUrl}}/imagenes/coca1.jpg" | |
| 27 | - class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> | |
| 28 | - </div> | |
| 29 | - <div class="carousel-item h-100"> | |
| 30 | - <img | |
| 31 | - src="{{apiUrl}}/imagenes/coca2.jpg" | |
| 32 | - class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> | |
| 33 | - </div> | |
| 34 | - <div class="carousel-item h-100"> | |
| 35 | - <img | |
| 36 | - src="{{apiUrl}}/imagenes/coca3.jpg" | |
| 37 | - class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> | |
| 38 | - </div> | |
| 39 | - </div> | |
| 40 | - </div> | |
| 21 | + <!-- CAROUSEL --> | |
| 22 | + <carousel [showIndicators]="false" [interval]="1500"> | |
| 23 | + <slide class="h-100"> | |
| 24 | + <img | |
| 25 | + src="{{apiUrl}}/imagenes/coca1.jpg" | |
| 26 | + class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> | |
| 27 | + </slide> | |
| 28 | + <slide class="h-100"> | |
| 29 | + <img | |
| 30 | + src="{{apiUrl}}/imagenes/coca2.jpg" | |
| 31 | + class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> | |
| 32 | + </slide> | |
| 33 | + <slide class="h-100"> | |
| 34 | + <img | |
| 35 | + src="{{apiUrl}}/imagenes/coca3.jpg" | |
| 36 | + class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> | |
| 37 | + </slide> | |
| 38 | + </carousel> | |
| 41 | 39 | |
| 42 | 40 | </div> |
| 43 | 41 | <div class="col-9 col-lg-7 text-center text-white my-auto"> |
src/app/components/inicio/inicio.component.html
| ... | ... | @@ -26,22 +26,29 @@ |
| 26 | 26 | </div> |
| 27 | 27 | <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> |
| 28 | 28 | </div> |
| 29 | - <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> | |
| 30 | - <div class="carousel-inner"> | |
| 31 | - <div class="carousel-item active"> | |
| 32 | - <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded"> | |
| 33 | - </div> | |
| 34 | - <div class="carousel-item"> | |
| 35 | - <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded"> | |
| 36 | - </div> | |
| 37 | - <div class="carousel-item"> | |
| 38 | - <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded"> | |
| 39 | - </div> | |
| 40 | - <div class="carousel-item"> | |
| 41 | - <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded"> | |
| 42 | - </div> | |
| 43 | - </div> | |
| 44 | - </div> | |
| 29 | + <!-- CAROUSEL --> | |
| 30 | + <carousel [showIndicators]="false" [interval]="1500"> | |
| 31 | + <slide class="h-100"> | |
| 32 | + <img | |
| 33 | + src="{{apiUrl}}/imagenes/beldent.jpg" | |
| 34 | + class="fade-in d-block w-75 m-auto rounded"> | |
| 35 | + </slide> | |
| 36 | + <slide class="h-100"> | |
| 37 | + <img | |
| 38 | + src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" | |
| 39 | + class="fade-in d-block w-75 m-auto rounded"> | |
| 40 | + </slide> | |
| 41 | + <slide class="h-100"> | |
| 42 | + <img | |
| 43 | + src="{{apiUrl}}/imagenes/Surtido bagley.jpg" | |
| 44 | + class="fade-in d-block w-75 m-auto rounded"> | |
| 45 | + </slide> | |
| 46 | + <slide class="h-100"> | |
| 47 | + <img | |
| 48 | + src="{{apiUrl}}/imagenes/yogurisimo.jpg" | |
| 49 | + class="fade-in d-block w-75 m-auto rounded"> | |
| 50 | + </slide> | |
| 51 | + </carousel> | |
| 45 | 52 | </div> |
| 46 | 53 | |
| 47 | 54 | <!-- ORDENAR --> |
| ... | ... | @@ -72,7 +79,7 @@ |
| 72 | 79 | *ngIf="promociones.length > 0 && sinonimos.length === 0" |
| 73 | 80 | [popover]="popoverDirective" |
| 74 | 81 | [popoverContent]="promociones" |
| 75 | - (promoSeleccionada)="promoSeleccionada($event)" | |
| 82 | + (promoSeleccionada)="promoSeleccionada($event, false)" | |
| 76 | 83 | class="text-white rounded-sm border-0"> |
| 77 | 84 | </app-popover-promos> |
| 78 | 85 | <app-popover-sinonimos |
src/app/components/inicio/inicio.component.ts
| 1 | -import { Component, OnInit, ViewChild, HostListener } from '@angular/core'; | |
| 1 | +import { Component, OnInit, ViewChild, HostListener, AfterViewInit } from '@angular/core'; | |
| 2 | 2 | import { PopoverDirective } from 'ngx-bootstrap'; |
| 3 | 3 | import { appSettings } from 'src/etc/AppSettings'; |
| 4 | 4 | import { Router } from '@angular/router'; |
| ... | ... | @@ -11,7 +11,7 @@ import { Sinonimo } from 'src/app/wrappers/sinonimo'; |
| 11 | 11 | templateUrl: './inicio.component.html', |
| 12 | 12 | styleUrls: ['./inicio.component.scss'] |
| 13 | 13 | }) |
| 14 | -export class InicioComponent implements OnInit { | |
| 14 | +export class InicioComponent implements OnInit, AfterViewInit { | |
| 15 | 15 | |
| 16 | 16 | private tienePromo = false; |
| 17 | 17 | private productoEsPromo = false; |
| ... | ... | @@ -38,20 +38,36 @@ export class InicioComponent implements OnInit { |
| 38 | 38 | |
| 39 | 39 | constructor( |
| 40 | 40 | private router: Router, |
| 41 | - private productoService: ProductoService) { } | |
| 41 | + private productoService: ProductoService | |
| 42 | + ) { } | |
| 42 | 43 | |
| 43 | 44 | ngOnInit() { |
| 44 | 45 | |
| 45 | 46 | this.productoAcargar = this.productoService.productoAcargar; |
| 46 | - if (this.productoAcargar) { | |
| 47 | + this.getProductos(); | |
| 48 | + } | |
| 49 | + | |
| 50 | + ngAfterViewInit() { | |
| 51 | + | |
| 52 | + setTimeout(() => { | |
| 53 | + if (!this.productoAcargar) return; | |
| 54 | + | |
| 47 | 55 | if (this.productoAcargar.PRO) { |
| 48 | 56 | this.promociones.push(this.productoAcargar); |
| 49 | - this.promoSeleccionada(this.productoAcargar); | |
| 57 | + this.promoSeleccionada(this.productoAcargar, true); | |
| 50 | 58 | } |
| 51 | - else | |
| 59 | + else { | |
| 52 | 60 | this.getPromociones(); |
| 53 | - } | |
| 54 | - this.getProductos(); | |
| 61 | + } | |
| 62 | + }) | |
| 63 | + } | |
| 64 | + | |
| 65 | + getProductos() { | |
| 66 | + | |
| 67 | + this.productoService.getAll() | |
| 68 | + .subscribe((productos: Producto[]) => { | |
| 69 | + this.productos = productos; | |
| 70 | + }); | |
| 55 | 71 | } |
| 56 | 72 | |
| 57 | 73 | getPromociones() { |
| ... | ... | @@ -62,12 +78,10 @@ export class InicioComponent implements OnInit { |
| 62 | 78 | .subscribe((res: Producto[]) => { |
| 63 | 79 | |
| 64 | 80 | if (res.length === 0) { |
| 65 | - //Si no tiene promociones la cargarรก al carrito despues de un tiempo | |
| 66 | - // setTimeout(() => { | |
| 81 | + | |
| 67 | 82 | this.productoAcargar.cantidad = 1; |
| 68 | 83 | this.productoService.productos.push(this.productoAcargar); |
| 69 | 84 | this.productoAcargar = this.productoService.productoAcargar = undefined; |
| 70 | - // }, 2000) | |
| 71 | 85 | } else { |
| 72 | 86 | |
| 73 | 87 | this.promociones = res; |
| ... | ... | @@ -76,21 +90,8 @@ export class InicioComponent implements OnInit { |
| 76 | 90 | }, error => { console.error(error); }) |
| 77 | 91 | } |
| 78 | 92 | |
| 79 | - getProductos() { | |
| 80 | - | |
| 81 | - this.productoService.getAll() | |
| 82 | - .subscribe((productos: Producto[]) => { | |
| 83 | - this.productos = productos; | |
| 84 | - }); | |
| 85 | - } | |
| 86 | - | |
| 87 | - irBusquedaProductos(value) { | |
| 88 | - | |
| 89 | - this.productoService.mostrar = value; | |
| 90 | - this.router.navigate(['busqueda-productos']); | |
| 91 | - } | |
| 92 | - | |
| 93 | 93 | confirmarProducto() { |
| 94 | + | |
| 94 | 95 | var producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar; |
| 95 | 96 | producto.cantidad = 1; |
| 96 | 97 | this.productoService.productos.push(producto); |
| ... | ... | @@ -99,46 +100,24 @@ export class InicioComponent implements OnInit { |
| 99 | 100 | this.popoverDirective.hide(); |
| 100 | 101 | } |
| 101 | 102 | |
| 102 | - deshacerCarga() { | |
| 103 | + promoSeleccionada($event: Producto, showPopover: boolean) { | |
| 103 | 104 | |
| 104 | - if (this.sinonimos.length > 0) { | |
| 105 | - this.sinonimos = []; | |
| 106 | - this.popoverDirective.hide(); | |
| 107 | - } | |
| 105 | + this.productoService.getProductoById($event.id) | |
| 106 | + .subscribe((res: Producto) => { | |
| 107 | + | |
| 108 | + $event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes; | |
| 109 | + this.promoAcargar = $event; | |
| 108 | 110 | |
| 109 | - if (this.promoAcargar) { | |
| 110 | - this.promoAcargar = undefined; | |
| 111 | - if (this.productoAcargar.PRO) { | |
| 112 | - this.productoAcargar = undefined; | |
| 113 | - this.promociones = []; | |
| 114 | - this.popoverDirective.hide(); | |
| 115 | - } else { | |
| 116 | - this.popoverDirective.show(); | |
| 117 | - } | |
| 118 | - } else { | |
| 119 | - this.productoAcargar = undefined; | |
| 120 | - this.promociones = []; | |
| 121 | - this.popoverDirective.hide(); | |
| 122 | - } | |
| 123 | - } | |
| 124 | - | |
| 125 | - promoSeleccionada($event: Producto) { | |
| 126 | - | |
| 127 | - if ($event.tieneSinonimos) { | |
| 128 | - | |
| 129 | - this.productoService.getProductoById($event.id) | |
| 130 | - .subscribe((res: Producto) => { | |
| 131 | - | |
| 132 | - $event.imagenes = res.imagenes; | |
| 133 | - this.promoAcargar = $event; | |
| 111 | + if ($event.tieneSinonimos) { | |
| 134 | 112 | this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt); |
| 135 | - }, | |
| 136 | - error => { console.log(error); }) | |
| 137 | - | |
| 113 | + } else if (showPopover) { | |
| 114 | + this.popoverDirective.show(); | |
| 115 | + } else { | |
| 116 | + this.popoverDirective.hide(); | |
| 117 | + } | |
| 138 | 118 | |
| 139 | - } else if (this.popoverDirective) { | |
| 140 | - this.popoverDirective.hide(); | |
| 141 | - } | |
| 119 | + }, | |
| 120 | + error => { console.log(error); }) | |
| 142 | 121 | } |
| 143 | 122 | |
| 144 | 123 | getSinonimos(sector, codigo) { |
| ... | ... | @@ -161,10 +140,7 @@ export class InicioComponent implements OnInit { |
| 161 | 140 | }) |
| 162 | 141 | |
| 163 | 142 | this.sinonimos = res; |
| 164 | - if (res.length > 0) | |
| 165 | - this.popoverDirective.show(); | |
| 166 | - else | |
| 167 | - this.popoverDirective.hide(); | |
| 143 | + (this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide(); | |
| 168 | 144 | }) |
| 169 | 145 | } |
| 170 | 146 | |
| ... | ... | @@ -198,4 +174,33 @@ export class InicioComponent implements OnInit { |
| 198 | 174 | |
| 199 | 175 | } |
| 200 | 176 | |
| 177 | + irBusquedaProductos(value) { | |
| 178 | + | |
| 179 | + this.productoService.mostrar = value; | |
| 180 | + this.router.navigate(['busqueda-productos']); | |
| 181 | + } | |
| 182 | + | |
| 183 | + deshacerCarga() { | |
| 184 | + | |
| 185 | + if (this.sinonimos.length > 0) { | |
| 186 | + this.sinonimos = []; | |
| 187 | + this.popoverDirective.hide(); | |
| 188 | + } | |
| 189 | + | |
| 190 | + if (this.promoAcargar) { | |
| 191 | + this.promoAcargar = undefined; | |
| 192 | + if (this.productoAcargar.PRO) { | |
| 193 | + this.productoAcargar = undefined; | |
| 194 | + this.promociones = []; | |
| 195 | + this.popoverDirective.hide(); | |
| 196 | + } else { | |
| 197 | + this.popoverDirective.show(); | |
| 198 | + } | |
| 199 | + } else { | |
| 200 | + this.productoAcargar = undefined; | |
| 201 | + this.promociones = []; | |
| 202 | + this.popoverDirective.hide(); | |
| 203 | + } | |
| 204 | + } | |
| 205 | + | |
| 201 | 206 | } |
src/app/components/sidebar/sidebar.component.html
| ... | ... | @@ -33,7 +33,7 @@ |
| 33 | 33 | (click)="aumentarCantidad(producto)"> |
| 34 | 34 | <i class="fa fa-plus" aria-hidden="true"></i> |
| 35 | 35 | </button> |
| 36 | - <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow"> | |
| 36 | + <div class="bg-white border border-white px-2 my-auto text-dark h5 shadow"> | |
| 37 | 37 | <small>{{producto.cantidad}}</small> |
| 38 | 38 | </div> |
| 39 | 39 | <button |
src/assets/scss/bootstrap-override.scss
| ... | ... | @@ -68,4 +68,15 @@ $theme-colors: ( |
| 68 | 68 | } |
| 69 | 69 | } |
| 70 | 70 | |
| 71 | +.carousel-control { | |
| 72 | + visibility: hidden !important; | |
| 73 | +} | |
| 74 | + | |
| 75 | +.carousel, .carousel-inner, .item { | |
| 76 | + height: 100% !important; | |
| 77 | + &:focus{ | |
| 78 | + outline: none !important; | |
| 79 | + } | |
| 80 | +} | |
| 81 | + | |
| 71 | 82 | @import "../../../node_modules/bootstrap/scss/bootstrap"; |