kj
/
kxip-app
1
0
Çatalla 0
Kod Konular 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
Kaynağa Gözat

Home page details API connection

master
kj1352 4 yıl önce
ebeveyn
fda23383a6
işleme
7804c384bd
8 değiştirilmiş dosya ile 115 ekleme ve 238 silme
Görünümü Böl
Diff Seçenekleri
İstatistikleri Göster Yama Dosyasını İndir Diff Dosyasını İndir
  1. +21
    -55
      src/app/home-details/home-details.page.html
  2. +24
    -166
      src/app/home-details/home-details.page.scss
  3. +57
    -2
      src/app/home-details/home-details.page.ts
  4. +3
    -3
      src/app/home/home.page.html
  5. +1
    -5
      src/app/home/home.page.scss
  6. +7
    -1
      src/app/home/home.page.ts
  7. +2
    -2
      src/app/services/news.service.ts
  8. +0
    -4
      src/global.scss

+ 21
- 55
src/app/home-details/home-details.page.html Dosyayı Görüntüle

@@ -1,5 +1,4 @@
<!-- <ion-content>
<ion-content *ngIf="newsDetails">
<header class="topbar">
<button (click)="back()" class="close-article-button active">
<ion-icon name="close"></ion-icon>
@@ -7,71 +6,38 @@
</header>

<div class="image-holder">
<figure>
<img [src]="newsDetails.image">
<figure *ngIf="!newsDetails.images">
<img [src]="image_url + newsDetails.image_path + newsDetails.image_file_name">
</figure>

<figure *ngIf="newsDetails.images">
<img [src]="image_url + newsDetails.images[0].data.imagePath + newsDetails.images[0].data.imageName">
</figure>
<a [href]="newsDetails.videoLink" target="_blank" *ngIf="newsDetails.videoLink">
<a *ngIf="newsDetails.hls_url" [href]="newsDetails.hls_url" target="_blank">
<button>
<ion-icon name="play"></ion-icon>
</button>
</a>
<h4> {{ newsDetails.heading }} </h4>
<h4> {{ newsDetails.title }} </h4>
</div>

<section class="content">
<div class="details" [innerHtml]="newsDetails.description">
<div class="details" *ngIf="newsDetails.full_text || newsDetails.desc" [innerHtml]="transformYourHtml(newsDetails.full_text ? newsDetails.full_text : newsDetails.desc)">
</div>
</section>


<section class="comments">
<header> Comments </header>
<ul>
<li *ngFor="let comment of newsDetails.comments">
<p> {{ comment.comment }} <label> - {{ comment.user }} </label> </p>
<ng-container *ngIf="newsDetails.images">
<figure *ngFor="let image of newsDetails.images">
<img [src]="image_url + getLowRestImagePath(image.data.imagePath) + image.data.imageName">
</figure>
</ng-container>

<button (click)="comment.isLiked = !comment.isLiked"
[ngClass]="{'active' : comment.isLiked}">
<ion-icon *ngIf="!comment.isLiked" name="heart-outline"></ion-icon>
<ion-icon *ngIf="comment.isLiked" name="heart"></ion-icon>
<span> {{ comment.isLiked ? comment.likes + 1 : comment.likes }} </span>
</button>
</li>
<div class="input-holder" id="comment-input">
<input type="text" placeholder="Type your comment" [(ngModel)]="myComment">
<button (click)="postComment()"> <ion-icon name="send"></ion-icon> </button>
</div>
</ul>
</section>

<section class="action-buttons">
<section class="shortcuts">
<button class="wide-button" (click)="newsDetails.isLiked = !newsDetails.isLiked"
[ngClass]="{'active' : newsDetails.isLiked}">
<ion-icon *ngIf="!newsDetails.isLiked" name="heart-outline"></ion-icon>
<ion-icon *ngIf="newsDetails.isLiked" name="heart"></ion-icon>
<span> {{ newsDetails.isLiked ? newsDetails.likes + 1 : newsDetails.likes }} </span>
</button>

<button>
<ion-icon name="share-social-outline"></ion-icon>
</button>
</section>

<section class="shortcuts">
<button (click)="newsDetails.isBookmarked = !newsDetails.isBookmarked"
[ngClass]="{'active' : newsDetails.isBookmarked}">
<ion-icon *ngIf="!newsDetails.isBookmarked" name="bookmark-outline"></ion-icon>
<ion-icon *ngIf="newsDetails.isBookmarked" name="bookmark"></ion-icon>
</button>

