Commit 1b96d20ddfe4a5a34a2de02e09bc3b9e66a911c8
1 parent
bb4dd4483b
Exists in
master
and in
1 other branch
Creado servicio y movidos componentes.
Showing
52 changed files
with
542 additions
and
488 deletions
Show diff stats
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 { InicioComponent } from './inicio/inicio.component'; | |
| 5 | -import { BusquedaProductosComponent } from './busqueda-productos/busqueda-productos.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'; | |
| 6 | 6 | |
| 7 | 7 | const routes: Routes = [ |
| 8 | 8 | { path: 'home', component: HomeComponent }, |
src/app/app.module.ts
| 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'; | |
| 11 | -import { BusquedaProductosComponent } from './busqueda-productos/busqueda-productos.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 | |
| 12 | 17 | |
| 13 | 18 | @NgModule({ |
| 14 | 19 | declarations: [ |
| ... | ... | @@ -22,7 +27,8 @@ import { BusquedaProductosComponent } from './busqueda-productos/busqueda-produc |
| 22 | 27 | ], |
| 23 | 28 | imports: [ |
| 24 | 29 | BrowserModule, |
| 25 | - AppRoutingModule | |
| 30 | + AppRoutingModule, | |
| 31 | + HttpClientModule | |
| 26 | 32 | ], |
| 27 | 33 | providers: [], |
| 28 | 34 | bootstrap: [AppComponent] |
src/app/busqueda-productos/busqueda-productos.component.html
| ... | ... | @@ -1 +0,0 @@ |
| 1 | -<p>busqueda-productos works!</p> |
src/app/busqueda-productos/busqueda-productos.component.scss
src/app/busqueda-productos/busqueda-productos.component.spec.ts
| ... | ... | @@ -1,25 +0,0 @@ |
| 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/busqueda-productos/busqueda-productos.component.ts
| ... | ... | @@ -1,15 +0,0 @@ |
| 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/carousel/carousel.component.html
| ... | ... | @@ -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
src/app/carousel/carousel.component.spec.ts
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
src/app/components/busqueda-productos/busqueda-productos.component.spec.ts
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
src/app/components/carousel/carousel.component.spec.ts
| ... | ... | @@ -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
| ... | ... | @@ -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
src/app/components/header/header.component.scss
src/app/components/header/header.component.spec.ts
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
src/app/components/home/home.component.spec.ts
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
src/app/components/inicio/inicio.component.spec.ts
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
src/app/components/sidebar/sidebar.component.spec.ts
| ... | ... | @@ -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
| ... | ... | @@ -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
src/app/header/header.component.scss
src/app/header/header.component.spec.ts
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
src/app/home/home.component.spec.ts
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -1,94 +0,0 @@ |
| 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> | |
| 95 | 0 | \ No newline at end of file |
src/app/inicio/inicio.component.scss
src/app/inicio/inicio.component.spec.ts
| ... | ... | @@ -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
| ... | ... | @@ -1,20 +0,0 @@ |
| 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/services/producto.service.spec.ts
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
src/app/sidebar/sidebar.component.spec.ts
| ... | ... | @@ -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
| ... | ... | @@ -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 | -} |