Compare commits
1 Commits
dev
...
95a4e5dd08
| Author | SHA1 | Date | |
|---|---|---|---|
| 95a4e5dd08 |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
@@ -1,12 +1,15 @@
|
|||||||
|
@if (serviceWorkerEnabled) {
|
||||||
|
@if (hasUpdate) {
|
||||||
|
<h1>Update available</h1>
|
||||||
|
<button (click)="update()">Update</button>
|
||||||
|
} @else {
|
||||||
|
<h1>Update not available</h1>
|
||||||
|
}
|
||||||
|
}
|
||||||
<app-header></app-header>
|
<app-header></app-header>
|
||||||
<div class="md:h-12 h-16"></div>
|
<div class="h-10"></div>
|
||||||
<div
|
<div class="content">
|
||||||
class="content overflow-y-auto md:h-[calc(100vh-3rem)] h-[calc(100vh-4rem)] flex flex-col justify-between"
|
<router-outlet></router-outlet>
|
||||||
>
|
<app-footer></app-footer>
|
||||||
<div class="h-max">
|
|
||||||
<router-outlet></router-outlet>
|
|
||||||
</div>
|
|
||||||
<app-footer class="md:mb-0 mb-16 flex-shrink-0"></app-footer>
|
|
||||||
</div>
|
</div>
|
||||||
<app-tab-bar></app-tab-bar>
|
|
||||||
<app-notification></app-notification>
|
<app-notification></app-notification>
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
.content {
|
.content {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
height: calc(100vh - 3rem);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import { AppService } from "./app.service";
|
|||||||
import { FooterComponent } from "./components/footer/footer.component";
|
import { FooterComponent } from "./components/footer/footer.component";
|
||||||
import { HeaderComponent } from "./components/header/header.component";
|
import { HeaderComponent } from "./components/header/header.component";
|
||||||
import { NotificationComponent } from "./components/notification/notification.component";
|
import { NotificationComponent } from "./components/notification/notification.component";
|
||||||
import { TabBarComponent } from "./components/tab-bar/tab-bar.component";
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
standalone: true,
|
standalone: true,
|
||||||
@@ -14,7 +13,6 @@ import { TabBarComponent } from "./components/tab-bar/tab-bar.component";
|
|||||||
NotificationComponent,
|
NotificationComponent,
|
||||||
NotificationComponent,
|
NotificationComponent,
|
||||||
FooterComponent,
|
FooterComponent,
|
||||||
TabBarComponent,
|
|
||||||
],
|
],
|
||||||
selector: "app-root",
|
selector: "app-root",
|
||||||
templateUrl: "./app.component.html",
|
templateUrl: "./app.component.html",
|
||||||
@@ -23,4 +21,17 @@ import { TabBarComponent } from "./components/tab-bar/tab-bar.component";
|
|||||||
})
|
})
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
title = "NwaifuAnime";
|
title = "NwaifuAnime";
|
||||||
|
constructor(private sw: AppService) {}
|
||||||
|
|
||||||
|
get hasUpdate() {
|
||||||
|
return this.sw.isUpdateAvailable;
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
this.sw.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
get serviceWorkerEnabled() {
|
||||||
|
return this.sw.serviceWorkerEnabled;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ import { AuthComponent } from "./components/auth/auth.component";
|
|||||||
import { DetailComponent } from "./components/detail/detail.component";
|
import { DetailComponent } from "./components/detail/detail.component";
|
||||||
import { HomeComponent } from "./components/home/home.component";
|
import { HomeComponent } from "./components/home/home.component";
|
||||||
import { ReaderComponent } from "./components/reader/reader.component";
|
import { ReaderComponent } from "./components/reader/reader.component";
|
||||||
import { DmcaComponent } from "./components/dmca/dmca.component";
|
|
||||||
|
|
||||||
export const appRoutes: Route[] = [
|
export const appRoutes: Route[] = [
|
||||||
{
|
{
|
||||||
@@ -16,5 +15,4 @@ export const appRoutes: Route[] = [
|
|||||||
path: "auth",
|
path: "auth",
|
||||||
component: AuthComponent,
|
component: AuthComponent,
|
||||||
},
|
},
|
||||||
{ path: "dmca", component: DmcaComponent },
|
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -18,20 +18,13 @@
|
|||||||
>
|
>
|
||||||
Сохранить
|
Сохранить
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
(click)="clearToken()"
|
|
||||||
class="hover:bg-slate-600 bg-slate-400 p-3 rounded-md text-white"
|
|
||||||
>
|
|
||||||
Очистить
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
Вход через скрипт TamperMonkey. Если нет кнопки, значит вы не установили скрипт
|
Вход через скрипт TamperMonkey. Если нет кнопки, значит вы не установили скрипт
|
||||||
<a
|
<a
|
||||||
href="https://test-front.mangalib.me"
|
href="https://test-front.mangalib.me"
|
||||||
class="hover:bg-slate-600 bg-slate-400 px-3 md:py-3 py-1 rounded-md text-white tamperMonkey"
|
class="hover:bg-slate-600 bg-slate-400 p-3 rounded-md text-white tamperMonkey"
|
||||||
>
|
>
|
||||||
Вход
|
Вход
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -67,12 +67,6 @@ export class AuthComponent implements AfterViewInit, OnDestroy {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
clearToken() {
|
|
||||||
this.rulibAuthService.deleteToken();
|
|
||||||
if (this.libSocialToken) this.libSocialToken.nativeElement.value = "";
|
|
||||||
this.notificationService.info("Токен успешно удален!", "Вход");
|
|
||||||
}
|
|
||||||
|
|
||||||
ngAfterViewInit(): void {
|
ngAfterViewInit(): void {
|
||||||
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
|
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
|
||||||
const { token, service } = params;
|
const { token, service } = params;
|
||||||
|
|||||||
@@ -1,17 +0,0 @@
|
|||||||
<p class="text-3xl ps-[3rem] mt-3">DMCA Disclaimer</p>
|
|
||||||
<div class="h-full px-[3rem] flex flex-col gap-3">
|
|
||||||
<div class="block">
|
|
||||||
<p>На русском:</p>
|
|
||||||
<p>
|
|
||||||
Разработчики этого приложения не имеют никакого отношения к контенту, доступному в приложении.
|
|
||||||
Оно собрано из источников, свободно доступных через любой веб-браузер.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<p>English:</p>
|
|
||||||
<p>
|
|
||||||
The developers of this application does not have any affiliation with the content available in
|
|
||||||
the app. It is collecting from the sources freely available through any web browser.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import { Component } from "@angular/core";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: "app-dmca",
|
|
||||||
standalone: true,
|
|
||||||
templateUrl: "./dmca.component.html",
|
|
||||||
styleUrl: "./dmca.component.less",
|
|
||||||
})
|
|
||||||
export class DmcaComponent {}
|
|
||||||
@@ -1,14 +1,19 @@
|
|||||||
<div
|
<div class="footer w-full border-t border-black bg-gray-300 pt-3">
|
||||||
class="footer w-full border-t border-black bg-gray-300 min-h-[3rem] mt-3 px-12 flex flex-row justify-between items-center"
|
<p class="text-3xl ps-[5rem]">DMCA Disclaimer</p>
|
||||||
>
|
<div class="footer-content h-full px-[5rem] py-6 flex flex-col gap-3">
|
||||||
<div class="links flex flex-row flex-start gap-3 items-center">
|
<div class="block">
|
||||||
<a routerLink="/dmca" title="DMCA Disclaimer" class="underline">DMCA</a>
|
<p>На русском:</p>
|
||||||
|
<p>
|
||||||
|
Разработчики этого приложения не имеют никакого отношения к контенту, доступному в
|
||||||
|
приложении. Оно собрано из источников, свободно доступных через любой веб-браузер.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<p>English:</p>
|
||||||
|
<p>
|
||||||
|
The developers of this application does not have any affiliation with the content available
|
||||||
|
in the app. It is collecting from the sources freely available through any web browser.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a
|
|
||||||
class="underline flex flex-row items-center gap-1"
|
|
||||||
target="_blank"
|
|
||||||
title="Source code"
|
|
||||||
href="https://git.nwaifu.su/neuro_llc/NwaifuWeb/src/branch/dev/apps/NwaifuAnime"
|
|
||||||
>Исходный код <i class="lni lni-git"></i
|
|
||||||
></a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,12 +1,9 @@
|
|||||||
import { ChangeDetectionStrategy, Component } from "@angular/core";
|
import { Component } from "@angular/core";
|
||||||
import { RouterLink } from "@angular/router";
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: "app-footer",
|
selector: "app-footer",
|
||||||
templateUrl: "./footer.component.html",
|
templateUrl: "./footer.component.html",
|
||||||
styleUrls: ["./footer.component.less"],
|
styleUrls: ["./footer.component.less"],
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [RouterLink],
|
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
||||||
})
|
})
|
||||||
export class FooterComponent {}
|
export class FooterComponent {}
|
||||||
|
|||||||
@@ -1,29 +1,64 @@
|
|||||||
<div
|
|
||||||
class="header fixed flex flex-col items-center px-2 justify-start gap-1 md:justify-between top-0 left-0 md:h-12 h-16 bg-gray-700 w-full md:flex-row"
|
|
||||||
>
|
|
||||||
<a routerLink="/" title="Main page"><p class="text-xl text-white">NwaifuAnime</p></a>
|
|
||||||
<app-search-field></app-search-field>
|
|
||||||
<button title="Profile" #profileBtn class="hidden md:block">
|
|
||||||
<div class="profile-btn bg-white rounded-full w-8 h-8 aspect-square ms-3">
|
|
||||||
<img src="pic/Blank-profile.png" alt="Profile pic" class="w-full h-full" />
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
@if (this.swEnabled && this.swHasUpdate) {
|
|
||||||
<button title="Update" (click)="swUpdate()" class="md:w-fit w-full">
|
|
||||||
<div
|
|
||||||
class="h-8 md:w-8 w-full rounded-md bg-green-300 flex flex-col justify-center items-center md:ms-1 ms-0 md:mt-0 mt-2"
|
|
||||||
>
|
|
||||||
<i class="lni lni-download text-gray-700"></i>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
[class]="
|
[class]="
|
||||||
'profile-menu hidden md:flex flex-col overflow-hidden z-20 rounded-md w-32 bg-white border border-black p-3 h-full fixed ' +
|
'header fixed flex justify-between w-full px-2 bg-gray-700 md:h-8 items-center md:flex-row flex-col md:gap-0 gap-3 text-xl md:text-base ' +
|
||||||
(menuOpened ? 'max-h-32 opacity-100' : 'max-h-0 opacity-0')
|
(menuOpened ? 'h-screen' : '')
|
||||||
"
|
"
|
||||||
#profileMenu
|
|
||||||
>
|
>
|
||||||
<a routerLink="/auth" title="Auth page"><p class="hover:text-blue-400">Auth</p></a>
|
<div class="flex justify-between flex-row w-full align-middle h-8 items-center">
|
||||||
|
<div class="flex flex-row gap-3 h-full items-center">
|
||||||
|
<a routerLink="/" class="h-full px-2 flex justify-center items-center justify-self-center"
|
||||||
|
><h1 class="text-white" title="Main page">NwaifuAnime</h1></a
|
||||||
|
>
|
||||||
|
<div class="border-l border-white h-full"></div>
|
||||||
|
<div class="flex-row gap-3 md:flex hidden h-full items-center">
|
||||||
|
<a
|
||||||
|
routerLink="/auth"
|
||||||
|
class="h-full px-2 flex justify-center items-center hover:bg-gray-600 transition ease-in-out delay-150 duration-300"
|
||||||
|
><h2 class="text-white" title="Auth page">Auth</h2></a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Search bar on small screens -->
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="md:hidden flex justify-center items-center px-2"
|
||||||
|
(click)="changeMenu()"
|
||||||
|
>
|
||||||
|
<i [class]="menuBtnClass"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row md:justify-end justify-center items-center gap-3 md:w-[50vw] h-full w-full"
|
||||||
|
>
|
||||||
|
<!-- Search bar on big screens -->
|
||||||
|
<div [class]="searchBarClass">
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
#searchInput
|
||||||
|
class="outline-none ps-1 text-sm leading-6 w-full border-0 bg-transparent border-r border-gray-700"
|
||||||
|
(keydown.enter)="search()"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
class="align-middle w-[100px] text-center border-0 flex flex-col items-center justify-center"
|
||||||
|
type="submit"
|
||||||
|
(click)="search()"
|
||||||
|
>
|
||||||
|
<span class="text-sm text-black h-full">Поиск</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
[class]="
|
||||||
|
'flex flex-col w-full justify-start items-center md:hidden overflow-hidden ' +
|
||||||
|
(menuOpened ? 'h-auto' : 'h-0')
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
routerLink="/auth"
|
||||||
|
class="h-full px-2 flex justify-center items-center hover:bg-gray-600 transition ease-in-out delay-150 duration-300"
|
||||||
|
><h2 class="text-white" title="Auth page">Auth</h2></a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -5,6 +5,3 @@
|
|||||||
z-index: 20;
|
z-index: 20;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
.profile-menu {
|
|
||||||
transition: max-height 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,68 +1,65 @@
|
|||||||
import { CommonModule } from "@angular/common";
|
import { CommonModule } from "@angular/common";
|
||||||
import {
|
import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
|
||||||
AfterViewInit,
|
import { ActivatedRoute, NavigationEnd, Router, RouterLink } from "@angular/router";
|
||||||
Component,
|
import { Subject, filter, takeUntil } from "rxjs";
|
||||||
ElementRef,
|
|
||||||
HostListener,
|
|
||||||
OnDestroy,
|
|
||||||
ViewChild,
|
|
||||||
} from "@angular/core";
|
|
||||||
import { RouterLink } from "@angular/router";
|
|
||||||
import { Subject } from "rxjs";
|
|
||||||
import { AppService } from "../../app.service";
|
|
||||||
import { SearchFieldComponent } from "../search-field/search-field.component";
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: "app-header",
|
selector: "app-header",
|
||||||
templateUrl: "./header.component.html",
|
templateUrl: "./header.component.html",
|
||||||
styleUrls: ["./header.component.less"],
|
styleUrls: ["./header.component.less"],
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule, RouterLink, SearchFieldComponent],
|
imports: [CommonModule, RouterLink],
|
||||||
})
|
})
|
||||||
export class HeaderComponent implements AfterViewInit, OnDestroy {
|
export class HeaderComponent implements AfterViewInit, OnDestroy {
|
||||||
|
@ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement> | null = null;
|
||||||
menuOpened = false;
|
menuOpened = false;
|
||||||
@ViewChild("profileBtn") profileBtn: ElementRef<HTMLButtonElement> | null = null;
|
|
||||||
@ViewChild("profileMenu") profileMenu: ElementRef<HTMLDivElement> | null = null;
|
|
||||||
private destroy$ = new Subject<void>();
|
private destroy$ = new Subject<void>();
|
||||||
|
constructor(
|
||||||
constructor(private swService: AppService) {}
|
private router: Router,
|
||||||
|
private route: ActivatedRoute,
|
||||||
get swEnabled() {
|
) {
|
||||||
return this.swService.serviceWorkerEnabled;
|
this.router.events
|
||||||
|
.pipe(
|
||||||
|
filter((event) => event instanceof NavigationEnd),
|
||||||
|
takeUntil(this.destroy$),
|
||||||
|
)
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
.subscribe((val: any) => {
|
||||||
|
if (val.url.startsWith("/detail") || val.url.startsWith("/reader")) {
|
||||||
|
this.menuOpened = false;
|
||||||
|
} else if (val.url === "/") {
|
||||||
|
if (this.searchInput) {
|
||||||
|
this.searchInput.nativeElement.value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
changeMenu() {
|
||||||
|
this.menuOpened = !this.menuOpened;
|
||||||
}
|
}
|
||||||
|
|
||||||
swUpdate() {
|
get menuBtnClass(): string {
|
||||||
this.swService.update();
|
return `lni ${this.menuOpened ? "lni-close" : "lni-menu"} text-white`;
|
||||||
}
|
}
|
||||||
|
|
||||||
get swHasUpdate() {
|
get searchBarClass(): string {
|
||||||
return this.swService.isUpdateAvailable;
|
return `search-bar bg-slate-300 md:w-full w-full md:m-0 ms-2 me-2 md:h-6 h-10 md:flex justify-start flex-row items-center rounded-md ${this.menuOpened ? "flex" : "hidden"}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@HostListener("window:click", ["$event"])
|
search() {
|
||||||
toggleProfileMenu(event: MouseEvent) {
|
if (this.searchInput) {
|
||||||
if (this.profileBtn && this.profileBtn.nativeElement.contains(event.target as Node)) {
|
const text = this.searchInput.nativeElement.value;
|
||||||
this.menuOpened = !this.menuOpened;
|
this.router.navigateByUrl(`/?search=${text}`);
|
||||||
} else {
|
|
||||||
this.menuOpened = false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterViewInit(): void {
|
ngAfterViewInit(): void {
|
||||||
this.moveProfileMenu();
|
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
|
||||||
}
|
const search = params["search"];
|
||||||
|
if (search && this.searchInput) {
|
||||||
@HostListener("window:resize")
|
this.searchInput.nativeElement.value = search;
|
||||||
moveProfileMenu() {
|
}
|
||||||
if (this.profileBtn && this.profileMenu) {
|
});
|
||||||
const btnRect = this.profileBtn.nativeElement.getBoundingClientRect();
|
|
||||||
const menuRect = this.profileMenu.nativeElement.getBoundingClientRect();
|
|
||||||
const menuWidth = menuRect.width;
|
|
||||||
const menuX = btnRect.left + btnRect.width / 2 - menuWidth * 0.8;
|
|
||||||
const menuY = btnRect.top + btnRect.height;
|
|
||||||
this.profileMenu.nativeElement.style.left = `${menuX}px`;
|
|
||||||
this.profileMenu.nativeElement.style.top = `calc(${menuY}px + 0.25rem)`;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
ngOnDestroy(): void {
|
||||||
|
|||||||
@@ -16,15 +16,9 @@
|
|||||||
<img
|
<img
|
||||||
[src]="popularTitle.cover.thumbnail"
|
[src]="popularTitle.cover.thumbnail"
|
||||||
[alt]="popularTitle.slug"
|
[alt]="popularTitle.slug"
|
||||||
class="w-[200px] max-h-[250px] h-auto aspect-auto"
|
class="w-[200px] h-auto aspect-auto"
|
||||||
/>
|
/>
|
||||||
<p class="text-center">
|
<p>{{ popularTitle.rus_name }}</p>
|
||||||
{{
|
|
||||||
popularTitle.rus_name.length > 50
|
|
||||||
? popularTitle.rus_name.slice(0, 50) + "..."
|
|
||||||
: popularTitle.rus_name
|
|
||||||
}}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
}
|
}
|
||||||
@@ -34,68 +28,31 @@
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
<div class="flex justify-center items-center mt-3">
|
<div class="flex flex-col items-center w-full px-3">
|
||||||
@if (loading) {
|
@if (loading) {
|
||||||
<h1>Loading...</h1>
|
<h1>Loading...</h1>
|
||||||
} @else if (notFound && !loading) {
|
|
||||||
<h1>Not found</h1>
|
|
||||||
} @else {
|
|
||||||
<h1>Найдено по запросу "{{ search }}" результатов: {{ items.length }}</h1>
|
|
||||||
}
|
}
|
||||||
</div>
|
@if (notFound && !loading) {
|
||||||
<div class="flex flex-col items-center justify-start gap-3">
|
<h1>Not found</h1>
|
||||||
<div
|
}
|
||||||
class="flex md:flex-row flex-col flex-nowrap md:flex-wrap gap-2 justify-start items-center w-full px-3 mt-3 md:mx-12"
|
@for (item of items; track $index) {
|
||||||
>
|
<a
|
||||||
@for (item of currentPageItems; track $index) {
|
routerLink="/detail"
|
||||||
<a
|
[queryParams]="{ url: item.slug_url }"
|
||||||
routerLink="/detail"
|
title="{{ item.name }}"
|
||||||
[queryParams]="{ url: item.slug_url }"
|
class="mb-6 max-w-[700px] w-full"
|
||||||
title="{{ item.name }}"
|
>
|
||||||
class="my-1 max-w-[400px] w-full"
|
<div
|
||||||
|
class="card flex flex-col items-center border-black border-2 rounded-md p-4 w-full h-[350px]"
|
||||||
>
|
>
|
||||||
<div
|
<h1>{{ item.rus_name }}</h1>
|
||||||
class="card flex flex-col items-center border-black border-2 rounded-md p-4 w-full h-[350px]"
|
<img
|
||||||
>
|
[src]="item.cover.thumbnail"
|
||||||
<p class="text-center">
|
[alt]="item.slug"
|
||||||
{{
|
class="w-[200px] h-auto max-h-[300px] aspect-auto"
|
||||||
item.rus_name.length > 50 ? item.rus_name.substring(0, 50) + "..." : item.rus_name
|
/>
|
||||||
}}
|
</div>
|
||||||
</p>
|
</a>
|
||||||
<img
|
|
||||||
[src]="item.cover.thumbnail"
|
|
||||||
[alt]="item.slug"
|
|
||||||
class="w-[200px] h-auto max-h-[250px] aspect-auto"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
@if (items.length) {
|
|
||||||
<div class="flex flex-row items-center justify-between w-full px-3">
|
|
||||||
<button
|
|
||||||
[ngClass]="{
|
|
||||||
'bg-slate-600 text-white p-3 rounded-md hover:scale-105': 1,
|
|
||||||
'opacity-15': currentPage === 0,
|
|
||||||
}"
|
|
||||||
[disabled]="currentPage === 0"
|
|
||||||
(click)="previousSearchPage()"
|
|
||||||
>
|
|
||||||
Назад
|
|
||||||
</button>
|
|
||||||
<p>Страница {{ currentPage + 1 }} из {{ maxPages + 1 }}</p>
|
|
||||||
<button
|
|
||||||
[ngClass]="{
|
|
||||||
'bg-slate-600 text-white p-3 rounded-md hover:scale-105': 1,
|
|
||||||
'opacity-15': currentPage === maxPages,
|
|
||||||
}"
|
|
||||||
[disabled]="currentPage === maxPages"
|
|
||||||
*ngIf="currentPage < items.length / 8"
|
|
||||||
(click)="nextSearchPage()"
|
|
||||||
>
|
|
||||||
Вперед
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import { CommonModule } from "@angular/common";
|
import { CommonModule } from "@angular/common";
|
||||||
import { Component, Input, OnDestroy, OnInit } from "@angular/core";
|
import { Component, Input, OnDestroy, OnInit } from "@angular/core";
|
||||||
import { ActivatedRoute, Router, RouterLink } from "@angular/router";
|
import { ActivatedRoute, RouterLink } from "@angular/router";
|
||||||
import { Subject, Subscription, map, takeUntil } from "rxjs";
|
import { map, Subject, Subscription, takeUntil } from "rxjs";
|
||||||
import { RulibAuthService } from "../../services/parsers/rulib/rulib.auth.service";
|
|
||||||
import { IRuLIBPopular } from "../../services/parsers/rulib/rulib.popular.dto";
|
import { IRuLIBPopular } from "../../services/parsers/rulib/rulib.popular.dto";
|
||||||
import { Datum } from "../../services/parsers/rulib/rulib.search.dto";
|
import { Datum } from "../../services/parsers/rulib/rulib.search.dto";
|
||||||
import { SearchService } from "../../services/search.service";
|
import { SearchService } from "../../services/search.service";
|
||||||
@@ -20,7 +19,6 @@ export class HomeComponent implements OnDestroy, OnInit {
|
|||||||
notFound = false;
|
notFound = false;
|
||||||
search: string = "";
|
search: string = "";
|
||||||
popularItemsMap: Map<string, IRuLIBPopular[]> = new Map<string, IRuLIBPopular[]>();
|
popularItemsMap: Map<string, IRuLIBPopular[]> = new Map<string, IRuLIBPopular[]>();
|
||||||
currentPage = 0;
|
|
||||||
|
|
||||||
private destroy$ = new Subject<void>();
|
private destroy$ = new Subject<void>();
|
||||||
private popularSubscription = new Subscription();
|
private popularSubscription = new Subscription();
|
||||||
@@ -28,8 +26,6 @@ export class HomeComponent implements OnDestroy, OnInit {
|
|||||||
constructor(
|
constructor(
|
||||||
private searchService: SearchService,
|
private searchService: SearchService,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
private ruLibAuthService: RulibAuthService,
|
|
||||||
private router: Router,
|
|
||||||
) {
|
) {
|
||||||
this.searchService.setMangalibParser();
|
this.searchService.setMangalibParser();
|
||||||
}
|
}
|
||||||
@@ -64,58 +60,17 @@ export class HomeComponent implements OnDestroy, OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private getPopularSlashlib() {
|
private getPopularSlashlib() {
|
||||||
this.ruLibAuthService
|
this.searchService.setSlashlibParser();
|
||||||
.checkToken(this.ruLibAuthService.getToken())
|
this.getPopular(this.searchService.getRuLibName());
|
||||||
.pipe(takeUntil(this.destroy$))
|
|
||||||
.subscribe((loggedIn) => {
|
|
||||||
if (!loggedIn) return;
|
|
||||||
this.searchService.setSlashlibParser();
|
|
||||||
this.getPopular(this.searchService.getRuLibName());
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get popularItems() {
|
get popularItems() {
|
||||||
return Array.from(this.popularItemsMap.entries()).sort((a, b) => (a[0] > b[0] ? 1 : -1));
|
return Array.from(this.popularItemsMap.entries()).sort((a, b) => (a[0] > b[0] ? 1 : -1));
|
||||||
}
|
}
|
||||||
|
|
||||||
get currentPageItems() {
|
|
||||||
return this.items.slice(
|
|
||||||
8 * this.currentPage,
|
|
||||||
Math.min(this.items.length, 8 * (this.currentPage + 1)),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
get maxPages() {
|
|
||||||
return Math.ceil(this.items.length / 8) - 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
nextSearchPage() {
|
|
||||||
this.currentPage = Math.min(this.currentPage + 1, Math.ceil(this.items.length / 8) - 1);
|
|
||||||
this.router.navigate([], {
|
|
||||||
queryParams: { page: this.currentPage },
|
|
||||||
relativeTo: this.route,
|
|
||||||
queryParamsHandling: "merge",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
previousSearchPage() {
|
|
||||||
this.currentPage = Math.max(this.currentPage - 1, 0);
|
|
||||||
this.router.navigate([], {
|
|
||||||
queryParams: { page: this.currentPage },
|
|
||||||
relativeTo: this.route,
|
|
||||||
queryParamsHandling: "merge",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
|
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
|
||||||
if (this.search && params["search"] && this.search === params["search"]) return;
|
|
||||||
this.search = params["search"] ?? "";
|
this.search = params["search"] ?? "";
|
||||||
try {
|
|
||||||
this.currentPage = Math.max(0, +params["page"] || 0);
|
|
||||||
} catch {
|
|
||||||
this.currentPage = 0;
|
|
||||||
}
|
|
||||||
this.items = [];
|
this.items = [];
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
if (this.search) {
|
if (this.search) {
|
||||||
@@ -126,9 +81,6 @@ export class HomeComponent implements OnDestroy, OnInit {
|
|||||||
.subscribe((data) => {
|
.subscribe((data) => {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
this.items = data.data;
|
this.items = data.data;
|
||||||
const maxPage = Math.ceil(this.items.length / 8) - 1;
|
|
||||||
console.log(maxPage);
|
|
||||||
this.currentPage = Math.min(this.currentPage, maxPage);
|
|
||||||
this.notFound = this.items.length === 0;
|
this.notFound = this.items.length === 0;
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -0,0 +1,5 @@
|
|||||||
|
:host {
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,21 +0,0 @@
|
|||||||
<div class="flex flex-row gap-3 justify-between items-center md:justify-end">
|
|
||||||
<div
|
|
||||||
[class]="
|
|
||||||
'input-block rounded-md bg-white transition-[width] delay-150 duration-300 ease-in-out h-full overflow-hidden flex justify-center items-center w-full ' +
|
|
||||||
(openSearchField ? 'md:w-[300px]' : 'md:w-0')
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="search"
|
|
||||||
#searchInput
|
|
||||||
class="outline-none ps-1 text-sm leading-6 w-full border-0 bg-transparent border-r border-gray-700"
|
|
||||||
placeholder="Начать поиск"
|
|
||||||
(keydown.enter)="search()"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button (click)="toggleSearchField()" class="hidden md:block">
|
|
||||||
<div class="input-btn rounded-full w-8 h-8 bg-slate-400 flex justify-center items-center">
|
|
||||||
<i class="lni lni-search-alt text-white"></i>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
:host {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
import { CommonModule } from "@angular/common";
|
|
||||||
import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
|
|
||||||
import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
|
|
||||||
import { Subject, filter, takeUntil } from "rxjs";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: "app-search-field",
|
|
||||||
standalone: true,
|
|
||||||
imports: [CommonModule],
|
|
||||||
templateUrl: "./search-field.component.html",
|
|
||||||
styleUrl: "./search-field.component.less",
|
|
||||||
})
|
|
||||||
export class SearchFieldComponent implements AfterViewInit, OnDestroy {
|
|
||||||
@ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement> | null = null;
|
|
||||||
openSearchField = false;
|
|
||||||
private destroy$ = new Subject<void>();
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private route: ActivatedRoute,
|
|
||||||
private router: Router,
|
|
||||||
) {}
|
|
||||||
|
|
||||||
ngAfterViewInit(): void {
|
|
||||||
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
|
|
||||||
const search = params["search"];
|
|
||||||
if (search && this.searchInput) {
|
|
||||||
this.searchInput.nativeElement.value = search;
|
|
||||||
this.openSearchField = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.router.events
|
|
||||||
.pipe(
|
|
||||||
filter((event) => event instanceof NavigationEnd),
|
|
||||||
takeUntil(this.destroy$),
|
|
||||||
)
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
||||||
.subscribe((event: any) => {
|
|
||||||
if (event.url === "/" && this.searchInput) {
|
|
||||||
this.searchInput.nativeElement.value = "";
|
|
||||||
this.openSearchField = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
search() {
|
|
||||||
console.log(this.searchInput);
|
|
||||||
if (this.searchInput && this.searchInput.nativeElement.value)
|
|
||||||
this.router.navigate(["/"], {
|
|
||||||
queryParams: { search: this.searchInput.nativeElement.value },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleSearchField() {
|
|
||||||
this.openSearchField = !this.openSearchField;
|
|
||||||
if (this.openSearchField && this.searchInput) {
|
|
||||||
this.searchInput.nativeElement.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
|
||||||
this.destroy$.next();
|
|
||||||
this.destroy$.complete();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
<div
|
|
||||||
class="flex flex-row justify-start items-center md:hidden fixed bottom-0 w-full bg-gray-700 h-16 px-3"
|
|
||||||
>
|
|
||||||
@for (link of links; track link.link) {
|
|
||||||
<a [routerLink]="link.link">
|
|
||||||
<div class="tab-bar__item flex flex-col justify-center items-center h-full center w-16">
|
|
||||||
<i
|
|
||||||
[class]="
|
|
||||||
'text-3xl ' + link.line_icon + ' ' + (link.active ? 'text-white' : 'text-gray-500')
|
|
||||||
"
|
|
||||||
></i>
|
|
||||||
<span [class]="link.active ? 'text-white' : 'text-gray-500'">Auth</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import { CommonModule } from "@angular/common";
|
|
||||||
import { Component, OnDestroy } from "@angular/core";
|
|
||||||
import { NavigationEnd, Router, RouterLink } from "@angular/router";
|
|
||||||
import { Subject, filter, takeUntil } from "rxjs";
|
|
||||||
import { ITab } from "./tab-bar.dto";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: "app-tab-bar",
|
|
||||||
standalone: true,
|
|
||||||
imports: [CommonModule, RouterLink],
|
|
||||||
templateUrl: "./tab-bar.component.html",
|
|
||||||
styleUrl: "./tab-bar.component.less",
|
|
||||||
})
|
|
||||||
export class TabBarComponent implements OnDestroy {
|
|
||||||
links: ITab[] = [
|
|
||||||
{
|
|
||||||
link: "/auth",
|
|
||||||
line_icon: "lni lni-user",
|
|
||||||
name: "Auth",
|
|
||||||
active: false,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
private destroy$ = new Subject<void>();
|
|
||||||
|
|
||||||
constructor(private router: Router) {
|
|
||||||
this.router.events
|
|
||||||
.pipe(
|
|
||||||
filter((event) => event instanceof NavigationEnd),
|
|
||||||
takeUntil(this.destroy$),
|
|
||||||
)
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
||||||
.subscribe((event: any) => {
|
|
||||||
this.links.forEach((link) => {
|
|
||||||
link.active = event.url.startsWith(link.link);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
ngOnDestroy(): void {
|
|
||||||
throw new Error("Method not implemented.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
export interface ITab {
|
|
||||||
link: string;
|
|
||||||
line_icon: string;
|
|
||||||
name: string;
|
|
||||||
active: boolean;
|
|
||||||
}
|
|
||||||
@@ -28,12 +28,6 @@ export class RulibAuthService implements OnDestroy {
|
|||||||
return token_data.rulib_token ?? "";
|
return token_data.rulib_token ?? "";
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteToken(): void {
|
|
||||||
const token_data: IToken = JSON.parse(localStorage.getItem("token") ?? "{}");
|
|
||||||
token_data.rulib_token = "";
|
|
||||||
localStorage.setItem("token", JSON.stringify(token_data));
|
|
||||||
}
|
|
||||||
|
|
||||||
checkToken(token: string): Observable<boolean> {
|
checkToken(token: string): Observable<boolean> {
|
||||||
return this.http
|
return this.http
|
||||||
.get(this.api_url + "/api/auth/me", {
|
.get(this.api_url + "/api/auth/me", {
|
||||||
|
|||||||
7
nx.json
7
nx.json
@@ -36,10 +36,5 @@
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"nxCloudAccessToken": "${NX_CLOUD_ACCESS_TOKEN}",
|
"nxCloudAccessToken": "${NX_CLOUD_ACCESS_TOKEN}"
|
||||||
"generators": {
|
|
||||||
"@nx/angular:component": {
|
|
||||||
"style": "less"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "nwaifu-web",
|
"name": "nwaifu-web",
|
||||||
"version": "0.3.1",
|
"version": "0.2.3",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"ng": "ng",
|
"ng": "ng",
|
||||||
"start": "nx serve NwaifuWeb",
|
"start": "nx serve NwaifuWeb",
|
||||||
|
|||||||
Reference in New Issue
Block a user