Commit 401229e99a36eec726502867ad3dc3aa3b5a59d2

Authored by Marcelo Puebla
1 parent 97be65005b

Creado componente de publicidades

src/app/app.module.ts
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 import { AppRoutingModule } from './app-routing.module'; 3 import { AppRoutingModule } from './app-routing.module';
4 import { AppComponent } from './app.component'; 4 import { AppComponent } from './app.component';
5 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 5 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
6 import { SplitPipe } from './pipes/split.pipe'; 6 import { SplitPipe } from './pipes/split.pipe';
7 import { AdminComponent } from './modules/admin/admin.component'; 7 import { AdminComponent } from './modules/admin/admin.component';
8 import { FooterComponent } from './modules/footer/footer.component'; 8 import { FooterComponent } from './shared/footer/footer.component';
9 9
10 @NgModule({ 10 @NgModule({
11 declarations: [ 11 declarations: [
12 AppComponent, 12 AppComponent,
13 SplashScreenComponent, 13 SplashScreenComponent,
14 SplitPipe, 14 SplitPipe,
15 AdminComponent, 15 AdminComponent,
16 FooterComponent 16 FooterComponent,
17 ], 17 ],
18 imports: [ 18 imports: [
19 BrowserModule, 19 BrowserModule,
20 AppRoutingModule 20 AppRoutingModule
21 ], 21 ],
22 providers: [], 22 providers: [],
23 bootstrap: [AppComponent] 23 bootstrap: [AppComponent]
24 }) 24 })
25 export class AppModule { } 25 export class AppModule { }
26 26
src/app/modules/footer/footer.component.html
1 <div class="row w-90 mx-auto h-100 justify-content-between bg-white"> File was deleted
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 1 <div class="row w-90 mx-auto h-100 justify-content-between bg-white">
src/app/modules/footer/footer.component.scss
src/app/modules/footer/footer.component.spec.ts
1 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; File was deleted
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 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
src/app/modules/footer/footer.component.ts
1 import { Component, OnInit } from "@angular/core"; File was deleted
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 1 import { Component, OnInit } from "@angular/core";
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
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 <div class="row mx-0 h-10"> 3 <app-header-publicidad></app-header-publicidad>
4 <div class="col-12 p-3 h-100"> 4
5 <div class="bg-dark h-100"></div> 5 <div class="row mx-0 h-90 align-items-end">
6 </div>
7 </div>
8 <div class="mx-0 h-90 align-items-end">
9 <!-- CABECERA --> 6 <!-- CABECERA -->
10 <div class="row mx-4 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-4 h-auto border border-primary rounded-sm">
11 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
12 <div class="px-3"> 9 <div class="px-3">
13 <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>
14 </div> 11 </div>
15 </div> 12 </div>
16 </div> 13 </div>
17 <!-- CUERPO --> 14 <!-- CUERPO -->
18 <div class="row mr-4 h-70"> 15 <div class="row w-100 mr-4 h-70">
19 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
20 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
21 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
22 <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">
23 <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>
24 <div class="row mx-0 h-94 align-items-center"> 21 <div class="row mx-0 h-94 align-items-center">
25 <div class="col-12 h-5"> 22 <div class="col-12 h-5">
26 <img 23 <img
27 draggable="false" 24 draggable="false"
28 ondragstart="return false;" 25 ondragstart="return false;"
29 (contextmenu)="false" 26 (contextmenu)="false"
30 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
31 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
32 (mousedown)="scrollY(templateCategorias, -80)" 29 (mousedown)="scrollY(templateCategorias, -80)"
33 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
34 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
35 </div> 32 </div>
36 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
37 <div 34 <div
38 #templateCategorias 35 #templateCategorias
39 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">
40 <div 37 <div
41 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"
42 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 39 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
43 (click)="selectCategoria(i)" 40 (click)="selectCategoria(i)"
44 *ngFor="let categoria of categorias; let i = index;"> 41 *ngFor="let categoria of categorias; let i = index;">
45 <img 42 <img
46 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"
47 src="assets/img/ir-color.svg"> 44 src="assets/img/ir-color.svg">
48 <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>
49 </div> 46 </div>
50 </div> 47 </div>
51 <div class="col-12 h-5"> 48 <div class="col-12 h-5">
52 <img 49 <img
53 draggable="false" 50 draggable="false"
54 ondragstart="return false;" 51 ondragstart="return false;"
55 (contextmenu)="false" 52 (contextmenu)="false"
56 class="h-100 d-block mx-auto rotate-90" 53 class="h-100 d-block mx-auto rotate-90"
57 src="assets/img/ir-color.svg" 54 src="assets/img/ir-color.svg"
58 (mousedown)="scrollY(templateCategorias, 80)" 55 (mousedown)="scrollY(templateCategorias, 80)"
59 (mouseup)="mouseup()" 56 (mouseup)="mouseup()"
60 (mouseleave)="mouseup()"> 57 (mouseleave)="mouseup()">
61 </div> 58 </div>
62 </div> 59 </div>
63 </div> 60 </div>
64 <!-- LISTA DE ARTICULOS --> 61 <!-- LISTA DE ARTICULOS -->
65 <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">
66 <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">
67 <!-- ARTICULO --> 64 <!-- ARTICULO -->
68 <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 [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
69 <div class="card h-100"> 66 <div class="card h-100">
70 <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">
71 <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">
72 <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>
73 <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>
74 <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">
75 <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">
76 <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">
77 {{55 | currency}} 74 {{55 | currency}}
78 </div> 75 </div>
79 <div class="col-5 px-0"> 76 <div class="col-5 px-0">
80 <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">
81 </div> 78 </div>
82 </div> 79 </div>
83 </div> 80 </div>
84 </div> 81 </div>
85 </div> 82 </div>
86 </div> 83 </div>
87 </div> 84 </div>
88 </div> 85 </div>
89 </div> 86 </div>
90 </div> 87 </div>
91 </div> 88 </div>
92 <!-- FOOTER CARRITO DE COMPRAS --> 89 <!-- FOOTER CARRITO DE COMPRAS -->
93 <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">
94 <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">
95 <div class="row mx-0 h-15 border-bottom border-primary"> 92 <div class="row mx-0 h-15 border-bottom border-primary">
96 <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>
97 </div> 94 </div>
98 <div class="row h-85 mx-0 justify-content-between"> 95 <div class="row h-85 mx-0 justify-content-between">
99 <div class="col-auto h-20 align-self-center"> 96 <div class="col-auto h-20 align-self-center">
100 <img 97 <img
101 draggable="false" 98 draggable="false"
102 ondragstart="return false;" 99 ondragstart="return false;"
103 (contextmenu)="false" 100 (contextmenu)="false"
104 class="img-ir rotate-180-neg" 101 class="img-ir rotate-180-neg"
105 src="assets/img/ir-fondo-color.svg" 102 src="assets/img/ir-fondo-color.svg"
106 (mousedown)="scrollX(templateCarrito, -100)" 103 (mousedown)="scrollX(templateCarrito, -100)"
107 (mouseup)="mouseup()" 104 (mouseup)="mouseup()"
108 (mouseleave)="mouseup()"> 105 (mouseleave)="mouseup()">
109 </div> 106 </div>
110 <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">
111 <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">
112 <div 109 <div
113 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"
114 (click)="selectCategoria(i)" 111 (click)="selectCategoria(i)"
115 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> 112 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
116 <img 113 <img
117 class="d-block h-55 p-2 mx-auto" 114 class="d-block h-55 p-2 mx-auto"
118 src="assets/img/ir-color.svg"> 115 src="assets/img/ir-color.svg">
119 <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>
120 </div> 117 </div>
121 </div> 118 </div>
122 </div> 119 </div>
123 <div class="col-auto h-20 align-self-center"> 120 <div class="col-auto h-20 align-self-center">
124 <img 121 <img
125 draggable="false" 122 draggable="false"
126 ondragstart="return false;" 123 ondragstart="return false;"
127 (contextmenu)="false" 124 (contextmenu)="false"
128 class="img-ir" 125 class="img-ir"
129 src="assets/img/ir-fondo-color.svg" 126 src="assets/img/ir-fondo-color.svg"
130 (mousedown)="scrollX(templateCarrito, 100)" 127 (mousedown)="scrollX(templateCarrito, 100)"
131 (mouseup)="mouseup()" 128 (mouseup)="mouseup()"
132 (mouseleave)="mouseup()"> 129 (mouseleave)="mouseup()">
133 </div> 130 </div>
134 </div> 131 </div>
135 </div> 132 </div>
136 <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">
137 <div class="btn-effect col-auto align-self-center px-0 bg-white"> 134 <div class="btn-effect col-auto align-self-center px-0 bg-white">
138 <div class="row mx-0 bg-light"> 135 <div class="row mx-0 bg-light">
139 <div class="col-auto align-self-center text-primary">VER CARRITO</div> 136 <div class="col-auto align-self-center text-primary">VER CARRITO</div>
140 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 137 <div class="col-auto p-0 bg-primary d-none d-sm-block">
141 <img class="p-2 img-volver" src="assets/img/carrito.svg"> 138 <img class="p-2 img-volver" src="assets/img/carrito.svg">
142 </div> 139 </div>
143 </div> 140 </div>
144 </div> 141 </div>
145 </div> 142 </div>
146 </div> 143 </div>
147 </div> 144 </div>
148 145
149 </div> 146 </div>
150 147
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
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
4 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module';
5 import { SeleccionArticulosComponent } from './seleccion-articulos.component';
6 3
4 import { SeleccionArticulosRoutingModule } from "./seleccion-articulos-routing.module";
5 import { SeleccionArticulosComponent } from "./seleccion-articulos.component";
6 import { HeaderPublicidadComponent } from "src/app/shared/header-publicidad/header-publicidad.component";
7 7
8 @NgModule({ 8 @NgModule({
9 declarations: [SeleccionArticulosComponent], 9 declarations: [SeleccionArticulosComponent, HeaderPublicidadComponent],
10 imports: [ 10 imports: [CommonModule, SeleccionArticulosRoutingModule]
11 CommonModule,
12 SeleccionArticulosRoutingModule
13 ]