From 4444d20255e99c5cbccaab2e11bd71870e07d357 Mon Sep 17 00:00:00 2001 From: Hieu Nguyen Date: Fri, 19 Aug 2022 23:46:18 +0700 Subject: [PATCH] #5 - divide some part into component --- db.json | 16 +- src/app/app.module.ts | 11 +- src/app/pages/home/home.component.html | 174 +----------------- src/app/pages/home/home.component.scss | 43 ----- src/app/pages/home/home.component.ts | 148 +++------------ .../pages/home/sub-hot/sub-hot.component.html | 18 ++ .../pages/home/sub-hot/sub-hot.component.scss | 9 + .../home/sub-hot/sub-hot.component.spec.ts | 25 +++ .../pages/home/sub-hot/sub-hot.component.ts | 16 ++ .../pages/home/sub-new/sub-new.component.html | 17 ++ .../pages/home/sub-new/sub-new.component.scss | 12 ++ .../home/sub-new/sub-new.component.spec.ts | 25 +++ .../pages/home/sub-new/sub-new.component.ts | 22 +++ .../home/sub-posts/sub-posts.component.html | 12 ++ .../home/sub-posts/sub-posts.component.scss | 42 +++++ .../sub-posts/sub-posts.component.spec.ts | 25 +++ .../home/sub-posts/sub-posts.component.ts | 16 ++ .../advertisement.component.html | 2 +- .../advertisement/advertisement.component.ts | 1 + .../post-comment/post-comment.component.html | 17 ++ .../post-comment/post-comment.component.scss | 8 + .../post-comment.component.spec.ts} | 12 +- .../post-comment/post-comment.component.ts | 16 ++ .../post-details/post-details.component.html | 45 ++--- .../post-details/post-details.component.scss | 14 +- .../post-details/post-details.component.ts | 2 - .../newest-post/newest-post.component.html | 28 +++ .../newest-post/newest-post.component.scss | 31 ++++ .../newest-post/newest-post.component.spec.ts | 25 +++ .../newest-post/newest-post.component.ts | 29 +++ .../post/post-list/post-list.component.html | 44 +---- src/app/post/post-routing.module.ts | 3 - src/app/post/post.module.ts | 9 +- .../test-post-comment.component.css | 11 -- .../test-post-comment.component.css.map | 1 - .../test-post-comment.component.html | 46 ----- .../test-post-comment.component.scss | 8 - .../test-post-comment.component.ts | 78 -------- src/assets/css/style.css | 10 +- src/styles.scss | 1 + 40 files changed, 511 insertions(+), 561 deletions(-) create mode 100644 src/app/pages/home/sub-hot/sub-hot.component.html create mode 100644 src/app/pages/home/sub-hot/sub-hot.component.scss create mode 100644 src/app/pages/home/sub-hot/sub-hot.component.spec.ts create mode 100644 src/app/pages/home/sub-hot/sub-hot.component.ts create mode 100644 src/app/pages/home/sub-new/sub-new.component.html create mode 100644 src/app/pages/home/sub-new/sub-new.component.scss create mode 100644 src/app/pages/home/sub-new/sub-new.component.spec.ts create mode 100644 src/app/pages/home/sub-new/sub-new.component.ts create mode 100644 src/app/pages/home/sub-posts/sub-posts.component.html create mode 100644 src/app/pages/home/sub-posts/sub-posts.component.scss create mode 100644 src/app/pages/home/sub-posts/sub-posts.component.spec.ts create mode 100644 src/app/pages/home/sub-posts/sub-posts.component.ts create mode 100644 src/app/post/post-comment/post-comment.component.html create mode 100644 src/app/post/post-comment/post-comment.component.scss rename src/app/post/{test-post-comment/test-post-comment.component.spec.ts => post-comment/post-comment.component.spec.ts} (51%) create mode 100644 src/app/post/post-comment/post-comment.component.ts create mode 100644 src/app/post/post-list/newest-post/newest-post.component.html create mode 100644 src/app/post/post-list/newest-post/newest-post.component.scss create mode 100644 src/app/post/post-list/newest-post/newest-post.component.spec.ts create mode 100644 src/app/post/post-list/newest-post/newest-post.component.ts delete mode 100644 src/app/post/test-post-comment/test-post-comment.component.css delete mode 100644 src/app/post/test-post-comment/test-post-comment.component.css.map delete mode 100644 src/app/post/test-post-comment/test-post-comment.component.html delete mode 100644 src/app/post/test-post-comment/test-post-comment.component.scss delete mode 100644 src/app/post/test-post-comment/test-post-comment.component.ts diff --git a/db.json b/db.json index 23a7ffe..eb77770 100644 --- a/db.json +++ b/db.json @@ -4,12 +4,11 @@ "id": 1, "password": "hoang", "email": "lele9h0st@gmail.com", - "phone": "0971280168", + "phone": "0987654321", "name": "Trần Huy Hoàng", - "address": "123/4 Thủ Đức Thành phố Hồ Chí Minh", - "dateBirth": "2001-07-12", - "gender": "male", - "comfirmToken": "ok" + "address": "dia chi", + "dateBirth": "2001-08-27", + "gender": "male" }, { "email": "hoang@gmail.com", @@ -109,6 +108,13 @@ "fullname": "Nguyễn Văn Hiếu", "content": "cau mong chau doan tu voi gia dinh 🤷‍♀️", "id": 12 + }, + { + "article_id": 2051473, + "email": "lele9h0st@gmail.com", + "fullname": "Trần Huy Hoàng", + "content": "tiểu vương quốc thanh hóa", + "id": 13 } ] } \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5c08fcf..ef530ab 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -59,9 +59,12 @@ import { PostModule } from './post/post.module'; import { ProfileModule } from "./profile/profile.module"; import { SharedModule } from './shared/shared.module'; import { SafeHtmlPipe } from './_pipes/safe-html.pipe'; +import { SubPostsComponent } from './pages/home/sub-posts/sub-posts.component'; +import { SubNewComponent } from './pages/home/sub-new/sub-new.component'; +import { SubHotComponent } from './pages/home/sub-hot/sub-hot.component'; @NgModule({ - declarations: [AppComponent, HomeComponent, NotfoundComponent, ContactComponent, SafeHtmlPipe], + declarations: [AppComponent, HomeComponent, NotfoundComponent, ContactComponent, SafeHtmlPipe, SubPostsComponent, SubNewComponent, SubHotComponent], imports: [ BrowserModule, BrowserAnimationsModule, @@ -117,11 +120,13 @@ import { SafeHtmlPipe } from './_pipes/safe-html.pipe'; SharedModule, PostModule, AuthModule, - ToastNoAnimationModule.forRoot({ + ToastNoAnimationModule.forRoot({ timeOut: 1500, positionClass: 'toast-top-right', preventDuplicates: true, - }), + easing: "ease-in", + easeTime: 1500 + }), ], providers: [MdbCookiesManagementService, MdbStorageManagementService], bootstrap: [AppComponent], diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 620bdf7..bf47263 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -65,191 +65,35 @@
{{item.title}}
-
-
-
- '../../../assets/images/skeleton-loading.gif' -
-
- {{item.title}} -
-
-
+
-
-
- '../../../assets/images/skeleton-loading.gif' -
-
- {{article_list[10]?.title}} -
-
-
-
- '../../../assets/images/skeleton-loading.gif' -
-
- {{item.title}} -
-
+
-
-

