From cb901be1f1d9a5936ada7d3312458f3b8a3b18e0 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Sun, 26 Jan 2020 22:11:57 +0530 Subject: [PATCH] Fetch all malls data connection with UI Complete along with search and sort module connection --- src/app/malls/malls.page.html | 46 ++++++++++++++++++----------------- src/app/malls/malls.page.scss | 5 ++-- src/app/malls/malls.page.ts | 45 ++++++++++++++-------------------- 3 files changed, 44 insertions(+), 52 deletions(-) diff --git a/src/app/malls/malls.page.html b/src/app/malls/malls.page.html index e32b32d..a4de27c 100644 --- a/src/app/malls/malls.page.html +++ b/src/app/malls/malls.page.html @@ -3,8 +3,8 @@

Find malls near you

- - @@ -32,29 +32,29 @@
-
{{ malls.length }} MALLS
+
{{ tempMalls.length }} MALLS
SORT / FILTER
- - + + -

{{ mallData.mall.mall_name }}

-

{{ mallData.mall.description }}

+

{{ mall.mall_name }}

+

{{ mall.description }}

- Food Offers: {{ mallData.mall.offers_count }} + Food Offers: {{ mall.offers_count }}
- {{ mallData.mall.rating }} + {{ mall.rating }}
- {{ mallData.mall.mall_distance }} km + {{ mall.mall_distance }} km
@@ -63,7 +63,7 @@ + href="https://maps.google.com/?q=">
@@ -72,18 +72,20 @@ - +
diff --git a/src/app/malls/malls.page.scss b/src/app/malls/malls.page.scss index 29df184..d0a5f20 100644 --- a/src/app/malls/malls.page.scss +++ b/src/app/malls/malls.page.scss @@ -78,7 +78,6 @@ } .advertisement { - height: 150px; background-image: url('../../assets/custom/background-5.svg'); background-size: cover; background-repeat: no-repeat; @@ -91,7 +90,6 @@ .heading-holder { display: flex; width: 100%; - justify-content: space-between; align-items: center; img { @@ -99,7 +97,7 @@ background-color: white; height: 45px; border-radius: 50%; - padding: 10px; + padding: 1px; } header { @@ -119,6 +117,7 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + margin-top: 5px; } a { diff --git a/src/app/malls/malls.page.ts b/src/app/malls/malls.page.ts index 5e5c8d1..c106e44 100644 --- a/src/app/malls/malls.page.ts +++ b/src/app/malls/malls.page.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild,ElementRef } from '@angular/core'; import { MallService } from '../services/mall.service'; import { Router } from '@angular/router'; @@ -8,8 +8,9 @@ import { Router } from '@angular/router'; styleUrls: ['./malls.page.scss'], }) export class MallsPage implements OnInit { + @ViewChild('searchbar', null) searchElement: ElementRef; selected_tab: string = 'you'; - malls: any = []; + tempMalls: any = []; allMalls: any = []; show_sort_popup: boolean = false; showSearchBar: boolean = false; @@ -22,33 +23,23 @@ export class MallsPage implements OnInit { ) { } ngOnInit() { - this.fetchMallsByLocation(); this.storeAllMalls(); } - fetchMallsByLocation() { - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition((position) => { - // position.coords.latitude, position.coords.longitude; - this.mallService.mallsByLocation(28.6569551, 77.2122032).then((response) => { - this.malls = response; - console.log(this.malls); - }, (error) => { - console.log(error); - }); - }); - } else { - console.log("Could not fetch the malls"); - } - } + toggleSearchBar() { + this.showSearchBar = !this.showSearchBar; + setTimeout(()=>{ // this will make the execution after the above boolean has changed + this.searchElement.nativeElement.focus(); + }, 1); + } searchAllMalls() { if (this.searchTerm.trim().length > 0) { - this.malls = this.allMalls.filter((mall) => { + this.tempMalls = this.allMalls.filter((mall: any) => { return mall.mall_name.toLowerCase().includes(this.searchTerm.toLowerCase()); }); } else { - this.fetchMallsByLocation(); + this.tempMalls = JSON.parse(JSON.stringify(this.allMalls)); } } @@ -56,7 +47,7 @@ export class MallsPage implements OnInit { this.mallService.allMalls().then((response) => { localStorage.allMalls = JSON.stringify(response); this.allMalls = JSON.parse(localStorage.allMalls); - console.log(this.allMalls); + this.tempMalls = JSON.parse(localStorage.allMalls); }, (error) => { console.log(error) }); @@ -69,15 +60,15 @@ export class MallsPage implements OnInit { sortBy(type: string) { this.selected_sort = type; switch(this.selected_sort) { - case 'name': this.malls.sort(function(a, b){ - if(a.mall.mall_name < b.mall.mall_name) { return -1; } - if(a.mall.mall_name > b.mall.mall_name) { return 1; } + case 'name': this.tempMalls.sort(function(a: any, b: any){ + if(a.mall_name < b.mall_name) { return -1; } + if(a.mall_name > b.mall_name) { return 1; } return 0; }); break; - case 'rating': this.malls.sort(function(a, b){ - if(a.mall.rating < b.mall.rating) { return -1; } - if(a.mall.rating > b.mall.rating) { return 1; } + case 'rating': this.tempMalls.sort(function(a: any, b: any){ + if(a.rating < b.rating) { return -1; } + if(a.rating > b.rating) { return 1; } return 0; }).reverse(); break;