Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 1671dbe8c7f6c25b9ded80adbbf2c8bb36bf53dc

Authored by =
2 parents 78c5c6a7ea 5aee6bac60
Exists in master and in 1 other branch validar_pve

Merge branch 'master' of http://git.focasoftware.com/angular/autoservicio

Showing 11 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 1671dbe
... ... @@ -3,11 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
3 3 import { HomeComponent } from './components/home/home.component';
4 4 import { InicioComponent } from './components/inicio/inicio.component';
5 5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
  6 +import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
6 7  
7 8 const routes: Routes = [
8 9 { path: 'home', component: HomeComponent },
9 10 { path: 'inicio', component: InicioComponent },
10 11 { path: 'busqueda-productos', component: BusquedaProductosComponent },
  12 + { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
11 13 { path: '**', redirectTo: '/home', pathMatch: 'full' },
12 14 ];
13 15  
... ... @@ -15,4 +17,5 @@ const routes: Routes = [
15 17 imports: [RouterModule.forRoot(routes)],
16 18 exports: [RouterModule]
17 19 })
  20 +
18 21 export class AppRoutingModule { }
src/app/app.module.ts
Diff comments   View file @ 1671dbe
... ... @@ -13,6 +13,7 @@ import { CarouselComponent } from './components/carousel/carousel.component';
13 13 import { HomeComponent } from './components/home/home.component';
14 14 import { InicioComponent } from './components/inicio/inicio.component';
15 15 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
  16 +import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
