mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-14 02:26:55 -07:00
upgraded the moviedb page #3831
This commit is contained in:
Jamie Rees
parent
5941e962ec
commit
53e502bd1c
2 changed files with 60 additions and 150 deletions
|
|
@ -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 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>
|
||||
|
||||
<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>
|
||||
</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 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> -->
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
</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"> ({{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>
|
||||
|
||||
<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>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue