From 5a16b297d73a77f1ade1e14e5e8593fd2b9f83dc Mon Sep 17 00:00:00 2001
From: kj1352 <nikhilkj24@gmail.com>
Date: Sun, 10 Jan 2021 08:43:41 +0530
Subject: [PATCH] Chat UI with automated question trivia and scroll to last
 chat

---
 src/app/chat/chat.page.html | 19 +++++++--
 src/app/chat/chat.page.scss | 48 +++++++++++++++++++++
 src/app/chat/chat.page.ts   | 83 ++++++++++++++++++++++++++++++++++++-
 3 files changed, 144 insertions(+), 6 deletions(-)

diff --git a/src/app/chat/chat.page.html b/src/app/chat/chat.page.html
index eb60040..2eccf3b 100644
--- a/src/app/chat/chat.page.html
+++ b/src/app/chat/chat.page.html
@@ -12,7 +12,9 @@
 
     <section class="chat">
         
-        <section class="chat-per-over" *ngFor="let overChat of chatData">
+        <section class="chat-per-over" 
+        *ngFor="let overChat of chatData; let overIndex = index" 
+        id="over-{{ overIndex }}">
             <header class="over-heading"> <h5> Over {{ overChat.over }} </h5> </header>
 
             <section class="question-card" *ngIf="isPollChecked">
@@ -32,11 +34,14 @@
                 </ul>
             </section>
 
-            <section class="chat-per-ball" *ngFor="let ballChats of overChat.ballChat;">
-                <header class="ball-heading"> Ball {{ ballChats.ball }} </header>
+            <section class="chat-per-ball" *ngFor="let ballChats of overChat.ballChat; let ballIndex = index"
+            id="ball-{{ overIndex }}-{{ ballIndex }}">
+                <header class="ball-heading"> Ball {{ ballChats.ball + 1 }} </header>
 
                 <ul>
-                    <li *ngFor="let chat of ballChats.chat" [ngClass]="{'sender': chat.user && chat.user.name === 'You'}">
+                    <li *ngFor="let chat of ballChats.chat; let chatIndex = index" 
+                        [ngClass]="{'sender': chat.user && chat.user.name === 'You'}"
+                        id="chat-{{ overIndex }}-{{ ballIndex }}-{{ chatIndex }}">
                         <div class="user-data" *ngIf="chat.user">
                             <img [src]="chat.user.image">
                             <label [ngStyle]="{'color' : chat.user.color }"> {{ chat.user.name }} </label>
@@ -56,4 +61,10 @@
     </section>
 
 
+    <div class="input-holder">
+        <input type="text" placeholder="Type to send" [(ngModel)]="myMessage">
+        <button (click)="sendMessage()"> <ion-icon name="send"></ion-icon> </button>
+    </div>
+
+
 </ion-content>
diff --git a/src/app/chat/chat.page.scss b/src/app/chat/chat.page.scss
index 1bee2a6..702722b 100644
--- a/src/app/chat/chat.page.scss
+++ b/src/app/chat/chat.page.scss
@@ -92,6 +92,8 @@ ion-content {
     padding: 10px 5%;
     height: calc(100vh - 65px);
     color: white;
+    padding-bottom: 100px;
+    overflow: auto;
 }
 
 
@@ -282,4 +284,50 @@ ion-content {
             position: relative;
         }
     }
+}
+
+.input-holder {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    background-color: lighten($dark-blue, 2%);
+    box-shadow: 0px 0px 5px black;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px 5%;
+    width: 100%;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+
+    input {
+        flex-grow: 1;
+        border: 0px;
+        background-color: lighten($dark-blue, 10%);
+        height: 40px;
+        border-radius: 20px;
+        color: white;
+        font-size: 14px;
+        font-weight: 500;
+        padding: 0px 10px 0px 15px;
+        margin-right: 5%;
+
+        &::placeholder {
+            font-style: italic;
+            letter-spacing: 0.5px;
+        }
+    }
+
+    button {
+        background-color: $green;
+        color: white;
+        font-size: 15px;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
\ No newline at end of file
diff --git a/src/app/chat/chat.page.ts b/src/app/chat/chat.page.ts
index df4ff54..c8a8145 100644
--- a/src/app/chat/chat.page.ts
+++ b/src/app/chat/chat.page.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import * as faker from 'faker';
-import * as moment from 'moment';
 
 type IMember = {
     name: string,
@@ -15,6 +14,7 @@ type IMember = {
 })
 export class ChatPage implements OnInit {
     isPollChecked: boolean = true;
+    myMessage: string = '';
 
     chatData: Array<{
         over: number,
@@ -37,6 +37,7 @@ export class ChatPage implements OnInit {
     }> = [];
 
     members: Array<IMember> = [];
+    myAccount: IMember;
 
     constructor() { }
 
@@ -52,6 +53,8 @@ export class ChatPage implements OnInit {
             });
         }
 
+        this.myAccount = this.members[myAccountIndex];
+
         
         for (let i = 0; i < 5; i += 1) {
             let options = [];
@@ -66,7 +69,7 @@ export class ChatPage implements OnInit {
             let ballChat = [];
 
             for (let balls = 0; balls < 6; balls += 1) {
-                let randomNumber = Math.floor(Math.random() * 15);
+                let randomNumber = Math.floor(Math.random() * 3) + 1;
                 let chat = [];
 
                 for (let k = 0; k < randomNumber; k += 1) {
@@ -96,6 +99,82 @@ export class ChatPage implements OnInit {
             });
         }
 
+
+        setTimeout(() => {
+            this.scrollToEnd();
+        }, 500);
+
+
+        setTimeout(() => {
+            let options = [];
+
+            for (let j = 0; j < 4; j += 1) {
+                options.push({
+                    text: faker.lorem.word(),
+                    pollUserCount: faker.random.number()
+                });
+            }
+
+            this.chatData.push({
+                over: this.chatData.length - 1,
+                ballChat: [{
+                    ball: 0,
+                    chat: [],
+                }],
+                triviaQuestion: {
+                    question: faker.lorem.sentence(),
+                    maxUserCount: Math.max.apply(Math, options.map(function(o) { return o.pollUserCount; })),
+                    options: options,
+                    selectedAnswer: null,
+                }
+            });
+
+            setTimeout(() => {
+                this.scrollToEnd();
+            }, 500);
+            
+
+        }, 3000);
+
+    }
+
+    scrollToEnd() {
+        try {
+            let lastOver = this.chatData.length - 1;
+            let lastBall = this.chatData[lastOver].ballChat? this.chatData[lastOver].ballChat.length - 1 : null;
+            let lastChat = this.chatData[lastOver].ballChat[lastBall].chat ? this.chatData[lastOver].ballChat[lastBall].chat.length - 1 : null;
+
+            document.querySelector('#chat-' + lastOver + '-' + lastBall + '-' + lastChat).scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        } catch {
+            document.querySelector('#over-' + (this.chatData.length - 1).toString()).scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    }
+
+    sendMessage() {
+        let lastOver = this.chatData.length - 1;
+        let lastBall = this.chatData[lastOver].ballChat.length - 1;
+        let lastChat = this.chatData[lastOver].ballChat[lastBall].chat.length - 1;
+
+        if (lastChat < 0) {
+            lastChat = 0;
+        }
+
+        this.chatData[lastOver].ballChat[lastBall].chat.push({
+            user: this.myAccount,
+            text: this.myMessage
+        });
+
+        setTimeout(() => {
+            this.scrollToEnd();
+            
+            this.myMessage = '';
+        }, 100);
     }
 
 }