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 @@
+
+
+
+
+
+
+
+
+ {{ 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) }]);
}