Mauricio Cattafi / autoservicio

Commit 930ae70b354976022bf624ca9b21a00774f4bc30

Authored by Eric Fernandez 2019-08-16 12:48:17 -0300

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !28

Showing 9 changed files Show diff stats

src/app/app-routing.module.ts

Diff comments View file @ 930ae70

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
 import { InicioComponent } from './components/inicio/inicio.component';
 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
 import { MasterComponent } from './components/master/master.component';
 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
 import { PagoComponent } from './components/pago/pago.component';
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'home', component: HomeComponent },
   { path: 'abm-imagenes', component: AmbImagenesComponent },
+  { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
   {
     path: '',
     component: MasterComponent,
     children: [
       { path: 'inicio', component: InicioComponent },
       { path: 'busqueda-productos', component: BusquedaProductosComponent },
-      { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
       { path: 'pago', component: PagoComponent }
     ]
   },
   { path: '**', redirectTo: '/home', pathMatch: 'full' },
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.module.ts

Diff comments View file @ 930ae70

 //#region MODULES
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 //#endregion
 //#region COMPONENTS
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './components/header/header.component';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
-import { CarouselComponent } from './components/carousel/carousel.component';
 import { HomeComponent } from './components/home/home.component';
 import { InicioComponent } from './components/inicio/inicio.component';
 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
 import { MasterComponent } from './components/master/master.component';
 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
 import { PagoComponent } from './components/pago/pago.component';
 //#endregion
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
-    CarouselComponent,
     HomeComponent,
     InicioComponent,
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
     PopoverPromosComponent,
     PopoverSinonimosComponent,
     AmbImagenesComponent,
     PagoComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
     TooltipModule.forRoot(),
     PopoverModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/carousel/carousel.component.html

View file @ 930ae70

1	<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">	File was deleted
2	<div class="carousel-inner">
3	<div class="carousel-item active">
4	<div class="card" style="width: 18rem;">
5	<div class="card-body">
6	<h5 class="card-title">Card title</h5>
7	<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
8	<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
9	card's content.</p>
10	<a href="#" class="card-link">Card link</a>
11	<a href="#" class="card-link">Another link</a>
12	</div>
13	</div>
14	</div>
15	<div class="carousel-item">
16	<div class="card" style="width: 18rem;">
17	<div class="card-body">
18	<h5 class="card-title">Card title 2222</h5>
19	<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
20	<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
21	card's content.</p>
22	<a href="#" class="card-link">Card link</a>
23	<a href="#" class="card-link">Another link</a>
24	</div>
25	</div>
26	</div>
27	</div>
28	</div>

src/app/components/carousel/carousel.component.scss

View file @ 930ae70

src/app/components/carousel/carousel.component.spec.ts

View file @ 930ae70

1	import { async, ComponentFixture, TestBed } from '@angular/core/testing';		File was deleted
2
3	import { CarouselComponent } from './carousel.component';
4
5	describe('CarouselComponent', () => {
6	let component: CarouselComponent;
7	let fixture: ComponentFixture<CarouselComponent>;
8
9	beforeEach(async(() => {
10	TestBed.configureTestingModule({
11	declarations: [ CarouselComponent ]
12	})
13	.compileComponents();
14	}));
15
16	beforeEach(() => {
17	fixture = TestBed.createComponent(CarouselComponent);
18	component = fixture.componentInstance;
19	fixture.detectChanges();
20	});
21
22	it('should create', () => {
23	expect(component).toBeTruthy();
24	});
25	});
26		1	import { async, ComponentFixture, TestBed } from '@angular/core/testing';

src/app/components/carousel/carousel.component.ts

View file @ 930ae70

1	import { Component, OnInit } from '@angular/core';		File was deleted
2
3	@Component({
4	selector: 'app-carousel',
5	templateUrl: './carousel.component.html',
6	styleUrls: ['./carousel.component.scss']
7	})
8	export class CarouselComponent implements OnInit {
9
10	constructor() { }
11
12	ngOnInit() {
13	}
14
15	}
16		1	import { Component, OnInit } from '@angular/core';

src/app/components/confirmacion-carrito/confirmacion-carrito.component.html

Diff comments View file @ 930ae70

1	<div class="row">	1	<div class="row m-0 fade-in bg-primary-gradient disable-user-select">
2	<div class="col-12">	2	<div class="col-12 p-0 vh-100">
		3
		4	<!-- TOP HEADER -->
		5	<app-header></app-header>
3		6
4	<!-- NOMBRE DE SECCION -->	7	<!-- NOMBRE DE SECCION -->
5	<div class="row m-0">	8	<div class="row m-0">
6	<div class="col-12 p-0">	9	<div class="col-12 p-0">
7	<p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>	10	<p class="h5 py-1 bg-gray text-muted text-center m-0">
		11	Pagar
		12	<i class="fa fa-usd"></i>
		13	</p>
8	</div>	14	</div>
9	</div>	15	</div>
10		16
11	<div class="row m-3 d-flex align-items-center">	17	<div class="row m-0">
12	<div class="col-4">	18	<div class="col-12">
13	<h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>	19
14	</div>	20	<!-- TEXTO DE IZQUIERDA -->
15	<div class="col-8">	21	<div class="row mx-2 mt-4 text-white">
16	<h2>¿Desea finalizar su compra?</h2>	22	<div class="col-sm-2 my-auto">
17	<h3>Por favor, controle y confirme su compra.</h3>	23	<p class="h2">Mi Compra
18	</div>	24	<i class="fa fa-shopping-cart "></i>
19	<div class="col-sm-7">	25	</p>
20		26	</div>
21	<div class="row pr-3 vh-50 overflow-scroll">	27	<div class="col-sm-4 my-auto">
22	<div class="col-4 p-2" *ngFor="let producto of productos">	28	<p class="h3">¿Desea finalizar su compra?</p>
23	<div class="card card-effect bg-white rounded-sm shadow border-0">	29	<p class="h4">Por favor, controle y confirme su compra.</p>
24	<img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="card-img-top w-75 m-auto">	30	</div>
25	<div class="card-body">	31	</div>
26	<p class="h5 text-left m-0">{{producto.variable}}</p>	32
27	<div class="text-left">	33	<div class="row">
28	<p class="m-0"><small>ASDASDSADASDSA</small></p>	34	<!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
29	<p class="m-0"><small>COD. 1222</small></p>	35	<div class="col-sm-7">
30	<p class="m-0"><strong>$ 563</strong></p>	36	<div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
		37	<div class="col-4 p-2" *ngFor="let producto of productos">
		38	<div class="bg-white rounded-sm shadow border-0">
		39	<img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto">
		40	<div class="p-2">
		41	<p class="h6 text-left m-0">ZARAZA</p>
		42	<div class="row justify-content-between m-0">
		43	<div class="col-12 p-0">
		44	<div class="text-left">
		45	<p class="m-0 h6"><small>ZARAZA DETALLE</small></p>
		46	<p class="m-0 h6"><small>COD. 5656</small></p>
		47	</div>
		48	</div>
		49	<div class="col-12 my-auto pt-2 pr-2 p-0">
		50	<p class="text-right m-0 h6">{{20 \| currency}}</p>
		51	</div>
		52	</div>
		53	</div>
		54	</div>
		55	</div>
		56	</div>
		57	</div>
		58
		59	<div class="col-sm-5">
		60	<div class="row ml-3">
		61	<!-- TICKET -->
		62	<div class="col-sm-7">
		63	<div class="card rounded-sm shadow">
		64	<div class="card-body">
		65	<p class="h5 card-title">Su Ticket</p>
		66	<p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll">
		67	Ticket detalle.
		68	</p>
		69	<p class="h4 card-text text-right mt-3 mb-0">
		70	Total {{230 \| currency}}
		71	</p>
		72	</div>
31	</div>	73	</div>
32	</div>	74	</div>
33	</div>	75	</div>
34	</div>	76	</div>
35	</div>	77	</div>
36	</div>	78
37	<div class="col-sm-5">	79	<!-- OPCIONES ABAJO DERECHA -->
38	<h3>TOTAL: $553</h3>	80	<div class="row m-0 fixed-bottom">
		81	<div class="col-sm-2 offset-sm-10 p-0 mt-auto">
		82	<div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
		83	<div class="card-body row m-0">
		84	<div class="col-12 p-3">
		85	<button
		86	type="button"
		87	class="btn btn-block btn-light shadow btn-sm shadow"
		88	[routerLink]="['/inicio']">
		89	<span class="pr-2">Volver</span>
		90	<i class="fa fa-undo text-warning"></i>
		91	</button>
		92	<button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
		93	<span class="font-weight-bold pr-2">Finalizar y Pagar</span>
		94	<i class="fa fa-check text-success"></i>
		95	</button>
		96	<button
		97	type="button"
		98	class="btn btn-block btn-light shadow btn-sm shadow"
		99	[routerLink]="['home']">
		100	<span class="pr-2">Cancelar</span>
		101	<i class="fa fa-times text-danger"></i>
		102	</button>
		103	</div>
		104	</div>
		105	</div>
		106	</div>
		107	</div>
		108
39	</div>	109	</div>
40	</div>	110	</div>
		111
41	</div>	112	</div>
		113
42	</div>	114	</div>
43		115

src/app/components/header/header.component.html

Diff comments View file @ 930ae70

1	<div class="row bg-light p-4 justify-content-between">	1	<div class="row m-0 bg-light p-4 justify-content-between">
2	<div class="col-auto">	2	<div class="col-auto">
3	<img src="{{apiUrl}}/imagenes/logoaxion.png">	3	<img src="{{apiUrl}}/imagenes/logoaxion.png">
4	</div>	4	</div>
5	<div class="col-auto">	5	<div class="col-auto">
6	<img src="{{apiUrl}}/imagenes/logodebo.png">	6	<img src="{{apiUrl}}/imagenes/logodebo.png">
7	</div>	7	</div>
8	</div>	8	</div>
9		9

src/styles.scss

Diff comments View file @ 930ae70

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	@import "../node_modules/bootstrap/scss/_variables.scss";	3	@import "../node_modules/bootstrap/scss/_variables.scss";
4		4
5	html,	5	html,
6	body {	6	body {
7	background-color: #f0f0f0;	7	background-color: #f0f0f0;
8	font-family: bahnschrift;	8	font-family: bahnschrift;
9	}	9	}
10		10
11	.blur {	11	.blur {
12	filter: blur(10px);	12	filter: blur(10px);
13	-webkit-filter: blur(10px);	13	-webkit-filter: blur(10px);
14	}	14	}
15		15
16	.disable-user-select {	16	.disable-user-select {
17	-webkit-user-select: none;	17	-webkit-user-select: none;
18	-moz-user-select: none;	18	-moz-user-select: none;
19	-ms-user-select: none;	19	-ms-user-select: none;
20	user-select: none;	20	user-select: none;
21	}	21	}
22		22
23	.blue-gradient {	23	.blue-gradient {
24	background: linear-gradient(0deg, #ffffff00, $white);	24	background: linear-gradient(0deg, #ffffff00, $white);
25	}	25	}
26		26
27	.rounded {	27	.rounded {
28	border-radius: 1.5rem !important;	28	border-radius: 1.5rem !important;
29	}	29	}
30		30
31	.rounded-top-sm {	31	.rounded-top-sm {
32	border-top-left-radius: 0.75rem !important;	32	border-top-left-radius: 0.75rem !important;
33	border-top-right-radius: 0.75rem !important;	33	border-top-right-radius: 0.75rem !important;
34	}	34	}
35		35
36	.rounded-sm {	36	.rounded-sm {
37	border-radius: 0.75rem !important;	37	border-radius: 0.75rem !important;
38	}	38	}
39		39
40	.card-effect {	40	.card-effect {
41	&:active {	41	&:active {
42	background-color: #c9c9c9b3 !important;	42	background-color: #c9c9c9b3 !important;
43	transition: background-color 0.5s;	43	transition: background-color 0.5s;
44	}	44	}
45	&:focus {	45	&:focus {
46	background-color: #c9c9c9b3 !important;	46	background-color: #c9c9c9b3 !important;
47	transition: background-color 0.5s;	47	transition: background-color 0.5s;
48	}	48	}
49	}	49	}
50		50
51	.overflow-scroll {	51	.overflow-scroll {
52	overflow-y: auto !important;	52	overflow-y: auto !important;
53	overflow-x: hidden !important;	53	overflow-x: hidden !important;
54	&::-webkit-scrollbar {	54	&::-webkit-scrollbar {
55	width: 0.5em;	55	width: 0.5em;
56	}	56	}
57	&::-webkit-scrollbar-track {	57	&::-webkit-scrollbar-track {
58	border-radius: 10px;	58	border-radius: 10px;
59	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);	59	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
60	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);	60	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
61	background-color: $white;	61	background-color: $white;
62	}	62	}
63	&::-webkit-scrollbar-thumb {	63	&::-webkit-scrollbar-thumb {
64	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);	64	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
65	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);	65	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
66	outline: 1px solid slategrey;	66	outline: 1px solid slategrey;
67	border-radius: 10px;	67	border-radius: 10px;
68	height: 12px;	68	height: 12px;
69	&:active {	69	&:active {
70	box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);	70	box-shadow: inset 0 0 8px $primary;
71	-webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);	71	-webkit-box-shadow: inset 0 0 8px $primary;
72	}	72	}
73	}	73	}
74	&::-webkit-scrollbar-corner {	74	&::-webkit-scrollbar-corner {
75	border-radius: 10px;	75	border-radius: 10px;
76	}	76	}
77	}	77	}
78		78
79	.bg-gray {	79	.bg-gray {
80	background-color: #e6e6e6;	80	background-color: #e6e6e6;
81	}	81	}
82		82
83	.bg-primary-gradient {	83	.bg-primary-gradient {
84	background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);	84	background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
85	}	85	}
86		86
87	.bg-primary-gradient-horizontal {	87	.bg-primary-gradient-horizontal {
88	background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);	88	background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
89	}	89	}
90		90
91	.icon-dim {	91	.icon-dim {
92	height: 40px !important;	92	height: 40px !important;
93	width: auto !important;	93	width: auto !important;
94	background-color: white !important;	94	background-color: white !important;
95	}	95	}
96		96
97	.text-purple {	97	.text-purple {
98	color: $purple;	98	color: $purple;
99	}	99	}
100		100
101	.vh-70 {	101	.vh-70 {
102	min-height: auto !important;	102	min-height: auto !important;
103	max-height: 70vh !important;	103	max-height: 70vh !important;
104	}	104	}
105		105
106	.vh-60 {	106	.vh-60 {
107	min-height: auto !important;	107	min-height: auto !important;
108	max-height: 60vh !important;	108	max-height: 60vh !important;
109	}	109	}
110		110
111	.spinner-lg {	111	.spinner-lg {
112	width: 3rem !important;	112	width: 3rem !important;
113	height: 3rem !important;	113	height: 3rem !important;
114	}	114	}
115		115
116	.sidebar {	116	.sidebar {
117	right: 0;	117	right: 0;
118	}	118	}
119		119