diff --git a/src/app/mall-details/mall-details.page.ts b/src/app/mall-details/mall-details.page.ts
index f7614ff..37cda11 100644
--- a/src/app/mall-details/mall-details.page.ts
+++ b/src/app/mall-details/mall-details.page.ts
@@ -45,7 +45,6 @@ export class MallDetailsPage implements OnInit {
this.mallService.updateMallDetails(mall_details).then(() => this.refresh());
}
-
onScroll(event: any) {
if (event.detail.scrollTop > 100) {
this.show_top_bar = true;
@@ -54,4 +53,8 @@ export class MallDetailsPage implements OnInit {
}
}
+ outletDetails(mall_id: string, outlet_id: string) {
+ this.router.navigate(['/outlet-details', { mall_id: mall_id, outlet_id: outlet_id }]);
+ }
+
}
diff --git a/src/app/outlet-details/outlet-details.module.ts b/src/app/outlet-details/outlet-details.module.ts
new file mode 100644
index 0000000..e8af898
--- /dev/null
+++ b/src/app/outlet-details/outlet-details.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { OutletDetailsPage } from './outlet-details.page';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: OutletDetailsPage
+ }
+];
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ IonicModule,
+ RouterModule.forChild(routes)
+ ],
+ declarations: [OutletDetailsPage]
+})
+export class OutletDetailsPageModule {}
diff --git a/src/app/outlet-details/outlet-details.page.html b/src/app/outlet-details/outlet-details.page.html
new file mode 100644
index 0000000..67f0762
--- /dev/null
+++ b/src/app/outlet-details/outlet-details.page.html
@@ -0,0 +1,82 @@
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ outlet_details.name }}
+
+ {{ outlet_details.description }}
+
+
+
+
+
+ MENU
+ VEG MENU
+
+
+
+ {{ outlet_details.menu_items.length }} FOOD ITEMS
+ SORT / FILTER
+
+
+
+
+
+
+ 
+ {{ item.name }}
+ {{ item.description }}
+
+
+ Non-Veg Meals
+ Veg Meals
+
+ {{ item.wait_duration }} Minutes
+
+ {{ calculateDiscount(item.price, item.discount) }}
+ {{ item.price }}
+
+
+
+
+
+
+
diff --git a/src/app/outlet-details/outlet-details.page.scss b/src/app/outlet-details/outlet-details.page.scss
new file mode 100644
index 0000000..0973d3e
--- /dev/null
+++ b/src/app/outlet-details/outlet-details.page.scss
@@ -0,0 +1,235 @@
+.header-bar {
+ background-image: url('../../assets/custom/background-2.svg');
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: left top;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 15px;
+ height: 75px;
+ z-index: 2;
+ pointer-events: none;
+ opacity: 0;
+ top: 0;
+ left: 0;
+ width: 100%;
+ position: fixed;
+ transition: opacity 0.5s;
+ box-shadow: 0px 3px 5px var(--brand-grey);
+
+ &.active {
+ opacity: 1;
+ pointer-events: all;
+ }
+
+
+ .heading-holder {
+ display: flex;
+ align-items: center;
+ }
+
+ button, a {
+ background-color: white;
+ color: var(--brand-blue);
+ font-size: 18px;
+ padding: 5px;
+ border-radius: 50%;
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &.active {
+ color: white;
+ background-color: var(--brand-blue);
+ }
+ }
+
+ h3 {
+ font-size: 16px;
+ color: white;
+ letter-spacing: 0.5px;
+ margin-left: 10px;
+ font-weight: 600;
+ }
+
+ .stats-holder {
+ font-size: 10px;
+ color: white;
+ display: flex;
+ align-items: center;
+
+ .stat {
+ margin-left: 10px;
+ }
+ }
+
+ .utilities-buttons-holder {
+ position: absolute;
+ right: 15px;
+ bottom: -15px;
+ display: flex;
+ align-items: center;
+ button, a {
+ margin-left: 10px;
+ box-shadow: 0px 3px 5px var(--brand-grey);
+ }
+ }
+}
+
+.upfold-holder {
+ position: relative;
+ height: 45vh;
+ width: 100%;
+ padding-top: 30px;
+ margin-bottom: -25px;
+
+ .icons-holder {
+ position: relative;
+ display: flex;
+ width: 90%;
+ margin: 0 auto;
+ justify-content: space-between;
+
+ &.navigate-button {
+ position: absolute;
+ left: 86%;
+ bottom: 30px;
+ width: auto;
+
+ a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+
+ button, a {
+ background-color: white;
+ color: var(--brand-blue);
+ font-size: 18px;
+ padding: 5px;
+ border-radius: 50%;
+ height: 30px;
+ width: 30px;
+ display: block;
+ margin-bottom: 10px;
+ box-shadow: 0px 0px 5px var(--brand-grey);
+
+ &.active {
+ background-color: var(--brand-blue);
+ color: white;
+ }
+ }
+ }
+
+ img {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+ filter: brightness(80%);
+ }
+}
+
+.card-holder {
+ background-color: transparent;
+ position: relative;
+
+ .card {
+ box-shadow: 0px 0px 5px var(--brand-grey);
+ width: 90%;
+ margin: 0 auto;
+ border-radius: 10px;
+ overflow: hidden;
+ padding: 20px;
+ background-color: white;
+
+ h3 {
+ color: var(--brand-dark-grey);
+ font-size: 20px;
+ letter-spacing: 0.5px;
+ font-weight: 600;
+ }
+
+ .stats-holder {
+ display: flex;
+ justify-content: space-between;
+ color: var(--brand-blue);
+ font-size: 10px;
+ font-weight: bold;
+ margin: 15px 0;
+
+ span {
+ color: var(--brand-grey);
+ }
+ }
+
+ p {
+ margin: 0 auto;
+ font-size: 11px;
+ line-height: 1.5;
+ color: var(--brand-grey);
+ }
+ }
+}
+
+.menu-card-holder {
+ margin: 25px 0;
+
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ background-color: #efefef;
+ color: var(--brand-dark-grey);
+ padding: 5px 0 5px 15px;
+ }
+
+ h3 {
+ font-size: 12px;
+ }
+
+ .toggle {
+ font-size: 10px;
+ display: flex;
+ align-items: center;
+
+ ion-toggle {
+ --handle-background: var(--brand-blue);
+ --handle-background-checked: var(--brand-blue);
+ transform: scale(0.8);
+ }
+ }
+
+ .tags-holder {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 25px 15px 0;
+
+ button {
+ border: 1px solid var(--brand-blue);
+ border-radius: 30px;
+ color: var(--brand-blue);
+ font-size: 12px;
+ padding: 7px 15px;
+ background-color: white;
+ margin-right: 10px;
+ margin-bottom: 15px;
+
+ &.active {
+ background-color: var(--brand-blue);
+ color: white;
+ }
+ }
+ }
+
+ .results-utilities-holder {
+ margin-top: 0;
+ }
+}
diff --git a/src/app/outlet-details/outlet-details.page.spec.ts b/src/app/outlet-details/outlet-details.page.spec.ts
new file mode 100644
index 0000000..a75d556
--- /dev/null
+++ b/src/app/outlet-details/outlet-details.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OutletDetailsPage } from './outlet-details.page';
+
+describe('OutletDetailsPage', () => {
+ let component: OutletDetailsPage;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ OutletDetailsPage ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(OutletDetailsPage);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/outlet-details/outlet-details.page.ts b/src/app/outlet-details/outlet-details.page.ts
new file mode 100644
index 0000000..2ca97fc
--- /dev/null
+++ b/src/app/outlet-details/outlet-details.page.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { Mall, Outlet, MallService } from '../services/mall.service';
+
+@Component({
+ selector: 'app-outlet-details',
+ templateUrl: './outlet-details.page.html',
+ styleUrls: ['./outlet-details.page.scss'],
+})
+export class OutletDetailsPage implements OnInit {
+ mall_details: Mall;
+ outlet_details: Outlet;
+ show_top_bar: boolean = false;
+ show_only_veg: boolean = false;
+ selected_tag: string = null;
+
+ constructor(
+ private route: ActivatedRoute,
+ private location: Location,
+ private mallService: MallService,
+ ) { }
+
+ ngOnInit() {
+ let mall_id = this.route.snapshot.paramMap.get('mall_id');
+ let outlet_id = this.route.snapshot.paramMap.get('outlet_id');
+
+ 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);
+ });
+ }
+
+ back() {
+ this.location.back();
+ }
+
+ onScroll(event: any) {
+ if (event.detail.scrollTop > 100) {
+ this.show_top_bar = true;
+ } else {
+ this.show_top_bar = false;
+ }
+ }
+
+ calculateDiscount(price: number, discount: number) {
+ return price - (price * discount / 100);
+ }
+
+}
diff --git a/src/app/services/mall.service.ts b/src/app/services/mall.service.ts
index 12e7b49..666a5fa 100644
--- a/src/app/services/mall.service.ts
+++ b/src/app/services/mall.service.ts
@@ -6,12 +6,28 @@ type CoOrdinates = {
longitude: number,
};
-type Outlet = {
+
+type MenuItem = {
+ id: string,
+ name: string,
+ image_url?: string,
+ description: string,
+ is_vegeterian: boolean,
+ wait_duration: number,
+ price: number,
+ discount: number,
+ rating: number,
+ tags: Array
+};
+
+export type Outlet = {
id: string,
image_url?: string,
name: string,
description: string,
offers: Array,
+ tags: Array,
+ menu_items: Array
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ outlet_details.name }}
+
+
+ {{ outlet_details.description }}
+
+
+
+
+
+
+
+MENU
+ VEG MENU
+
+ SORT / FILTER
+
+
+ {{ outlet_details.menu_items.length }} FOOD ITEMS
+
+
+
+
+
+
+
+
+ {{ item.name }}
+{{ item.description }}
+
+
+ Non-Veg Meals
+ Veg Meals
+
+ {{ item.wait_duration }} Minutes
+
+ {{ calculateDiscount(item.price, item.discount) }}
+ {{ item.price }}
+
+