<button class="wide-button" (click)="scrollToAddComment()">
<ion-icon name="chatbubble-outline"></ion-icon>
<span> {{ newsDetails.comments.length }} </span>
</button>
</section>

</section>
</ion-content> -->
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button class="share-button">
<ion-icon name="share-social-outline"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>

+ 24
- 166
src/app/home-details/home-details.page.scss Dosyayı Görüntüle

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

.topbar {
position: fixed;
top: 0;
@@ -139,6 +141,20 @@
border-width: 0px;
box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.3);
animation: showUpContent 0.5s forwards;

figure {
border-radius: 10px;
overflow: hidden;
margin-bottom: 20px;
display: block;

img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
}

@keyframes showUpContent {
@@ -158,173 +174,15 @@
color: var(--light-grey);
overflow: hidden;
transition: opacity 0.1s;
}


.action-buttons {
display: flex;
padding: 0 3%;
z-index: 1;
margin: 0 auto 20px;
width: 90%;
background-color: white;
border-radius: 10px;
position: sticky;
position: -webkit-sticky;
bottom: 10px;
z-index: 2;
box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.3);
justify-content: center;
height: 60px;

.shortcuts {
display: flex;
align-items: center;
height: 100%;
width: 50%;

button {
margin-right: 5px;
border-radius: 50%;
background-color: rgba(var(--light-grey-rgb), 0.1);
margin: 0 auto;
width: 40px;
height: 40px;

&.wide-button {
width: auto;
border-radius: 5px;
padding: 0 10px;
}

&.active {
ion-icon, span {
color: var(--brand-red);
}
}

span {
vertical-align: middle;
color: var(--light-grey);
}
ion-icon {
vertical-align: middle;
color: var(--brand-black);
font-size: 1.2rem;
}
}
}
}

.comments {
background-color: white;
width: 90%;
position: relative;
box-shadow: 0px 0px 0px var(--light-grey);
z-index: 1;
margin: -20px auto 20px;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.3);
border-radius: 10px;
overflow: hidden;
opacity: 0;
animation: fadeInFromBottom 0.5s forwards;
header {
font-size: 1.1rem;
margin: 0px;
line-height: 1.5;
font-weight: 500;
color: var(--brand-black);
transition: opacity 0.1s;
background-color: white;
padding: 10px 5%;
p {
margin-bottom: 20px;
}
}

ul {
list-style: none;
padding: 0;
margin: 0;

li {
padding: 5px 5% 10px;
border-top: 1px solid rgba(var(--light-grey-rgb), 0.3);
line-height: 1.5;
}

label {
font-size: 1rem;
font-weight: 500;
letter-spacing: 1px;
color: rgba(var(--brand-red-rgb), 0.8);
}

p {
margin: 3px 0;
font-size: 1rem;
font-weight: 400;
color: var(--light-grey);
}

button {
background-color: #f3f3f3;
margin-right: 5px;
height: 30px;
width: auto;
border-radius: 5px;
padding: 0 5px;

span {
vertical-align: middle;
color: var(--light-grey);
}
ion-icon {
vertical-align: middle;
color: var(--brand-black);
font-size: 1rem;
}

&.active {
ion-icon, span {
color: var(--brand-red);
}
}
}

.input-holder {
display: flex;
width: 100%;
height: 70px;
align-items: center;

input {
width: calc(100% - 80px);
margin: 0 auto;
border: 1px solid rgba(var(--light-grey-rgb), 0.3);
border-radius: 30px;
font-size: 14px;
color: var(--brand-black);
font-weight: 500;
height: 40px;
padding: 0 15px;
background-color: white;
}

button {
width: 40px;
height: 40px;
background-color: var(--brand-red);
margin: 0 auto;
border-radius: 50%;

ion-icon {
color: white;
font-size: 16px;
}
}
}
}
.share-button {
--background: transparent;
border-radius: 50%;
background: linear-gradient(to left, darken($brand-red, 20%), $brand-gold);
transform: translate(-10px, -10px);
}

+ 57
- 2
src/app/home-details/home-details.page.ts Dosyayı Görüntüle

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

