Martin Macola / autoservicio

Download as
Browse Code »

Commit 2cb513768aa3a2463955072e7dbcc5f3ef32c8d2

Authored by Marcelo Puebla
2 parents fe33054b33 28ef2dbbbd
Exists in master

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !4
Showing 16 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 2cb5137
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 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 @NgModule({ 12 @NgModule({
7 imports: [RouterModule.forRoot(routes)], 13 imports: [RouterModule.forRoot(routes)],
8 exports: [RouterModule] 14 exports: [RouterModule]
9 }) 15 })
10 export class AppRoutingModule { } 16 export class AppRoutingModule { }
11 17
src/app/app.component.html
Diff comments   View file @ 2cb5137
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 @ 2cb5137
1 import { BrowserModule } from '@angular/platform-browser'; 1 import { BrowserModule } from '@angular/platform-browser';
2 import { NgModule } from '@angular/core'; 2 import { NgModule } from '@angular/core';
3 3
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { AppComponent } from './app.component'; 5 import { AppComponent } from './app.component';
6 import { FooterComponent } from './footer/footer.component';
7 import { HeaderComponent } from './header/header.component'; 6 import { HeaderComponent } from './header/header.component';
8 import { SidebarComponent } from './sidebar/sidebar.component'; 7 import { SidebarComponent } from './sidebar/sidebar.component';
9 import { CarouselComponent } from './carousel/carousel.component'; 8 import { CarouselComponent } from './carousel/carousel.component';
10 import { HomeComponent } from './home/home.component'; 9 import { HomeComponent } from './home/home.component';
10 import { CargarProductosComponent } from './cargar-productos/cargar-productos.component';
11 11
12 @NgModule({ 12 @NgModule({
13 declarations: [ 13 declarations: [
14 AppComponent, 14 AppComponent,
15 FooterComponent,
16 HeaderComponent, 15 HeaderComponent,
17 SidebarComponent, 16 SidebarComponent,
18 CarouselComponent, 17 CarouselComponent,
19 HomeComponent 18 HomeComponent,
19 CargarProductosComponent
20 ], 20 ],
21 imports: [ 21 imports: [
22 BrowserModule, 22 BrowserModule,
23 AppRoutingModule 23 AppRoutingModule
24 ], 24 ],
25 providers: [], 25 providers: [],
26 bootstrap: [AppComponent] 26 bootstrap: [AppComponent]
27 }) 27 })
src/app/cargar-productos/cargar-productos.component.html
Diff comments   View file @ 2cb5137
File was created 1 <div class="row m-0 h-100">
2 <div class="col-10 p-0">
3 <div class="bg-danger py-1 py-sm-2 py-lg-5">
4 <p class="text-center">HEADER</p>
5 </div>
6 </div>
7 <app-sidebar class="col-2 col-md-2 w-100 h-100 bg-dark text-white"></app-sidebar>
8 </div>
src/app/cargar-productos/cargar-productos.component.scss
Diff comments   View file @ 2cb5137
src/app/cargar-productos/cargar-productos.component.spec.ts
Diff comments   View file @ 2cb5137
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { CargarProductosComponent } from './cargar-productos.component';
4
5 describe('CargarProductosComponent', () => {
6 let component: CargarProductosComponent;
7 let fixture: ComponentFixture<CargarProductosComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ CargarProductosComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(CargarProductosComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/cargar-productos/cargar-productos.component.ts
Diff comments   View file @ 2cb5137
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-cargar-productos',
5 templateUrl: './cargar-productos.component.html',
6 styleUrls: ['./cargar-productos.component.scss']
7 })
8 export class CargarProductosComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16
src/app/footer/footer.component.html
View file @ 2cb5137
1 <div class="row footer"> File was deleted
2 <div class="col p-0">
3 <div class="bg-dark py-1 py-sm-2 py-lg-5">
4 <p class="text-center text-white-50">Soy el footer</p>
5 </div>
6 </div>
7 </div>
src/app/footer/footer.component.scss
View file @ 2cb5137
src/app/footer/footer.component.spec.ts
View file @ 2cb5137
1 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; File was deleted
2
3 import { FooterComponent } from './footer.component';
4
5 describe('FooterComponent', () => {
6 let component: FooterComponent;
7 let fixture: ComponentFixture<FooterComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [FooterComponent]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(FooterComponent);
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/footer/footer.component.ts
View file @ 2cb5137
1 import { Component, OnInit } from '@angular/core'; File was deleted
2
3 @Component({
4 selector: 'app-footer',
5 templateUrl: './footer.component.html',
6 styleUrls: ['./footer.component.scss']
7 })
8 export class FooterComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16 1 import { Component, OnInit } from '@angular/core';
src/app/home/home.component.html
Diff comments   View file @ 2cb5137
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.scss
Diff comments   View file @ 2cb5137
1 .background-image { 1 .background-image {
2 background-image: url(http://www.nortecorrientes.com/content/bucket/7/304027w980.jpg); 2 background-image: url(http://www.nortecorrientes.com/content/bucket/7/304027w980.jpg);
3 background-repeat: no-repeat;
4 background-size: cover;
3 position: absolute; 5 position: absolute;
4 width: 100%; 6 width: 100%;
5 height: 100%; 7 height: 100%;
6 } 8 }
7 9
src/app/home/home.component.ts
Diff comments   View file @ 2cb5137
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { Router } from '@angular/router';
2 3
3 @Component({ 4 @Component({
4 selector: 'app-home', 5 selector: 'app-home',
5 templateUrl: './home.component.html', 6 templateUrl: './home.component.html',
6 styleUrls: ['./home.component.scss'] 7 styleUrls: ['./home.component.scss']
7 }) 8 })
8 export class HomeComponent implements OnInit { 9 export class HomeComponent implements OnInit {
9 10
10 constructor() { } 11 constructor(private router: Router) { }
11 12
12 ngOnInit() { 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 }
16 22
src/app/sidebar/sidebar.component.html
Diff comments   View file @ 2cb5137
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 <h4 class="border-bottom border-white"> Mi compra </h4> 3 <h4 class="border-bottom border-white"> Mi compra </h4>
4 4
5 <div class="card mt-2 bg-primary"> 5 <div class="card mt-2 bg-primary">
6 <img src="../../assets/descarga.jpg" class="card-img-top" alt="..."> 6 <img src="../../assets/descarga.jpg" class="card-img-top" alt="...">
7 <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded"> 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"> 8 <div class="col-8 p-0 text-left my-auto">
9 <p class="m-0 card-description">Galleta oreo x 199 gs Chocolate</p> 9 <p class="m-0 card-description">Galleta oreo x 199 gs Chocolate</p>
10 <p class="m-0 card-description"><small>COD: 1234567</small></p> 10 <p class="m-0 card-description"><small>COD: 1234567</small></p>
11 </div> 11 </div>
12 <div class="col-4 p-1 text-center my-auto"> 12 <div class="col-4 p-1 text-center my-auto">
13 {{90 | currency}} 13 {{90 | currency}}
14 </div> 14 </div>
15 </div> 15 </div>
16 <div class="row m-0 p-0"> 16 <div class="row m-0 p-0">
17 <div class="col p-1 pb-1 mt-2"> 17 <div class="col p-1 pb-1 mt-2">
18 <button type="button" class="btn btn-light btn-sm float-left my-auto">X</button> 18 <button type="button" class="btn btn-light btn-sm float-left my-auto">X</button>
19 <button type="button" class="btn btn-light btn-sm my-auto">X</button> 19 <button type="button" class="btn btn-light btn-sm my-auto">X</button>
20 <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example"> 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">+</button> 21 <button type="button" class="btn btn-light btn-sm mb-2">+</button>
22 <label for="" class="border border.white px-1">12</label> 22 <label for="" class="border border.white px-1">12</label>
23 <button type="button" class="btn btn-light btn-sm mb-2">-</button> 23 <button type="button" class="btn btn-light btn-sm mb-2">-</button>
24 </div> 24 </div>
25 </div> 25 </div>
26 </div> 26 </div>
27 </div> 27 </div>
28 28
29 <div class="card mt-auto blue-gradient"> 29 <div class="card mt-auto blue-gradient">
30 <div class="card-body row"> 30 <div class="card-body row">
31 <div class="col"> 31 <div class="col">
32 <h4 class="border-bottom border-secondary text-secondary">(1) item</h4> 32 <h4 class="border-bottom border-secondary text-secondary">(1) item</h4>
33 <h3 class="text-secondary">Total</h3> 33 <h3 class="text-secondary">Total</h3>
34 <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3> 34 <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3>
35 </div> 35 </div>
36 <div class="col 12 p-0"> 36 <div class="col 12 p-0">
37 <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button> 37 <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button>
38 <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button> 38 <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button>
39 </div> 39 </div>
40 </div> 40 </div>
41 </div> 41 </div>
42 </div>
1 html, 1 html,
2 body { 2 body {
3 height: 100% !important; 3 height: 100% !important;
4 width: 100% !important; 4 width: 100% !important;
5 } 5 }
6 6
7 .blur { 7 .blur {
8 /* Add the blur effect */ 8 filter: blur(10px);
9 filter: blur(8px); 9 -webkit-filter: blur(10px);
10 -webkit-filter: blur(8px); 10 }
11
12 .disable-user-select {
13 -webkit-user-select: none;
14 -moz-user-select: none;
15 -ms-user-select: none;
16 user-select: none;
11 } 17 }
12 .blue-gradient{ 18 .blue-gradient{
13 background: linear-gradient(0deg, rgba(40,112,175,1),rgb(252, 252, 252)); 19 background: linear-gradient(0deg, rgba(40,112,175,1),rgb(252, 252, 252));
14 } 20 }
15 21