Merge pull request #36 from hadesdday/vanhieu

#5 - add some advertisement banner to article list page
Thêm một số banner quảng cáo trong trang danh sách bài viết
Chỉnh sửa code phần demo crawl dữ liệu bài viết

src/app/post/advertisement/advertisement.component.html

@@ -0,0 +1 @@
+<img src="{{url}}" alt="" srcset="" class="w-100">

src/app/post/advertisement/advertisement.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdvertisementComponent } from './advertisement.component';
+
+describe('AdvertisementComponent', () => {
+  let component: AdvertisementComponent;
+  let fixture: ComponentFixture<AdvertisementComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AdvertisementComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdvertisementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/post/advertisement/advertisement.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-advertisement',
+  templateUrl: './advertisement.component.html',
+  styleUrls: ['./advertisement.component.scss']
+})
+export class AdvertisementComponent implements OnInit {
+  @Input() url = '';
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -35,6 +35,14 @@ <h6 class="hot-post">{{posts_list?.[0]?.title}}</h6>
                     </p>
                 </div>
             </div>
+            <div class="row">
+                <div class="d-flex justify-content-center">
+                    <app-advertisement [url]="'../../../assets/images/ads1.png'"></app-advertisement>
+                </div>
+                <div class="d-flex justify-content-center mt-3">
+                    <app-advertisement [url]="'../../../assets/images/ads6.png'"></app-advertisement>
+                </div>
+            </div>
         </div>
         <div class="col-md-3 ">
             <div class="row">
@@ -65,6 +73,11 @@ <h6 class="hot-post">{{posts_list?.[1]?.title}}</h6>
                     </p>
                 </div>
             </div>
+            <div class="row">
+                <div class="d-flex justify-content-center mt-3">
+                    <app-advertisement [url]="'../../../assets/images/ads7.jpeg'"></app-advertisement>
+                </div>
+            </div>
         </div>
         <div class="col-md-3">
             <div *ngFor="let item of get_posts_with_amount(2,4) ;index as ind">
@@ -117,7 +130,7 @@ <h6 class="new__post">{{item?.title}}</h6>
         <h1>Mới nhất</h1>
     </div>
     <div class="mb-4"></div>
-    <div class="row mt-5 lazy" *ngFor="let item of get_posts_with_amount(9,posts_list.length)">
+    <div class="row mt-5 lazy" *ngFor="let item of get_posts_with_amount(9,posts_list.length);index as i">
         <div class="col-md-2">
             <div class="d-flex justify-content-start">
                 <p class="fw-light fs-11">{{get_time_in_words(item?.pubDate||"")}}

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

@@ -7,7 +7,6 @@ import { API_SUB } from 'src/app/_api/apiURL';
 import { Article, ArticleResponse } from 'src/app/_model/post.model';
 import { PostService } from '../post.service';
 
-
 @Component({
   selector: 'app-post-list',
   templateUrl: './post-list.component.html',
@@ -63,9 +62,12 @@ export class PostListComponent implements OnInit {
         var andSymbol = singleQuote.split("&").join("&");
         var finalTitle = andSymbol;
 
+        var finalDescription = curr.description[0].trim().split("'").join("'");
+        finalDescription = finalDescription.split("&").join("&");
+
         let currentItem: Article = {
           category: curr.category[0].trim(),
-          description: curr.description[0].trim(),
+          description: finalDescription,
           guid: curr.guid[0].trim(),
           link: curr.link[0].trim(),
           media: "",

src/app/post/post.module.ts

@@ -1,17 +1,17 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { PostRoutingModule } from './post-routing.module';
-import { SharedModule } from '../shared/shared.module';
-import { SearchResultComponent } from './search-result/search-result.component';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 import { MdbLazyLoadingModule } from 'code/mdb-angular-ui-kit/lazy-loading';
-import { PostService } from './post.service';
-import { PostListComponent } from './post-list/post-list.component';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { SharedModule } from '../shared/shared.module';
+import { PostListComponent } from './post-list/post-list.component';
+import { PostRoutingModule } from './post-routing.module';
+import { PostService } from './post.service';
+import { SearchResultComponent } from './search-result/search-result.component';
 import { TestPostCommentComponent } from './test-post-comment/test-post-comment.component';
-import { ReactiveFormsModule } from '@angular/forms';
-
+import { AdvertisementComponent } from './advertisement/advertisement.component';
 @NgModule({
-  declarations: [SearchResultComponent, PostListComponent, TestPostCommentComponent],
+  declarations: [SearchResultComponent, PostListComponent, TestPostCommentComponent, AdvertisementComponent],
   imports: [
     CommonModule,
     PostRoutingModule,

src/app/post/test-post-comment/test-post-comment.component.html

@@ -38,7 +38,9 @@
 <div>
     <button (click)="get_data()">get data</button>
     <p>data news</p>
-    <div class="post_details">
-        <div [innerHtml]="post_details"></div>
+    <div class="post_details container w-50">
+        <div class="row">
+            <div [innerHtml]="post_details"></div>
+        </div>
     </div>
 </div>

src/app/post/test-post-comment/test-post-comment.component.scss

@@ -1,3 +1,8 @@
-.green{
-    color:green;
-}
+.green {
+  color: green;
+}
+@media only screen and (max-width: 768px) {
+  .post_details {
+    width: 100% !important;
+  }
+}

src/app/post/test-post-comment/test-post-comment.component.ts

@@ -41,6 +41,10 @@ export class TestPostCommentComponent implements OnInit {
     this.service.get_news_details("cuu-thu-tuong-ehud-barak-israel-tim-moi-cach-de-phat-hien-cham-soc-tung-nhan-tai-2049939.html").subscribe(res => {
       const $dom = load(res);
       $dom(".newsFeature__header-title").addClass("green");
+      $dom(".newsFeature__boxAuthor").remove();
+      $dom(".controll__box").remove();
+      $dom(".vnn-template-noneditable").remove();
+      $dom("table").remove();
       $dom("head").append('<link rel="stylesheet" href="/assets/css/style.css">');
       this.post_details = this.sanitize($dom.html());
       console.log($dom.html())

src/assets/css/style.css

@@ -1,3 +1,7 @@
-.green{
-    color: green;
-}
+.green {
+  color: green;
+}
+
+.newsFeature__main img {
+  width: 100%;
+}