Commit 6f586d8547390804972aba64ab8990347da3c06d
Exists in
master
and in
1 other branch
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !15
Showing
14 changed files
 
Show diff stats
.gitignore
| 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 | 12 | ||
| 13 | # profiling files | 13 | # profiling files | 
| 14 | chrome-profiler-events.json | 14 | chrome-profiler-events.json | 
| 15 | speed-measure-plugin.json | 15 | speed-measure-plugin.json | 
| 16 | 16 | ||
| 17 | # IDEs and editors | 17 | # IDEs and editors | 
| 18 | /.idea | 18 | /.idea | 
| 19 | .project | 19 | .project | 
| 20 | .classpath | 20 | .classpath | 
| 21 | .c9/ | 21 | .c9/ | 
| 22 | *.launch | 22 | *.launch | 
| 23 | .settings/ | 23 | .settings/ | 
| 24 | *.sublime-workspace | 24 | *.sublime-workspace | 
| 25 | 25 | ||
| 26 | # IDE - VSCode | 26 | # IDE - VSCode | 
| 27 | .vscode/* | 27 | .vscode/* | 
| 28 | !.vscode/settings.json | 28 | !.vscode/settings.json | 
| 29 | !.vscode/tasks.json | 29 | !.vscode/tasks.json | 
| 30 | !.vscode/launch.json | 30 | !.vscode/launch.json | 
| 31 | !.vscode/extensions.json | 31 | !.vscode/extensions.json | 
| 32 | .history/* | 32 | .history/* | 
| 33 | 33 | ||
| 34 | # misc | 34 | # misc | 
| 35 | /.sass-cache | 35 | /.sass-cache | 
| 36 | /connect.lock | 36 | /connect.lock | 
| 37 | /coverage | 37 | /coverage | 
| 38 | /libpeerconnection.log | 38 | /libpeerconnection.log | 
| 39 | npm-debug.log | 39 | npm-debug.log | 
| 40 | yarn-error.log | 40 | yarn-error.log | 
| 41 | testem.log | 41 | testem.log | 
| 42 | /typings | 42 | /typings | 
| 43 | 43 | ||
| 44 | # System Files | 44 | # System Files | 
| 45 | .DS_Store | 45 | .DS_Store | 
| 46 | Thumbs.db | 46 | Thumbs.db | 
| 47 | |||
| 48 | # Project Settings | ||
| 49 | src/etc/AppSettings.ts | ||
| 47 | 50 | 
src/app/components/busqueda-productos/busqueda-productos.component.html
| 1 | <div class="row m-0 fade-in"> | 1 | <div class="row m-0 fade-in"> | 
| 2 | <div class="col-10 p-0"> | 2 | <div class="col-10 p-0"> | 
| 3 | <!-- TOP HEADER --> | 3 | <!-- TOP HEADER --> | 
| 4 | <app-header></app-header> | 4 | <app-header></app-header> | 
| 5 | 5 | ||
| 6 | <!-- NOMBRE DE SECCION --> | 6 | <!-- NOMBRE DE SECCION --> | 
| 7 | <div class="row m-0"> | 7 | <div class="row m-0"> | 
| 8 | <div class="col-12 p-0"> | 8 | <div class="col-12 p-0"> | 
| 9 | <p class="h5 py-1 bg-light text-muted text-center"> | 9 | <p class="h5 py-1 bg-gray text-muted text-center"> | 
| 10 | Búsqueda | 10 | Búsqueda | 
| 11 | <i class="fa fa-search"></i> | 11 | <i class="fa fa-search"></i> | 
| 12 | </p> | 12 | </p> | 
| 13 | </div> | 13 | </div> | 
| 14 | </div> | 14 | </div> | 
| 15 | 15 | ||
| 16 | <div class="row m-4 disable-user-select"> | 16 | <div class="row m-4 disable-user-select"> | 
| 17 | 17 | ||
| 18 | <!-- FILTROS --> | 18 | <!-- FILTROS --> | 
| 19 | <div class="col-sm-2 p-1"> | 19 | <div class="col-sm-2 p-1"> | 
| 20 | <div class="text-center"> | 20 | <div class="text-center"> | 
| 21 | <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> | 21 | <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> | 
| 22 | </div> | 22 | </div> | 
| 23 | <ul class="list-group"> | 23 | <ul class="list-group"> | 
| 24 | <li | 24 | <li | 
| 25 | [ngClass]="{active: categoria == 1}" | 25 | [ngClass]="{active: categoria == 1}" | 
| 26 | (click)="categoria = 1" | 26 | (click)="categoria = 1" | 
| 27 | class="list-group-item list-group-item-action text-center my-1 p-2 h6"> | 27 | class="list-group-item list-group-item-action text-center my-1 p-2 h6"> | 
| 28 | Combos y Promociones | 28 | Combos y Promociones | 
| 29 | </li> | 29 | </li> | 
| 30 | <li | 30 | <li | 
| 31 | [ngClass]="{active: categoria == 2}" | 31 | [ngClass]="{active: categoria == 2}" | 
| 32 | (click)="categoria = 2" | 32 | (click)="categoria = 2" | 
| 33 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 33 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 
| 34 | Todos | 34 | Todos | 
| 35 | </li> | 35 | </li> | 
| 36 | <li | 36 | <li | 
| 37 | [ngClass]="{active: categoria == 3}" | 37 | [ngClass]="{active: categoria == 3}" | 
| 38 | (click)="categoria = 3" | 38 | (click)="categoria = 3" | 
| 39 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 39 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 
| 40 | Bebidas | 40 | Bebidas | 
| 41 | </li> | 41 | </li> | 
| 42 | <li | 42 | <li | 
| 43 | [ngClass]="{active: categoria == 4}" | 43 | [ngClass]="{active: categoria == 4}" | 
| 44 | (click)="categoria = 4" | 44 | (click)="categoria = 4" | 
| 45 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 45 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 
| 46 | Sandwichería | 46 | Sandwichería | 
| 47 | </li> | 47 | </li> | 
| 48 | <li | 48 | <li | 
| 49 | [ngClass]="{active: categoria == 5}" | 49 | [ngClass]="{active: categoria == 5}" | 
| 50 | (click)="categoria = 5" | 50 | (click)="categoria = 5" | 
| 51 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 51 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 
| 52 | Panaderia | 52 | Panaderia | 
| 53 | </li> | 53 | </li> | 
| 54 | <li | 54 | <li | 
| 55 | [ngClass]="{active: categoria == 6}" | 55 | [ngClass]="{active: categoria == 6}" | 
| 56 | (click)="categoria = 6" | 56 | (click)="categoria = 6" | 
| 57 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 57 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 
| 58 | Golosinas | 58 | Golosinas | 
| 59 | </li> | 59 | </li> | 
| 60 | <li | 60 | <li | 
| 61 | [ngClass]="{active: categoria == 7}" | 61 | [ngClass]="{active: categoria == 7}" | 
| 62 | (click)="categoria = 7" | 62 | (click)="categoria = 7" | 
| 63 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 63 | class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> | 
| 64 | Tabaqueria | 64 | Tabaqueria | 
| 65 | </li> | 65 | </li> | 
| 66 | </ul> | 66 | </ul> | 
| 67 | </div> | 67 | </div> | 
| 68 | 68 | ||
| 69 | <!-- SEARCH INPUT --> | 69 | <!-- SEARCH INPUT --> | 
| 70 | <div *ngIf="productos.length > 0" class="fade-in col-sm-10"> | 70 | <div *ngIf="productos.length > 0" class="fade-in col-sm-10"> | 
| 71 | 71 | ||
| 72 | <div class="form-group row search"> | 72 | <div class="form-group row search"> | 
| 73 | <div class="col-sm-10"> | 73 | <div class="col-sm-10"> | 
| 74 | <span class="fa fa-search form-control-lg form-control-search pl-3"></span> | 74 | <span class="fa fa-search form-control-lg form-control-search pl-3"></span> | 
| 75 | <input | 75 | <input | 
| 76 | type="text" | 76 | type="text" | 
| 77 | class="form-control form-control-lg shadow-sm rounded-pill px-5" | 77 | class="form-control form-control-lg shadow-sm rounded-pill px-5" | 
| 78 | placeholder="Búsqueda productos" | 78 | placeholder="Búsqueda productos" | 
| 79 | [(ngModel)]="searchTerm" | 79 | [(ngModel)]="searchTerm" | 
| 80 | (ngModelChange)="filterItems()"> | 80 | (ngModelChange)="filterItems()"> | 
| 81 | </div> | 81 | </div> | 
| 82 | <!-- BOTON VOLVER --> | 82 | <!-- BOTON VOLVER --> | 
| 83 | <div class="col-sm-2"> | 83 | <div class="col-sm-2"> | 
| 84 | <button | 84 | <button | 
| 85 | type="button" | 85 | type="button" | 
| 86 | class="btn btn-light btn-lg shadow-sm" | 86 | class="btn btn-light btn-lg shadow-sm" | 
| 87 | [routerLink]="['/inicio']"> | 87 | [routerLink]="['/inicio']"> | 
| 88 | <span class="font-weight-normal h6">Volver  </span> | 88 | <span class="font-weight-normal h6">Volver  </span> | 
| 89 | <i class="fa fa-undo text-warning" aria-hidden="true"></i> | 89 | <i class="fa fa-undo text-warning" aria-hidden="true"></i> | 
| 90 | </button> | 90 | </button> | 
| 91 | </div> | 91 | </div> | 
| 92 | </div> | 92 | </div> | 
| 93 | |||
| 94 | <!-- LISTA DE PRODUCTOS --> | 93 | <!-- LISTA DE PRODUCTOS --> | 
| 95 | <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> | 94 | <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> | 
| 96 | <div | 95 | <div | 
| 97 | class="col-4 p-2" | 96 | class="col-4 p-2" | 
| 98 | *ngFor="let producto of auxProductos"> | 97 | *ngFor="let producto of auxProductos"> | 
| 99 | <div class="card-effect bg-white rounded-sm shadow border-0"> | 98 | <div class="card-effect bg-white rounded-sm shadow border-0"> | 
| 100 | <img src="../../../assets/img/descarga.jpg" class="w-75 m-auto"> | 99 | <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-75 m-auto"> | 
| 101 | <div class="p-2"> | 100 | <div class="p-2"> | 
| 102 | <p class="h6 text-left m-0">{{producto.DetArt}}</p> | 101 | <p class="h6 text-left m-0">{{producto.DetArt}}</p> | 
| 103 | <div class="row justify-content-between m-0"> | 102 | <div class="row justify-content-between m-0"> | 
| 104 | <div class="col-12 p-0"> | 103 | <div class="col-12 p-0"> | 
| 105 | <div class="text-left"> | 104 | <div class="text-left"> | 
| 106 | <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> | 105 | <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> | 
| 107 | <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> | 106 | <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> | 
| 108 | </div> | 107 | </div> | 
| 109 | </div> | 108 | </div> | 
| 110 | <div class="col-12 my-auto pt-2 pr-2 p-0"> | 109 | <div class="col-12 my-auto pt-2 pr-2 p-0"> | 
| 111 | <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> | 110 | <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> | 
| 112 | </div> | 111 | </div> | 
| 113 | </div> | 112 | </div> | 
| 114 | </div> | 113 | </div> | 
| 115 | </div> | 114 | </div> | 
| 116 | </div> | 115 | </div> | 
| 117 | </div> | 116 | </div> | 
| 118 | </div> | 117 | </div> | 
| 119 | 118 | ||
| 120 | <!-- SPINNER --> | 119 | <!-- SPINNER --> | 
| 121 | <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center"> | 120 | <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center"> | 
| 122 | <div class="spinner-border spinner-lg text-secondary" role="status"></div> | 121 | <div class="spinner-border spinner-lg text-secondary" role="status"></div> | 
| 123 | <span class="text-secondary m-2 h5">Cargando información.</span> | 122 | <span class="text-secondary m-2 h5">Cargando información.</span> | 
| 124 | </div> | 123 | </div> | 
| 125 | 124 | ||
| 126 | </div> | 125 | </div> | 
| 127 | 126 | ||
| 128 | </div> | 127 | </div> | 
| 129 | 128 | ||
| 130 | <!-- SIDEBAR --> | 129 | <!-- SIDEBAR --> | 
| 131 | <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> | 130 | <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> | 
| 132 | </div> | 131 | </div> | 
| 133 | 132 | 
src/app/components/busqueda-productos/busqueda-productos.component.ts
| 1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; | 
| 2 | import { ProductoService } from 'src/app/services/producto.service'; | 2 | import { ProductoService } from 'src/app/services/producto.service'; | 
| 3 | import { Producto } from 'src/app/wrappers/producto'; | 3 | import { Producto } from 'src/app/wrappers/producto'; | 
| 4 | import { appSettings } from 'src/etc/AppSettings'; | ||
| 4 | 5 | ||
| 5 | @Component({ | 6 | @Component({ | 
| 6 | selector: 'app-busqueda-productos', | 7 | selector: 'app-busqueda-productos', | 
| 7 | templateUrl: './busqueda-productos.component.html', | 8 | templateUrl: './busqueda-productos.component.html', | 
| 8 | styleUrls: ['./busqueda-productos.component.scss'] | 9 | styleUrls: ['./busqueda-productos.component.scss'] | 
| 9 | }) | 10 | }) | 
| 10 | export class BusquedaProductosComponent implements OnInit { | 11 | export class BusquedaProductosComponent implements OnInit { | 
| 11 | 12 | ||
| 12 | productos: Producto[] = []; | 13 | private productos: Producto[] = []; | 
| 13 | auxProductos: Producto[] = []; | 14 | private auxProductos: Producto[] = []; | 
| 14 | searchTerm: string = ''; | 15 | private searchTerm: string = ''; | 
| 15 | showSpinner: boolean = true; | 16 | private showSpinner: boolean = true; | 
| 16 | categoria: Categorias = Categorias.todos; | 17 | private categoria: Categorias = Categorias.todos; | 
| 18 | private apiUrl : string = appSettings.apiUrl; | ||
| 17 | 19 | ||
| 18 | constructor(private productoService: ProductoService) { } | 20 | constructor(private productoService: ProductoService) { } | 
| 19 | 21 | ||
| 20 | ngOnInit() { | 22 | ngOnInit() { | 
| 21 | 23 | ||
| 22 | this.productoService.getAll() | 24 | this.productoService.getAll() | 
| 23 | .subscribe((data: Producto[]) => { | 25 | .subscribe((data: Producto[]) => { | 
| 24 | 26 | ||
| 25 | this.auxProductos = this.productos = data; | 27 | this.auxProductos = this.productos = data; | 
| 26 | }, (error) => { | 28 | }, (error) => { | 
| 27 | this.showSpinner = false; | 29 | this.showSpinner = false; | 
| 28 | console.error(error); | 30 | console.error(error); | 
| 29 | }); | 31 | }); | 
| 30 | } | 32 | } | 
| 31 | 33 | ||
| 32 | filterItems() { | 34 | filterItems() { | 
| 33 | console.log(''); | 35 | console.log(''); | 
| 34 | this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())); | 36 | this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())); | 
| 35 | } | 37 | } | 
| 36 | 38 | ||
| 37 | } | 39 | } | 
| 38 | 40 | ||
| 39 | enum Categorias { | 41 | enum Categorias { | 
| 40 | promosCombos = 1, | 42 | promosCombos = 1, | 
| 41 | todos = 2, | 43 | todos = 2, | 
| 42 | bebidas = 3, | 44 | bebidas = 3, | 
| 43 | sandwicheria = 4, | 45 | sandwicheria = 4, | 
| 44 | panaderia = 5, | 46 | panaderia = 5, | 
| 45 | golosinas = 6, | 47 | golosinas = 6, | 
| 46 | tabaqueria = 7, | 48 | tabaqueria = 7, | 
| 47 | } | 49 | } | 
| 48 | 50 | 
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
| 1 | <app-header></app-header> | 1 | <app-header></app-header> | 
| 2 | <div class="row"> | 2 | <div class="row"> | 
| 3 | <div class="col-10"> | 3 | <div class="col-10"> | 
| 4 | 4 | ||
| 5 | <!-- NOMBRE DE SECCION --> | 5 | <!-- NOMBRE DE SECCION --> | 
| 6 | <div class="row m-0"> | 6 | <div class="row m-0"> | 
| 7 | <div class="col-12 p-0"> | 7 | <div class="col-12 p-0"> | 
| 8 | <p class="h5 py-1 bg-light text-muted text-center">Pago <i class="fa fa-usd"></i></p> | 8 | <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p> | 
| 9 | </div> | 9 | </div> | 
| 10 | </div> | 10 | </div> | 
| 11 | 11 | ||
| 12 | <div class="row m-4 d-flex align-items-center"> | 12 | <div class="row m-4 d-flex align-items-center"> | 
| 13 | <div class="col-4"> | 13 | <div class="col-4"> | 
| 14 | <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1> | 14 | <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1> | 
| 15 | </div> | 15 | </div> | 
| 16 | <div class="col-8"> | 16 | <div class="col-8"> | 
| 17 | <h2>¿Desea finalizar su compra?</h2> | 17 | <h2>¿Desea finalizar su compra?</h2> | 
| 18 | <h3>Por favor, controle y confirme su compra.</h3> | 18 | <h3>Por favor, controle y confirme su compra.</h3> | 
| 19 | </div> | 19 | </div> | 
| 20 | <div class="col-sm-7"> | 20 | <div class="col-sm-7"> | 
| 21 | 21 | ||
| 22 | <div class="row pr-3 vh-50 overflow-scroll"> | 22 | <div class="row pr-3 vh-50 overflow-scroll"> | 
| 23 | <div | 23 | <div | 
| 24 | class="col-4 p-2" | 24 | class="col-4 p-2" | 
| 25 | *ngFor="let producto of productos"> | 25 | *ngFor="let producto of productos"> | 
| 26 | <div class="card card-effect bg-white rounded-sm shadow border-0"> | 26 | <div class="card card-effect bg-white rounded-sm shadow border-0"> | 
| 27 | <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto"> | 27 | <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto"> | 
| 28 | <div class="card-body"> | 28 | <div class="card-body"> | 
| 29 | <p class="h5 text-left m-0">{{producto.variable}}</p> | 29 | <p class="h5 text-left m-0">{{producto.variable}}</p> | 
| 30 | <div class="text-left"> | 30 | <div class="text-left"> | 
| 31 | <p class="m-0"><small>ASDASDSADASDSA</small></p> | 31 | <p class="m-0"><small>ASDASDSADASDSA</small></p> | 
| 32 | <p class="m-0"><small>COD. 1222</small></p> | 32 | <p class="m-0"><small>COD. 1222</small></p> | 
| 33 | <p class="m-0"><strong>$ 563</strong></p> | 33 | <p class="m-0"><strong>$ 563</strong></p> | 
| 34 | </div> | 34 | </div> | 
| 35 | </div> | 35 | </div> | 
| 36 | </div> | 36 | </div> | 
| 37 | </div> | 37 | </div> | 
| 38 | </div> | 38 | </div> | 
| 39 | </div> | 39 | </div> | 
| 40 | <div class="col-sm-5"> | 40 | <div class="col-sm-5"> | 
| 41 | <h3>TOTAL: $553</h3> | 41 | <h3>TOTAL: $553</h3> | 
| 42 | </div> | 42 | </div> | 
| 43 | </div> | 43 | </div> | 
| 44 | 44 | ||
| 45 | <!-- SIDEBAR --> | 45 | <!-- SIDEBAR --> | 
| 46 | </div> | 46 | </div> | 
| 47 | <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> | 47 | <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> | 
| 48 | </div> | 48 | </div> | 
| 49 | 49 | 
src/app/components/header/header.component.html
| 1 | <div class="bg-danger py-1 py-sm-2 py-lg-5"> | ||
| 2 | <p class="text-center">HEADER</p> | ||
| 3 | </div> | ||
| 1 | <div class="row bg-light p-4 justify-content-between"> | ||
| 2 | <div class="col-auto"> | ||
| 3 | <img src="{{apiUrl}}/imagenes/logoaxion.png"> | ||
| 4 | </div> | ||
| 5 | <div class="col-auto"> | ||
| 6 | <img src="{{apiUrl}}/imagenes/logodebo.png"> | 
src/app/components/header/header.component.ts
| 1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; | 
| 2 | import { appSettings } from 'src/etc/AppSettings'; | ||
| 2 | 3 | ||
| 3 | @Component({ | 4 | @Component({ | 
| 4 | selector: 'app-header', | 5 | selector: 'app-header', | 
| 5 | templateUrl: './header.component.html', | 6 | templateUrl: './header.component.html', | 
| 6 | styleUrls: ['./header.component.scss'] | 7 | styleUrls: ['./header.component.scss'] | 
| 7 | }) | 8 | }) | 
| 8 | export class HeaderComponent implements OnInit { | 9 | export class HeaderComponent implements OnInit { | 
| 9 | 10 | ||
| 11 | private apiUrl : string = appSettings.apiUrl; | ||
| 12 | |||
| 10 | constructor() { } | 13 | constructor() { } | 
| 11 | 14 | ||
| 12 | ngOnInit() { | 15 | ngOnInit() { | 
| 13 | } | 16 | } | 
| 14 | 17 | ||
| 15 | } | 18 | } | 
| 16 | 19 | 
src/app/components/inicio/inicio.component.html
| 1 | <div class="row m-0 fade-in"> | 1 | <div class="row m-0 fade-in"> | 
| 2 | <div class="col-10 p-0"> | 2 | <div class="col-10 p-0"> | 
| 3 | <!-- TOP HEADER --> | 3 | <!-- TOP HEADER --> | 
| 4 | <app-header></app-header> | 4 | <app-header></app-header> | 
| 5 | 5 | ||
| 6 | <!-- NOMBRE DE SECCION --> | 6 | <!-- NOMBRE DE SECCION --> | 
| 7 | <div class="row m-0"> | 7 | <div class="row m-0"> | 
| 8 | <div class="col-12 p-0"> | 8 | <div class="col-12 p-0"> | 
| 9 | <p class="h5 py-1 bg-light text-muted text-center">Inicio</p> | 9 | <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p> | 
| 10 | </div> | 10 | </div> | 
| 11 | </div> | 11 | </div> | 
| 12 | 12 | ||
| 13 | <div class="row m-4 d-flex align-items-center disable-user-select"> | 13 | <div class="row m-4 d-flex align-items-center disable-user-select"> | 
| 14 | <div class="col-md-5 d-flex align-items-end flex-column"> | 14 | <div class="col-md-5 d-flex align-items-end flex-column"> | 
| 15 | 15 | ||
| 16 | <!-- TOOL TIp --> | 16 | <!-- TOOL TIp --> | 
| 17 | <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto" | 17 | <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto" | 
| 18 | *ngIf="tooltip === true"> | 18 | *ngIf="tooltip === true"> | 
| 19 | <div class="arrow"></div> | 19 | <div class="arrow"></div> | 
| 20 | <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4> | 20 | <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4> | 
| 21 | <div class="popover-content mw-100 h-100 mb-auto"> | 21 | <div class="popover-content mw-100 h-100 mb-auto"> | 
| 22 | <div class="d-flex flex-column h-75 text-center"> | 22 | <div class="d-flex flex-column h-75 text-center"> | 
| 23 | <div class="overflow-auto overflow-scroll mb-2"> | 23 | <div class="overflow-auto overflow-scroll mb-2"> | 
| 24 | 24 | ||
| 25 | <div class="card bg-white rounded-sm shadow border-0 black-text my-3"> | 25 | <div class="card bg-white rounded-sm shadow border-0 black-text my-3"> | 
| 26 | <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded"> | 26 | <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded"> | 
| 27 | <div class="col-6 p-0 text-left my-auto"> | 27 | <div class="col-6 p-0 text-left my-auto"> | 
| 28 | <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p> | 28 | <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p> | 
| 29 | <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p> | 29 | <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p> | 
| 30 | </div> | 30 | </div> | 
| 31 | <div class="col-6 p-1 text-center my-auto"> | 31 | <div class="col-6 p-1 text-center my-auto"> | 
| 32 | <p class="m-0 h1 text-right">{{105 | currency}}</p> | 32 | <p class="m-0 h1 text-right">{{105 | currency}}</p> | 
| 33 | </div> | 33 | </div> | 
| 34 | </div> | 34 | </div> | 
| 35 | </div> | 35 | </div> | 
| 36 | 36 | ||
| 37 | </div> | 37 | </div> | 
| 38 | </div> | 38 | </div> | 
| 39 | </div> | 39 | </div> | 
| 40 | </div> | 40 | </div> | 
| 41 | 41 | ||
| 42 | <!-- PROMOCIONES --> | 42 | <!-- PROMOCIONES --> | 
| 43 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> | 43 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> | 
| 44 | <div class="card-body text-left p-4"> | 44 | <div class="card-body text-left p-4"> | 
| 45 | <div class="row"> | 45 | <div class="row"> | 
| 46 | <div class="col-7"> | 46 | <div class="col-7"> | 
| 47 | <p class="h3 card-title">Promociones</p> | 47 | <p class="h3 card-title">Promociones</p> | 
| 48 | </div> | 48 | </div> | 
| 49 | <div class="col-5 p-0"> | 49 | <div class="col-5 p-0"> | 
| 50 | <img src="../../../assets/icons/primario.promociones.png" alt="" class="icon-dim m-0"> | 50 | <img src="../../../assets/icons/primario.promociones.png" alt="" class="icon-dim m-0"> | 
| 51 | </div> | 51 | </div> | 
| 52 | </div> | 52 | </div> | 
| 53 | <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> | 53 | <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> | 
| 54 | </div> | 54 | </div> | 
| 55 | <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> | 55 | <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> | 
| 56 | <ol class="carousel-indicators m-0"> | 56 | <ol class="carousel-indicators m-0"> | 
| 57 | <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li> | 57 | <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li> | 
| 58 | <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li> | 58 | <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li> | 
| 59 | <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li> | 59 | <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li> | 
| 60 | </ol> | 60 | </ol> | 
| 61 | <div class="carousel-inner"> | 61 | <div class="carousel-inner"> | 
| 62 | <div class="carousel-item active"> | 62 | <div class="carousel-item active"> | 
| 63 | <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> | 63 | <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> | 
| 64 | </div> | 64 | </div> | 
| 65 | <div class="carousel-item"> | 65 | <div class="carousel-item"> | 
| 66 | <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> | 66 | <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> | 
| 67 | </div> | 67 | </div> | 
| 68 | <div class="carousel-item"> | 68 | <div class="carousel-item"> | 
| 69 | <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> | 69 | <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> | 
| 70 | </div> | 70 | </div> | 
| 71 | </div> | 71 | </div> | 
| 72 | </div> | 72 | </div> | 
| 73 | </div> | 73 | </div> | 
| 74 | 74 | ||
| 75 | <!-- ORDENAR --> | 75 | <!-- ORDENAR --> | 
| 76 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> | 76 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> | 
| 77 | <div class="card-body text-left p-4"> | 77 | <div class="card-body text-left p-4"> | 
| 78 | <div class="row"> | 78 | <div class="row"> | 
| 79 | <div class="col-5"> | 79 | <div class="col-5"> | 
| 80 | <p class="h3 card-title">Ordenar</p> | 80 | <p class="h3 card-title">Ordenar</p> | 
| 81 | </div> | 81 | </div> | 
| 82 | <div class="col-7 p-0"> | 82 | <div class="col-7 p-0"> | 
| 83 | <img src="../../../assets/icons/primario.ordenar.png" alt="" class="icon-dim"> | 83 | <img src="../../../assets/icons/primario.ordenar.png" alt="" class="icon-dim"> | 
| 84 | </div> | 84 | </div> | 
| 85 | </div> | 85 | </div> | 
| 86 | <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> | 86 | <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> | 
| 87 | </div> | 87 | </div> | 
| 88 | <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg"> | 88 | <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg"> | 
| 89 | </div> | 89 | </div> | 
| 90 | </div> | 90 | </div> | 
| 91 | 91 | ||
| 92 | <div class="col-md-7 d-flex align-items-end flex-column"> | 92 | <div class="col-md-7 d-flex align-items-end flex-column"> | 
| 93 | 93 | ||
| 94 | <!-- CARGAR PRODUCTOS --> | 94 | <!-- CARGAR PRODUCTOS --> | 
| 95 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> | 95 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> | 
| 96 | <div class="card-body text-left p-4"> | 96 | <div class="card-body text-left p-4"> | 
| 97 | <div class="row"> | 97 | <div class="row"> | 
| 98 | <div class="col-6"> | 98 | <div class="col-6"> | 
| 99 | <p class="h3 card-title">Cargar Productos</p> | 99 | <p class="h3 card-title">Cargar Productos</p> | 
| 100 | </div> | 100 | </div> | 
| 101 | <div class="col-6 p-0"> | 101 | <div class="col-6 p-0"> | 
| 102 | <img src="../../../assets//icons/escanear.png" alt="" class="icon-dim mb-2"> | 102 | <img src="../../../assets//icons/escanear.png" alt="" class="icon-dim mb-2"> | 
| 103 | </div> | 103 | </div> | 
| 104 | </div> | 104 | </div> | 
| 105 | <p class="h5 card-text text-muted font-weight-light"> | 105 | <p class="h5 card-text text-muted font-weight-light"> | 
| 106 | Coloque el código de<br> | 106 | Coloque el código de<br> | 
| 107 | barras o QR frente al scanner. | 107 | barras o QR frente al scanner. | 
| 108 | </p> | 108 | </p> | 
| 109 | </div> | 109 | </div> | 
| 110 | <div class="card bg-white border-0 w-75 mx-auto mb-4"> | 110 | <div class="card bg-white border-0 w-75 mx-auto mb-4"> | 
| 111 | <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg"> | 111 | <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg"> | 
| 112 | <div class="card-body text-left p-2"> | 112 | <div class="card-body text-left p-2"> | 
| 113 | <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> | 113 | <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> | 
| 114 | <p class="m-0 card-text text-muted">COD. 12121222</p> | 114 | <p class="m-0 card-text text-muted">COD. 12121222</p> | 
| 115 | </div> | 115 | </div> | 
| 116 | </div> | 116 | </div> | 
| 117 | </div> | 117 | </div> | 
| 118 | 118 | ||
| 119 | <!-- BUSCAR PRODUCTOS --> | 119 | <!-- BUSCAR PRODUCTOS --> | 
| 120 | <div (click)="goPage('busqueda-productos')" | 120 | <div (click)="goPage('busqueda-productos')" | 
| 121 | class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> | 121 | class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> | 
| 122 | <div class="card-body text-left p-4"> | 122 | <div class="card-body text-left p-4"> | 
| 123 | <div class="row"> | 123 | <div class="row"> | 
| 124 | <div class="col-6"> | 124 | <div class="col-6"> | 
| 125 | <p class="h3 card-title">Buscar Productos</p> | 125 | <p class="h3 card-title">Buscar Productos</p> | 
| 126 | <p class="h5 card-text text-muted font-weight-light"> | 126 | <p class="h5 card-text text-muted font-weight-light"> | 
| 127 | Busque aquí los productos<br> | 127 | Busque aquí los productos<br> | 
| 128 | que no tienen código </p> | 128 | que no tienen código </p> | 
| 129 | </div> | 129 | </div> | 
| 130 | <div class="col-6 p-0"> | 130 | <div class="col-6 p-0"> | 
| 131 | <img src="../../../assets/icons/primario.buscar.png" alt="" class="icon-dim mb-2"> | 131 | <img src="../../../assets/icons/primario.buscar.png" alt="" class="icon-dim mb-2"> | 
| 132 | </div> | 132 | </div> | 
| 133 | </div> | 133 | </div> | 
| 134 | 134 | ||
| 135 | </div> | 135 | </div> | 
| 136 | </div> | 136 | </div> | 
| 137 | 137 | ||
| 138 | </div> | 138 | </div> | 
| 139 | 139 | ||
| 140 | </div> | 140 | </div> | 
| 141 | 141 | ||
| 142 | </div> | 142 | </div> | 
| 143 | 143 | ||
| 144 | <!-- SIDEBAR --> | 144 | <!-- SIDEBAR --> | 
| 145 | <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> | 145 | <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> | 
| 146 | </div> | 146 | </div> | 
src/app/components/sidebar/sidebar.component.html
| 1 | <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center"> | 1 | <div class="d-flex align-items-center flex-column h-100 pt-2 text-center"> | 
| 2 | 2 | ||
| 3 | <h4 class="border-bottom border-white"> Mi compra </h4> | 3 | <h4 class="border-bottom border-white text-white"> Mi compra </h4> | 
| 4 | <div class="overflow-auto overflow-scroll mb-2"> | 4 | |
| 5 | <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index"> | 5 | <div class="overflow-auto overflow-scroll mb-2 w-100"> | 
| 6 | <img src="{{prod.img}}" class="card-img-top" alt="..."> | 6 | <div class="my-2 bg-white border-0 rounded-sm" *ngFor="let prod of productos; let i = index"> | 
| 7 | <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded"> | 7 | <img class="m-auto pt-2" [src]="prod.img"> | 
| 8 | <div class="col-8 p-0 text-left my-auto"> | 8 | <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> | 
| 9 | <p class="m-0 card-description">{{prod.desc}}</p> | 9 | <div class="col-12 p-0 pt-2 text-left my-auto"> | 
| 10 | <p class="m-0 card-description">COD: {{prod.cod}}</p> | 10 | <p class="m-0 h6"><small>{{prod.desc}}</small></p> | 
| 11 | <p class="m-0 h6"><small>COD: {{prod.cod}}</small></p> | ||
| 11 | </div> | 12 | </div> | 
| 12 | <div class="col-4 p-1 text-center my-auto"> | 13 | <div class="col-12 pr-1 text-right h6 my-auto "> | 
| 13 | {{prod.precio | currency}} | 14 | <p class="m-0">{{prod.precio | currency}}</p> | 
| 14 | </div> | 15 | </div> | 
| 15 | </div> | 16 | </div> | 
| 16 | <div class="row m-0 p-0"> | 17 | <div class="row m-0 p-0"> | 
| 17 | <div class="col p-1 pb-1 mt-2"> | 18 | <div class="col px-2 my-2"> | 
| 18 | <button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button> | 19 | <div class="btn-group-sm btn-group float-left my-auto" role="group"> | 
| 19 | <button type="button" class="btn btn-light btn-sm my-auto">Y</button> | 20 | <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)"> | 
| 20 | <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example"> | 21 | <i class="fa fa-plus" aria-hidden="true"></i> | 
| 21 | <button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button> | 22 | </button> | 
| 22 | <label for="" class="border border.white px-1">{{prod.cantidad}}</label> | 23 | <div class="bg-white border border-white px-3 my-auto text-dark h5"> | 
| 23 | <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button> | 24 | <small>{{prod.cantidad}}</small> | 
| 25 | </div> | ||
| 26 | <button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)"> | ||
| 27 | <i class="fa fa-minus" aria-hidden="true"></i> | ||
| 28 | </button> | ||
| 29 | </div> | ||
| 30 | </div> | ||
| 31 | <div class="col px-2 my-2"> | ||
| 32 | <div class="btn-group-sm btn-group float-right my-auto" role="group"> | ||
| 33 | <button type="button" class="btn btn-light btn-sm my-auto float-left border mr-2"> | ||
| 34 | <i class="fa fa-hand-o-up" aria-hidden="true"></i> | ||
| 35 | </button> | ||
| 36 | <button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)"> | ||
| 37 | <i class="fa fa-times" aria-hidden="true"></i> | ||
| 38 | </button> | ||
| 24 | </div> | 39 | </div> | 
| 25 | </div> | 40 | </div> | 
| 26 | </div> | 41 | </div> | 
| 27 | </div> | 42 | </div> | 
| 28 | </div> | 43 | </div> | 
| 29 | 44 | ||
| 30 | <div class="card mt-auto blue-gradient border-0"> | 45 | <div class="card rounded-top-sm mt-auto blue-gradient border-0"> | 
| 31 | <div class="card-body row"> | 46 | <div class="card-body row"> | 
| 32 | <div class="col"> | 47 | <div class="col"> | 
| 33 | <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4> | 48 | <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</h4> | 
| 34 | <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4> | 49 | <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</h4> | 
| 35 | <h3 class="text-secondary">Total</h3> | 50 | <h3 class="text-secondary">Total</h3> | 
| 36 | <h3 class="text-dark"><strong>{{total | currency}}</strong></h3> | 51 | <h3 class=""><strong>{{total | currency}}</strong></h3> | 
| 37 | </div> | 52 | </div> | 
| 38 | <div class="col 12 p-0"> | 53 | <div class="col 12 p-0"> | 
| 39 | <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito"><strong>Finalizar y pagar</strong></button> | 54 | <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito"> | 
| 55 | <strong>Finalizar y pagar</strong> | ||
| 56 | </button> | ||
| 40 | <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button> | 57 | <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button> | 
| 41 | </div> | 58 | </div> | 
| 42 | </div> | 59 | </div> | 
| 43 | </div> | ||
| 60 | </div> | ||
| 61 | </div> | 
src/app/components/sidebar/sidebar.component.scss
| 1 | .card-description{ | 1 | .card-description{ | 
| 2 | font-size: 12px; | 2 | font-size: 12px; | 
| 3 | } | ||
| 3 | } | ||
| 4 | |||
| 5 | app-sidebar { | ||
| 6 | background-color: red !important; | ||
| 7 | } | 
src/app/components/sidebar/sidebar.component.ts
| 1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; | 
| 2 | import { Producto } from 'src/app/wrappers/producto'; | ||
| 2 | 3 | ||
| 3 | 4 | ||
| 4 | @Component({ | 5 | @Component({ | 
| 5 | selector: 'app-sidebar', | 6 | selector: 'app-sidebar', | 
| 6 | templateUrl: './sidebar.component.html', | 7 | templateUrl: './sidebar.component.html', | 
| 7 | styleUrls: ['./sidebar.component.scss'] | 8 | styleUrls: ['./sidebar.component.scss'] | 
| 8 | }) | 9 | }) | 
| 9 | export class SidebarComponent implements OnInit { | 10 | export class SidebarComponent implements OnInit { | 
| 10 | 11 | ||
| 11 | private cont: number = 1; | 12 | private cont: number = 1; | 
| 12 | private min: number = 1; | 13 | private min: number = 1; | 
| 13 | private max: number = 50; | 14 | private max: number = 50; | 
| 14 | private total: number = 0; | 15 | private total: number = 0; | 
| 15 | 16 | ||
| 16 | private productos = [ | 17 | private productos = [ | 
| 17 | { | 18 | { | 
| 18 | "id": 1, | 19 | "id": 1, | 
| 19 | "desc": "Galletas Oreo", | 20 | "Detart": "Galletas Oreo", | 
| 20 | "cod": 225412, | 21 | "cod": 225412, | 
| 21 | "precio": 15, | 22 | "precio": 15, | 
| 22 | "img": "./assets/img/descarga.jpg", | 23 | "img": "./assets/img/logodebo.png", | 
| 23 | "cantidad": 1 | 24 | "cantidad": 1 | 
| 24 | }, | 25 | }, | 
| 25 | { | 26 | { | 
| 26 | "id": 2, | 27 | "id": 2, | 
| 27 | "desc": "Coca cola 500ml", | 28 | "desc": "Coca cola 500ml", | 
| 28 | "cod": 512632, | 29 | "cod": 512632, | 
| 29 | "precio": 40, | 30 | "precio": 40, | 
| 30 | "img": "./assets/img/descarga.jpg", | 31 | "img": "./assets/img/logodebo.png", | 
| 31 | "cantidad": 1 | 32 | "cantidad": 1 | 
| 32 | }, | 33 | }, | 
| 33 | { | 34 | { | 
| 34 | "id": 3, | 35 | "id": 3, | 
| 35 | "desc": "Pancho grande", | 36 | "desc": "Pancho grande", | 
| 36 | "cod": 775987, | 37 | "cod": 775987, | 
| 37 | "precio": 45, | 38 | "precio": 45, | 
| 38 | "img": "./assets/img/descarga.jpg", | 39 | "img": "./assets/img/logodebo.png", | 
| 39 | "cantidad": 1 | 40 | "cantidad": 1 | 
| 40 | } | 41 | } | 
| 41 | ]; | 42 | ]; | 
| 42 | 43 | ||
| 43 | constructor() { } | 44 | constructor() { } | 
| 44 | 45 | ||
| 45 | ngOnInit() { | 46 | ngOnInit() { | 
| 46 | 47 | ||
| 47 | this.getCantidadProductos(); | 48 | this.getCantidadProductos(); | 
| 48 | this.getTotal(); | 49 | this.getTotal(); | 
| 49 | 50 | ||
| 50 | } | 51 | } | 
| 51 | 52 | ||
| 52 | getCantidadProductos() { | 53 | getCantidadProductos() { | 
| 53 | var aux = 0; | 54 | var aux = 0; | 
| 54 | for (let i = 0; i < this.productos.length; i++) { | 55 | for (let i = 0; i < this.productos.length; i++) { | 
| 55 | ++aux; | 56 | ++aux; | 
| 56 | } | 57 | } | 
| 57 | return this.cont = aux; | 58 | return this.cont = aux; | 
| 58 | } | 59 | } | 
| 59 | 60 | ||
| 60 | getTotal() { | 61 | getTotal() { | 
| 61 | 62 | ||
| 62 | let subTotal = 0; | 63 | let subTotal = 0; | 
| 63 | for (let i = 0; i < this.productos.length; i++) { | 64 | for (let i = 0; i < this.productos.length; i++) { | 
| 64 | subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad); | 65 | subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad); | 
| 65 | } | 66 | } | 
| 66 | console.log(subTotal); | 67 | console.log(subTotal); | 
| 67 | return this.total = subTotal; | 68 | return this.total = subTotal; | 
| 68 | } | 69 | } | 
| 69 | 70 | ||
| 70 | public aumentarContador(index) { | 71 | public aumentarContador(index) { | 
| 71 | 72 | ||
| 72 | ++this.cont; | 73 | ++this.cont; | 
| 73 | for (let i = 0; i < this.productos.length; i++) { | 74 | for (let i = 0; i < this.productos.length; i++) { | 
| 74 | if (i === index) { | 75 | if (i === index) { | 
| 75 | this.total = this.total + this.productos[i].precio; | 76 | this.total = this.total + this.productos[i].precio; | 
| 76 | return (this.productos[i].cantidad === this.max) ? | 77 | return (this.productos[i].cantidad === this.max) ? | 
| 77 | this.productos[i].cantidad : ++this.productos[i].cantidad; | 78 | this.productos[i].cantidad : ++this.productos[i].cantidad; | 
| 78 | 79 | ||
| 79 | } | 80 | } | 
| 80 | } | 81 | } | 
| 81 | } | 82 | } | 
| 82 | 83 | ||
| 83 | decrementarContador(index) { | 84 | decrementarContador(index) { | 
| 84 | 85 | ||
| 85 | for (let i = 0; i < this.productos.length; i++) { | 86 | for (let i = 0; i < this.productos.length; i++) { | 
| 86 | if (i === index && this.productos[i].cantidad > 1) { | 87 | if (i === index && this.productos[i].cantidad > 1) { | 
| 87 | --this.productos[i].cantidad; | 88 | --this.productos[i].cantidad; | 
| 88 | --this.cont; | 89 | --this.cont; | 
| 89 | break; | 90 | break; | 
| 90 | } | 91 | } | 
| 91 | } | 92 | } | 
| 92 | 93 | ||
| 93 | this.getTotal() | 94 | this.getTotal() | 
| 94 | } | 95 | } | 
| 95 | 96 | ||
| 96 | setCantidadItems() { | 97 | setCantidadItems() { | 
| 97 | 98 | ||
| 98 | this.cont = 0; | 99 | this.cont = 0; | 
| 99 | for (let i = 0; i < this.productos.length; i++) { | 100 | for (let i = 0; i < this.productos.length; i++) { | 
| 100 | this.cont += this.productos[i].cantidad; | 101 | this.cont += this.productos[i].cantidad; | 
| 101 | } | 102 | } | 
| 102 | } | 103 | } | 
| 103 | 104 | ||
| 104 | deleteProducto(index) { | 105 | deleteProducto(index) { | 
| 105 | 106 | ||
| 106 | for (let i = 0; i < this.productos.length; i++) { | 107 | for (let i = 0; i < this.productos.length; i++) { | 
| 107 | if (i === index) { | 108 | if (i === index) { | 
| 108 | this.cont -= this.productos[i].cantidad; | 109 | this.cont -= this.productos[i].cantidad; | 
| 109 | //Elimina del total el precio de todo el item | 110 | //Elimina del total el precio de todo el item | 
| 110 | this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad); | 111 | this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad); | 
| 111 | this.productos.splice(i, 1); | 112 | this.productos.splice(i, 1); | 
| 112 | return; | 113 | return; | 
| 113 | } | 114 | } | 
| 114 | } | 115 | } | 
| 115 | } | 116 | } | 
| 116 | 117 | ||
| 117 | clearCar() { | 118 | clearCar() { | 
| 118 | 119 | ||
| 119 | this.productos = []; | 120 | this.productos = []; | 
| 120 | this.total = 0; | 121 | this.total = 0; | 
| 121 | this.cont = 0; | 122 | this.cont = 0; | 
| 122 | } | 123 | } | 
| 123 | } | 124 | } | 
| 124 | 125 | 
src/app/services/producto.service.ts
| 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 { Observable } from 'rxjs'; | 3 | import { Observable } from 'rxjs'; | 
| 4 | import { appSettings } from 'src/etc/AppSettings'; | ||
| 4 | 5 | ||
| 5 | @Injectable({ | 6 | @Injectable({ | 
| 6 | providedIn: 'root' | 7 | providedIn: 'root' | 
| 7 | }) | 8 | }) | 
| 8 | export class ProductoService { | 9 | export class ProductoService { | 
| 9 | 10 | ||
| 10 | constructor(private http: HttpClient) { } | 11 | constructor(private http: HttpClient) { } | 
| 11 | 12 | ||
| 12 | getAll(): Observable<any> { | 13 | getAll(): Observable<any> { | 
| 13 | return this.http.get('http://10.231.45.179:4705/autoservicio/articulos') | 14 | return this.http.get(`${appSettings.apiUrl}/articulos`); | 
| 14 | } | 15 | } | 
| 15 | 16 | ||
| 16 | } | 17 | } | 
| 17 | 18 | 
src/app/wrappers/producto.ts
| 1 | export interface Producto { | 1 | export interface Producto { | 
| 2 | CodSec: number; | 2 | CodSec: number; | 
| 3 | CodArt: number; | 3 | CodArt: number; | 
| 4 | DetArt: string; | 4 | DetArt: string; | 
| 5 | CodRub: number; | 5 | CodRub: number; | 
| 6 | Costo: number; | 6 | Costo: number; | 
| 7 | PreNet: number; | 7 | PreNet: number; | 
| 8 | ImpInt: number; | 8 | ImpInt: number; | 
| 9 | UniVen: number; | 9 | UniVen: number; | 
| 10 | FecCos: Date; | 10 | FecCos: Date; | 
| 11 | UltAct: Date; | 11 | UltAct: Date; | 
| 12 | CodPro: number; | 12 | CodPro: number; | 
| 13 | ExiDep: number; | 13 | ExiDep: number; | 
| 14 | ExiVta: number; | 14 | ExiVta: number; | 
| 15 | MinDep: number; | 15 | MinDep: number; | 
| 16 | MaxDep: number; | 16 | MaxDep: number; | 
| 17 | MinPVE: number; | 17 | MinPVE: number; | 
| 18 | MaxPVE: number; | 18 | MaxPVE: number; | 
| 19 | ENTTur: number; | 19 | ENTTur: number; | 
| 20 | SINTur: number; | 20 | SINTur: number; | 
| 21 | SALTur: number; | 21 | SALTur: number; | 
| 22 | IvaSN: boolean; | 22 | IvaSN: boolean; | 
| 23 | DepSN: boolean; | 23 | DepSN: boolean; | 
| 24 | RubMay: number; | 24 | RubMay: number; | 
| 25 | PreVen: number; | 25 | PreVen: number; | 
| 26 | IvaCO: number; | 26 | IvaCO: number; | 
| 27 | TIP: string; | 27 | TIP: string; | 
| 28 | IMPIVA: number; | 28 | IMPIVA: number; | 
| 29 | ENTADM: number; | 29 | ENTADM: number; | 
| 30 | SALADM: number; | 30 | SALADM: number; | 
| 31 | CODIIN: number; | 31 | CODIIN: number; | 
| 32 | PRO: boolean; | 32 | PRO: boolean; | 
| 33 | FPP: boolean; | 33 | FPP: boolean; | 
| 34 | ESS: boolean; | 34 | ESS: boolean; | 
| 35 | FID: Date; | 35 | FID: Date; | 
| 36 | NID: number; | 36 | NID: number; | 
| 37 | FIV: Date; | 37 | FIV: Date; | 
| 38 | NIV: number; | 38 | NIV: number; | 
| 39 | COO: string; | 39 | COO: string; | 
| 40 | CAG: string; | 40 | CAG: string; | 
| 41 | CAP: number; | 41 | CAP: number; | 
| 42 | UTL: number; | 42 | UTL: number; | 
| 43 | NHA: boolean; | 43 | NHA: boolean; | 
| 44 | PID: boolean; | 44 | PID: boolean; | 
| 45 | PRV: number; | 45 | PRV: number; | 
| 46 | PRD: number; | 46 | PRD: number; | 
| 47 | ImpInt2: number; | 47 | ImpInt2: number; | 
| 48 | E_HD: string; | 48 | E_HD: string; | 
| 49 | C_HD: string; | 49 | C_HD: string; | 
| 50 | CLA: number; | 50 | CLA: number; | 
| 51 | UNICAP: number; | 51 | UNICAP: number; | 
| 52 | ELBPRO: string; | 52 | ELBPRO: string; | 
| 53 | PPP: number; | 53 | PPP: number; | 
| 54 | ALI: number; | 54 | ALI: number; | 
| 55 | BAL_TIPO: string; | 55 | BAL_TIPO: string; | 
| 56 | PER_MAY: boolean; | 56 | PER_MAY: boolean; | 
| 57 | ES_MAY: boolean; | 57 | ES_MAY: boolean; | 
| 58 | CLA_MAY: number; | 58 | CLA_MAY: number; | 
| 59 | PME_CMP: string; | 59 | PME_CMP: string; | 
| 60 | USA_BAL: boolean; | 60 | USA_BAL: boolean; | 
| 61 | DET_LAR: string; | 61 | DET_LAR: string; | 
| 62 | ROTULO: string; | 62 | ROTULO: string; | 
| 63 | REC_MANUAL: boolean; | 63 | REC_MANUAL: boolean; | 
| 64 | E_HD1: string; | 64 | E_HD1: string; | 
| 65 | C_HD1: string; | 65 | C_HD1: string; | 
| 66 | ImpInt3: number; | 66 | ImpInt3: number; | 
| 67 | FUA_MAE_YPF: Date; | 67 | FUA_MAE_YPF: Date; | 
| 68 | CPQ: number; | 68 | CPQ: number; | 
| 69 | EPQ: string; | 69 | EPQ: string; | 
| 70 | BPQ: number; | 70 | BPQ: number; | 
| 71 | PUPQ: number; | 71 | PUPQ: number; | 
| 72 | CORVTO: boolean; | 72 | CORVTO: boolean; | 
| 73 | CORVTO_COSTO: number; | 73 | CORVTO_COSTO: number; | 
| 74 | UTLFR: number; | 74 | UTLFR: number; | 
| 75 | FAMILIA: number; | 75 | FAMILIA: number; | 
| 76 | ES_LUB: boolean; | 76 | ES_LUB: boolean; | 
| 77 | ES_FERT: boolean; | 77 | ES_FERT: boolean; | 
| 78 | AutoFac: boolean; | 78 | AutoFac: boolean; | 
| 79 | LitrosPCD: number; | 79 | LitrosPCD: number; | 
| 80 | LisPCD: number; | 80 | LisPCD: number; | 
| 81 | ImpLey23966: boolean; | 81 | ImpLey23966: boolean; | 
| 82 | es_bio: boolean; | 82 | es_bio: boolean; | 
| 83 | ExpArbaRev: boolean; | 83 | ExpArbaRev: boolean; | 
| 84 | ES_AGROQ: boolean; | 84 | ES_AGROQ: boolean; | 
| 85 | ES_PLAST: boolean; | 85 | ES_PLAST: boolean; | 
| 86 | es_bio_por: string; | 86 | es_bio_por: string; | 
| 87 | IMP_IMP_INT: boolean; | 87 | IMP_IMP_INT: boolean; | 
| 88 | id: number; | 88 | id: number; | 
| 89 | nombreImagen?: any; | 89 | nombreImagen?: any; | 
| 90 | |||
| 91 | cantidad?:number; | ||
| 90 | } | 92 | } | 
| 91 | 93 | 
src/etc/AppSettings ejemplo.ts
| File was created | 1 | export const appSettings = { | |
| 2 | // apiUrl: 'http://10.231.45.117:4705/autoservicio' | ||
| 3 | }; | ||
| 4 | 
src/styles.scss
| 1 | @import "./assets/scss/animation.scss"; | 1 | @import "./assets/scss/animation.scss"; | 
| 2 | @import "./assets/scss/bootstrap-override.scss"; | 2 | @import "./assets/scss/bootstrap-override.scss"; | 
| 3 | 3 | ||
| 4 | html, | 4 | html, | 
| 5 | body { | 5 | body { | 
| 6 | background-color: rgb(245, 245, 245); | 6 | background-color: #f0f0f0; | 
| 7 | overflow: hidden; | 7 | overflow: hidden; | 
| 8 | } | 8 | } | 
| 9 | 9 | ||
| 10 | .blur { | 10 | .blur { | 
| 11 | filter: blur(10px); | 11 | filter: blur(10px); | 
| 12 | -webkit-filter: blur(10px); | 12 | -webkit-filter: blur(10px); | 
| 13 | } | 13 | } | 
| 14 | 14 | ||
| 15 | .disable-user-select { | 15 | .disable-user-select { | 
| 16 | -webkit-user-select: none; | 16 | -webkit-user-select: none; | 
| 17 | -moz-user-select: none; | 17 | -moz-user-select: none; | 
| 18 | -ms-user-select: none; | 18 | -ms-user-select: none; | 
| 19 | user-select: none; | 19 | user-select: none; | 
| 20 | } | 20 | } | 
| 21 | 21 | ||
| 22 | .blue-gradient { | 22 | .blue-gradient { | 
| 23 | background: linear-gradient(0deg, rgb(20, 56, 68), rgb(252, 252, 252)); | 23 | background: linear-gradient(0deg, #8093a4, #fcfcfc); | 
| 24 | } | 24 | } | 
| 25 | 25 | ||
| 26 | .rounded { | 26 | .rounded { | 
| 27 | border-radius: 1.5rem !important; | 27 | border-radius: 1.5rem !important; | 
| 28 | } | 28 | } | 
| 29 | 29 | ||
| 30 | .rounded-top-sm { | ||
| 31 | border-top-left-radius: 0.75rem !important; | ||
| 32 | border-top-right-radius: 0.75rem !important; | ||
| 33 | } | ||
| 34 | |||
| 30 | .rounded-sm { | 35 | .rounded-sm { | 
| 31 | border-radius: 0.75rem !important; | 36 | border-radius: 0.75rem !important; | 
| 32 | } | 37 | } | 
| 33 | 38 | ||
| 34 | .card-effect { | 39 | .card-effect { | 
| 35 | &:active, | 40 | &:active { | 
| 36 | img { | ||
| 37 | background-color: #c9c9c9b3 !important; | 41 | background-color: #c9c9c9b3 !important; | 
| 38 | transition: background-color 0.5s; | 42 | transition: background-color 0.5s; | 
| 39 | } | 43 | } | 
| 40 | &:focus, | 44 | &:focus { | 
| 41 | img { | ||
| 42 | background-color: #c9c9c9b3 !important; | 45 | background-color: #c9c9c9b3 !important; | 
| 43 | transition: background-color 0.5s; | 46 | transition: background-color 0.5s; | 
| 44 | } | 47 | } | 
| 45 | } | 48 | } | 
| 46 | 49 | ||
| 47 | .overflow-scroll { | 50 | .overflow-scroll { | 
| 48 | overflow-y: auto !important; | 51 | overflow-y: auto !important; | 
| 49 | overflow-x: hidden !important; | 52 | overflow-x: hidden !important; | 
| 50 | &::-webkit-scrollbar { | 53 | &::-webkit-scrollbar { | 
| 51 | width: 0.5em; | 54 | width: 0.5em; | 
| 52 | } | 55 | } | 
| 53 | &::-webkit-scrollbar-track { | 56 | &::-webkit-scrollbar-track { | 
| 54 | border-radius: 10px; | 57 | border-radius: 10px; | 
| 58 | box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); | ||
| 55 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); | 59 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); | 
| 56 | } | 60 | } | 
| 57 | &::-webkit-scrollbar-thumb { | 61 | &::-webkit-scrollbar-thumb { | 
| 58 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); | 62 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); | 
| 59 | outline: 1px solid slategrey; | 63 | outline: 1px solid slategrey; | 
| 60 | border-radius: 10px; | 64 | border-radius: 10px; | 
| 61 | height: 12px; | 65 | height: 12px; | 
| 62 | &:active { | 66 | &:active { | 
| 67 | box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); | ||
| 63 | -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); | 68 | -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); | 
| 64 | } | 69 | } | 
| 65 | } | 70 | } | 
| 66 | &::-webkit-scrollbar-corner { | 71 | &::-webkit-scrollbar-corner { | 
| 67 | border-radius: 10px; | 72 | border-radius: 10px; | 
| 68 | } | 73 | } | 
| 69 | } | 74 | } | 
| 70 | 75 | ||
| 76 | .bg-gray { | ||
| 77 | background-color: #e6e6e6; | ||
| 78 | } | ||
| 79 | |||
| 80 | .bg-primary-gradient { | ||
| 81 | background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); | ||
| 82 | } | ||
| 83 | |||
| 71 | .icon-dim { | 84 | .icon-dim { | 
| 72 | height: 40px !important; | 85 | height: 40px !important; | 
| 73 | width: auto !important; | 86 | width: auto !important; | 
| 74 | background-color: white !important; | 87 | background-color: white !important; | 
| 75 | } | 88 | } | 
| 76 | 89 | ||
| 77 | .carousel-indicators li{ | 90 | .carousel-indicators li{ | 
| 78 | width: 10px !important; | 91 | width: 10px !important; | 
| 79 | height: 10px !important; | 92 | height: 10px !important; | 
| 80 | border-radius: 15px !important; | 93 | border-radius: 15px !important; | 
| 81 | border-top: black !important; | 94 | border-top: black !important; | 
| 82 | border-bottom: black !important; | 95 | border-bottom: black !important; |