Thời sự

-
- -
-
- '../../../assets/images/skeleton-loading.gif' -
-
- {{ts_news[5]?.title}} -
-
-
- {{item.title}} -
+ -
-

Công nghệ

-
- -
-
- '../../../assets/images/skeleton-loading.gif' -
-
- {{tech_news[0]?.title}} -
-
-
- {{item.title}} -
+ -
-

Kinh doanh

-
- -
-
- '../../../assets/images/skeleton-loading.gif' -
-
- {{business_news[0]?.title}} -
-
-
- {{item.title}} -
+ -
-

Thế giới

-
- -
-
- '../../../assets/images/skeleton-loading.gif' -
-
- {{world_news[0]?.title}} -
-
-
- {{item.title}} -
+ -
-

Thể thao

-
- -
-
- '../../../assets/images/skeleton-loading.gif' -
-
- {{sport_news[0]?.title}} -
-
-
- {{item.title}} -
+ -
-

Giáo dục

-
- -
-
- '../../../assets/images/skeleton-loading.gif' -
-
- {{education_news[0]?.title}} -
-
-
- {{item.title}} -
+ -
-
-
- '../../../assets/images/skeleton-loading.gif' -
-
- {{article_list[28]?.title}} -
-
-
-
- '../../../assets/images/skeleton-loading.gif' -
-
- {{item.title}} -
-
+
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index dd529e2..0ed20cd 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -101,46 +101,3 @@ } } } - -#overlay { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: black; - z-index: 1001; - cursor: pointer; -} - -.circle-loading { - width: 7rem; - height: 7rem; - border-radius: 15rem; - position: relative; - top: 40%; - margin: 0 auto; - --color: #ff4081; -} - -.circle-loading:before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: inherit; - border: 1rem solid transparent; - border-right-color: var(--color); - border-bottom-color: var(--color); - animation: circleLoading 1s forwards infinite linear; -} - -@keyframes circleLoading { - to { - transform: rotate(360deg); - } -} diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index e811d08..672e705 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -57,32 +57,18 @@ export class HomeComponent implements OnInit { var singleQuote = curr.title[0].trim().split("'").join("'"); var andSymbol = singleQuote.split("&").join("&"); var finalTitle = andSymbol; - + var imgUrl = curr['media:content'][0]?.$.url; let currentItem: Article = { category: curr.category[0].trim(), description: curr.description[0].trim(), - guid: curr.guid[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - link: curr.link[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - media: "", + guid: curr.guid[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + link: curr.link[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + media: imgUrl, pubDate: curr.pubDate[0].trim(), title: finalTitle }; - - Object.keys(curr).forEach(function (key, index) { - var article = curr[key]; - if (index === 6) { - var url = article[0]?.$; - Object.keys(url).forEach(function (key, index) { - if (index === 2) { - currentItem.media = url[key]; - return; - } - }); - } - }); this.article_list.push(currentItem); }); - console.log(this.article_list); }); } @@ -96,29 +82,16 @@ export class HomeComponent implements OnInit { var singleQuote = curr.title[0].trim().split("'").join("'"); var andSymbol = singleQuote.split("&").join("&"); var finalTitle = andSymbol; - + var imgUrl = curr['media:content'][0]?.$.url; let currentItem: Article = { category: curr.category[0].trim(), description: curr.description[0].trim(), - guid: curr.guid[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - link: curr.link[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - media: "", + guid: curr.guid[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + link: curr.link[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + media: imgUrl, pubDate: curr.pubDate[0].trim(), title: finalTitle }; - - Object.keys(curr).forEach(function (key, index) { - var article = curr[key]; - if (index === 6) { - var url = article[0]?.$; - Object.keys(url).forEach(function (key, index) { - if (index === 2) { - currentItem.media = url[key]; - return; - } - }); - } - }); this.ts_news.push(currentItem); }); }); @@ -134,29 +107,17 @@ export class HomeComponent implements OnInit { var singleQuote = curr.title[0].trim().split("'").join("'"); var andSymbol = singleQuote.split("&").join("&"); var finalTitle = andSymbol; - + var imgUrl = curr['media:content'][0]?.$.url; let currentItem: Article = { category: curr.category[0].trim(), description: curr.description[0].trim(), - guid: curr.guid[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - link: curr.link[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - media: "", + guid: curr.guid[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + link: curr.link[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + media: imgUrl, pubDate: curr.pubDate[0].trim(), title: finalTitle }; - Object.keys(curr).forEach(function (key, index) { - var article = curr[key]; - if (index === 6) { - var url = article[0]?.$; - Object.keys(url).forEach(function (key, index) { - if (index === 2) { - currentItem.media = url[key]; - return; - } - }); - } - }); this.tech_news.push(currentItem); }); }); @@ -172,29 +133,16 @@ export class HomeComponent implements OnInit { var singleQuote = curr.title[0].trim().split("'").join("'"); var andSymbol = singleQuote.split("&").join("&"); var finalTitle = andSymbol; - + var imgUrl = curr['media:content'][0]?.$.url; let currentItem: Article = { category: curr.category[0].trim(), description: curr.description[0].trim(), - guid: curr.guid[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - link: curr.link[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - media: "", + guid: curr.guid[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + link: curr.link[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + media: imgUrl, pubDate: curr.pubDate[0].trim(), title: finalTitle }; - - Object.keys(curr).forEach(function (key, index) { - var article = curr[key]; - if (index === 6) { - var url = article[0]?.$; - Object.keys(url).forEach(function (key, index) { - if (index === 2) { - currentItem.media = url[key]; - return; - } - }); - } - }); this.business_news.push(currentItem); }); }); @@ -210,29 +158,16 @@ export class HomeComponent implements OnInit { var singleQuote = curr.title[0].trim().split("'").join("'"); var andSymbol = singleQuote.split("&").join("&"); var finalTitle = andSymbol; - + var imgUrl = curr['media:content'][0]?.$.url; let currentItem: Article = { category: curr.category[0].trim(), description: curr.description[0].trim(), - guid: curr.guid[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - link: curr.link[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - media: "", + guid: curr.guid[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + link: curr.link[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + media: imgUrl, pubDate: curr.pubDate[0].trim(), title: finalTitle }; - - Object.keys(curr).forEach(function (key, index) { - var article = curr[key]; - if (index === 6) { - var url = article[0]?.$; - Object.keys(url).forEach(function (key, index) { - if (index === 2) { - currentItem.media = url[key]; - return; - } - }); - } - }); this.world_news.push(currentItem); }); }); @@ -248,29 +183,16 @@ export class HomeComponent implements OnInit { var singleQuote = curr.title[0].trim().split("'").join("'"); var andSymbol = singleQuote.split("&").join("&"); var finalTitle = andSymbol; - + var imgUrl = curr['media:content'][0]?.$.url; let currentItem: Article = { category: curr.category[0].trim(), description: curr.description[0].trim(), - guid: curr.guid[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - link: curr.link[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - media: "", + guid: curr.guid[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + link: curr.link[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + media: imgUrl, pubDate: curr.pubDate[0].trim(), title: finalTitle }; - - Object.keys(curr).forEach(function (key, index) { - var article = curr[key]; - if (index === 6) { - var url = article[0]?.$; - Object.keys(url).forEach(function (key, index) { - if (index === 2) { - currentItem.media = url[key]; - return; - } - }); - } - }); this.sport_news.push(currentItem); }); }); @@ -279,41 +201,29 @@ export class HomeComponent implements OnInit { load_education_news() { this.postService.get_list("giao-duc").subscribe((res: ArticleResponse) => { var items = res.item; - Object.entries(items).map(([key, value]) => { var curr: any = value; var singleQuote = curr.title[0].trim().split("'").join("'"); var andSymbol = singleQuote.split("&").join("&"); var finalTitle = andSymbol; + var imgUrl = curr['media:content'][0]?.$.url; let currentItem: Article = { category: curr.category[0].trim(), description: curr.description[0].trim(), - guid: curr.guid[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - link: curr.link[0].trim().replace("https://vietnamnet.vn/","bai-viet/"), - media: "", + guid: curr.guid[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + link: curr.link[0].trim().replace("https://vietnamnet.vn/", "bai-viet/"), + media: imgUrl, pubDate: curr.pubDate[0].trim(), title: finalTitle }; - - Object.keys(curr).forEach(function (key, index) { - var article = curr[key]; - if (index === 6) { - var url = article[0]?.$; - Object.keys(url).forEach(function (key, index) { - if (index === 2) { - currentItem.media = url[key]; - return; - } - }); - } - }); this.education_news.push(currentItem); }); // this.isLoading = false; // uncomment de hien modal }); + //xoa de hien modal this.isLoading = false; } diff --git a/src/app/pages/home/sub-hot/sub-hot.component.html b/src/app/pages/home/sub-hot/sub-hot.component.html new file mode 100644 index 0000000..4cc3821 --- /dev/null +++ b/src/app/pages/home/sub-hot/sub-hot.component.html @@ -0,0 +1,18 @@ +
+
+ '../../../assets/images/skeleton-loading.gif' +
+
+ {{posts[0]?.title}} +
+
+
+
+ '../../../assets/images/skeleton-loading.gif' +
+
+ {{item.title}} +
+
\ No newline at end of file diff --git a/src/app/pages/home/sub-hot/sub-hot.component.scss b/src/app/pages/home/sub-hot/sub-hot.component.scss new file mode 100644 index 0000000..01cdb8c --- /dev/null +++ b/src/app/pages/home/sub-hot/sub-hot.component.scss @@ -0,0 +1,9 @@ +.news-title { + color: black; + text-decoration: none; + font-weight: bold; +} +.news-title:hover { + text-decoration: underline; + color: black; +} diff --git a/src/app/pages/home/sub-hot/sub-hot.component.spec.ts b/src/app/pages/home/sub-hot/sub-hot.component.spec.ts new file mode 100644 index 0000000..923ef4a --- /dev/null +++ b/src/app/pages/home/sub-hot/sub-hot.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SubHotComponent } from './sub-hot.component'; + +describe('SubHotComponent', () => { + let component: SubHotComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SubHotComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SubHotComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/home/sub-hot/sub-hot.component.ts b/src/app/pages/home/sub-hot/sub-hot.component.ts new file mode 100644 index 0000000..ddb2849 --- /dev/null +++ b/src/app/pages/home/sub-hot/sub-hot.component.ts @@ -0,0 +1,16 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Article } from 'src/app/_model/post.model'; + +@Component({ + selector: 'sub-hot', + templateUrl: './sub-hot.component.html', + styleUrls: ['./sub-hot.component.scss'] +}) +export class SubHotComponent implements OnInit { + @Input() posts!: Article[]; + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/pages/home/sub-new/sub-new.component.html b/src/app/pages/home/sub-new/sub-new.component.html new file mode 100644 index 0000000..9494e1d --- /dev/null +++ b/src/app/pages/home/sub-new/sub-new.component.html @@ -0,0 +1,17 @@ +
+

{{title}}

+
+ +
+
+ '../../../assets/images/skeleton-loading.gif' +
+
+ {{posts[0]?.title}} +
+
+
+ {{item.title}} +
\ No newline at end of file diff --git a/src/app/pages/home/sub-new/sub-new.component.scss b/src/app/pages/home/sub-new/sub-new.component.scss new file mode 100644 index 0000000..3c740f8 --- /dev/null +++ b/src/app/pages/home/sub-new/sub-new.component.scss @@ -0,0 +1,12 @@ +.news-title { + color: black; + text-decoration: none; + font-weight: bold; +} +.news-title:hover { + text-decoration: underline; + color: black; +} +.middle__title { + margin: auto 20px; +} diff --git a/src/app/pages/home/sub-new/sub-new.component.spec.ts b/src/app/pages/home/sub-new/sub-new.component.spec.ts new file mode 100644 index 0000000..13c66f4 --- /dev/null +++ b/src/app/pages/home/sub-new/sub-new.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SubNewComponent } from './sub-new.component'; + +describe('SubNewComponent', () => { + let component: SubNewComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SubNewComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SubNewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/home/sub-new/sub-new.component.ts b/src/app/pages/home/sub-new/sub-new.component.ts new file mode 100644 index 0000000..cbee472 --- /dev/null +++ b/src/app/pages/home/sub-new/sub-new.component.ts @@ -0,0 +1,22 @@ +import { Component, Input, OnInit } from '@angular/core'; +import slugify from 'slugify'; +import { Article } from 'src/app/_model/post.model'; + +@Component({ + selector: 'sub-new', + templateUrl: './sub-new.component.html', + styleUrls: ['./sub-new.component.scss'] +}) +export class SubNewComponent implements OnInit { + @Input() posts !: Article[]; + @Input() title = ''; + constructor() { } + + ngOnInit(): void { + } + + get_slug(titleName: string) { + var slug = slugify(titleName.toLowerCase()).replace("dj", "d") + return slug; + } +} diff --git a/src/app/pages/home/sub-posts/sub-posts.component.html b/src/app/pages/home/sub-posts/sub-posts.component.html new file mode 100644 index 0000000..4cca5fd --- /dev/null +++ b/src/app/pages/home/sub-posts/sub-posts.component.html @@ -0,0 +1,12 @@ +
+
+
+ '../../../assets/images/skeleton-loading.gif' +
+
+ {{item.title}} +
+
+
\ No newline at end of file diff --git a/src/app/pages/home/sub-posts/sub-posts.component.scss b/src/app/pages/home/sub-posts/sub-posts.component.scss new file mode 100644 index 0000000..522a972 --- /dev/null +++ b/src/app/pages/home/sub-posts/sub-posts.component.scss @@ -0,0 +1,42 @@ +.sub__posts { + background-color: #eeeeee; + .col-md-3 { + .row { + img { + height: 140px; + } + } + } +} + +.img__sub { + width: 200px; + height: 134px; + object-fit: cover; +} + +@media only screen and (max-width: 768px) { + .img__sub { + width: 100%; + height: auto; + } + .sub__posts { + .col-md-3 { + .row { + img { + width: 100% !important; + } + } + } + } +} + +.news-title { + color: black; + text-decoration: none; + font-weight: bold; + &:hover { + text-decoration: underline; + color: black; + } +} diff --git a/src/app/pages/home/sub-posts/sub-posts.component.spec.ts b/src/app/pages/home/sub-posts/sub-posts.component.spec.ts new file mode 100644 index 0000000..3b273b7 --- /dev/null +++ b/src/app/pages/home/sub-posts/sub-posts.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SubPostsComponent } from './sub-posts.component'; + +describe('SubPostsComponent', () => { + let component: SubPostsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SubPostsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SubPostsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/home/sub-posts/sub-posts.component.ts b/src/app/pages/home/sub-posts/sub-posts.component.ts new file mode 100644 index 0000000..7827e8a --- /dev/null +++ b/src/app/pages/home/sub-posts/sub-posts.component.ts @@ -0,0 +1,16 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Article } from 'src/app/_model/post.model'; + +@Component({ + selector: 'sub-posts', + templateUrl: './sub-posts.component.html', + styleUrls: ['./sub-posts.component.scss'] +}) +export class SubPostsComponent implements OnInit { + @Input() subPosts!: Article[]; + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/post/advertisement/advertisement.component.html b/src/app/post/advertisement/advertisement.component.html index 0681349..537e059 100644 --- a/src/app/post/advertisement/advertisement.component.html +++ b/src/app/post/advertisement/advertisement.component.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/post/advertisement/advertisement.component.ts b/src/app/post/advertisement/advertisement.component.ts index 199305a..84c878c 100644 --- a/src/app/post/advertisement/advertisement.component.ts +++ b/src/app/post/advertisement/advertisement.component.ts @@ -7,6 +7,7 @@ import { Component, Input, OnInit } from '@angular/core'; }) export class AdvertisementComponent implements OnInit { @Input() url = ''; + @Input() ref = ''; constructor() { } ngOnInit(): void { diff --git a/src/app/post/post-comment/post-comment.component.html b/src/app/post/post-comment/post-comment.component.html new file mode 100644 index 0000000..096ecc0 --- /dev/null +++ b/src/app/post/post-comment/post-comment.component.html @@ -0,0 +1,17 @@ +
+
+
+
+

{{comment?.fullname?.charAt(0)}}

+
+
+
+

{{comment?.email}}

+
+
+
+
+
+

{{comment?.content}}

+
+
\ No newline at end of file diff --git a/src/app/post/post-comment/post-comment.component.scss b/src/app/post/post-comment/post-comment.component.scss new file mode 100644 index 0000000..ee11bde --- /dev/null +++ b/src/app/post/post-comment/post-comment.component.scss @@ -0,0 +1,8 @@ +.cmt__content { + margin-left: 3rem; +} +@media only screen and (max-width: 768px) { + .user__avatar { + width: 60px; + } +} diff --git a/src/app/post/test-post-comment/test-post-comment.component.spec.ts b/src/app/post/post-comment/post-comment.component.spec.ts similarity index 51% rename from src/app/post/test-post-comment/test-post-comment.component.spec.ts rename to src/app/post/post-comment/post-comment.component.spec.ts index ab6ffd0..4f1ba36 100644 --- a/src/app/post/test-post-comment/test-post-comment.component.spec.ts +++ b/src/app/post/post-comment/post-comment.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { TestPostCommentComponent } from './test-post-comment.component'; +import { PostCommentComponent } from './post-comment.component'; -describe('TestPostCommentComponent', () => { - let component: TestPostCommentComponent; - let fixture: ComponentFixture; +describe('PostCommentComponent', () => { + let component: PostCommentComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ TestPostCommentComponent ] + declarations: [ PostCommentComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(TestPostCommentComponent); + fixture = TestBed.createComponent(PostCommentComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/post/post-comment/post-comment.component.ts b/src/app/post/post-comment/post-comment.component.ts new file mode 100644 index 0000000..3166e05 --- /dev/null +++ b/src/app/post/post-comment/post-comment.component.ts @@ -0,0 +1,16 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Comment } from "src/app/_model/comment.model"; + +@Component({ + selector: 'post-comment', + templateUrl: './post-comment.component.html', + styleUrls: ['./post-comment.component.scss'] +}) +export class PostCommentComponent implements OnInit { + @Input() comment!: Comment; + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/post/post-details/post-details.component.html b/src/app/post/post-details/post-details.component.html index 17ba565..b1c5ef4 100644 --- a/src/app/post/post-details/post-details.component.html +++ b/src/app/post/post-details/post-details.component.html @@ -15,8 +15,9 @@

Bình luận

- +
@@ -40,7 +41,8 @@

Bình luận

-

Hãy là người đầu tiên bình luận trong +

Hãy là người đầu tiên bình + luận trong bài.

@@ -66,23 +68,7 @@

Bình luận

-
-
-
-
-

{{item?.fullname?.charAt(0)}}

-
-
-
-

{{item?.email}}

-
-
-
-
-
-

{{item?.content}}

-
-
+
@@ -91,15 +77,15 @@

Tin liên quan

- + '../../assets/images/skeleton-loading.gif'
-
-
- +
+
+
{{item?.title}}
-
+

{{item?.description}}

@@ -110,13 +96,16 @@
{{item?.title}}
- +
- +
- +
diff --git a/src/app/post/post-details/post-details.component.scss b/src/app/post/post-details/post-details.component.scss index 99321ba..501178b 100644 --- a/src/app/post/post-details/post-details.component.scss +++ b/src/app/post/post-details/post-details.component.scss @@ -23,6 +23,16 @@ font-size: 40px; } -.w-95{ +.w-95 { width: 95% !important; -} \ No newline at end of file +} +.rel__link { + color: black; + h6 { + font-size: 110%; + font-weight: 600; + } + &:hover { + text-decoration: underline; + } +} diff --git a/src/app/post/post-details/post-details.component.ts b/src/app/post/post-details/post-details.component.ts index e78018b..7be3c1f 100644 --- a/src/app/post/post-details/post-details.component.ts +++ b/src/app/post/post-details/post-details.component.ts @@ -59,7 +59,6 @@ export class PostDetailsComponent implements OnInit { this.postService.get_news_details(this.post_url).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(); @@ -135,7 +134,6 @@ export class PostDetailsComponent implements OnInit { this.posts_list.push(currentItem); }); this.isLoading = false; - // console.log(this.posts_list); }); } diff --git a/src/app/post/post-list/newest-post/newest-post.component.html b/src/app/post/post-list/newest-post/newest-post.component.html new file mode 100644 index 0000000..7355862 --- /dev/null +++ b/src/app/post/post-list/newest-post/newest-post.component.html @@ -0,0 +1,28 @@ +
+
+
+

{{get_time_in_words(item?.pubDate||"")}} +

+
+
+
+
+
+ +
{{item?.title}}
+ +
+
+
+
+

{{item?.description}}

+
+
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/post/post-list/newest-post/newest-post.component.scss b/src/app/post/post-list/newest-post/newest-post.component.scss new file mode 100644 index 0000000..b2472a8 --- /dev/null +++ b/src/app/post/post-list/newest-post/newest-post.component.scss @@ -0,0 +1,31 @@ +.fs-11 { + font-size: 11px !important; +} + +.hot-title { + color: black; + text-decoration: none; + font-size: 23px; + &:hover { + color: black; + text-decoration: underline; + } +} + +.hot-post { + font-size: 23px; + font-weight: bold; +} + +.img__sub { + width: 230px; + height: 136px; + object-fit: cover; +} + +@media only screen and (max-width: 768px) { + .img__sub { + width: 100%; + height: 100%; + } +} diff --git a/src/app/post/post-list/newest-post/newest-post.component.spec.ts b/src/app/post/post-list/newest-post/newest-post.component.spec.ts new file mode 100644 index 0000000..a24a963 --- /dev/null +++ b/src/app/post/post-list/newest-post/newest-post.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NewestPostComponent } from './newest-post.component'; + +describe('NewestPostComponent', () => { + let component: NewestPostComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ NewestPostComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(NewestPostComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/post/post-list/newest-post/newest-post.component.ts b/src/app/post/post-list/newest-post/newest-post.component.ts new file mode 100644 index 0000000..98ac48a --- /dev/null +++ b/src/app/post/post-list/newest-post/newest-post.component.ts @@ -0,0 +1,29 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Article } from 'src/app/_model/post.model'; + +@Component({ + selector: 'newest-post', + templateUrl: './newest-post.component.html', + styleUrls: ['./newest-post.component.scss'] +}) +export class NewestPostComponent implements OnInit { + @Input() articles!: Article[]; + constructor() { } + + ngOnInit(): void { + } + + get_time_in_words(date: string) { + var monthNames = ["Tháng Một", "Tháng Hai", "Tháng Ba", "Tháng Bốn", "Tháng Năm", "Tháng Sáu", + "Tháng Bảy", "Tháng Tám", "Tháng Chín", "Tháng Mười", "Tháng Mười", "Tháng Mười Hai" + ]; + var d = new Date(date); + var day = d.getDate(); + var month = monthNames[d.getMonth()]; + var year = d.getFullYear(); + + var fullDatetime = 'Ngày ' + day + ', ' + month + ' , ' + year; + return fullDatetime; + } + +} diff --git a/src/app/post/post-list/post-list.component.html b/src/app/post/post-list/post-list.component.html index 6a63f51..bdc04d5 100644 --- a/src/app/post/post-list/post-list.component.html +++ b/src/app/post/post-list/post-list.component.html @@ -37,10 +37,13 @@
{{posts_list?.[0]?.title}}
- +
- + +
@@ -75,7 +78,7 @@
{{posts_list?.[1]?.title}}
- +
@@ -125,38 +128,11 @@
{{item?.title}}
-
-
+
+

Mới nhất

-
-
-
-
-

{{get_time_in_words(item?.pubDate||"")}} -

-
-
-
-
-
- -
{{item?.title}}
- -
-
-
-
-

{{item?.description}}

-
-
-
-
-
- -
-
-
+
+
\ No newline at end of file diff --git a/src/app/post/post-routing.module.ts b/src/app/post/post-routing.module.ts index 281cd89..6375273 100644 --- a/src/app/post/post-routing.module.ts +++ b/src/app/post/post-routing.module.ts @@ -1,16 +1,13 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { MdbLazyLoadingModule } from 'mdb-angular-ui-kit/lazy-loading'; -import { AuthGuard } from '../_guard/auth.guard'; import { PostDetailsComponent } from './post-details/post-details.component'; import { PostListComponent } from './post-list/post-list.component'; import { SearchResultComponent } from './search-result/search-result.component'; -import { TestPostCommentComponent } from './test-post-comment/test-post-comment.component'; const routes: Routes = [ { path: 'search/:keyword/:tag', component: SearchResultComponent }, { path: 'chu-de/:title', component: PostListComponent }, - { path: 'post-comment-test', component: TestPostCommentComponent, canActivate: [AuthGuard] }, { path: 'bai-viet/:url', component: PostDetailsComponent } ]; diff --git a/src/app/post/post.module.ts b/src/app/post/post.module.ts index 7cf3c04..b6ecedd 100644 --- a/src/app/post/post.module.ts +++ b/src/app/post/post.module.ts @@ -4,15 +4,16 @@ import { ReactiveFormsModule } from '@angular/forms'; import { MdbLazyLoadingModule } from 'code/mdb-angular-ui-kit/lazy-loading'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { SharedModule } from '../shared/shared.module'; +import { AdvertisementComponent } from './advertisement/advertisement.component'; +import { PostDetailsComponent } from './post-details/post-details.component'; 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 { AdvertisementComponent } from './advertisement/advertisement.component'; -import { PostDetailsComponent } from './post-details/post-details.component'; +import { PostCommentComponent } from './post-comment/post-comment.component'; +import { NewestPostComponent } from './post-list/newest-post/newest-post.component'; @NgModule({ - declarations: [SearchResultComponent, PostListComponent, TestPostCommentComponent, AdvertisementComponent, PostDetailsComponent], + declarations: [SearchResultComponent, PostListComponent, AdvertisementComponent, PostDetailsComponent, PostCommentComponent, NewestPostComponent], imports: [ CommonModule, PostRoutingModule, diff --git a/src/app/post/test-post-comment/test-post-comment.component.css b/src/app/post/test-post-comment/test-post-comment.component.css deleted file mode 100644 index 7e954d2..0000000 --- a/src/app/post/test-post-comment/test-post-comment.component.css +++ /dev/null @@ -1,11 +0,0 @@ -.green { - color: green; -} - -@media only screen and (max-width: 768px) { - .post_details { - width: 100% !important; - } -} - -/*# sourceMappingURL=test-post-comment.component.css.map */ diff --git a/src/app/post/test-post-comment/test-post-comment.component.css.map b/src/app/post/test-post-comment/test-post-comment.component.css.map deleted file mode 100644 index 36621e5..0000000 --- a/src/app/post/test-post-comment/test-post-comment.component.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["test-post-comment.component.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;IACE","file":"test-post-comment.component.css"} \ No newline at end of file diff --git a/src/app/post/test-post-comment/test-post-comment.component.html b/src/app/post/test-post-comment/test-post-comment.component.html deleted file mode 100644 index 352d8e1..0000000 --- a/src/app/post/test-post-comment/test-post-comment.component.html +++ /dev/null @@ -1,46 +0,0 @@ - -
- - -
- -
- - -
-
- - -
-
- - -
- -
- -
-
- - - -
-

{{item?.content}}

-
- -
- -

data news

-
-
-
-
-
-
\ No newline at end of file diff --git a/src/app/post/test-post-comment/test-post-comment.component.scss b/src/app/post/test-post-comment/test-post-comment.component.scss deleted file mode 100644 index 2a67727..0000000 --- a/src/app/post/test-post-comment/test-post-comment.component.scss +++ /dev/null @@ -1,8 +0,0 @@ -.green { - color: green; -} -@media only screen and (max-width: 768px) { - .post_details { - width: 100% !important; - } -} diff --git a/src/app/post/test-post-comment/test-post-comment.component.ts b/src/app/post/test-post-comment/test-post-comment.component.ts deleted file mode 100644 index f282562..0000000 --- a/src/app/post/test-post-comment/test-post-comment.component.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; -import { PostService } from '../post.service'; -import { Comment } from "../../_model/comment.model"; -import { Cheerio, load } from 'cheerio' -import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; - -declare var $: any; - -@Component({ - selector: 'app-test-post-comment', - templateUrl: './test-post-comment.component.html', - styleUrls: ['./test-post-comment.component.scss'] -}) -export class TestPostCommentComponent implements OnInit { - - public testForm!: FormGroup; - comments_list!: Comment[]; - post_details!: any; - - constructor(private formBuilder: FormBuilder, private service: PostService, private domSanitizer: DomSanitizer) { - this.comments_list = []; - } - - ngOnInit(): void { - this.testForm = this.formBuilder.group({ - article_id: new FormControl('', [Validators.required]), - email: new FormControl('', [Validators.email, Validators.required]), - fullname: new FormControl('', [Validators.required]), - content: new FormControl('', [Validators.required]), - }); - this.get_data(); - } - - - sanitize(html: any): SafeHtml { - return this.domSanitizer.bypassSecurityTrustHtml(html); - } - - get_data() { - 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(''); - this.post_details = this.sanitize($dom.html()); - console.log($dom.html()) - }); - } - - - testlog() { - alert("awda"); - } - - postComment() { - console.log(this.testForm.value) - this.service.post_comment(this.testForm.value).subscribe(res => { - console.log(res); - }); - } - - get_cmt() { - var s = $("input[name='aid']").val(); - this.get_comment(s); - } - - get_comment(id: number) { - this.service.get_comments_by_post_id(id).subscribe(res => { - this.comments_list = res; - console.log(res); - }); - } - -} diff --git a/src/assets/css/style.css b/src/assets/css/style.css index f531c9b..ba5c772 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -1,5 +1,6 @@ .newsFeature__header-title { font-weight: bold; + color:black; } .newsFeature__main img { @@ -14,6 +15,11 @@ margin-top: 1.5rem; } -iframe{ +iframe { width: 100%; -} \ No newline at end of file +} + +.video-detail__text h1 { + font-weight: bold; + color: black; +} diff --git a/src/styles.scss b/src/styles.scss index c133f8b..c1a5800 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -36,6 +36,7 @@ @import "~mdb-angular-ui-kit/assets/scss/mdb.scss"; @import "./assets/css/nice-select.css"; @import '~ngx-toastr/toastr'; + * { font-family: Arial, Helvetica, sans-serif; }