Martin Macola / autoservicio

Download as
Browse Code »

Commit c68c1dba2c182613057c12130b901dc852489cc1

Authored by Marcelo Puebla
1 parent 35a1764f99
Exists in master

Cambio en estructura de las rutas del proyecto.

Showing 12 changed files with 180 additions and 135 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ c68c1db
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { HomeComponent } from './components/home/home.component'; 3 import { HomeComponent } from './components/home/home.component';
4 import { InicioComponent } from './components/inicio/inicio.component'; 4 import { InicioComponent } from './components/inicio/inicio.component';
5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
7 import { MasterComponent } from './components/master/master.component';
7 8
8 const routes: Routes = [ 9 const routes: Routes = [
10 { path: '', component: HomeComponent },
9 { path: 'home', component: HomeComponent }, 11 { path: 'home', component: HomeComponent },
10 { path: 'inicio', component: InicioComponent }, 12 {
11 { path: 'busqueda-productos', component: BusquedaProductosComponent }, 13 path: '',
12 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, 14 component: MasterComponent,
15 children: [
16 { path: 'inicio', component: InicioComponent },
17 { path: 'busqueda-productos', component: BusquedaProductosComponent },
18 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
19 ]
20 },
13 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 21 { path: '**', redirectTo: '/home', pathMatch: 'full' },
14 ]; 22 ];
15 23
16 @NgModule({ 24 @NgModule({
17 imports: [RouterModule.forRoot(routes)], 25 imports: [RouterModule.forRoot(routes)],
18 exports: [RouterModule] 26 exports: [RouterModule]
19 }) 27 })
20 28
21 export class AppRoutingModule { } 29 export class AppRoutingModule { }
22 30
src/app/app.module.ts
Diff comments   View file @ c68c1db
1 //#region MODULES 1 //#region MODULES
2 import { BrowserModule } from '@angular/platform-browser'; 2 import { BrowserModule } from '@angular/platform-browser';
3 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { HttpClientModule } from '@angular/common/http'; 5 import { HttpClientModule } from '@angular/common/http';
6 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 6 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
7 //#endregion 7 //#endregion
8 8
9 //#region COMPONENTS 9 //#region COMPONENTS
10 import { AppComponent } from './app.component'; 10 import { AppComponent } from './app.component';
11 import { HeaderComponent } from './components/header/header.component'; 11 import { HeaderComponent } from './components/header/header.component';
12 import { SidebarComponent } from './components/sidebar/sidebar.component'; 12 import { SidebarComponent } from './components/sidebar/sidebar.component';
13 import { CarouselComponent } from './components/carousel/carousel.component'; 13 import { CarouselComponent } from './components/carousel/carousel.component';
14 import { HomeComponent } from './components/home/home.component'; 14 import { HomeComponent } from './components/home/home.component';
15 import { InicioComponent } from './components/inicio/inicio.component'; 15 import { InicioComponent } from './components/inicio/inicio.component';
16 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 16 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
17 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 17 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
18 import { MasterComponent } from './components/master/master.component';
18 //#endregion 19 //#endregion
19 20
20 @NgModule({ 21 @NgModule({
21 declarations: [ 22 declarations: [
22 AppComponent, 23 AppComponent,
23 HeaderComponent, 24 HeaderComponent,
24 SidebarComponent, 25 SidebarComponent,
25 CarouselComponent, 26 CarouselComponent,
26 HomeComponent, 27 HomeComponent,
27 InicioComponent, 28 InicioComponent,
28 BusquedaProductosComponent, 29 BusquedaProductosComponent,
29 ConfirmacionCarritoComponent 30 ConfirmacionCarritoComponent,
31 MasterComponent
30 ], 32 ],
31 imports: [ 33 imports: [
32 BrowserModule, 34 BrowserModule,
33 AppRoutingModule, 35 AppRoutingModule,
34 HttpClientModule, 36 HttpClientModule,
35 FormsModule, 37 FormsModule,
36 ReactiveFormsModule, 38 ReactiveFormsModule,
37 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }) 39 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' })
38 ], 40 ],
39 providers: [], 41 providers: [],
40 bootstrap: [AppComponent] 42 bootstrap: [AppComponent]
41 }) 43 })
42 export class AppModule { } 44 export class AppModule { }
43 45
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ c68c1db
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-12 p-0">
3 <!-- TOP HEADER -->
4 <app-header></app-header>
5 3
6 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
7 <div class="row m-0"> 5 <div class="row m-0">
8 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
9 <p class="h5 py-1 bg-gray text-muted text-center"> 7 <p class="h5 py-1 bg-gray text-muted text-center">
10 Búsqueda 8 Búsqueda
11 <i class="fa fa-search"></i> 9 <i class="fa fa-search"></i>
12 </p> 10 </p>
13 </div> 11 </div>
14 </div> 12 </div>
15 13
16 <div class="row m-4 disable-user-select"> 14 <div class="row m-4 disable-user-select">
17 15
18 <!-- FILTROS --> 16 <!-- FILTROS -->
19 <div class="col-sm-2 p-1"> 17 <div class="col-sm-2 p-1">
20 <div class="text-center"> 18 <div class="text-center">
21 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> 19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
22 </div> 20 </div>
23 <ul class="list-group"> 21 <ul class="list-group">
24 <li 22 <li
25 [ngClass]="{active: categoria == 1}" 23 [ngClass]="{active: categoria == 1}"
26 (click)="categoria = 1" 24 (click)="categoria = 1"
27 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 25 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
28 Combos y Promociones 26 Combos y Promociones
29 </li> 27 </li>
30 <li 28 <li
31 [ngClass]="{active: categoria == 2}" 29 [ngClass]="{active: categoria == 2}"
32 (click)="categoria = 2" 30 (click)="categoria = 2"
33 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 31 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
34 Todos 32 Todos
35 </li> 33 </li>
36 <li 34 <li
37 [ngClass]="{active: categoria == 3}" 35 [ngClass]="{active: categoria == 3}"
38 (click)="categoria = 3" 36 (click)="categoria = 3"
39 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 37 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
40 Bebidas 38 Bebidas
41 </li> 39 </li>
42 <li 40 <li
43 [ngClass]="{active: categoria == 4}" 41 [ngClass]="{active: categoria == 4}"
44 (click)="categoria = 4" 42 (click)="categoria = 4"
45 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 43 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
46 Sandwichería 44 Sandwichería
47 </li> 45 </li>
48 <li 46 <li
49 [ngClass]="{active: categoria == 5}" 47 [ngClass]="{active: categoria == 5}"
50 (click)="categoria = 5" 48 (click)="categoria = 5"
51 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 49 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
52 Panaderia 50 Panaderia
53 </li> 51 </li>
54 <li 52 <li
55 [ngClass]="{active: categoria == 6}" 53 [ngClass]="{active: categoria == 6}"
56 (click)="categoria = 6" 54 (click)="categoria = 6"
57 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 55 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
58 Golosinas 56 Golosinas
59 </li> 57 </li>
60 <li 58 <li
61 [ngClass]="{active: categoria == 7}" 59 [ngClass]="{active: categoria == 7}"
62 (click)="categoria = 7" 60 (click)="categoria = 7"
63 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 61 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
64 Tabaqueria 62 Tabaqueria
65 </li> 63 </li>
66 </ul> 64 </ul>
67 </div> 65 </div>
68 66
69 <!-- SEARCH INPUT --> 67 <!-- SEARCH INPUT -->
70 <div *ngIf="productos.length > 0" class="fade-in col-sm-10"> 68 <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
71 69
72 <div class="form-group row search"> 70 <div class="form-group row search">
73 <div class="col-sm-10"> 71 <div class="col-sm-10">
74 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 72 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
75 <input 73 <input
76 type="text" 74 type="text"
77 class="form-control form-control-lg shadow-sm rounded-pill px-5" 75 class="form-control form-control-lg shadow-sm rounded-pill px-5"
78 placeholder="Búsqueda productos" 76 placeholder="Búsqueda productos"
79 [(ngModel)]="searchTerm" 77 [(ngModel)]="searchTerm"
80 (ngModelChange)="filterItems()"> 78 (ngModelChange)="filterItems()">
81 </div> 79 </div>
82 <!-- BOTON VOLVER --> 80 <!-- BOTON VOLVER -->
83 <div class="col-sm-2"> 81 <div class="col-sm-2">
84 <button 82 <button
85 type="button" 83 type="button"
86 class="btn btn-light btn-lg shadow-sm" 84 class="btn btn-light btn-lg shadow-sm"
87 [routerLink]="['/inicio']"> 85 [routerLink]="['/inicio']">
88 <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span> 86 <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span>
89 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 87 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
90 </button> 88 </button>
91 </div> 89 </div>
92 </div> 90 </div>
93 <!-- LISTA DE PRODUCTOS --> 91 <!-- LISTA DE PRODUCTOS -->
94 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 92 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
95 <div 93 <div
96 class="col-4 p-2" 94 class="col-4 p-2"
97 *ngFor="let producto of auxProductos"> 95 *ngFor="let producto of auxProductos">
98 <div class="card-effect bg-white rounded-sm shadow border-0"> 96 <div
97 class="card-effect bg-white rounded-sm shadow border-0"
98 (click)="agregarAlCarrito(producto)">
99 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-75 m-auto"> 99 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-75 m-auto">
100 <div class="p-2"> 100 <div class="p-2">
101 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 101 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
102 <div class="row justify-content-between m-0"> 102 <div class="row justify-content-between m-0">
103 <div class="col-12 p-0"> 103 <div class="col-12 p-0">
104 <div class="text-left"> 104 <div class="text-left">
105 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 105 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
106 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> 106 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
107 </div> 107 </div>
108 </div> 108 </div>
109 <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">
110 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 110 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
111 </div> 111 </div>
112 </div> 112 </div>
113 </div> 113 </div>
114 </div> 114 </div>
115 </div> 115 </div>
116 </div> 116 </div>
117 </div> 117 </div>
118 118
119 <!-- SPINNER --> 119 <!-- SPINNER -->
120 <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">
121 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 121 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
122 <span class="text-secondary m-2 h5">Cargando información.</span> 122 <span class="text-secondary m-2 h5">Cargando información.</span>
123 </div> 123 </div>
124 124
125 </div> 125 </div>
126 126
127 </div> 127 </div>
128 128
129 <!-- SIDEBAR -->
130 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ c68c1db
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit, Input, ViewChild, AfterViewInit } 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 import { appSettings } from 'src/etc/AppSettings';
5 import { SidebarComponent } from '../sidebar/sidebar.component';
5 6
6 @Component({ 7 @Component({
7 selector: 'app-busqueda-productos', 8 selector: 'app-busqueda-productos',
8 templateUrl: './busqueda-productos.component.html', 9 templateUrl: './busqueda-productos.component.html',
9 styleUrls: ['./busqueda-productos.component.scss'] 10 styleUrls: ['./busqueda-productos.component.scss']
10 }) 11 })
11 export class BusquedaProductosComponent implements OnInit { 12 export class BusquedaProductosComponent implements OnInit {
12 13
13 private productos: Producto[] = []; 14 private productos: Producto[] = [];
14 private auxProductos: Producto[] = []; 15 private auxProductos: Producto[] = [];
15 private searchTerm: string = ''; 16 private searchTerm: string = '';
16 private showSpinner: boolean = true; 17 private showSpinner: boolean = true;
17 private categoria: Categorias = Categorias.todos; 18 private categoria: Categorias = Categorias.todos;
18 private apiUrl : string = appSettings.apiUrl; 19 private apiUrl: string = appSettings.apiUrl;
20
21 productosParaCarrito : Producto[] = [];
19 22
20 constructor(private productoService: ProductoService) { } 23 constructor(private productoService: ProductoService) { }
21 24
25 // ngAfterViewInit() {
26 // this.sideBar.productos = [];
27 // }
28
22 ngOnInit() { 29 ngOnInit() {
23 30
24 this.productoService.getAll() 31 this.productoService.getAll()
25 .subscribe((data: Producto[]) => { 32 .subscribe((data: Producto[]) => {
26 33
27 this.auxProductos = this.productos = data; 34 this.auxProductos = this.productos = data;
28 }, (error) => { 35 }, (error) => {
29 this.showSpinner = false; 36 this.showSpinner = false;
30 console.error(error); 37 console.error(error);
31 }); 38 });
32 } 39 }
33 40
34 filterItems() { 41 filterItems() {
35 console.log(''); 42 console.log('');
36 this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())); 43 this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()));
37 } 44 }
38 45
46 agregarAlCarrito(producto : Producto){
47 producto.cantidad = 1;
48 this.productosParaCarrito.push(producto);
49 }
50
39 } 51 }
40 52
41 enum Categorias { 53 enum Categorias {
42 promosCombos = 1, 54 promosCombos = 1,
43 todos = 2, 55 todos = 2,
44 bebidas = 3, 56 bebidas = 3,
45 sandwicheria = 4, 57 sandwicheria = 4,
46 panaderia = 5, 58 panaderia = 5,
47 golosinas = 6, 59 golosinas = 6,
48 tabaqueria = 7, 60 tabaqueria = 7,
49 } 61 }
50 62
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ c68c1db
1 <app-header></app-header>
2 <div class="row"> 1 <div class="row">
3 <div class="col-10"> 2 <div class="col-12">
4 3
5 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
6 <div class="row m-0"> 5 <div class="row m-0">
7 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
8 <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p> 7 <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
8 </div>
9 </div> 9 </div>
10 </div>
11 10
12 <div class="row m-4 d-flex align-items-center"> 11 <div class="row m-4 d-flex align-items-center">
13 <div class="col-4"> 12 <div class="col-4">
14 <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1> 13 <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
15 </div> 14 </div>
16 <div class="col-8"> 15 <div class="col-8">
17 <h2>¿Desea finalizar su compra?</h2> 16 <h2>¿Desea finalizar su compra?</h2>
18 <h3>Por favor, controle y confirme su compra.</h3> 17 <h3>Por favor, controle y confirme su compra.</h3>
19 </div> 18 </div>
20 <div class="col-sm-7"> 19 <div class="col-sm-7">
21 20
22 <div class="row pr-3 vh-50 overflow-scroll"> 21 <div class="row pr-3 vh-50 overflow-scroll">
23 <div 22 <div class="col-4 p-2" *ngFor="let producto of productos">
24 class="col-4 p-2" 23 <div class="card card-effect bg-white rounded-sm shadow border-0">
25 *ngFor="let producto of productos"> 24 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
26 <div class="card card-effect bg-white rounded-sm shadow border-0"> 25 <div class="card-body">
27 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto"> 26 <p class="h5 text-left m-0">{{producto.variable}}</p>
28 <div class="card-body"> 27 <div class="text-left">
29 <p class="h5 text-left m-0">{{producto.variable}}</p> 28 <p class="m-0"><small>ASDASDSADASDSA</small></p>
30 <div class="text-left"> 29 <p class="m-0"><small>COD. 1222</small></p>
31 <p class="m-0"><small>ASDASDSADASDSA</small></p> 30 <p class="m-0"><strong>$ 563</strong></p>
32 <p class="m-0"><small>COD. 1222</small></p> 31 </div>
33 <p class="m-0"><strong>$ 563</strong></p> 32 </div>
34 </div> 33 </div>
35 </div> 34 </div>
36 </div> 35 </div>
37 </div> 36 </div>
37 <div class="col-sm-5">
38 <h3>TOTAL: $553</h3>
39 </div>
38 </div> 40 </div>
39 </div> 41 </div>
40 <div class="col-sm-5">
41 <h3>TOTAL: $553</h3>
42 </div>
43 </div>
44
45 <!-- SIDEBAR -->
src/app/components/inicio/inicio.component.html
Diff comments   View file @ c68c1db
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-12 p-0">
3 <!-- TOP HEADER -->
4 <app-header></app-header>
5 3
6 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
7 <div class="row m-0"> 5 <div class="row m-0">
8 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
9 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
10 </div> 8 </div>
11 </div> 9 </div>
12 10
13 <div class="row m-4 d-flex align-items-center disable-user-select"> 11 <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"> 12 <div class="col-md-5 d-flex align-items-end flex-column">
15 13
16 <!-- TOOL TIp --> 14 <!-- TOOL TIp -->
17 <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto" 15 <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto"
18 *ngIf="tooltip === true"> 16 *ngIf="tooltip === false">
19 <div class="arrow"></div> 17 <div class="arrow"></div>
20 <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4> 18 <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"> 19 <div class="popover-content mw-100 h-100 mb-auto">
22 <div class="d-flex flex-column h-75 text-center"> 20 <div class="d-flex flex-column h-75 text-center">
23 <div class="overflow-auto overflow-scroll mb-2"> 21 <div class="overflow-auto overflow-scroll mb-2">
24 22
25 <div class="card bg-white rounded-sm shadow border-0 black-text my-3"> 23 <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"> 24 <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"> 25 <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> 26 <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> 27 <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
30 </div> 28 </div>
31 <div class="col-6 p-1 text-center my-auto"> 29 <div class="col-6 p-1 text-center my-auto">
32 <p class="m-0 h1 text-right">{{105 | currency}}</p> 30 <p class="m-0 h1 text-right">{{105 | currency}}</p>
33 </div> 31 </div>
34 </div> 32 </div>
35 </div> 33 </div>
36 34
37 </div> 35 </div>
38 </div> 36 </div>
39 </div> 37 </div>
40 </div> 38 </div>
41 39
42 <!-- PROMOCIONES --> 40 <!-- PROMOCIONES -->
43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 41 <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
44 <div class="card-body text-left p-4"> 42 <div class="card-body text-left p-4">
45 <div class="row"> 43 <div class="row">
46 <div class="col-7"> 44 <div class="col-7">
47 <p class="h3 card-title">Promociones</p> 45 <p class="h3 card-title">Promociones</p>
48 </div> 46 </div>
49 <div class="col-5 p-0"> 47 <div class="col-5 p-0">
50 <img src="../../../assets/icons/primario.promociones.png" alt="" class="icon-dim m-0"> 48 <img src="../../../assets/icons/primario.promociones.png" alt="" class="icon-dim m-0">
51 </div> 49 </div>
52 </div> 50 </div>
53 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 51 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
54 </div> 52 </div>
55 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> 53 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
56 <ol class="carousel-indicators m-0"> 54 <ol class="carousel-indicators m-0">
57 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li> 55 <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> 56 <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> 57 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
60 </ol> 58 </ol>
61 <div class="carousel-inner"> 59 <div class="carousel-inner">
62 <div class="carousel-item active"> 60 <div class="carousel-item active">
63 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 61 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
64 </div> 62 </div>
65 <div class="carousel-item"> 63 <div class="carousel-item">
66 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 64 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
67 </div> 65 </div>
68 <div class="carousel-item"> 66 <div class="carousel-item">
69 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 67 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
70 </div> 68 </div>
71 </div> 69 </div>
72 </div> 70 </div>
73 </div> 71 </div>
74 72
75 <!-- ORDENAR --> 73 <!-- ORDENAR -->
76 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 74 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
77 <div class="card-body text-left p-4"> 75 <div class="card-body text-left p-4">
78 <div class="row"> 76 <div class="row">
79 <div class="col-5"> 77 <div class="col-5">
80 <p class="h3 card-title">Ordenar</p> 78 <p class="h3 card-title">Ordenar</p>
81 </div> 79 </div>
82 <div class="col-7 p-0"> 80 <div class="col-7 p-0">
83 <img src="../../../assets/icons/primario.ordenar.png" alt="" class="icon-dim"> 81 <img src="../../../assets/icons/primario.ordenar.png" alt="" class="icon-dim">
84 </div> 82 </div>
85 </div> 83 </div>
86 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 84 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
87 </div> 85 </div>
88 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg"> 86 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
89 </div> 87 </div>
90 </div> 88 </div>
91 89
92 <div class="col-md-7 d-flex align-items-end flex-column"> 90 <div class="col-md-7 d-flex align-items-end flex-column">
93 91
94 <!-- CARGAR PRODUCTOS --> 92 <!-- CARGAR PRODUCTOS -->
95 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 93 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
96 <div class="card-body text-left p-4"> 94 <div class="card-body text-left p-4">
97 <div class="row"> 95 <div class="row">
98 <div class="col-6"> 96 <div class="col-6">
99 <p class="h3 card-title">Cargar Productos</p> 97 <p class="h3 card-title">Cargar Productos</p>
100 </div> 98 </div>
101 <div class="col-6 p-0"> 99 <div class="col-6 p-0">
102 <img src="../../../assets//icons/escanear.png" alt="" class="icon-dim mb-2"> 100 <img src="../../../assets//icons/escanear.png" alt="" class="icon-dim mb-2">
103 </div> 101 </div>
104 </div> 102 </div>
105 <p class="h5 card-text text-muted font-weight-light"> 103 <p class="h5 card-text text-muted font-weight-light">
106 Coloque el código de<br> 104 Coloque el código de<br>
107 barras o QR frente al scanner. 105 barras o QR frente al scanner.
108 </p> 106 </p>
109 </div> 107 </div>
110 <div class="card bg-white border-0 w-75 mx-auto mb-4"> 108 <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"> 109 <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"> 110 <div class="card-body text-left p-2">
113 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> 111 <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> 112 <p class="m-0 card-text text-muted">COD. 12121222</p>
115 </div> 113 </div>
116 </div> 114 </div>
117 </div> 115 </div>
118 116
119 <!-- BUSCAR PRODUCTOS --> 117 <!-- BUSCAR PRODUCTOS -->
120 <div (click)="goPage('busqueda-productos')" 118 <div (click)="goPage('busqueda-productos')"
121 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 119 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
122 <div class="card-body text-left p-4"> 120 <div class="card-body text-left p-4">
123 <div class="row"> 121 <div class="row">
124 <div class="col-6"> 122 <div class="col-6">
125 <p class="h3 card-title">Buscar Productos</p> 123 <p class="h3 card-title">Buscar Productos</p>
126 <p class="h5 card-text text-muted font-weight-light"> 124 <p class="h5 card-text text-muted font-weight-light">
127 Busque aquí los productos<br> 125 Busque aquí los productos<br>
128 que no tienen código </p> 126 que no tienen código </p>
129 </div> 127 </div>
130 <div class="col-6 p-0"> 128 <div class="col-6 p-0">
131 <img src="../../../assets/icons/primario.buscar.png" alt="" class="icon-dim mb-2"> 129 <img src="../../../assets/icons/primario.buscar.png" alt="" class="icon-dim mb-2">
132 </div> 130 </div>
133 </div> 131 </div>
134 132
135 </div> 133 </div>
136 </div> 134 </div>
137 135
138 </div> 136 </div>
139 137
140 </div> 138 </div>
141 139
142 </div> 140 </div>
143
144 <!-- SIDEBAR -->
145 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
146 </div>
src/app/components/master/master.component.html
Diff comments   View file @ c68c1db
File was created 1 <div class="row m-0 fade-in">
2 <div class="col-10 p-0">
3
4 <!-- TOP HEADER -->
5 <app-header></app-header>
6
7 <router-outlet></router-outlet>
8
9 </div>
10
11 <!-- SIDEBAR -->
12 <app-sidebar class="col-2 col-md-2 vh-100 bg-primary-gradient"></app-sidebar>
13
14 </div>
15
src/app/components/master/master.component.scss
Diff comments   View file @ c68c1db
src/app/components/master/master.component.spec.ts
Diff comments   View file @ c68c1db
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { MasterComponent } from './master.component';
4
5 describe('MasterComponent', () => {
6 let component: MasterComponent;
7 let fixture: ComponentFixture<MasterComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ MasterComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(MasterComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/master/master.component.ts
Diff comments   View file @ c68c1db
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-master',
5 templateUrl: './master.component.html',
6 styleUrls: ['./master.component.scss']
7 })
8 export class MasterComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ c68c1db
1 <div class="d-flex align-items-center flex-column h-100 pt-2 text-center"> 1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
2 2
3 <h4 class="border-bottom border-white text-white"> Mi compra </h4> 3 <p class="h4 border-bottom border-white text-white mt-4 pb-2">
4 Mi compra
5 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
6 </p>
4 7
5 <div class="overflow-auto overflow-scroll mb-2 w-100"> 8 <div class="overflow-auto overflow-scroll mb-2 w-100">
6 <div class="my-2 bg-white border-0 rounded-sm" *ngFor="let prod of productos; let i = index"> 9 <!-- PRODUCTOS CARRITO -->
7 <img class="m-auto pt-2" [src]="prod.img"> 10 <div class="fade-left my-2 bg-white border-0 rounded-sm" *ngFor="let producto of productosCarrito; let i = index">
11 <img class="m-auto pt-2" src="{{apiUrl}}/imagenes/{{producto.nombreImagen}}">
8 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> 12 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
9 <div class="col-12 p-0 pt-2 text-left my-auto"> 13 <div class="col-12 p-0 pt-2 text-left my-auto">
10 <p class="m-0 h6"><small>{{prod.desc}}</small></p> 14 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
11 <p class="m-0 h6"><small>COD: {{prod.cod}}</small></p> 15 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
12 </div> 16 </div>
13 <div class="col-12 pr-1 text-right h6 my-auto "> 17 <div class="col-12 pr-1 text-right h6 my-auto ">
14 <p class="m-0">{{prod.precio | currency}}</p> 18 <p class="m-0">{{producto.PreVen | currency}}</p>
15 </div> 19 </div>
16 </div> 20 </div>
17 <div class="row m-0 p-0"> 21 <div class="row m-0 p-0">
18 <div class="col px-2 my-2"> 22 <div class="col-6 px-2 my-2">
19 <div class="btn-group-sm btn-group float-left my-auto" role="group"> 23 <div class="btn-group-sm btn-group float-left my-auto" role="group">
20 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)"> 24 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">
21 <i class="fa fa-plus" aria-hidden="true"></i> 25 <i class="fa fa-plus" aria-hidden="true"></i>
22 </button> 26 </button>
23 <div class="bg-white border border-white px-3 my-auto text-dark h5"> 27 <div class="bg-white border border-white px-3 my-auto text-dark h5">
24 <small>{{prod.cantidad}}</small> 28 <small>{{producto.cantidad}}</small>
25 </div> 29 </div>
26 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)"> 30 <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> 31 <i class="fa fa-minus" aria-hidden="true"></i>
28 </button> 32 </button>
29 </div> 33 </div>
30 </div> 34 </div>
31 <div class="col px-2 my-2"> 35 <div class="col-6 px-2 my-2">
32 <div class="btn-group-sm btn-group float-right my-auto" role="group"> 36 <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"> 37 <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> 38 <i class="fa fa-hand-o-up" aria-hidden="true"></i>
35 </button> 39 </button>
36 <button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)"> 40 <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> 41 <i class="fa fa-times" aria-hidden="true"></i>
38 </button> 42 </button>
39 </div> 43 </div>
40 </div> 44 </div>
41 </div> 45 </div>
42 </div> 46 </div>
43 </div> 47 </div>
44 48
49 <!-- TOTAL -->
45 <div class="card rounded-top-sm mt-auto blue-gradient border-0"> 50 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
46 <div class="card-body row"> 51 <div class="card-body row">
47 <div class="col"> 52 <div class="col-12">
48 <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</h4> 53 <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p>
49 <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</h4> 54 <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p>
50 <h3 class="text-secondary">Total</h3> 55 <p class="h3 text-secondary">Total</p>
51 <h3 class=""><strong>{{total | currency}}</strong></h3> 56 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
52 </div> 57 </div>
53 <div class="col 12 p-0"> 58 <div class="col-12">
54 <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito"> 59 <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito">
55 <strong>Finalizar y pagar</strong> 60 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
56 </button> 61 <i class="fa fa-check text-success" aria-hidden="true"></i>
57 <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button> 62 </button>
63 <button type="button" class="btn btn-block btn-light shadow btn-sm shadow" (click)="cleanCarrito()">
64 <span class="pr-1">Cancelar</span>
65 <i class="fa fa-times text-danger" aria-hidden="true"></i>
66 </button>
58 </div> 67 </div>
59 </div> 68 </div>
60 </div> 69 </div>
61 </div> 70 </div>
62 71
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ c68c1db
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
2 import { Producto } from 'src/app/wrappers/producto'; 2 import { Producto } from 'src/app/wrappers/producto';
3 import { appSettings } from 'src/etc/AppSettings';
3 4
4 5
5 @Component({ 6 @Component({
6 selector: 'app-sidebar', 7 selector: 'app-sidebar',
7 templateUrl: './sidebar.component.html', 8 templateUrl: './sidebar.component.html',
8 styleUrls: ['./sidebar.component.scss'] 9 styleUrls: ['./sidebar.component.scss'],
10 inputs: ['productosCarrito']
9 }) 11 })
10 export class SidebarComponent implements OnInit { 12 export class SidebarComponent implements OnInit {
11 13
12 private cont: number = 1; 14 private cont: number = 1;
13 private min: number = 1; 15 private min: number = 1;
14 private max: number = 50; 16 private max: number = 50;
15 private total: number = 0; 17 private total: number = 0;
18 private apiUrl: string = appSettings.apiUrl;
16 19
17 private productos = [ 20 public productosCarrito: Producto[] = [];
18 {
19 "id": 1,
20 "Detart": "Galletas Oreo",
21 "cod": 225412,
22 "precio": 15,
23 "img": "./assets/img/logodebo.png",
24 "cantidad": 1
25 },
26 {
27 "id": 2,
28 "desc": "Coca cola 500ml",
29 "cod": 512632,
30 "precio": 40,
31 "img": "./assets/img/logodebo.png",
32 "cantidad": 1
33 },
34 {
35 "id": 3,
36 "desc": "Pancho grande",
37 "cod": 775987,
38 "precio": 45,
39 "img": "./assets/img/logodebo.png",
40 "cantidad": 1
41 }
42 ];
43 21
44 constructor() { } 22 constructor() { }
45 23
46 ngOnInit() { 24 ngOnInit() { }
47
48 this.getCantidadProductos();
49 this.getTotal();
50
51 }
52 25
53 getCantidadProductos() { 26 getCantidadProductos() {
54 var aux = 0; 27
55 for (let i = 0; i < this.productos.length; i++) { 28 for (let i = 0; i < this.productosCarrito.length; i++) {
56 ++aux; 29 this.productosCarrito[i].cantidad = 1
30 this.cont++;
57 } 31 }
58 return this.cont = aux; 32 return this.cont;
59 } 33 }
60 34
61 getTotal() { 35 getTotal() {
62 36
63 let subTotal = 0; 37 let subTotal = 0;
64 for (let i = 0; i < this.productos.length; i++) { 38 for (let i = 0; i < this.productosCarrito.length; i++) {
65 subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad); 39 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
66 } 40 }
67 console.log(subTotal);
68 return this.total = subTotal; 41 return this.total = subTotal;
69 } 42 }
70 43
71 public aumentarContador(index) { 44 public aumentarContador(index) {
72 45
73 ++this.cont; 46 this.cont++;
74 for (let i = 0; i < this.productos.length; i++) { 47 for (let i = 0; i < this.productosCarrito.length; i++) {
75 if (i === index) { 48 if (i === index) {
76 this.total = this.total + this.productos[i].precio; 49 this.total = this.total + this.productosCarrito[i].PreVen;
77 return (this.productos[i].cantidad === this.max) ? 50 return (this.productosCarrito[i].cantidad === this.max) ?
78 this.productos[i].cantidad : ++this.productos[i].cantidad; 51 this.productosCarrito[i].cantidad : this.productosCarrito[i].cantidad++;
79 52
80 } 53 }
81 } 54 }
82 } 55 }
83 56
84 decrementarContador(index) { 57 decrementarContador(index) {
85 58
86 for (let i = 0; i < this.productos.length; i++) { 59 for (let i = 0; i < this.productosCarrito.length; i++) {
87 if (i === index && this.productos[i].cantidad > 1) { 60 if (i === index && this.productosCarrito[i].cantidad > 1) {
88 --this.productos[i].cantidad; 61 this.productosCarrito[i].cantidad--;
89 --this.cont; 62 this.cont--;
90 break; 63 break;
91 } 64 }
92 } 65 }
93 66
94 this.getTotal() 67 this.getTotal()
95 } 68 }
96 69
97 setCantidadItems() { 70 setCantidadItems() {
98 71
99 this.cont = 0; 72 this.cont = 0;
100 for (let i = 0; i < this.productos.length; i++) { 73 for (let i = 0; i < this.productosCarrito.length; i++) {
101 this.cont += this.productos[i].cantidad; 74 this.cont += this.productosCarrito[i].cantidad;
102 } 75 }
103 } 76 }
104 77
105 deleteProducto(index) { 78 deleteProducto(index) {
106 79
107 for (let i = 0; i < this.productos.length; i++) { 80 for (let i = 0; i < this.productosCarrito.length; i++) {
108 if (i === index) { 81 if (i === index) {
109 this.cont -= this.productos[i].cantidad; 82 this.cont -= this.productosCarrito[i].cantidad;
110 //Elimina del total el precio de todo el item 83 //Elimina del total el PreVen de todo el item
111 this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad); 84 this.total = this.total - (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
112 this.productos.splice(i, 1); 85 this.productosCarrito.splice(i, 1);
113 return; 86 return;
114 } 87 }
115 } 88 }
116 } 89 }
117 90
118 clearCar() { 91 cleanCarrito() {
119 92
120 this.productos = []; 93 this.productosCarrito = [];
121 this.total = 0; 94 this.total = 0;