Show cat button if party started

src/app/app.component.ts

@@ -5,26 +5,28 @@ import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.scss']
+    selector: 'app-root',
+    templateUrl: 'app.component.html',
+    styleUrls: ['app.component.scss']
 })
 export class AppComponent {
-  constructor(
-    private platform: Platform,
-    private splashScreen: SplashScreen,
-    private statusBar: StatusBar
-  ) {
-    this.initializeApp();
-  }
+    showAddParty: boolean = false;
 
-  initializeApp() {
-    this.platform.ready().then(() => {
-      this.statusBar.styleDefault();
-      this.splashScreen.hide();
+    constructor(
+        private platform: Platform,
+        private splashScreen: SplashScreen,
+        private statusBar: StatusBar
+    ) {
+        this.initializeApp();
+    }
 
-      localStorage.isPartyChatOn = 'no';
+    initializeApp() {
+        this.platform.ready().then(() => {
+            this.statusBar.styleDefault();
+            this.splashScreen.hide();
 
-    });
-  }
+            localStorage.isPartyChatOn = 'no';
+
+        });
+    }
 }

src/app/booking/booking.page.html

@@ -45,4 +45,12 @@
         </ion-slides>
 
     </div>
+
+
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed" *ngIf="showChat">
+        <ion-fab-button class="chat-button" (click)="presentChatModal()">
+            <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
+            <ion-badge color="dark"> 10 </ion-badge>
+        </ion-fab-button>
+    </ion-fab>
 </ion-content>

src/app/booking/booking.page.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { IonSlides } from '@ionic/angular';
+import { IonSlides, ModalController } from '@ionic/angular';
 import * as faker from 'faker';
 import * as moment from 'moment';
 import { Router } from '@angular/router';
+import { ChatPage } from '../chat/chat.page';
 
 @Component({
     selector: 'app-booking',
@@ -44,8 +45,8 @@ export class BookingPage implements OnInit {
         spaceBetween: 15,
         initialSlide: 0,
         centeredSlides: true,
-        simulateTouch: false,
-        followFinger: false,
+        // simulateTouch: false,
+        // followFinger: false,
     };
 
     bookingSeatsData: Array<{
@@ -74,9 +75,11 @@ export class BookingPage implements OnInit {
             }>
         }>
     }> = [];
+    showChat: boolean;
 
     constructor(
-        private router: Router
+        private router: Router,
+        private modalController: ModalController
     ) { }
 
     getFormattedDateTime(dateTime: Date) {
@@ -147,4 +150,17 @@ export class BookingPage implements OnInit {
         this.router.navigate(['/booking-details' , { matchData: JSON.stringify(matchData) }]);
     }
 
+    async presentChatModal() {
+        const modal = await this.modalController.create({
+          component: ChatPage,
+        });
+        return await modal.present();
+    }
+
+    ionViewDidEnter() {
+        if (localStorage.isPartyChatOn === 'yes') {
+            this.showChat = true;
+        }
+    }
+
 }

src/app/chat/chat.page.ts

@@ -55,7 +55,7 @@ export class ChatPage implements OnInit {
     async copyLink() {
         const toast = await this.toastController.create({
             message: 'Copied invitation link!',
-            color: 'medium',
+            color: 'success',
             mode: 'md',
             duration: 100000,
             position: 'top',

src/app/collections/collections.page.scss

@@ -46,11 +46,12 @@ ion-slides {
         position: absolute;
         left: 25vw;
         width: 50vw;
-        background-color: rgba(white, 0.1);
+        background-color: rgba(white, 0.3);
         border-radius: 7px;
         overflow: hidden;
         padding: 15px;
-        top: 58vh;
+        top: 60vh;
+        box-shadow: 0px 0px 5px inset dimgray;
 
         h5 {
             margin: 0;

src/app/home/home.page.html

@@ -105,4 +105,11 @@
         </ion-slides>
     </div>
 
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed" *ngIf="showChat">
+        <ion-fab-button class="chat-button" (click)="presentChatModal()">
+            <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
+            <ion-badge color="dark"> 10 </ion-badge>
+        </ion-fab-button>
+    </ion-fab>
+
 </ion-content>

src/app/home/home.page.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { IonSlides } from '@ionic/angular';
+import { IonSlides, ModalController } from '@ionic/angular';
 import { Router } from '@angular/router';
+import { ChatPage } from '../chat/chat.page';
 
 export type INews = {
     id: string | number,
@@ -42,9 +43,11 @@ export class HomePage implements OnInit {
     newsData: Array<INews> = [];
 
     popularData: Array<INews> = [];
+    showChat: boolean = false;
 
     constructor(
-        private router: Router
+        private router: Router,
+        private modalController: ModalController
     ) { }
 
     ngOnInit() {
@@ -116,6 +119,19 @@ export class HomePage implements OnInit {
         }];        
     }
 
+    ionViewDidEnter() {
+        if (localStorage.isPartyChatOn === 'yes') {
+            this.showChat = true;
+        }
+    }
+
+    async presentChatModal() {
+        const modal = await this.modalController.create({
+          component: ChatPage,
+        });
+        return await modal.present();
+    }
+
     getIndex(e: any) {
         console.log(this.slides);
     }

src/app/live/live.page.html

@@ -134,6 +134,7 @@
     <ion-fab vertical="bottom" horizontal="end" slot="fixed" *ngIf="!showAddParty">
         <ion-fab-button class="chat-button" (click)="presentChatModal()">
             <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
+            <ion-badge color="dark"> 10 </ion-badge>
         </ion-fab-button>
     </ion-fab>
 

src/app/live/live.page.scss

@@ -237,11 +237,6 @@ ion-content {
     }
 }
 
-
-.chat-button {
-    --background: #d73e53;
-}
-
 ion-slides {
     padding: 30px 0 20px 0;
     position: relative;

src/app/live/live.page.ts

@@ -49,8 +49,8 @@ export class LivePage implements OnInit {
         spaceBetween: 15,
         initialSlide: 0,
         centeredSlides: true,
-        simulateTouch: false,
-        followFinger: false,
+        // simulateTouch: false,
+        // followFinger: false,
     };
 
     matchStats: {
@@ -275,12 +275,12 @@ export class LivePage implements OnInit {
                 totalWickets: 1,
             }
         }
+    }
 
-
-        if (localStorage.isPartyChatOn = 'no') {
+    ionViewDidEnter() {
+        if (localStorage.isPartyChatOn === 'no') {
             this.showAddParty = true;
         }
-
     }
 
     async presentChatModal() {
@@ -298,6 +298,7 @@ export class LivePage implements OnInit {
           modal.onDidDismiss().then((data) => {
               if(data.data.createParty) {
                   this.showAddParty = false;
+                  localStorage.isPartyChatOn = 'yes';
               }
           });
 

src/global.scss

@@ -52,4 +52,23 @@ figure {
             transform: translateY(0vh);
         }
     }   
+}
+
+.chat-button {
+    --background: #d73e53;
+    position: relative;
+    overflow: visible;
+    width: 60px;
+    height: 60px;
+
+    ion-icon {
+        font-size: 25px;
+    }
+
+    ion-badge {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        font-size: 10px;
+    }
 }