aboutsummaryrefslogtreecommitdiff
path: root/ui/src
diff options
context:
space:
mode:
authorJames Woglom <j@wogloms.net>2022-08-29 21:52:54 -0400
committerJames Woglom <j@wogloms.net>2022-08-29 21:52:54 -0400
commit8abacc2a3610701e6258d9c79ee0c577ad2b2376 (patch)
treea9222733401f237d5db1e16bd9190567eae51ac7 /ui/src
parentload selectize (diff)
downloadmetube-8abacc2a3610701e6258d9c79ee0c577ad2b2376.tar.gz
metube-8abacc2a3610701e6258d9c79ee0c577ad2b2376.tar.bz2
metube-8abacc2a3610701e6258d9c79ee0c577ad2b2376.zip
almost functional with selectize
Diffstat (limited to 'ui/src')
-rw-r--r--ui/src/app/app.component.html3
-rw-r--r--ui/src/app/app.component.ts16
-rw-r--r--ui/src/app/downloads.service.ts5
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);
});
}
bgstack15