From eddfdb72a312a2380c679b3d3469cc84e602f5ed Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 13 Aug 2019 13:31:58 +0530 Subject: [PATCH] Outlet details page partial completion --- src/app/app-routing.module.ts | 1 + src/app/mall-details/mall-details.page.html | 5 +- src/app/mall-details/mall-details.page.ts | 5 +- .../outlet-details/outlet-details.module.ts | 26 ++ .../outlet-details/outlet-details.page.html | 82 ++++++ .../outlet-details/outlet-details.page.scss | 235 ++++++++++++++++++ .../outlet-details.page.spec.ts | 27 ++ src/app/outlet-details/outlet-details.page.ts | 50 ++++ src/app/services/mall.service.ts | 55 +++- src/global.scss | 2 +- 10 files changed, 483 insertions(+), 5 deletions(-) create mode 100644 src/app/outlet-details/outlet-details.module.ts create mode 100644 src/app/outlet-details/outlet-details.page.html create mode 100644 src/app/outlet-details/outlet-details.page.scss create mode 100644 src/app/outlet-details/outlet-details.page.spec.ts create mode 100644 src/app/outlet-details/outlet-details.page.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 046b24d..1e88503 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -7,6 +7,7 @@ const routes: Routes = [ { path: 'login', loadChildren: './login/login.module#LoginPageModule' }, { path: 'malls', loadChildren: './malls/malls.module#MallsPageModule' }, { path: 'mall-details', loadChildren: './mall-details/mall-details.module#MallDetailsPageModule' }, + { path: 'outlet-details', loadChildren: './outlet-details/outlet-details.module#OutletDetailsPageModule' }, ]; @NgModule({ diff --git a/src/app/mall-details/mall-details.page.html b/src/app/mall-details/mall-details.page.html index 4f6dadd..323d137 100644 --- a/src/app/mall-details/mall-details.page.html +++ b/src/app/mall-details/mall-details.page.html @@ -40,7 +40,7 @@

{{ mall_details.name }}

-
{{ mall_details.rating }} (2000)
+
{{ mall_details.rating }}
{{ mall_details.distance }} km

{{ mall_details.description }}

@@ -60,7 +60,8 @@
- +

diff --git a/src/app/mall-details/mall-details.page.ts b/src/app/mall-details/mall-details.page.ts index f7614ff..37cda11 100644 --- a/src/app/mall-details/mall-details.page.ts +++ b/src/app/mall-details/mall-details.page.ts @@ -45,7 +45,6 @@ export class MallDetailsPage implements OnInit { this.mallService.updateMallDetails(mall_details).then(() => this.refresh()); } - onScroll(event: any) { if (event.detail.scrollTop > 100) { this.show_top_bar = true; @@ -54,4 +53,8 @@ export class MallDetailsPage implements OnInit { } } + outletDetails(mall_id: string, outlet_id: string) { + this.router.navigate(['/outlet-details', { mall_id: mall_id, outlet_id: outlet_id }]); + } + } diff --git a/src/app/outlet-details/outlet-details.module.ts b/src/app/outlet-details/outlet-details.module.ts new file mode 100644 index 0000000..e8af898 --- /dev/null +++ b/src/app/outlet-details/outlet-details.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { Routes, RouterModule } from '@angular/router'; + +import { IonicModule } from '@ionic/angular'; + +import { OutletDetailsPage } from './outlet-details.page'; + +const routes: Routes = [ + { + path: '', + component: OutletDetailsPage + } +]; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + RouterModule.forChild(routes) + ], + declarations: [OutletDetailsPage] +}) +export class OutletDetailsPageModule {} diff --git a/src/app/outlet-details/outlet-details.page.html b/src/app/outlet-details/outlet-details.page.html new file mode 100644 index 0000000..67f0762 --- /dev/null +++ b/src/app/outlet-details/outlet-details.page.html @@ -0,0 +1,82 @@ + +
+
+ +

{{ outlet_details.name }}

+
+
+
{{ outlet_details.rating }}
+
+
+ + +
+
+ +
+ +
+
+ +
+
+ + +
+
+
+ + + +
+
+ +
+
+

{{ outlet_details.name }}

+
+
{{ outlet_details.rating }}
+
+

{{ outlet_details.description }}

+
+
+ +
+
+

MENU

+
VEG MENU
+
+
+ +
+ +
+
{{ outlet_details.menu_items.length }} FOOD ITEMS
+ SORT / FILTER +
+ +
+ +
+
{{ item.rating }}
+ +
{{ item.name }}
+

