From ae605d5f70d79dc9902cfb7dc0f48b591ea8a23e Mon Sep 17 00:00:00 2001 From: Isaac Grynsztein Date: Thu, 5 Mar 2020 22:38:23 -0500 Subject: [PATCH] Added ability to set config from settings theme slide toggle is now in top right menu --- backend/app.js | 14 ++ backend/config.js | 1 + src/app/app.component.css | 6 + src/app/app.component.html | 13 +- src/app/app.component.ts | 9 +- src/app/app.module.ts | 9 +- src/app/posts.services.ts | 4 + src/app/settings/settings.component.html | 194 ++++++++++++++++++++++- src/app/settings/settings.component.scss | 3 + src/app/settings/settings.component.ts | 28 +++- 10 files changed, 273 insertions(+), 8 deletions(-) diff --git a/backend/app.js b/backend/app.js index 690edbc..2e265e2 100644 --- a/backend/app.js +++ b/backend/app.js @@ -510,6 +510,20 @@ app.get('/api/config', function(req, res) { }); }); +app.post('/api/setConfig', function(req, res) { + let new_config_file = req.body.new_config_file; + if (new_config_file && new_config_file['YoutubeDLMaterial']) { + let success = config_api.setConfigFile(new_config_file); + res.send({ + success: success + }); + } else { + console.log('ERROR: Tried to save invalid config file!') + res.sendStatus(400); + } + +}); + app.get('/api/using-encryption', function(req, res) { res.send(usingEncryption); }); diff --git a/backend/config.js b/backend/config.js index ee31843..b22f157 100644 --- a/backend/config.js +++ b/backend/config.js @@ -109,5 +109,6 @@ module.exports = { setConfigItem: setConfigItem, setConfigItems: setConfigItems, getConfigFile: getConfigFile, + setConfigFile: setConfigFile, CONFIG_ITEMS: CONFIG_ITEMS } \ No newline at end of file diff --git a/src/app/app.component.css b/src/app/app.component.css index d7ef823..a902545 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -10,4 +10,10 @@ flex-direction: column; flex-basis: 100%; flex: 1; +} + +.theme-slide-toggle { + top: 2px; + left: 10px; + position: relative; } \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index fc7da91..a01a49d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -8,7 +8,18 @@
{{topBarTitle}}
- + + + + +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 91a16c6..1f6f3b2 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -4,7 +4,7 @@ import {FileCardComponent} from './file-card/file-card.component'; import { Observable } from 'rxjs/Observable'; import {FormControl, Validators} from '@angular/forms'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {MatSnackBar} from '@angular/material'; +import {MatSnackBar, MatDialog} from '@angular/material'; import { saveAs } from 'file-saver'; import 'rxjs/add/observable/of'; import 'rxjs/add/operator/mapTo'; @@ -18,6 +18,7 @@ import { YoutubeSearchService, Result } from './youtube-search.service'; import { Router } from '@angular/router'; import { OverlayContainer } from '@angular/cdk/overlay'; import { THEMES_CONFIG } from '../themes'; +import { SettingsComponent } from './settings/settings.component'; @Component({ selector: 'app-root', @@ -36,7 +37,7 @@ export class AppComponent implements OnInit { @ViewChild('urlinput', { read: ElementRef, static: false }) urlInput: ElementRef; - constructor(public postsService: PostsService, public snackBar: MatSnackBar, + constructor(public postsService: PostsService, public snackBar: MatSnackBar, private dialog: MatDialog, public router: Router, public overlayContainer: OverlayContainer, private elementRef: ElementRef) { // loading config @@ -117,5 +118,9 @@ onSetTheme(theme, old_theme) { goBack() { this.router.navigate(['/home']); } + + openSettingsDialog() { + const dialogRef = this.dialog.open(SettingsComponent); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d2668e8..33a2960 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,7 +5,9 @@ import {MatNativeDateModule, MatRadioModule, MatInputModule, MatButtonModule, Ma MatProgressBarModule, MatExpansionModule, MatProgressSpinnerModule, MatButtonToggleModule, - MatDialogModule} from '@angular/material'; + MatDialogModule, + MatSlideToggleModule, + MatMenuModule} from '@angular/material'; import {DragDropModule} from '@angular/cdk/drag-drop'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import { AppComponent } from './app.component'; @@ -70,6 +72,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible MatProgressSpinnerModule, MatButtonToggleModule, MatDialogModule, + MatSlideToggleModule, + MatMenuModule, DragDropModule, VgCoreModule, VgControlsModule, @@ -82,7 +86,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible ], entryComponents: [ InputDialogComponent, - CreatePlaylistComponent + CreatePlaylistComponent, + SettingsComponent ], providers: [PostsService], bootstrap: [AppComponent] diff --git a/src/app/posts.services.ts b/src/app/posts.services.ts index 08fa9a0..a24439c 100644 --- a/src/app/posts.services.ts +++ b/src/app/posts.services.ts @@ -92,6 +92,10 @@ export class PostsService { } } + setConfig(config) { + return this.http.post(this.path + 'setConfig', {new_config_file: config}); + } + deleteFile(name: string, isAudio: boolean) { if (isAudio) { return this.http.post(this.path + 'deleteMp3', {name: name}); diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index 4ab2a41..2d5ca10 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -1 +1,193 @@ -

settings works!

+

Settings

+ + + + + + + Host + + +
+
+
+ + + + +
+
+ + + + +
+ +
+
+ + + + + + + Encryption + + +
+
+
+ Use encryption +
+ +
+ + + + +
+ +
+ + + + +
+
+
+ + + + + + + Downloader + + +
+
+
+ + + + +
+ +
+ + + + +
+
+
+ + + + + + + Extra + + +
+
+
+ + + + +
+
+ File manager enabled +
+
+ Allow quality select +
+
+ Download only mode +
+
+ Allow multi-download mode +
+
+
+ + + + + + + API + + +
+
+
+ Use YouTube API +
+
+ + + + +
+
+
+ + + + + + + Themes + + +
+
+
+ + Default + Dark + +
+ +
+ Allow theme change +
+
+
+ + + + + + + Advanced + + +
+
+
+ Use default downloading agent +
+
+ + + + +
+
+ Allow advanced download +
+
+
+ + + + +
+ + +
+ \ No newline at end of file diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss index e69de29..22cef34 100644 --- a/src/app/settings/settings.component.scss +++ b/src/app/settings/settings.component.scss @@ -0,0 +1,3 @@ +.settings-expansion-panel { + margin-bottom: 20px; +} \ No newline at end of file diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts index 77c6a03..39cdcbc 100644 --- a/src/app/settings/settings.component.ts +++ b/src/app/settings/settings.component.ts @@ -8,17 +8,41 @@ import { PostsService } from 'app/posts.services'; }) export class SettingsComponent implements OnInit { + initial_config = null; + new_config = null + loading_config = false; + constructor(private postsService: PostsService) { } ngOnInit() { + this.getConfig(); } getConfig() { + this.loading_config = true; + this.postsService.loadNavItems().subscribe(res => { + this.loading_config = false; + // successfully loaded config + + this.initial_config = !this.postsService.debugMode ? res['config_file']['YoutubeDLMaterial'] : res['YoutubeDLMaterial']; + this.new_config = JSON.parse(JSON.stringify(this.initial_config)); + }); + } + settingsSame() { + return JSON.stringify(this.new_config) === JSON.stringify(this.initial_config); } - setSetting() { - + saveSettings() { + const settingsToSave = {'YoutubeDLMaterial': this.new_config}; + this.postsService.setConfig(settingsToSave).subscribe(res => { + if (res['success']) { + // sets new config as old config + this.initial_config = JSON.parse(JSON.stringify(this.new_config)); + } + }, err => { + console.error('Failed to save config!'); + }) } }