Food outlets page

src/app/app.component.html

@@ -1,6 +1,6 @@
 <ion-app>
     <div class="overlay" [ngClass]="{ 'active' : show_menu }"></div>
-    
+
     <ion-router-outlet></ion-router-outlet>
     <!-- Humburger Menu Starts from here -->
 
@@ -13,7 +13,7 @@
     </div>
 
     <div class="menu-items-holder" [ngClass]="{'active' : show_menu }">
-        <button>
+        <button (click)="navigateTo('malls')">
             <ion-icon src="assets/custom/001-house.svg"></ion-icon>
         </button>
         <button>

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-
+import { Router } from '@angular/router';
 import { Platform } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
@@ -11,11 +11,12 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 })
 export class AppComponent {
     show_menu = false;
-    
+
     constructor(
         private platform: Platform,
         private splashScreen: SplashScreen,
-        private statusBar: StatusBar
+        private statusBar: StatusBar,
+        private router: Router
     ) {
         this.initializeApp();
     }
@@ -26,4 +27,9 @@ export class AppComponent {
             this.splashScreen.hide();
         });
     }
+
+    navigateTo(url: string) {
+        this.router.navigate(['/' + url]);
+        this.show_menu = false;
+    }
 }

src/app/login/login.page.ts

@@ -18,6 +18,10 @@ export class LoginPage implements OnInit {
         private router: Router
     ) { }
 
+    ionViewDidEnter() {
+        document.querySelector('.menu-icon-holder').classList.add('hide');
+    }
+
     ngOnInit() {
     }
 
@@ -27,6 +31,7 @@ export class LoginPage implements OnInit {
 
     login() {
         this.router.navigate(['/malls']);
+        document.querySelector('.menu-icon-holder').classList.remove('hide');
     }
 
 }

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

@@ -1,5 +1,5 @@
 .header-bar {
-    background-image: url('../../assets/custom/background-2.svg');
+    background-image: url('../../assets/custom/background-5.svg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: left top;

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

@@ -42,7 +42,6 @@ export class MallDetailsPage implements OnInit {
 
     toggleBookmark(mall_details: Mall) {
         mall_details.is_bookmarked = !mall_details.is_bookmarked;
-        this.mallService.updateMallDetails(mall_details).then(() => this.refresh());
     }
 
     onScroll(event: any) {

src/app/malls/malls.page.html

@@ -69,41 +69,6 @@
         <a> Know More </a>
     </section>
 
-    <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-label>
-                <h3> {{ mall.name }}  <ion-icon name="bookmark" [ngClass]="{'active' : mall.is_bookmarked }"></ion-icon> </h3>
-                <p class="description"> {{ mall.description }} </p>
-                <div class="offers-holder">
-                    <div class="offer" *ngFor="let offer of mall.offer_collection">
-                        {{ offer.name }}: <strong> {{ offer.offers.length }}  </strong>
-                    </div>
-                </div>
-                <div class="utilities-holder">
-                    <div class="container">
-                        <div class="utility">
-                            <ion-icon name="star"></ion-icon> {{ mall.rating }}
-                        </div>
-                        <div class="utility">
-                            <ion-icon name="pin"></ion-icon> {{ mall.distance }} km
-                        </div>
-                    </div>
-
-                    <div class="container">
-                        <button class="utility-button">
-                            <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 }}">
-                            <ion-icon name="navigate"></ion-icon>
-                        </a>
-                    </div>
-                </div>
-            </ion-label>
-        </ion-item>
-    </ion-list>
-
     <div class="results-utilities-holder no-padding">
         <h5> Food Types </h5>
         <ion-button color="default" fill="clear"> SEE ALL </ion-button>
@@ -151,4 +116,21 @@
         </ion-item>
     </ion-list>
 
+    <!-- <div class="sort-filter-holder">
+        <header>
+            Sort / Filter <button> Done </button>
+        </header>
+
+        <div class="sort-buttons-holder">
+            <button>
+                <div class="icon-holder"> A-Z </div>
+                <span> Name </span>
+            </button>
+            <button>
+                <div class="icon-holder"> A-Z </div>
+                <span> Name </span>
+            </button>
+        </div>
+    </div> -->
+
 </ion-content>

src/app/malls/malls.page.scss

@@ -1,5 +1,5 @@
 .top-bar-holder {
-    background-image: url('../../assets/custom/background-2.svg');
+    background-image: url('../../assets/custom/background-5.svg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: left top;
@@ -12,7 +12,7 @@
     justify-content: space-between;
     padding: 20px;
     align-items: center;
-    background-image: url('../../assets/custom/background-2.svg');
+    background-image: url('../../assets/custom/background-5.svg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: left top;
@@ -64,7 +64,7 @@
 
 .advertisement {
     height: 150px;
-    background-image: url('../../assets/custom/background-2.svg');
+    background-image: url('../../assets/custom/background-5.svg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: left center;

src/app/malls/malls.page.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { MallService, Mall } from '../services/mall.service';
-import { MallDetailsPage } from '../mall-details/mall-details.page';
 import { Router } from '@angular/router';
 
 @Component({

src/app/onboarding/onboarding.page.scss

@@ -258,7 +258,7 @@ ion-slide {
 }
 
 .page7 {
-    background-image: url('../../assets/custom/background-2.svg');
+    background-image: url('../../assets/custom/background-5.svg');
     background-size: cover;
     background-repeat: no-repeat;
 

src/app/onboarding/onboarding.page.ts

@@ -22,6 +22,10 @@ export class OnboardingPage implements OnInit {
         private router: Router
     ) { }
 
+    ionViewDidEnter() {
+        document.querySelector('.menu-icon-holder').classList.add('hide');
+    }
+
     ngOnInit() {
         this.slideOpts = {
             initialSlide: 0,
@@ -73,6 +77,7 @@ export class OnboardingPage implements OnInit {
 
     enterMalls() {
         this.router.navigate(['/malls']);
+        document.querySelector('.menu-icon-holder').classList.remove('hide');
     }
 
 }

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

@@ -7,7 +7,7 @@
         <div class="stats-holder">
             <div class="stat"> <ion-icon name="star"></ion-icon> {{ outlet_details.rating }} </div>
         </div>
-        <div class="utilities-buttons-holder">
+        <div class="utilities-buttons-holder" (click)="toggleBookmark()">
             <button [ngClass]="{'active' : outlet_details.is_bookmarked }"> <ion-icon name="bookmark"></ion-icon> </button>
             <button> <ion-icon name="share"></ion-icon> </button>
         </div>
@@ -20,7 +20,7 @@
                 <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
             </div>
             <div>
-                <button [ngClass]="{'active' : outlet_details.is_bookmarked }">
+                <button [ngClass]="{'active' : outlet_details.is_bookmarked }" (click)="toggleBookmark()">
                     <ion-icon name="bookmark"></ion-icon>
                 </button>
                 <button> <ion-icon name="share"></ion-icon> </button>
@@ -46,10 +46,11 @@
     <div class="menu-card-holder">
         <header>
             <h3> MENU </h3>
-            <div class="toggle"> VEG MENU <ion-toggle [(ngModel)]="show_only_veg"></ion-toggle> </div>
+            <div class="toggle" (click)="show_only_veg = !show_only_veg"> VEG MENU <ion-toggle [(ngModel)]="show_only_veg"></ion-toggle> </div>
         </header>
         <div class="tags-holder">
-            <button [ngClass]="{'active' : selected_tag === tag}" (click)="selected_tag = tag" *ngFor="let tag of outlet_details.tags"> {{ tag }} </button>
+            <button [ngClass]="{'active' : selected_tag === tag}"
+            (click)="filterByTag(tag)" *ngFor="let tag of outlet_details.tags"> {{ tag }} </button>
         </div>
 
         <div class="results-utilities-holder">
@@ -59,8 +60,9 @@
 
         <div class="items-holder">
 
-            <div class="item" *ngFor="let item of outlet_details.menu_items">
-                <div class="rating"> {{ item.rating }} </div>
+            <div class="item" *ngFor="let item of temp_outlet_details.menu_items"
+            [ngClass]="{'hide' : !item.is_vegeterian && show_only_veg }">
+                <div class="rating"> <ion-icon name="star"></ion-icon> {{ item.rating }} </div>
                 <img src="{{ item.image_url }}">
                 <h5> {{ item.name }} </h5>
                 <p> {{ item.description }} </p>
@@ -69,14 +71,19 @@
                     <span *ngIf="!item.is_vegeterian"> Non-Veg Meals </span>
                     <span *ngIf="item.is_vegeterian"> Veg Meals </span>
                 </div>
-                <div class="duration"> {{ item.wait_duration }} Minutes </div>
+                <div class="duration"> <ion-icon src="assets/custom/cook.svg"></ion-icon> {{ item.wait_duration }} Minutes </div>
                 <div class="price">
-                    <span class="discounted"> {{ calculateDiscount(item.price, item.discount) }} </span>
-                    <span class="actual-price"> {{ item.price }} </span>
+                    <span class="discounted"> @ Rs {{ calculateDiscount(item.price, item.discount) }}/-* </span>
+                    <span class="actual-price"> Rs {{ item.price }}/- </span>
                 </div>
+                <button class="cart-button"> Add to Cart </button>
             </div>
 
         </div>
     </div>
 
+    <div class="advertisement">
+        <img src="https://d2z1w4aiblvrwu.cloudfront.net/ad/IO1u/mcdonalds-2-mcdouble-and-fries-too-good-to-last-large-6.jpg" alt="">
+    </div>
+
 </ion-content>

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

@@ -1,5 +1,5 @@
 .header-bar {
-    background-image: url('../../assets/custom/background-2.svg');
+    background-image: url('../../assets/custom/background-5.svg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: left top;
@@ -201,9 +201,11 @@
         align-items: center;
 
         ion-toggle {
+            pointer-events: none;
             --handle-background: var(--brand-blue);
             --handle-background-checked: var(--brand-blue);
             transform: scale(0.8);
+            z-index: 0;
         }
     }
 
@@ -231,5 +233,161 @@
 
     .results-utilities-holder {
         margin-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+}
+
+.items-holder {
+    display: flex;
+    width: 100%;
+    padding: 12px 17px 0;
+    margin: 0 auto -30px;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .item {
+        width: 43%;
+        position: relative;
+        margin-bottom: 30px;
+
+        &.hide {
+            display: none;
+        }
+
+        .rating {
+            position: absolute;
+            right: 0;
+            top: 0;
+            background-color: var(--brand-blue);
+            color: white;
+            font-size: 10px;
+            font-weight: 500;
+            border-bottom-left-radius: 10px;
+            border-top-right-radius: 8px;
+            padding: 6px;
+        }
+
+        img {
+            border-radius: 10px;
+            height: 80px;
+            width: 100%;
+            object-fit: cover;
+        }
+
+        h5 {
+            font-size: 13px;
+            color: var(--brand-dark-grey);
+            font-weight: bold;
+            letter-spacing: 0.5px;
+            margin: 10px 0;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        p {
+            font-size: 10px;
+            color: var(--brand-grey);
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .label-holder {
+        display: flex;
+        width: 100%;
+        align-items: center;
+
+        span {
+            font-size: 10px;
+            color: var(--brand-grey);
+            margin-left: 5px;
+        }
+
+        .category {
+            border: 1px solid var(--brand-dark-grey);
+            width: 16px;
+            height: 16px;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &::before {
+                content: '';
+                width: 8px;
+                height: 8px;
+                background-color: var(--brand-grey);
+                border-radius: 50%;
+            }
+
+            &.veg {
+                border-color: var(--ion-color-success);
+
+                &::before {
+                    background-color: var(--ion-color-success);
+                }
+            }
+
+            &.non-veg {
+                border-color: var(--ion-color-danger);
+
+                &::before {
+                    background-color: var(--ion-color-danger);
+                }
+            }
+        }
+    }
+
+    .duration {
+        color: var(--brand-dark-grey);
+        font-size: 10px;
+        display: flex;
+        align-items: center;
+        margin: 10px 0;
+
+        ion-icon {
+            font-size: 14px;
+            margin-right: 5px;
+        }
+    }
+
+    .price {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        .discounted {
+            color: var(--brand-blue);
+            font-size: 12px;
+            font-weight: 500;
+            margin-right: 10px;
+        }
+
+        .actual-price {
+            color: var(--brand-dark-grey);
+            font-size: 10px;
+            text-decoration: line-through;
+        }
+    }
+
+    .cart-button {
+        background-color: var(--brand-blue);
+        color: white;
+        font-size: 12px;
+        padding: 10px 7px;
+        width: 100%;
+        border-radius: 5px;
+    }
+}
+
+.advertisement {
+    width: 90%;
+    margin: 0 auto 20px;
+
+    img {
+        object-fit: cover;
     }
 }

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
-import { Mall, Outlet, MallService } from '../services/mall.service';
+import { Mall, Outlet, MenuItem, MallService } from '../services/mall.service';
 
 @Component({
     selector: 'app-outlet-details',
@@ -11,6 +11,7 @@ import { Mall, Outlet, MallService } from '../services/mall.service';
 export class OutletDetailsPage implements OnInit {
     mall_details: Mall;
     outlet_details: Outlet;
+    temp_outlet_details: Outlet;
     show_top_bar: boolean = false;
     show_only_veg: boolean = false;
     selected_tag: string = null;
@@ -28,6 +29,7 @@ export class OutletDetailsPage implements OnInit {
         this.mallService.getMallByID(mall_id).then((data: Mall) => {
             this.mall_details = data;
             this.outlet_details = this.mall_details.outlets.find((outlet) => outlet.id === outlet_id);
+            this.temp_outlet_details = JSON.parse(JSON.stringify(this.outlet_details));
         });
     }
 
@@ -47,4 +49,25 @@ export class OutletDetailsPage implements OnInit {
         return price - (price * discount / 100);
     }
 
+    toggleBookmark() {
+        this.outlet_details.is_bookmarked = !this.outlet_details.is_bookmarked;
+    }
+
+
+    filterByTag(tag: string) {
+        if (this.selected_tag === tag) {
+            this.selected_tag = null;
+            this.temp_outlet_details.menu_items = JSON.parse(JSON.stringify(this.outlet_details.menu_items));
+        } else {
+            this.selected_tag = tag;
+            let menu_items: Array<MenuItem> = [];
+            for (let i = 0; i < this.outlet_details.menu_items.length; i += 1) {
+                if (this.outlet_details.menu_items[i].tags.includes(tag)) {
+                    menu_items.push(this.outlet_details.menu_items[i]);
+                }
+            }
+            this.temp_outlet_details.menu_items = menu_items;
+        }
+    }
+
 }

src/app/services/mall.service.ts

@@ -7,7 +7,7 @@ type CoOrdinates = {
 };
 
 
-type MenuItem = {
+export type MenuItem = {
     id: string,
     name: string,
     image_url?: string,
@@ -71,7 +71,7 @@ export class MallService {
                     id: '0001',
                     name: 'McSpicy Paneer',
                     image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
-                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
                     is_vegeterian: true,
                     wait_duration: 10,
                     price: 90,
@@ -82,8 +82,8 @@ export class MallService {
                     id: '0002',
                     name: 'McAloo Tikki',
                     image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
-                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-                    is_vegeterian: false,
+                    description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
+                    is_vegeterian: true,
                     wait_duration: 13,
                     price: 120,
                     discount: 50,
@@ -93,7 +93,7 @@ export class MallService {
                     id: '0003',
                     name: 'McPork',
                     image_url: 'https://www.mcdonalds.com.my/images/nasi_lemak/burger/burger.jpg?id=bb965dd67df3afa52033',
-                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    description: 'the patties are very unique and is prepared mainly with mashed potatoes and green peas. the flagship mcaloo tikki recipe from McDonalds involves a special sauce which is basically a combination of tomato sauce and mayonnaise. aloo tikki burger recipe.',
                     is_vegeterian: false,
                     wait_duration: 20,
                     price: 300,

src/global.scss

@@ -63,6 +63,10 @@ header, h1, h2, h3, h4, h5 {
     transform: translateY(0);
     opacity: 0.7;
 
+    &.hide {
+        display: none;
+    }
+
     &.inactive {
         transform: translateY(100px);
     }
@@ -98,7 +102,7 @@ header, h1, h2, h3, h4, h5 {
 }
 
 .menu-items-holder {
-    background-image: url('assets/custom/background-2.svg');
+    background-image: url('assets/custom/background-5.svg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: left top;

src/theme/variables.scss

@@ -79,7 +79,6 @@
   --background-blue: #f5f7fa;
   --brand-grey: #9a9a9a;
   --brand-black: #1b1d1e;
-  --brand-blue: #1a4fc2;
   --brand-dark-grey: #666666;
   --brand-yellow: #f79319;
 }