From c5eb2e1bce43cf877d773e92f02493074152a8b9 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 12 Jan 2021 08:33:58 +0530 Subject: [PATCH] Add party to contact list UI --- src/app/add-party/add-party-routing.module.ts | 17 +++ src/app/add-party/add-party.module.ts | 20 +++ src/app/add-party/add-party.page.html | 39 ++++++ src/app/add-party/add-party.page.scss | 124 ++++++++++++++++++ src/app/add-party/add-party.page.spec.ts | 24 ++++ src/app/add-party/add-party.page.ts | 70 ++++++++++ src/app/app-routing.module.ts | 4 + src/app/app.component.ts | 3 + src/app/chat/chat.page.html | 2 +- src/app/chat/chat.page.ts | 26 +++- src/app/live/live.page.html | 8 +- src/app/live/live.page.ts | 24 +++- 12 files changed, 354 insertions(+), 7 deletions(-) create mode 100644 src/app/add-party/add-party-routing.module.ts create mode 100644 src/app/add-party/add-party.module.ts create mode 100644 src/app/add-party/add-party.page.html create mode 100644 src/app/add-party/add-party.page.scss create mode 100644 src/app/add-party/add-party.page.spec.ts create mode 100644 src/app/add-party/add-party.page.ts diff --git a/src/app/add-party/add-party-routing.module.ts b/src/app/add-party/add-party-routing.module.ts new file mode 100644 index 0000000..0800e8d --- /dev/null +++ b/src/app/add-party/add-party-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { AddPartyPage } from './add-party.page'; + +const routes: Routes = [ + { + path: '', + component: AddPartyPage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class AddPartyPageRoutingModule {} diff --git a/src/app/add-party/add-party.module.ts b/src/app/add-party/add-party.module.ts new file mode 100644 index 0000000..a75c0b0 --- /dev/null +++ b/src/app/add-party/add-party.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { AddPartyPageRoutingModule } from './add-party-routing.module'; + +import { AddPartyPage } from './add-party.page'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + AddPartyPageRoutingModule + ], + declarations: [AddPartyPage] +}) +export class AddPartyPageModule {} diff --git a/src/app/add-party/add-party.page.html b/src/app/add-party/add-party.page.html new file mode 100644 index 0000000..8346a8d --- /dev/null +++ b/src/app/add-party/add-party.page.html @@ -0,0 +1,39 @@ + +
+
+ +
+ +
+ Create Party
+ Send invitation to contacts
+ {{ selectedContacts.length }} contact(s) selected +
+
+ + + + + + +

{{ contact.name }}

+

{{ contact.phone }}

