Martin Macola / autoservicio

Download as
Browse Code ยป

Commit d005793511a849710ae50bf22d27ab8cc606db85

Authored by Eric Fernandez
2 parents cf4cf00f5e 44888c3b88
Exists in master

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !21
Showing 20 changed files   Show diff stats
... ... @@ -27,14 +27,14 @@
27 27 "src/assets"
28 28 ],
29 29 "styles": [
30   - "node_modules/bootstrap/dist/css/bootstrap.min.css",
31   - "node_modules/font-awesome/css/font-awesome.min.css",
  30 + "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  31 + "./node_modules/font-awesome/css/font-awesome.min.css",
32 32 "src/styles.scss"
33 33 ],
34 34 "scripts": [
35   - "node_modules/jquery/dist/jquery.min.js",
36   - "node_modules/popper.js/dist/umd/popper.min.js",
37   - "node_modules/bootstrap/dist/js/bootstrap.min.js"
  35 + "./node_modules/jquery/dist/jquery.min.js",
  36 + "./node_modules/popper.js/dist/umd/popper.min.js",
  37 + "./node_modules/bootstrap/dist/js/bootstrap.min.js"
38 38 ]
39 39 },
40 40 "configurations": {
... ... @@ -93,6 +93,7 @@
93 93 "src/assets"
94 94 ],
95 95 "styles": [
  96 + "./node_modules/bootstrap/dist/css/bootstrap.min.css",
96 97 "src/styles.scss"
97 98 ],
98 99 "scripts": []
... ... @@ -124,6 +125,7 @@
124 125 }
125 126 }
126 127 }
127   - }},
  128 + }
  129 + },
128 130 "defaultProject": "autoservicio"
129   -}
130 131 \ No newline at end of file
  132 +}
... ... @@ -5980,6 +5980,11 @@
5980 5980 "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
5981 5981 "dev": true
5982 5982 },
  5983 + "ngx-bootstrap": {
  5984 + "version": "5.1.1",
  5985 + "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.1.1.tgz",
  5986 + "integrity": "sha512-++6+YHbIWTR/3sHH9C0aelIP25KMKhylWSEet6HonZfVr8quzEUjq6xEzTnDbZpnxlly2j58Gg0O9DWXu0UCxA=="
  5987 + },
