Merge pull request #1496 from dhruvb14/DotNetCore

Break out Request Children into their own component make Search UI similar to Requests UI
pull/1510/head
Jamie 7 years ago committed by GitHub
commit 8d6836beed

@ -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>
<div *ngFor="let result of tvResults">
<div class="row">
<div class="col-sm-2">
<img *ngIf="result.banner" class="img-responsive poster" width="150" [src]="result.banner" alt="poster">
</div>
<div class="col-sm-8">
<div>
<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>
<span *ngIf="result.firstAired" class="label label-info" target="_blank">Air Date: {{result.firstAired}}</span>
<span *ngIf="result.releaseDate" class="label label-info" target="_blank">Release Date: {{result.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>
<ng-template #notRequested>
<span *ngIf="!result.available" class="label label-danger">Not Yet Requested</span>
</ng-template>
<span id="{{id}}netflixTab"></span>
<a *ngIf="result.homepage" href="{{result.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>
<br/>
<br/>
<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">
<img *ngIf="node.data.banner" class="img-responsive poster" width="150" [src]="node.data.banner" alt="poster">
</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>
<span *ngIf="node.data.status" class="label label-primary" target="_blank">{{node.data.status}}</span>
<span *ngIf="node.data.firstAired" class="label label-info" target="_blank">Air Date: {{node.data.firstAired}}</span>
<span *ngIf="node.data.releaseDate" class="label label-info" target="_blank">Release Date: {{node.data.releaseDate | date: 'dd/MM/yyyy'}}</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>
<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="!node.data.available" class="label label-danger">Not Yet Requested</span>
</ng-template>
<span id="{{id}}netflixTab"></span>
<a *ngIf="node.data.homepage" href="{{node.data.homepage}}" target="_blank"><span class="label label-info">HomePage</span></a>
<a *ngIf="node.data.trailer" href="{{node.data.trailer}}" target="_blank"><span class="label label-info">Trailer</span></a>
<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…
Cancel
Save