diff --git a/src/app/orders/orders.component.html b/src/app/orders/orders.component.html index 9d87bb9..69c47ee 100644 --- a/src/app/orders/orders.component.html +++ b/src/app/orders/orders.component.html @@ -4,16 +4,32 @@ + +
+
Rate & Review
+
+
Rating
+

Rating the food will help us give you personalised recommendation

+
+ + + + + +
+
+
+
Review
+ +
+ Submit Feedback +
diff --git a/src/app/orders/orders.component.scss b/src/app/orders/orders.component.scss index 93e958d..550e2dc 100644 --- a/src/app/orders/orders.component.scss +++ b/src/app/orders/orders.component.scss @@ -32,6 +32,14 @@ ul.orders { line-height: 1.6; border-bottom: 1px solid #efefef; + &.expand { + + .heading { + width: 100%; + white-space: normal; + } + } + .heading { width: 50%; font-size: 15px; @@ -54,16 +62,33 @@ ul.orders { margin: 10px 0 0; li { - display: flex; - width: 100%; - justify-content: space-between; - margin: 0px auto; - align-items: center; - color: var(--brand-grey); + + .outlet-name { + font-size: 14px; + font-weight: 600; + letter-spacing: 0.5px; + } + + .order-item-details { + display: flex; + width: 100%; + justify-content: space-between; + margin: 0px auto 5px; + align-items: center; + color: var(--brand-grey); + } .name { font-size: 13px; letter-spacing: 0.5px; + display: flex; + align-items: center; + + img { + width: 50px; + height: 50px; + margin-right: 10px; + } } .time { @@ -105,3 +130,76 @@ ul.orders { } } } + + +.rating-modal { + color: var(--brand-dark-grey); + transform: translateY(100vh); + + &.active { + transform: translateY(0); + } + + .semi-heading { + text-align: center; + font-size: 18px; + font-weight: 500; + } + + .rating { + padding: 20px 15px; + + p { + font-size: 14px; + color: var(--brand-grey); + text-align: center; + line-height: 1.5; + margin: 15px 0; + } + + .star-holder { + text-align: center; + + ion-icon { + color: var(--brand-grey); + margin: 0 5px; + font-size: 30px; + transition: color 0.3s; + + &.active { + color: #fbae17; + } + } + } + } + + .review { + border-top: 1px solid #efefef; + padding: 15px; + + .semi-heading { + text-align: left; + } + + textarea { + outline: none; + width: 100%; + height: 70px; + background-color: #efefef; + padding: 10px; + font-size: 12px; + color: var(--brand-dark-grey); + border: 0px; + border-radius: 10px; + margin: 15px auto 0; + resize: none; + } + } + + ion-button { + --background: var(--brand-blue); + font-size: 12px; + width: calc(100% - 30px); + margin: 0 auto 15px; + } +} diff --git a/src/app/orders/orders.component.ts b/src/app/orders/orders.component.ts index 043a0a8..554fda4 100644 --- a/src/app/orders/orders.component.ts +++ b/src/app/orders/orders.component.ts @@ -1,5 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { OrderService } from '../services/order.service'; +import { MallService } from '../services/mall.service'; +import { IMall } from '../models/mall'; +import { IOutlet } from '../models/outlet'; +import { OutletService } from '../services/outlet.service'; import * as moment from 'moment'; @Component({ @@ -9,19 +13,63 @@ import * as moment from 'moment'; }) export class OrdersComponent implements OnInit { orders: any = []; + all_malls: Array = []; + all_outlets: Array = []; + selected_rating: number = 0; + show_rate_modal: boolean = false; constructor( - private orderService: OrderService + private orderService: OrderService, + private mallService: MallService, + private outletService: OutletService ) { } ngOnInit() { this.orderService.getCreatedOrders().then((data: any) => { this.orders = data.reverse(); + console.log(this.orders); }); + + this.mallService.getAllMalls().then((malls: Array) => { + this.all_malls = malls; + }); + + this.outletService.getAllOutlets().then((outlets: Array) => { + this.all_outlets = outlets; + }); + } + + setRating() { + let i: number, j:number, stars: any; + stars = document.querySelectorAll('.star-holder ion-icon'); + + for (i = 0; i < stars.length ; i += 1) { + stars[i].classList.remove('active'); + } + + for (i = 0; i < this.selected_rating ; i += 1) { + stars[i].classList.add('active'); + } } getFormattedDate(date : Date, format: string) { return moment(date).format(format); } + getMallName(id: string) { + return this.all_malls.find((mall) => { + return mall.id === id; + }).name; + } + + getOutletName(id: string) { + return this.all_outlets.find((mall) => { + return mall.id === id; + }).name; + } + + getRating() { + + } + } diff --git a/src/app/profile/profile.page.ts b/src/app/profile/profile.page.ts index 73bae35..6956c63 100644 --- a/src/app/profile/profile.page.ts +++ b/src/app/profile/profile.page.ts @@ -18,6 +18,13 @@ export class ProfilePage implements OnInit { ngOnInit() { } + ionViewDidEnter() { + this.selected_tab = ''; + setTimeout(() => { + this.selected_tab = 'MY ORDERS'; + }, 100); + } + back() { this.location.back(); } diff --git a/src/app/services/outlet.service.ts b/src/app/services/outlet.service.ts index d4f25e2..2c6b784 100644 --- a/src/app/services/outlet.service.ts +++ b/src/app/services/outlet.service.ts @@ -30,10 +30,15 @@ export class OutletService { }; } - private async fetchOutlets() { + public async fetchOutlets() { this.outlets = await Promise.all(OUTLETS.map(this.getDenormalizedOutlet)); } + async getAllOutlets() { + this.outlets = await Promise.all(OUTLETS.map(this.getDenormalizedOutlet)); + return this.outlets; + } + public async getOutletByID(id: string) { await this.fetchOutlets(); return this.outlets.find((outlet) => outlet.id === id);