Got Requests page working !wip

pull/2411/head
TidusJar 7 years ago
parent 9c33cf96f7
commit bae8e18424

@ -71,6 +71,10 @@ export interface ITvRequests {
status: string;
childRequests: IChildRequests[];
qualityOverride: number;
background: any;
totalSeasons: number;
tvDbId: number;
open: boolean; // THIS IS FOR THE UI
// For UI display
qualityOverrideTitle: string;

@ -18,43 +18,40 @@
[infiniteScrollThrottle]="100"
(scrolled)="loadMore()">-->
<div>
<p-treeTable [value]="tvRequests">
<ng-template let-col let-node="rowData" pTemplate="header">
Results
</ng-template>
<ng-template let-col let-node="rowData" pTemplate="body">
<div *ngIf="tvRequests">
<div *ngFor="let node of tvRequests.collection">
<!--This is the section that holds the parent level results set-->
<div *ngIf="!node.leaf">
<div>
<div class="row">
<div class="myBg backdrop" [style.background-image]="node?.data?.background"></div>
<div class="myBg backdrop" [style.background-image]="node?.background"></div>
<div class="tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>
<div class="col-sm-2 small-padding">
<img class="img-responsive poster" src="{{node.data.posterPath || null}}" alt="poster">
<img class="img-responsive poster" src="{{node.posterPath || null}}" alt="poster">
</div>
<div class="col-sm-5 small-padding">
<div>
<a href="http://www.imdb.com/title/{{node.data.imdbId}}/" target="_blank">
<h4 class="request-title">{{node.data.title}} ({{node.data.releaseDate | date: 'yyyy'}})</h4>
<a href="http://www.imdb.com/title/{{node.imdbId}}/" target="_blank">
<h4 class="request-title">{{node.title}} ({{node.releaseDate | date: 'yyyy'}})</h4>
</a>
</div>
<br />
<div>
<span>Status: </span>
<span class="label label-success">{{node.data.status}}</span>
<span class="label label-success">{{node.status}}</span>
</div>
<div>Release Date: {{node.data.releaseDate | date}}</div>
<div>Release Date: {{node.releaseDate | date}}</div>
<div *ngIf="isAdmin">
<div *ngIf="node.data.qualityOverrideTitle" class="quality-override">{{ 'Requests.QualityOverride' | translate }}
<span>{{node.data.qualityOverrideTitle}} </span>
<div *ngIf="node.qualityOverrideTitle" class="quality-override">{{ 'Requests.QualityOverride' | translate }}
<span>{{node.qualityOverrideTitle}} </span>
</div>
<div *ngIf="node.data.rootPathOverrideTitle" class="root-override">{{ 'Requests.RootFolderOverride' | translate }}
<span>{{node.data.rootPathOverrideTitle}} </span>
<div *ngIf="node.rootPathOverrideTitle" class="root-override">{{ 'Requests.RootFolderOverride' | translate }}
<span>{{node.rootPathOverrideTitle}} </span>
</div>
</div>
@ -62,7 +59,7 @@
</div>
<div class="col-sm-3 col-sm-push-3 small-padding">
<button style="text-align: right" class="btn btn-sm btn-success-outline" (click)="openClosestTab($event)">
<button style="text-align: right" class="btn btn-sm btn-success-outline" (click)="openClosestTab(node,$event)">
<i class="fa fa-plus"></i> View</button>
<div *ngIf="isAdmin">
<!--Sonarr Root Folder-->
@ -76,7 +73,7 @@
</button>
<ul class="dropdown-menu">
<li *ngFor="let folder of sonarrRootFolders">
<a href="#" (click)="selectRootFolder(node.data, folder, $event)">{{folder.path}}</a>
<a href="#" (click)="selectRootFolder(node, folder, $event)">{{folder.path}}</a>
</li>
</ul>
</div>
@ -92,7 +89,7 @@
</button>
<ul class="dropdown-menu">
<li *ngFor="let profile of sonarrProfiles">
<a href="#" (click)="selectQualityProfile(node.data, profile, $event)">{{profile.name}}</a>
<a href="#" (click)="selectQualityProfile(node, profile, $event)">{{profile.name}}</a>
</li>
</ul>
</div>
@ -106,7 +103,7 @@
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li *ngFor="let cat of issueCategories">
<a [routerLink]="" (click)="reportIssue(cat, node.data)">{{cat.value}}</a>
<a [routerLink]="" (click)="reportIssue(cat, node)">{{cat.value}}</a>
</li>
</ul>
</div>
@ -114,11 +111,11 @@
</div>
</div>
<!--This is the section that holds the child seasons if they want to specify specific episodes-->
<div *ngIf="node.leaf">
<tvrequests-children [childRequests]="node.data" [isAdmin]="isAdmin" (requestDeleted)="childRequestDeleted($event)"></tvrequests-children>
<div *ngIf="node.open">
<tvrequests-children [childRequests]="node.childRequests" [isAdmin]="isAdmin" (requestDeleted)="childRequestDeleted($event)"></tvrequests-children>
</div>
</ng-template>
</p-treeTable>
</div>
</div>
<p-paginator [rows]="10" [totalRecords]="totalTv" (onPageChange)="paginate($event)"></p-paginator>
</div>

@ -1,12 +1,11 @@
import { PlatformLocation } from "@angular/common";
import { Component, Input, OnInit } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { TreeNode } from "primeng/primeng";
import { Subject } from "rxjs";
import { debounceTime, distinctUntilChanged } from "rxjs/operators";
import { AuthService } from "../auth/auth.service";
import { IIssueCategory, IPagenator, ISonarrProfile, ISonarrRootFolder, ITvRequests } from "../interfaces";
import { FilterType, IIssueCategory, IPagenator, IRequestsViewModel, ISonarrProfile, ISonarrRootFolder, ITvRequests, OrderType } from "../interfaces";
import { NotificationService, RequestService, SonarrService } from "../services";
import { ImageService } from "./../services/image.service";
@ -17,7 +16,7 @@ import { ImageService } from "./../services/image.service";
})
export class TvRequestsComponent implements OnInit {
public tvRequests: TreeNode[];
public tvRequests: IRequestsViewModel<ITvRequests>;
public searchChanged = new Subject<string>();
public searchText: string;
public isAdmin: boolean;
@ -56,11 +55,11 @@ export class TvRequestsComponent implements OnInit {
this.resetSearch();
return;
}
this.requestService.searchTvRequestsTree(this.searchText)
this.requestService.searchTvRequests(this.searchText)
.subscribe(m => {
this.tvRequests = m;
this.tvRequests.forEach((val) => this.loadBackdrop(val));
this.tvRequests.forEach((val) => this.setOverride(val.data));
this.tvRequests.collection = m;
this.tvRequests.collection.forEach((val) => this.loadBackdrop(val));
this.tvRequests.collection.forEach((val) => this.setOverride(val));
});
});
this.defaultPoster = "../../../images/default_tv_poster.png";
@ -70,47 +69,15 @@ export class TvRequestsComponent implements OnInit {
}
}
public openClosestTab(el: any) {
const rowclass = "undefined ng-star-inserted";
el = el.toElement || el.relatedTarget || el.target || el.srcElement;
if (el.nodeName === "BUTTON") {
const isButtonAlreadyActive = el.parentElement.querySelector(".active");
// if a Button already has Class: .active
if (isButtonAlreadyActive) {
isButtonAlreadyActive.classList.remove("active");
} else {
el.className += " active";
}
}
while (el.className !== rowclass) {
// Increment the loop to the parent node until we find the row we need
el = el.parentNode;
}
// At this point, the while loop has stopped and `el` represents the element that has
// the class you specified
// Then we loop through the children to find the caret which we want to click
const caretright = "fa-caret-right";
const caretdown = "fa-caret-down";
for (const value of el.children) {
// the caret from the ui has 2 class selectors depending on if expanded or not
// we search for both since we want to still toggle the clicking
if (value.className.includes(caretright) || value.className.includes(caretdown)) {
// Then we tell JS to click the element even though we hid it from the UI
value.click();
//Break from loop since we no longer need to continue looking
break;
}
}
public openClosestTab(node: ITvRequests,el: any) {
el.preventDefault();
node.open = !node.open;
}
public ngOnInit() {
this.amountToLoad = 10;
this.currentlyLoaded = 10;
this.tvRequests = [];
this.tvRequests = {collection:[], total:0};
this.isAdmin = this.auth.hasRole("admin") || this.auth.hasRole("poweruser");
this.loadInit();
@ -119,7 +86,7 @@ export class TvRequestsComponent implements OnInit {
public paginate(event: IPagenator) {
const skipAmount = event.first;
this.requestService.getTvRequestsTree(this.amountToLoad, skipAmount)
this.requestService.getTvRequests(this.amountToLoad, skipAmount, OrderType.RequestedDateDesc, FilterType.None, FilterType.None)
.subscribe(x => {
this.tvRequests = x;
this.currentlyLoaded = this.currentlyLoaded + this.amountToLoad;
@ -198,13 +165,13 @@ export class TvRequestsComponent implements OnInit {
private loadInit() {
this.requestService.getTotalTv().subscribe(x => this.totalTv = x);
this.requestService.getTvRequestsTree(this.amountToLoad, 0)
this.requestService.getTvRequests(this.amountToLoad, 0, OrderType.RequestedDateDesc, FilterType.None, FilterType.None)
.subscribe(x => {
this.tvRequests = x;
this.tvRequests.forEach((val, index) => {
this.tvRequests.collection.forEach((val, index) => {
this.setDefaults(val);
this.loadBackdrop(val);
this.setOverride(val.data);
this.setOverride(val);
});
});
@ -222,20 +189,20 @@ export class TvRequestsComponent implements OnInit {
this.loadInit();
}
private setDefaults(val: any) {
if (val.data.posterPath === null) {
val.data.posterPath = this.defaultPoster;
private setDefaults(val: ITvRequests) {
if (val.posterPath === null) {
val.posterPath = this.defaultPoster;
}
}
private loadBackdrop(val: TreeNode): void {
if (val.data.background != null) {
val.data.background = this.sanitizer.bypassSecurityTrustStyle
("url(https://image.tmdb.org/t/p/w1280" + val.data.background + ")");
private loadBackdrop(val: ITvRequests): void {
if (val.background != null) {
val.background = this.sanitizer.bypassSecurityTrustStyle
("url(https://image.tmdb.org/t/p/w1280" + val.background + ")");
} else {
this.imageService.getTvBanner(val.data.tvDbId).subscribe(x => {
this.imageService.getTvBanner(val.tvDbId).subscribe(x => {
if (x) {
val.data.background = this.sanitizer.bypassSecurityTrustStyle
val.background = this.sanitizer.bypassSecurityTrustStyle
("url(" + x + ")");
}
});

@ -5,7 +5,7 @@ import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { TreeNode } from "primeng/primeng";
import { IRequestEngineResult } from "../interfaces";
import { IRequestEngineResult, FilterType } from "../interfaces";
import { IChildRequests, IFilter, IMovieRequestModel, IMovieRequests, IMovieUpdateModel, IRequestsViewModel, ITvRequests, ITvUpdateModel, OrderType } from "../interfaces";
import { ITvRequestViewModel } from "../interfaces";
import { ServiceHelpers } from "./service.helpers";
@ -64,8 +64,8 @@ export class RequestService extends ServiceHelpers {
return this.http.put<IMovieRequests>(`${this.url}movie/`, JSON.stringify(request), {headers: this.headers});
}
public getTvRequests(count: number, position: number): Observable<ITvRequests[]> {
return this.http.get<ITvRequests[]>(`${this.url}tv/${count}/${position}`, {headers: this.headers});
public getTvRequests(count: number, position: number, order: OrderType, status: FilterType, availability: FilterType): Observable<IRequestsViewModel<ITvRequests>> {
return this.http.get<IRequestsViewModel<ITvRequests>>(`${this.url}tv/${count}/${position}/${order}/${status}/${availability}`, {headers: this.headers});
}
public getTvRequestsTree(count: number, position: number): Observable<TreeNode[]> {

Loading…
Cancel
Save