Book mark page API connection and UI

src/app/bookmark/bookmark.page.html

@@ -3,8 +3,54 @@
     <div class="header-bar">
         <div class="heading-holder">
             <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
-            <h3> Bookmarks </h3>
+            <h3> Bookmarked Malls / Outlets </h3>
         </div>
     </div>
 
+    <div class="results-utilities-holder">
+        <h5 *ngIf="tempMalls"> {{ tempMalls.length }} MALLS </h5>
+    </div>
+
+    <ion-list lines="none" class="result-list">
+        <ng-container *ngFor="let mallData of tempMalls;">
+            <ion-item *ngIf="mallData.mall.outlet && mallData.mall.outlet.length > 0">
+                <img src="{{ mallData.mall.image_url }}" slot="start">
+                <ion-label>
+                    <h3> 
+                        <span (click)="showMallDetails(mallData)"> {{ mallData.mall.mall_name }} </span>  
+                        <ion-icon (click)="toggleMallBookmark(mallData)" name="bookmark" 
+                        [ngClass]="{'active' : mallData.mall.is_bookmarked }"></ion-icon> 
+                    </h3>
+                    <p class="description" (click)="showMallDetails(mallData)"> {{ mallData.mall.description }} </p>
+                    <div class="offers-holder">
+                        <div class="offer">
+                            <ion-icon src="assets/custom/restaurant.svg"></ion-icon>
+                            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> {{ mallData.mall.rating }}
+                            </div>
+                            <div class="utility">
+                                <ion-icon name="pin"></ion-icon> {{ mallData.mall.mall_distance }} km
+                            </div>
+                        </div>
+    
+                        <div class="container">
+                            <button class="utility-button" (click)="shareMallDetails(mallData)">
+                                <ion-icon name="share"></ion-icon>
+                            </button>
+                            <a class="utility-button" target="_blank"
+                            href="https://maps.google.com/?q={{ mallData.latitude }},{{ mallData.longitude }}">
+                                <ion-icon name="navigate"></ion-icon>
+                            </a>
+                        </div>
+                    </div>
+                </ion-label>
+            </ion-item>
+        </ng-container>        
+    </ion-list>
+
 </ion-content>

src/app/bookmark/bookmark.page.scss

@@ -45,4 +45,8 @@
         margin-left: 10px;
         font-weight: 600;
     }
+}
+
+.results-utilities-holder {
+    margin: 15px 0px 5px 0px;
 }

src/app/bookmark/bookmark.page.ts

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Location } from '@angular/common';
 import { MallService } from '../services/mall.service';
+import { ToastService } from '../services/toast.service';
+import { LoadingController } from '@ionic/angular';
 
 @Component({
 	selector: 'app-bookmark',
@@ -9,20 +11,62 @@ import { MallService } from '../services/mall.service';
 	styleUrls: ['./bookmark.page.scss'],
 })
 export class BookmarkPage implements OnInit {
-
-
+    tempMalls: any = [];
+    loader: any;
+    
 	constructor(
 		private router: Router,
         private location: Location,
-        private mallService: MallService
+        private mallService: MallService,
+        private toastService: ToastService,
+        public loadingController: LoadingController,
 	) { }
 
 	ngOnInit() {
-        // this.mallService.getBookmarks().then((data) => console.log(data));
-	}
+        
+    }
+
+    async presentLoading() {
+        this.loader = await this.loadingController.create({
+          message: 'Please wait...',
+          spinner: 'dots',
+          mode: 'ios'
+        });
+        await this.loader.present();
+    }
+
+    ionViewDidEnter() {
+        this.presentLoading();
+        this.mallService.getBookmarks().then((data) => {
+            this.tempMalls = data;
+            this.loader ? this.loader.dismiss() : null;
+        }, () => {
+            this.loader ? this.loader.dismiss() : null;
+            this.toastService.presentToast("Failed to get malls / outlets bookmarked");
+        });
+    }
+
+    shareMallDetails(mallData) {
+        if (window.navigator && window.navigator['share']) {
+            const shareData = {
+                title: mallData.mall.mall_name,
+                text: mallData.mall.description,
+                url: 'https://maps.google.com/?q=' + mallData.latitude + ',' + mallData.longitude
+            }
+
+            window.navigator['share'](shareData);
+        }
+    }
+    
+    toggleMallBookmark(mallData: any) {
+        mallData.mall.is_bookmarked = !mallData.mall.is_bookmarked;
+        this.mallService.updateMallData(mallData);
+    }
+
+    showMallDetails(mall: any) {
+        this.router.navigate(['/mall-details', { mall: JSON.stringify(mall) }]);
+    }
 
-	ionViewDidEnter() {
-	}
 
 	back() {
 		this.location.back();

src/app/cart/cart.page.html

@@ -75,7 +75,7 @@
         </ul>
 
         <div class="total-price">
-            <span> Total </span> <span> &#8377;  {{ (getTotalCartAmount() + 20) + (getTotalCartAmount() + 20) * (18 / 100) }} </span>
+            <span> Total </span> <span> &#8377;  {{ ( getTotalCartAmount() + (getTotalCartAmount() * (18 / 100)) ) + 20 }} </span>
         </div>
     </div>
 

src/app/cart/cart.page.ts

@@ -280,7 +280,7 @@ export class CartPage implements OnInit {
             "name": this.userInfo.name,
             "email": this.userInfo.email,
             "contact": this.userInfo.mobile,
-            "total_amt": ((this.getTotalCartAmount() + 20) + (this.getTotalCartAmount() + 20) * (18 / 100)),
+            "total_amt": (this.getTotalCartAmount() + (this.getTotalCartAmount() * (18 / 100)) + 20),
             "description": "This payment is towards testing Invoice feature",
             "receipt": "#asdsdsdf",
             "email_notify": 1

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

@@ -30,7 +30,7 @@ export class MallDetailsPage implements OnInit {
 
     toggleOutletBookmark(outlet) {
         outlet.mall = {
-            mall_id: this.mallDetails.id
+            mall_id: this.mallDetails.mall.mall_id
         };
         outlet.is_bookmarked = !outlet.is_bookmarked;
         this.mallService.updateOutlet(outlet);
@@ -38,7 +38,6 @@ export class MallDetailsPage implements OnInit {
 
     toggleMallBookmark() {
         this.mallDetails.mall.is_bookmarked = !this.mallDetails.mall.is_bookmarked;
-        console.log(this.mallDetails);
         this.mallService.updateMallData(this.mallDetails);
     }
 

src/app/malls/malls.page.ts

@@ -51,7 +51,6 @@ export class MallsPage implements OnInit {
     
     getMallsByFoodType(type: string) {
         this.selectedFoodType = type;
-        console.log(this.tempMalls);
         this.mallService.mallsByTypes(type).then((mallsByTypes: Array<any>) => {
             let malls: any = [];
             if (mallsByTypes.length > 0) {

src/app/services/mall.service.ts

@@ -84,6 +84,6 @@ export class MallService {
 			})
 		};
 
-		return await this.http.get(URL + '/api/maioraservice/outlet/v1/is_bookmarked/true/', httpOptions).toPromise();
+		return await this.http.get(URL + '/api/maioraservice/outlet/v1/is_bookmarked/1/', httpOptions).toPromise();
     }
 }