From fd232372dc679c27d4b4a746691c56c7aae15f87 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Sat, 19 Oct 2019 22:50:32 +0530 Subject: [PATCH] Profile page UI --- .../notifications.component.html | 45 +++++++++++++ .../notifications.component.scss | 63 +++++++++++++++++++ .../notifications.component.spec.ts | 27 ++++++++ .../notifications/notifications.component.ts | 14 +++++ src/app/orders/orders.component.html | 12 +--- src/app/orders/orders.component.scss | 21 +++++++ src/app/orders/orders.component.ts | 31 ++++++++- src/app/profile/profile.module.ts | 4 +- src/app/profile/profile.page.html | 6 +- src/app/profile/profile.page.scss | 23 ------- src/app/profile/profile.page.ts | 7 +++ src/app/refer/refer.component.html | 11 ++++ src/app/refer/refer.component.scss | 60 ++++++++++++++++++ src/app/refer/refer.component.spec.ts | 27 ++++++++ src/app/refer/refer.component.ts | 44 +++++++++++++ 15 files changed, 357 insertions(+), 38 deletions(-) create mode 100644 src/app/notifications/notifications.component.html create mode 100644 src/app/notifications/notifications.component.scss create mode 100644 src/app/notifications/notifications.component.spec.ts create mode 100644 src/app/notifications/notifications.component.ts create mode 100644 src/app/refer/refer.component.html create mode 100644 src/app/refer/refer.component.scss create mode 100644 src/app/refer/refer.component.spec.ts create mode 100644 src/app/refer/refer.component.ts diff --git a/src/app/notifications/notifications.component.html b/src/app/notifications/notifications.component.html new file mode 100644 index 0000000..1b8a7cd --- /dev/null +++ b/src/app/notifications/notifications.component.html @@ -0,0 +1,45 @@ +
+
NOTIFICATIONS
+ MARK AS READ +
+ diff --git a/src/app/notifications/notifications.component.scss b/src/app/notifications/notifications.component.scss new file mode 100644 index 0000000..f597b19 --- /dev/null +++ b/src/app/notifications/notifications.component.scss @@ -0,0 +1,63 @@ +.heading-holder { + background-color: #efefef; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 5%; + + .name { + color: var(--brand-dark-grey); + font-size: 12px; + font-weight: 500; + letter-spacing: 0.5px; + } + + ion-button { + margin: 0; + --color: var(--brand-blue); + font-size: 12px; + --padding-end: 0; + } +} + + +ul { + margin: 0; + padding: 0; + + li { + list-style: none; + display: flex; + align-items: flex-start; + justify-content: space-between; + margin: 0 auto; + padding: 10px 5%; + border-bottom: 1px solid #efefef; + + figure { + width: 70px; + height: 70px; + background-color: #efefef; + border-radius: 50%; + } + + label { + width: calc(100% - 90px); + } + + p { + font-size: 13px; + color: var(--brand-grey); + font-weight: 500; + line-height: 1.5; + } + + .time { + opacity: 0.8; + font-size: 11px; + color: var(--brand-grey); + line-height: 1.5; + margin-top: 5px; + } + } +} diff --git a/src/app/notifications/notifications.component.spec.ts b/src/app/notifications/notifications.component.spec.ts new file mode 100644 index 0000000..73433c1 --- /dev/null +++ b/src/app/notifications/notifications.component.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NotificationsComponent } from './notifications.component'; + +describe('NotificationsComponent', () => { + let component: NotificationsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NotificationsComponent ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NotificationsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/notifications/notifications.component.ts b/src/app/notifications/notifications.component.ts new file mode 100644 index 0000000..e13f944 --- /dev/null +++ b/src/app/notifications/notifications.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-notifications', + templateUrl: './notifications.component.html', + styleUrls: ['./notifications.component.scss'], +}) +export class NotificationsComponent implements OnInit { + + constructor() { } + + ngOnInit() {} + +} diff --git a/src/app/orders/orders.component.html b/src/app/orders/orders.component.html index 961bb5a..f204f1d 100644 --- a/src/app/orders/orders.component.html +++ b/src/app/orders/orders.component.html @@ -1,10 +1,4 @@ -
-
MY ORDERS
- - SORT / FILTER - +
+
MY ORDERS
+ FILTER
- -

- orders works! -

diff --git a/src/app/orders/orders.component.scss b/src/app/orders/orders.component.scss index e69de29..fb4c3e3 100644 --- a/src/app/orders/orders.component.scss +++ b/src/app/orders/orders.component.scss @@ -0,0 +1,21 @@ +.heading-holder { + background-color: #efefef; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 5%; + + .name { + color: var(--brand-dark-grey); + font-size: 12px; + font-weight: 500; + letter-spacing: 0.5px; + } + + ion-button { + margin: 0; + --color: var(--brand-blue); + font-size: 12px; + --padding-end: 0; + } +} diff --git a/src/app/orders/orders.component.ts b/src/app/orders/orders.component.ts index 6599846..6236611 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 { UserDataService } from '../services/user-data.service'; +import { IMall } from '../models/mall'; +import { MallService } from '../services/mall.service'; +import { CartItemService } from '../services/cart-item.service'; +import CartItem from '../models/cart-item'; +import * as moment from 'moment'; @Component({ selector: 'app-orders', @@ -7,11 +11,32 @@ import { UserDataService } from '../services/user-data.service'; styleUrls: ['./orders.component.scss'], }) export class OrdersComponent implements OnInit { + cart_items: any = []; + all_malls: Array = []; constructor( - private userDataService: UserDataService + private mallService: MallService, + private cartService: CartItemService, ) { } - ngOnInit() { } + ngOnInit() { + this.mallService.getAllMalls().then((malls: Array) => { + this.all_malls = malls; + }); + + this.cartService.getAllCartItems().then((cart_items: Array) => { + this.cart_items = cart_items; + + let i: number; + + for (i = 0; i < this.cart_items.length; i += 1) { + let mall = this.all_malls.find(mall => mall.id === this.cart_items[i].mall_id); + let outlet = mall.outlets.find(outlet => outlet.id === this.cart_items[i].outlet_id); + this.cart_items[i].menu_details = outlet.menu_items.find(item => item.id === this.cart_items[i].menu_item); + } + + console.log(this.cart_items); + }); + } } diff --git a/src/app/profile/profile.module.ts b/src/app/profile/profile.module.ts index a63e232..2b53949 100644 --- a/src/app/profile/profile.module.ts +++ b/src/app/profile/profile.module.ts @@ -8,6 +8,8 @@ import { IonicModule } from '@ionic/angular'; import { ProfilePage } from './profile.page'; import { OrdersComponent } from '../orders/orders.component'; +import { NotificationsComponent } from '../notifications/notifications.component'; +import { ReferComponent } from '../refer/refer.component'; const routes: Routes = [ { @@ -23,6 +25,6 @@ const routes: Routes = [ IonicModule, RouterModule.forChild(routes) ], - declarations: [ProfilePage, OrdersComponent] + declarations: [ProfilePage, OrdersComponent, NotificationsComponent, ReferComponent] }) export class ProfilePageModule {} diff --git a/src/app/profile/profile.page.html b/src/app/profile/profile.page.html index 126cdf3..0db0108 100644 --- a/src/app/profile/profile.page.html +++ b/src/app/profile/profile.page.html @@ -42,7 +42,7 @@ NOTIFICATION
-
+
@@ -50,6 +50,8 @@
- + + + diff --git a/src/app/profile/profile.page.scss b/src/app/profile/profile.page.scss index 8349c57..630a7ec 100644 --- a/src/app/profile/profile.page.scss +++ b/src/app/profile/profile.page.scss @@ -126,26 +126,3 @@ transition: color 0.4s; } } - -.tab-utilities-holder { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 0 15px; - margin: 0 auto; - background-color: #efefef; - - h5 { - color: var(--brand-dark-grey); - font-size: 12px; - margin: 0; - } - - ion-button { - --padding-end: 0; - --color: var(--brand-blue); - font-size: 10px; - margin: 0; - } -} diff --git a/src/app/profile/profile.page.ts b/src/app/profile/profile.page.ts index 5e2a7be..73bae35 100644 --- a/src/app/profile/profile.page.ts +++ b/src/app/profile/profile.page.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Location } from '@angular/common'; +import { Router } from '@angular/router'; @Component({ selector: 'app-profile', @@ -11,6 +12,7 @@ export class ProfilePage implements OnInit { constructor( private location: Location, + private router: Router ) { } ngOnInit() { @@ -20,4 +22,9 @@ export class ProfilePage implements OnInit { this.location.back(); } + logout() { + localStorage.clear(); + this.router.navigate(['login']); + } + } diff --git a/src/app/refer/refer.component.html b/src/app/refer/refer.component.html new file mode 100644 index 0000000..ffa844c --- /dev/null +++ b/src/app/refer/refer.component.html @@ -0,0 +1,11 @@ +
+
REFER & EARN
+
+ +
+
+ + COPY TO CLIPBOARD +

Share this with your friends and earn upto ₹ 1000

+
+
diff --git a/src/app/refer/refer.component.scss b/src/app/refer/refer.component.scss new file mode 100644 index 0000000..4f614a0 --- /dev/null +++ b/src/app/refer/refer.component.scss @@ -0,0 +1,60 @@ +.heading-holder { + background-color: #efefef; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 5%; + + .name { + color: var(--brand-dark-grey); + font-size: 12px; + font-weight: 500; + letter-spacing: 0.5px; + } + + ion-button { + margin: 0; + --color: var(--brand-blue); + font-size: 12px; + --padding-end: 0; + } +} + +.code-sharing-options { + width: 100%; + padding: 50px; + text-align: center; + background-color: white; + display: flex; + align-items: center; + justify-content: center; + + .code { + background-color: #efefef; + padding: 10px; + color: var(--brand-grey); + font-size: 16px; + border: 0px; + text-align: center; + } + + ion-button { + font-size: 12px; + display: block; + margin: 10px auto; + --background: var(--brand-blue); + } + + p { + font-size: 14px; + color: var(--brand-grey); + line-height: 1.5; + font-weight: 500; + letter-spacing: 0.5px; + + span { + color: var(--brand-blue); + font-weight: 700; + } + } +} diff --git a/src/app/refer/refer.component.spec.ts b/src/app/refer/refer.component.spec.ts new file mode 100644 index 0000000..b511c25 --- /dev/null +++ b/src/app/refer/refer.component.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ReferComponent } from './refer.component'; + +describe('ReferComponent', () => { + let component: ReferComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ReferComponent ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ReferComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/refer/refer.component.ts b/src/app/refer/refer.component.ts new file mode 100644 index 0000000..7c59aa5 --- /dev/null +++ b/src/app/refer/refer.component.ts @@ -0,0 +1,44 @@ +import { Component, OnInit } from '@angular/core'; +import { ToastController } from '@ionic/angular'; + +@Component({ + selector: 'app-refer', + templateUrl: './refer.component.html', + styleUrls: ['./refer.component.scss'], +}) +export class ReferComponent implements OnInit { + + constructor( + public toastController: ToastController + ) { } + + ngOnInit() { } + + copy() { + var copyText = document.getElementById("clipboard") as HTMLInputElement; + copyText.select(); + copyText.setSelectionRange(0, 99999); /*For mobile devices*/ + + /* Copy the text inside the text field */ + document.execCommand("copy"); + + /* Alert the copied text */ + this.presentToast("Copied the text: " + copyText.value); + } + + async presentToast(text: string) { + const toast = await this.toastController.create({ + message: text, + position: 'bottom', + duration: 2000, + color: 'dark', + buttons: [ + { + text: 'Done', + } + ] + }); + toast.present(); + } + +}