Martin Macola / autoservicio

Download as
Browse Code ยป

Commit d05888154cdadc49b1819f6cd65bbad973b26bdf

Authored by =
2 parents fd918561c5 21fa9c785f
Exists in master

Merge branch 'master' of http://git.focasoftware.com/angular/autoservicio

Showing 50 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ d058881
1 1 import { NgModule } from '@angular/core';
2 2 import { Routes, RouterModule } from '@angular/router';
3   -import { HomeComponent } from './home/home.component';
4   -import { InicioComponent } from './inicio/inicio.component';
  3 +import { HomeComponent } from './components/home/home.component';
  4 +import { InicioComponent } from './components/inicio/inicio.component';
  5 +import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
5 6  
6 7 const routes: Routes = [
7 8 { path: 'home', component: HomeComponent },
8 9 { path: 'inicio', component: InicioComponent },
  10 + { path: 'busqueda-productos', component: BusquedaProductosComponent },
9 11 { path: '**', redirectTo: '/home', pathMatch: 'full' },
10 12 ];
11 13  
src/app/app.module.ts
Diff comments   View file @ d058881
  1 +//#region MODULES
1 2 import { BrowserModule } from '@angular/platform-browser';
2 3 import { NgModule } from '@angular/core';
3   -
4 4 import { AppRoutingModule } from './app-routing.module';
  5 +import { HttpClientModule } from '@angular/common/http';
  6 +//#endregion
  7 +
  8 +//#region COMPONENTS
5 9 import { AppComponent } from './app.component';
6   -import { HeaderComponent } from './header/header.component';
7   -import { SidebarComponent } from './sidebar/sidebar.component';
8   -import { CarouselComponent } from './carousel/carousel.component';
9   -import { HomeComponent } from './home/home.component';
10   -import { InicioComponent } from './inicio/inicio.component';
  10 +import { HeaderComponent } from './components/header/header.component';
  11 +import { SidebarComponent } from './components/sidebar/sidebar.component';
  12 +import { CarouselComponent } from './components/carousel/carousel.component';
  13 +import { HomeComponent } from './components/home/home.component';
  14 +import { InicioComponent } from './components/inicio/inicio.component';
  15 +import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
  16 +//#endregion
11 17  
12 18 @NgModule({
13 19 declarations: [
... ... @@ -16,11 +22,13 @@ import { InicioComponent } from './inicio/inicio.component';
16 22 SidebarComponent,
17 23 CarouselComponent,
18 24 HomeComponent,
19   - InicioComponent
  25 + InicioComponent,
  26 + BusquedaProductosComponent
20 27 ],
21 28 imports: [
22 29 BrowserModule,
23   - AppRoutingModule
  30 + AppRoutingModule,
  31 + HttpClientModule
24 32 ],
25 33 providers: [],
26 34 bootstrap: [AppComponent]
src/app/carousel/carousel.component.html
View file @ d058881
... ... @@ -1,28 +0,0 @@
1   -<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
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>
29 0 \ No newline at end of file
src/app/carousel/carousel.component.scss
View file @ d058881
src/app/carousel/carousel.component.spec.ts
View file @ d058881
... ... @@ -1,25 +0,0 @@
1   -import { async, ComponentFixture, TestBed } from '@angular/core/testing';
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   -});
src/app/carousel/carousel.component.ts
View file @ d058881
... ... @@ -1,15 +0,0 @@
1   -import { Component, OnInit } from '@angular/core';
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   -}
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ d058881
... ... @@ -0,0 +1,21 @@
  1 +<div class="row m-0 fade-in">
  2 + <div class="col-10 p-0">
  3 + <!-- TOP HEADER -->
  4 + <app-header></app-header>
  5 +
  6 + <!-- NOMBRE DE SECCION -->
  7 + <div class="row m-0">
  8 + <div class="col-12 p-0">
  9 + <p class="h5 py-1 bg-light text-muted font-weight-light text-center"><small>Bรบsqueda</small></p>
  10 + </div>
  11 + </div>
  12 +
  13 + <div class="row m-4 d-flex align-items-center">
  14 +
  15 + </div>
  16 +
  17 + </div>
  18 +
  19 + <!-- SIDEBAR -->
  20 + <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
  21 + </div>