+ + + + + + + + + + + Create Party + + + diff --git a/src/app/add-party/add-party.page.scss b/src/app/add-party/add-party.page.scss new file mode 100644 index 0000000..f9305e5 --- /dev/null +++ b/src/app/add-party/add-party.page.scss @@ -0,0 +1,124 @@ +$dark-blue: #161e2d; +$blue-grey: #949599; +$green: #01b868; +$pink: #d73e53; +$dark-blue-shade1: #24367c; +$dark-blue-shade2: #263982; + +ion-content { + --background: white; +} + +.action-buttons { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 0 3% 0 0%; + height: 70px; + position: sticky; + left: 0; + top: 0; + background-color: lighten($blue-grey, 35%); + z-index: 2; + width: 100%; + align-items: center; + box-shadow: 0px 0px 5px $dark-blue; + + button { + background-color: transparent; + border: none; + } + + .nav button { + color: $blue-grey; + display: flex; + align-items: center; + + ion-icon { + font-size: 24px; + } + + span { + margin-left: 5px; + font-size: 0.9rem; + font-size: 14px; + } + } + + header { + flex-grow: 1; + padding: 0 10px; + font-size: 16px; + color: darken($blue-grey, 30%); + font-weight: 500; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + span { + font-weight: 500; + color: $blue-grey; + font-size: 12px; + } + } +} + +ion-searchbar { + margin: 10px 0; +} + +ion-list { + margin-bottom: 60px; + + ion-item { + --padding-start: 5%; + --padding-end: 5%; + } + + ion-button { + margin: 0; + --border-width: 2px; + --border-radius: 5px; + width: 40px; + height: 40px; + transform: scale(0.9); + + &.active { + --background: #01b868; + --color: white; + --border-color: #00ad62; + + ion-icon { + font-size: 30px; + + &:nth-child(2) { + display: block; + } + + &:nth-child(1) { + display: none; + } + } + } + + ion-icon { + font-size: 20px; + + &:nth-child(2) { + display: none; + } + } + } +} + +.confirm-button { + position: fixed; + bottom: 0; + left: 0; + --color: white; + margin: 0; + width: 100%; + height: 50px; + --background: #01b868; +} \ No newline at end of file diff --git a/src/app/add-party/add-party.page.spec.ts b/src/app/add-party/add-party.page.spec.ts new file mode 100644 index 0000000..0c0de09 --- /dev/null +++ b/src/app/add-party/add-party.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { AddPartyPage } from './add-party.page'; + +describe('AddPartyPage', () => { + let component: AddPartyPage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddPartyPage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(AddPartyPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/add-party/add-party.page.ts b/src/app/add-party/add-party.page.ts new file mode 100644 index 0000000..a8c1f9d --- /dev/null +++ b/src/app/add-party/add-party.page.ts @@ -0,0 +1,70 @@ +import { Component, OnInit } from '@angular/core'; +import * as faker from 'faker'; +import { ModalController } from '@ionic/angular'; + +@Component({ + selector: 'app-add-party', + templateUrl: './add-party.page.html', + styleUrls: ['./add-party.page.scss'], +}) +export class AddPartyPage implements OnInit { + contactList: Array<{ + name: string, + phone: string + }> = []; + + tempContactList: Array<{ + name: string, + phone: string + }> = []; + + searchInput: string = ''; + + selectedContacts: Array = []; + + constructor( + private modalController: ModalController + ) { } + + back() { + this.modalController.dismiss({ + createParty: false + }); + } + + createParty() { + this.modalController.dismiss({ + createParty: true + }); + } + + ngOnInit() { + + for (let i = 0; i < 12; i += 1) { + this.contactList.push({ + name: faker.name.findName(), + phone: faker.phone.phoneNumber() + }); + } + + this.tempContactList = JSON.parse(JSON.stringify(this.contactList)); + + + } + + searchContact() { + this.contactList = this.tempContactList.filter((contact) => { + return contact.phone.toString().toLowerCase().includes(this.searchInput.toLowerCase().trim()) || + contact.name.toString().toLowerCase().includes(this.searchInput.toLowerCase().trim()); + }); + } + + selectContact(phone: string) { + if (this.selectedContacts.includes(phone)) { + this.selectedContacts.splice(this.selectedContacts.indexOf(phone), 1); + } else { + this.selectedContacts.push(phone); + } + } + +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 9d44276..84d0f83 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -45,6 +45,10 @@ const routes: Routes = [ { path: 'collections', loadChildren: () => import('./collections/collections.module').then( m => m.CollectionsPageModule) + }, + { + path: 'add-party', + loadChildren: () => import('./add-party/add-party.module').then( m => m.AddPartyPageModule) } ]; @NgModule({ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 65b00ab..2a20cb6 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -22,6 +22,9 @@ export class AppComponent { this.platform.ready().then(() => { this.statusBar.styleDefault(); this.splashScreen.hide(); + + localStorage.isPartyChatOn = 'no'; + }); } } diff --git a/src/app/chat/chat.page.html b/src/app/chat/chat.page.html index 2eccf3b..f39e45a 100644 --- a/src/app/chat/chat.page.html +++ b/src/app/chat/chat.page.html @@ -5,7 +5,7 @@
- +
diff --git a/src/app/chat/chat.page.ts b/src/app/chat/chat.page.ts index dfc0dc7..4643180 100644 --- a/src/app/chat/chat.page.ts +++ b/src/app/chat/chat.page.ts @@ -1,6 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { ModalController } from '@ionic/angular'; import * as faker from 'faker'; +import { ToastController } from '@ionic/angular'; + type IMember = { name: string, @@ -41,13 +43,30 @@ export class ChatPage implements OnInit { myAccount: IMember; constructor( - private modalController: ModalController + private modalController: ModalController, + public toastController: ToastController ) { } back() { this.modalController.dismiss(); } + + async copyLink() { + const toast = await this.toastController.create({ + message: 'Copied invitation link!', + color: 'medium', + mode: 'md', + duration: 100000, + position: 'top', + buttons: [{ + text: 'Ok', + role: 'cancel', + }], + }); + toast.present(); + } + ngOnInit() { let myAccountIndex = Math.floor(Math.random() * 11); @@ -132,7 +151,7 @@ export class ChatPage implements OnInit { setTimeout(() => { this.scrollToEnd(); - }, 300); + }, 1000); }, 200); @@ -175,7 +194,6 @@ export class ChatPage implements OnInit { this.scrollToEnd(); this.myMessage = ''; - }, 100); + }, 1000); } - } diff --git a/src/app/live/live.page.html b/src/app/live/live.page.html index fdb62c1..04beb83 100644 --- a/src/app/live/live.page.html +++ b/src/app/live/live.page.html @@ -131,10 +131,16 @@ - + + + + + + + diff --git a/src/app/live/live.page.ts b/src/app/live/live.page.ts index 5111721..c8ca35c 100644 --- a/src/app/live/live.page.ts +++ b/src/app/live/live.page.ts @@ -4,6 +4,7 @@ import * as moment from 'moment'; import { ChatPage } from '../chat/chat.page'; import * as faker from 'faker'; import { Router } from '@angular/router'; +import { AddPartyPage } from '../add-party/add-party.page'; export type IscoreCard = { teamName: string, @@ -110,6 +111,8 @@ export class LivePage implements OnInit { }> }> = []; + showAddParty: boolean = false; + constructor( public modalController: ModalController, private router: Router @@ -272,16 +275,35 @@ export class LivePage implements OnInit { totalWickets: 1, } } + + + if (localStorage.isPartyChatOn = 'no') { + this.showAddParty = true; + } + } async presentChatModal() { const modal = await this.modalController.create({ component: ChatPage, - cssClass: 'my-custom-class' }); return await modal.present(); } + async presentAddChatModal() { + const modal = await this.modalController.create({ + component: AddPartyPage, + }); + + modal.onDidDismiss().then((data) => { + if(data.data.createParty) { + this.showAddParty = false; + } + }); + + return await modal.present(); + } + showBookingDetails(matchData) { this.router.navigate(['/booking-details' , { matchData: JSON.stringify(matchData) }]); }