From 859ca310f036d9a6feaee316182dc98483060b99 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Wed, 23 Oct 2019 19:56:15 +0530 Subject: [PATCH] Bookmark UI / Connection completed --- src/app/bookmark/bookmark.page.html | 89 ++++++++++++++++++++++++----- src/app/bookmark/bookmark.page.scss | 70 ++++------------------- src/app/bookmark/bookmark.page.ts | 46 ++++++++++----- src/app/malls/malls.page.ts | 4 ++ src/app/mocks/malls.ts | 4 +- src/app/mocks/outlets.ts | 4 +- src/app/services/mall.service.ts | 20 +++++-- 7 files changed, 139 insertions(+), 98 deletions(-) diff --git a/src/app/bookmark/bookmark.page.html b/src/app/bookmark/bookmark.page.html index 8762ac0..6de9701 100644 --- a/src/app/bookmark/bookmark.page.html +++ b/src/app/bookmark/bookmark.page.html @@ -1,18 +1,79 @@ -
- -

Bookmarks

- -
- -
-
- - +
+
+ +

Bookmarks

+ +
+ + +
+ +
+
+
{{ bookmarked_malls }} MALLS
+
+ + + + + +

{{ mall.name }}

+

{{ mall.description }}

+
+
+ + Food Offers: {{ mall.offers.length }} +
+
+ + Shopping Offers: {{ mall.offers.length }} +
+
+ + + +
+ +
+
+
{{ bookmarked_outlets }} OUTLETS
+
+ + +
+ + + +

+ {{ outlet.name }} +
+ {{ outlet.rating }} +
+ +

+

+ {{ outlet.description }} + +

