neuro_llc/NwaifuWeb
2
0
Fork 0
Code Issues 11 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: popular titles on main page

Browse Source
This commit is contained in:
Sergey Elpashev
2024-07-20 15:04:04 +03:00
parent 6b209077ef
commit d710d6bac5
2 changed files with 67 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
apps/NwaifuAnime/src/app/components/home/home.component.html
View File

@@ -1,30 +1,56 @@
<h1>It's home component</h1>
@if (!search) {
@for (popular of popularItems; track popular[0]) {
<p class="text-5xl">{{ popular[0] }}</p>
@for (popularTitle of popular[1]; track popularTitle.id) {
<p>{{ popularTitle.rus_name }}</p>
}
}
}
<div class="flex flex-col items-center w-full px-3">
@if (loading) {
<h1>Loading...</h1>
<p class="text-5xl text-center mb-16">Подождите...</p>
} @else {
<p class="text-5xl text-center mb-10">Популярное:</p>
<div class="flex flex-col gap-3 items-center w-full px-4 overflow-x-hidden">
@for (popular of popularItems; track popular[0]) {
<p class="text-5xl text-center">{{ popular[0] }}</p>
<div class="w-full overflow-x-auto py-3">
<div class="flex flex-row items-center gap-4 h-[400px] w-max">
@for (popularTitle of popular[1]; track popularTitle.id) {
<a routerLink="/detail" [queryParams]="{ url: popularTitle.slug_url }" class="h-full">
<div
class="flex flex-col justify-around border-black rounded-md p-4 w-[400px] items-center border h-full flex-shrink-0"
>
<img
[src]="popularTitle.cover.thumbnail"
[alt]="popularTitle.slug"
class="w-[200px] h-auto aspect-auto"
/>
<p>{{ popularTitle.rus_name }}</p>
</div>
</a>
}
</div>
</div>
}
</div>
}
@if (notFound && !loading) {
<h1>Not found</h1>
}
@for (item of items; track $index) {
<a
routerLink="/detail"
[queryParams]="{ url: item.slug_url }"
title="{{ item.name }}"
class="mb-6 max-w-[700px] w-full"
>
<div class="card flex flex-col items-center border-black border-2 rounded-md p-4 w-full">
<h1>{{ item.rus_name }}</h1>
<img [src]="item.cover.thumbnail" [alt]="item.slug" class="w-[200px] h-auto aspect-auto" />
</div>
</a>
}
</div>
} @else {
<div class="flex flex-col items-center w-full px-3">
@if (loading) {
<h1>Loading...</h1>
}
@if (notFound && !loading) {
<h1>Not found</h1>
}
@for (item of items; track $index) {
<a
routerLink="/detail"
[queryParams]="{ url: item.slug_url }"
title="{{ item.name }}"
class="mb-6 max-w-[700px] w-full"
>
<div class="card flex flex-col items-center border-black border-2 rounded-md p-4 w-full">
<h1>{{ item.rus_name }}</h1>
<img
[src]="item.cover.thumbnail"
[alt]="item.slug"
class="w-[200px] h-auto aspect-auto"
/>
</div>
</a>
}
</div>
}

26
apps/NwaifuAnime/src/app/components/home/home.component.ts
View File

@@ -36,15 +36,17 @@ export class HomeComponent implements OnDestroy, OnInit {
this.popularSubscription.unsubscribe();
}
private getPopular() {
if (!this.popularSubscription.closed) this.popularSubscription.unsubscribe();
this.popularSubscription = this.searchService
private getPopular(parserName: string) {
this.searchService
.getPopular()
.pipe(map((data) => data as IRuLIBPopular[]))
.pipe(
map((data) => data as IRuLIBPopular[]),
takeUntil(this.destroy$),
)
.subscribe({
next: (data) => {
this.popularItemsMap.set(this.searchService.getRuLibName(), data);
console.log(this.popularItemsMap);
this.popularItemsMap.set(parserName, data);
this.loading = false;
},
error: (error) => {
console.error(error);
@@ -52,26 +54,26 @@ export class HomeComponent implements OnDestroy, OnInit {
});
}
getPopularMangalib() {
private getPopularMangalib() {
this.searchService.setMangalibParser();
this.getPopular();
this.getPopular(this.searchService.getRuLibName());
}
getPopularSlashlib() {
private getPopularSlashlib() {
this.searchService.setSlashlibParser();
this.getPopular();
this.getPopular(this.searchService.getRuLibName());
}
get popularItems() {
return this.popularItemsMap.entries();
return Array.from(this.popularItemsMap.entries()).sort((a, b) => (a[0] > b[0] ? 1 : -1));
}
ngOnInit(): void {
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
this.search = params["search"] ?? "";
this.items = [];
this.loading = true;
if (this.search) {
this.loading = true;
this.searchService.setMangalibParser();
this.searchService
.search(this.search)