Martin Macola / autoservicio

Browse Code »

Commit 21c400ff81ee7b0f3f43812acce7bd88fa5ad0de

Authored by Marcelo Puebla 2019-08-06 15:21:22 -0300

1 parent fbfb312d3f

Exists in master

Cambio en componente home, agregadas rutas.

Showing 6 changed files with 60 additions and 44 deletions Show diff stats

src/app/app-routing.module.ts

Diff comments View file @ 21c400f

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { CargarProductosComponent } from './cargar-productos/cargar-productos.component';
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'home', component: HomeComponent },
+  { path: 'cargar-productos', component: CargarProductosComponent },
+  { path: '**', redirectTo: '/home', pathMatch: 'full' },
+];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.html

Diff comments View file @ 21c400f

1	<div class="container-fluid h-100">
2	<div class="row h-100">
3	<div class="col p-0">
4	<app-home class="w-100 h-100 d-flex align-items-start flex-column"></app-home>
5	</div>
6	</div>
7	</div>
8	<router-outlet></router-outlet>	1	<router-outlet></router-outlet>

src/app/app.module.ts

Diff comments View file @ 21c400f

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { CarouselComponent } from './carousel/carousel.component';
 import { HomeComponent } from './home/home.component';
+import { CargarProductosComponent } from './cargar-productos/cargar-productos.component';
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
     CarouselComponent,
-    HomeComponent
+    HomeComponent,
+    CargarProductosComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/home/home.component.html

Diff comments View file @ 21c400f

1	<!-- HEADER -->	1	<div class="container-fluid h-100">
2	<div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">	2	<div class="row h-100">
3	<p class="text-white text-center">HEADER</p>	3	<div class="col p-0">
4	</div>	4	<div class="w-100 h-100 d-flex align-items-start flex-column disable-user-select">
		5
		6	<!-- HEADER -->
		7	<div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
		8	<p class="text-white text-center">HEADER</p>
		9	</div>
5		10
6	<div class="h-100 w-100 position-relative">	11	<div class="h-100 w-100 position-relative">
7	<div class="background-image blur"></div>	12	<div class="background-image blur"></div>
8	<div class="row position-absolute w-100 h-100">	13	<div class="row position-absolute w-100 h-100">
9	<div class="col-5 my-auto">	14	<div class="col-5 my-auto">
10	<!-- CAROUSEL -->	15	<!-- CAROUSEL -->
11	<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">	16	<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
12	<div class="carousel-inner">	17	<div class="carousel-inner">
13	<div class="carousel-item active">	18	<div class="carousel-item active">
14	<img class="m-auto img-fluid d-block w-75"	19	<img class="m-auto img-fluid d-block w-75"
15	src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"	20	src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
16	alt="">	21	alt="">
17	</div>	22	</div>
18	<div class="carousel-item">	23	<div class="carousel-item">
19	<img class="m-auto img-fluid d-block w-75"	24	<img class="m-auto img-fluid d-block w-75"
20	src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"	25	src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
21	alt="">	26	alt="">
		27	</div>
		28	</div>
		29	</div>
		30	</div>
		31	<div class="col-7 my-auto">
		32	<div class="text-center text-white">
		33	<h1 class="display-2 font-weight-bold">¡BIENVENIDO!</h1>
		34	<h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1>
		35	</div>
		36	</div>
22	</div>	37	</div>
23	</div>	38	</div>
24	</div>	39
25	</div>	40	<!-- FOOTER -->
26	<div class="col-7 my-auto">	41	<div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
27	<div class="text-center text-white">	42	<p class="text-white text-center">FOOTER</p>
28	<h1 class="display-2 font-weight-bold">¡BIENVENIDO!</h1>	43	</div>
29	<h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1>
30	</div>	44	</div>
31	</div>	45	</div>
32	</div>	46	</div>

src/app/home/home.component.ts

Diff comments View file @ 21c400f

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
-  constructor() { }
+  constructor(private router: Router) { }
   ngOnInit() {
   }
+  @HostListener('document:click', ['$event'])
+  documentClick(event: MouseEvent) {
+    this.router.navigate(['/cargar-productos']);
+  }
 }

src/app/sidebar/sidebar.component.html

Diff comments View file @ 21c400f

-< <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
+<div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
   <h4 class="border-bottom border-white"> Mi compra </h4>
   <div class="card mt-2 bg-primary">
     <img src="../../assets/descarga.jpg" class="card-img-top" alt="...">
     <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
       <div class="col-8 p-0 text-left my-auto">
         <p class="m-0 card-description">Galleta oreo x 199 gs Chocolate</p>
         <p class="m-0 card-description"><small>COD: 1234567</small></p>
       </div>
       <div class="col-4 p-1 text-center my-auto">
         {{90 | currency}}
       </div>
     </div>
     <div class="row m-0 p-0">
       <div class="col p-1 pb-1 mt-2">
         <button type="button" class="btn btn-light btn-sm float-left my-auto">X</button>
         <button type="button" class="btn btn-light btn-sm my-auto">X</button>
         <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">
           <button type="button" class="btn btn-light btn-sm mb-2">+</button>
           <label for="" class="border border.white px-1">12</label>
           <button type="button" class="btn btn-light btn-sm mb-2">-</button>
         </div>
       </div>
     </div>
   </div>
   <div class="card mt-auto blue-gradient">
     <div class="card-body row">
       <div class="col">
         <h4 class="border-bottom border-secondary text-secondary">(1) item</h4>
         <h3 class="text-secondary">Total</h3>
         <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3>
       </div>
       <div class="col 12 p-0">
         <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button>
         <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button>
       </div>
     </div>
   </div>
-  </div>