+
+
+ Food + Shopping + Offers: {{ outlet.offers.length }} +
+
+ + +
+ +
+ diff --git a/src/app/bookmark/bookmark.page.scss b/src/app/bookmark/bookmark.page.scss index 5addf38..ae3f27b 100644 --- a/src/app/bookmark/bookmark.page.scss +++ b/src/app/bookmark/bookmark.page.scss @@ -1,66 +1,16 @@ -.top-bar-holder { - background-image: url('../../assets/custom/background-5.svg'); - background-size: cover; - background-repeat: no-repeat; - background-position: left top; - padding-top: 80px; -} +@import '../mall-details/mall-details.page.scss'; .header-bar { - color: white; - display: flex; - padding: 20px; - align-items: center; - background-image: url('../../assets/custom/background-5.svg'); - background-size: cover; - background-repeat: no-repeat; - background-position: left top; - position: fixed; - left: 0; - top: 0; - z-index: 2; - width: 100%; - - h2 { - font-size: 20px; - margin: 0 auto 0 10px; - } - - button { - margin: 0; - border-radius: 50%; - color: var(--brand-blue); - width: 30px; - height: 30px; - background-color: white; - font-size: 14px; - - ion-icon[name="arrow-back"] { - font-size: 18px; - } - } + position: sticky; } -.tabs-holder { - width: 100%; - padding: 0 20px 20px; - overflow: scroll; - white-space: nowrap; - - button { - display: inline-block; - border-radius: 20px; - background-color: transparent; - color: white; - font-size: 10px; - padding: 5px 15px; - height: 30px; - margin-right: 10px; - font-weight: bold; +ion-list { + ion-item { + display: none; + margin: 10px auto; - &.active { - background-color: white; - color: var(--brand-blue); - } - } + &.show { + display: block; + } + } } diff --git a/src/app/bookmark/bookmark.page.ts b/src/app/bookmark/bookmark.page.ts index fb89a62..2c2aca3 100644 --- a/src/app/bookmark/bookmark.page.ts +++ b/src/app/bookmark/bookmark.page.ts @@ -1,9 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { Location } from '@angular/common'; -import { BookmarkService } from '../services/bookmark.service'; import { IMall } from '../models/mall'; -import { IOutlet } from '../models/outlet'; +import { MallService } from '../services/mall.service'; @Component({ selector: 'app-bookmark', @@ -12,32 +11,51 @@ import { IOutlet } from '../models/outlet'; }) export class BookmarkPage implements OnInit { selected_tab: string = 'malls'; - malls: Array = []; - outlets: Array = []; + malls: Array = []; + bookmarked_malls: number = 0; + bookmarked_outlets: number = 0; constructor( private router: Router, private location: Location, - private bookmarkService: BookmarkService + private mallService: MallService, ) { } ngOnInit() { } ionViewDidEnter() { - this.bookmarkService.getMallBookmarks().then((data: Array) => { - this.malls = data; - console.log(this.malls); - }); - - this.bookmarkService.getOutletBookmarks().then((data: Array) => { - this.outlets = data; - console.log(this.outlets); - }); + this.bookmarked_outlets = 0; + + this.mallService.getAllMalls().then((data: Array) => { + this.malls = data; + this.bookmarked_malls = this.malls.filter((mall => { + return mall.is_bookmarked; + })).length; + + let i: number, j: number; + + for (i = 0; i < this.malls.length; i += 1) { + for (j = 0; j < this.malls[i].outlets.length; j += 1) { + if (this.malls[i].outlets[j].is_bookmarked) { + this.bookmarked_outlets += 1; + } + } + } + + }); } back() { this.location.back(); } + showMallDetails(mall: IMall) { + this.router.navigate(['/mall-details', { mall_id: mall.id }]); + } + + 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/malls/malls.page.ts b/src/app/malls/malls.page.ts index fdfa646..1f2d742 100644 --- a/src/app/malls/malls.page.ts +++ b/src/app/malls/malls.page.ts @@ -54,4 +54,8 @@ export class MallsPage implements OnInit { this.show_sort_popup = !this.show_sort_popup; } + 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/mocks/malls.ts b/src/app/mocks/malls.ts index 9b828d7..99b12a3 100644 --- a/src/app/mocks/malls.ts +++ b/src/app/mocks/malls.ts @@ -5,7 +5,7 @@ export const MALLS: Mall[] = [new Mall({ id: '0001', name: 'Gopalan Arcade Mall', address: 'Mysore Road, Bangalore', - is_bookmarked: false, + is_bookmarked: true, is_archived: false, image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg', description: '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.', @@ -37,7 +37,7 @@ export const MALLS: Mall[] = [new Mall({ id: '0003', name: 'Gopalan Mall', address: 'Mysore Road, Bangalore', - is_bookmarked: false, + is_bookmarked: true, is_archived: false, image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg', description: '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.', diff --git a/src/app/mocks/outlets.ts b/src/app/mocks/outlets.ts index 4ffc75e..77fafa6 100644 --- a/src/app/mocks/outlets.ts +++ b/src/app/mocks/outlets.ts @@ -11,7 +11,7 @@ export const OUTLETS: Outlet[] = [new Outlet({ menu_items: MENU_ITEMS_1.map((menu_item) => menu_item.id), offers: OFFERS.map((offer) => offer.id), outlet_type: OutletType.FOOD, - is_bookmarked: false, + is_bookmarked: true, rating: 3.5, }), new Outlet({ id: '0002', @@ -22,7 +22,7 @@ export const OUTLETS: Outlet[] = [new Outlet({ tags: [], menu_items: [], outlet_type: OutletType.SHOP, - is_bookmarked: true, + is_bookmarked: false, rating: 4.8, }), new Outlet({ id: '0003', diff --git a/src/app/services/mall.service.ts b/src/app/services/mall.service.ts index 5c54d7c..218dc15 100644 --- a/src/app/services/mall.service.ts +++ b/src/app/services/mall.service.ts @@ -8,12 +8,14 @@ import { OutletService } from './outlet.service'; providedIn: 'root' }) export class MallService { - malls: Array; + malls: Array = []; constructor( private offerService: OfferService, private outletService: OutletService - ) { } + ) { + this.fetchMalls(); + } private getDenormalizedMall = async (mall: Mall) => { const offers = await Promise.all(mall.offers.map(offer_id => this.offerService.getOfferByID(offer_id))); @@ -27,17 +29,23 @@ export class MallService { } public async getAllMalls() { - this.malls = await Promise.all(MALLS.map(this.getDenormalizedMall)); return this.malls; } - public async getMallByID(id: string) { + private async fetchMalls() { this.malls = await Promise.all(MALLS.map(this.getDenormalizedMall)); - return this.malls.find((mall) => mall.id === id); + } + + public async getMallByID(id: string) { + if (this.malls.length <= 0) { + await this.fetchMalls(); + return this.malls.find((mall) => mall.id === id); + } else { + return this.malls.find((mall) => mall.id === id); + } } async updateMall(data: IMall) { - this.malls = await Promise.all(MALLS.map(this.getDenormalizedMall)); for (let i = 0; i < this.malls.length; i += 1) { if (data.id === this.malls[i].id) { this.malls[i] = data;