Martin Macola / autoservicio

Download as
Browse Code »

Commit 6f586d8547390804972aba64ab8990347da3c06d

Authored by Eric Fernandez
2 parents ca5ef655e6 35a1764f99
Exists in master

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !15
Showing 14 changed files   Show diff stats
... ... @@ -44,3 +44,6 @@ testem.log
44 44 # System Files
45 45 .DS_Store
46 46 Thumbs.db
  47 +
  48 +# Project Settings
  49 +src/etc/AppSettings.ts
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 6f586d8
... ... @@ -6,7 +6,7 @@
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">
  9 + <p class="h5 py-1 bg-gray text-muted text-center">
10 10 Búsqueda
11 11 <i class="fa fa-search"></i>
12 12 </p>
... ... @@ -90,14 +90,13 @@
90 90 </button>
91 91 </div>
92 92 </div>
93   -
94 93 <!-- LISTA DE PRODUCTOS -->
95 94 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
96 95 <div
97 96 class="col-4 p-2"
98 97 *ngFor="let producto of auxProductos">
99 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 100 <div class="p-2">
102 101 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
103 102 <div class="row justify-content-between m-0">
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ 6f586d8
1 1 import { Component, OnInit } from '@angular/core';
2 2 import { ProductoService } from 'src/app/services/producto.service';
3 3 import { Producto } from 'src/app/wrappers/producto';
  4 +import { appSettings } from 'src/etc/AppSettings';
4 5  
5 6 @Component({
6 7 selector: 'app-busqueda-productos',
... ... @@ -9,11 +10,12 @@ import { Producto } from &#39;src/app/wrappers/producto&#39;;
9 10 })
10 11 export class BusquedaProductosComponent implements OnInit {
11 12  
12   - productos: Producto[] = [];
13   - auxProductos: Producto[] = [];
14   - searchTerm: string = '';
15   - showSpinner: boolean = true;
16   - categoria: Categorias = Categorias.todos;
  13 + private productos: Producto[] = [];
  14 + private auxProductos: Producto[] = [];
  15 + private searchTerm: string = '';
  16 + private showSpinner: boolean = true;
  17 + private categoria: Categorias = Categorias.todos;
  18 + private apiUrl : string = appSettings.apiUrl;
17 19  
18 20 constructor(private productoService: ProductoService) { }
19 21  
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 6f586d8
... ... @@ -5,7 +5,7 @@
5 5 <!-- NOMBRE DE SECCION -->
6 6 <div class="row m-0">
7 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 9 </div>
10 10 </div>
11 11  
src/app/components/header/header.component.html
Diff comments   View file @ 6f586d8
1   -<div class="bg-danger py-1 py-sm-2 py-lg-5">
2   - <p class="text-center">HEADER</p>
3   -</div>
4 1 \ No newline at end of file
  2 +<div class="row bg-light p-4 justify-content-between">
  3 + <div class="col-auto">
  4 + <img src="{{apiUrl}}/imagenes/logoaxion.png">
  5 + </div>
  6 + <div class="col-auto">
  7 + <img src="{{apiUrl}}/imagenes/logodebo.png">
  8 + </div>
  9 +</div>
src/app/components/header/header.component.ts
Diff comments   View file @ 6f586d8
1 1 import { Component, OnInit } from '@angular/core';
  2 +import { appSettings } from 'src/etc/AppSettings';
2 3  
3 4 @Component({
4 5 selector: 'app-header',
... ... @@ -7,6 +8,8 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
7 8 })
8 9 export class HeaderComponent implements OnInit {
9 10  
  11 + private apiUrl : string = appSettings.apiUrl;
  12 +
10 13 constructor() { }
11 14  
12 15 ngOnInit() {
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 6f586d8
... ... @@ -6,7 +6,7 @@
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">Inicio</p>
  9 + <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
10 10 </div>
11 11 </div>
12 12  
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 6f586d8
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>
4   - <div class="overflow-auto overflow-scroll mb-2">
5   - <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">
6   - <img src="{{prod.img}}" class="card-img-top" alt="...">
7   - <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
8   - <div class="col-8 p-0 text-left my-auto">
9   - <p class="m-0 card-description">{{prod.desc}}</p>
10   - <p class="m-0 card-description">COD: {{prod.cod}}</p>
  3 + <h4 class="border-bottom border-white text-white"> Mi compra </h4>
  4 +
  5 + <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">
  7 + <img class="m-auto pt-2" [src]="prod.img">
  8 + <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">
  10 + <p class="m-0 h6"><small>{{prod.desc}}</small></p>
  11 + <p class="m-0 h6"><small>COD: {{prod.cod}}</small></p>
11 12 </div>
12   - <div class="col-4 p-1 text-center my-auto">
13   - {{prod.precio | currency}}
  13 + <div class="col-12 pr-1 text-right h6 my-auto ">
  14 + <p class="m-0">{{prod.precio | currency}}</p>
14 15 </div>
15 16 </div>
16 17 <div class="row m-0 p-0">
17   - <div class="col p-1 pb-1 mt-2">
18   - <button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button>
19   - <button type="button" class="btn btn-light btn-sm my-auto">Y</button>
20   - <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">
21   - <button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button>
22   - <label for="" class="border border.white px-1">{{prod.cantidad}}</label>
23   - <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button>
  18 + <div class="col px-2 my-2">
  19 + <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)">
  21 + <i class="fa fa-plus" aria-hidden="true"></i>
  22 + </button>
  23 + <div class="bg-white border border-white px-3 my-auto text-dark h5">
  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 39 </div>
25 40 </div>
26 41 </div>
27 42 </div>
28 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 46 <div class="card-body row">
32 47 <div class="col">
33   - <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4>
34   - <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4>
  48 + <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</h4>
  49 + <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</h4>
35 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 52 </div>
38 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 57 <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
41 58 </div>
42 59 </div>
43   - </div>
44 60 \ No newline at end of file
  61 + </div>
  62 +</div>
src/app/components/sidebar/sidebar.component.scss
Diff comments   View file @ 6f586d8
1 1 .card-description{
2 2 font-size: 12px;
3   -}
4 3 \ No newline at end of file
  4 +}
  5 +
  6 +app-sidebar {
  7 + background-color: red !important;
  8 +}
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ 6f586d8
1 1 import { Component, OnInit } from '@angular/core';
  2 +import { Producto } from 'src/app/wrappers/producto';
2 3  
3 4  
4 5 @Component({
... ... @@ -16,10 +17,10 @@ export class SidebarComponent implements OnInit {
16 17 private productos = [
17 18 {
18 19 "id": 1,
19   - "desc": "Galletas Oreo",
  20 + "Detart": "Galletas Oreo",
20 21 "cod": 225412,
21 22 "precio": 15,
22   - "img": "./assets/img/descarga.jpg",
  23 + "img": "./assets/img/logodebo.png",
23 24 "cantidad": 1
24 25 },
25 26 {
... ... @@ -27,7 +28,7 @@ export class SidebarComponent implements OnInit {
27 28 "desc": "Coca cola 500ml",
28 29 "cod": 512632,
29 30 "precio": 40,
30   - "img": "./assets/img/descarga.jpg",
  31 + "img": "./assets/img/logodebo.png",
31 32 "cantidad": 1
32 33 },
33 34 {
... ... @@ -35,7 +36,7 @@ export class SidebarComponent implements OnInit {
35 36 "desc": "Pancho grande",
36 37 "cod": 775987,
37 38 "precio": 45,
38   - "img": "./assets/img/descarga.jpg",
  39 + "img": "./assets/img/logodebo.png",
39 40 "cantidad": 1
40 41 }
41 42 ];
src/app/services/producto.service.ts
Diff comments   View file @ 6f586d8
1 1 import { Injectable } from '@angular/core';
2 2 import { HttpClient } from '@angular/common/http';
3 3 import { Observable } from 'rxjs';
  4 +import { appSettings } from 'src/etc/AppSettings';
4 5  
5 6 @Injectable({
6 7 providedIn: 'root'
... ... @@ -10,7 +11,7 @@ export class ProductoService {
10 11 constructor(private http: HttpClient) { }
11 12  
12 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 }
src/app/wrappers/producto.ts
Diff comments   View file @ 6f586d8
... ... @@ -87,4 +87,6 @@ export interface Producto {
87 87 IMP_IMP_INT: boolean;
88 88 id: number;
89 89 nombreImagen?: any;
  90 +
  91 + cantidad?:number;
90 92 }
src/etc/AppSettings ejemplo.ts
Diff comments   View file @ 6f586d8
... ... @@ -0,0 +1,3 @@
  1 +export const appSettings = {
  2 + // apiUrl: 'http://10.231.45.117:4705/autoservicio'
  3 +};
... ... @@ -3,7 +3,7 @@
3 3  
4 4 html,
5 5 body {
6   - background-color: rgb(245, 245, 245);
  6 + background-color: #f0f0f0;
7 7 overflow: hidden;
8 8 }
9 9  
... ... @@ -20,25 +20,28 @@ body {
20 20 }
21 21  
22 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 26 .rounded {
27 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 35 .rounded-sm {
31 36 border-radius: 0.75rem !important;
32 37 }
33 38  
34 39 .card-effect {
35   - &:active,
36   - img {
  40 + &:active {
37 41 background-color: #c9c9c9b3 !important;
38 42 transition: background-color 0.5s;
39 43 }
40   - &:focus,
41   - img {
  44 + &:focus {
42 45 background-color: #c9c9c9b3 !important;
43 46 transition: background-color 0.5s;
44 47 }
... ... @@ -52,6 +55,7 @@ body {
52 55 }
53 56 &::-webkit-scrollbar-track {
54 57 border-radius: 10px;
  58 + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
55 59 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
56 60 }
57 61 &::-webkit-scrollbar-thumb {
... ... @@ -60,6 +64,7 @@ body {
60 64 border-radius: 10px;
61 65 height: 12px;
62 66 &:active {
  67 + box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
63 68 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
64 69 }
65 70 }
... ... @@ -68,6 +73,14 @@ body {
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 84 .icon-dim {
72 85 height: 40px !important;
73 86 width: auto !important;
... ... @@ -81,4 +94,3 @@ body {
81 94 border-top: black !important;
82 95 border-bottom: black !important;
83 96 }
84   -