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 | 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'; | 3 | import { HomeComponent } from './components/home/home.component'; |
4 | import { InicioComponent } from './inicio/inicio.component'; | 4 | import { InicioComponent } from './components/inicio/inicio.component'; |
5 | import { BusquedaProductosComponent } from './busqueda-productos/busqueda-productos.component'; | 5 | import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; |
6 | 6 | ||
7 | const routes: Routes = [ | 7 | const routes: Routes = [ |
8 | { path: 'home', component: HomeComponent }, | 8 | { path: 'home', component: HomeComponent }, |
9 | { path: 'inicio', component: InicioComponent }, | 9 | { path: 'inicio', component: InicioComponent }, |
10 | { path: 'busqueda-productos', component: BusquedaProductosComponent }, | 10 | { path: 'busqueda-productos', component: BusquedaProductosComponent }, |
11 | { path: '**', redirectTo: '/home', pathMatch: 'full' }, | 11 | { path: '**', redirectTo: '/home', pathMatch: 'full' }, |
12 | ]; | 12 | ]; |
13 | 13 | ||
14 | @NgModule({ | 14 | @NgModule({ |
15 | imports: [RouterModule.forRoot(routes)], | 15 | imports: [RouterModule.forRoot(routes)], |
16 | exports: [RouterModule] | 16 | exports: [RouterModule] |
17 | }) | 17 | }) |
18 | export class AppRoutingModule { } | 18 | export class AppRoutingModule { } |
19 | 19 |
src/app/app.module.ts
1 | //#region MODULES | ||
1 | import { BrowserModule } from '@angular/platform-browser'; | 2 | import { BrowserModule } from '@angular/platform-browser'; |
2 | import { NgModule } from '@angular/core'; | 3 | import { NgModule } from '@angular/core'; |
3 | |||
4 | import { AppRoutingModule } from './app-routing.module'; | 4 | import { AppRoutingModule } from './app-routing.module'; |
5 | import { HttpClientModule } from '@angular/common/http'; | ||
6 | //#endregion | ||
7 | |||
8 | //#region COMPONENTS | ||
5 | import { AppComponent } from './app.component'; | 9 | import { AppComponent } from './app.component'; |
6 | import { HeaderComponent } from './header/header.component'; | 10 | import { HeaderComponent } from './components/header/header.component'; |
7 | import { SidebarComponent } from './sidebar/sidebar.component'; | 11 | import { SidebarComponent } from './components/sidebar/sidebar.component'; |
8 | import { CarouselComponent } from './carousel/carousel.component'; | 12 | import { CarouselComponent } from './components/carousel/carousel.component'; |
9 | import { HomeComponent } from './home/home.component'; | 13 | import { HomeComponent } from './components/home/home.component'; |
10 | import { InicioComponent } from './inicio/inicio.component'; | 14 | import { InicioComponent } from './components/inicio/inicio.component'; |
11 | import { BusquedaProductosComponent } from './busqueda-productos/busqueda-productos.component'; | 15 | import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; |
16 | //#endregion | ||
12 | 17 | ||
13 | @NgModule({ | 18 | @NgModule({ |
14 | declarations: [ | 19 | declarations: [ |
15 | AppComponent, | 20 | AppComponent, |
16 | HeaderComponent, | 21 | HeaderComponent, |
17 | SidebarComponent, | 22 | SidebarComponent, |
18 | CarouselComponent, | 23 | CarouselComponent, |
19 | HomeComponent, | 24 | HomeComponent, |
20 | InicioComponent, | 25 | InicioComponent, |
21 | BusquedaProductosComponent | 26 | BusquedaProductosComponent |
22 | ], | 27 | ], |
23 | imports: [ | 28 | imports: [ |
24 | BrowserModule, | 29 | BrowserModule, |
25 | AppRoutingModule | 30 | AppRoutingModule, |
31 | HttpClientModule | ||
26 | ], | 32 | ], |
27 | providers: [], | 33 | providers: [], |
28 | bootstrap: [AppComponent] | 34 | bootstrap: [AppComponent] |
29 | }) | 35 | }) |
30 | export class AppModule { } | 36 | export class AppModule { } |
src/app/busqueda-productos/busqueda-productos.component.html
1 | <p>busqueda-productos works!</p> | File was deleted | |
2 | 1 | <p>busqueda-productos works!</p> |
src/app/busqueda-productos/busqueda-productos.component.scss
src/app/busqueda-productos/busqueda-productos.component.spec.ts
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | File was deleted | |
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 | }); | ||
26 | 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
src/app/busqueda-productos/busqueda-productos.component.ts
1 | import { Component, OnInit } from '@angular/core'; | File was deleted | |
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 | } | ||
16 | 1 | import { Component, OnInit } from '@angular/core'; |
src/app/carousel/carousel.component.html
1 | <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> | File was deleted | |
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> |
src/app/carousel/carousel.component.scss
src/app/carousel/carousel.component.spec.ts
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | File was deleted | |
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 | }); | ||
26 | 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
src/app/carousel/carousel.component.ts
1 | import { Component, OnInit } from '@angular/core'; | File was deleted | |
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 | } | ||
16 | 1 | import { Component, OnInit } from '@angular/core'; |
src/app/components/busqueda-productos/busqueda-productos.component.html
File was created | 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> |
src/app/components/busqueda-productos/busqueda-productos.component.scss
src/app/components/busqueda-productos/busqueda-productos.component.spec.ts
File was created | 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 | }); | ||
26 |
src/app/components/busqueda-productos/busqueda-productos.component.ts
File was created | 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 | } | ||
16 |
src/app/components/carousel/carousel.component.html
File was created | 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> |
src/app/components/carousel/carousel.component.scss
src/app/components/carousel/carousel.component.spec.ts
File was created | 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 | }); | ||
26 |
src/app/components/carousel/carousel.component.ts
File was created | 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 | } | ||
16 |
src/app/components/header/header.component.html
File was created | 1 | <div class="bg-danger py-1 py-sm-2 py-lg-5"> | |
2 | <p class="text-center">HEADER</p> | ||
3 | </div> |
src/app/components/header/header.component.scss
src/app/components/header/header.component.spec.ts
File was created | 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 | }); | ||
26 |
src/app/components/header/header.component.ts
File was created | 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 | } | ||
16 |
src/app/components/home/home.component.html
File was created | 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> |
src/app/components/home/home.component.scss
File was created | 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 | } | ||
9 |
src/app/components/home/home.component.spec.ts
File was created | 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 | }); | ||
26 |
src/app/components/home/home.component.ts
File was created | 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 | } | ||
22 |
src/app/components/inicio/inicio.component.html
File was created | 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> |
src/app/components/inicio/inicio.component.scss
src/app/components/inicio/inicio.component.spec.ts
File was created | 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 | }); | ||
26 |
src/app/components/inicio/inicio.component.ts
File was created | 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 | } | ||
21 |
src/app/components/sidebar/sidebar.component.html
File was created | 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> |
src/app/components/sidebar/sidebar.component.scss
File was created | 1 | .card-description{ | |
2 | font-size: 12px; | ||
3 | } |
src/app/components/sidebar/sidebar.component.spec.ts
File was created | 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 | }); | ||
26 |
src/app/components/sidebar/sidebar.component.ts
File was created | 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 | } | ||
16 |
src/app/header/header.component.html
1 | <div class="bg-danger py-1 py-sm-2 py-lg-5"> | File was deleted | |
2 | <p class="text-center">HEADER</p> | ||
3 | </div> |
src/app/header/header.component.scss
src/app/header/header.component.spec.ts
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | File was deleted | |
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 | }); | ||
26 | 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
src/app/header/header.component.ts
1 | import { Component, OnInit } from '@angular/core'; | File was deleted | |
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 | } | ||
16 | 1 | import { Component, OnInit } from '@angular/core'; |
src/app/home/home.component.html
1 | <div class="container-fluid"> | File was deleted | |
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> |
src/app/home/home.component.scss
1 | .background-image { | File was deleted | |
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 | } | ||
9 | 1 | .background-image { |
src/app/home/home.component.spec.ts
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | File was deleted | |
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 | }); | ||
26 | 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
src/app/home/home.component.ts
1 | import { Component, OnInit, HostListener } from '@angular/core'; | File was deleted | |
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 | } | ||
22 | 1 | import { Component, OnInit, HostListener } from '@angular/core'; |
src/app/inicio/inicio.component.html
1 | <div class="row m-0 fade-in"> | File was deleted | |
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> |
src/app/inicio/inicio.component.scss
src/app/inicio/inicio.component.spec.ts
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | File was deleted | |
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 | }); | ||
26 | 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
src/app/inicio/inicio.component.ts
1 | import { Component, OnInit } from '@angular/core'; | File was deleted | |
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 | } | ||
21 | 1 | import { Component, OnInit } from '@angular/core'; |
src/app/services/producto.service.spec.ts
File was created | 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 | }); | ||
13 |
src/app/services/producto.service.ts
File was created | 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 | } | ||
17 |
src/app/sidebar/sidebar.component.html
1 | <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center"> | File was deleted | |
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> |
src/app/sidebar/sidebar.component.scss
1 | .card-description{ | File was deleted | |
2 | font-size: 12px; | ||
3 | } |
src/app/sidebar/sidebar.component.spec.ts
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | File was deleted | |
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 | }); | ||
26 | 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
src/app/sidebar/sidebar.component.ts
1 | import { Component, OnInit } from '@angular/core'; | File was deleted | |
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 | } | ||
16 | 1 | import { Component, OnInit } from '@angular/core'; |