Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 97ea4fbc50fefef6bfaf89c2ec28165552fad51e

Authored by Eric Fernandez
2 parents 930ae70b35 10485e5068
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !29
Showing 17 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 97ea4fb
... ... @@ -7,12 +7,14 @@ import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/
7 7 import { MasterComponent } from './components/master/master.component';
8 8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
9 9 import { PagoComponent } from './components/pago/pago.component';
  10 +import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
10 11  
11 12 const routes: Routes = [
12 13 { path: '', component: HomeComponent },
13 14 { path: 'home', component: HomeComponent },
14 15 { path: 'abm-imagenes', component: AmbImagenesComponent },
15 16 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
  17 + { path: 'cancelar-compra', component: CancelarCompraComponent },
16 18 {
17 19 path: '',
18 20 component: MasterComponent,
src/app/app.module.ts
Diff comments   View file @ 97ea4fb
... ... @@ -21,6 +21,7 @@ import { PopoverPromosComponent } from './components/popover-promos/popover-prom
21 21 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
22 22 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
23 23 import { PagoComponent } from './components/pago/pago.component';
  24 +import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
24 25 //#endregion
25 26  
26 27 @NgModule({
... ... @@ -36,7 +37,8 @@ import { PagoComponent } from './components/pago/pago.component';
36 37 PopoverPromosComponent,
37 38 PopoverSinonimosComponent,
38 39 AmbImagenesComponent,
39   - PagoComponent
  40 + PagoComponent,
  41 + CancelarCompraComponent
40 42 ],
41 43 imports: [
42 44 BrowserModule,
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 97ea4fb
... ... @@ -54,7 +54,7 @@
54 54 </div>
55 55 </div>
56 56 <!-- LISTA DE PRODUCTOS -->
57   - <div class="row align-items-start vh-60 overflow-scroll disable-user-select">
  57 + <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
58 58 <div
59 59 class="col-4 p-2"
60 60 *ngFor="let producto of auxProductos">
... ... @@ -92,9 +92,11 @@
92 92 </div>
93 93  
94 94 <!-- SPINNER -->
95   - <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center">
96   - <div class="spinner-border spinner-lg text-secondary" role="status"></div>
97   - <span class="text-secondary m-2 h5">Cargando información.</span>
  95 + <div
  96 + *ngIf="productos.length === 0 && showSpinner"
  97 + class="col-sm-10 p-0 align-self-center text-center">
  98 + <div class="spinner-border spinner-lg text-secondary" role="status"></div>
  99 + <span class="text-secondary m-2 h5">Cargando información.</span>
98 100 </div>
99 101  
100 102 </div>
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ 97ea4fb
1   -import { Component, OnInit, APP_BOOTSTRAP_LISTENER } from '@angular/core';
  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 4 import { Categoria } from 'src/app/wrappers/categoria';
... ... @@ -74,4 +74,3 @@ export class BusquedaProductosComponent implements OnInit {
74 74 this.router.navigate(['inicio']);
75 75 }
76 76 }
77   -
src/app/components/cancelar-compra/cancelar-compra.component.html
Diff comments   View file @ 97ea4fb
... ... @@ -0,0 +1,74 @@
  1 +<div class="container-fluid p-0">
  2 + <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image">
  3 + <div class="row m-0">
  4 + <div class="col p-0">
  5 + <div class="vh-100 fade-in d-flex align-content-strech flex-wrap disable-user-select">
  6 +
  7 + <!-- HEADER -->
  8 + <div class="row m-0 w-100 bg-primary-gradient-horizontal">
  9 + <div class="col-6 bg-white rounded-bottom-right">
  10 + <div class="row h-100">
  11 + <div class="col d-flex align-items-center">
  12 + <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png">
  13 + </div>
  14 + </div>
  15 + </div>
  16 + </div>
  17 +
  18 + <!-- INFO -->
  19 + <div class="row m-0 w-100">
  20 + <div class="col-4 offset-2">
  21 + <div class="row h-100">
  22 + <div class="col-12 py-4">
  23 + <div class="card h-100 rounded">
  24 + <img src="{{apiUrl}}/imagenes/atencion.svg" class="w-50 mx-auto mt-auto mb-4">
  25 + <div class="mb-auto mt-4">
  26 + <p class="display-3 card-text text-center font-weight-bold">
  27 + Atención
  28 + </p>
  29 + </div>
  30 + </div>
  31 + </div>
  32 + </div>
  33 + </div>
  34 + <div class="col-6 text-center text-white my-auto">
  35 + <p class="display-3 font-weight-bold mb-5">
  36 + Usted esta a punto<br>de cancelar su compra
  37 + </p>
  38 + <p class="display-4 m-0">
  39 + Perderá los datos y<br>productos ya ingresados
  40 + </p>
  41 + <div class="d-flex justify-content-center mt-2">
  42 + <button
  43 + type="button"
  44 + class="btn btn-lg btn-light shadow mr-4"
  45 + (click)="volverPreviousPage()">
  46 + <span class="pr-2">Volver a mi compra</span>
  47 + <i class="fa fa-undo text-warning"></i>
  48 + </button>
  49 + <button
  50 + type="button"
  51 + class="btn btn-lg btn-light shadow ml-4"
  52 + (click)="limpiarCarritoYvolver()">
  53 + <span class="pr-2">Si, terminar</span>
  54 + <i class="fa fa-times text-danger"></i>
  55 + </button>
  56 + </div>
  57 + </div>
  58 + </div>
  59 +
  60 + <!-- FOOTER -->
  61 + <div class="row m-0 w-100 bg-gray">
  62 + <div class="col-6 bg-white offset-6 rounded-top-left">
  63 + <div class="row h-100">
  64 + <div class="col d-flex align-items-center">
  65 + <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
  66 + </div>
  67 + </div>
  68 + </div>
  69 + </div>
  70 +
  71 + </div>
  72 + </div>
  73 + </div>
  74 +</div>
src/app/components/cancelar-compra/cancelar-compra.component.scss
Diff comments   View file @ 97ea4fb
src/app/components/cancelar-compra/cancelar-compra.component.spec.ts
Diff comments   View file @ 97ea4fb
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { CancelarCompraComponent } from './cancelar-compra.component';
  4 +
  5 +describe('CancelarCompraComponent', () => {
  6 + let component: CancelarCompraComponent;
  7 + let fixture: ComponentFixture<CancelarCompraComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ CancelarCompraComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(CancelarCompraComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/components/cancelar-compra/cancelar-compra.component.ts
Diff comments   View file @ 97ea4fb
... ... @@ -0,0 +1,33 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +import { appSettings } from 'src/etc/AppSettings';
  3 +import { Location } from '@angular/common';
  4 +import { Router } from '@angular/router';
  5 +
  6 +@Component({
  7 + selector: 'app-cancelar-compra',
  8 + templateUrl: './cancelar-compra.component.html',
  9 + styleUrls: ['./cancelar-compra.component.scss']
  10 +})
  11 +export class CancelarCompraComponent implements OnInit {
  12 +
  13 + private apiUrl: string = appSettings.apiUrl;
  14 +
  15 + constructor(
  16 + private location: Location,
  17 + private router: Router
  18 + ) { }
  19 +
  20 + ngOnInit() {
  21 + }
  22 +
  23 + volverPreviousPage() {
  24 +
  25 + this.location.back();
  26 + }
  27 +
  28 + limpiarCarritoYvolver(){
  29 +
  30 + this.router.navigate(['/home']);
  31 + }
  32 +
  33 +}
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 97ea4fb
... ... @@ -85,7 +85,7 @@
85 85 <button
86 86 type="button"
87 87 class="btn btn-block btn-light shadow btn-sm shadow"
88   - [routerLink]="['/inicio']">
  88 + (click)="volverPreviousPage()">
89 89 <span class="pr-2">Volver</span>
90 90 <i class="fa fa-undo text-warning"></i>
91 91 </button>
... ... @@ -96,7 +96,7 @@
96 96 <button
97 97 type="button"
98 98 class="btn btn-block btn-light shadow btn-sm shadow"
99   - [routerLink]="['home']">
  99 + [routerLink]="['/cancelar-compra']">
100 100 <span class="pr-2">Cancelar</span>
101 101 <i class="fa fa-times text-danger"></i>
102 102 </button>
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
Diff comments   View file @ 97ea4fb
1 1 import { Component, OnInit } from '@angular/core';
2 2 import { appSettings } from 'src/etc/AppSettings';
  3 +import { Location } from '@angular/common';
3 4  
4 5 @Component({
5 6 selector: 'app-confirmacion-carrito',
... ... @@ -11,9 +12,13 @@ export class ConfirmacionCarritoComponent implements OnInit {
11 12 productos = [{}, {}, {}];
12 13 private apiUrl: string = appSettings.apiUrl;
13 14  
14   - constructor() { }
  15 + constructor(private location: Location) { }
15 16  
16 17 ngOnInit() {
17 18 }
18 19  
  20 + volverPreviousPage() {
  21 + this.location.back();
  22 + }
  23 +
19 24 }
src/app/components/home/home.component.html
Diff comments   View file @ 97ea4fb
1   -<div class="container-fluid background-image">
2   - <div class="row">
  1 +<div class="container-fluid p-0">
  2 + <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image">
  3 + <div class="row m-0">
3 4 <div class="col p-0">
4   - <div class="vh-100 d-flex align-content-between flex-wrap disable-user-select">
  5 + <div
  6 + class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select"
  7 + [routerLink]="['/inicio']">
5 8  
6 9 <!-- HEADER -->
7 10 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
src/app/components/home/home.component.scss
Diff comments   View file @ 97ea4fb
... ... @@ -1,25 +0,0 @@
1   -.background-image {
2   - background-image: url(http://10.231.45.117:4705/autoservicio/imagenes/homeBackground.jpg);
3   - background-repeat: no-repeat;
4   - background-size: cover;
5   -}
6   -
7   -.w-20 {
8   - width: 20% !important;
9   -}
10   -
11   -.rounded-bottom-right {
12   - border-bottom-right-radius: 10rem;
13   - &:before {
14   - border-radius: 0 40px 40px 0;
15   - background-color: #fff;
16   - }
17   -}
18   -
19   -.rounded-top-left {
20   - border-top-left-radius: 10rem;
21   -}
22   -
23   -.bg-gray {
24   - background-color: #cccccc;
25   -}
src/app/components/home/home.component.ts
Diff comments   View file @ 97ea4fb
... ... @@ -11,14 +11,9 @@ export class HomeComponent implements OnInit {
11 11  
12 12 private apiUrl: string = appSettings.apiUrl;
13 13  
14   - constructor(private router: Router) { }
  14 + constructor() { }
15 15  
16 16 ngOnInit() {
17 17 }
18 18  
19   - @HostListener('document:click', ['$event'])
20   - documentClick(event: MouseEvent) {
21   - this.router.navigate(['/inicio']);
22   - }
23   -
24 19 }
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 97ea4fb
... ... @@ -109,8 +109,8 @@
109 109 <!-- PRODUCTO A CARGAR -->
110 110 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
111 111 <img
112   - class="card-img-top d-block w-100 mx-auto rounded-sm"
113   - src="{{apiUrl}}/imagenes/testImg3.jpg">
  112 + class="card-img-top d-block w-75 mx-auto rounded-sm"
  113 + src="{{apiUrl}}/imagenes/testImg.jpg">
114 114  
115 115 <div class="row justify-content-between m-3">
116 116 <div class="col-12 text-left px-1">
... ... @@ -126,7 +126,7 @@
126 126 <div class="fade-in m-0" *ngIf="promoAcargar">
127 127 <img
128 128 class="card-img-top d-block w-100 mx-auto rounded-sm"
129   - src="{{apiUrl}}/imagenes/testImg3.jpg">
  129 + src="{{apiUrl}}/imagenes/testImg.jpg">
130 130  
131 131 <div class="row justify-content-between m-3">
132 132 <div class="col-12 text-left px-1">
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 97ea4fb
... ... @@ -7,8 +7,10 @@
7 7  
8 8 <div class="overflow-auto overflow-scroll mb-2 w-100">
9 9 <!-- PRODUCTOS CARRITO -->
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.imagenes[0].imagen}}">
  10 + <div
  11 + class="fade-left my-2 bg-white border-0 rounded-sm"
  12 + *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
  13 + <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}">
12 14 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
13 15 <div class="col-12 p-0 pt-2 text-left my-auto">
14 16 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
... ... @@ -60,7 +62,10 @@
60 62 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
61 63 <i class="fa fa-check text-success" aria-hidden="true"></i>
62 64 </button>
63   - <button type="button" class="btn btn-block btn-light shadow btn-sm shadow" (click)="cleanCarrito()">
  65 + <button
  66 + type="button"
  67 + class="btn btn-block btn-light shadow btn-sm shadow"
  68 + [routerLink]="['/cancelar-compra']">
64 69 <span class="pr-1">Cancelar</span>
65 70 <i class="fa fa-times text-danger" aria-hidden="true"></i>
66 71 </button>
src/assets/scss/animation.scss
Diff comments   View file @ 97ea4fb
1 1 .fade-in {
2   - margin-top: 25px;
3   - font-size: 21px;
4   - text-align: center;
5   - animation: fadein 1s;
6   - -moz-animation: fadein 1s; /* Firefox */
7   - -webkit-animation: fadein 1s; /* Safari and Chrome */
8   - -o-animation: fadein 1s; /* Opera */
  2 + -webkit-animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  3 + animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
9 4 }
10 5  
11   -@keyframes fadein {
12   - from {
13   - opacity: 0;
14   - }
15   - to {
16   - opacity: 1;
17   - }
18   -}
19   -
20   -@-moz-keyframes fadein {
21   - /* Firefox */
22   - from {
  6 +@-webkit-keyframes fadein {
  7 + 0% {
  8 + -webkit-transform: translateZ(80px);
  9 + transform: translateZ(80px);
23 10 opacity: 0;
24 11 }
25   - to {
  12 + 100% {
  13 + -webkit-transform: translateZ(0);
  14 + transform: translateZ(0);
26 15 opacity: 1;
27 16 }
28 17 }
29 18  
30   -@-webkit-keyframes fadein {
31   - /* Safari and Chrome */
32   - from {
  19 +@keyframes fadein {
  20 + 0% {
  21 + -webkit-transform: translateZ(80px);
  22 + transform: translateZ(80px);
33 23 opacity: 0;
34 24 }
35   - to {
  25 + 100% {
  26 + -webkit-transform: translateZ(0);
  27 + transform: translateZ(0);
36 28 opacity: 1;
37 29 }
38 30 }
39 31  
40 32 .fade-right {
41   - margin-top: 25px;
42   - font-size: 21px;
43   - text-align: center;
44 33 animation: faderight 1s;
45 34 -moz-animation: faderight 1s; /* Firefox */
46 35 -webkit-animation: faderight 1s; /* Safari and Chrome */
... ... @@ -122,11 +111,11 @@
122 111 }
123 112  
124 113 .fade-bottom {
125   - -webkit-animation: fade-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
126   - animation: fade-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  114 + -webkit-animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  115 + animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
127 116 }
128 117  
129   -@-webkit-keyframes fade-top {
  118 +@-webkit-keyframes fade-bottom {
130 119 0% {
131 120 -webkit-transform: scaleY(0.4);
132 121 transform: scaleY(0.4);
... ... @@ -141,7 +130,7 @@
141 130 }
142 131 }
143 132  
144   -@keyframes fade-top {
  133 +@keyframes fade-bottom {
145 134 0% {
146 135 -webkit-transform: scaleY(0.4);
147 136 transform: scaleY(0.4);
... ... @@ -52,7 +52,7 @@ body {
52 52 overflow-y: auto !important;
53 53 overflow-x: hidden !important;
54 54 &::-webkit-scrollbar {
55   - width: 0.5em;
  55 + width: 1em;
56 56 }
57 57 &::-webkit-scrollbar-track {
58 58 border-radius: 10px;
... ... @@ -116,3 +116,25 @@ body {
116 116 .sidebar {
117 117 right: 0;
118 118 }
  119 +
  120 +.background-image {
  121 + background-repeat: no-repeat;
  122 + background-size: cover;
  123 + position: fixed;
  124 +}
  125 +
  126 +.rounded-bottom-right {
  127 + border-bottom-right-radius: 10rem;
  128 + &:before {
  129 + border-radius: 0 40px 40px 0;
  130 + background-color: #fff;
  131 + }
  132 +}
  133 +
  134 +.rounded-top-left {
  135 + border-top-left-radius: 10rem;
  136 +}
  137 +
  138 +.bg-gray {
  139 + background-color: #cccccc;
  140 +}