From 51ea2916d0900727229c38f543af0bfa6d6d07dc Mon Sep 17 00:00:00 2001 From: kj1352 Date: Wed, 23 Oct 2019 12:45:51 +0530 Subject: [PATCH] Bookmark page --- src/app/app-routing.module.ts | 1 + src/app/app.component.html | 4 +- src/app/app.component.scss | 8 ++-- src/app/bookmark/bookmark.module.ts | 26 ++++++++++ src/app/bookmark/bookmark.page.html | 18 +++++++ src/app/bookmark/bookmark.page.scss | 66 ++++++++++++++++++++++++++ src/app/bookmark/bookmark.page.spec.ts | 27 +++++++++++ src/app/bookmark/bookmark.page.ts | 43 +++++++++++++++++ src/app/mocks/malls.ts | 2 +- 9 files changed, 188 insertions(+), 7 deletions(-) create mode 100644 src/app/bookmark/bookmark.module.ts create mode 100644 src/app/bookmark/bookmark.page.html create mode 100644 src/app/bookmark/bookmark.page.scss create mode 100644 src/app/bookmark/bookmark.page.spec.ts create mode 100644 src/app/bookmark/bookmark.page.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a6de6eb..65555e8 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -10,6 +10,7 @@ const routes: Routes = [ { path: 'outlet-details', loadChildren: './outlet-details/outlet-details.module#OutletDetailsPageModule' }, { path: 'cart', loadChildren: './cart/cart.module#CartPageModule' }, { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' }, + { path: 'bookmark', loadChildren: './bookmark/bookmark.module#BookmarkPageModule' }, ]; @NgModule({ diff --git a/src/app/app.component.html b/src/app/app.component.html index 9523830..52424c0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -17,9 +17,9 @@ HOME - +

Bookmarks

+ + + +
+
+ + +
+
+ diff --git a/src/app/bookmark/bookmark.page.scss b/src/app/bookmark/bookmark.page.scss new file mode 100644 index 0000000..5addf38 --- /dev/null +++ b/src/app/bookmark/bookmark.page.scss @@ -0,0 +1,66 @@ +.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; +} + +.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; + } + } +} + +.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; + + &.active { + background-color: white; + color: var(--brand-blue); + } + } +} diff --git a/src/app/bookmark/bookmark.page.spec.ts b/src/app/bookmark/bookmark.page.spec.ts new file mode 100644 index 0000000..37c241e --- /dev/null +++ b/src/app/bookmark/bookmark.page.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BookmarkPage } from './bookmark.page'; + +describe('BookmarkPage', () => { + let component: BookmarkPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BookmarkPage ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BookmarkPage); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/bookmark/bookmark.page.ts b/src/app/bookmark/bookmark.page.ts new file mode 100644 index 0000000..fb89a62 --- /dev/null +++ b/src/app/bookmark/bookmark.page.ts @@ -0,0 +1,43 @@ +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'; + +@Component({ + selector: 'app-bookmark', + templateUrl: './bookmark.page.html', + styleUrls: ['./bookmark.page.scss'], +}) +export class BookmarkPage implements OnInit { + selected_tab: string = 'malls'; + malls: Array = []; + outlets: Array = []; + + constructor( + private router: Router, + private location: Location, + private bookmarkService: BookmarkService + ) { } + + 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); + }); + } + + back() { + this.location.back(); + } + +} diff --git a/src/app/mocks/malls.ts b/src/app/mocks/malls.ts index b6d12cb..9b828d7 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: true, + is_bookmarked: false, 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.',