Merge pull request #23 from hadesdday/vanhieu

#5 - implemented when click article title redirect to article list page

src/app/_api/apiURL.ts

@@ -0,0 +1,18 @@
+export const API_SUB = [
+    "Chính trị",
+    "Thời sự",
+    "Kinh doanh",
+    "Thế giới",
+    "Giải trí",
+    "Thể thao",
+    "Sức khỏe",
+    "Đời sống",
+    "Giáo dục",
+    "Pháp luật",
+    "Xe",
+    "Công nghệ",
+    "Bất động sản",
+    // "Tuần Việt Nam",
+    // "Du lịch",
+    // "Bạn đọc"
+];

src/app/_model/feed.model.ts

@@ -13,4 +13,9 @@ export interface FeedResponse {
     feed: Feed;
     items: Post[];
     status: string;
+}
+
+export interface FeedModel {
+    title: String,
+    slug:String
 }

src/app/app.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import slugify from 'slugify';
+import { API_SUB } from './_api/apiURL';
 import { TokenStorageService } from "./_service/token-storage.service";
 
 declare var $: any;
@@ -41,4 +43,5 @@ export class AppComponent {
   routeChanged() {
     console.log("route changed");
   }
+
 }

src/app/pages/home/home.component.html

@@ -13,7 +13,9 @@
                 </div>
                 <div class="row">
                     <div class="d-flex justify-content-center">
-                        <p class="fs-11">{{posts_list[0]?.categories}}</p>
+                        <a href="chinh-tri">
+                            <p class="fs-11 text-muted">{{posts_list[0]?.categories}}</p>
+                        </a>
                     </div>
                 </div>
                 <div class="row">

src/app/pages/home/home.component.ts

@@ -1,22 +1,23 @@
 import { Component, OnInit } from '@angular/core';
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import slugify from 'slugify';
 import { PostService } from 'src/app/post/post.service';
+import { API_SUB } from 'src/app/_api/apiURL';
 import { Feed, FeedResponse } from 'src/app/_model/feed.model';
 import { Post } from 'src/app/_model/post.model';
 
-
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
-  title = 'Home';
+  title = 'Trang chủ';
 
   posts_list!: Post[];
   feed!: Feed;
   sports_news_list!: Post[];
   tech_list!: Post[];
+  first_post_slug!: string;
 
   constructor(private postService: PostService) {
     this.posts_list = [];
@@ -29,14 +30,43 @@ export class HomeComponent implements OnInit {
   }
 
   load_data() {
-    this.load_politics_news();
+    // this.load_politics_news();
+    this.load_hot_news();
     this.load_sports_news();
     this.load_tech_news();
   }
 
+  load_hot_news() {
+    this.postService.get_news_list_by_slug('vietnamnet').subscribe((res: FeedResponse) => {
+      this.posts_list = res.items;
+      this.posts_list.forEach(elm => {
+        var title = elm['title'];
+        var first = title.replace("'", "'");
+        var second = first.replace("'", "'");
+        elm['title'] = second;
+      });
+      console.log("politics", res);
+
+      Object.entries(res).map(([key, value]) => {
+        if (key === 'items') {
+          this.posts_list = value;
+        }
+        if (key === 'feed') {
+          this.feed = value;
+        }
+      });
+    });
+  }
+
   load_politics_news() {
     this.postService.get_politics_news().subscribe((res: FeedResponse) => {
       this.posts_list = res.items;
+      this.posts_list.forEach(elm => {
+        var title = elm['title'];
+        var first = title.replace("'", "'");
+        var second = first.replace("'", "'");
+        elm['title'] = second;
+      });
       console.log("politics", res);
 
       Object.entries(res).map(([key, value]) => {
@@ -53,13 +83,25 @@ export class HomeComponent implements OnInit {
   load_sports_news() {
     this.postService.get_sports_news().subscribe((res: FeedResponse) => {
       this.sports_news_list = res.items;
+      this.sports_news_list.forEach(elm => {
+        var title = elm['title'];
+        var first = title.replace("'", "'");
+        var second = first.replace("'", "'");
+        elm['title'] = second;
+      });
       console.log("sport", res);
     });
   }
 
   load_tech_news() {
     this.postService.get_technology_news().subscribe((res: FeedResponse) => {
       this.tech_list = res.items;
+      this.tech_list.forEach(elm => {
+        var title = elm['title'];
+        var first = title.replace("'", "'");
+        var second = first.replace("'", "'");
+        elm['title'] = second;
+      });
       console.log("tech", res);
     });
   }
@@ -91,4 +133,8 @@ export class HomeComponent implements OnInit {
     return this.tech_list.slice(startIndex, amount);
   }
 
+  get_slug(titleName: string) {
+    var slug = slugify(titleName.toLowerCase()).replace("dj", "d")
+    return slug;
+  }
 }

src/app/post/post-list/post-list.component.html

@@ -0,0 +1,146 @@
+<app-navbar></app-navbar>
+<div class="container mt-5">
+    <h1 class="fw-bold">{{title}}</h1>
+    <div class="hr__line mt-4"></div>
+    <div class="row mt-5">
+        <div class="col-md-6">
+            <div class="row">
+                <img [src]="posts_list?.[0]?.enclosure?.link" alt="'../../../assets/images/skeleton-loading.gif'"
+                    class="w-100" alt="">
+            </div>
+            <div class="row">
+                <div class="col d-flex flex-row-reverse fw-light fs-11">Theo Vietnamnet
+                </div>
+            </div>
+            <div class="row">
+                <div class="d-flex justify-content-start">
+                    <a href="{{posts_list?.[0]?.link}}" class="hot-title" target="_blank">
+                        <h6 class="hot-post">{{posts_list?.[0]?.title}}</h6>
+                    </a>
+                </div>
+            </div>
+            <div class="row">
+                <div class="d-flex justify-content-start">
+                    <p class="text-start hot-content">{{posts_list?.[0]?.description}}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="d-flex justify-content-start">
+                    <p class="fw-light fs-11">{{get_duration(posts_list?.[0]?.pubDate||"")}}
+                        <span class="p-1"></span>
+                        Nguồn : Vietnamnet
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 ">
+            <div class="row">
+                <img [src]="posts_list?.[1]?.enclosure?.link" alt="'../../../assets/images/skeleton-loading.gif'"
+                    class="w-100" alt="">
+            </div>
+            <div class="row">
+                <div class="col d-flex flex-row-reverse fw-light fs-11">Theo Vietnamnet
+                </div>
+            </div>
+            <div class="row">
+                <div class="d-flex justify-content-start">
+                    <a href="{{posts_list?.[1]?.link}}" class="hot-title" target="_blank">
+                        <h6 class="hot-post">{{posts_list?.[1]?.title}}</h6>
+                    </a>
+                </div>
+            </div>
+            <div class="row">
+                <div class="d-flex justify-content-start">
+                    <p class="text-start hot-content">{{posts_list?.[1]?.description}}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="d-flex justify-content-start">
+                    <p class="fw-light fs-11">{{get_duration(posts_list?.[1]?.pubDate||"")}}
+                        <span class="p-1"></span>
+                        Nguồn : Vietnamnet
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div *ngFor="let item of get_posts_with_amount(2,4) ;index as ind">
+                <div class="row">
+                    <div class="d-flex justify-content-start">
+                        <a href="{{item?.link}}" class="hot-title" target="_blank">
+                            <h6 class="hot-post">{{item?.title}}</h6>
+                        </a>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-6 col-sm-12">
+                        <div class="d-flex justify-content-start">
+                            <p class="text-start hot-content">{{item?.description}}</p>
+                        </div>
+                    </div>
+                    <div class="col-md-6 col-sm-12">
+                        <img [src]="item?.enclosure?.link" alt="'../../../assets/images/skeleton-loading.gif'"
+                            class="w-100" alt="">
+                    </div>
+                </div>
+                <div class="row mb-3" [ngClass]="ind <1 ? 'border-bottom':''">
+                    <div class="d-flex justify-content-start">
+                        <p class="fw-light fs-11">{{get_duration(item?.pubDate||"")}}
+                            <span class="p-1"></span>
+                            Nguồn : Vietnamnet
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row border-top">
+        <div class="col-md-3 p-3" *ngFor="let item of get_posts_with_amount(5,9)">
+            <div class="row">
+                <img [src]="item?.enclosure?.link" alt="'../../../assets/images/skeleton-loading.gif'" class="img__sub"
+                    alt="">
+            </div>
+            <div class="row mt-3 w-90">
+                <div class="d-flex justify-content-start">
+                    <a href="{{item?.link}}" class="hot-title" target="_blank">
+                        <h6 class="new__post">{{item?.title}}</h6>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="hr__line mt-3"></div>
+    <div class="row mt-3 border-bottom">
+        <h1>Mới nhất</h1>
+    </div>
+    <div class="mb-4"></div>
+    <div class="row" *ngFor="let item of get_posts_with_amount(9,posts_list.length)">
+        <div class="col-md-2">
+            <div class="d-flex justify-content-start">
+                <p class="fw-light fs-11">{{get_time_in_words(item?.pubDate||"")}}
+                </p>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="row">
+                <div class="d-flex justify-content-start">
+                    <a href="{{item?.link}}" class="hot-title" target="_blank">
+                        <h6 class="hot-post">{{item?.title}}</h6>
+                    </a>
+                </div>
+            </div>
+            <div class="row">
+                <div class="d-flex justify-content-start">
+                    <p class="text-start hot-content">{{item?.description}}</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="row">
+                <img [src]="item?.enclosure?.link" alt="'../../../assets/images/skeleton-loading.gif'" class="img__sub"
+                    alt="">
+            </div>
+        </div>
+    </div>
+</div>
+<app-footer></app-footer>

src/app/post/post-list/post-list.component.scss

@@ -0,0 +1,71 @@
+.hr__line {
+  border-top: 1px solid black;
+}
+
+.w-90 {
+  width: 90% !important;
+}
+
+.fs-20 {
+  font-size: 20px !important;
+}
+.fs-11 {
+  font-size: 11px !important;
+}
+
+.hot-post {
+  font-size: 23px;
+  font-weight: bold;
+}
+
+.new__post {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.hot-title {
+  color: black;
+  text-decoration: none;
+  font-size: 23px;
+}
+.hot-title:hover {
+  color: black;
+  text-decoration: underline;
+}
+.line-part {
+  border-left: 1px solid #e0e3e6;
+}
+.news-title {
+  color: black;
+  text-decoration: none;
+  font-weight: bold;
+}
+.news-title:hover {
+  text-decoration: underline;
+  color: black;
+}
+.news-topic {
+  color: black !important;
+}
+.credit {
+  border-bottom: 1px solid #e0e3e6;
+  padding-bottom: 20px;
+}
+
+.img__sub {
+  width: 230px;
+  height: 136px;
+  object-fit: cover;
+}
+
+@media only screen and (max-width: 768px) {
+  .img__sub {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.vl {
+  border-left: 6px solid green;
+  height: 100px;
+}