open-source-mirrors
/
Ombi
mirror of https://github.com/Ombi-app/Ombi
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

upgraded the moviedb page #3831

Browse Source
pull/3849/head
Jamie Rees 4 years ago
parent 5941e962ec
commit 53e502bd1c
2 changed files with 54 additions and 144 deletions
Show Stats Download Patch File Download Diff File

127
src/Ombi/ClientApp/src/app/settings/themoviedb/themoviedb.component.html
Unescape View File

@ -1,94 +1,55 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<fieldset *ngIf="settings">
<legend>The Movie Database</legend>
<div class="md-form-field" style="margin-top:1em;">
<div class="form-group">
<div class="checkbox">
<mat-checkbox id="showAdultMovies" name="showAdultMovies" [(ngModel)]="settings.showAdultMovies" matTooltip="Include adult movies (pornography) in results">
Show Adult Movies</mat-checkbox>
Upgraded <fieldset *ngIf="settings">
<legend>The Movie Database</legend>
<div class="md-form-field" style="margin-top:1em;">
<div class="form-group">
<div class="checkbox">
<mat-slide-toggle id="showAdultMovies" name="showAdultMovies" [(ngModel)]="settings.showAdultMovies"
matTooltip="Include adult movies (pornography) in results">
Show Adult Movies</mat-slide-toggle>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label" matTooltip="Prevent movies with certain keywords from being suggested. May require a restart to take effect.">
Excluded Keyword IDs for Movie Suggestions
</label>
<form [formGroup]='tagForm'>
<!-- <mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip *ngFor="let fruit of excludedKeywords" [selectable]="false"
[removable]="true" (removed)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove >cancel</mat-icon>
</mat-chip>
<input placeholder="New Keyword"
#fruitInput
formControlName='input'
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true"
>
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredTags" [value]="fruit">
{{fruit.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field> -->
<div class="form-group">
<form [formGroup]='tagForm'>
<mat-form-field class="example-full-width">
<input type="text" placeholder="Excluded Keyword IDs for Movie Suggestions" matInput
formControlName="input" [matAutocomplete]="auto"
matTooltip="Prevent movies with certain keywords from being suggested. May require a restart to take effect.">
<mat-autocomplete (optionSelected)="optionSelected($event.option.value)" autoActiveFirstOption
#auto="matAutocomplete">
<mat-option *ngFor="let option of filteredTags" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<hr>
<mat-form-field class="example-full-width">
<input type="text"
placeholder="Pick one"
aria-label="Number"
matInput
formControlName="input"
[matAutocomplete]="auto">
<mat-autocomplete (optionSelected)="optionSelected($event.option.value)" autoActiveFirstOption #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredTags" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-chip-list #chipList>
<mat-chip *ngFor="let key of excludedKeywords" [selectable]="false" [removable]="true"
(removed)="remove(key)">
{{key.name}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</form>
<!-- <tag-input #input
[(ngModel)]="excludedKeywords"
[identifyBy]="'id'" [displayBy]="'name'"
[placeholder]="'Search by keyword'"
[secondaryPlaceholder]="'Search by keyword'"
[theme]="'dark'"
[onTextChangeDebounce]="500"
[onAdding]="onAddingKeyword"
(onSelect)="onKeywordSelect($event)">
<ng-template item-template let-item="item" let-index="index">
<span class="fa fa-cloud-download" *ngIf="item.initial"></span>
<span>{{item.id}}</span>
<span *ngIf="!item.initial">&nbsp;({{item.name}})</span>
<delete-icon aria-label="Remove tag" role="button"
(click)="input.removeItem(item, index)">
</delete-icon>
</ng-template>
<tag-input-dropdown [autocompleteObservable]="autocompleteKeyword"
[identifyBy]="'id'" [displayBy]="'name'"
[limitItemsTo]="6"
[minimumTextLength]="1"
[showDropdownIfEmpty]="false"
[keepOpen]="false">
</tag-input-dropdown>
</tag-input> -->
</div>
</form>
</div>
<div class="form-group">
<div>
<button mat-raised-button (click)="save()" type="submit" id="save" class="mat-focus-indicator mat-stroked-button accent mat-accent mat-raised-button mat-button-base" ng-reflect-disabled="false">
<span class="mat-button-wrapper">Submit</span><div matripple="" class="mat-ripple mat-button-ripple" ng-reflect-disabled="false" ng-reflect-centered="false" ng-reflect-trigger="[object HTMLButtonElement]"></div>
<div class="mat-button-focus-overlay"></div></button><div class="md-form-field" style="margin-top:1em;"></div>
<div class="form-group">
<div>
<button mat-raised-button (click)="save()" type="submit" id="save"
class="mat-focus-indicator mat-stroked-button accent mat-accent mat-raised-button mat-button-base"
ng-reflect-disabled="false">
<span class="mat-button-wrapper">Submit</span>
<div matripple="" class="mat-ripple mat-button-ripple" ng-reflect-disabled="false"
ng-reflect-centered="false" ng-reflect-trigger="[object HTMLButtonElement]"></div>
<div class="mat-button-focus-overlay"></div>
</button>
<div class="md-form-field" style="margin-top:1em;"></div>
</div>
</div>
</div>
</div>
</fieldset>
</fieldset>
</div>

71
src/Ombi/ClientApp/src/app/settings/themoviedb/themoviedb.component.ts
Unescape View File

@ -1,15 +1,13 @@
import {COMMA, ENTER} from "@angular/cdk/keycodes";
import { Component, OnInit, ElementRef, ViewChild } from "@angular/core";
import { MatChipInputEvent } from "@angular/material/chips";
import { MatAutocompleteSelectedEvent, MatAutocomplete } from "@angular/material/autocomplete";
import { empty, of, Observable } from "rxjs";
import { MatAutocomplete } from "@angular/material/autocomplete";
import { ITheMovieDbSettings, IMovieDbKeyword } from "../../interfaces";
import { NotificationService } from "../../services";
import { SettingsService } from "../../services";
import { TheMovieDbService } from "../../services";
import { FormControl, FormBuilder, FormGroup } from "@angular/forms";
import { startWith, map, debounceTime, tap, switchMap, finalize } from "rxjs/operators";
import { FormBuilder, FormGroup } from "@angular/forms";
import { debounceTime, switchMap } from "rxjs/operators";
interface IKeywordTag {
id: number;
@ -28,9 +26,6 @@ export class TheMovieDbComponent implements OnInit {
public tagForm: FormGroup;
public filteredTags: IMovieDbKeyword[];
@ViewChild('fruitInput') public fruitInput: ElementRef<HTMLInputElement>;
@ViewChild('auto') public matAutocomplete: MatAutocomplete;
private readonly separatorKeysCodes: number[] = [ENTER, COMMA];
constructor(private settingsService: SettingsService,
private notificationService: NotificationService,
@ -50,6 +45,13 @@ export class TheMovieDbComponent implements OnInit {
initial: true,
}))
: [];
this.excludedKeywords.forEach(key => {
this.tmdbService.getKeyword(key.id).subscribe(keyResult => {
this.excludedKeywords.filter((val, idx) => {
val.name = keyResult.name;
})
});
});
});
this.tagForm
@ -64,61 +66,8 @@ export class TheMovieDbComponent implements OnInit {
)
.subscribe((r) => (this.filteredTags = r));
// this.tagForm.controls.input.valueChanges
// .pipe(
// debounceTime(500),
// switchMap(value => this.tmdbService.getKeywords(value))
// )
// .subscribe((data: IMovieDbKeyword[]) => {
// this.filteredTags = data;
// });
}
public async selected(event: MatAutocompleteSelectedEvent) {
const keywordId = await this.tmdbService.getKeyword(+event.option.value).toPromise();
this.excludedKeywords.push({ id: keywordId.id, name: keywordId.name, initial: false});
this.fruitInput.nativeElement.value = '';
this.tagForm.controls.input.setValue(null);
}
public autocompleteKeyword = (text: string) => this.tmdbService.getKeywords(text);
public onAddingKeyword = (tag: string | IKeywordTag) => {
if (typeof tag === "string") {
const id = Number(tag);
return isNaN(id) ? empty() : this.tmdbService.getKeyword(id);
} else {
return of(tag);
}
}
public onKeywordSelect = (keyword: IKeywordTag) => {
if (keyword.initial) {
this.tmdbService.getKeyword(keyword.id)
.subscribe(k => {
keyword.name = k.name;
keyword.initial = false;
});
}
}
public async add(event: MatChipInputEvent) {
const input = event.input;
const value = event.value;
// Add our fruit
if ((value || '').trim()) {
const keyword = await this.tmdbService.getKeywords(value).toPromise();
this.excludedKeywords.push({ id: keyword[0].id, name: keyword[0].name, initial: false });
}
// Reset the input value
if (input) {
input.value = '';
}
this.tagForm.controls.input.setValue(null);
}
public remove(tag: IKeywordTag): void {
const index = this.excludedKeywords.indexOf(tag);

Write Preview
Loading…
Cancel
Save