Mall details partial UI

src/app/mall-details/mall-details.page.html

@@ -4,33 +4,33 @@
     <div class="header-bar" [ngClass]="{'active' : show_top_bar }">
         <div class="heading-holder">
             <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
-            <h3> {{ mall_details.name }} </h3>
+            <h3> {{ mall_details.mall.mall_name }} </h3>
         </div>
         <div class="stats-holder">
-            <div class="stat"> <ion-icon name="star"></ion-icon> {{ mall_details.rating }} </div>
-            <div class="stat"> <ion-icon name="pin"></ion-icon> {{ mall_details.distance }} km</div>
+            <div class="stat"> <ion-icon name="star"></ion-icon> {{ mall_details.mall.rating }} </div>
+            <div class="stat"> <ion-icon name="pin"></ion-icon> {{ mall_details.mall.mall_distance }} km</div>
         </div>
         <div class="utilities-buttons-holder">
-            <button [ngClass]="{'active' : mall_details.is_bookmarked }" (click)="toggleBookmark(mall_details)"> <ion-icon name="bookmark"></ion-icon> </button>
+            <button [ngClass]="{'active' : mall_details.mall.is_bookmarked }"> <ion-icon name="bookmark"></ion-icon> </button>
             <button> <ion-icon name="share"></ion-icon> </button>
-            <a target="_blank" href="https://maps.google.com/?q={{ mall_details.location.latitude }},{{ mall_details.location.longitude }}">
+            <a target="_blank" href="https://maps.google.com/?q={{ mall_details.latitude }},{{ mall_details.longitude }}">
                 <ion-icon name="navigate"></ion-icon>
             </a>
         </div>
     </div>
 
     <div class="upfold-holder">
-		<img [src]="mall_details.image_url">
+		<img [src]="mall_details.mall.image_url">
         <div class="icons-holder">
             <div>
                 <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
             </div>
             <div class="action-buttons-holder">
-                <button [ngClass]="{'active' : mall_details.is_bookmarked }" (click)="toggleBookmark(mall_details)">
+                <button [ngClass]="{'active' : mall_details.mall.is_bookmarked }">
                     <ion-icon name="bookmark"></ion-icon>
                 </button>
                 <button> <ion-icon name="share"></ion-icon> </button>
-				<a target="_blank" href="https://maps.google.com/?q={{ mall_details.location.latitude }},{{ mall_details.location.longitude }}">
+				<a target="_blank" href="https://maps.google.com/?q={{ mall_details.latitude }},{{ mall_details.longitude }}">
 	                <ion-icon name="navigate"></ion-icon>
 	            </a>
             </div>
@@ -38,12 +38,13 @@
     </div>
     <div class="card-holder">
         <div class="card">
-            <h3> {{ mall_details.name }} </h3>
+            <h3> {{ mall_details.mall.mall_name }} </h3>
+			<p> {{ mall_details.mall.mall_address }} </p>
             <div class="stats-holder">
-                <div class="stat"> <ion-icon name="star"></ion-icon> {{ mall_details.rating }} </div>
-                <div class="stat"> <ion-icon name="pin"></ion-icon> {{ mall_details.distance }} km</div>
+                <div class="stat"> <ion-icon name="star"></ion-icon> {{ mall_details.mall.rating }} </div>
+                <div class="stat"> <ion-icon name="pin"></ion-icon> {{ mall_details.mall.mall_distance }} km</div>
             </div>
-            <p> {{ mall_details.description }} </p>
+            <p> {{ mall_details.mall.description }} </p>
         </div>
     </div>
 
@@ -54,7 +55,7 @@
         (click)="selected_tab = 'shopping'"> SHOPS </button>
     </div>
 
-    <div class="results-utilities-holder">
+    <!-- <div class="results-utilities-holder">
         <h5 *ngIf="mall_details"> {{ mall_details.outlets.length }} OUTLETS </h5>
         <ion-button color="default" fill="clear" (click)="togglePopup()"> SORT / FILTER </ion-button>
     </div>
@@ -114,10 +115,10 @@
                 </div>
             </ion-label>
         </ion-item>
-    </ion-list>
+    </ion-list> -->
 
 
-    <div class="advertisement-slots">
+    <!-- <div class="advertisement-slots">
         <figure>
             <img src="https://static.couponspy.in/picture/coupon/89472.jpg">
         </figure>
@@ -137,7 +138,7 @@
         <figure>
             <img src="https://static.couponspy.in/picture/coupon/89472.jpg">
         </figure>
-    </div>
+    </div> -->
 
     <div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
         <header>

src/app/mall-details/mall-details.page.scss

@@ -172,9 +172,9 @@
             display: flex;
             justify-content: space-between;
             color: var(--brand-blue);
-            font-size: 10px;
+            font-size: 12px;
             font-weight: bold;
-            margin: 15px 0;
+            margin: 10px 0;
 
             span {
                 color: var(--brand-grey);

src/app/mall-details/mall-details.page.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MallService } from '../services/mall.service';
-import { IMall } from '../models/mall';
 import { Location } from '@angular/common';
 
 @Component({
@@ -10,43 +8,31 @@ import { Location } from '@angular/common';
     styleUrls: ['./mall-details.page.scss'],
 })
 export class MallDetailsPage implements OnInit {
-    mall_details: IMall;
+    mall_details: any;
     selected_tab: string = 'food';
     show_top_bar: boolean = false;
     show_sort_popup: boolean = false;
     selected_sort: string = null;
 
     constructor(
-        private mallService: MallService,
         private route: ActivatedRoute,
         private router: Router,
         private location: Location
     ) { }
 
     ngOnInit() {
-        let mall_id = this.route.snapshot.paramMap.get('mall_id');
-
-        this.mallService.getMallByID(mall_id).then((data: IMall) => {
-            this.mall_details = data;
-        });
-    }
-
-    refresh() {
-        let mall_id = this.route.snapshot.paramMap.get('mall_id');
-
-        this.mallService.getMallByID(mall_id).then((data: IMall) => {
-            this.mall_details = data;
-        });
+        this.mall_details = JSON.parse(this.route.snapshot.paramMap.get('mall'));
+		console.log(this.mall_details);
     }
 
     back() {
         this.location.back();
     }
 
-    toggleBookmark(mall_details: IMall) {
-        mall_details.is_bookmarked = !mall_details.is_bookmarked;
-		this.mallService.updateMall(mall_details);
-    }
+    // toggleBookmark(mall_details: IMall) {
+    //     mall_details.is_bookmarked = !mall_details.is_bookmarked;
+	// 	this.mallService.updateMall(mall_details);
+    // }
 
     onScroll(event: any) {
         if (event.detail.scrollTop > 100) {

src/app/malls/malls.page.html

@@ -33,7 +33,7 @@
     </div>
 
     <ion-list lines="none" class="result-list">
-        <ion-item *ngFor="let mallData of malls" (click)="showMallDetails(mall)">
+        <ion-item *ngFor="let mallData of malls" (click)="showMallDetails(mallData)">
             <img src="{{ mallData.mall.image_url }}" slot="start">
             <ion-label>
                 <h3> {{ mallData.mall.mall_name }}  <ion-icon name="bookmark" [ngClass]="{'active' : mallData.mall.is_bookmarked }"></ion-icon> </h3>

src/app/malls/malls.page.ts

@@ -31,10 +31,8 @@ export class MallsPage implements OnInit {
     }
 
 	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);
 		});