0 22 \ No newline at end of file
src/app/components/busqueda-productos/busqueda-productos.component.scss
Diff comments   View file @ d058881
src/app/components/busqueda-productos/busqueda-productos.component.spec.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { BusquedaProductosComponent } from './busqueda-productos.component';
  4 +
  5 +describe('BusquedaProductosComponent', () => {
  6 + let component: BusquedaProductosComponent;
  7 + let fixture: ComponentFixture<BusquedaProductosComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ BusquedaProductosComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(BusquedaProductosComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,15 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +
  3 +@Component({
  4 + selector: 'app-busqueda-productos',
  5 + templateUrl: './busqueda-productos.component.html',
  6 + styleUrls: ['./busqueda-productos.component.scss']
  7 +})
  8 +export class BusquedaProductosComponent implements OnInit {
  9 +
  10 + constructor() { }
  11 +
  12 + ngOnInit() {
  13 + }
  14 +
  15 +}
src/app/components/carousel/carousel.component.html
Diff comments   View file @ d058881
... ... @@ -0,0 +1,28 @@
  1 +<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  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>
0 29 \ No newline at end of file
src/app/components/carousel/carousel.component.scss
Diff comments   View file @ d058881
src/app/components/carousel/carousel.component.spec.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  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 +});
src/app/components/carousel/carousel.component.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,15 @@
  1 +import { Component, OnInit } from '@angular/core';
  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 +}
src/app/components/header/header.component.html
Diff comments   View file @ d058881
... ... @@ -0,0 +1,3 @@
  1 +<div class="bg-danger py-1 py-sm-2 py-lg-5">
  2 + <p class="text-center">HEADER</p>
  3 +</div>
