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

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Location } from '@angular/common';
import { MallService } from '../services/mall.service';

@Component({
    selector: 'app-mall-details',
    templateUrl: './mall-details.page.html',
    styleUrls: ['./mall-details.page.scss'],
})
export class MallDetailsPage implements OnInit {
    mallDetails: any;
    selected_tab: string = 'food';
    show_top_bar: boolean = false;
    show_sort_popup: boolean = false;
    selected_sort: string = null;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private location: Location,
        private mallService: MallService
    ) { }

    ngOnInit() {
        this.mallDetails = JSON.parse(this.route.snapshot.paramMap.get('mall'));
    }

    toggleOutletBookmark(outlet) {
        outlet.is_bookmarked = !outlet.is_bookmarked;
        this.mallService.updateOutlet(outlet);
    }

    toggleMallBookmark() {
        this.mallDetails.mall.is_bookmarked = !this.mallDetails.mall.is_bookmarked;
        console.log(this.mallDetails);
        this.mallService.updateMallData(this.mallDetails);
    }

    back() {
        this.location.back();
    }

    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);
        }
    }


    shareOutletDetails(outlet) {
        if (window.navigator && window.navigator['share']) {
            const shareData = {
                title: this.mallDetails.mall.mall_name + ',' + outlet.outlet_name,
                text: outlet.description,
                url: 'https://maps.google.com/?q=' + this.mallDetails.latitude + ',' + this.mallDetails.longitude
            }

            window.navigator['share'](shareData);
        }
    }

    onScroll(event: any) {
        if (event.detail.scrollTop > 100) {
            this.show_top_bar = true;
        } else {
            this.show_top_bar = false;
        }
    }

    outletDetails(outlet: any) {
        this.router.navigate(['/outlet-details', {
			outlet: JSON.stringify(outlet),
            mallId: this.mallDetails.mall.mall_id,
            mallData: JSON.stringify({
                title: this.mallDetails.mall.mall_name,
                text: this.mallDetails.mall.description,
                url: 'https://maps.google.com/?q=' + this.mallDetails.latitude + ',' + this.mallDetails.longitude
            })
		}]);
    }

    sortBy(type: string) {
        this.selected_sort = type;
        switch(this.selected_sort) {
            case 'name': this.mallDetails.mall.outlet.sort(function(a: any, b: any){
                if(a.outlet_name < b.outlet_name) { return -1; }
                if(a.outlet_name > b.outlet_name) { return 1; }
                return 0;
            });
            break;
            case 'rating': this.mallDetails.mall.outlet.sort(function(a: any, b: any){
                if(a.rating < b.rating) { return -1; }
                if(a.rating > b.rating) { return 1; }
                return 0;
            }).reverse();
            break;
        }
    }

    togglePopup() {
        this.show_sort_popup = !this.show_sort_popup;
    }

}