Luis Suarez / autoservicio-axion

Commit 9daec184ac383212d1d1a7bb3cf34ac7fb23cca8

Authored by Marcelo Puebla 2020-01-13 11:04:12 -0300

Merge branch 'develop' into 'develop'

Agregado banners publicitarios y arreglo para cuando no se encuentre imagen

See merge request !10

Showing 8 changed files Show diff stats

.gitignore

Diff comments View file @ 9daec18

1	# See http://help.github.com/ignore-files/ for more about ignoring files.	1	# See http://help.github.com/ignore-files/ for more about ignoring files.
2		2
3	# compiled output	3	# compiled output
4	/dist	4	/dist
5	/tmp	5	/tmp
6	/out-tsc	6	/out-tsc
7	# Only exists if Bazel was run	7	# Only exists if Bazel was run
8	/bazel-out	8	/bazel-out
9		9
10	# dependencies	10	# dependencies
11	/node_modules	11	/node_modules
12	/dist	12	/dist
		13	/autoservicio-axion-win32-x64
13	/src/etc/AppSettings.ts	14	/src/etc/AppSettings.ts
14		15
15	# profiling files	16	# profiling files
16	chrome-profiler-events*.json	17	chrome-profiler-events*.json
17	speed-measure-plugin*.json	18	speed-measure-plugin*.json
18		19
19	# IDEs and editors	20	# IDEs and editors
20	/.idea	21	/.idea
21	.project	22	.project
22	.classpath	23	.classpath
23	.c9/	24	.c9/
24	*.launch	25	*.launch
25	.settings/	26	.settings/
26	*.sublime-workspace	27	*.sublime-workspace
27		28
28	# IDE - VSCode	29	# IDE - VSCode
29	.vscode/*	30	.vscode/*
30	!.vscode/settings.json	31	!.vscode/settings.json
31	!.vscode/tasks.json	32	!.vscode/tasks.json
32	!.vscode/launch.json	33	!.vscode/launch.json
33	!.vscode/extensions.json	34	!.vscode/extensions.json
34	.history/*	35	.history/*
35		36
36	# misc	37	# misc
37	/.sass-cache	38	/.sass-cache
38	/connect.lock	39	/connect.lock
39	/coverage	40	/coverage
40	/libpeerconnection.log	41	/libpeerconnection.log
41	npm-debug.log	42	npm-debug.log
42	yarn-error.log	43	yarn-error.log
43	testem.log	44	testem.log
44	/typings	45	/typings
45		46
46	# System Files	47	# System Files
47	.DS_Store	48	.DS_Store
48	Thumbs.db	49	Thumbs.db
49		50

src/app/modules/carrito/carrito.component.html

Diff comments View file @ 9daec18

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
-  <div class="h-85">
+  <div class="h-75">
     <!-- CABECERA -->
     <div class="row mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 px-0 py-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
         </div>
       </div>
     </div>
     <!-- CARRITO -->
     <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
       <!-- MENSAJE DE ADVERTENCIA -->
       <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
         <p class="h5 text-center">No hay artículos en el carrito</p>
       </div>
       <!-- ARTICULOS -->
       <div
         class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
         *ngFor="let articulo of articuloService.carrito; let i = index;"
         @EnterLeave>
         <!-- ARTICULO -->
         <div class="h-100 px-2 py-4 border border-primary rounded-sm">
           <div class="row mx-0 h-100">
             <!-- NOMBRE E IMAGEN -->
             <div class="col-3 h-100 border-right border-primary align-self-center">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="d-block mx-auto h-55 rounded-sm shadow-sm"
-                src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}">
+                src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
+                onerror="this.src='assets/img/image-not-found.jpg'">
               <div class="row mx-0 h-45">
                 <p class="col text-primary text-truncate align-self-end">
                   <small>{{articulo.DetArt}}</small>
                 </p>
               </div>
             </div>
             <!-- CANTIDAD -->
             <div class="col-3 border-right border-primary">
               <p><small>CANT</small></p>
               <div class="row mt-2 mx-0">
                 <div class="col-12 h-auto">
                   <div class="row mx-0 justify-content-between bg-primary badge-pill">
                     <!-- BOTON MENOS -->
                     <div class="col-auto px-0">
                       <img
                         draggable="false"
                         ondragstart="return false;"
                         (contextmenu)="false"
                         class="d-block ml-auto py-2 icon-20 btn-effect"
                         src="assets/img/menos-blanco.svg"
                         (click)="substractCant(articulo)">
                     </div>
                     <!-- CANTIDAD -->
                     <div class="col px-0 align-self-center text-white">
                       <p><small>{{articulo.cantidad}}</small></p>
                     </div>
                     <!-- BOTON MAS -->
                     <div class="col-auto px-0">
                       <img
                         draggable="false"
                         ondragstart="return false;"
                         (contextmenu)="false"
                         class="d-block ml-auto py-2 icon-20 btn-effect"
                         src="assets/img/mas-blanco.svg"
                         (click)="addCant(articulo)">
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- OPCIONALES -->
             <div class="col-3 border-right border-primary">
               <p><small>OPCIONALES</small></p>
               <!-- <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
               <div class="row mx-0 mt-2 justify-content-center">
                 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
                   <span>
                     <small class="pr-2">CAMBIAR</small>
                     <img
                       draggable="false"
                       ondragstart="return false;"
                       (contextmenu)="false"
                       class="icon-20"
                       src="assets/img/ir.svg">
                   </span>
                 </div>
               </div> -->
             </div>
             <!-- ELIMINAR -->
             <div class="col-3 align-self-center">
               <div class="row mx-0 justify-content-center">
                 <div
                   class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
                   (click)="deleteArticulo(i)">
                   <span>
                     <small class="pr-2">ELIMINAR</small>
                     <img
                       draggable="false"
                       ondragstart="return false;"
                       (contextmenu)="false"
                       class="icon-20 rotate-45"
                       src="assets/img/mas-blanco.svg">
                   </span>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- CONTINUAR -->
     <div
       *ngIf="articuloService.carrito.length"
       class="row mx-3 mt-4 h-auto justify-content-end">
       <div
         class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
         [routerLink]="['/forma-pago']">
         <span>
           <small class="pr-2">CONTINUAR</small>
           <img
             draggable="false"
             ondragstart="return false;"
             (contextmenu)="false"
             class="icon-20"
             src="assets/img/ir.svg">
         </span>
       </div>
     </div>
     <!-- SEGUIR COMPRANDO -->
     <div class="row mx-3 mt-2 h-auto justify-content-end">
       <div
         class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
         (click)="goBack()">
         <span>
           <small class="pr-2">SEGUIR COMPRANDO</small>
           <img
             draggable="false"
             ondragstart="return false;"
             (contextmenu)="false"
             class="icon-20"
             src="assets/img/ir.svg">
         </span>
       </div>
     </div>
   </div>
 </div>

src/app/modules/seleccion-articulos/seleccion-articulos.component.html

Diff comments View file @ 9daec18

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
-  <div class="row mx-0 h-90 align-items-end">
+  <div class="row mx-0 h-80 align-items-end">
     <!-- CABECERA -->
     <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 p-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
         </div>
       </div>
     </div>
     <!-- CUERPO -->
     <div class="row w-100 mr-4 h-70">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <!-- FILTRO CATEGORIAS -->
           <div class="col-5 col-sm-3 col-xl-2 h-100">
             <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
             <div class="row mx-0 h-94 justify-content-center align-items-center">
               <div class="col-auto btn-effect h-5">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90-neg"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, -100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
               <!-- CATEGORIAS -->
               <div
                 #templateCategorias
                 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
                 <div
                   class="row mx-4 mb-2 h-32 justify-content-center tab"
                   [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
                   (click)="selectCategoria(-1, 0)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/ir-color.svg">
                   <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
                 </div>
                 <div
                   class="row mx-4 mb-2 h-32 justify-content-center tab"
                   [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
                   (click)="selectCategoria(i, categoria.id)"
                   *ngFor="let categoria of categorias; let i = index;">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/ir-color.svg">
                   <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
                 </div>
               </div>
               <div class="col-auto btn-effect h-5">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, 100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
             </div>
           </div>
           <!-- LISTA DE ARTICULOS -->
           <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
               <!-- ARTICULO -->
               <div
                 class="col px-2 my-1 my-md-3 h-auto"
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
                 <div class="swing-in-top-fwd card h-auto">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
+                    onerror="this.src='assets/img/image-not-found.jpg'"
                     class="card-img-top h-55 rounded-sm">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
                     <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p>
                     <p class="col-12 px-1 h-auto text-center line-height-sm">
                       <small>{{articulo.DET_LAR}}</small>
                     </p>
                     <div class="col-12 px-1 align-self-end btn-effect h-auto">
                       <div
                         [ngClass]="{'bg-secondary': articulo.promo}"
                         class="row mx-0 justify-content-between bg-primary badge-pill"
                         (click)="elegirArticulo(articulo)">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{articulo.PreVen | currency}}
                         </div>
                         <div class="col-5 px-0">
                           <img
                             draggable="false"
                             ondragstart="return false;"
                             (contextmenu)="false"
                             class="d-block ml-auto py-1 icon-30"
                             src="assets/img/ir.svg">
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- BOTON VER MAS -->
             <div class="row mx-0">
               <div
                 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
                 class="col-12 px-0 mb-2">
                 <button
                   (click)="increaseShow()"
                   class="btn btn-block btn-outline-primary">
                   Ver Más
                 </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- FOOTER CARRITO DE COMPRAS -->
     <div class="row w-90 mx-auto h-auto justify-content-center">
       <div class="col-12 h-75 px-0 border border-primary rounded">
         <!-- CABECERA -->
         <div class="row mx-0 h-15 border-bottom border-primary">
           <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
         <!-- CUERPO -->
         <div class="row h-85 mx-0 justify-content-around">
           <!-- BOTON SCROLL IZQUIERDA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30 rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
           <!-- CARRITO -->
           <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
             <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
               <!-- MENSAJE DE ADVERTENCIA -->
               <div *ngIf="!articuloService.carrito.length" class="col h-100">
                 <p class="text-center py-5">No hay articulos en el carrito</p>
               </div>
               <!-- ARTICULOS -->
               <div
                 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
                 *ngFor="let articulo of articuloService.carrito; let i = index;">
                 <div class="swing-in-top-fwd">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="d-block img-fluid p-2 mx-auto rounded"
-                    src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}">
+                    src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
+                    onerror="this.src='assets/img/image-not-found.jpg'">
                   <p class="d-block mt-auto text-center text-primary text-truncate">
                     <small>{{articulo.DetArt}}</small>
                   </p>
                 </div>
               </div>
             </div>
           </div>
           <!-- BOTON SCROLL DERECHA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
         </div>
       </div>
       <!-- VER CARRITO -->
-      <div class="col-auto p-0 mt-2 ml-auto h-20">
+      <div
+        class="col-auto p-0 mt-2 ml-auto h-20"
+        *ngIf="articuloService.carrito.length">
         <div
           class="btn-effect col-auto align-self-center px-0 bg-white"
           [routerLink]="['/carrito']">
           <div class="row mx-0 bg-light">
             <div class="col-auto align-self-center text-primary">VER CARRITO</div>
             <div class="col-auto p-0 bg-primary d-none d-sm-block">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="p-2 icon-40"
                 src="assets/img/carrito.svg">
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

src/app/modules/seleccion-articulos/seleccion-articulos.module.ts

Diff comments View file @ 9daec18

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module';
 import { SeleccionArticulosComponent } from './seleccion-articulos.component';
 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component';
 import { ModalModule } from 'ngx-bootstrap/modal';
+import { CarouselModule } from 'ngx-bootstrap/carousel';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { SharedModule } from '../shared/shared.module';
 @NgModule({
   declarations: [
     SeleccionArticulosComponent,
     HeaderPublicidadComponent,
     PromocionComponent
   ],
   imports: [
     CommonModule,
     SeleccionArticulosRoutingModule,
     ModalModule.forRoot(),
+    CarouselModule.forRoot(),
     SharedModule
   ],
   exports: [HeaderPublicidadComponent],
   entryComponents: [PromocionComponent]
 })
 export class SeleccionArticulosModule { }

src/app/shared/header-publicidad/header-publicidad.component.html

Diff comments View file @ 9daec18

1	<div class="row mx-0 h-10">	1	<div class="row mx-0 h-20">
2	<div class="col-12 p-3 h-100">	2	<div class="col-12 p-3 h-100">
3	<div class="bg-dark h-100"></div>	3	<div class="h-100">
		4	<carousel [showIndicators]="false" [interval]="4000">
		5	<slide>
		6	<img
		7	class="d-block h-100 w-auto mx-auto"
		8	src="{{urlImagenes}}spot-promos-combos-02.png">
		9	</slide>
		10	<!-- <slide>
		11	<img
		12	class="d-block h-100 w-auto mx-auto"
		13	src="{{urlImagenes}}spot-promos-combos-03.png">
		14	</slide>
		15	<slide>
		16	<img
		17	class="d-block h-100 w-auto mx-auto"
		18	src="{{urlImagenes}}spot-promos-combos-04.png">
		19	</slide>
		20	<slide>
		21	<img
		22	class="d-block h-100 w-auto mx-auto"
		23	src="{{urlImagenes}}spot-promos-combos-05.png">
		24	</slide> -->
		25	</carousel>
		26	</div>
4	</div>	27	</div>
5	</div>
		28	</div>

src/app/shared/header-publicidad/header-publicidad.component.ts

Diff comments View file @ 9daec18

 import { Component, OnInit } from '@angular/core';
+import { APP_SETTINGS } from 'src/etc/AppSettings';
 @Component({
   selector: 'app-header-publicidad',
   templateUrl: './header-publicidad.component.html',
   styleUrls: ['./header-publicidad.component.scss']
 })
 export class HeaderPublicidadComponent implements OnInit {
+  urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   constructor() { }
   ngOnInit() {
   }
 }

src/assets/img/image-not-found.jpg

Diff comments View file @ 9daec18

41.5 KB

src/scss/styles-bootstrap.scss

Diff comments View file @ 9daec18

 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
 $primary: #aa006b;
 $secondary: #00acd8;
 $info: #f4b223;
 $light: #e6e7e9;
 $dark: #61666c;
 $theme-colors: (
   primary: $primary,
   secondary: $secondary,
   info: $info,
   light: $light,
   dark: $dark
 );
 $border-radius: 1.5rem;
 $border-radius-lg: 2.5rem;
 $border-radius-sm: 0.5rem;
 .custom-modal {
   max-width: 90% !important;
   & > .modal-content {
     background-color: $primary !important;
     color: white;
     border: none !important;
     border-radius: $border-radius !important;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
   }
 }
+.carousel-control {
+  visibility: hidden !important;
+}
+.carousel,
+.carousel-inner,
+.carousel-item,
+.item {
+  height: 100% !important;
+}
 @import "node_modules/bootstrap/scss/bootstrap";