Commit 21c400ff81ee7b0f3f43812acce7bd88fa5ad0de

Authored by Marcelo Puebla
1 parent fbfb312d3f
Exists in master and in 1 other branch validar_pve

Cambio en componente home, agregadas rutas.

src/app/app-routing.module.ts
1 1 import { NgModule } from '@angular/core';
2 2 import { Routes, RouterModule } from '@angular/router';
  3 +import { HomeComponent } from './home/home.component';
  4 +import { CargarProductosComponent } from './cargar-productos/cargar-productos.component';
3 5  
4   -const routes: Routes = [];
  6 +const routes: Routes = [
  7 + { path: 'home', component: HomeComponent },
  8 + { path: 'cargar-productos', component: CargarProductosComponent },
  9 + { path: '**', redirectTo: '/home', pathMatch: 'full' },
  10 +];
5 11  
6 12 @NgModule({
7 13 imports: [RouterModule.forRoot(routes)],
src/app/app.component.html
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 1 <router-outlet></router-outlet>
9 2 \ No newline at end of file
src/app/app.module.ts
... ... @@ -7,6 +7,7 @@ import { HeaderComponent } from &#39;./header/header.component&#39;;
7 7 import { SidebarComponent } from './sidebar/sidebar.component';
8 8 import { CarouselComponent } from './carousel/carousel.component';
9 9 import { HomeComponent } from './home/home.component';
  10 +import { CargarProductosComponent } from './cargar-productos/cargar-productos.component';
10 11  
11 12 @NgModule({
12 13 declarations: [
... ... @@ -14,7 +15,8 @@ import { HomeComponent } from &#39;./home/home.component&#39;;
14 15 HeaderComponent,
15 16 SidebarComponent,
16 17 CarouselComponent,
17   - HomeComponent
  18 + HomeComponent,
  19 + CargarProductosComponent
18 20 ],
19 21 imports: [
20 22 BrowserModule,
src/app/home/home.component.html
1   -<!-- HEADER -->
2   -<div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
3   - <p class="text-white text-center">HEADER</p>
4   -</div>
  1 +<div class="container-fluid h-100">
  2 + <div class="row h-100">
  3 + <div class="col p-0">
  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">
7   - <div class="background-image blur"></div>
8   - <div class="row position-absolute w-100 h-100">
9   - <div class="col-5 my-auto">
10   - <!-- CAROUSEL -->
11   - <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
12   - <div class="carousel-inner">
13   - <div class="carousel-item active">
14   - <img class="m-auto img-fluid d-block w-75"
15   - src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
16   - alt="">
17   - </div>
18   - <div class="carousel-item">
19   - <img class="m-auto img-fluid d-block w-75"
20   - src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
21   - alt="">
  11 + <div class="h-100 w-100 position-relative">
  12 + <div class="background-image blur"></div>
  13 + <div class="row position-absolute w-100 h-100">
  14 + <div class="col-5 my-auto">
  15 + <!-- CAROUSEL -->
  16 + <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  17 + <div class="carousel-inner">
  18 + <div class="carousel-item active">
  19 + <img class="m-auto img-fluid d-block w-75"
  20 + src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
  21 + alt="">
  22 + </div>
  23 + <div class="carousel-item">
  24 + <img class="m-auto img-fluid d-block w-75"
  25 + src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
  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 37 </div>
23 38 </div>
24   - </div>
25   - </div>
26   - <div class="col-7 my-auto">
27   - <div class="text-center text-white">
28   - <h1 class="display-2 font-weight-bold">¡BIENVENIDO!</h1>
29   - <h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1>
  39 +
  40 + <!-- FOOTER -->
  41 + <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
  42 + <p class="text-white text-center">FOOTER</p>
  43 + </div>
30 44 </div>
31 45 </div>
32 46 </div>
33   -</div>
34   -
35   -<!-- FOOTER -->
36   -<div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
37   - <p class="text-white text-center">FOOTER</p>
38 47 </div>
39 48 \ No newline at end of file
src/app/home/home.component.ts
1   -import { Component, OnInit } from '@angular/core';
  1 +import { Component, OnInit, HostListener } from '@angular/core';
  2 +import { Router } from '@angular/router';
2 3  
3 4 @Component({
4 5 selector: 'app-home',
... ... @@ -7,9 +8,14 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
7 8 })
8 9 export class HomeComponent implements OnInit {
9 10  
10   - constructor() { }
  11 + constructor(private router: Router) { }
11 12  
12 13 ngOnInit() {
13 14 }
14 15  
  16 + @HostListener('document:click', ['$event'])
  17 + documentClick(event: MouseEvent) {
  18 + this.router.navigate(['/cargar-productos']);
  19 + }
  20 +
15 21 }
src/app/sidebar/sidebar.component.html
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 bg-dark pt-2 text-center">
2 2  
3 3 <h4 class="border-bottom border-white"> Mi compra </h4>
4 4  
... ... @@ -39,4 +39,4 @@
39 39 </div>
40 40 </div>
41 41 </div>
42   - </div>
43 42 \ No newline at end of file
  43 +</div>
44 44 \ No newline at end of file