Get Malls by Location and malls listing complete

src/app/malls/malls.page.html

@@ -32,29 +32,25 @@
         <ion-button color="default" fill="clear" (click)="togglePopup()"> SORT / FILTER </ion-button>
     </div>
 
-    <!-- <ion-list lines="none" class="result-list">
-        <ion-item *ngFor="let mall of malls" (click)="showMallDetails(mall)">
-            <img src="{{ mall.image_url }}" slot="start">
+    <ion-list lines="none" class="result-list">
+        <ion-item *ngFor="let mallData of malls" (click)="showMallDetails(mall)">
+            <img src="{{ mallData.mall.image_url }}" slot="start">
             <ion-label>
-                <h3> {{ mall.name }}  <ion-icon name="bookmark" [ngClass]="{'active' : mall.is_bookmarked }"></ion-icon> </h3>
-                <p class="description"> {{ mall.description }} </p>
+                <h3> {{ mallData.mall.mall_name }}  <ion-icon name="bookmark" [ngClass]="{'active' : mallData.mall.is_bookmarked }"></ion-icon> </h3>
+                <p class="description"> {{ mallData.mall.description }} </p>
                 <div class="offers-holder">
                     <div class="offer">
                         <ion-icon src="assets/custom/restaurant.svg"></ion-icon>
-						Food Offers: <strong> {{ mall.offers.length }}  </strong>
-                    </div>
-					<div class="offer">
-                        <ion-icon src="assets/custom/shopping-purse-icon.svg"></ion-icon>
-						Shopping Offers: <strong> {{ mall.offers.length }}  </strong>
+						Food Offers: <strong> {{ mallData.mall.offers_count }}  </strong>
                     </div>
                 </div>
                 <div class="utilities-holder">
                     <div class="container">
                         <div class="utility">
-                            <ion-icon name="star"></ion-icon> {{ mall.rating }}
+                            <ion-icon name="star"></ion-icon> {{ mallData.mall.rating }}
                         </div>
                         <div class="utility">
-                            <ion-icon name="pin"></ion-icon> {{ mall.distance }} km
+                            <ion-icon name="pin"></ion-icon> {{ mallData.mall.mall_distance }} km
                         </div>
                     </div>
 
@@ -63,16 +59,14 @@
                             <ion-icon name="share"></ion-icon>
                         </button>
                         <a class="utility-button" target="_blank"
-                        href="https://maps.google.com/?q={{ mall.location.latitude }},{{ mall.location.longitude }}">
+                        href="https://maps.google.com/?q={{ mallData.latitude }},{{ mallData.longitude }}">
                             <ion-icon name="navigate"></ion-icon>
                         </a>
                     </div>
                 </div>
             </ion-label>
         </ion-item>
-    </ion-list> -->
-
-    <!-- Ad in between results -->
+    </ion-list>
 
     <!-- <section class="advertisement">
         <div class="heading-holder">
@@ -87,7 +81,7 @@
         <a> Know More </a>
     </section> -->
 
-    <!-- <div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
+    <div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
         <header>
             Sort / Filter <button (click)="togglePopup()"> Done </button>
         </header>
@@ -103,12 +97,7 @@
                 <div class="icon-holder"> <ion-icon name="star"></ion-icon> </div>
                 <span> RATING </span>
             </button>
-            <button [ngClass]="{'active' : selected_sort === 'time'}"
-            (click)="sortBy('time')">
-                <div class="icon-holder"> <ion-icon name="time"></ion-icon> </div>
-                <span> TIME </span>
-            </button>
         </div>
-    </div> -->
+    </div>
 
 </ion-content>

src/app/malls/malls.page.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { MallService } from '../services/mall.service';
-import { IMall } from '../models/mall';
 import { Router } from '@angular/router';
 
 @Component({
@@ -10,7 +9,7 @@ import { Router } from '@angular/router';
 })
 export class MallsPage implements OnInit {
     selected_tab: string = 'you';
-    malls: Array<IMall>;
+    malls: any = [];
     show_sort_popup: boolean = false;
     selected_sort: string = null;
 
@@ -20,33 +19,43 @@ export class MallsPage implements OnInit {
     ) { }
 
     ngOnInit() {
-		this.mallService.mallsByLocation(10.998264, 77.032465).then((response) => {
-			console.log(response);
-		}, (error) => {
-			console.log(error);
-		});
+		if (navigator.geolocation) {
+			navigator.geolocation.getCurrentPosition((position) => {
+				this.fetchMallsByLocation(position.coords.latitude, position.coords.longitude);
+			});
+		}
     }
 
     ionViewDidEnter() {
 
     }
 
-    showMallDetails(mall: IMall) {
-        this.router.navigate(['/mall-details', { mall_id: mall.id }]);
+	fetchMallsByLocation(lat: number, lng: number) {
+		console.log(lat + ' ' + lng);
+		this.mallService.mallsByLocation(28.6569551, 77.2122032).then((response) => {
+			this.malls = response;
+			console.log(this.malls);
+		}, (error) => {
+			console.log(error);
+		});
+	}
+
+    showMallDetails(mall: any) {
+        this.router.navigate(['/mall-details', { mall: JSON.stringify(mall) }]);
     }
 
     sortBy(type: string) {
         this.selected_sort = type;
         switch(this.selected_sort) {
             case 'name': this.malls.sort(function(a, b){
-                if(a.name < b.name) { return -1; }
-                if(a.name > b.name) { return 1; }
+                if(a.mall.mall_name < b.mall.mall_name) { return -1; }
+                if(a.mall.mall_name > b.mall.mall_name) { return 1; }
                 return 0;
             });
             break;
             case 'rating': this.malls.sort(function(a, b){
-                if(a.rating < b.rating) { return -1; }
-                if(a.rating > b.rating) { return 1; }
+                if(a.mall.rating < b.mall.rating) { return -1; }
+                if(a.mall.rating > b.mall.rating) { return 1; }
                 return 0;
             }).reverse();
             break;
@@ -57,8 +66,4 @@ 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 }]);
-    }
-
 }

src/app/mocks/url.ts

@@ -1,3 +1,3 @@
-export const URL: string = 'http://13.126.110.70:8080/mall-aggregator/';
+export const URL: string = 'http://13.126.110.70:8080/mall-aggregator';
 
 export const TOKEN: string = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';

src/app/services/mall.service.ts

@@ -24,12 +24,13 @@ export class MallService {
 	async mallsByLocation(latitude: number, longitude: number) {
 		const httpOptions = {
 			headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
 				'Content-Type': 'application/json',
 				'Authorization': 'Token ' + TOKEN
 			})
 		};
 
-		return await this.http.get(URL + '/api/maioraservice/mall/v1/latitude/' + latitude + '/longitude/' + longitude + '/', httpOptions).toPromise();
+		return await this.http.get('http://13.126.110.70:8080/mall-aggregator/api/maioraservice/mall/v1/latitude/28.6569551/longitude/77.2122032/check/', httpOptions).toPromise();
 	}
 
     private getDenormalizedMall = async (mall: Mall) => {

src/global.scss

@@ -31,6 +31,7 @@ p {
 	font-family: 'Roboto', sans-serif;
 	text-transform: none;
 	outline: none;
+	font-weight: 500;
 }
 h1,
 h2,
@@ -185,7 +186,7 @@ figure {
 			display: flex;
 			padding: 15px;
 			flex-wrap: wrap;
-			justify-content: space-between;
+			justify-content: space-around;
 			position: relative;
 			button {
 				background-color: transparent;