Chat UI with faker data

src/app/chat/chat.page.html

@@ -1,9 +1,59 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>chat</ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
+    <section class="action-buttons">
+        <div class="nav">
+            <button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
+        </div>
+        <div class="action">
+            <button class="toggle" (click)="isPollChecked = !isPollChecked"> <ion-checkbox [(ngModel)]="isPollChecked"></ion-checkbox> Poll </button>
+            <button> <ion-icon name="link-outline"></ion-icon> </button>            
+        </div>
+    </section>
+
+
+    <section class="chat">
+        
+        <section class="chat-per-over" *ngFor="let overChat of chatData">
+            <header class="over-heading"> <h5> Over {{ overChat.over }} </h5> </header>
+
+            <section class="question-card" *ngIf="isPollChecked">
+                <header class="question">
+                    {{ overChat.triviaQuestion.question }}
+                </header>
+
+                <ul class="options" [ngClass]="{'show-votes' : overChat.triviaQuestion.selectedAnswer !== null }">
+                    <li *ngFor="let option of overChat.triviaQuestion.options; let i = index"
+                    [ngClass]="{'active' : overChat.triviaQuestion.selectedAnswer === i }"
+                    (click)="overChat.triviaQuestion.selectedAnswer = i">
+                        <span class="progress"
+                        [ngStyle]="{ 'width.%' : (overChat.triviaQuestion.selectedAnswer !== null ? ((option.pollUserCount * 100) / overChat.triviaQuestion.maxUserCount) : 0 ) }"></span>
+                        <label> {{ option.text }} </label>
+                        <p> {{ option.pollUserCount }} votes </p>
+                    </li>
+                </ul>
+            </section>
+
+            <section class="chat-per-ball" *ngFor="let ballChats of overChat.ballChat;">
+                <header class="ball-heading"> Ball {{ ballChats.ball }} </header>
+
+                <ul>
+                    <li *ngFor="let chat of ballChats.chat" [ngClass]="{'sender': chat.user && chat.user.name === 'You'}">
+                        <div class="user-data" *ngIf="chat.user">
+                            <img [src]="chat.user.image">
+                            <label [ngStyle]="{'color' : chat.user.color }"> {{ chat.user.name }} </label>
+                        </div>
+
+                        <div class="user-data" *ngIf="!chat.user">
+                            <img src="assets/home-team/KXIP.svg">
+                            <label> A KXIP Fan </label>
+                        </div>
+                        <p> {{ chat.text }} </p>
+                    </li>
+                </ul>
+
+            </section>
+        </section>
+
+    </section>
+
 
 </ion-content>

src/app/chat/chat.page.scss

@@ -0,0 +1,285 @@
+$dark-blue: #161e2d;
+$blue-grey: #949599;
+$green: #01b868;
+$pink: #d73e53;
+$dark-blue-shade1: #24367c;
+$dark-blue-shade2: #263982;
+
+ion-content {
+    --background: transparent;
+    background-color: $dark-blue;
+}
+
+.action-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 5% 15px 10px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+    background-color: #161e2d;
+    box-shadow: 0px 0px 5px black;
+    
+    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;
+        }
+    }
+
+    .action {
+        display: flex;
+    }
+
+    .action button {
+        width: 35px;
+        height: 35px;
+        border: 1px solid $blue-grey;
+        background-color: rgba($blue-grey, 0.1);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 15px;
+
+        ion-icon {
+            color: $blue-grey;
+            font-size: 17px;
+        }
+
+        &.toggle {
+            width: auto;
+            padding: 0 10px;
+            border-radius: 7px;
+            color: $blue-grey;
+            font-weight: 500;
+            letter-spacing: 0.5px;
+
+            ion-checkbox {
+                pointer-events: none;
+                margin: 0;
+                margin-right: 10px;
+                --border-color: #949599a6;
+                --border-color-checked: #d73e53;
+                --background: #94959970;
+                --background-checked: #d73e53;
+            }
+        }
+    }
+
+}
+
+
+.chat {
+    margin-top: 65px;
+    padding: 10px 5%;
+    height: calc(100vh - 65px);
+    color: white;
+}
+
+
+.chat-per-over {
+    margin: 20px 0;
+
+    .over-heading {        
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: calc(50% - 2px);
+            height: 4px;
+            background-color: $blue-grey;
+            width: 100%;
+        }
+        
+        h5 {
+            position: relative;
+            background-color: $dark-blue;
+            padding: 0 10px;
+            margin: 0;
+            font-size: 1.2rem;
+            color: $blue-grey;
+            font-weight: 500;
+            letter-spacing: 1px;
+        }
+    }
+}
+
+.chat-per-ball {
+    margin: 20px 0px 70px 0px;
+
+    .ball-heading {        
+        font-size: 0.9rem;
+        color: $blue-grey;
+        font-weight: 500;
+        letter-spacing: 1px;
+        text-align: center;
+    }
+
+    ul {
+        list-style: none;
+        padding: 0 10px;
+        margin: 0;
+    }
+
+    li {
+        background-color: lighten($dark-blue, 10%);
+        color: white;
+        max-width: 80%;
+        display: block;
+        border-radius: 15px;
+        padding: 10px;
+        margin: 25px auto 25px 0px;
+        box-shadow: -2px 2px 10px -2px black;
+
+        &.sender {
+            margin: 25px 0px 25px auto;
+            box-shadow: 2px 2px 10px -2px black;
+
+            .user-data {
+                flex-direction: row-reverse;
+            }
+        }
+
+        p {
+            margin: 0px;
+            font-size: 0.9rem;
+            color: white;
+            line-height: 1.5;
+            padding: 0 5px;
+        }
+    }
+
+    .user-data {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+        border-bottom: 2px solid rgba($blue-grey, 0.3);
+        padding-bottom: 10px;
+        margin-bottom: 10px;
+
+        img {
+            width: 30px;
+            height: 30px;
+            padding: 2px;
+            object-fit: contain;
+            border-radius: 50%;
+            border: 1px solid $blue-grey;
+            background-color: rgba($blue-grey, 0.3);
+        }
+
+        label {
+            font-size: 0.9rem;
+            color: $blue-grey;
+            font-weight: 500;
+            letter-spacing: 1px;
+            margin: 0px 10px;
+        }
+    }
+}
+
+.question-card {
+    background-color: white;
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px -2px black;
+    margin: 40px 0;
+    overflow: hidden;
+    background-color: rgba($blue-grey, 0.3);
+
+    header {
+        font-size: 1.5rem;
+        line-height: 1.5;
+        color: $dark-blue;
+        border-bottom: 2px solid rgba(white, 0.5);
+        padding: 5px 5px 15px 5px;
+        color: white;
+        margin-bottom: 10px;
+    }
+    
+    .options {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        &.show-votes {
+            p {
+                display: block;
+            }
+        }
+
+        li {
+            background-color: rgba(white, 0.1);
+            border-radius: 7px;
+            overflow: hidden;
+            padding: 0px 15px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 50px;
+            margin: 20px 0;
+            position: relative;
+
+            .progress {
+                position: absolute;
+                left: 0;
+                top: 0;
+                height: 100%;
+                width: 0%;
+                background-color: $dark-blue;
+                pointer-events: none;
+                transition: transform 0.3s, width 0.3s, background-color 0.3s;
+                border-radius: 10px;
+            }
+
+            &.active {
+                .progress {
+                    background-color: $pink;
+                }
+            }
+
+            label {
+                font-weight: 500;
+                font-size: 1.1rem;
+                position: relative;
+            }
+
+            &:last-child {
+                margin: 20px 0px 10px 0px;
+            }
+        }
+
+        p {
+            margin: 0;
+            display: none;
+            font-size: 0.9rem;
+            font-style: italic;
+            font-weight: 500;
+            position: relative;
+        }
+    }
+}

src/app/chat/chat.page.ts

@@ -1,15 +1,101 @@
 import { Component, OnInit } from '@angular/core';
+import * as faker from 'faker';
+import * as moment from 'moment';
+
+type IMember = {
+    name: string,
+    image: string,
+    color: string,
+}
 
 @Component({
-  selector: 'app-chat',
-  templateUrl: './chat.page.html',
-  styleUrls: ['./chat.page.scss'],
+    selector: 'app-chat',
+    templateUrl: './chat.page.html',
+    styleUrls: ['./chat.page.scss'],
 })
 export class ChatPage implements OnInit {
+    isPollChecked: boolean = true;
+
+    chatData: Array<{
+        over: number,
+        ballChat: Array<{
+            ball: number,
+            chat: Array<{
+                user: IMember,
+                text: string,
+            }>,
+        }>,
+        triviaQuestion: {
+            question: string,
+            selectedAnswer: number,
+            maxUserCount: number,
+            options: Array<{
+                text: string,
+                pollUserCount: string,
+            }>,
+        }
+    }> = [];
+
+    members: Array<IMember> = [];
+
+    constructor() { }
+
+    ngOnInit() {
+
+        let myAccountIndex = Math.floor(Math.random() * 11);
+
+        for (let i = 0; i < 12; i += 1) {
+            this.members.push({
+                name:  myAccountIndex === i ? 'You' : faker.name.findName(),
+                image: 'assets/home-team/roster/' + (i + 1) + '.png',
+                color: faker.vehicle.color()
+            });
+        }
+
+        
+        for (let i = 0; i < 5; i += 1) {
+            let options = [];
+            
+            for (let j = 0; j < 4; j += 1) {
+                options.push({
+                    text: faker.lorem.word(),
+                    pollUserCount: faker.random.number()
+                });
+            }            
+
+            let ballChat = [];
+
+            for (let balls = 0; balls < 6; balls += 1) {
+                let randomNumber = Math.floor(Math.random() * 15);
+                let chat = [];
+
+                for (let k = 0; k < randomNumber; k += 1) {
+                    let randomMemberIndex = Math.floor(Math.random() * 19);         
+                    chat.push({
+                        user: this.members[randomMemberIndex],
+                        text: faker.lorem.sentence(),
+                        time: faker.time.recent(),
+                    });
+                }
+
+                ballChat.push({
+                    ball: balls,
+                    chat: chat
+                });
+            }
 
-  constructor() { }
+            this.chatData.push({
+                over: i,
+                ballChat: ballChat,
+                triviaQuestion: {
+                    question: faker.lorem.sentence(),
+                    maxUserCount: Math.max.apply(Math, options.map(function(o) { return o.pollUserCount; })),
+                    options: options,
+                    selectedAnswer: Math.floor(Math.random() * 4),
+                }
+            });
+        }
 
-  ngOnInit() {
-  }
+    }
 
 }

src/app/match-details/match-details.page.scss

@@ -144,7 +144,7 @@ ion-content {
             width: 50px;
             height: 10px;
             border-radius: 50%;
-            background-color: white;
+            background-color: lighten($blue-grey, 20%);
             box-shadow: 0px 2px 5px $dark-blue;
             margin-top: -5px;
         }