5983 5988 "nice-try": {
5984 5989 "version": "1.0.5",
5985 5990 "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
... ... @@ -22,6 +22,7 @@
22 22 "bootstrap": "^4.3.1",
23 23 "font-awesome": "^4.7.0",
24 24 "jquery": "^1.12.4",
  25 + "ngx-bootstrap": "^5.1.1",
25 26 "popper.js": "^1.15.0",
26 27 "rxjs": "~6.4.0",
27 28 "tslib": "^1.9.0",
src/app/app.module.ts
Diff comments   View file @ d005793
... ... @@ -4,6 +4,8 @@ import { NgModule } from '@angular/core';
4 4 import { AppRoutingModule } from './app-routing.module';
5 5 import { HttpClientModule } from '@angular/common/http';
6 6 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  7 +import { TooltipModule } from 'ngx-bootstrap/tooltip';
  8 +import { PopoverModule } from 'ngx-bootstrap/popover';
7 9 //#endregion
8 10  
9 11 //#region COMPONENTS
... ... @@ -16,6 +18,7 @@ import { InicioComponent } from './components/inicio/inicio.component';
16 18 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
17 19 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
18 20 import { MasterComponent } from './components/master/master.component';
  21 +import { PopoverComponent } from './components/popover/popover.component';
19 22 //#endregion
20 23  
21 24 @NgModule({
... ... @@ -28,7 +31,8 @@ import { MasterComponent } from './components/master/master.component';
28 31 InicioComponent,
29 32 BusquedaProductosComponent,
30 33 ConfirmacionCarritoComponent,
31   - MasterComponent
  34 + MasterComponent,
  35 + PopoverComponent
32 36 ],
33 37 imports: [
34 38 BrowserModule,
... ... @@ -36,7 +40,9 @@ import { MasterComponent } from './components/master/master.component';
36 40 HttpClientModule,
37 41 FormsModule,
38 42 ReactiveFormsModule,
39   - ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' })
  43 + ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
  44 + TooltipModule.forRoot(),
  45 + PopoverModule.forRoot()
40 46 ],
41 47 providers: [],
42 48 bootstrap: [AppComponent]
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ d005793
... ... @@ -95,7 +95,7 @@
95 95 *ngFor="let producto of auxProductos">
96 96 <div
97 97 class="card-effect bg-white rounded-sm shadow border-0"
98   - (click)="agregarAlCarrito(producto)">
  98 + (click)="mostrarBotonCargar(producto)">
99 99 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-75 m-auto">
100 100 <div class="p-2">
101 101 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
... ... @@ -110,6 +110,11 @@
110 110 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
111 111 </div>
112 112 </div>
  113 + <div *ngIf="producto.showCargarProducto" class="row mt-2">
  114 + <div class="col-sm-12">
  115 + <div class="btn btn-block btn-outline-primary shadow">Cargar Producto</div>
  116 + </div>
  117 + </div>
113 118 </div>
114 119 </div>
115 120 </div>
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ d005793
1   -import { Component, OnInit } from '@angular/core';
  1 +import { Component, OnInit, APP_BOOTSTRAP_LISTENER } from '@angular/core';
2 2 import { ProductoService } from 'src/app/services/producto.service';
3 3 import { Producto } from 'src/app/wrappers/producto';
4 4 import { appSettings } from 'src/etc/AppSettings';
... ... @@ -16,7 +16,7 @@ export class BusquedaProductosComponent implements OnInit {
16 16 private showSpinner: boolean = true;
17 17 private categoria: Categorias = Categorias.todos;
18 18 private apiUrl: string = appSettings.apiUrl;
19   -
  19 + private showBtnCargarProducto: boolean = false;
20 20  
21 21 constructor(private productoService: ProductoService) { }
22 22  
... ... @@ -45,6 +45,15 @@ export class BusquedaProductosComponent implements OnInit {
45 45 this.productoService.productos.push(producto);
46 46 }
47 47  
  48 + mostrarBotonCargar(producto: Producto) {
  49 +
  50 + for (let i = 0; i < this.auxProductos.length; i++) {
  51 + if (this.auxProductos[i].id !== producto.id)
  52 + this.auxProductos[i].showCargarProducto = false;
  53 + else if (producto.showCargarProducto) return;
  54 + }
  55 + producto.showCargarProducto = !producto.showCargarProducto
  56 + }
48 57 }
49 58  
50 59 enum Categorias {
src/app/components/inicio/inicio.component.html
Diff comments   View file @ d005793
... ... @@ -11,32 +11,6 @@
11 11 <div class="row m-4 d-flex align-items-center disable-user-select">
12 12 <div class="col-md-5 d-flex align-items-end flex-column">
13 13  
14   - <!-- TOOL TIp -->
15   - <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto"
16   - *ngIf="tooltip === false">
17   - <div class="arrow"></div>
18   - <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4>
19   - <div class="popover-content mw-100 h-100 mb-auto">
20   - <div class="d-flex flex-column h-75 text-center">
21   - <div class="overflow-auto overflow-scroll mb-2">
22   -
23   - <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
24   - <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
25   - <div class="col-6 p-0 text-left my-auto">
26   - <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
27   - <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
28   - </div>
29   - <div class="col-6 p-1 text-center my-auto">
30   - <p class="m-0 h1 text-right">{{105 | currency}}</p>
31   - </div>
32   - </div>
33   - </div>
34   -
35   - </div>
36   - </div>
37   - </div>
38   - </div>
39   -
40 14 <!-- PROMOCIONES -->
41 15 <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
42 16 <div class="card-body text-left p-4">
... ... @@ -45,7 +19,7 @@
45 19 <p class="h3 card-title">Promociones</p>
46 20 </div>
47 21 <div class="col-5 p-0">
48   - <img src="../../../assets/icons/primario.promociones.png" alt="" class="icon-dim m-0">
  22 + <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
49 23 </div>
50 24 </div>
51 25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
... ... @@ -58,13 +32,13 @@
58 32 </ol>
59 33 <div class="carousel-inner">
60 34 <div class="carousel-item active">
61   - <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
  35 + <img src="{{apiUrl}}/imagenes/descarga.jpg" class="d-block w-50 m-auto rounded">
62 36 </div>
63 37 <div class="carousel-item">
64   - <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
  38 + <img src="{{apiUrl}}/imagenes/descarga.jpg" class="d-block w-50 m-auto rounded">
65 39 </div>
66 40 <div class="carousel-item">
67   - <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
  41 + <img src="{{apiUrl}}/imagenes/descarga.jpg" class="d-block w-50 m-auto rounded">
68 42 </div>
69 43 </div>
70 44 </div>
... ... @@ -78,38 +52,55 @@
78 52 <p class="h3 card-title">Ordenar</p>
79 53 </div>
80 54 <div class="col-7 p-0">
81   - <img src="../../../assets/icons/primario.ordenar.png" alt="" class="icon-dim">
  55 + <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
82 56 </div>
83 57 </div>
84 58 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
85 59 </div>
86   - <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
  60 + <img
  61 + class="card-img-bottom d-block w-100 mx-auto rounded"
  62 + src="{{apiUrl}}/imagenes/cafe.jpg">
87 63 </div>
88 64 </div>
89 65  
90 66 <div class="col-md-7 d-flex align-items-end flex-column">
91 67  
92 68 <!-- CARGAR PRODUCTOS -->
93   - <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
94   - <div class="card-body text-left p-4">
95   - <div class="row">
96   - <div class="col-6">
97   - <p class="h3 card-title">Cargar Productos</p>
98   - </div>
99   - <div class="col-6 p-0">
100   - <img src="../../../assets//icons/escanear.png" alt="" class="icon-dim mb-2">
  69 + <ng-template #popTemplate>
  70 + <app-popover
  71 + [popover]="popoverDirective"
  72 + [popoverContent]="'que onda'"
  73 + class="card bg-primary text-white rounded-sm border-0">
  74 + </app-popover>
  75 + </ng-template>
  76 + <div
  77 + placement="left"
  78 + triggers=""
  79 + [popover]="popTemplate"
  80 + class="w-100"
  81 + #pop="bs-popover"
  82 + (click)="open()">
  83 + <div class="card bg-white border-0 shadow rounded mb-auto">
  84 + <div class="card-body text-left p-4">
  85 + <div class="row">
  86 + <div class="col-6">
  87 + <p class="h3 card-title">Cargar Productos</p>
  88 + </div>
  89 + <div class="col-6 p-0">
  90 + <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
  91 + </div>
101 92 </div>
  93 + <p class="h5 card-text text-muted font-weight-light">
  94 + Coloque el cรณdigo de<br>
  95 + barras o QR frente al scanner.
  96 + </p>
102 97 </div>
103   - <p class="h5 card-text text-muted font-weight-light">
104   - Coloque el cรณdigo de<br>
105   - barras o QR frente al scanner.
106   - </p>
107   - </div>
108   - <div class="card bg-white border-0 w-75 mx-auto mb-4">
109   - <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
110   - <div class="card-body text-left p-2">
111   - <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
112   - <p class="m-0 card-text text-muted">COD. 12121222</p>
  98 + <div class="card bg-white border-0 w-75 mx-auto mb-4">
  99 + <img class="card-img-top d-block w-50 mx-auto rounded" src="{{apiUrl}}/imagenes/descarga.jpg">
  100 + <div class="card-body text-left p-2">
  101 + <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
  102 + <p class="m-0 card-text text-muted">COD. 12121222</p>
  103 + </div>
113 104 </div>
114 105 </div>
115 106 </div>
... ... @@ -126,7 +117,7 @@
126 117 que no tienen cรณdigo </p>
127 118 </div>
128 119 <div class="col-6 p-0">
129   - <img src="../../../assets/icons/primario.buscar.png" alt="" class="icon-dim mb-2">
  120 + <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
130 121 </div>
131 122 </div>
132 123  
src/app/components/inicio/inicio.component.scss
Diff comments   View file @ d005793
... ... @@ -5,26 +5,6 @@
5 5 background-color: #2872ae;
6 6 }
7 7  
8   -.arrow {
9   - top: 50%;
10   - right: -11px;
11   - margin-top: -11px;
12   - border-left-color: #999;
13   - border-left-color: rgba(0, 0, 0, 0.25);
14   - border-right-width: 0;
15   - width: 0;
16   - height: 0;
17   - border-top: 20px solid transparent;
18   - border-bottom: 20px solid transparent;
19   - border-left: 20px solid #2872AE;
20   - top: 50%;
21   - right: -23px;
22   - margin-top: -11px;
23   -
24   -}
25   -
26 8 .black-text {
27 9 color: black;
28 10 }
29   -
30   -
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ d005793
1   -import { Component, OnInit } from '@angular/core';
  1 +import { Component, OnInit, ViewChild } from '@angular/core';
2 2 import { Router } from '@angular/router';
  3 +import { PopoverDirective } from 'ngx-bootstrap';
  4 +import { appSettings } from 'src/etc/AppSettings';
  5 +
3 6  
4 7 @Component({
5 8 selector: 'app-inicio',
... ... @@ -8,13 +11,19 @@ import { Router } from &#39;@angular/router&#39;;
8 11 })
9 12 export class InicioComponent implements OnInit {
10 13  
11   - constructor(private router: Router) { }
  14 + @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
  15 + apiUrl : string = appSettings.apiUrl
12 16  
13   - tooltip:boolean = false;
  17 + constructor(private router: Router) { }
14 18  
15 19 ngOnInit() {
16 20 }
17 21  
  22 + open() {
  23 +
  24 + this.popoverDirective.show();
  25 + }
  26 +
18 27 private goPage(pageUrl) {
19 28 this.router.navigate([pageUrl]);
20 29 }
src/app/components/popover/popover.component.html
Diff comments   View file @ d005793
... ... @@ -0,0 +1,39 @@
  1 +<div class="card-body">
  2 + <div class="row">
  3 + <div class="col">
  4 + <p class="h5 card-title">
  5 + Este producto forma parte<br>
  6 + de Combos y Promociones
  7 + </p>
  8 + </div>
  9 + </div>
  10 +
  11 + <div class="row">
  12 + <div class="col text-dark">
  13 + <div class="bg-white rounded-sm p-2 px-3">
  14 + <div class="row justify-content-between">
  15 + <div class="col-auto">
  16 + <p class="h4 font-weight-bold mb-0">Promo 2x1</p>
  17 + <p class="h6 mb-0">{{popoverContent}}</p>
  18 + </div>
  19 + <div class="col-4 text-right my-auto">
  20 + <p class="h3 font-weight-bold mb-0">{{28 | currency}}</p>
  21 + </div>
  22 + </div>
  23 + </div>
  24 + </div>
  25 + </div>
  26 +
  27 + <div class="row mt-3 justify-content-end">
  28 + <div class="col-auto">
  29 + <button
  30 + type="button"
  31 + class="btn btn-sm btn-light shadow"
  32 + (click)="hide()">
  33 + <span class="pr-2">No, gracias</span>
  34 + <i class="fa fa-times text-danger" aria-hidden="true"></i>
  35 + </button>
  36 + </div>
  37 + </div>
  38 +
  39 +</div>
src/app/components/popover/popover.component.scss
Diff comments   View file @ d005793
src/app/components/popover/popover.component.spec.ts
Diff comments   View file @ d005793
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { PopoverComponent } from './popover.component';
  4 +
  5 +describe('PopoverComponent', () => {
  6 + let component: PopoverComponent;
  7 + let fixture: ComponentFixture<PopoverComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ PopoverComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(PopoverComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/components/popover/popover.component.ts
Diff comments   View file @ d005793
... ... @@ -0,0 +1,23 @@
  1 +import { Component, OnInit, Input } from '@angular/core';
  2 +import { PopoverDirective } from 'ngx-bootstrap/popover';
  3 +
  4 +@Component({
  5 + selector: 'app-popover',
  6 + templateUrl: './popover.component.html',
  7 + styleUrls: ['./popover.component.scss']
  8 +})
  9 +export class PopoverComponent implements OnInit {
  10 +
  11 + @Input() popover: PopoverDirective;
  12 + @Input() popoverContent: string;
  13 +
  14 + constructor() { }
  15 +
  16 + ngOnInit() {
  17 + }
  18 +
  19 + hide() {
  20 + this.popover.hide();
  21 + }
  22 +
  23 +}
src/app/wrappers/producto.ts
Diff comments   View file @ d005793
... ... @@ -89,4 +89,5 @@ export interface Producto {
89 89 nombreImagen?: any;
90 90  
91 91 cantidad?:number;
  92 + showCargarProducto?:boolean;
92 93 }
src/assets/icons/escanear.png
View file @ d005793

8.51 KB
src/assets/icons/primario.buscar.png
View file @ d005793

8.82 KB
src/assets/icons/primario.ordenar.png
View file @ d005793

6.55 KB
src/assets/icons/primario.promociones.png
View file @ d005793

9.35 KB
src/assets/img/descarga.jpg
View file @ d005793

6.1 KB
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ d005793
... ... @@ -6,9 +6,35 @@ $theme-colors: (
6 6 light: white
7 7 );
8 8  
9   -.popover{
10   - background-color: #2872AE !important;
11   - color: white !important;
  9 +.popover {
  10 + min-width: 470px !important;
  11 + max-width: auto !important;
  12 + border: none !important;
  13 + border-radius: 1.5rem !important;
  14 + padding: 0 !important;
  15 + .popover-body {
  16 + padding: 0 !important;
  17 + }
  18 +}
  19 +
  20 +.bs-popover-left .arrow::after,
  21 +.bs-popover-auto[x-placement^="left"] .arrow::after {
  22 + border-left-color: #2872ae !important; // Any color here
  23 +}
  24 +
  25 +.bs-popover-right .arrow::after,
  26 +.bs-popover-auto[x-placement^="right"] .arrow::after {
  27 + border-right-color: #2872ae !important; // Any color here
  28 +}
  29 +
  30 +.bs-popover-top .arrow::after,
  31 +.bs-popover-auto[x-placement^="top"] .arrow::after {
  32 + border-top-color: #2872ae !important; // Any color here
  33 +}
  34 +
  35 +.bs-popover-bottom .arrow::after,
  36 +.bs-popover-auto[x-placement^="bottom"] .arrow::after {
  37 + border-bottom-color: #2872ae !important; // Any color here
12 38 }
13 39  
14 40 .list-group-item.active {
... ... @@ -16,5 +42,4 @@ $theme-colors: (
16 42 border-color: #2872ae !important;
17 43 }
18 44  
19   -
20 45 @import "../../../node_modules/bootstrap/scss/bootstrap.scss";