0 4 \ No newline at end of file
src/app/components/header/header.component.scss
Diff comments   View file @ d058881
src/app/components/header/header.component.spec.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { HeaderComponent } from './header.component';
  4 +
  5 +describe('HeaderComponent', () => {
  6 + let component: HeaderComponent;
  7 + let fixture: ComponentFixture<HeaderComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [HeaderComponent]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(HeaderComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/components/header/header.component.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,15 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +
  3 +@Component({
  4 + selector: 'app-header',
  5 + templateUrl: './header.component.html',
  6 + styleUrls: ['./header.component.scss']
  7 +})
  8 +export class HeaderComponent implements OnInit {
  9 +
  10 + constructor() { }
  11 +
  12 + ngOnInit() {
  13 + }
  14 +
  15 +}
src/app/components/home/home.component.html
Diff comments   View file @ d058881
... ... @@ -0,0 +1,47 @@
  1 +<div class="container-fluid">
  2 + <div class="row">
  3 + <div class="col p-0">
  4 + <div class="vh-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>
  10 +
  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>
  37 + </div>
  38 + </div>
  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>
  44 + </div>
  45 + </div>
  46 + </div>
  47 +</div>
0 48 \ No newline at end of file
src/app/components/home/home.component.scss
Diff comments   View file @ d058881
... ... @@ -0,0 +1,8 @@
  1 +.background-image {
  2 + background-image: url(http://www.nortecorrientes.com/content/bucket/7/304027w980.jpg);
  3 + background-repeat: no-repeat;
  4 + background-size: cover;
  5 + position: absolute;
  6 + width: 100%;
  7 + height: 100%;
  8 +}
src/app/components/home/home.component.spec.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { HomeComponent } from './home.component';
  4 +
  5 +describe('HomeComponent', () => {
  6 + let component: HomeComponent;
  7 + let fixture: ComponentFixture<HomeComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [HomeComponent]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(HomeComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/components/home/home.component.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,21 @@
  1 +import { Component, OnInit, HostListener } from '@angular/core';
  2 +import { Router } from '@angular/router';
  3 +
  4 +@Component({
  5 + selector: 'app-home',
  6 + templateUrl: './home.component.html',
  7 + styleUrls: ['./home.component.scss']
  8 +})
  9 +export class HomeComponent implements OnInit {
  10 +
  11 + constructor(private router: Router) { }
  12 +
  13 + ngOnInit() {
  14 + }
  15 +
  16 + @HostListener('document:click', ['$event'])
  17 + documentClick(event: MouseEvent) {
  18 + this.router.navigate(['/inicio']);
  19 + }
  20 +
  21 +}
src/app/components/inicio/inicio.component.html
Diff comments   View file @ d058881
... ... @@ -0,0 +1,94 @@
  1 +<div class="row m-0 fade-in">
  2 + <div class="col-10 p-0">
  3 + <!-- TOP HEADER -->
  4 + <app-header></app-header>
  5 +
  6 + <!-- NOMBRE DE SECCION -->
  7 + <div class="row m-0">
  8 + <div class="col-12 p-0">
  9 + <p class="h5 py-1 bg-light text-muted font-weight-light text-center"><small>Inicio</small></p>
  10 + </div>
  11 + </div>
  12 +
  13 + <div class="row m-4 d-flex align-items-center">
  14 + <div class="col-md-5 d-flex align-items-end flex-column">
  15 +
  16 + <!-- PROMOCIONES -->
  17 + <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
  18 + <div class="card-body p-4">
  19 + <p class="h3 card-title">Promociones</p>
  20 + <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
  21 + </div>
  22 + <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
  23 + <ol class="carousel-indicators m-0">
  24 + <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
  25 + <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
  26 + <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
  27 + </ol>
  28 + <div class="carousel-inner">
  29 + <div class="carousel-item active">
  30 + <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
  31 + </div>
  32 + <div class="carousel-item">
  33 + <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
  34 + </div>
  35 + <div class="carousel-item">
  36 + <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
  37 + </div>
  38 + </div>
  39 + </div>
  40 + </div>
  41 +
  42 + <!-- ORDENAR -->
  43 + <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
  44 + <div class="card-body p-4">
  45 + <p class="h3 card-title">Ordenar</p>
  46 + <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
  47 + </div>
  48 + <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
  49 + </div>
  50 +
  51 + </div>
  52 +
  53 + <div class="col-md-7 d-flex align-items-end flex-column">
  54 +
  55 + <!-- CARGAR PRODUCTOS -->
  56 + <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
  57 + <div class="card-body p-4">
  58 + <p class="h3 card-title">Cargar Productos</p>
  59 + <p class="h5 card-text text-muted font-weight-light">
  60 + Coloque el cรณdigo de<br>
  61 + barras o QR frente al scanner.
  62 + </p>
  63 + </div>
  64 + <div class="card bg-white border-0 w-75 mx-auto mb-4">
  65 + <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
  66 + <div class="card-body p-2">
  67 + <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
  68 + <p class="m-0 card-text text-muted">COD. 12121222</p>
  69 + </div>
  70 + </div>
  71 + </div>
  72 +
  73 + <!-- BUSCAR PRODUCTOS -->
  74 + <div
  75 + (click)="goPage('busqueda-productos')"
  76 + class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
  77 + <div class="card-body p-4">
  78 + <p class="h3 card-title">Buscar Productos</p>
  79 + <p class="h5 card-text text-muted font-weight-light">
  80 + Busque aquรญ los productos<br>
  81 + que no tienen cรณdigo
  82 + </p>
  83 + </div>
  84 + </div>
  85 +
  86 + </div>
  87 +
  88 + </div>
  89 +
  90 + </div>
  91 +
  92 + <!-- SIDEBAR -->
  93 + <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
  94 +</div>
0 95 \ No newline at end of file
src/app/components/inicio/inicio.component.scss
Diff comments   View file @ d058881
src/app/components/inicio/inicio.component.spec.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { InicioComponent } from './inicio.component';
  4 +
  5 +describe('InicioComponent', () => {
  6 + let component: InicioComponent;
  7 + let fixture: ComponentFixture<InicioComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ InicioComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(InicioComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,20 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +import { Router } from '@angular/router';
  3 +
  4 +@Component({
  5 + selector: 'app-inicio',
  6 + templateUrl: './inicio.component.html',
  7 + styleUrls: ['./inicio.component.scss']
  8 +})
  9 +export class InicioComponent implements OnInit {
  10 +
  11 + constructor(private router: Router) { }
  12 +
  13 + ngOnInit() {
  14 + }
  15 +
  16 + private goPage(pageUrl) {
  17 + this.router.navigate([pageUrl]);
  18 + }
  19 +
  20 +}
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ d058881
... ... @@ -0,0 +1,42 @@
  1 +<div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
  2 +
  3 + <h4 class="border-bottom border-white"> Mi compra </h4>
  4 + <div class="overflow-auto mb-2">
  5 + <div class="card my-2 bg-primary border-0">
  6 + <img src="../../assets/img/descarga.jpg" class="card-img-top" alt="...">
  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">
  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>
  11 + </div>
  12 + <div class="col-4 p-1 text-center my-auto">
  13 + {{90 | currency}}
  14 + </div>
  15 + </div>
  16 + <div class="row m-0 p-0">
  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>
  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">
  21 + <button type="button" class="btn btn-light btn-sm mb-2">+</button>
  22 + <label for="" class="border border.white px-1">12</label>
  23 + <button type="button" class="btn btn-light btn-sm mb-2">-</button>
  24 + </div>
  25 + </div>
  26 + </div>
  27 + </div>
  28 + </div>
  29 +
  30 + <div class="card mt-auto blue-gradient border-0">
  31 + <div class="card-body row">
  32 + <div class="col">
  33 + <h4 class="border-bottom border-secondary text-secondary">(1) item</h4>
  34 + <h3 class="text-secondary">Total</h3>
  35 + <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3>
  36 + </div>
  37 + <div class="col 12 p-0">
  38 + <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button>
  39 + <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button>
  40 + </div>
  41 + </div>
  42 + </div>
0 43 \ No newline at end of file
src/app/components/sidebar/sidebar.component.scss
Diff comments   View file @ d058881
... ... @@ -0,0 +1,3 @@
  1 +.card-description{
  2 + font-size: 12px;
  3 +}
0 4 \ No newline at end of file
src/app/components/sidebar/sidebar.component.spec.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { SidebarComponent } from './sidebar.component';
  4 +
  5 +describe('SidebarComponent', () => {
  6 + let component: SidebarComponent;
  7 + let fixture: ComponentFixture<SidebarComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [SidebarComponent]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(SidebarComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,15 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +
  3 +@Component({
  4 + selector: 'app-sidebar',
  5 + templateUrl: './sidebar.component.html',
  6 + styleUrls: ['./sidebar.component.scss']
  7 +})
  8 +export class SidebarComponent implements OnInit {
  9 +
  10 + constructor() { }
  11 +
  12 + ngOnInit() {
  13 + }
  14 +
  15 +}
src/app/header/header.component.html
View file @ d058881
... ... @@ -1,3 +0,0 @@
1   -<div class="bg-danger py-1 py-sm-2 py-lg-5">
2   - <p class="text-center">HEADER</p>
3   -</div>
4 0 \ No newline at end of file
src/app/header/header.component.scss
View file @ d058881
src/app/header/header.component.spec.ts
View file @ d058881
... ... @@ -1,25 +0,0 @@
1   -import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2   -
3   -import { HeaderComponent } from './header.component';
4   -
5   -describe('HeaderComponent', () => {
6   - let component: HeaderComponent;
7   - let fixture: ComponentFixture<HeaderComponent>;
8   -
9   - beforeEach(async(() => {
10   - TestBed.configureTestingModule({
11   - declarations: [HeaderComponent]
12   - })
13   - .compileComponents();
14   - }));
15   -
16   - beforeEach(() => {
17   - fixture = TestBed.createComponent(HeaderComponent);
18   - component = fixture.componentInstance;
19   - fixture.detectChanges();
20   - });
21   -
22   - it('should create', () => {
23   - expect(component).toBeTruthy();
24   - });
25   -});
src/app/header/header.component.ts
View file @ d058881
... ... @@ -1,15 +0,0 @@
1   -import { Component, OnInit } from '@angular/core';
2   -
3   -@Component({
4   - selector: 'app-header',
5   - templateUrl: './header.component.html',
6   - styleUrls: ['./header.component.scss']
7   -})
8   -export class HeaderComponent implements OnInit {
9   -
10   - constructor() { }
11   -
12   - ngOnInit() {
13   - }
14   -
15   -}
src/app/home/home.component.html
View file @ d058881
... ... @@ -1,47 +0,0 @@
1   -<div class="container-fluid">
2   - <div class="row">
3   - <div class="col p-0">
4   - <div class="vh-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>
10   -
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>
37   - </div>
38   - </div>
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>
44   - </div>
45   - </div>
46   - </div>
47   -</div>
48 0 \ No newline at end of file
src/app/home/home.component.scss
View file @ d058881
... ... @@ -1,8 +0,0 @@
1   -.background-image {
2   - background-image: url(http://www.nortecorrientes.com/content/bucket/7/304027w980.jpg);
3   - background-repeat: no-repeat;
4   - background-size: cover;
5   - position: absolute;
6   - width: 100%;
7   - height: 100%;
8   -}
src/app/home/home.component.spec.ts
View file @ d058881
... ... @@ -1,25 +0,0 @@
1   -import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2   -
3   -import { HomeComponent } from './home.component';
4   -
5   -describe('HomeComponent', () => {
6   - let component: HomeComponent;
7   - let fixture: ComponentFixture<HomeComponent>;
8   -
9   - beforeEach(async(() => {
10   - TestBed.configureTestingModule({
11   - declarations: [HomeComponent]
12   - })
13   - .compileComponents();
14   - }));
15   -
16   - beforeEach(() => {
17   - fixture = TestBed.createComponent(HomeComponent);
18   - component = fixture.componentInstance;
19   - fixture.detectChanges();
20   - });
21   -
22   - it('should create', () => {
23   - expect(component).toBeTruthy();
24   - });
25   -});
src/app/home/home.component.ts
View file @ d058881
... ... @@ -1,21 +0,0 @@
1   -import { Component, OnInit, HostListener } from '@angular/core';
2   -import { Router } from '@angular/router';
3   -
4   -@Component({
5   - selector: 'app-home',
6   - templateUrl: './home.component.html',
7   - styleUrls: ['./home.component.scss']
8   -})
9   -export class HomeComponent implements OnInit {
10   -
11   - constructor(private router: Router) { }
12   -
13   - ngOnInit() {
14   - }
15   -
16   - @HostListener('document:click', ['$event'])
17   - documentClick(event: MouseEvent) {
18   - this.router.navigate(['/inicio']);
19   - }
20   -
21   -}
src/app/inicio/inicio.component.html
View file @ d058881
... ... @@ -1,92 +0,0 @@
1   -<div class="row m-0">
2   - <div class="col-10 p-0">
3   - <!-- TOP HEADER -->
4   - <app-header></app-header>
5   -
6   - <!-- NOMBRE DE SECCION -->
7   - <div class="row m-0">
8   - <div class="col-12 p-0">
9   - <p class="h5 py-1 bg-light text-muted font-weight-light text-center"><small>Inicio</small></p>
10   - </div>
11   - </div>
12   -
13   - <div class="row m-4">
14   - <div class="col-md-5 d-flex align-items-end flex-column">
15   -
16   - <!-- PROMOCIONES -->
17   - <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
18   - <div class="card-body p-4">
19   - <p class="h3 card-title">Promociones</p>
20   - <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
21   - </div>
22   - <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
23   - <ol class="carousel-indicators m-0">
24   - <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
25   - <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
26   - <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
27   - </ol>
28   - <div class="carousel-inner">
29   - <div class="carousel-item active">
30   - <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
31   - </div>
32   - <div class="carousel-item">
33   - <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
34   - </div>
35   - <div class="carousel-item">
36   - <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
37   - </div>
38   - </div>
39   - </div>
40   - </div>
41   -
42   - <!-- ORDENAR -->
43   - <div class="card bg-white border-0 shadow rounded w-100 mt-4">
44   - <div class="card-body p-4">
45   - <p class="h3 card-title">Ordenar</p>
46   - <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
47   - </div>
48   - <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
49   - </div>
50   -
51   - </div>
52   -
53   - <div class="col-md-7 d-flex align-items-end flex-column">
54   -
55   - <!-- CARGAR PRODUCTOS -->
56   - <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
57   - <div class="card-body p-4">
58   - <p class="h3 card-title">Cargar Productos</p>
59   - <p class="h5 card-text text-muted font-weight-light">
60   - Coloque el cรณdigo de<br>
61   - barras o QR frente al scanner.
62   - </p>
63   - </div>
64   - <div class="card bg-white border-0 w-75 mx-auto mb-4">
65   - <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
66   - <div class="card-body p-2">
67   - <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
68   - <p class="m-0 card-text text-muted">COD. 12121222</p>
69   - </div>
70   - </div>
71   - </div>
72   -
73   - <!-- BUSCAR PRODUCTOS -->
74   - <div class="card bg-white border-0 shadow rounded w-100 mt-4">
75   - <div class="card-body p-4">
76   - <p class="h3 card-title">Buscar Productos</p>
77   - <p class="h5 card-text text-muted font-weight-light">
78   - Busque aquรญ los productos<br>
79   - que no tienen cรณdigo
80   - </p>
81   - </div>
82   - </div>
83   -
84   - </div>
85   -
86   - </div>
87   -
88   - </div>
89   -
90   - <!-- SIDEBAR -->
91   - <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
92   -</div>
93 0 \ No newline at end of file
src/app/inicio/inicio.component.scss
View file @ d058881
src/app/inicio/inicio.component.spec.ts
View file @ d058881
... ... @@ -1,25 +0,0 @@
1   -import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2   -
3   -import { InicioComponent } from './inicio.component';
4   -
5   -describe('InicioComponent', () => {
6   - let component: InicioComponent;
7   - let fixture: ComponentFixture<InicioComponent>;
8   -
9   - beforeEach(async(() => {
10   - TestBed.configureTestingModule({
11   - declarations: [ InicioComponent ]
12   - })
13   - .compileComponents();
14   - }));
15   -
16   - beforeEach(() => {
17   - fixture = TestBed.createComponent(InicioComponent);
18   - component = fixture.componentInstance;
19   - fixture.detectChanges();
20   - });
21   -
22   - it('should create', () => {
23   - expect(component).toBeTruthy();
24   - });
25   -});
src/app/inicio/inicio.component.ts
View file @ d058881
... ... @@ -1,15 +0,0 @@
1   -import { Component, OnInit } from '@angular/core';
2   -
3   -@Component({
4   - selector: 'app-inicio',
5   - templateUrl: './inicio.component.html',
6   - styleUrls: ['./inicio.component.scss']
7   -})
8   -export class InicioComponent implements OnInit {
9   -
10   - constructor() { }
11   -
12   - ngOnInit() {
13   - }
14   -
15   -}
src/app/services/producto.service.spec.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,12 @@
  1 +import { TestBed } from '@angular/core/testing';
  2 +
  3 +import { ProductoService } from './producto.service';
  4 +
  5 +describe('ProductoService', () => {
  6 + beforeEach(() => TestBed.configureTestingModule({}));
  7 +
  8 + it('should be created', () => {
  9 + const service: ProductoService = TestBed.get(ProductoService);
  10 + expect(service).toBeTruthy();
  11 + });
  12 +});
src/app/services/producto.service.ts
Diff comments   View file @ d058881
... ... @@ -0,0 +1,16 @@
  1 +import { Injectable } from '@angular/core';
  2 +import { HttpClient } from '@angular/common/http';
  3 +import { Observable } from 'rxjs';
  4 +
  5 +@Injectable({
  6 + providedIn: 'root'
  7 +})
  8 +export class ProductoService {
  9 +
  10 + constructor(private http: HttpClient) { }
  11 +
  12 + getAll(): Observable<any> {
  13 + return this.http.get('http://10.231.45.179:4705/autoservicio/articulos')
  14 + }
  15 +
  16 +}
src/app/sidebar/sidebar.component.html
View file @ d058881
... ... @@ -1,42 +0,0 @@
1   -<div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
2   -
3   - <h4 class="border-bottom border-white"> Mi compra </h4>
4   - <div class="overflow-auto mb-2">
5   - <div class="card my-2 bg-primary border-0">
6   - <img src="../../assets/img/descarga.jpg" class="card-img-top" alt="...">
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">
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>
11   - </div>
12   - <div class="col-4 p-1 text-center my-auto">
13   - {{90 | currency}}
14   - </div>
15   - </div>
16   - <div class="row m-0 p-0">
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>
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">
21   - <button type="button" class="btn btn-light btn-sm mb-2">+</button>
22   - <label for="" class="border border.white px-1">12</label>
23   - <button type="button" class="btn btn-light btn-sm mb-2">-</button>
24   - </div>
25   - </div>
26   - </div>
27   - </div>
28   - </div>
29   -
30   - <div class="card mt-auto blue-gradient border-0">
31   - <div class="card-body row">
32   - <div class="col">
33   - <h4 class="border-bottom border-secondary text-secondary">(1) item</h4>
34   - <h3 class="text-secondary">Total</h3>
35   - <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3>
36   - </div>
37   - <div class="col 12 p-0">
38   - <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button>
39   - <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button>
40   - </div>
41   - </div>
42   - </div>
43 0 \ No newline at end of file
src/app/sidebar/sidebar.component.scss
View file @ d058881
... ... @@ -1,3 +0,0 @@
1   -.card-description{
2   - font-size: 12px;
3   -}
4 0 \ No newline at end of file
src/app/sidebar/sidebar.component.spec.ts
View file @ d058881
... ... @@ -1,25 +0,0 @@
1   -import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2   -
3   -import { SidebarComponent } from './sidebar.component';
4   -
5   -describe('SidebarComponent', () => {
6   - let component: SidebarComponent;
7   - let fixture: ComponentFixture<SidebarComponent>;
8   -
9   - beforeEach(async(() => {
10   - TestBed.configureTestingModule({
11   - declarations: [SidebarComponent]
12   - })
13   - .compileComponents();
14   - }));
15   -
16   - beforeEach(() => {
17   - fixture = TestBed.createComponent(SidebarComponent);
18   - component = fixture.componentInstance;
19   - fixture.detectChanges();
20   - });
21   -
22   - it('should create', () => {
23   - expect(component).toBeTruthy();
24   - });
25   -});
src/app/sidebar/sidebar.component.ts
View file @ d058881
... ... @@ -1,15 +0,0 @@
1   -import { Component, OnInit } from '@angular/core';
2   -
3   -@Component({
4   - selector: 'app-sidebar',
5   - templateUrl: './sidebar.component.html',
6   - styleUrls: ['./sidebar.component.scss']
7   -})
8   -export class SidebarComponent implements OnInit {
9   -
10   - constructor() { }
11   -
12   - ngOnInit() {
13   - }
14   -
15   -}
src/assets/scss/animation.scss
Diff comments   View file @ d058881
... ... @@ -0,0 +1,48 @@
  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 */
  9 +}
  10 +
  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 {
  23 + opacity: 0;
  24 + }
  25 + to {
  26 + opacity: 1;
  27 + }
  28 +}
  29 +
  30 +@-webkit-keyframes fadein {
  31 + /* Safari and Chrome */
  32 + from {
  33 + opacity: 0;
  34 + }
  35 + to {
  36 + opacity: 1;
  37 + }
  38 +}
  39 +
  40 +@-o-keyframes fadein {
  41 + /* Opera */
  42 + from {
  43 + opacity: 0;
  44 + }
  45 + to {
  46 + opacity: 1;
  47 + }
  48 +}
  1 +@import './assets/scss/animation.scss';
  2 +
1 3 .blur {
2 4 filter: blur(10px);
3 5 -webkit-filter: blur(10px);
... ... @@ -17,3 +19,14 @@
17 19 .rounded {
18 20 border-radius: 1.5rem !important;
19 21 }
  22 +
  23 +.card-effect {
  24 + &:active{
  25 + background-color: #c9c9c9b3 !important;
  26 + transition: background-color 0.5s;
  27 + }
  28 + &:focus{
  29 + background-color: #c9c9c9b3 !important;
  30 + transition: background-color 0.5s;
  31 + }
  32 +}