mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-14 02:26:55 -07:00
Merge pull request #1496 from dhruvb14/DotNetCore
Break out Request Children into their own component make Search UI similar to Requests UI
This commit is contained in:
Jamie
GitHub
commit
8d6836beed
10 changed files with 240 additions and 384 deletions
|
|
@ -12,9 +12,8 @@ import { ButtonModule, DialogModule } from 'primeng/primeng';
|
|||
import { RequestComponent } from './request.component';
|
||||
import { MovieRequestsComponent } from './movierequests.component';
|
||||
import { TvRequestsComponent } from './tvrequests.component';
|
||||
import { TvRequestManageComponent } from './tvrequest-manage.component';
|
||||
//import { RequestGridComponent } from '../request-grid/request-grid.component';
|
||||
// import { RequestCardComponent } from '../request-grid/request-card.component';
|
||||
import { TvRequestChildrenComponent } from './tvrequest-children.component';
|
||||
|
||||
import { TreeTableModule } from 'primeng/primeng';
|
||||
|
||||
import { IdentityService } from '../services/identity.service';
|
||||
|
|
@ -24,7 +23,7 @@ import { AuthGuard } from '../auth/auth.guard';
|
|||
|
||||
const routes: Routes = [
|
||||
{ path: 'requests', component: RequestComponent, canActivate: [AuthGuard] },
|
||||
{ path: 'requests/:id', component: TvRequestManageComponent, canActivate: [AuthGuard] },
|
||||
{ path: 'requests/:id', component: TvRequestChildrenComponent, canActivate: [AuthGuard] },
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -42,7 +41,7 @@ const routes: Routes = [
|
|||
RequestComponent,
|
||||
MovieRequestsComponent,
|
||||
TvRequestsComponent,
|
||||
TvRequestManageComponent,
|
||||
TvRequestChildrenComponent,
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
|
|
|
|||
|
|
@ -1,25 +1,10 @@
|
|||
<div *ngIf="childRequests">
|
||||
<hr />
|
||||
<div *ngFor="let child of childRequests">
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="col-md-2">
|
||||
<span>Requested By: {{child.requestedUser.userName}}</span>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--<div *ngFor="let season of child.seasonRequests">
|
||||
<span>Season {{season.seasonNumber}}</span>
|
||||
<div>Episodes:</div>
|
||||
<span *ngFor="let episode of season.episodes">
|
||||
<span [ngStyle]="{ 'color': getColour(episode) }">{{episode.episodeNumber}}</span>
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -92,8 +77,6 @@
|
|||
<span *ngIf="!ep.available" class="label label-danger">Not Yet Requested</span>
|
||||
</ng-template>
|
||||
</td>
|
||||
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -1,42 +1,17 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { RequestService } from '../services/request.service';
|
||||
import { IdentityService } from '../services/identity.service';
|
||||
|
||||
import { IChildRequests, IEpisodesRequests, INewSeasonRequests } from '../interfaces/IRequestModel';
|
||||
import { IChildRequests, IEpisodesRequests } from '../interfaces/IRequestModel';
|
||||
|
||||
@Component({
|
||||
templateUrl: './tvrequest-manage.component.html'
|
||||
selector:'tvrequests-children',
|
||||
templateUrl: './tvrequest-children.component.html'
|
||||
})
|
||||
export class TvRequestManageComponent {
|
||||
constructor(private requestService: RequestService, private identityService: IdentityService,
|
||||
private route: ActivatedRoute) {
|
||||
|
||||
this.route.params
|
||||
.subscribe(params => {
|
||||
this.tvId = +params['id']; // (+) converts string 'id' to a number
|
||||
this.requestService.getChildRequests(this.tvId).subscribe(x => {
|
||||
this.childRequests = this.fixEpisodeSort(x);
|
||||
});
|
||||
});
|
||||
|
||||
this.isAdmin = this.identityService.hasRole('admin');
|
||||
export class TvRequestChildrenComponent {
|
||||
constructor(private requestService: RequestService) {
|
||||
}
|
||||
|
||||
tvId: number;
|
||||
childRequests: IChildRequests[];
|
||||
isAdmin: boolean;
|
||||
public fixEpisodeSort(items: IChildRequests[]) {
|
||||
items.forEach(function (value) {
|
||||
value.seasonRequests.forEach(function (requests: INewSeasonRequests) {
|
||||
requests.episodes.sort(function (a: IEpisodesRequests, b: IEpisodesRequests) {
|
||||
return a.episodeNumber - b.episodeNumber;
|
||||
})
|
||||
})
|
||||
})
|
||||
return items;
|
||||
}
|
||||
@Input() childRequests: IChildRequests[];
|
||||
@Input() isAdmin: boolean;
|
||||
public removeRequest(request: IChildRequests) {
|
||||
this.requestService.deleteChild(request)
|
||||
.subscribe();
|
||||
|
|
@ -4,12 +4,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<!--TODO: I believe this +1 is causing off by one error skipping loading of tv shows
|
||||
When removed and scrolling very slowly everything works as expected, however
|
||||
if you scroll really quickly then you start getting duplicates of movies
|
||||
since it's async and some subsequent results return first and then incrementer
|
||||
is increased so you see movies which had already been gotten show up...
|
||||
|
||||
Removing infinte-scroll and setting max to 1000 till we work out some sort of fix
|
||||
|
||||
<div infinite-scroll
|
||||
-->
|
||||
<!--<div infinite-scroll
|
||||
[infiniteScrollDistance]="1"
|
||||
[infiniteScrollThrottle]="100"
|
||||
(scrolled)="loadMore()">
|
||||
<!--<div>-->
|
||||
(scrolled)="loadMore()">-->
|
||||
<div>
|
||||
<p-treeTable [value]="tvRequests">
|
||||
<!--<p-column>
|
||||
<ng-template let-col let-node="rowData" pTemplate="body">
|
||||
|
|
@ -27,7 +35,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
|
||||
<img class="img-responsive poster" src="{{node.data.posterPath}}" alt="poster">
|
||||
<img class="img-responsive poster" src="{{node.data.posterPath || null}}" alt="poster">
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -50,148 +58,15 @@
|
|||
<div class="col-sm-3 col-sm-push-3">
|
||||
|
||||
<button style="text-align: right" class="btn btn-sm btn-success-outline" (click)="openClosestTab($event)"><i class="fa fa-plus"></i> View</button>
|
||||
<!--<button [routerLink]="[node.data.id]" style="text-align: right" class="btn btn-sm btn-success-outline" type="submit"><i class="fa fa-plus"></i> View</button>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--This is the section that holds the child seasons if they want to specify specific episodes-->
|
||||
<div *ngIf="node.leaf">
|
||||
<hr />
|
||||
<div *ngIf="node.data">
|
||||
<div *ngFor="let child of node.data">
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="col-md-2">
|
||||
<span>Requested By: {{child.requestedUser.userName}}</span>
|
||||
<span>Requested Date: {{child.requestedDate | date}}</span>
|
||||
|
||||
<span *ngIf="child.available" class="label label-success">Available</span>
|
||||
<span *ngIf="child.denied" class="label label-danger">Denied</span>
|
||||
<span *ngIf="child.approved && !child.available && !child.denied" class="label label-info">Processing Request</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-1 col-md-push-9" *ngIf="admin">
|
||||
<!--// TODO ADMIN-->
|
||||
<form>
|
||||
<button style="text-align: right" *ngIf="child.canApprove" (click)="approve(child)" class="btn btn-sm btn-success-outline" type="submit"><i class="fa fa-plus"></i> Approve</button>
|
||||
</form>
|
||||
<form>
|
||||
<button type="button" *ngIf="!child.denied" (click)="deny(child)" class="btn btn-sm btn-danger-outline deny"><i class="fa fa-times"></i> Deny</button>
|
||||
</form>
|
||||
<form>
|
||||
<button type="button" (click)="removeChildRequest(child)" class="btn btn-sm btn-danger-outline deny"><i class="fa fa-times"></i> Remove</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<ngb-tabset>
|
||||
|
||||
<div *ngFor="let season of child.seasonRequests">
|
||||
<ngb-tab [id]="season.seasonNumber" [title]="season.seasonNumber">
|
||||
<ng-template ngbTabContent>
|
||||
<h2>Season: {{season.seasonNumber}}</h2>
|
||||
|
||||
<table class="table table-striped table-hover table-responsive table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<a>#</a>
|
||||
</th>
|
||||
<th>
|
||||
<a>Title</a>
|
||||
</th>
|
||||
<th>
|
||||
<a>Air Date</a>
|
||||
</th>
|
||||
<th>
|
||||
<a>Status</a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let ep of season.episodes">
|
||||
<td>
|
||||
{{ep.episodeNumber}}
|
||||
</td>
|
||||
<td>
|
||||
{{ep.title}}
|
||||
</td>
|
||||
<td>
|
||||
{{ep.airDate | date: 'dd/MM/yyyy' }}
|
||||
</td>
|
||||
<td>
|
||||
<span *ngIf="ep.available" class="label label-success">Available</span>
|
||||
<span *ngIf="ep.approved && !ep.available" class="label label-info">Processing Request</span>
|
||||
<div *ngIf="ep.requested && !ep.available; then requested else notRequested"></div>
|
||||
<ng-template #requested>
|
||||
<span *ngIf="!ep.available" class="label label-warning">Pending Approval</span>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #notRequested>
|
||||
<span *ngIf="!ep.available" class="label label-danger">Not Yet Requested</span>
|
||||
</ng-template>
|
||||
</td>
|
||||
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</ng-template>
|
||||
</ngb-tab>
|
||||
</div>
|
||||
</ngb-tabset>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<tvrequests-children [childRequests]="node.data" [isAdmin] ="isAdmin"></tvrequests-children>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-column>
|
||||
</p-treeTable>
|
||||
|
||||
|
||||
<!--<div *ngFor="let request of tvRequests">-->
|
||||
<!--<div class="row">
|
||||
<div class="col-sm-2">
|
||||
|
||||
<img class="img-responsive poster" src="{{node.data.posterPath}}" alt="poster">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5 ">
|
||||
<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>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span>Status: </span>
|
||||
<span class="label label-success">{{node.data.status}}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>Request status: </span>
|
||||
<span *ngIf="node.data.available" class="label label-success">Available</span>
|
||||
<span *ngIf="node.data.approved && !node.data.available" class="label label-info">Processing Request</span>
|
||||
<span *ngIf="node.data.denied" class="label label-danger">Request Denied</span>
|
||||
<span *ngIf="node.data.deniedReason" title="{{node.data.deniedReason}}"><i class="fa fa-info-circle"></i></span>
|
||||
<span *ngIf="!node.data.approved && !node.data.availble && !node.data.denied" class="label label-warning">Pending Approval</span>
|
||||
|
||||
</div>
|
||||
<div>Release Date: {{node.data.releaseDate | date}}</div>
|
||||
<br />
|
||||
<div>Requested Date: {{node.data.requestedDate | date}}</div>
|
||||
</div>
|
||||
<div class="col-sm-3 col-sm-push-3">
|
||||
|
||||
<button [routerLink]="[node.data.id]" style="text-align: right" class="btn btn-sm btn-success-outline" type="submit"><i class="fa fa-plus"></i> View</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr />-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import 'rxjs/add/operator/distinctUntilChanged';
|
|||
import 'rxjs/add/operator/map';
|
||||
|
||||
import { RequestService } from '../services/request.service';
|
||||
import { AuthService } from '../auth/auth.service';
|
||||
import { IdentityService } from '../services/identity.service';
|
||||
|
||||
import { ITvRequests, IChildRequests, INewSeasonRequests, IEpisodesRequests } from '../interfaces/IRequestModel';
|
||||
|
|
@ -26,8 +25,7 @@ import { TreeNode, } from "primeng/primeng";
|
|||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class TvRequestsComponent implements OnInit, OnDestroy {
|
||||
constructor(private requestService: RequestService,
|
||||
private identityService: IdentityService, private authService : AuthService) {
|
||||
constructor(private requestService: RequestService, private identityService: IdentityService) {
|
||||
this.searchChanged
|
||||
.debounceTime(600) // Wait Xms afterthe last event before emitting last event
|
||||
.distinctUntilChanged() // only emit if value is different from previous value
|
||||
|
|
@ -43,17 +41,6 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
|
|||
.subscribe(m => this.tvRequests = this.transformData(m));
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.amountToLoad = 5;
|
||||
this.currentlyLoaded = 5;
|
||||
this.tvRequests = [];
|
||||
this.loadInit();
|
||||
this.admin = this.authService.hasRole("admin");
|
||||
}
|
||||
|
||||
public admin = false;
|
||||
|
||||
openClosestTab(el:any): void {
|
||||
var rowclass = "undefined";
|
||||
el = el.toElement;
|
||||
|
|
@ -81,27 +68,22 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
};
|
||||
}
|
||||
transformData(datain: ITvRequests[]): any {
|
||||
transformData(data: ITvRequests[]): TreeNode[] {
|
||||
var temp: TreeNode[] = [];
|
||||
datain.forEach(function(value) {
|
||||
temp.push({
|
||||
"data": value,
|
||||
"children": [
|
||||
{
|
||||
"data": this.fixEpisodeSort(value.childRequests),
|
||||
leaf: true
|
||||
}
|
||||
],
|
||||
leaf: false
|
||||
});
|
||||
},
|
||||
this);
|
||||
console.log(temp);
|
||||
return temp;
|
||||
data.forEach(function (value) {
|
||||
temp.push({
|
||||
"data": value,
|
||||
"children": [{
|
||||
"data": this.fixEpisodeSort(value.childRequests), leaf: true
|
||||
}],
|
||||
leaf: false
|
||||
});
|
||||
}, this)
|
||||
return <TreeNode[]>temp;
|
||||
}
|
||||
private subscriptions = new Subject<void>();
|
||||
|
||||
tvRequests: ITvRequests[];
|
||||
tvRequests: TreeNode[];
|
||||
|
||||
searchChanged = new Subject<string>();
|
||||
searchText: string;
|
||||
|
|
@ -114,22 +96,33 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
|
|||
public showChildDialogue = false; // This is for the child modal popup
|
||||
public selectedSeason: ITvRequests;
|
||||
|
||||
private fixEpisodeSort(items: IChildRequests[]) : IChildRequests[] {
|
||||
items.forEach(value => {
|
||||
value.seasonRequests.forEach((requests: INewSeasonRequests) => {
|
||||
requests.episodes.sort(
|
||||
(a: IEpisodesRequests, b: IEpisodesRequests) => a.episodeNumber - b.episodeNumber)
|
||||
});
|
||||
});
|
||||
fixEpisodeSort(items: IChildRequests[]) {
|
||||
items.forEach(function (value) {
|
||||
value.seasonRequests.forEach(function (requests: INewSeasonRequests) {
|
||||
requests.episodes.sort(function (a: IEpisodesRequests, b: IEpisodesRequests) {
|
||||
return a.episodeNumber - b.episodeNumber;
|
||||
})
|
||||
})
|
||||
})
|
||||
return items;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.amountToLoad = 1000;
|
||||
this.currentlyLoaded = 5;
|
||||
this.tvRequests = [];
|
||||
this.loadInit();
|
||||
}
|
||||
|
||||
public loadMore() {
|
||||
this.requestService.getTvRequests(this.amountToLoad, this.currentlyLoaded + 1)
|
||||
//TODO: I believe this +1 is causing off by one error skipping loading of tv shows
|
||||
//When removed and scrolling very slowly everything works as expected, however
|
||||
//if you scroll really quickly then you start getting duplicates of movies
|
||||
//since it's async and some subsequent results return first and then incrementer
|
||||
//is increased so you see movies which had already been gotten show up...
|
||||
this.requestService.getTvRequests(this.amountToLoad, this.currentlyLoaded +1)
|
||||
.takeUntil(this.subscriptions)
|
||||
.subscribe(x => {
|
||||
this.tvRequests.push.apply(this.tvRequests, x);
|
||||
this.tvRequests.push.apply(this.tvRequests, this.transformData(x));
|
||||
this.currentlyLoaded = this.currentlyLoaded + this.amountToLoad;
|
||||
});
|
||||
}
|
||||
|
|
@ -142,11 +135,6 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
|
|||
this.requestService.removeTvRequest(request);
|
||||
this.removeRequestFromUi(request);
|
||||
}
|
||||
public removeChildRequest(request: IChildRequests) {
|
||||
this.requestService.deleteChild(request)
|
||||
.subscribe();
|
||||
this.removeChildRequestFromUi(request);
|
||||
}
|
||||
|
||||
public changeAvailability(request: IChildRequests, available: boolean) {
|
||||
request.available = available;
|
||||
|
|
@ -154,15 +142,25 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
|
|||
//this.updateRequest(request);
|
||||
}
|
||||
|
||||
//Was already here but not sure what's using it...'
|
||||
//public approve(request: IChildRequests) {
|
||||
// request.approved = true;
|
||||
// request.denied = false;
|
||||
// //this.updateRequest(request);
|
||||
//}
|
||||
public approve(request: IChildRequests) {
|
||||
request.approved = true;
|
||||
request.denied = false;
|
||||
this.requestService.updateChild(request)
|
||||
.subscribe();
|
||||
}
|
||||
|
||||
//Was already here but not sure what's using it...'
|
||||
//public deny(request: IChildRequests) {
|
||||
// request.approved = false;
|
||||
// request.denied = true;
|
||||
// //this.updateRequest(request);
|
||||
//}
|
||||
public deny(request: IChildRequests) {
|
||||
debugger;
|
||||
request.approved = false;
|
||||
request.denied = true;
|
||||
this.requestService.updateChild(request)
|
||||
|
|
@ -182,12 +180,6 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
|
|||
this.requestService.updateTvRequest(this.selectedSeason)
|
||||
.subscribe();
|
||||
}
|
||||
public denyChildSeasonRequest(request: IChildRequests) {
|
||||
request.approved = false;
|
||||
request.denied = true;
|
||||
this.requestService.updateChild(request)
|
||||
.subscribe();
|
||||
}
|
||||
|
||||
public showChildren(request: ITvRequests) {
|
||||
this.selectedSeason = request;
|
||||
|
|
@ -214,7 +206,6 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
|
|||
this.requestService.getTvRequests(this.amountToLoad, 0)
|
||||
.takeUntil(this.subscriptions)
|
||||
.subscribe(x => {
|
||||
debugger;
|
||||
this.tvRequests = this.transformData(x);
|
||||
});
|
||||
this.isAdmin = this.identityService.hasRole("Admin");
|
||||
|
|
@ -231,16 +222,6 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
|
|||
this.tvRequests.splice(index, 1);
|
||||
}
|
||||
}
|
||||
private removeChildRequestFromUi(key: IChildRequests) {
|
||||
this.tvRequests.forEach((val) => {
|
||||
var data = (<any>val).data;
|
||||
var index = data.childRequests.indexOf(key, 0);
|
||||
if (index > -1) {
|
||||
data.childRequests.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.subscriptions.next();
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ import { MovieSearchComponent } from './moviesearch.component';
|
|||
import { TvSearchComponent } from './tvsearch.component';
|
||||
import { SeriesInformationComponent } from './seriesinformation.component';
|
||||
|
||||
import { TreeTableModule } from 'primeng/primeng';
|
||||
|
||||
import { SearchService } from '../services/search.service';
|
||||
import { RequestService } from '../services/request.service';
|
||||
|
||||
|
|
@ -26,12 +28,13 @@ const routes: Routes = [
|
|||
FormsModule,
|
||||
RouterModule.forChild(routes),
|
||||
NgbModule.forRoot(),
|
||||
TreeTableModule
|
||||
],
|
||||
declarations: [
|
||||
SearchComponent,
|
||||
MovieSearchComponent,
|
||||
TvSearchComponent,
|
||||
SeriesInformationComponent
|
||||
SeriesInformationComponent,
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
|
|
|
|||
|
|
@ -8,14 +8,8 @@
|
|||
}
|
||||
</style>
|
||||
<div *ngIf="series">
|
||||
<!--<div class="row">
|
||||
<div class="col-md-6 col-md-push-2">
|
||||
|
||||
<div id="bannerimage" style="background-image: url('https://thetvdb.com/banners/graphical/121361-g19.jpg');">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>-->
|
||||
<button class="btn btn-sm btn-success pull-right" (click)="submitRequests()" title="Go to top">Submit Request</button>
|
||||
|
||||
<ngb-tabset>
|
||||
|
||||
<div *ngFor="let season of series.seasonRequests">
|
||||
|
|
@ -83,9 +77,5 @@
|
|||
</ngb-tab>
|
||||
</div>
|
||||
</ngb-tabset>
|
||||
|
||||
|
||||
|
||||
|
||||
<button id="requestFloatingBtn" class="btn btn-sm btn-success" (click)="submitRequests()" title="Go to top">Submit Request</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Component, OnInit, OnDestroy, Input} from '@angular/core';
|
||||
//import { ActivatedRoute } from '@angular/router';
|
||||
import { Subject } from 'rxjs/Subject';
|
||||
|
||||
import "rxjs/add/operator/takeUntil";
|
||||
|
|
@ -13,24 +13,19 @@ import { IRequestEngineResult } from '../interfaces/IRequestEngineResult';
|
|||
import { IEpisodesRequests } from "../interfaces/IRequestModel";
|
||||
|
||||
@Component({
|
||||
selector: 'seriesinformation',
|
||||
templateUrl: './seriesinformation.component.html',
|
||||
styleUrls: ['./seriesinformation.component.scss']
|
||||
})
|
||||
export class SeriesInformationComponent implements OnInit, OnDestroy {
|
||||
|
||||
constructor(private searchService: SearchService, private route: ActivatedRoute,
|
||||
private requestService: RequestService, private notificationService: NotificationService) {
|
||||
this.route.params
|
||||
.takeUntil(this.subscriptions)
|
||||
.subscribe(params => {
|
||||
this.seriesId = +params['id']; // (+) converts string 'id' to a number
|
||||
});
|
||||
constructor(private searchService: SearchService, private requestService: RequestService, private notificationService: NotificationService) {
|
||||
}
|
||||
|
||||
private subscriptions = new Subject<void>();
|
||||
|
||||
public result : IRequestEngineResult;
|
||||
private seriesId: number;
|
||||
@Input() private seriesId: number;
|
||||
public series: ISearchTvResult;
|
||||
|
||||
requestedEpisodes: IEpisodesRequests[] = [];
|
||||
|
|
|
|||
|
|
@ -32,123 +32,133 @@
|
|||
<div *ngIf="searchApplied && tvResults?.length <= 0" class='no-search-results'>
|
||||
<i class='fa fa-film no-search-results-icon'></i><div class='no-search-results-text'>Sorry, we didn't find any results!</div>
|
||||
</div>
|
||||
<p-treeTable [value]="tvResults">
|
||||
<p-column>
|
||||
<ng-template let-col let-node="rowData" pTemplate="header">
|
||||
Results
|
||||
</ng-template>
|
||||
<ng-template let-col let-node="rowData" pTemplate="body">
|
||||
<!--This is the section that holds the parent level search results set-->
|
||||
<div *ngIf="!node.leaf">
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
|
||||
<div *ngFor="let result of tvResults">
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
<img *ngIf="node.data.banner" class="img-responsive poster" width="150" [src]="node.data.banner" alt="poster">
|
||||
|
||||
<img *ngIf="result.banner" class="img-responsive poster" width="150" [src]="result.banner" alt="poster">
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div>
|
||||
<a href="http://www.imdb.com/title/{{node.data.imdbId}}/" target="_blank">
|
||||
<h4>{{node.data.title}} ({{node.data.firstAired | date: 'yyyy'}})</h4>
|
||||
|
||||
<a href="http://www.imdb.com/title/{{result.imdbId}}/" target="_blank">
|
||||
<h4>{{result.title}} ({{result.firstAired | date: 'yyyy'}})</h4>
|
||||
|
||||
</a>
|
||||
|
||||
<span *ngIf="result.status" class="label label-primary" target="_blank">{{result.status}}</span>
|
||||
</a>
|
||||
<span *ngIf="node.data.status" class="label label-primary" target="_blank">{{node.data.status}}</span>
|
||||
|
||||
|
||||
<span *ngIf="result.firstAired" class="label label-info" target="_blank">Air Date: {{result.firstAired}}</span>
|
||||
<span *ngIf="node.data.firstAired" class="label label-info" target="_blank">Air Date: {{node.data.firstAired}}</span>
|
||||
|
||||
|
||||
<span *ngIf="result.releaseDate" class="label label-info" target="_blank">Release Date: {{result.releaseDate | date: 'dd/MM/yyyy'}}</span>
|
||||
<span *ngIf="node.data.releaseDate" class="label label-info" target="_blank">Release Date: {{node.data.releaseDate | date: 'dd/MM/yyyy'}}</span>
|
||||
|
||||
<span *ngIf="result.available" class="label label-success">Available</span>
|
||||
<span *ngIf="result.approved && !result.available" class="label label-info">Processing Request</span>
|
||||
<div *ngIf="result.requested && !result.available; then requested else notRequested"></div>
|
||||
<ng-template #requested>
|
||||
<span *ngIf="!result.available" class="label label-warning">Pending Approval</span>
|
||||
</ng-template>
|
||||
<span *ngIf="node.data.available" class="label label-success">Available</span>
|
||||
<span *ngIf="node.data.approved && !node.data.available" class="label label-info">Processing Request</span>
|
||||
<div *ngIf="node.data.requested && !node.data.available; then requested else notRequested"></div>
|
||||
<ng-template #requested>
|
||||
<span *ngIf="!node.data.available" class="label label-warning">Pending Approval</span>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #notRequested>
|
||||
<span *ngIf="!result.available" class="label label-danger">Not Yet Requested</span>
|
||||
</ng-template>
|
||||
<ng-template #notRequested>
|
||||
<span *ngIf="!node.data.available" class="label label-danger">Not Yet Requested</span>
|
||||
</ng-template>
|
||||
|
||||
|
||||
<span id="{{id}}netflixTab"></span>
|
||||
<span id="{{id}}netflixTab"></span>
|
||||
|
||||
<a *ngIf="result.homepage" href="{{result.homepage}}" target="_blank"><span class="label label-info">HomePage</span></a>
|
||||
<a *ngIf="node.data.homepage" href="{{node.data.homepage}}" target="_blank"><span class="label label-info">HomePage</span></a>
|
||||
|
||||
<a *ngIf="result.trailer" href="{{result.trailer}}" target="_blank"><span class="label label-info">Trailer</span></a>
|
||||
<a *ngIf="node.data.trailer" href="{{node.data.trailer}}" target="_blank"><span class="label label-info">Trailer</span></a>
|
||||
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
<p style="font-size: 0.9rem !important">{{node.data.overview}}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-sm-2">
|
||||
<input name="{{type}}Id" type="text" value="{{node.data.id}}" hidden="hidden" />
|
||||
|
||||
|
||||
<!--<div *ngIf="node.data.requested; then requestedBtn else notRequestedBtn"></div>
|
||||
<template #requestedBtn>
|
||||
<button style="text-align: right" class="btn btn-primary-outline disabled" [disabled]><i class="fa fa-check"></i> Requested</button>
|
||||
</template>
|
||||
<template #notRequestedBtn>
|
||||
<button id="{{node.data.id}}" style="text-align: right" class="btn btn-primary-outline" (click)="request(result)"><i class="fa fa-plus"></i> Request</button>
|
||||
</template>-->
|
||||
<!--{{#if_eq type "tv"}}
|
||||
{{#if_eq tvFullyAvailable true}}
|
||||
@*//TODO Not used yet*@
|
||||
<button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fa fa-check"></i> @UI.Search_Available</button><br/>
|
||||
{{else}}
|
||||
{{#if_eq enableTvRequestsForOnlySeries true}}
|
||||
<button id="{{id}}" style="text-align: right" class="btn {{#if available}}btn-success-outline{{else}}btn-primary-outline dropdownTv{{/if}} btn-primary-outline" season-select="0" type="button" {{#if available}} disabled{{/if}}><i class="fa fa-plus"></i> {{#if available}}@UI.Search_Available{{else}}@UI.Search_Request{{/if}}</button>
|
||||
{{else}}
|
||||
-->
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<i class="fa fa-plus"></i> Request
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
||||
<li><a (click)="allSeasons(node.data)">All Seasons</a></li>
|
||||
<li><a (click)="firstSeason(node.data)">First Season</a></li>
|
||||
<li><a (click)="latestSeason(node.data)">Latest Season</a></li>
|
||||
<li><a (click)="openClosestTab($event)">Select ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<br/>
|
||||
<a style="text-align: right" class="btn btn-sm btn-primary-outline" href="{{url}}" target="_blank"><i class="fa fa-eye"></i> @UI.Search_ViewInPlex</a>
|
||||
|
||||
-->
|
||||
|
||||
|
||||
<br />
|
||||
<div *ngIf="node.data.available">
|
||||
<a *ngIf="node.data.plexUrl" style="text-align: right" class="btn btn-sm btn-success-outline" href="{{node.data.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> View On Plex</a>
|
||||
|
||||
<!--<input name="providerId" type="text" value="{{id}}" hidden="hidden"/>
|
||||
<input name="type" type="text" value="{{type}}" hidden="hidden"/>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-sm btn-danger-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<i class="fa fa-exclamation"></i> Report Issue
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
||||
<li><a issue-select="0" class="dropdownIssue" href="#">WrongAudio</a></li>
|
||||
<li><a issue-select="1" class="dropdownIssue" href="#">NoSubs</a></li>
|
||||
<li><a issue-select="2" class="dropdownIssue" href="#">WrongContent</a></li>
|
||||
<li><a issue-select="3" class="dropdownIssue" href="#">Playback</a></li>
|
||||
<li><a issue-select="4" class="dropdownIssue" href="#" data-toggle="modal" data-target="#issuesModal">Other</a></li>
|
||||
</ul>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
<p style="font-size: 0.9rem !important">{{result.overview}}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-sm-2">
|
||||
<input name="{{type}}Id" type="text" value="{{result.id}}" hidden="hidden"/>
|
||||
|
||||
|
||||
<!--<div *ngIf="result.requested; then requestedBtn else notRequestedBtn"></div>
|
||||
<template #requestedBtn>
|
||||
<button style="text-align: right" class="btn btn-primary-outline disabled" [disabled]><i class="fa fa-check"></i> Requested</button>
|
||||
</template>
|
||||
<template #notRequestedBtn>
|
||||
<button id="{{result.id}}" style="text-align: right" class="btn btn-primary-outline" (click)="request(result)"><i class="fa fa-plus"></i> Request</button>
|
||||
</template>-->
|
||||
|
||||
<!--{{#if_eq type "tv"}}
|
||||
{{#if_eq tvFullyAvailable true}}
|
||||
@*//TODO Not used yet*@
|
||||
<button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fa fa-check"></i> @UI.Search_Available</button><br/>
|
||||
{{else}}
|
||||
{{#if_eq enableTvRequestsForOnlySeries true}}
|
||||
<button id="{{id}}" style="text-align: right" class="btn {{#if available}}btn-success-outline{{else}}btn-primary-outline dropdownTv{{/if}} btn-primary-outline" season-select="0" type="button" {{#if available}} disabled{{/if}}><i class="fa fa-plus"></i> {{#if available}}@UI.Search_Available{{else}}@UI.Search_Request{{/if}}</button>
|
||||
{{else}}
|
||||
-->
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<i class="fa fa-plus"></i> Request
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
||||
<li><a (click)="allSeasons(result)">All Seasons</a></li>
|
||||
<li><a (click)="firstSeason(result)">First Season</a></li>
|
||||
<li><a (click)="latestSeason(result)">Latest Season</a></li>
|
||||
<li><a (click)="selectSeason(result)">Select ...</a></li>
|
||||
</ul>
|
||||
<!--This is the section that holds the child seasons if they want to specify specific episodes-->
|
||||
<div *ngIf="node.leaf">
|
||||
<seriesinformation [seriesId]="node.data.id"></seriesinformation>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<br/>
|
||||
<a style="text-align: right" class="btn btn-sm btn-primary-outline" href="{{url}}" target="_blank"><i class="fa fa-eye"></i> @UI.Search_ViewInPlex</a>
|
||||
|
||||
-->
|
||||
|
||||
|
||||
<br/>
|
||||
<div *ngIf="result.available">
|
||||
<a *ngIf="result.plexUrl" style="text-align: right" class="btn btn-sm btn-success-outline" href="{{result.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> View On Plex</a>
|
||||
|
||||
<!--<input name="providerId" type="text" value="{{id}}" hidden="hidden"/>
|
||||
<input name="type" type="text" value="{{type}}" hidden="hidden"/>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-sm btn-danger-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<i class="fa fa-exclamation"></i> Report Issue
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
||||
<li><a issue-select="0" class="dropdownIssue" href="#">WrongAudio</a></li>
|
||||
<li><a issue-select="1" class="dropdownIssue" href="#">NoSubs</a></li>
|
||||
<li><a issue-select="2" class="dropdownIssue" href="#">WrongContent</a></li>
|
||||
<li><a issue-select="3" class="dropdownIssue" href="#">Playback</a></li>
|
||||
<li><a issue-select="4" class="dropdownIssue" href="#" data-toggle="modal" data-target="#issuesModal">Other</a></li>
|
||||
</ul>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
</p-column>
|
||||
</p-treeTable>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
|
||||
import {Router} from '@angular/router';
|
||||
import { Subject } from 'rxjs/Subject';
|
||||
import 'rxjs/add/operator/debounceTime';
|
||||
|
|
@ -12,10 +12,16 @@ import { NotificationService } from '../services/notification.service';
|
|||
|
||||
import { ISearchTvResult } from '../interfaces/ISearchTvResult';
|
||||
import { IRequestEngineResult } from '../interfaces/IRequestEngineResult';
|
||||
import { TreeNode } from "primeng/primeng";
|
||||
|
||||
@Component({
|
||||
selector: 'tv-search',
|
||||
templateUrl: './tvsearch.component.html',
|
||||
styleUrls: ['./../requests/tvrequests.component.scss'],
|
||||
//Was required to turn off encapsulation since CSS only should be overridden for this component
|
||||
//However when encapsulation is on angular injects prefixes to all classes so css selectors
|
||||
//Stop working
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class TvSearchComponent implements OnInit, OnDestroy {
|
||||
|
||||
|
|
@ -41,11 +47,50 @@ export class TvSearchComponent implements OnInit, OnDestroy {
|
|||
this.searchService.searchTv(this.searchText)
|
||||
.takeUntil(this.subscriptions)
|
||||
.subscribe(x => {
|
||||
this.tvResults = x;
|
||||
this.tvResults = this.transformData(x);
|
||||
this.searchApplied = true;
|
||||
});
|
||||
});
|
||||
}
|
||||
openClosestTab(el: any): void {
|
||||
var rowclass = "undefined";
|
||||
el = el.toElement;
|
||||
while (el.className != rowclass) {
|
||||
// Increment the loop to the parent node until we find the row we need
|
||||
el = el.parentNode;
|
||||
if (!el) {
|
||||
}
|
||||
}
|
||||
// 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
|
||||
var caretright = "ui-treetable-toggler fa fa-fw ui-c fa-caret-right";
|
||||
var caretdown = "ui-treetable-toggler fa fa-fw ui-c fa-caret-down";
|
||||
for (var 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 === caretright || value.className === 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;
|
||||
}
|
||||
};
|
||||
}
|
||||
transformData(datain: ISearchTvResult[]): any {
|
||||
var temp: TreeNode[] = [];
|
||||
datain.forEach(function (value) {
|
||||
temp.push({
|
||||
"data": value,
|
||||
"children": [{
|
||||
"data": value, leaf: true
|
||||
}],
|
||||
leaf: false
|
||||
});
|
||||
}, this)
|
||||
return <TreeNode[]>temp;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.searchText = "";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue