diff --git a/package-lock.json b/package-lock.json index db9d8df..6cc70ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7860,6 +7860,11 @@ "minimist": "^1.2.5" } }, + "moment": { + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", diff --git a/package.json b/package.json index b2c08b9..4017e3d 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@ionic-native/status-bar": "^5.0.0", "@ionic/angular": "^5.0.0", "faker": "^5.1.0", + "moment": "^2.29.1", "rxjs": "~6.5.5", "tslib": "^2.0.0", "zone.js": "~0.10.3" diff --git a/src/app/booking/booking.page.html b/src/app/booking/booking.page.html index 51b96c6..7ef331f 100644 --- a/src/app/booking/booking.page.html +++ b/src/app/booking/booking.page.html @@ -4,11 +4,44 @@

Booking

- - +
+ + + + +
+
+ +
+
+ +
+
+
+ + + +
+ +

+ {{ getEventDateTime(matchDay.dateTime) }}
+ {{ matchDay.staduim.name }} Stadium +

+ +

{{ matchDay.matchDetails.home.name }} v/s {{ matchDay.matchDetails.away.name }}

+ +
{{ matchDay.matchType }}
+
+
+ + + + diff --git a/src/app/booking/booking.page.scss b/src/app/booking/booking.page.scss index e69de29..ee222cf 100644 --- a/src/app/booking/booking.page.scss +++ b/src/app/booking/booking.page.scss @@ -0,0 +1,173 @@ +$lumous-blue: #1a2389; +$dark-blue-shade1: #24367c; +$dark-blue-shade2: #263982; +$green: #01b868; +$pink: #d73e53; + +ion-content { + --background: transparent; + background: linear-gradient(90deg, $dark-blue-shade1 50%, $dark-blue-shade2); +} + +.heading-holder { + margin-bottom: 2.3rem; +} + +.main-header { + color: white; + font-size: 2.3rem; + font-weight: 700; + letter-spacing: 1px; + padding: 0px 7%; + margin: 5% 0%; +} + +.segments { + width: 100%; + padding: 0px 7%; + margin: 0%; + display: inline-block; + overflow-x: auto; + white-space: nowrap; + + button { + display: inline-block; + background-color: rgba(#ffff, 0.4); + padding: 10px 15px; + color: white; + font-size: 1rem; + font-weight: 400; + margin-right: 5%; + position: relative; + border-radius: 7px; + transition: color 0.3s, background-color 0.3s; + + &.active { + font-weight: 500; + background-color: white; + color: $lumous-blue; + } + } +} + + +ion-slides { + padding: 8px 0; + position: relative; + left: 0; + top: 0; + z-index: 1; + overflow: visible; + height: 65vh; + overflow: hidden; + + ion-slide { + display: block; + overflow: visible; + text-align: left; + height: 80%; + position: relative; + transform: scale(0.9); + background-color: transparent; + transition: transform 0.3s; + + &.swiper-slide-active { + transform: scale(1); + } + } + + .image-holder { + position: relative; + height: 100%; + overflow: hidden; + border-radius: 7px; + box-shadow: 0px 10px 25px -7px darken($lumous-blue, 80%); + + figure { + margin: 0; + display: block; + width: 100%; + height: 100%; + filter: brightness(60%); + transition: filter 0.3s; + border: 0px; + padding: 0; + border-radius: 7px; + overflow: hidden; + + img { + height: 100%; + object-fit: cover; + display: block; + width: 100%; + } + } + } + + .content { + height: auto; + position: relative; + transform: translateY(-80%); + box-shadow: 0px 20px 25px -10px darken($lumous-blue, 80%); + background-color: white; + width: 90%; + margin: 0 auto; + border-radius: 7px; + overflow: visible; + z-index: 1; + padding-bottom: 10px; + } + + .teams { + display: flex; + justify-content: space-between; + width: 130px; + margin: 0 auto -25px auto; + height: 50px; + border-radius: 30px; + background-color: lighten(#cecece, 10%); + align-items: center; + padding: 0 15px; + position: relative; + transform: translateY(-25px); + z-index: 1; + + span { + font-size: 1rem; + width: 12px; + height: 3px; + background-color: darken(#cecece, 15%); + } + + img { + width: 33px; + height: 33px; + border-radius: 50%; + } + } + + p, h4, h5 { + margin: 0; + padding: 0 10%; + text-align: center; + } + + .event-details { + margin: 20px 0 5px; + color: darken(#cecece, 30%); + font-size: 0.8rem; + font-weight: 500; + } + + h4 { + color: darken(#cecece, 50%); + font-size: 1.1rem; + line-height: 1.5; + } + + h5 { + color: darken(#cecece, 50%); + font-size: 0.9rem; + line-height: 1.5; + } +} \ No newline at end of file diff --git a/src/app/booking/booking.page.ts b/src/app/booking/booking.page.ts index f61ec98..767a4b7 100644 --- a/src/app/booking/booking.page.ts +++ b/src/app/booking/booking.page.ts @@ -1,5 +1,7 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IonSlides } from '@ionic/angular'; import * as faker from 'faker'; +import * as moment from 'moment'; @Component({ selector: 'app-booking', @@ -7,9 +9,52 @@ import * as faker from 'faker'; styleUrls: ['./booking.page.scss'], }) export class BookingPage implements OnInit { + @ViewChild('slides') slides: IonSlides; + + selectedDate: Date; + + 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', + }]; + + slideOpts = { + slidesPerView: 1.5, + spaceBetween: 15, + initialSlide: 0, + centeredSlides: true, + simulateTouch: false, + followFinger: false, + }; bookingSeatsData: Array<{ - dateTime: Date | string, + dateTime: Date, + staduim: { + name: string, + topView: string, + sideView: string, + }, + matchType: string, matchDetails: { home: { name: string, @@ -31,19 +76,19 @@ export class BookingPage implements OnInit { constructor() { } + 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: { - name: 'KXIP', - image: 'assets/home-team/KXIP.svg' - }, - away: { - name: 'MI', - image: 'assets/home-team/KXIP.svg' - } + 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', @@ -61,25 +106,38 @@ export class BookingPage implements OnInit { }); } + for (let i = 0; i < this.bookingSeatsData.length; i += 1) { + for (let j = 0; j < this.bookingSeatsData[i].seatsAvailable.length; j += 1) { - setTimeout(() => { - 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 price = faker.commerce.price(); - - for (let k = 0; k < 5; k += 1) { - this.bookingSeatsData[i].seatsAvailable[j].seats.push({ - id: this.bookingSeatsData[i].seatsAvailable[j].stand + '##' + k.toString(), - price - }); - } - } + for (let k = 0; k < 5; k += 1) { + this.bookingSeatsData[i].seatsAvailable[j].seats.push({ + id: this.bookingSeatsData[i].seatsAvailable[j].stand + '##' + k.toString(), + price + }); + } } - }, 100); + } + + this.selectedDate = this.bookingSeatsData[0].dateTime; console.log(this.bookingSeatsData); } + + getEventDateTime(dateTime: Date) { + return moment(dateTime).format('ddd, MMM DD YYYY hh:mm a'); + } + + + selectMatchDate() { + this.slides.getActiveIndex().then((index) => this.selectedDate = this.bookingSeatsData[index].dateTime); + } + + selectMatchCard(index: number) { + this.slides.slideTo(index); + } + } diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index 8189590..b07831c 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -13,8 +13,7 @@ - +
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts index abd7a09..4b56c23 100644 --- a/src/app/home/home.page.ts +++ b/src/app/home/home.page.ts @@ -29,12 +29,11 @@ export class HomePage implements OnInit { @ViewChild('slides') slides: IonSlides; selectedTab: string = 'news'; - selectedArticle: number = null; slideOpts = { slidesPerView: 1.5, spaceBetween: 15, - initialSlide: 1, + initialSlide: 0, centeredSlides: true, simulateTouch: false, followFinger: false, @@ -108,10 +107,6 @@ export class HomePage implements OnInit { }]; } - ngAfterViewInit() { - this.selectedArticle = 0; - } - getIndex(e: any) { console.log(this.slides); } diff --git a/src/assets/home-team/stadium-sv.svg b/src/assets/home-team/stadium-sv.svg new file mode 100644 index 0000000..90d9d2b --- /dev/null +++ b/src/assets/home-team/stadium-sv.svg @@ -0,0 +1,347 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/home-team/stadium-tv.svg b/src/assets/home-team/stadium-tv.svg new file mode 100644 index 0000000..a243c86 --- /dev/null +++ b/src/assets/home-team/stadium-tv.svg @@ -0,0 +1,131 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +