kj
/
kxip-app
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Procházet zdrojové kódy

Home page API integration

master
kj1352 před 4 roky
rodič
66c7885300
revize
fda23383a6
10 změnil soubory, kde provedl 165 přidání a 231 odebrání
Rozdělené zobrazení
Diff Options
Zobrazit statistiky Stáhněte soubor opravy Stáhněte rozdílový soubor
  1. +3
    -0
      src/app/app.module.ts
  2. +2
    -2
      src/app/home-details/home-details.page.html
  3. +12
    -19
      src/app/home-details/home-details.page.ts
  4. +23
    -60
      src/app/home/home.page.html
  5. +12
    -22
      src/app/home/home.page.scss
  6. +48
    -126
      src/app/home/home.page.ts
  7. +22
    -2
      src/app/services/news.service.ts
  8. +16
    -0
      src/app/services/toast.service.spec.ts
  9. +23
    -0
      src/app/services/toast.service.ts
  10. +4
    -0
      src/global.scss

+ 3
- 0
src/app/app.module.ts Zobrazit soubor

@@ -16,7 +16,9 @@ import { environment } from '../environments/environment';
import { MyHammerConfig } from './hammer-config';
import { HttpClientModule } from '@angular/common/http';

// Custom Services
import { NewsService } from './services/news.service';
import { ToastService } from './services/toast.service';

import { GooglePlus } from '@ionic-native/google-plus/ngx';

@@ -46,6 +48,7 @@ var firebaseConfig = {
SplashScreen,
GooglePlus,
NewsService,
ToastService,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{ provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig },
],


+ 2
- 2
src/app/home-details/home-details.page.html Zobrazit soubor

@@ -1,4 +1,4 @@
<ion-content>
<!-- <ion-content>
<header class="topbar">
<button (click)="back()" class="close-article-button active">
@@ -74,4 +74,4 @@
</section>

</section>
</ion-content>
</ion-content> -->

+ 12
- 19
src/app/home-details/home-details.page.ts Zobrazit soubor

@@ -1,8 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { INews } from '../home/home.page';
import { DomSanitizer } from '@angular/platform-browser';
import { NewsService } from '../services/news.service';
import { ToastService } from '../services/toast.service';

@Component({
selector: 'app-home-details',
@@ -10,13 +11,14 @@ import { DomSanitizer } from '@angular/platform-browser';
styleUrls: ['./home-details.page.scss'],
})
export class HomeDetailsPage implements OnInit {
newsDetails: INews;
myComment: string = '';

constructor(
private route: ActivatedRoute,
private location: Location,
private dom:DomSanitizer
private dom:DomSanitizer,
private newsService: NewsService,
private toastService: ToastService
) { }

getUrl(url) {
@@ -24,26 +26,17 @@ export class HomeDetailsPage implements OnInit {
}

ngOnInit() {
this.newsDetails = JSON.parse(this.route.snapshot.paramMap.get('news'));
}
let alias_title = this.route.snapshot.paramMap.get('alias_title');
let type = this.route.snapshot.paramMap.get('type');

back() {
this.location.back();
}
// type 'news' | 'videos' | 'gallery'

postComment() {
this.newsDetails.comments.push({
user: 'Test',
comment: this.myComment,
isLiked: false,
likes: 0,
});

this.myComment = '';
console.log(alias_title);
console.log(type);
}

scrollToAddComment() {
document.querySelector('#comment-input').scrollIntoView({behavior: "smooth", block: "start"});
back() {
this.location.back();
}

}

+ 23
- 60
src/app/home/home.page.html Zobrazit soubor

@@ -1,6 +1,6 @@
<ion-content>
<div class="content-container">
<div class="heading-holder">
<div class="common-heading-holder">
<h2 class="main-header"> # Discover </h2>
<section class="segments">
@@ -8,50 +8,39 @@
(click)="selectedTab = 'news'"> News </button>
<button [ngClass]="{'active' : selectedTab === 'videos'}"
(click)="selectedTab = 'videos'"> Videos </button>
<button [ngClass]="{'active' : selectedTab === 'exclusive'}"
(click)="selectedTab = 'exclusive'"> Exclusive </button>
<button [ngClass]="{'active' : selectedTab === 'gallery'}"
(click)="selectedTab = 'gallery'"> Gallery </button>
</section>
</div>
<ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'news'">
<ion-slide *ngFor="let news of newsData; let i = index">
<ion-slide *ngFor="let news of newsData">
<div class="image-holder">
<figure>
<img [src]="news.image">
<img [src]="image_url + news.image_path + news.image_file_name">
</figure>
<button *ngIf="news.type === 'VIDEO'">
<ion-icon name="play"></ion-icon>
</button>
<button *ngIf="news.type === 'ARTICLE'">
<button>
<ion-icon name="newspaper"></ion-icon>
</button>
</div>
<section class="content">
<h4> {{ news.heading }} </h4>
<h4> {{ news.short_title }} </h4>
<div class="details" [innerHtml]="news.description">
<div class="details" [innerHtml]="news.short_desc">
</div>
</section>
<section class="action-buttons">
<section class="shortcuts">
<button class="wide-button" (click)="news.isLiked = !news.isLiked"
[ngClass]="{'active' : news.isLiked}">
<ion-icon *ngIf="!news.isLiked" name="heart-outline"></ion-icon>
<ion-icon *ngIf="news.isLiked" name="heart"></ion-icon>
<span> {{ news.isLiked ? news.likes + 1 : news.likes }} </span>
</button>
<button>
<ion-icon name="share-social-outline"></ion-icon>
</button>
</section>
</section>
<button class="read-more" (click)="showNewsDetails(news);">
<button class="read-more" (click)="showNewsDetails(news.title_alias);">
<span> More </span>
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
@@ -60,43 +49,32 @@
</ion-slides>

<ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'videos'">
<ion-slide *ngFor="let news of videoData; let i = index">
<ion-slide *ngFor="let news of videoData">
<div class="image-holder">
<figure>
<img [src]="news.image">
<img [src]="image_url + news.image_path + news.image_file_name">
</figure>
<button *ngIf="news.type === 'VIDEO'">
<button>
<ion-icon name="play"></ion-icon>
</button>
<button *ngIf="news.type === 'ARTICLE'">
<ion-icon name="newspaper"></ion-icon>
</button>
</div>
<section class="content">
<h4> {{ news.heading }} </h4>
<h4> {{ news.short_title ? news.short_title : news.asset_title }} </h4>
<div class="details" [innerHtml]="news.description">
<div class="details" [innerHtml]="news.short_desc">
</div>
</section>
<section class="action-buttons">
<section class="shortcuts">
<button class="wide-button" (click)="news.isLiked = !news.isLiked"
[ngClass]="{'active' : news.isLiked}">
<ion-icon *ngIf="!news.isLiked" name="heart-outline"></ion-icon>
<ion-icon *ngIf="news.isLiked" name="heart"></ion-icon>
<span> {{ news.isLiked ? news.likes + 1 : news.likes }} </span>
</button>
<button>
<ion-icon name="share-social-outline"></ion-icon>
</button>
</section>
<button class="read-more" (click)="showNewsDetails(news);">
<button class="read-more" (click)="showNewsDetails(news.title_alias);">
<span> More </span>
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
@@ -105,44 +83,29 @@
</ion-slides>


<ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'exclusive'">
<ion-slide *ngFor="let news of exclusiveData; let i = index">
<ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'gallery'">
<ion-slide *ngFor="let news of galleryData">
<div class="image-holder">
<figure>
<img [src]="news.image">
</figure>
<button *ngIf="news.type === 'VIDEO'">
<ion-icon name="play"></ion-icon>
</button>
<button *ngIf="news.type === 'ARTICLE'">
<ion-icon name="newspaper"></ion-icon>
</button>
<img [src]="image_url + news.image_path + news.image_file_name">
</figure>
</div>
<section class="content">
<h4> {{ news.heading }} </h4>
<h4> {{ news.short_title ? news.short_title : news.asset_title }} </h4>
<div class="details" [innerHtml]="news.description">
<div class="details" [innerHtml]="news.short_desc">
</div>
</section>
<section class="action-buttons">
<section class="shortcuts">
<button class="wide-button" (click)="news.isLiked = !news.isLiked"
[ngClass]="{'active' : news.isLiked}">
<ion-icon *ngIf="!news.isLiked" name="heart-outline"></ion-icon>
<ion-icon *ngIf="news.isLiked" name="heart"></ion-icon>
<span> {{ news.isLiked ? news.likes + 1 : news.likes }} </span>
</button>
<button>
<ion-icon name="share-social-outline"></ion-icon>
</button>
</section>
<button class="read-more" (click)="showNewsDetails(news);">
<button class="read-more" (click)="showNewsDetails(news.title_alias);">
<span> More </span>
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>


+ 12
- 22
src/app/home/home.page.scss Zobrazit soubor

@@ -1,21 +1,5 @@
@import '../colors';

.heading-holder {
margin-bottom: 2.7rem;
}

.main-header {
background: linear-gradient(90deg, lighten($brand-red, 0%), lighten($brand-red, 10%) 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2.3rem;
font-weight: 700;
letter-spacing: 1px;
padding: 0px 7%;
margin: 5% 0%;
}

.segments {
display: flex;
align-items: center;
@@ -25,7 +9,7 @@

button {
background-color: transparent;
color: $blue-grey;
color: lighten($brand-blue, 20%);
font-size: 1.1rem;
font-weight: 400;
margin-right: 5%;
@@ -35,7 +19,7 @@
&.active {
font-weight: 500;
opacity: 1;
color: $blue-grey;
color: lighten($brand-blue, 20%);

&::before {
content: '';
@@ -45,7 +29,7 @@
position: absolute;
bottom: -18px;
left: calc(50% - 4px);
background-color: $blue-grey;
background-color: lighten($brand-blue, 20%);
}
}
}
@@ -166,6 +150,10 @@ ion-slides {
color: var(--light-grey);
overflow: hidden;
transition: opacity 0.1s;

p {
margin: 0;
}
}

.action-buttons {
@@ -222,13 +210,15 @@ ion-slides {
.read-more {
background-color: transparent;
font-size: 0.9rem;
color: $brand-blue;
color: $brand-red;
font-weight: 400;
display: flex;
align-items: center;

ion-icon {
font-size: 1.2rem;
font-size: 1.1rem;
vertical-align: middle;
color: $brand-blue;
color: $brand-red;
}
}
}

+ 48
- 126
src/app/home/home.page.ts Zobrazit soubor

@@ -1,25 +1,8 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides, ModalController } from '@ionic/angular';
import { IonSlides } from '@ionic/angular';
import { Router } from '@angular/router';
import { NewsService } from '../services/news.service';

export type INews = {
id: string | number,
image: string,
heading: string,
description: string,
type: 'VIDEO' | 'ARTICLE',
likes: number,
isBookmarked: boolean,
isLiked: boolean,
videoLink?: string,
comments: Array<{
user: string,
comment: string,
likes: number,
isLiked: boolean
}>,
};
import { NewsService, IMAGE_BASE_URL } from '../services/news.service';
import { ToastService } from '../services/toast.service';

@Component({
selector: 'app-home',
@@ -30,7 +13,7 @@ export type INews = {
export class HomePage implements OnInit {
@ViewChild('slides') slides: IonSlides;
selectedTab: 'news' | 'videos' | 'exclusive' = 'news';
selectedTab: 'news' | 'videos' | 'gallery' = 'news';

slideOpts = {
slidesPerView: 1.5,
@@ -41,109 +24,55 @@ export class HomePage implements OnInit {
// followFinger: false,
};

newsData: Array<INews> = [];
videoData: Array<INews> = [];
exclusiveData: Array<INews> = [];
newsData = [];
videoData = [];
galleryData = [];

showChat: boolean = false;

image_url = IMAGE_BASE_URL;

constructor(
private router: Router,
private modalController: ModalController,
private newsService: NewsService
private newsService: NewsService,
private toastService: ToastService
) { }

ngOnInit() {
this.newsService.getArticles().then((data) => console.log(data));

this.newsData = [{
id: 1,
image: 'https://www.kxip.in/static-assets/waf-images/c3/b2/7d/16-9/DWWfHZsFg1.jpg',
heading: 'Power packed Pooran claims season best score in 2021 T10 League',
description: `<strong> The southpaw scored 89 off just 26 balls to lead from the front in the T10 League. </strong> <br> <br>
Nicholas Pooran proved to be head and shoulders above the rest on Sunday in the 2021 T10 League, as a glitzy knock of 89 off just 26 balls helped his team Northern Warriors shrug aside the Bangla Tigers. The win has put Pooran’s team top of their group after three games, in good stead to make it to the qualifiers. <br> <br>
Batting first of the night, the Northern Warriors lost opener Waseem Muhammad in just the second over. What followed however was complete dominance from the Warriors batsmen, as Pooran and Lendl Simmons stitched together a 122 run partnership. The Kings XI Punjab batsman lit up the Abu Dhabi night sky in a spectacular display of power hitting.<br> <br>
Pooran smashed 12 sixes and three fours in that innings, as he went all guns blazing against the Bangla Tigers bowlers. The 25-year-old showed his intent right from the get go, getting a six over square leg off just his fourth ball. He carried on from that, targeting Qais Ahmed’s first over to get three sixes and a four from that.
`,
type: 'ARTICLE',
likes: 10,
isLiked: false,
isBookmarked: false,
comments: [{
user: 'kxipFan',
comment: 'Yay!',
likes: 2,
isLiked: true,
}, {
user: 'SehwagFan',
comment: 'finally!',
likes: 5,
isLiked: false,
}]
}, {
id: 2,
image: 'https://www.kxip.in/static-assets/waf-images/1b/aa/00/16-9/Xv9C55Ux0g.jpeg',
heading: '16 players retained by Kings XI Punjab for IPL 2021',
description: `<strong> The franchise have decided to release nine players ahead of the auction slated to be held next month. </strong> <br> <br>
Kings XI Punjab have announced their list of retained players for the 2021 Dream11 Indian Premier League, with 16 cricketers making that cut. The list sees the bulk of their core team retained as last season’s captain KL Rahul, opening partner Mayank Agarwal and explosive Caribbean duo of Chris Gayle and Nicholas Pooran have all been retained. <br> <br>
<strong> Retained players </strong>: KL Rahul, Chris Gayle, Mayank Agarwal, Nicholas Pooran, Mandeep Singh, Sarfaraz Khan, Deepak Hooda, Prabhsimran Singh, Mohammed Shami, Chris Jordan, Darshan Nalkande, Ravi Bishnoi, Murugan Ashwin, Arshdeep Singh, Harpreet Brar, Ishan Porel <br> <br>
<strong> Released players </strong>: Glenn Maxwell, Karun Nair, Hardus Viljoen, Jagadeesha Suchith, Mujeeb ur Rahman, Sheldon Cottrell, Jimmy Neesham, Krishnappa Gowtham, Tajinder Singh.`,
type: 'ARTICLE',
isLiked: false,
isBookmarked: false,
likes: 308,
comments: []
}];

this.videoData = [{
id: 1,
image: 'https://i.ytimg.com/vi/4NU0HtDakgo/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBjqUDuxgu-GEduxPmXl21pi_7GqQ',
heading: 'Head Coach Anil Kumble on the players retained!',
description: `"The plan was to retain the core" - Head Coach Anil Kumble on the players retained, released and more... 🗣 <br> <br>
<strong> #IPL2021​ #SaddaPunjab </strong>`,
type: 'VIDEO',
videoLink: 'https://www.youtube.com/embed/4NU0HtDakgo',
isLiked: false,
isBookmarked: false,
likes: 1108,
comments: []
}, {
id: 2,
image: 'https://i.ytimg.com/vi/0WyRVn1rXLM/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAiUlof7rRoAz1tuIwAUjfshSu1Gw',
heading: 'Dart Challenge with the Kings!',
description: `Bullseye with the Kings! 🎯 <br> <br>
PS: Don't miss the end 😋 <br> <br>
<strong> #SaddaPunjab​ #KXIP </strong>`,
type: 'VIDEO',
videoLink: 'https://www.youtube.com/embed/0WyRVn1rXLM',
isLiked: true,
isBookmarked: false,
likes: 2101,
comments: [{
user: 'kxipFan',
comment: 'Cant wait till IPL starts!, Vamos KXIP!',
likes: 2,
isLiked: true,
}]
}];
this.exclusiveData = [{
id: 1,
image: 'https://www.kxip.in/static-assets/waf-images/b2/1a/6a/16-9/d7diD3xdHN.jpg',
heading: 'What makes a good fielder, explained by Jonty Rhodes',
description: `<strong> KXIP’s fielding coach reveals the one tip that can make anyone a better fielder.</strong> <br> <br>
Kings XI Punjab were electric on the field last night, as they managed to defend a meagre total of 127 runs against Sunrisers Hyderabad in the 2020 Dream11 Indian Premier League. KL Rahul’s side managed to hold on to eight catches in the outfield in that game, and were sharp with their ground fielding as well, to give the franchise a memorable win and keep their hopes alive to make it to the playoffs. <br> <br>
Kings XI Punjab’s fielding coach Jonty Rhodes has so far been reluctant to take any credit for his side performing so admirably on the field, but the talisman former South African cricketer’s influence surely seems to have rubbed off on the team. In an exclusive interview with KXIP.in, Rhodes- who was an extraordinary fielder himself in his playing days, revealed what makes a good fielder and what probably has helped KXIP be so dominant in the field.<br> <br>
“Everyone is built differently, everyone’s got different roles in the team, but the one attribute that makes anyone a better fielder is expecting every ball to come to you,” reveals Jonty Rhodes. “It can make you a better fielder even without practicing catching or throwing.” <br> <br>
“Commentators back then used to talk about my good ‘anticipation’ while playing. And I didn’t have faster reflexes than the others, or I would have been a much better batsman. So it wasn’t a case of me seeing the ball earlier, I just expected each game to come to me. I was ready before the ball was hit,” added KXIP’s fielding coach. <br><br>
“It's only 120 balls, so it is very easy to switch on and switch off, but if you are expecting every ball to come to you no matter where you are fielding, you will be an excellent fielder,” clarified Rhodes.
`,
type: 'ARTICLE',
isLiked: false,
isBookmarked: false,
likes: 1108,
comments: []
}];
this.newsService.getArticles().then((data: any) => {
if (data && data.content && data.content.items) {
this.newsData = data.content.items;
} else {
this.toastService.presentToastWithOptions("No News available");
}

}, (err) => {
console.log(err);
this.toastService.presentToastWithOptions("Failed to get News data", "danger");
});

this.newsService.getVideos().then((data: any) => {
if (data && data.content && data.content.items) {
this.videoData = data.content.items;
} else {
this.toastService.presentToastWithOptions("No Videos available");
}

}, (err) => {
this.toastService.presentToastWithOptions("Failed to get Videos data", "danger");
});

this.newsService.getGalleries().then((data: any) => {
if (data && data.content && data.content.items) {
this.galleryData = data.content.items;
} else {
this.toastService.presentToastWithOptions("No Albums available");
}

}, (err) => {
console.log(err);
this.toastService.presentToastWithOptions("Failed to get Gallery data", "danger");
});
}

ionViewDidEnter() {
@@ -151,20 +80,13 @@ export class HomePage implements OnInit {
this.showChat = true;
}
}

async presentChatModal() {
const modal = await this.modalController.create({
component: ChatPage,
});
return await modal.present();
}

getIndex(e: any) {
console.log(this.slides);
}

showNewsDetails(news: any) {
this.router.navigate(['/home-details', { news: JSON.stringify(news) }])
showNewsDetails(alias_title: string) {
this.router.navigate(['/home-details', { alias_title: alias_title, type: this.selectedTab }]);
}



+ 22
- 2
src/app/services/news.service.ts Zobrazit soubor

@@ -1,17 +1,37 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

export const IMAGE_BASE_URL: string = 'https://www.punjabkingsipl.in/static-assets/waf-images/';

@Injectable({
providedIn: 'root'
})
export class NewsService {

constructor(
private http: HttpClient
) { }


getArticles() {
return this.http.get('https://www.punjabkingsipl.in/api/listing?entities=4&otherent=1,8021&pgnum=1&inum=10&pgsize=10').toPromise();
}

getArticleDetails(title_alias_from_listing_api: string) {
return this.http.get('https://www.punjabkingsipl.in/api/article/' + title_alias_from_listing_api + '?is_app=1').toPromise();
}

getVideos() {
return this.http.get('https://www.punjabkingsipl.in/api/listing?entities=3,4&otherent=&pgnum=1&inum=10&pgsize=10').toPromise();
}

getVideoDetails(title_alias_from_listing_api: string) {
return this.http.get('https://www.punjabkingsipl.in/api/video/' + title_alias_from_listing_api);
}

getGalleries() {
return this.http.get('https://www.punjabkingsipl.in/api/listing?entities=2,4&otherent=&pgnum=1&inum=10&pgsize=10').toPromise();
}

getGalleryDetails(title_alias_from_listing_api: string) {
return this.http.get('https://www.punjabkingsipl.in/api/photo/' + title_alias_from_listing_api);
}
}

+ 16
- 0
src/app/services/toast.service.spec.ts Zobrazit soubor

@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';

import { ToastService } from './toast.service';

describe('ToastService', () => {
let service: ToastService;

beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(ToastService);
});

it('should be created', () => {
expect(service).toBeTruthy();
});
});

+ 23
- 0
src/app/services/toast.service.ts Zobrazit soubor

@@ -0,0 +1,23 @@
import { Injectable } from '@angular/core';
import { ToastController } from '@ionic/angular';

@Injectable({
providedIn: 'root'
})
export class ToastService {

constructor(public toastController: ToastController) { }


async presentToastWithOptions(message: string, color?: string) {
const toast = await this.toastController.create({
message: message,
position: 'bottom',
mode: 'ios',
duration: 3000,
color: color ? color : 'dark',
});

toast.present();
}
}

+ 4
- 0
src/global.scss Zobrazit soubor

@@ -36,6 +36,10 @@
letter-spacing: 0.5px;
}

p, header, h1, h2, h3, h4, h5, h6 {
margin: 0;
}

ion-content {
--background: transparent;
background: linear-gradient(to bottom, darken($brand-blue, 20%), $brand-blue 80%);


Zapsat Náhled
Načítá se…
Zrušit
Uložit