mirror of https://github.com/alexta69/metube
almost functional with selectize
parent
67be71cdeb
commit
8abacc2a36
|
@ -58,7 +58,8 @@
|
||||||
<div ngbDropdownMenu aria-labelledby="advancedButton" class="dropdown-menu dropdown-menu-end folder-dropdown-menu">
|
<div ngbDropdownMenu aria-labelledby="advancedButton" class="dropdown-menu dropdown-menu-end folder-dropdown-menu">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<span class="input-group-text">Download Folder</span>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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 { faTrashAlt, faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons';
|
||||||
import { faRedoAlt, faSun, faMoon, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
|
import { faRedoAlt, faSun, faMoon, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { CookieService } from 'ngx-cookie-service';
|
import { CookieService } from 'ngx-cookie-service';
|
||||||
|
@ -7,10 +7,13 @@ import { DownloadsService, Status } from './downloads.service';
|
||||||
import { MasterCheckboxComponent } from './master-checkbox.component';
|
import { MasterCheckboxComponent } from './master-checkbox.component';
|
||||||
import { Formats, Format, Quality } from './formats';
|
import { Formats, Format, Quality } from './formats';
|
||||||
|
|
||||||
|
// jQuery is loaded in angular.json for selectize
|
||||||
|
declare var $: any;
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrls: ['./app.component.sass']
|
styleUrls: ['./app.component.sass'],
|
||||||
})
|
})
|
||||||
export class AppComponent implements AfterViewInit {
|
export class AppComponent implements AfterViewInit {
|
||||||
addUrl: string;
|
addUrl: string;
|
||||||
|
@ -19,6 +22,7 @@ export class AppComponent implements AfterViewInit {
|
||||||
quality: string;
|
quality: string;
|
||||||
format: string;
|
format: string;
|
||||||
folder: string;
|
folder: string;
|
||||||
|
customDirs: string[] = [];
|
||||||
addInProgress = false;
|
addInProgress = false;
|
||||||
darkMode: boolean;
|
darkMode: boolean;
|
||||||
|
|
||||||
|
@ -28,6 +32,7 @@ export class AppComponent implements AfterViewInit {
|
||||||
@ViewChild('doneDelSelected') doneDelSelected: ElementRef;
|
@ViewChild('doneDelSelected') doneDelSelected: ElementRef;
|
||||||
@ViewChild('doneClearCompleted') doneClearCompleted: ElementRef;
|
@ViewChild('doneClearCompleted') doneClearCompleted: ElementRef;
|
||||||
@ViewChild('doneClearFailed') doneClearFailed: ElementRef;
|
@ViewChild('doneClearFailed') doneClearFailed: ElementRef;
|
||||||
|
@ViewChild('folderSelect') folderSelect: ElementRef;
|
||||||
|
|
||||||
faTrashAlt = faTrashAlt;
|
faTrashAlt = faTrashAlt;
|
||||||
faCheckCircle = faCheckCircle;
|
faCheckCircle = faCheckCircle;
|
||||||
|
@ -46,6 +51,13 @@ export class AppComponent implements AfterViewInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterViewInit() {
|
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.downloads.queueChanged.subscribe(() => {
|
||||||
this.queueMasterCheckbox.selectionChanged();
|
this.queueMasterCheckbox.selectionChanged();
|
||||||
});
|
});
|
||||||
|
|
|
@ -33,8 +33,8 @@ export class DownloadsService {
|
||||||
done = new Map<string, Download>();
|
done = new Map<string, Download>();
|
||||||
queueChanged = new Subject();
|
queueChanged = new Subject();
|
||||||
doneChanged = new Subject();
|
doneChanged = new Subject();
|
||||||
|
customDirsChanged = new Subject<string[]>();
|
||||||
configuration = {};
|
configuration = {};
|
||||||
custom_directories = {};
|
|
||||||
|
|
||||||
constructor(private http: HttpClient, private socket: MeTubeSocket) {
|
constructor(private http: HttpClient, private socket: MeTubeSocket) {
|
||||||
socket.fromEvent('all').subscribe((strdata: string) => {
|
socket.fromEvent('all').subscribe((strdata: string) => {
|
||||||
|
@ -84,7 +84,8 @@ export class DownloadsService {
|
||||||
socket.fromEvent('custom_directories').subscribe((strdata: string) => {
|
socket.fromEvent('custom_directories').subscribe((strdata: string) => {
|
||||||
let data = JSON.parse(strdata);
|
let data = JSON.parse(strdata);
|
||||||
console.debug("got custom_directories:", data);
|
console.debug("got custom_directories:", data);
|
||||||
this.custom_directories = data["directories"];
|
let customDirectories = data["directories"];
|
||||||
|
this.customDirsChanged.next(customDirectories);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue