Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 7ba68592a5ea99ab0e7101df1a9ce4fa30cea675

Authored by Marcelo Puebla
1 parent 401229e99a
Exists in master and in 2 other branches 20200117-axion-responsive, develop

Creado componente carrito

Showing 17 changed files with 196 additions and 8 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 7ba6859
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 { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
4 import { AdminComponent } from './modules/admin/admin.component'; 4 import { AdminComponent } from './modules/admin/admin.component';
5 5
6 const routes: Routes = [ 6 const routes: Routes = [
7 { path: '', component: SplashScreenComponent }, 7 { path: '', component: SplashScreenComponent },
8 { 8 {
9 path: '', 9 path: '',
10 component: AdminComponent, 10 component: AdminComponent,
11 children: [ 11 children: [
12 { 12 {
13 path: 'formas-pago', 13 path: 'formas-pago',
14 loadChildren: () => import('./modules/formas-pago/formas-pago.module').then(m => m.FormasPagoModule) 14 loadChildren: () => import('./modules/formas-pago/formas-pago.module').then(m => m.FormasPagoModule)
15 }, 15 },
16 { 16 {
17 path: 'opcion-pedido', 17 path: 'opcion-pedido',
18 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule) 18 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule)
19 }, 19 },
20 { 20 {
21 path: 'seleccion-articulos', 21 path: 'seleccion-articulos',
22 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule) 22 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule)
23 }, 23 },
24 {
25 path: 'carrito',
26 loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
27 },
24 ] 28 ]
25 }, 29 },
26 { path: '**', redirectTo: '', pathMatch: 'full' }, 30 { path: '**', redirectTo: '', pathMatch: 'full' },
27 ]; 31 ];
28 32
29 @NgModule({ 33 @NgModule({
30 imports: [RouterModule.forRoot(routes, { useHash: true })], 34 imports: [RouterModule.forRoot(routes, { useHash: true })],
31 exports: [RouterModule] 35 exports: [RouterModule]
32 }) 36 })
33 export class AppRoutingModule { } 37 export class AppRoutingModule { }
34 38
src/app/modules/carrito/carrito-routing.module.ts
Diff comments   View file @ 7ba6859
File was created 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router';
3 import { CarritoComponent } from './carrito.component';
4
5 const routes: Routes = [
6 { path: '', component: CarritoComponent }
7 ];
8
9 @NgModule({
10 imports: [RouterModule.forChild(routes)],
11 exports: [RouterModule]
12 })
13 export class CarritoRoutingModule { }
14
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 7ba6859
File was created 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad>
4
5 <div class="row mx-0 h-90 align-items-center">
6
7 </div>
8
9 </div>
10
src/app/modules/carrito/carrito.component.scss
Diff comments   View file @ 7ba6859
src/app/modules/carrito/carrito.component.spec.ts
Diff comments   View file @ 7ba6859
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { CarritoComponent } from './carrito.component';
4
5 describe('CarritoComponent', () => {
6 let component: CarritoComponent;
7 let fixture: ComponentFixture<CarritoComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ CarritoComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(CarritoComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 7ba6859
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-carrito',
5 templateUrl: './carrito.component.html',
6 styleUrls: ['./carrito.component.scss']
7 })
8 export class CarritoComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16
src/app/modules/carrito/carrito.module.ts
Diff comments   View file @ 7ba6859
File was created 1 import { NgModule } from "@angular/core";
2 import { CommonModule } from "@angular/common";
3
4 import { CarritoRoutingModule } from "./carrito-routing.module";
5 import { CarritoComponent } from "./carrito.component";
6 import { SeleccionArticulosModule } from '../seleccion-articulos/seleccion-articulos.module';
7
8 @NgModule({
9 declarations: [CarritoComponent],
10 imports: [CommonModule, CarritoRoutingModule, SeleccionArticulosModule]
11 })
12 export class CarritoModule { }
13
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 7ba6859
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="row mx-0 h-90 align-items-end"> 5 <div class="row mx-0 h-90 align-items-end">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row w-100 mx-4 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-4 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 <!-- CUERPO --> 14 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-70"> 15 <div class="row w-100 mr-4 h-70">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 align-items-center"> 21 <div class="row mx-0 h-94 align-items-center">
22 <div class="col-12 h-5"> 22 <div class="col-12 h-5">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -80)" 29 (mousedown)="scrollY(templateCategorias, -80)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
37 <div 37 <div
38 class="row mx-4 mb-2 h-32 justify-content-center tab" 38 class="row mx-4 mb-2 h-32 justify-content-center tab"
39 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 39 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
40 (click)="selectCategoria(i)" 40 (click)="selectCategoria(i)"
41 *ngFor="let categoria of categorias; let i = index;"> 41 *ngFor="let categoria of categorias; let i = index;">
42 <img 42 <img
43 class="col-12 h-50 align-self-end d-none d-sm-block" 43 class="col-12 h-50 align-self-end d-none d-sm-block"
44 src="assets/img/ir-color.svg"> 44 src="assets/img/ir-color.svg">
45 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small> 45 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
46 </div> 46 </div>
47 </div> 47 </div>
48 <div class="col-12 h-5"> 48 <div class="col-12 h-5">
49 <img 49 <img
50 draggable="false" 50 draggable="false"
51 ondragstart="return false;" 51 ondragstart="return false;"
52 (contextmenu)="false" 52 (contextmenu)="false"
53 class="h-100 d-block mx-auto rotate-90" 53 class="h-100 d-block mx-auto rotate-90"
54 src="assets/img/ir-color.svg" 54 src="assets/img/ir-color.svg"
55 (mousedown)="scrollY(templateCategorias, 80)" 55 (mousedown)="scrollY(templateCategorias, 80)"
56 (mouseup)="mouseup()" 56 (mouseup)="mouseup()"
57 (mouseleave)="mouseup()"> 57 (mouseleave)="mouseup()">
58 </div> 58 </div>
59 </div> 59 </div>
60 </div> 60 </div>
61 <!-- LISTA DE ARTICULOS --> 61 <!-- LISTA DE ARTICULOS -->
62 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y"> 62 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
63 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100"> 63 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
64 <!-- ARTICULO --> 64 <!-- ARTICULO -->
65 <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]"> 65 <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
66 <div class="card h-100"> 66 <div class="card h-100">
67 <img src="assets/img/ir-color.svg" class="card-img-top h-55"> 67 <img src="assets/img/ir-color.svg" class="card-img-top h-55">
68 <div class="row mx-0 py-1 h-auto justify-content-center"> 68 <div class="row mx-0 py-1 h-auto justify-content-center">
69 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p> 69 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
70 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p> 70 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
71 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 71 <div class="col-12 px-1 align-self-end btn-effect h-auto">
72 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 72 <div class="row mx-0 justify-content-between bg-primary badge-pill">
73 <div class="col px-0 align-self-center text-white text-right"> 73 <div class="col px-0 align-self-center text-white text-right">
74 {{55 | currency}} 74 {{55 | currency}}
75 </div> 75 </div>
76 <div class="col-5 px-0"> 76 <div class="col-5 px-0">
77 <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg"> 77 <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
78 </div> 78 </div>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 </div> 84 </div>
85 </div> 85 </div>
86 </div> 86 </div>
87 </div> 87 </div>
88 </div> 88 </div>
89 <!-- FOOTER CARRITO DE COMPRAS --> 89 <!-- FOOTER CARRITO DE COMPRAS -->
90 <div class="row w-90 mx-auto h-auto justify-content-center"> 90 <div class="row w-90 mx-auto h-auto justify-content-center">
91 <div class="col-12 h-75 px-0 border border-primary rounded"> 91 <div class="col-12 h-75 px-0 border border-primary rounded">
92 <div class="row mx-0 h-15 border-bottom border-primary"> 92 <div class="row mx-0 h-15 border-bottom border-primary">
93 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 93 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
94 </div> 94 </div>
95 <div class="row h-85 mx-0 justify-content-between"> 95 <div class="row h-85 mx-0 justify-content-between">
96 <div class="col-auto h-20 align-self-center"> 96 <div class="col-auto h-20 align-self-center">
97 <img 97 <img
98 draggable="false" 98 draggable="false"
99 ondragstart="return false;" 99 ondragstart="return false;"
100 (contextmenu)="false" 100 (contextmenu)="false"
101 class="img-ir rotate-180-neg" 101 class="img-ir rotate-180-neg"
102 src="assets/img/ir-fondo-color.svg" 102 src="assets/img/ir-fondo-color.svg"
103 (mousedown)="scrollX(templateCarrito, -100)" 103 (mousedown)="scrollX(templateCarrito, -100)"
104 (mouseup)="mouseup()" 104 (mouseup)="mouseup()"
105 (mouseleave)="mouseup()"> 105 (mouseleave)="mouseup()">
106 </div> 106 </div>
107 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 107 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
108 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x"> 108 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
109 <div 109 <div
110 class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-auto align-self-center border-right border-primary" 110 class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-auto align-self-center border-right border-primary"
111 (click)="selectCategoria(i)" 111 (click)="selectCategoria(i)"
112 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> 112 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
113 <img 113 <img
114 class="d-block h-55 p-2 mx-auto" 114 class="d-block h-55 p-2 mx-auto"
115 src="assets/img/ir-color.svg"> 115 src="assets/img/ir-color.svg">
116 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p> 116 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
117 </div> 117 </div>
118 </div> 118 </div>
119 </div> 119 </div>
120 <div class="col-auto h-20 align-self-center"> 120 <div class="col-auto h-20 align-self-center">
121 <img 121 <img
122 draggable="false" 122 draggable="false"
123 ondragstart="return false;" 123 ondragstart="return false;"
124 (contextmenu)="false" 124 (contextmenu)="false"
125 class="img-ir" 125 class="img-ir"
126 src="assets/img/ir-fondo-color.svg" 126 src="assets/img/ir-fondo-color.svg"
127 (mousedown)="scrollX(templateCarrito, 100)" 127 (mousedown)="scrollX(templateCarrito, 100)"
128 (mouseup)="mouseup()" 128 (mouseup)="mouseup()"
129 (mouseleave)="mouseup()"> 129 (mouseleave)="mouseup()">
130 </div> 130 </div>
131 </div> 131 </div>
132 </div> 132 </div>
133 <div class="col-auto p-0 mt-2 ml-auto h-20"> 133 <div class="col-auto p-0 mt-2 ml-auto h-20">
134 <div class="btn-effect col-auto align-self-center px-0 bg-white"> 134 <div
135 class="btn-effect col-auto align-self-center px-0 bg-white"
136 [routerLink]="['/carrito']">
135 <div class="row mx-0 bg-light"> 137 <div class="row mx-0 bg-light">
136 <div class="col-auto align-self-center text-primary">VER CARRITO</div> 138 <div class="col-auto align-self-center text-primary">VER CARRITO</div>
137 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 139 <div class="col-auto p-0 bg-primary d-none d-sm-block">
138 <img class="p-2 img-volver" src="assets/img/carrito.svg"> 140 <img class="p-2 img-volver" src="assets/img/carrito.svg">
139 </div> 141 </div>
140 </div> 142 </div>
141 </div> 143 </div>
142 </div> 144 </div>
143 </div> 145 </div>
144 </div> 146 </div>
145 147
146 </div> 148 </div>
147 149
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 7ba6859
1 import { NgModule } from "@angular/core"; 1 import { NgModule } from '@angular/core';
2 import { CommonModule } from "@angular/common"; 2 import { CommonModule } from '@angular/common';
3 3
4 import { SeleccionArticulosRoutingModule } from "./seleccion-articulos-routing.module"; 4 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module';
5 import { SeleccionArticulosComponent } from "./seleccion-articulos.component"; 5 import { SeleccionArticulosComponent } from './seleccion-articulos.component';
6 import { HeaderPublicidadComponent } from "src/app/shared/header-publicidad/header-publicidad.component"; 6 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component';
7 7
8 @NgModule({ 8 @NgModule({
9 declarations: [SeleccionArticulosComponent, HeaderPublicidadComponent], 9 declarations: [SeleccionArticulosComponent, HeaderPublicidadComponent],
10 imports: [CommonModule, SeleccionArticulosRoutingModule] 10 imports: [CommonModule, SeleccionArticulosRoutingModule],
11 exports: [HeaderPublicidadComponent]
11 }) 12 })
12 export class SeleccionArticulosModule {} 13 export class SeleccionArticulosModule { }
13 14
src/app/shared/footer/footer.component.html
Diff comments   View file @ 7ba6859
File was created 1 <div class="row w-90 mx-auto h-100 justify-content-between bg-white">
2 <div class="col-auto align-self-center px-0 bg-white">
3 <div class="btn-effect row mx-0 bg-light">
4 <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div>
5 <div class="col-auto p-0 bg-primary d-none d-sm-block">
6 <img class="p-2 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg">
7 </div>
8 </div>
9 </div>
10 <div
11 class="btn-effect col-auto align-self-center px-0 bg-white"
12 (click)="goBack()">
13 <div class="row mx-0 bg-light">
14 <div class="col-auto align-self-center text-primary">VOLVER</div>
15 <div class="col-auto p-0 bg-primary d-none d-sm-block">
16 <img class="p-2 img-volver" src="assets/img/icono-volver.svg">
17 </div>
18 </div>
19 </div>
20 </div>
21
src/app/shared/footer/footer.component.scss
Diff comments   View file @ 7ba6859
src/app/shared/footer/footer.component.spec.ts
Diff comments   View file @ 7ba6859
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { FooterComponent } from './footer.component';
4
5 describe('FooterComponent', () => {
6 let component: FooterComponent;
7 let fixture: ComponentFixture<FooterComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ FooterComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(FooterComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/shared/footer/footer.component.ts
Diff comments   View file @ 7ba6859
File was created 1 import { Component, OnInit } from "@angular/core";
2 import { Location } from "@angular/common";
3
4 @Component({
5 selector: "app-footer",
6 templateUrl: "./footer.component.html",
7 styleUrls: ["./footer.component.scss"]
8 })
9 export class FooterComponent implements OnInit {
10 constructor(private location: Location) {}
11
12 ngOnInit() {}
13
14 goBack() {
15 this.location.back();
16 }
17 }
18
src/app/shared/header-publicidad/header-publicidad.component.html
Diff comments   View file @ 7ba6859
File was created 1 <div class="row mx-0 h-10">
2 <div class="col-12 p-3 h-100">
3 <div class="bg-dark h-100"></div>
4 </div>
5 </div>
src/app/shared/header-publicidad/header-publicidad.component.scss
Diff comments   View file @ 7ba6859
src/app/shared/header-publicidad/header-publicidad.component.spec.ts
Diff comments   View file @ 7ba6859
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { HeaderPublicidadComponent } from './header-publicidad.component';
4
5 describe('HeaderPublicidadComponent', () => {
6 let component: HeaderPublicidadComponent;
7 let fixture: ComponentFixture<HeaderPublicidadComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ HeaderPublicidadComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(HeaderPublicidadComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ 7ba6859
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-header-publicidad',
5 templateUrl: './header-publicidad.component.html',
6 styleUrls: ['./header-publicidad.component.scss']
7 })
8 export class HeaderPublicidadComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16