Added the remaining requests into the navbar, just need to dynamically update it now

pull/3878/head
tidusjar 4 years ago
parent 19933f8186
commit 8d05dfc4c2

@ -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,

@ -2,7 +2,9 @@
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar>{{applicationName}}</mat-toolbar>
<div class="outer-profile">
<div class="profile-img-container">
<div class="profile-img">
@ -45,7 +47,7 @@
<mat-icon *ngIf="theme === 'light'" aria-label="Side nav toggle icon">brightness_4</mat-icon>
&nbsp;{{ 'NavigationBar.ChangeTheme' | translate }}
</a>
<a id="nav-logout" class="bottom-nav-link" mat-list-item [routerLinkActive]="'active-list-item'"
<a id="nav-logout" mat-list-item [routerLinkActive]="'active-list-item'"
aria-label="Toggle sidenav" (click)="logOut();">
<mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
&nbsp;{{ 'NavigationBar.Logout' | translate }}
@ -53,7 +55,16 @@
</mat-nav-list>
<div class="bottom-nav full">
<div class="outer-profile">
<app-remaining-requests [type]="RequestType.movie"></app-remaining-requests>
<app-remaining-requests [type]="RequestType.tvShow"></app-remaining-requests>
<app-remaining-requests [type]="RequestType.album"></app-remaining-requests>
</div>
</div>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"

@ -71,23 +71,6 @@
height: 100%;
/* overflow: auto; */
}
// Changed color with !important and changed the font weight
/*.active-list-item-dark {
background: $accent-dark !important;
color:black !important;
font-weight:500;
}*/
// changed bottom to 10px so when you overlay a link it won't get blocked by URL
#bottom-nav-link {
bottom: 10px;
position: absolute !important;
//background-color:#E84C3D;
}
/*bottom-nav-link:hover{
background-color:rgb(226, 52, 36) !important;
}*/
.profile-img-container {
margin: 20px auto 10px;
@ -126,4 +109,14 @@
background-color: #303030;
box-shadow: inset 0 0 3px #000000;
padding: 1px;
}
.full {
width: 100%;
}
.bottom-nav {
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}

@ -8,7 +8,7 @@ import { SettingsService } from '../services';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
import { SearchFilter } from './SearchFilter';
import { Md5 } from 'ts-md5/dist/md5';
import { TranslateService } from '@ngx-translate/core';
import { RequestType } from '../interfaces';
export enum SearchFilterType {
Movie = 1,
@ -43,11 +43,11 @@ export class MyNavComponent implements OnInit {
public SearchFilterType = SearchFilterType;
public emailHash: string | Int32Array;
public welcomeText: string;
public RequestType = RequestType;
constructor(private breakpointObserver: BreakpointObserver,
private settingsService: SettingsService,
private store: StorageService,
private translate: TranslateService) {
private store: StorageService) {
}
public async ngOnInit() {

@ -1,14 +1,12 @@
import { Component, Input, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import {
debounceTime,
distinctUntilChanged,
switchMap,
tap,
finalize,
} from "rxjs/operators";
import { empty, of } from "rxjs";
import { empty} from "rxjs";
import { SearchV2Service } from "../services/searchV2.service";
import { IMultiSearchResult } from "../interfaces";
import { Router } from "@angular/router";

@ -0,0 +1,7 @@
<div *ngIf="remaining?.hasLimit">
<small id="remainingRequests" class="text-center">
<mat-icon [matTooltip]="getTooltipContent()">{{matIcon}}</mat-icon> {{'Requests.Remaining.Quota' | translate: {remaining: remaining.remaining, total: remaining.limit} }}
</small>
</div>

@ -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;
}
}
Loading…
Cancel
Save