diff options
| -rw-r--r-- | ui/src/app/app.component.html | 3 | ||||
| -rw-r--r-- | ui/src/app/app.component.ts | 16 | ||||
| -rw-r--r-- | ui/src/app/downloads.service.ts | 5 |
3 files changed, 19 insertions, 5 deletions
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html index e58e007..8af200c 100644 --- a/ui/src/app/app.component.html +++ b/ui/src/app/app.component.html @@ -58,7 +58,8 @@ <div ngbDropdownMenu aria-labelledby="advancedButton" class="dropdown-menu dropdown-menu-end folder-dropdown-menu"> <div class="input-group"> <span class="input-group-text">Download Folder</span> - <input type="text" class="form-select" name="folder" [(ngModel)]="folder" (change)="folderChanged()" [disabled]="addInProgress || downloads.loading" /> + <select class="form-select" name="folder" #folderSelect [(ngModel)]="folder" (change)="folderChanged()" [disabled]="addInProgress || downloads.loading"> + </select> </div> </div> </div> diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index f48b934..052e182 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; +import { Component, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core'; import { faTrashAlt, faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons'; import { faRedoAlt, faSun, faMoon, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; import { CookieService } from 'ngx-cookie-service'; @@ -7,10 +7,13 @@ import { DownloadsService, Status } from './downloads.service'; import { MasterCheckboxComponent } from './master-checkbox.component'; import { Formats, Format, Quality } from './formats'; +// jQuery is loaded in angular.json for selectize +declare var $: any; + @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.sass'] + styleUrls: ['./app.component.sass'], }) export class AppComponent implements AfterViewInit { addUrl: string; @@ -19,6 +22,7 @@ export class AppComponent implements AfterViewInit { quality: string; format: string; folder: string; + customDirs: string[] = []; addInProgress = false; darkMode: boolean; @@ -28,6 +32,7 @@ export class AppComponent implements AfterViewInit { @ViewChild('doneDelSelected') doneDelSelected: ElementRef; @ViewChild('doneClearCompleted') doneClearCompleted: ElementRef; @ViewChild('doneClearFailed') doneClearFailed: ElementRef; + @ViewChild('folderSelect') folderSelect: ElementRef; faTrashAlt = faTrashAlt; faCheckCircle = faCheckCircle; @@ -46,6 +51,13 @@ export class AppComponent implements AfterViewInit { } ngAfterViewInit() { + // Trigger folderSelect to update + this.downloads.customDirsChanged.subscribe((dirs: string[]) => { + console.log("customDirsChanged:", dirs); + $(this.folderSelect.nativeElement).selectize({options: dirs}); + this.customDirs = dirs; + }); + this.downloads.queueChanged.subscribe(() => { this.queueMasterCheckbox.selectionChanged(); }); diff --git a/ui/src/app/downloads.service.ts b/ui/src/app/downloads.service.ts index 018f225..42ffe6d 100644 --- a/ui/src/app/downloads.service.ts +++ b/ui/src/app/downloads.service.ts @@ -33,8 +33,8 @@ export class DownloadsService { done = new Map<string, Download>(); queueChanged = new Subject(); doneChanged = new Subject(); + customDirsChanged = new Subject<string[]>(); configuration = {}; - custom_directories = {}; constructor(private http: HttpClient, private socket: MeTubeSocket) { socket.fromEvent('all').subscribe((strdata: string) => { @@ -84,7 +84,8 @@ export class DownloadsService { socket.fromEvent('custom_directories').subscribe((strdata: string) => { let data = JSON.parse(strdata); console.debug("got custom_directories:", data); - this.custom_directories = data["directories"]; + let customDirectories = data["directories"]; + this.customDirsChanged.next(customDirectories); }); } |