mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-14 10:36:54 -07:00
Got Requests page working !wip
This commit is contained in:
parent
9c33cf96f7
commit
bae8e18424
4 changed files with 51 additions and 83 deletions
|
@ -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…
Add table
Add a link
Reference in a new issue