diff --git a/package-lock.json b/package-lock.json index 9aef4b4..5fba580 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8378,6 +8378,11 @@ "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==", "dev": true }, + "ngx-bootstrap": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.2.0.tgz", + "integrity": "sha512-fh+OmaEdxCZnVLQFLqexdw4Xv0Lp2Ueq7un52gF26lTENhTAypGWgf2c92HXzbp4W/B0tnwIZ9mzQPwdDMH91w==" + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", diff --git a/package.json b/package.json index f99087f..942dcd8 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "hammerjs": "^2.0.8", "jquery": "^3.4.1", "js-sha256": "^0.9.0", + "ngx-bootstrap": "^5.2.0", "popper.js": "^1.16.0", "rxjs": "~6.4.0", "tslib": "^1.10.0", diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html index f7a62ec..5771635 100644 --- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html +++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html @@ -65,7 +65,7 @@
-
+
{{'CORTADO'}}

{{'Café con un poco de leche'}}

-
+
{{55 | currency}}
@@ -129,7 +132,7 @@ (contextmenu)="false" class="d-block h-55 p-2 mx-auto" src="assets/img/ir-color.svg"> -

{{'lala'}}

+

{{'articulo'}}

diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts index 8fae179..2b16854 100644 --- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts +++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from "@angular/core"; +import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; +import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; @Component({ selector: "app-seleccion-articulos", @@ -15,10 +17,13 @@ export class SeleccionArticulosComponent implements OnInit { { id: 5, selected: false }, { id: 6, selected: false } ]; + modalRef: BsModalRef; - constructor() {} + constructor( + private modalService: BsModalService, + ) { } - ngOnInit() {} + ngOnInit() { } selectCategoria(index: number) { this.categorias.forEach((categoria, i) => { @@ -26,6 +31,15 @@ export class SeleccionArticulosComponent implements OnInit { }); } + elegirArticulo(articulo: any) { + if (articulo.promo) { + this.modalRef = this.modalService.show(PromocionComponent, { + class: 'custom-modal modal-dialog-centered', + ignoreBackdropClick: true, + }) + } + } + mouseup() { if (!this.timeoutHandler) return; clearInterval(this.timeoutHandler); diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts index b43f34c..0e2b047 100644 --- a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts +++ b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts @@ -1,13 +1,23 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; - import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module'; import { SeleccionArticulosComponent } from './seleccion-articulos.component'; import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component'; +import { ModalModule } from 'ngx-bootstrap/modal'; +import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; @NgModule({ - declarations: [SeleccionArticulosComponent, HeaderPublicidadComponent], - imports: [CommonModule, SeleccionArticulosRoutingModule], - exports: [HeaderPublicidadComponent] + declarations: [ + SeleccionArticulosComponent, + HeaderPublicidadComponent, + PromocionComponent + ], + imports: [ + CommonModule, + SeleccionArticulosRoutingModule, + ModalModule.forRoot(), + ], + exports: [HeaderPublicidadComponent], + entryComponents: [PromocionComponent] }) export class SeleccionArticulosModule { } diff --git a/src/app/shared/promocion/promocion.component.html b/src/app/shared/promocion/promocion.component.html new file mode 100644 index 0000000..73d8188 --- /dev/null +++ b/src/app/shared/promocion/promocion.component.html @@ -0,0 +1,55 @@ +
+
+
+ +
+
+
+
+

{{'ENSALADA CAESAR'}}

+

¿QUERÉS LLEVAR ESTA ENSALADA

+

en combo con 1 bebida?

+
+
+
+
+

+ {{'Sola'}} {{155 | currency}} + +

+
+
+
+
+
+
+

+ {{'Con bebida'}} {{155 | currency}} + +

+
+
+
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/shared/promocion/promocion.component.scss b/src/app/shared/promocion/promocion.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/promocion/promocion.component.spec.ts b/src/app/shared/promocion/promocion.component.spec.ts new file mode 100644 index 0000000..1013e65 --- /dev/null +++ b/src/app/shared/promocion/promocion.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PromocionComponent } from './promocion.component'; + +describe('PromocionComponent', () => { + let component: PromocionComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PromocionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PromocionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/promocion/promocion.component.ts b/src/app/shared/promocion/promocion.component.ts new file mode 100644 index 0000000..bc27497 --- /dev/null +++ b/src/app/shared/promocion/promocion.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core'; +import { BsModalRef } from 'ngx-bootstrap/modal'; + +@Component({ + selector: 'app-promocion', + templateUrl: './promocion.component.html', + styleUrls: ['./promocion.component.scss'] +}) +export class PromocionComponent implements OnInit { + + constructor( + private modalRef: BsModalRef, + ) { } + + ngOnInit() { + } + +} diff --git a/src/scss/icons.scss b/src/scss/icons.scss index b8e5dd6..cfea7c2 100644 --- a/src/scss/icons.scss +++ b/src/scss/icons.scss @@ -17,3 +17,7 @@ .icon-60 { width: 60px; } + +.icon-150 { + width: 150px; +} diff --git a/src/scss/styles-bootstrap.scss b/src/scss/styles-bootstrap.scss index a1d03bf..ba3ae07 100644 --- a/src/scss/styles-bootstrap.scss +++ b/src/scss/styles-bootstrap.scss @@ -18,4 +18,15 @@ $border-radius: 1.5rem; $border-radius-lg: 2.5rem; $border-radius-sm: 0.5rem; +.custom-modal { + max-width: 90% !important; + & > .modal-content { + background-color: $primary !important; + color: white; + border: none !important; + border-radius: $border-radius !important; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; + } +} + @import "node_modules/bootstrap/scss/bootstrap";