16 17 //#endregion
17 18  
18 19 @NgModule({
... ... @@ -23,7 +24,8 @@ import { BusquedaProductosComponent } from './components/busqueda-productos/busq
23 24 CarouselComponent,
24 25 HomeComponent,
25 26 InicioComponent,
26   - BusquedaProductosComponent
  27 + BusquedaProductosComponent,
  28 + ConfirmacionCarritoComponent
27 29 ],
28 30 imports: [
29 31 BrowserModule,
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 1671dbe
... ... @@ -6,45 +6,104 @@
6 6 <!-- NOMBRE DE SECCION -->
7 7 <div class="row m-0">
8 8 <div class="col-12 p-0">
9   - <p class="h5 py-1 bg-light text-muted text-center">Búsqueda</p>
  9 + <p class="h5 py-1 bg-light text-muted text-center">
  10 + Búsqueda
  11 + <i class="fa fa-search"></i>
  12 + </p>
10 13 </div>
11 14 </div>
12 15  
13   - <div class="row m-4 d-flex align-items-center">
  16 + <div class="row m-4 disable-user-select">
14 17  
15   - <div class="col-sm-7">
16   - <!-- SEARCH INPUT -->
17   - <div class="form-group search">
18   - <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
19   - <input
20   - type="text"
21   - class="form-control form-control-lg rounded-pill px-5"
22   - placeholder="Búsqueda productos">
  18 + <!-- FILTROS -->
  19 + <div class="col-sm-2">
  20 + <div class="text-center">
  21 + <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
23 22 </div>
  23 + <ul class="list-group">
  24 + <li class="list-group-item list-group-item-action my-1 py-2 h6">
  25 + Combos y Promociones
  26 + </li>
  27 + <li
  28 + class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm font-weight-bold">
  29 + Todos
  30 + </li>
  31 + <li
  32 + class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
  33 + Bebidas
  34 + </li>
  35 + <li
  36 + class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
  37 + Sandwichería
  38 + </li>
  39 + <li
  40 + class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
  41 + Panaderia
  42 + </li>
  43 + <li
  44 + class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
  45 + Golosinas
  46 + </li>
  47 + <li
  48 + class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
  49 + Tabaqueria
  50 + </li>
  51 + </ul>
  52 + </div>
24 53  
25   - <div class="row pr-3 vh-50 overflow-scroll">
  54 + <!-- SEARCH INPUT -->
  55 + <div class="col-sm-10">
  56 +
  57 + <div class="form-group row search">
  58 + <div class="col-sm-10">
  59 + <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
  60 + <input
  61 + type="text"
  62 + class="form-control form-control-lg shadow-sm rounded-pill px-5"
  63 + placeholder="Búsqueda productos">
  64 + </div>
  65 + <!-- BOTON VOLVER -->
  66 + <div class="col-sm-2">
  67 + <button
  68 + type="button"
  69 + class="btn btn-light btn-lg shadow-sm"
  70 + [routerLink]="['/inicio']">
  71 + <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span>
  72 + <i class="fa fa-undo text-warning" aria-hidden="true"></i>
  73 + </button>
  74 + </div>
  75 + </div>
  76 +
  77 + <!-- LISTA DE PRODUCTOS -->
  78 + <div class="row pr-3 vh-50 overflow-scroll disable-user-select">
26 79 <div
27 80 class="col-4 p-2"
28 81 *ngFor="let producto of productos">
29 82 <div class="card card-effect bg-white rounded-sm shadow border-0">
30 83 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
31   - <div class="card-body">
32   - <p class="h5 text-left m-0">{{producto.variable}}</p>
33   - <div class="text-left">
34   - <p class="m-0"><small>ASDASDSADASDSA</small></p>
35   - <p class="m-0"><small>COD. 1222</small></p>
  84 + <div class="card-body p-2">
  85 + <p class="h6 text-left m-0">{{producto.DetArt}}</p>
  86 + <div class="row justify-content-between m-0">
  87 + <div class="col-12 p-0">
  88 + <div class="text-left">
  89 + <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
  90 + <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
  91 + </div>
  92 + </div>
  93 + <div class="col-12 my-auto pt-2 pr-2 p-0">
  94 + <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
  95 + </div>
36 96 </div>
37 97 </div>
38 98 </div>
39   -
40 99 </div>
41 100 </div>
42   -
43 101 </div>
  102 +
44 103 </div>
45 104  
46 105 </div>
47 106  
48 107 <!-- SIDEBAR -->
49 108 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
50   -</div>
51 109 \ No newline at end of file
  110 +</div>
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 1671dbe
... ... @@ -0,0 +1,48 @@
  1 +<app-header></app-header>
  2 +<div class="row">
  3 + <div class="col-10">
  4 +
  5 + <!-- NOMBRE DE SECCION -->
  6 + <div class="row m-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>
  9 + </div>
  10 + </div>
  11 +
  12 + <div class="row m-4 d-flex align-items-center">
  13 + <div class="col-4">
  14 + <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
  15 + </div>
  16 + <div class="col-8">
  17 + <h2>¿Desea finalizar su compra?</h2>
  18 + <h3>Por favor, controle y confirme su compra.</h3>
  19 + </div>
  20 + <div class="col-sm-7">
  21 +
  22 + <div class="row pr-3 vh-50 overflow-scroll">
  23 + <div
  24 + class="col-4 p-2"
  25 + *ngFor="let producto of productos">
  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">
  28 + <div class="card-body">
  29 + <p class="h5 text-left m-0">{{producto.variable}}</p>
  30 + <div class="text-left">
  31 + <p class="m-0"><small>ASDASDSADASDSA</small></p>
  32 + <p class="m-0"><small>COD. 1222</small></p>
  33 + <p class="m-0"><strong>$ 563</strong></p>
  34 + </div>
  35 + </div>
  36 + </div>
  37 + </div>
  38 + </div>
  39 + </div>
  40 + <div class="col-sm-5">
  41 + <h3>TOTAL: $553</h3>
  42 + </div>
  43 +</div>
  44 +
  45 +<!-- SIDEBAR -->
  46 +</div>
  47 + <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
  48 +</div>
src/app/components/confirmacion-carrito/confirmacion-carrito.component.scss
Diff comments   View file @ 1671dbe
src/app/components/confirmacion-carrito/confirmacion-carrito.component.spec.ts
Diff comments   View file @ 1671dbe
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { ConfirmacionCarritoComponent } from './confirmacion-carrito.component';
  4 +
  5 +describe('ConfirmacionCarritoComponent', () => {
  6 + let component: ConfirmacionCarritoComponent;
  7 + let fixture: ComponentFixture<ConfirmacionCarritoComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ ConfirmacionCarritoComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(ConfirmacionCarritoComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
Diff comments   View file @ 1671dbe
... ... @@ -0,0 +1,16 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +
  3 +@Component({
  4 + selector: 'app-confirmacion-carrito',
  5 + templateUrl: './confirmacion-carrito.component.html',
  6 + styleUrls: ['./confirmacion-carrito.component.scss']
  7 +})
  8 +export class ConfirmacionCarritoComponent implements OnInit {
  9 +
  10 + productos = [{}, {}, {}]
  11 + constructor() { }
  12 +
  13 + ngOnInit() {
  14 + }
  15 +
  16 +}
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 1671dbe
... ... @@ -10,7 +10,7 @@
10 10 </div>
11 11 </div>
12 12  
13   - <div class="row m-4 d-flex align-items-center">
  13 + <div class="row m-4 d-flex align-items-center disable-user-select">
14 14 <div class="col-md-5 d-flex align-items-end flex-column">
15 15  
16 16 <!-- PROMOCIONES -->
... ... @@ -91,4 +91,4 @@
91 91  
92 92 <!-- SIDEBAR -->
93 93 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
94   -</div>
95 94 \ No newline at end of file
  95 +</div>
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 1671dbe
... ... @@ -36,7 +36,7 @@
36 36 <h3 class="text-dark"><strong>{{total | currency}}</strong></h3>
37 37 </div>
38 38 <div class="col 12 p-0">
39   - <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button>
  39 + <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito"><strong>Finalizar y pagar</strong></button>
40 40 <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
41 41 </div>
42 42 </div>
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ 1671dbe
... ... @@ -0,0 +1,9 @@
  1 +@import "../../../node_modules/bootstrap/scss/functions";
  2 +@import "../../../node_modules/bootstrap/scss/variables";
  3 +
  4 +$theme-colors: (
  5 + primary: red,
  6 + light: white,
  7 +);
  8 +
  9 +@import "../../../node_modules/bootstrap/scss/bootstrap.scss";
1 1 @import "./assets/scss/animation.scss";
  2 +@import "./assets/scss/bootstrap-override.scss";
2 3  
3   -html, body {
  4 +html,
  5 +body {
4 6 background-color: rgb(245, 245, 245);
5 7 overflow: hidden;
6 8 }
... ... @@ -57,11 +59,11 @@ html, body {
57 59 outline: 1px solid slategrey;
58 60 border-radius: 10px;
59 61 height: 12px;
60   - &:active{
  62 + &:active {
61 63 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
62 64 }
63 65 }
64 66 &::-webkit-scrollbar-corner {
65 67 border-radius: 10px;
66 68 }
67   -}
68 69 \ No newline at end of file
  70 +}