Initial settings tab

src/app/components/settings/settings.component.html

@@ -0,0 +1,29 @@
+<h3 class="ui header">Paths</h3>
+<div class="ui form">
+  <div class="field">
+    <label>Chart library directory</label>
+    <div class="ui action input">
+      <input [value]="settingsService.libraryDirectory" class="default-cursor" readonly type="text"
+        placeholder="No directory selected!">
+      <button *ngIf="settingsService.libraryDirectory != undefined" (click)="openLibraryDirectory()"
+        class="ui button">Open Folder</button>
+      <button (click)="getLibraryDirectory()" class="ui button teal">Choose</button>
+    </div>
+  </div>
+</div>
+
+<h3 class="ui header">Cache</h3>
+<div>Current Cache Size: <div class="ui label" style="margin-left: 1em;">{{cacheSize}}</div>
+</div>
+<button style="margin-top: 0.5em;" (click)="clearCache()" class="ui button">Clear Cache</button>
+
+<h3 class="ui header">Theme</h3>
+<div #themeDropdown class="ui selection dropdown mr">
+  <input type="hidden" name="sort" [value]="settingsService.theme">
+  <i class="dropdown icon"></i>
+  <div class="default text">Default</div>
+  <div class="menu">
+    <div class="item" [attr.data-value]="i" *ngFor="let theme of settingsService.builtinThemes; let i = index">{{theme}}
+    </div>
+  </div>
+</div>

src/app/components/settings/settings.component.scss

@@ -0,0 +1,10 @@
+:host {
+  flex: 1;
+  padding: 2em;
+  overflow-y: scroll;
+}
+
+.default-cursor {
+  cursor: default;
+  pointer-events: none;
+}

src/app/components/settings/settings.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core'
+import { ElectronService } from 'src/app/core/services/electron.service'
+import { SettingsService } from 'src/app/core/services/settings.service'
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit, AfterViewInit {
+  @ViewChild('themeDropdown', { static: true }) themeDropdown: ElementRef
+
+  cacheSize = 'Calculating...'
+
+  constructor(private settingsService: SettingsService, private electronService: ElectronService) { }
+
+  async ngOnInit() {
+    const cacheSize = await this.settingsService.getCacheSize()
+    this.cacheSize = Math.round(cacheSize / 1000000) + ' MB'
+  }
+
+  ngAfterViewInit() {
+    $(this.themeDropdown.nativeElement).dropdown({
+      onChange: (_value: string, text: string) => {
+        this.settingsService.theme = text
+      }
+    })
+  }
+  
+  async clearCache() {
+    this.cacheSize = 'Please wait...'
+    await this.settingsService.clearCache()
+    this.cacheSize = 'Cleared!'
+  }
+
+  async getLibraryDirectory() {
+    const result = await this.electronService.showOpenDialog({
+      title: 'Choose library folder',
+      buttonLabel: 'This is where my charts are!',
+      defaultPath: this.settingsService.libraryDirectory || '',
+      properties: ['openDirectory']
+    })
+
+    if (result.canceled == false) {
+      this.settingsService.libraryDirectory = result.filePaths[0]
+    }
+  }
+
+  async openLibraryDirectory() {
+    this.electronService.openFolder(this.settingsService.libraryDirectory)
+  }
+}