Martin Macola / autoservicio

Download as
Browse Code »

Commit c7527cd7c2f2a52b388af4f2731fd6d4b1c1ee32

Authored by Marcelo Puebla
2 parents 2e2185dc08 62e89c48c1
Exists in master

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !6
Showing 16 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ c7527cd
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 './home/home.component';
4 import { CargarProductosComponent } from './cargar-productos/cargar-productos.component'; 4 import { InicioComponent } from './inicio/inicio.component';
5 5
6 const routes: Routes = [ 6 const routes: Routes = [
7 { path: 'home', component: HomeComponent }, 7 { path: 'home', component: HomeComponent },
8 { path: 'cargar-productos', component: CargarProductosComponent }, 8 { path: 'inicio', component: InicioComponent },
9 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 9 { path: '**', redirectTo: '/home', pathMatch: 'full' },
10 ]; 10 ];
11 11
12 @NgModule({ 12 @NgModule({
13 imports: [RouterModule.forRoot(routes)], 13 imports: [RouterModule.forRoot(routes)],
14 exports: [RouterModule] 14 exports: [RouterModule]
15 }) 15 })
16 export class AppRoutingModule { } 16 export class AppRoutingModule { }
17 17
src/app/app.module.ts
Diff comments   View file @ c7527cd
1 import { BrowserModule } from '@angular/platform-browser'; 1 import { BrowserModule } from '@angular/platform-browser';
2 import { NgModule } from '@angular/core'; 2 import { NgModule } from '@angular/core';
3 3
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { AppComponent } from './app.component'; 5 import { AppComponent } from './app.component';
6 import { HeaderComponent } from './header/header.component'; 6 import { HeaderComponent } from './header/header.component';
7 import { SidebarComponent } from './sidebar/sidebar.component'; 7 import { SidebarComponent } from './sidebar/sidebar.component';
8 import { CarouselComponent } from './carousel/carousel.component'; 8 import { CarouselComponent } from './carousel/carousel.component';
9 import { HomeComponent } from './home/home.component'; 9 import { HomeComponent } from './home/home.component';
10 import { CargarProductosComponent } from './cargar-productos/cargar-productos.component'; 10 import { InicioComponent } from './inicio/inicio.component';
11 11
12 @NgModule({ 12 @NgModule({
13 declarations: [ 13 declarations: [
14 AppComponent, 14 AppComponent,
15 HeaderComponent, 15 HeaderComponent,
16 SidebarComponent, 16 SidebarComponent,
17 CarouselComponent, 17 CarouselComponent,
18 HomeComponent, 18 HomeComponent,
19 CargarProductosComponent 19 InicioComponent
20 ], 20 ],
21 imports: [ 21 imports: [
22 BrowserModule, 22 BrowserModule,
23 AppRoutingModule 23 AppRoutingModule
24 ], 24 ],
25 providers: [], 25 providers: [],
26 bootstrap: [AppComponent] 26 bootstrap: [AppComponent]
27 }) 27 })
28 export class AppModule { } 28 export class AppModule { }
29 29
src/app/cargar-productos/cargar-productos.component.html
View file @ c7527cd
1 <div class="row m-0 h-100"> File was deleted
2 <div class="col-10 p-0">
3 <div class="bg-danger py-1 py-sm-2 py-lg-5">
4 <p class="text-center">HEADER</p>
5 </div>
6 </div>
7 <app-sidebar class="col-2 col-md-2 w-100 h-100 bg-dark text-white"></app-sidebar>
8 </div>
src/app/cargar-productos/cargar-productos.component.scss
View file @ c7527cd
src/app/cargar-productos/cargar-productos.component.spec.ts
View file @ c7527cd
1 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; File was deleted
2
3 import { CargarProductosComponent } from './cargar-productos.component';
4
5 describe('CargarProductosComponent', () => {
6 let component: CargarProductosComponent;
7 let fixture: ComponentFixture<CargarProductosComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ CargarProductosComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(CargarProductosComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
src/app/cargar-productos/cargar-productos.component.ts
View file @ c7527cd
1 import { Component, OnInit } from '@angular/core'; File was deleted
2
3 @Component({
4 selector: 'app-cargar-productos',
5 templateUrl: './cargar-productos.component.html',
6 styleUrls: ['./cargar-productos.component.scss']
7 })
8 export class CargarProductosComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16 1 import { Component, OnInit } from '@angular/core';
src/app/home/home.component.html
Diff comments   View file @ c7527cd
1 <div class="container-fluid h-100"> 1 <div class="container-fluid">
2 <div class="row h-100"> 2 <div class="row">
3 <div class="col p-0"> 3 <div class="col p-0">
4 <div class="w-100 h-100 d-flex align-items-start flex-column disable-user-select"> 4 <div class="vh-100 d-flex align-items-start flex-column disable-user-select">
5 5
6 <!-- HEADER --> 6 <!-- HEADER -->
7 <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100"> 7 <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
8 <p class="text-white text-center">HEADER</p> 8 <p class="text-white text-center">HEADER</p>
9 </div> 9 </div>
10 10
11 <div class="h-100 w-100 position-relative"> 11 <div class="h-100 w-100 position-relative">
12 <div class="background-image blur"></div> 12 <div class="background-image blur"></div>
13 <div class="row position-absolute w-100 h-100"> 13 <div class="row position-absolute w-100 h-100">
14 <div class="col-5 my-auto"> 14 <div class="col-5 my-auto">
15 <!-- CAROUSEL --> 15 <!-- CAROUSEL -->
16 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> 16 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
17 <div class="carousel-inner"> 17 <div class="carousel-inner">
18 <div class="carousel-item active"> 18 <div class="carousel-item active">
19 <img class="m-auto img-fluid d-block w-75" 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" 20 src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
21 alt=""> 21 alt="">
22 </div> 22 </div>
23 <div class="carousel-item"> 23 <div class="carousel-item">
24 <img class="m-auto img-fluid d-block w-75" 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" 25 src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
26 alt=""> 26 alt="">
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 </div> 30 </div>
31 <div class="col-7 my-auto"> 31 <div class="col-7 my-auto">
32 <div class="text-center text-white"> 32 <div class="text-center text-white">
33 <h1 class="display-2 font-weight-bold">¡BIENVENIDO!</h1> 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> 34 <h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1>
35 </div> 35 </div>
36 </div> 36 </div>
37 </div> 37 </div>
38 </div> 38 </div>
39 39
40 <!-- FOOTER --> 40 <!-- FOOTER -->
41 <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100"> 41 <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
42 <p class="text-white text-center">FOOTER</p> 42 <p class="text-white text-center">FOOTER</p>
43 </div> 43 </div>
44 </div> 44 </div>
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
src/app/home/home.component.ts
Diff comments   View file @ c7527cd
1 import { Component, OnInit, HostListener } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { Router } from '@angular/router'; 2 import { Router } from '@angular/router';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-home', 5 selector: 'app-home',
6 templateUrl: './home.component.html', 6 templateUrl: './home.component.html',
7 styleUrls: ['./home.component.scss'] 7 styleUrls: ['./home.component.scss']
8 }) 8 })
9 export class HomeComponent implements OnInit { 9 export class HomeComponent implements OnInit {
10 10
11 constructor(private router: Router) { } 11 constructor(private router: Router) { }
12 12
13 ngOnInit() { 13 ngOnInit() {
14 } 14 }
15 15
16 @HostListener('document:click', ['$event']) 16 @HostListener('document:click', ['$event'])
17 documentClick(event: MouseEvent) { 17 documentClick(event: MouseEvent) {
18 this.router.navigate(['/cargar-productos']); 18 this.router.navigate(['/inicio']);
19 } 19 }
20 20
21 } 21 }
22 22
src/app/inicio/inicio.component.html
Diff comments   View file @ c7527cd
File was created 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>
src/app/inicio/inicio.component.scss
Diff comments   View file @ c7527cd
src/app/inicio/inicio.component.spec.ts
Diff comments   View file @ c7527cd
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/inicio/inicio.component.ts
Diff comments   View file @ c7527cd
File was created 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 }
16
src/app/sidebar/sidebar.component.html
Diff comments   View file @ c7527cd
1 <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center"> 1 <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
2 2
3 <h4 class="border-bottom border-white"> Mi compra </h4> 3 <h4 class="border-bottom border-white"> Mi compra </h4>
4 <div class="overflow-auto mb-2"> 4 <div class="overflow-auto mb-2">
5 <div class="card my-2 bg-primary border-0"> 5 <div class="card my-2 bg-primary border-0">
6 <img src="../../assets/descarga.jpg" class="card-img-top" alt="..."> 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"> 7 <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
8 <div class="col-8 p-0 text-left my-auto"> 8 <div class="col-8 p-0 text-left my-auto">
9 <p class="m-0 card-description">Galleta oreo x 199 gs Chocolate</p> 9 <p class="m-0 card-description">Galleta oreo x 199 gs Chocolate</p>
10 <p class="m-0 card-description"><small>COD: 1234567</small></p> 10 <p class="m-0 card-description"><small>COD: 1234567</small></p>
11 </div> 11 </div>
12 <div class="col-4 p-1 text-center my-auto"> 12 <div class="col-4 p-1 text-center my-auto">
13 {{90 | currency}} 13 {{90 | currency}}
14 </div> 14 </div>
15 </div> 15 </div>
16 <div class="row m-0 p-0"> 16 <div class="row m-0 p-0">
17 <div class="col p-1 pb-1 mt-2"> 17 <div class="col p-1 pb-1 mt-2">
18 <button type="button" class="btn btn-light btn-sm float-left my-auto">X</button> 18 <button type="button" class="btn btn-light btn-sm float-left my-auto">X</button>
19 <button type="button" class="btn btn-light btn-sm my-auto">X</button> 19 <button type="button" class="btn btn-light btn-sm my-auto">X</button>
20 <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example"> 20 <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">
21 <button type="button" class="btn btn-light btn-sm mb-2">+</button> 21 <button type="button" class="btn btn-light btn-sm mb-2">+</button>
22 <label for="" class="border border.white px-1">12</label> 22 <label for="" class="border border.white px-1">12</label>
23 <button type="button" class="btn btn-light btn-sm mb-2">-</button> 23 <button type="button" class="btn btn-light btn-sm mb-2">-</button>
24 </div> 24 </div>
25 </div> 25 </div>
26 </div> 26 </div>
27 </div> 27 </div>
28 </div> 28 </div>
29 29
30 <div class="card mt-auto blue-gradient border-0"> 30 <div class="card mt-auto blue-gradient border-0">
31 <div class="card-body row"> 31 <div class="card-body row">
32 <div class="col"> 32 <div class="col">
33 <h4 class="border-bottom border-secondary text-secondary">(1) item</h4> 33 <h4 class="border-bottom border-secondary text-secondary">(1) item</h4>
34 <h3 class="text-secondary">Total</h3> 34 <h3 class="text-secondary">Total</h3>
35 <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3> 35 <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3>
36 </div> 36 </div>
37 <div class="col 12 p-0"> 37 <div class="col 12 p-0">
38 <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button> 38 <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button>
39 <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button> 39 <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button>
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
src/assets/descarga.jpg
View file @ c7527cd

6.1 KB
src/assets/img/descarga.jpg
Diff comments   View file @ c7527cd

6.1 KB
1 html,
2 body {
3 height: 100% !important;
4 width: 100% !important;
5 }
6
7 .blur { 1 .blur {
8 filter: blur(10px); 2 filter: blur(10px);
9 -webkit-filter: blur(10px); 3 -webkit-filter: blur(10px);
10 } 4 }
11 5
12 .disable-user-select { 6 .disable-user-select {
13 -webkit-user-select: none; 7 -webkit-user-select: none;
14 -moz-user-select: none; 8 -moz-user-select: none;
15 -ms-user-select: none; 9 -ms-user-select: none;
16 user-select: none; 10 user-select: none;
17 } 11 }
12
18 .blue-gradient{ 13 .blue-gradient{
19 background: linear-gradient(0deg, rgb(20,56,68),rgb(252, 252, 252)); 14 background: linear-gradient(0deg, rgb(20,56,68),rgb(252, 252, 252));
20 } 15 }