From ec197fed94f3ee4e78f1bdff7ff0ba0c42ccdf3c Mon Sep 17 00:00:00 2001 From: Dhruv Bhavsar Date: Tue, 15 Aug 2017 21:53:28 -0400 Subject: [PATCH 1/3] Initial TV Requests UI rebuild --- .../ClientApp/app/requests/requests.module.ts | 4 +- .../requests/tvrequest-manage.component.html | 83 ++++++- .../requests/tvrequest-manage.component.ts | 23 +- .../app/requests/tvrequests.component.html | 209 +++++++++++++++--- .../app/requests/tvrequests.component.ts | 84 ++++++- 5 files changed, 352 insertions(+), 51 deletions(-) diff --git a/src/Ombi/ClientApp/app/requests/requests.module.ts b/src/Ombi/ClientApp/app/requests/requests.module.ts index 776da325e..eaedf9618 100644 --- a/src/Ombi/ClientApp/app/requests/requests.module.ts +++ b/src/Ombi/ClientApp/app/requests/requests.module.ts @@ -15,6 +15,7 @@ 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 { TreeTableModule } from 'primeng/primeng'; import { IdentityService } from '../services/identity.service'; import { RequestService } from '../services/request.service'; @@ -35,6 +36,7 @@ const routes: Routes = [ InfiniteScrollModule, ButtonModule, DialogModule, + TreeTableModule ], declarations: [ RequestComponent, @@ -49,6 +51,6 @@ const routes: Routes = [ IdentityService, RequestService ], - + }) export class RequestsModule { } \ No newline at end of file diff --git a/src/Ombi/ClientApp/app/requests/tvrequest-manage.component.html b/src/Ombi/ClientApp/app/requests/tvrequest-manage.component.html index 76ab3384d..649cdbebf 100644 --- a/src/Ombi/ClientApp/app/requests/tvrequest-manage.component.html +++ b/src/Ombi/ClientApp/app/requests/tvrequest-manage.component.html @@ -1,11 +1,17 @@ 
- +
Requested By: {{child.requestedUser.userName}} -
+ + + + + + +
-
+ +
+
@@ -28,8 +36,75 @@
+
+ + +
+ + +

Season: {{season.seasonNumber}}

+ + + + + + + + + + + + + + + + + + + + +
+ + # + + + + Title + + + + Air Date + + + + Status + +
+ {{ep.episodeNumber}} + + {{ep.title}} + + {{ep.airDate | date: 'dd/MM/yyyy' }} + + Available + Processing Request +
+ + Pending Approval + + + + Not Yet Requested + +
+ + +
+ +


+
\ No newline at end of file diff --git a/src/Ombi/ClientApp/app/requests/tvrequest-manage.component.ts b/src/Ombi/ClientApp/app/requests/tvrequest-manage.component.ts index 99de17d90..d55e614e5 100644 --- a/src/Ombi/ClientApp/app/requests/tvrequest-manage.component.ts +++ b/src/Ombi/ClientApp/app/requests/tvrequest-manage.component.ts @@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router'; import { RequestService } from '../services/request.service'; import { IdentityService } from '../services/identity.service'; -import { IChildRequests, IEpisodesRequests } from '../interfaces/IRequestModel'; +import { IChildRequests, IEpisodesRequests, INewSeasonRequests } from '../interfaces/IRequestModel'; @Component({ templateUrl: './tvrequest-manage.component.html' @@ -17,7 +17,7 @@ export class TvRequestManageComponent { .subscribe(params => { this.tvId = +params['id']; // (+) converts string 'id' to a number this.requestService.getChildRequests(this.tvId).subscribe(x => { - this.childRequests = x; + this.childRequests = this.fixEpisodeSort(x); }); }); @@ -27,7 +27,16 @@ export class TvRequestManageComponent { 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; + } public removeRequest(request: IChildRequests) { this.requestService.deleteChild(request) .subscribe(); @@ -49,7 +58,7 @@ export class TvRequestManageComponent { request.approved = true; request.denied = false; this.requestService.updateChild(request) - .subscribe(); + .subscribe(); } public denySeasonRequest(request: IChildRequests) { @@ -60,12 +69,10 @@ export class TvRequestManageComponent { } public getColour(ep: IEpisodesRequests): string { - if (ep.available) - { + if (ep.available) { return "lime"; } - if (ep.approved) - { + if (ep.approved) { return "#00c0ff"; } return "white"; diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.html b/src/Ombi/ClientApp/app/requests/tvrequests.component.html index 4f874559d..892c5bd94 100644 --- a/src/Ombi/ClientApp/app/requests/tvrequests.component.html +++ b/src/Ombi/ClientApp/app/requests/tvrequests.component.html @@ -9,48 +9,201 @@ [infiniteScrollDistance]="1" [infiniteScrollThrottle]="100" (scrolled)="loadMore()"> + + + -
+ + + Results + + + +
+
+
+ poster -
-
+
- poster +
+ +
+
+ Status: + {{node.data.status}} +
-
+
+ Request status: + Available + Processing Request + Request Denied + + Pending Approval -
- -
-
- Status: - {{request.status}} +
+
Release Date: {{node.data.releaseDate | date}}
+
+
Requested Date: {{node.data.requestedDate | date}}
+
+
+ + +
+
+ +
+
+
+
+
+ +
+ Requested By: {{child.requestedUser.userName}} +
+ + +
+ +
+ +
+
+ +
+
+ +
+
+
+
+ + +
+ + +