@Component({
@@ -12,6 +12,8 @@ import { ToastService } from '../services/toast.service';
})
export class HomeDetailsPage implements OnInit {
myComment: string = '';
image_url = IMAGE_BASE_URL;
newsDetails: any = {};

constructor(
private route: ActivatedRoute,
@@ -25,6 +27,10 @@ export class HomeDetailsPage implements OnInit {
return this.dom.bypassSecurityTrustResourceUrl(url);
}

transformYourHtml(htmlTextWithStyle) {
return this.dom.bypassSecurityTrustHtml(htmlTextWithStyle += '<style type="text/css">p{ margin: 0px 0px 10px 0px; }</style>');
}

ngOnInit() {
let alias_title = this.route.snapshot.paramMap.get('alias_title');
let type = this.route.snapshot.paramMap.get('type');
@@ -33,6 +39,55 @@ export class HomeDetailsPage implements OnInit {

console.log(alias_title);
console.log(type);

if (type === 'news') {
this.newsService.getArticleDetails(alias_title).then((data: any) => {

if (data && data.content && data.content.data) {
this.newsDetails = data.content.data;
} else {
this.toastService.presentToastWithOptions("No News available");
}

}, (err) => {
console.log(err);
this.toastService.presentToastWithOptions("Failed to fetch details", "danger");
});
}

if (type === 'videos') {
this.newsService.getVideoDetails(alias_title).then((data: any) => {

if (data && data.content && data.content.data) {
this.newsDetails = data.content.data;
} else {
this.toastService.presentToastWithOptions("No Video available");
}

}, (err) => {
console.log(err);
this.toastService.presentToastWithOptions("Failed to fetch details", "danger");
});
}

if (type === 'gallery') {
this.newsService.getGalleryDetails(alias_title).then((data: any) => {

if (data && data.content && data.content.data) {
this.newsDetails = data.content.data;
} else {
this.toastService.presentToastWithOptions("No Photos available");
}

}, (err) => {
console.log(err);
this.toastService.presentToastWithOptions("Failed to fetch details", "danger");
});
}
}

getLowRestImagePath(path: string) {
return path.replace("/0/", "/4-3/388-218/");
}

back() {


+ 3
- 3
src/app/home/home.page.html Dosyayı Görüntüle

@@ -29,7 +29,7 @@
<section class="content">
<h4> {{ news.short_title }} </h4>
<div class="details" [innerHtml]="news.short_desc">
<div class="details" [innerHtml]="transformYourHtml(news.short_desc)">
</div>
</section>
@@ -63,7 +63,7 @@
<section class="content">
<h4> {{ news.short_title ? news.short_title : news.asset_title }} </h4>
<div class="details" [innerHtml]="news.short_desc">
<div class="details" [innerHtml]="transformYourHtml(news.short_desc)">
</div>
</section>
@@ -94,7 +94,7 @@
<section class="content">
<h4> {{ news.short_title ? news.short_title : news.asset_title }} </h4>
<div class="details" [innerHtml]="news.short_desc">
<div class="details" [innerHtml]="transformYourHtml(news.short_desc)">
</div>
</section>


+ 1
- 5
src/app/home/home.page.scss Dosyayı Görüntüle

@@ -145,15 +145,11 @@ ion-slides {
line-height: 1.5;
font-weight: 400;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: var(--light-grey);
overflow: hidden;
transition: opacity 0.1s;

p {
margin: 0;
}
}

.action-buttons {


+ 7
- 1
src/app/home/home.page.ts Dosyayı Görüntüle

@@ -3,6 +3,7 @@ import { IonSlides } from '@ionic/angular';
import { Router } from '@angular/router';
import { NewsService, IMAGE_BASE_URL } from '../services/news.service';
import { ToastService } from '../services/toast.service';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
selector: 'app-home',
@@ -35,9 +36,14 @@ export class HomePage implements OnInit {
constructor(
private router: Router,
private newsService: NewsService,
private toastService: ToastService
private toastService: ToastService,
private dom: DomSanitizer,
) { }

transformYourHtml(htmlTextWithStyle) {
return this.dom.bypassSecurityTrustHtml(htmlTextWithStyle += '<style type="text/css">p{ margin: 0px; }</style>');
}

ngOnInit() {
this.newsService.getArticles().then((data: any) => {
if (data && data.content && data.content.items) {


+ 2
- 2
src/app/services/news.service.ts Dosyayı Görüntüle

@@ -24,7 +24,7 @@ export class NewsService {
}

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

getGalleries() {
@@ -32,6 +32,6 @@ export class NewsService {
}

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

+ 0
- 4
src/global.scss Dosyayı Görüntüle

@@ -36,10 +36,6 @@
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%);


Yaz Önizleme
Yükleniyor…
İptal
Kaydet