From 8d05dfc4c262c6b59797fb5b7ef6c2e76436ec32 Mon Sep 17 00:00:00 2001 From: tidusjar Date: Fri, 6 Nov 2020 23:16:14 +0000 Subject: [PATCH] Added the remaining requests into the navbar, just need to dynamically update it now --- src/Ombi/ClientApp/src/app/app.module.ts | 7 +- .../src/app/my-nav/my-nav.component.html | 13 ++- .../src/app/my-nav/my-nav.component.scss | 27 +++--- .../src/app/my-nav/my-nav.component.ts | 6 +- .../src/app/my-nav/nav-search.component.ts | 4 +- .../remaining-requests.component.html | 7 ++ .../remaining-requests.component.ts | 89 +++++++++++++++++++ 7 files changed, 128 insertions(+), 25 deletions(-) create mode 100644 src/Ombi/ClientApp/src/app/shared/remaining-requests/remaining-requests.component.html create mode 100644 src/Ombi/ClientApp/src/app/shared/remaining-requests/remaining-requests.component.ts diff --git a/src/Ombi/ClientApp/src/app/app.module.ts b/src/Ombi/ClientApp/src/app/app.module.ts index 2a9b6d802..09e5f2955 100644 --- a/src/Ombi/ClientApp/src/app/app.module.ts +++ b/src/Ombi/ClientApp/src/app/app.module.ts @@ -53,7 +53,7 @@ import { TokenResetPasswordComponent } from "./login/tokenresetpassword.componen // Services import { AuthGuard } from "./auth/auth.guard"; import { AuthService } from "./auth/auth.service"; -import { ImageService, SettingsService, CustomPageService } from "./services"; +import { ImageService, SettingsService, CustomPageService, RequestService } from "./services"; import { LandingPageService } from "./services"; import { NotificationService } from "./services"; import { IssuesService, JobService, PlexTvService, StatusService, SearchService, IdentityService, MessageService } from "./services"; @@ -65,6 +65,8 @@ import { OverlayModule } from "@angular/cdk/overlay"; import { StorageService } from "./shared/storage/storage-service"; import { SignalRNotificationService } from "./services/signlarnotification.service"; import { MatMenuModule } from "@angular/material/menu"; +import { RemainingRequestsComponent } from "./shared/remaining-requests/remaining-requests.component"; + const routes: Routes = [ { path: "*", component: PageNotFoundComponent }, { path: "", redirectTo: "/discover", pathMatch: "full" }, @@ -168,7 +170,9 @@ export function JwtTokenGetter() { LoginOAuthComponent, MyNavComponent, NavSearchComponent, + RemainingRequestsComponent, ], + providers: [ NotificationService, AuthService, @@ -187,6 +191,7 @@ export function JwtTokenGetter() { SearchV2Service, MessageService, StorageService, + RequestService, SignalRNotificationService, { provide: APP_BASE_HREF, diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html index a7ac5b737..1e44c367b 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html +++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html @@ -2,7 +2,9 @@ + {{applicationName}} +
@@ -45,7 +47,7 @@ brightness_4  {{ 'NavigationBar.ChangeTheme' | translate }} - exit_to_app  {{ 'NavigationBar.Logout' | translate }} @@ -53,7 +55,16 @@ + +
+
+ + + +
+
+
+ + diff --git a/src/Ombi/ClientApp/src/app/shared/remaining-requests/remaining-requests.component.ts b/src/Ombi/ClientApp/src/app/shared/remaining-requests/remaining-requests.component.ts new file mode 100644 index 000000000..222389e5e --- /dev/null +++ b/src/Ombi/ClientApp/src/app/shared/remaining-requests/remaining-requests.component.ts @@ -0,0 +1,89 @@ +import { Component, Input, OnInit } from "@angular/core"; +import { TranslateService } from "@ngx-translate/core"; +import { RequestType } from "../../interfaces"; +import { IRemainingRequests } from "../../interfaces/IRemainingRequests"; +import { RequestService } from "../../services"; +@Component({ + selector: "app-remaining-requests", + templateUrl: "remaining-requests.component.html", + styles: [`.mat-icon { + vertical-align: middle; + }`], +}) +export class RemainingRequestsComponent implements OnInit { + + @Input() type: RequestType; + public RequestType = RequestType; + public remaining: IRemainingRequests; + public daysUntil: number; + public hoursUntil: number; + public minutesUntil: number; + public matIcon: string; + + constructor(private requestService: RequestService, + private translate: TranslateService) { } + + public ngOnInit(): void { + this.start(); + } + + public getTooltipContent() : string { + if (this.daysUntil > 1) { + return this.translate.instant('Requests.Remaining.NextDays', { time: this.daysUntil}); + } + if (this.hoursUntil > 1 && this.daysUntil <= 1) { + return this.translate.instant('Requests.Remaining.NextHours', { time: this.hoursUntil}); + } + if (this.minutesUntil >= 1 && this.hoursUntil <= 1 && this.daysUntil <= 1) { + return this.minutesUntil == 1 + ? this.translate.instant('Requests.Remaining.NextMinute', { time: this.minutesUntil}) + : this.translate.instant('Requests.Remaining.NextMinutes', { time: this.minutesUntil}); + } + } + + private start() { + + const callback = (remaining => { + this.remaining = remaining; + if (this.remaining && this.remaining.hasLimit) { + this.calculateTime(); + } + }); + + switch (this.type) { + case RequestType.movie: + this.requestService.getRemainingMovieRequests().subscribe(callback); + this.matIcon = "movie"; + + break; + case RequestType.tvShow: + this.requestService.getRemainingTvRequests().subscribe(callback); + this.matIcon = "tv"; + + break; + case RequestType.album: + this.requestService.getRemainingMusicRequests().subscribe(callback); + this.matIcon = "library_music"; + + break; + } + } + + private calculateTime(): void { + this.daysUntil = Math.ceil(this.daysUntilNextRequest()); + this.hoursUntil = Math.ceil(this.hoursUntilNextRequest()); + this.minutesUntil = Math.ceil(this.minutesUntilNextRequest()); + } + + private daysUntilNextRequest(): number { + return (new Date(this.remaining.nextRequest).getTime() - new Date().getTime()) / 1000 / 60 / 60 / 24; + } + + private hoursUntilNextRequest(): number { + return (new Date(this.remaining.nextRequest).getTime() - new Date().getTime()) / 1000 / 60 / 60; + } + + private minutesUntilNextRequest(): number { + return (new Date(this.remaining.nextRequest).getTime() - new Date().getTime()) / 1000 / 60; + } +}