{{ item.description }}

+
+
+ Non-Veg Meals + Veg Meals +
+
{{ item.wait_duration }} Minutes
+
+ {{ calculateDiscount(item.price, item.discount) }} + {{ item.price }} +
+
+ +
+
+ + diff --git a/src/app/outlet-details/outlet-details.page.scss b/src/app/outlet-details/outlet-details.page.scss new file mode 100644 index 0000000..0973d3e --- /dev/null +++ b/src/app/outlet-details/outlet-details.page.scss @@ -0,0 +1,235 @@ +.header-bar { + background-image: url('../../assets/custom/background-2.svg'); + background-size: cover; + background-repeat: no-repeat; + background-position: left top; + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px; + height: 75px; + z-index: 2; + pointer-events: none; + opacity: 0; + top: 0; + left: 0; + width: 100%; + position: fixed; + transition: opacity 0.5s; + box-shadow: 0px 3px 5px var(--brand-grey); + + &.active { + opacity: 1; + pointer-events: all; + } + + + .heading-holder { + display: flex; + align-items: center; + } + + button, a { + background-color: white; + color: var(--brand-blue); + font-size: 18px; + padding: 5px; + border-radius: 50%; + height: 30px; + width: 30px; + display: flex; + justify-content: center; + align-items: center; + + &.active { + color: white; + background-color: var(--brand-blue); + } + } + + h3 { + font-size: 16px; + color: white; + letter-spacing: 0.5px; + margin-left: 10px; + font-weight: 600; + } + + .stats-holder { + font-size: 10px; + color: white; + display: flex; + align-items: center; + + .stat { + margin-left: 10px; + } + } + + .utilities-buttons-holder { + position: absolute; + right: 15px; + bottom: -15px; + display: flex; + align-items: center; + button, a { + margin-left: 10px; + box-shadow: 0px 3px 5px var(--brand-grey); + } + } +} + +.upfold-holder { + position: relative; + height: 45vh; + width: 100%; + padding-top: 30px; + margin-bottom: -25px; + + .icons-holder { + position: relative; + display: flex; + width: 90%; + margin: 0 auto; + justify-content: space-between; + + &.navigate-button { + position: absolute; + left: 86%; + bottom: 30px; + width: auto; + + a { + display: flex; + justify-content: center; + align-items: center; + } + } + + button, a { + background-color: white; + color: var(--brand-blue); + font-size: 18px; + padding: 5px; + border-radius: 50%; + height: 30px; + width: 30px; + display: block; + margin-bottom: 10px; + box-shadow: 0px 0px 5px var(--brand-grey); + + &.active { + background-color: var(--brand-blue); + color: white; + } + } + } + + img { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + object-fit: cover; + filter: brightness(80%); + } +} + +.card-holder { + background-color: transparent; + position: relative; + + .card { + box-shadow: 0px 0px 5px var(--brand-grey); + width: 90%; + margin: 0 auto; + border-radius: 10px; + overflow: hidden; + padding: 20px; + background-color: white; + + h3 { + color: var(--brand-dark-grey); + font-size: 20px; + letter-spacing: 0.5px; + font-weight: 600; + } + + .stats-holder { + display: flex; + justify-content: space-between; + color: var(--brand-blue); + font-size: 10px; + font-weight: bold; + margin: 15px 0; + + span { + color: var(--brand-grey); + } + } + + p { + margin: 0 auto; + font-size: 11px; + line-height: 1.5; + color: var(--brand-grey); + } + } +} + +.menu-card-holder { + margin: 25px 0; + + header { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + background-color: #efefef; + color: var(--brand-dark-grey); + padding: 5px 0 5px 15px; + } + + h3 { + font-size: 12px; + } + + .toggle { + font-size: 10px; + display: flex; + align-items: center; + + ion-toggle { + --handle-background: var(--brand-blue); + --handle-background-checked: var(--brand-blue); + transform: scale(0.8); + } + } + + .tags-holder { + display: flex; + flex-wrap: wrap; + padding: 25px 15px 0; + + button { + border: 1px solid var(--brand-blue); + border-radius: 30px; + color: var(--brand-blue); + font-size: 12px; + padding: 7px 15px; + background-color: white; + margin-right: 10px; + margin-bottom: 15px; + + &.active { + background-color: var(--brand-blue); + color: white; + } + } + } + + .results-utilities-holder { + margin-top: 0; + } +} diff --git a/src/app/outlet-details/outlet-details.page.spec.ts b/src/app/outlet-details/outlet-details.page.spec.ts new file mode 100644 index 0000000..a75d556 --- /dev/null +++ b/src/app/outlet-details/outlet-details.page.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OutletDetailsPage } from './outlet-details.page'; + +describe('OutletDetailsPage', () => { + let component: OutletDetailsPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ OutletDetailsPage ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OutletDetailsPage); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/outlet-details/outlet-details.page.ts b/src/app/outlet-details/outlet-details.page.ts new file mode 100644 index 0000000..2ca97fc --- /dev/null +++ b/src/app/outlet-details/outlet-details.page.ts @@ -0,0 +1,50 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Location } from '@angular/common'; +import { Mall, Outlet, MallService } from '../services/mall.service'; + +@Component({ + selector: 'app-outlet-details', + templateUrl: './outlet-details.page.html', + styleUrls: ['./outlet-details.page.scss'], +}) +export class OutletDetailsPage implements OnInit { + mall_details: Mall; + outlet_details: Outlet; + show_top_bar: boolean = false; + show_only_veg: boolean = false; + selected_tag: string = null; + + constructor( + private route: ActivatedRoute, + private location: Location, + private mallService: MallService, + ) { } + + ngOnInit() { + let mall_id = this.route.snapshot.paramMap.get('mall_id'); + let outlet_id = this.route.snapshot.paramMap.get('outlet_id'); + + this.mallService.getMallByID(mall_id).then((data: Mall) => { + this.mall_details = data; + this.outlet_details = this.mall_details.outlets.find((outlet) => outlet.id === outlet_id); + }); + } + + back() { + this.location.back(); + } + + onScroll(event: any) { + if (event.detail.scrollTop > 100) { + this.show_top_bar = true; + } else { + this.show_top_bar = false; + } + } + + calculateDiscount(price: number, discount: number) { + return price - (price * discount / 100); + } + +} diff --git a/src/app/services/mall.service.ts b/src/app/services/mall.service.ts index 12e7b49..666a5fa 100644 --- a/src/app/services/mall.service.ts +++ b/src/app/services/mall.service.ts @@ -6,12 +6,28 @@ type CoOrdinates = { longitude: number, }; -type Outlet = { + +type MenuItem = { + id: string, + name: string, + image_url?: string, + description: string, + is_vegeterian: boolean, + wait_duration: number, + price: number, + discount: number, + rating: number, + tags: Array +}; + +export type Outlet = { id: string, image_url?: string, name: string, description: string, offers: Array, + tags: Array, + menu_items: Array, is_food_outlet: boolean, is_bookmarked: boolean, rating: number, @@ -50,6 +66,41 @@ export class MallService { image_url: 'https://images.markets.businessinsider.com/image/5a74835585cdd489228b47be-900/shutterstock643079686.jpg', name: 'McDonalds', description: 'Veg / Non-Veg Food Restaurant', + tags: ['dinner', 'spicy', 'breakfast', 'pork'], + menu_items: [{ + id: '0001', + name: 'McSpicy Paneer', + image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + is_vegeterian: true, + wait_duration: 10, + price: 90, + discount: 10, + rating: 4, + tags: ['burger', 'breakfast'] + }, { + id: '0002', + name: 'McAloo Tikki', + image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + is_vegeterian: false, + wait_duration: 13, + price: 120, + discount: 50, + rating: 4.3, + tags: ['spicy', 'dinner'] + }, { + id: '0003', + name: 'McPork', + image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + is_vegeterian: false, + wait_duration: 20, + price: 300, + discount: 5, + rating: 4.9, + tags: ['spicy', 'dinner', 'pork'] + }], offers: [{ name: 'McDonalds Offer', description: 'Get 25% offer on you first meal', @@ -64,6 +115,8 @@ export class MallService { name: 'Shopper\'s stop', description: 'Clothing store', offers: [], + tags: [], + menu_items: [], is_food_outlet: false, is_bookmarked: true, rating: 4.8, diff --git a/src/global.scss b/src/global.scss index 0f71054..5079b1b 100644 --- a/src/global.scss +++ b/src/global.scss @@ -183,7 +183,7 @@ header, h1, h2, h3, h4, h5 { h5 { margin: 0 0 0 10px; - color: var(--brand-grey); + color: var(--brand-dark-grey); font-size: 10px; }