Season: {{season.seasonNumber}}

+ + + + + + + + + + + + + + + + + -
- Request status: - Available - Processing Request - Request Denied - - Pending Approval +
+ +
+ + # + + + + Title + + + + Air Date + + + + Status + +
+ {{ep.episodeNumber}} + + {{ep.title}} + + {{ep.airDate | date: 'dd/MM/yyyy' }} + + Available + Processing Request +
+ + Pending Approval + + + + Not Yet Requested + +
+ + +
+ +
+
+
+
+
+
-
Release Date: {{request.releaseDate | date}}
-
-
Requested Date: {{request.requestedDate | date}}
+ + + + + + + +
diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.ts b/src/Ombi/ClientApp/app/requests/tvrequests.component.ts index bc48fc6bc..3c21ed4cc 100644 --- a/src/Ombi/ClientApp/app/requests/tvrequests.component.ts +++ b/src/Ombi/ClientApp/app/requests/tvrequests.component.ts @@ -12,7 +12,8 @@ import 'rxjs/add/operator/map'; import { RequestService } from '../services/request.service'; import { IdentityService } from '../services/identity.service'; -import { ITvRequests, IChildRequests } from '../interfaces/IRequestModel'; +import { ITvRequests, IChildRequests, INewSeasonRequests, IEpisodesRequests } from '../interfaces/IRequestModel'; +import { /*TreeTableModule,*/ TreeNode, /*SharedModule*/ } from "primeng/primeng"; @Component({ selector: 'tv-requests', @@ -32,11 +33,24 @@ export class TvRequestsComponent implements OnInit, OnDestroy { } this.requestService.searchTvRequests(this.searchText) .takeUntil(this.subscriptions) - .subscribe(m => this.tvRequests = m); + .subscribe(m => this.tvRequests = this.transformData(m)); }); } - + transformData(datain: ITvRequests[]): any { + 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; + } private subscriptions = new Subject(); tvRequests: ITvRequests[]; @@ -52,15 +66,23 @@ export class TvRequestsComponent implements OnInit, OnDestroy { public showChildDialogue = false; // This is for the child modal popup public selectedSeason: ITvRequests; - + 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 = 5; this.currentlyLoaded = 5; + this.tvRequests = []; this.loadInit(); } - - public loadMore() { this.requestService.getTvRequests(this.amountToLoad, this.currentlyLoaded + 1) .takeUntil(this.subscriptions) @@ -78,6 +100,11 @@ 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; @@ -85,16 +112,29 @@ 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.updateRequest(request); + 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) { request.approved = false; request.denied = true; - //this.updateRequest(request); + this.requestService.updateChild(request) + .subscribe(); } public approveSeasonRequest(request: IChildRequests) { @@ -110,12 +150,28 @@ 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; this.showChildDialogue = true; } + public getColour(ep: IEpisodesRequests): string { + if (ep.available) { + return "lime"; + } + if (ep.approved) { + return "#00c0ff"; + } + return "white"; + } + //private updateRequest(request: ITvRequests) { // this.requestService.updateTvRequest(request) // .takeUntil(this.subscriptions) @@ -126,7 +182,7 @@ export class TvRequestsComponent implements OnInit, OnDestroy { this.requestService.getTvRequests(this.amountToLoad, 0) .takeUntil(this.subscriptions) .subscribe(x => { - this.tvRequests = x; + this.tvRequests = this.transformData(x); }); this.isAdmin = this.identityService.hasRole("Admin"); } @@ -142,6 +198,14 @@ export class TvRequestsComponent implements OnInit, OnDestroy { this.tvRequests.splice(index, 1); } } + private removeChildRequestFromUi(key: IChildRequests) { + //var index = this.childRequests.indexOf(key, 0); + //if (index > -1) { + // this.childRequests.splice(index, 1); + //} + //TODO FIX THIS + } + ngOnDestroy(): void { this.subscriptions.next(); From 9196158a76c636a843ba4230fdcfc174f49595f4 Mon Sep 17 00:00:00 2001 From: Dhruv Bhavsar Date: Fri, 18 Aug 2017 23:14:43 -0400 Subject: [PATCH 2/3] Working UI for Requests. Approval/Deny does not work as it doesn't in your code either. --- global.json | 5 +++ .../app/requests/tvrequests.component.html | 4 +- .../app/requests/tvrequests.component.scss | 14 +++++++ .../app/requests/tvrequests.component.ts | 39 +++++++++++++++++-- 4 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 global.json create mode 100644 src/Ombi/ClientApp/app/requests/tvrequests.component.scss diff --git a/global.json b/global.json new file mode 100644 index 000000000..567b2be99 --- /dev/null +++ b/global.json @@ -0,0 +1,5 @@ +{ + "sdk": { + "version": "1.0.0-preview2-003121" + } +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.html b/src/Ombi/ClientApp/app/requests/tvrequests.component.html index 892c5bd94..a0d9be84e 100644 --- a/src/Ombi/ClientApp/app/requests/tvrequests.component.html +++ b/src/Ombi/ClientApp/app/requests/tvrequests.component.html @@ -10,7 +10,6 @@ [infiniteScrollThrottle]="100" (scrolled)="loadMore()"> -
diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.scss b/src/Ombi/ClientApp/app/requests/tvrequests.component.scss new file mode 100644 index 000000000..5fd85eddd --- /dev/null +++ b/src/Ombi/ClientApp/app/requests/tvrequests.component.scss @@ -0,0 +1,14 @@ +table.ui-widget-content { + border: 1px solid #1f1f1f !important; + background: #1f1f1f !important; +} +.ui-widget-content { + color: #ffffff; +} +.ui-state-default.ui-unselectable-text{ + display:none; +} +.ui-treetable-toggler.fa.fa-fw.ui-c.fa-caret-right, +.ui-treetable-toggler.fa.fa-fw.ui-c.fa-caret-down { + display: none; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.ts b/src/Ombi/ClientApp/app/requests/tvrequests.component.ts index 3c21ed4cc..70b922eba 100644 --- a/src/Ombi/ClientApp/app/requests/tvrequests.component.ts +++ b/src/Ombi/ClientApp/app/requests/tvrequests.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs/Subject'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged'; @@ -13,11 +13,16 @@ import { RequestService } from '../services/request.service'; import { IdentityService } from '../services/identity.service'; import { ITvRequests, IChildRequests, INewSeasonRequests, IEpisodesRequests } from '../interfaces/IRequestModel'; -import { /*TreeTableModule,*/ TreeNode, /*SharedModule*/ } from "primeng/primeng"; +import { TreeNode, } from "primeng/primeng"; @Component({ selector: 'tv-requests', - templateUrl: './tvrequests.component.html' + templateUrl: './tvrequests.component.html', + styleUrls: ['./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 TvRequestsComponent implements OnInit, OnDestroy { constructor(private requestService: RequestService, private identityService: IdentityService) { @@ -36,7 +41,33 @@ export class TvRequestsComponent implements OnInit, OnDestroy { .subscribe(m => this.tvRequests = this.transformData(m)); }); } - + 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: ITvRequests[]): any { var temp: TreeNode[] = []; datain.forEach(function (value) { From fc6e212fba5848c1af8242fde22f84352eeefd32 Mon Sep 17 00:00:00 2001 From: Dhruv Bhavsar Date: Sun, 20 Aug 2017 14:32:00 -0400 Subject: [PATCH 3/3] Fix global.json --- global.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/global.json b/global.json index 567b2be99..676999ef9 100644 --- a/global.json +++ b/global.json @@ -1,5 +1,5 @@ { "sdk": { - "version": "1.0.0-preview2-003121" + "version": "1.1.0" } } \ No newline at end of file