diff --git a/src/app/booking/booking.page.ts b/src/app/booking/booking.page.ts index 749178a..c8878ec 100644 --- a/src/app/booking/booking.page.ts +++ b/src/app/booking/booking.page.ts @@ -127,8 +127,6 @@ export class BookingPage implements OnInit { this.selectedDate = this.bookingSeatsData[0].dateTime; - console.log(this.bookingSeatsData); - } diff --git a/src/app/chat/chat.page.ts b/src/app/chat/chat.page.ts index a48d64d..dfc0dc7 100644 --- a/src/app/chat/chat.page.ts +++ b/src/app/chat/chat.page.ts @@ -132,7 +132,7 @@ export class ChatPage implements OnInit { setTimeout(() => { this.scrollToEnd(); - }, 500); + }, 300); }, 200); diff --git a/src/app/live/live.page.html b/src/app/live/live.page.html index 3591e42..56b1ec8 100644 --- a/src/app/live/live.page.html +++ b/src/app/live/live.page.html @@ -15,37 +15,76 @@
T20 Qualifiers -

Kings XI Punjab v/s Mumbai Indians

+

{{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }}

Sehwag, KL Rahul

Pollard

-
Kings XI Punjab
-
179/9 (19.3)
+
{{ matchStats.homeTeam.teamName }}
+
{{ matchStats.homeTeam.totalScore }}/{{ matchStats.homeTeam.totalWickets }} ({{ matchStats.homeTeam.overs }})
-
Mumbai Indians
-
10/2 (5.5)
+
{{ matchStats.awayTeam.teamName }}
+
{{ matchStats.awayTeam.totalScore }}/{{ matchStats.awayTeam.totalWickets }} ({{ matchStats.awayTeam.overs }})
diff --git a/src/app/live/live.page.scss b/src/app/live/live.page.scss index 7e3a1de..cf87e9a 100644 --- a/src/app/live/live.page.scss +++ b/src/app/live/live.page.scss @@ -8,6 +8,10 @@ ion-content { background: linear-gradient(90deg, $dark-blue-shade1 50%, $dark-blue-shade2); } +.content-container { + padding-bottom: 50px; +} + .heading-holder { margin-bottom: 2.7rem; padding: 0px 7%; @@ -129,39 +133,113 @@ ion-content { width: 86%; margin: 0 auto; - li { - display: flex; - width: 100%; - background: linear-gradient(90deg, darken($dark-blue-shade2, 10%) 50%, $dark-blue-shade2); + .collapsible-card { margin: 30px auto; - border-radius: 10px; - padding: 0px 15px; - justify-content: space-between; + border-radius: 10px; + overflow: hidden; + background: linear-gradient(90deg, darken($dark-blue-shade2, 10%) 50%, $dark-blue-shade2); + box-shadow: 0px 0px 5px darken($dark-blue-shade2, 30%); height: 50px; - align-items: center; - label { + -webkit-perspective: 1200px; + -moz-perspective: 1200px; + -ms-perspective: 1200px; + perspective: 1200px; + + &.active { + height: auto; + + header { + border-bottom: 1px solid rgba(white, 0.1); + } + } + + header { + margin: 0 auto; + display: flex; + width: calc(100% - 30px); + justify-content: space-between; + height: 50px; + align-items: center; + + label { + font-size: 1rem; + color: white; + font-weight: 500; + letter-spacing: 0.5px; + opacity: 0.9; + } + + button { + border-radius: 50%; + background-color: $green; + height: 30px; + width: 30px; + font-size: 24px; + color: white; + } + } + + .view-more-button { + display: block; + width: 100%; + border-radius: 7px; + background-color: $pink; + color: white; font-size: 1rem; + height: 40px; + margin-top: 15px; + box-shadow: 0px 0px 5px 2px darken($dark-blue-shade2, 10%); + } + + .card { + width: 100%; + padding: 15px; + } + + table { + width: 100%; color: white; - font-weight: 500; - letter-spacing: 0.5px; - opacity: 0.9; + font-size: 1rem; + + thead { + line-height: 2; + } } - button { - border-radius: 50%; - background-color: $green; - height: 30px; - width: 30px; - font-size: 24px; - color: white; + tr { + &:last-child { + td { + padding-bottom: 0px; + } + } + + td { + overflow: hidden; + width: 100%; + padding-bottom: 15px; + + span { + font-size: 0.8rem; + color: rgba(white, 0.5); + } + + &:nth-child(1) { + width: 60%; + } + + &:nth-child(2) { + width: 20%; + } + + &:nth-child(3) { + width: 20%; + } + } } } } -ion-fab { - transform: translateX(-30%); -} .chat-button { --background: #d73e53; diff --git a/src/app/live/live.page.ts b/src/app/live/live.page.ts index eed0e64..6a9f429 100644 --- a/src/app/live/live.page.ts +++ b/src/app/live/live.page.ts @@ -1,6 +1,34 @@ import { Component, OnInit } from '@angular/core'; import { ModalController } from '@ionic/angular'; +import * as moment from 'moment'; import { ChatPage } from '../chat/chat.page'; +import * as faker from 'faker'; +import { Router } from '@angular/router'; + +type IscoreCard = { + teamName: string, + teamLogo: string, + batting: Array<{ + name: string, + jersey: number, + score: number, + ballsPlayed: number, + wicketTo?: string, + boundaries: number, + sixes: number + }>, + bowling: Array<{ + name: string, + jersey: number, + runs: number, + overs: number, + wickets: number + }>, + totalScore: number, + totalWickets: number, + overs: number, + extras: number +} @Component({ selector: 'app-live', @@ -8,12 +36,218 @@ import { ChatPage } from '../chat/chat.page'; styleUrls: ['./live.page.scss'], }) export class LivePage implements OnInit { + showScoreCard: boolean = true; + + matchStats: { + homeTeam: IscoreCard, + awayTeam: IscoreCard + }; + + teams = [{ + name: 'RCB', + image: 'https://i.pinimg.com/originals/4f/f9/99/4ff99925fd51296daf76425b11c04195.jpg' + }, { + name: 'MI', + image: 'assets/logos/mi.svg', + }, { + name: 'CSK', + image: 'https://www.searchpng.com/wp-content/uploads/2019/02/Chennai-Super-Kings-Logo-PNG-Image-.png' + }]; + + stadiums = [{ + name: 'Chinnaswamy', + sideView: 'https://www.royalchallengers.com/PRRCB01/public/styles/1061x767_landscape/public/2020-04/275679.jpg?h=61617f72&itok=6xKgHpE-', + topView: 'assets/home-team/stadium-tv.svg', + }, { + name: 'IS Bindra', + sideView: 'https://5.imimg.com/data5/VO/UB/MY-3103550/ae-cricket-stadium-lighting-500x500.jpg', + topView: 'assets/home-team/stadium-tv.svg' + }, { + name: 'Chidambaram Stadium', + sideView: 'https://sportzwiki.com/wp-content/uploads/2019/03/11.jpg', + topView: 'assets/home-team/stadium-tv.svg', + }]; + + bookingSeatsData: Array<{ + dateTime: Date, + staduim: { + name: string, + topView: string, + sideView: string, + }, + matchType: string, + matchDetails: { + home: { + name: string, + image: string, + }, + away: { + name: string, + image: string, + } + }, + seatsAvailable: Array<{ + stand: 'Grand' | 'Pavilion' | 'First' | 'Second', + seats: Array<{ + id: number | string, + price: number + }> + }> + }> = []; constructor( - public modalController: ModalController + public modalController: ModalController, + private router: Router ) { } + getFormattedDateTime(dateTime: Date) { + return moment(dateTime).format('DD MMM'); + } + ngOnInit() { + for (let i = 0; i < 3; i += 1) { + this.bookingSeatsData.push({ + dateTime: faker.date.future(), + staduim : this.stadiums[i], + matchType: 'T20 League', + matchDetails: { + home: i !==1 ? this.teams[i] : { name: 'KXIP', image: 'assets/home-team/KXIP.svg' }, + away: i ===1 ? this.teams[i] : { name: 'KXIP', image: 'assets/home-team/KXIP.svg' } + }, + seatsAvailable: [{ + stand: 'Grand', + seats: [], + }, { + stand: 'Pavilion', + seats: [], + }, { + stand: 'First', + seats: [], + }, { + stand: 'Second', + seats: [], + }] + }); + } + + for (let i = 0; i < this.bookingSeatsData.length; i += 1) { + for (let j = 0; j < this.bookingSeatsData[i].seatsAvailable.length; j += 1) { + + let price = faker.commerce.price(); + + let randomNumber = Math.random() * (15 - 0) + 0; + + for (let k = 0; k < randomNumber; k += 1) { + this.bookingSeatsData[i].seatsAvailable[j].seats.push({ + id: this.bookingSeatsData[i].seatsAvailable[j].stand + '##' + k.toString(), + price + }); + } + } + } + + this.matchStats = { + homeTeam: { + teamName: 'KXIP', + teamLogo: 'assets/home-team/KXIP.svg', + batting: [{ + name: 'V Sehwag', + jersey: 44, + score: 62, + ballsPlayed: 30, + wicketTo: 'c Sachin, b D.Steyn', + boundaries: 8, + sixes: 4, + }, { + name: 'KL Rahul', + jersey: 10, + score: 85, + ballsPlayed: 80, + boundaries: 10, + sixes: 3, + }, { + name: 'G Maxwell', + jersey: 11, + score: 10, + ballsPlayed: 10, + boundaries: 0, + sixes: 1, + }], + bowling: [{ + name: 'Harmeet Singh', + jersey: 13, + runs: 22, + overs: 2, + wickets: 1 + }, { + name: 'Mishra', + jersey: 25, + runs: 10, + overs: 1, + wickets: 0 + }], + totalScore: 157, + overs: 20, + extras: 0, + totalWickets: 1, + }, + awayTeam : { + teamName: 'MI', + teamLogo: 'assets/logos/mi.svg', + batting: [{ + name: 'S Tendulkar', + jersey: 10, + score: 10, + ballsPlayed: 12, + wicketTo: 'b H.Singh', + boundaries: 0, + sixes: 1, + }, { + name: 'K Pollard', + jersey: 22, + score: 44, + ballsPlayed: 11, + boundaries: 1, + sixes: 5, + }, { + name: 'D Bravo', + jersey: 38, + score: 5, + ballsPlayed: 3, + boundaries: 1, + sixes: 0, + }], + bowling: [{ + name: 'D Steyn', + jersey: 12, + runs: 55, + overs: 4, + wickets: 1 + }, { + name: 'D Bravo', + jersey: 38, + runs: 40, + overs: 4, + wickets: 0 + }, { + name: 'S Tendulkar', + jersey: 10, + runs: 25, + overs: 4, + wickets: 0 + }, { + name: 'Trent Boult', + jersey: 17, + runs: 37, + overs: 4, + wickets: 0 + }], + totalScore: 60, + overs: 3.2, + extras: 1, + totalWickets: 1, + } + } } async presentChatModal() { @@ -24,4 +258,8 @@ export class LivePage implements OnInit { return await modal.present(); } + showBookingDetails(matchData) { + this.router.navigate(['/booking-details' , { matchData: JSON.stringify(matchData) }]); + } + }