Initial settings, download UI, various bugfixes

src/app/app.component.ts

@@ -1,11 +1,17 @@
-import { Component } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
+import { SettingsService } from './core/services/settings.service'
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styles: []
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
-  constructor() { }
+  constructor(private settingsService: SettingsService) { }
+
+  ngOnInit() {
+    // Load settings
+    this.settingsService.getSettings()
+  }
 }

src/app/app.module.ts

@@ -9,7 +9,9 @@ import { SearchBarComponent } from './components/browse/search-bar/search-bar.co
 import { StatusBarComponent } from './components/browse/status-bar/status-bar.component';
 import { ResultTableComponent } from './components/browse/result-table/result-table.component';
 import { ChartSidebarComponent } from './components/browse/chart-sidebar/chart-sidebar.component';
-import { ResultTableRowComponent } from './components/browse/result-table/result-table-row/result-table-row.component'
+import { ResultTableRowComponent } from './components/browse/result-table/result-table-row/result-table-row.component';
+import { DownloadsModalComponent } from './components/browse/status-bar/downloads-modal/downloads-modal.component';
+import { ProgressBarDirective } from './core/directives/progress-bar.directive'
 
 @NgModule({
   declarations: [
@@ -20,7 +22,9 @@ import { ResultTableRowComponent } from './components/browse/result-table/result
     StatusBarComponent,
     ResultTableComponent,
     ChartSidebarComponent,
-    ResultTableRowComponent
+    ResultTableRowComponent,
+    DownloadsModalComponent,
+    ProgressBarDirective
   ],
   imports: [
     BrowserModule,

src/app/components/browse/chart-sidebar/chart-sidebar.component.html

@@ -2,7 +2,7 @@
   <div class="ui placeholder" [ngClass]="{'placeholder': !albumArtBuffer}">
     <img class="ui square image" [src]="getAlbumArtSrc()">
   </div>
-  <div id="chartDropdown" class="ui fluid selection dropdown">
+  <div *ngIf="charts.length > 1" id="chartDropdown" class="ui fluid selection dropdown">
     <input type="hidden" name="Chart">
     <i class="dropdown icon"></i>
     <div class="default text">Chart</div>
@@ -26,7 +26,7 @@
   </div>
   <div class="ui positive buttons">
     <div class="ui button" (click)="onDownloadClicked()">Download Latest</div>
-    <div id="versionDropdown" class="ui floating dropdown icon button">
+    <div *ngIf="getVersions().length > 1" id="versionDropdown" class="ui floating dropdown icon button">
       <i class="dropdown icon"></i>
       <div class="menu">
         <div class="item">Version 1</div>

src/app/components/browse/chart-sidebar/chart-sidebar.component.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core'
-import { SongResult } from 'src/electron/shared/interfaces/search.interface'
-import { ElectronService } from 'src/app/core/services/electron.service'
-import { VersionResult } from 'src/electron/shared/interfaces/songDetails.interface'
-import { AlbumArtService } from 'src/app/core/services/album-art.service'
+import { SongResult } from '../../../../electron/shared/interfaces/search.interface'
+import { ElectronService } from '../../../core/services/electron.service'
+import { VersionResult } from '../../../../electron/shared/interfaces/songDetails.interface'
+import { AlbumArtService } from '../../../core/services/album-art.service'
+import { DownloadService } from '../../../core/services/download.service'
 
 @Component({
   selector: 'app-chart-sidebar',
@@ -11,15 +12,17 @@ import { AlbumArtService } from 'src/app/core/services/album-art.service'
 })
 export class ChartSidebarComponent {
 
+  private songResult: SongResult
   selectedVersion: VersionResult
   charterPlural: string
   albumArtBuffer: Buffer
 
-  private charts: { chartID: number, versions: VersionResult[] }[]
+  charts: { chartID: number, versions: VersionResult[] }[]
 
-  constructor(private electronService: ElectronService, private albumArtService: AlbumArtService) { }
+  constructor(private electronService: ElectronService, private albumArtService: AlbumArtService, private downloadService: DownloadService) { }
 
   async onRowClicked(result: SongResult) {
+    this.songResult = result
     const albumArt = this.albumArtService.getImage(result.id)
     const results = await this.electronService.invoke('song-details', result.id)
 
@@ -42,32 +45,28 @@ export class ChartSidebarComponent {
     if (this.albumArtBuffer) {
       return 'data:image/jpg;base64,' + this.albumArtBuffer.toString('base64')
     } else {
-      return undefined
+      return ''
     }
   }
 
   /**
    * Initializes the chart dropdown from <this.charts> (or removes it if there's only one chart)
    */
-  private initChartDropdown() {
+  private async initChartDropdown() {
+    this.switchChart(this.charts[0].chartID)
+    await new Promise<void>(resolve => setTimeout(() => resolve(), 0)) // Wait for *ngIf to update DOM
+    const values = this.charts.map(chart => {
+      const version = chart.versions[0]
+      return {
+        value: chart.chartID,
+        text: version.avTagName,
+        name: `${version.avTagName} <b>[${version.charters}]</b>`
+      }
+    })
     const $chartDropdown = $('#chartDropdown')
-    if (this.charts.length < 2) {
-      $chartDropdown.hide()
-      this.switchChart(this.charts[0].chartID)
-    } else {
-      const values = this.charts.map(chart => {
-        const version = chart.versions[0]
-        return {
-          value: chart.chartID,
-          text: version.avTagName,
-          name: `${version.avTagName} <b>[${version.charters}]</b>`
-        }
-      })
-      $chartDropdown.dropdown('setup menu', { values })
-      $chartDropdown.dropdown('setting', 'onChange', (chartID: number) => this.switchChart(chartID))
-      $chartDropdown.dropdown('set selected', values[0].value)
-      $chartDropdown.show()
-    }
+    $chartDropdown.dropdown('setup menu', { values })
+    $chartDropdown.dropdown('setting', 'onChange', (chartID: number) => this.switchChart(chartID))
+    $chartDropdown.dropdown('set selected', values[0].value)
   }
 
   /**
@@ -104,25 +103,20 @@ export class ChartSidebarComponent {
    */
   private initVersionDropdown() {
     const $versionDropdown = $('#versionDropdown')
-    const versions = this.charts.find(chart => chart.chartID == this.selectedVersion.chartID).versions
-    if (versions.length < 2) {
-      $versionDropdown.hide()
-    } else {
-      const values = versions.map(version => {
-        return {
-          value: version.versionID,
-          text: this.getLastModified(version.lastModified),
-          name: this.getLastModified(version.lastModified)
-        }
-      })
-      $versionDropdown.dropdown('setup menu', { values })
-      $versionDropdown.dropdown('setting', 'onChange', (versionID: number) => {
-        console.log(`Selected version: ${versionID}`)
-        return this.selectedVersion = versions.find(version => version.versionID = versionID)
-      })
-      $versionDropdown.dropdown('set selected', values[0].value)
-      $versionDropdown.show()
-    }
+    const versions = this.getVersions()
+    const values = versions.map(version => {
+      return {
+        value: version.versionID,
+        text: this.getLastModified(version.lastModified),
+        name: this.getLastModified(version.lastModified)
+      }
+    })
+    $versionDropdown.dropdown('setup menu', { values })
+    $versionDropdown.dropdown('setting', 'onChange', (versionID: number) => {
+      console.log(`Selected version: ${versionID}`)
+      this.selectedVersion = versions.find(version => version.versionID = versionID)
+    })
+    $versionDropdown.dropdown('set selected', values[0].value)
   }
 
   /**
@@ -134,6 +128,16 @@ export class ChartSidebarComponent {
   }
 
   onDownloadClicked() {
-    console.log(this.selectedVersion.downloadLink)
+    this.downloadService.addDownload({
+      versionID: this.selectedVersion.versionID,
+      avTagName: this.selectedVersion.avTagName,
+      artist: this.songResult.artist,
+      charter: this.selectedVersion.charters,
+      links: JSON.parse(this.selectedVersion.downloadLink)
+    })
+  }
+
+  getVersions() {
+    return this.charts.find(chart => chart.chartID == this.selectedVersion.chartID).versions
   }
 }

src/app/components/browse/result-table/result-table-row/result-table-row.component.ts

@@ -1,5 +1,5 @@
 import { Component, AfterViewInit, Input } from '@angular/core'
-import { SongResult } from 'src/electron/shared/interfaces/search.interface'
+import { SongResult } from '../../../../../electron/shared/interfaces/search.interface'
 
 @Component({
   selector: 'tr[app-result-table-row]',

src/app/components/browse/result-table/result-table.component.ts

@@ -1,5 +1,5 @@
 import { Component, AfterViewInit, Input, Output, EventEmitter } from '@angular/core'
-import { SongResult } from 'src/electron/shared/interfaces/search.interface'
+import { SongResult } from '../../../../electron/shared/interfaces/search.interface'
 
 @Component({
   selector: 'app-result-table',

src/app/components/browse/search-bar/search-bar.component.ts

@@ -1,6 +1,6 @@
 import { Component, AfterViewInit, Output, EventEmitter } from '@angular/core'
-import { ElectronService } from 'src/app/core/services/electron.service'
-import { SearchType, SongResult } from 'src/electron/shared/interfaces/search.interface'
+import { ElectronService } from '../../../core/services/electron.service'
+import { SearchType, SongResult } from '../../../../electron/shared/interfaces/search.interface'
 
 @Component({
   selector: 'app-search-bar',

src/app/components/browse/status-bar/downloads-modal/downloads-modal.component.html

@@ -0,0 +1,16 @@
+<div class="ui cards">
+  <div *ngFor="let download of downloads; trackBy:trackByVersionID" class="card">
+    <div class="content">
+      <div class="header">{{download.title}}</div>
+    </div>
+    <div class="content">
+      <div class="header">{{download.header}}</div>
+      <div class="description">{{download.description}}</div>
+      <div appProgressBar [percent]="download.percent" class="ui progress">
+        <div class="bar">
+          <div class="progress"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/browse/status-bar/downloads-modal/downloads-modal.component.scss

@@ -0,0 +1,7 @@
+.card {
+  flex-grow: 1;
+}
+
+.ui.progress {
+  margin: 0;
+}

src/app/components/browse/status-bar/downloads-modal/downloads-modal.component.ts

@@ -0,0 +1,31 @@
+import { Component, ChangeDetectorRef } from '@angular/core'
+import { Download } from '../../../../../electron/shared/interfaces/download.interface'
+import { DownloadService } from '../../../../core/services/download.service'
+import * as _ from 'underscore'
+
+@Component({
+  selector: 'app-downloads-modal',
+  templateUrl: './downloads-modal.component.html',
+  styleUrls: ['./downloads-modal.component.scss']
+})
+export class DownloadsModalComponent {
+
+  downloads: Download[] = []
+
+  constructor(downloadService: DownloadService, private ref: ChangeDetectorRef) {
+    const detectChanges = _.throttle(() => this.ref.detectChanges(), 30)
+    downloadService.onDownloadUpdated(download => {
+      const index = this.downloads.findIndex(thisDownload => thisDownload.versionID == download.versionID)
+      if (index == -1) {
+        this.downloads.push(download)
+      } else {
+        this.downloads[index] = download
+      }
+      detectChanges()
+    })
+  }
+
+  trackByVersionID(_index: number, item: Download) {
+    return item.versionID
+  }
+}

src/app/components/browse/status-bar/status-bar.component.html

@@ -3,12 +3,19 @@
   <div class="item">
     <button class="ui positive button">Download Selected</button>
   </div>
-
-  <a class="item right">
-    <div #progressBar class="ui progress">
+  <a *ngIf="!downloading" class="item right" (click)="showDownloads()">
+    <div #progressBar appProgressBar [percent]="percent" class="ui progress">
       <div class="bar">
         <div class="progress"></div>
       </div>
     </div>
   </a>
+
+  <div id="downloadsModal" class="ui modal">
+    <i class="inside close icon"></i>
+    <div class="header">Downloads</div>
+    <div class="scrolling content">
+      <app-downloads-modal></app-downloads-modal>
+    </div>
+  </div>
 </div>

src/app/components/browse/status-bar/status-bar.component.ts

@@ -7,6 +7,11 @@ import { Component } from '@angular/core'
 })
 export class StatusBarComponent {
 
+  downloading = false
+
   constructor() { }
 
+  showDownloads() {
+    $('#downloadsModal').modal('show')
+  }
 }

src/app/components/toolbar/toolbar.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core'
-import { ElectronService } from 'src/app/core/services/electron.service'
+import { ElectronService } from '../../core/services/electron.service'
 
 @Component({
   selector: 'app-toolbar',

src/app/core/directives/progress-bar.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, ElementRef, Input } from '@angular/core'
+import * as _ from 'underscore'
+
+@Directive({
+  selector: '[appProgressBar]'
+})
+export class ProgressBarDirective {
+
+  progress: (percent: number) => void
+
+  @Input() set percent(percent: number) {
+    this.progress(percent)
+  }
+
+  constructor(element: ElementRef) {
+    const $progressBar = $(element.nativeElement)
+    this.progress = _.throttle((percent: number) => $progressBar.progress({ percent }), 100)
+    this.percent = 0
+  }
+}

src/app/core/services/download.service.ts

@@ -1,9 +1,24 @@
-import { Injectable } from '@angular/core'
+import { Injectable, EventEmitter } from '@angular/core'
+import { ElectronService } from './electron.service'
+import { Download, NewDownload } from '../../../electron/shared/interfaces/download.interface'
 
 @Injectable({
   providedIn: 'root'
 })
 export class DownloadService {
 
-  constructor() { }
+  private downloadUpdatedEmitter = new EventEmitter<Download>()
+
+  constructor(private electronService: ElectronService) { }
+
+  addDownload(newDownload: NewDownload) {
+    this.electronService.receiveIPC('download-updated', result => {
+      this.downloadUpdatedEmitter.emit(result)
+    })
+    this.electronService.sendIPC('add-download', newDownload)
+  }
+
+  onDownloadUpdated(callback: (download: Download) => void) {
+    this.downloadUpdatedEmitter.subscribe(callback)
+  }
 }

src/app/core/services/electron.service.ts

@@ -6,7 +6,7 @@ import { ipcRenderer, webFrame, remote } from 'electron'
 import * as childProcess from 'child_process'
 import * as fs from 'fs'
 import * as util from 'util'
-import { IPCEvents } from '../../../electron/shared/IPCHandler'
+import { IPCInvokeEvents, IPCEmitEvents } from '../../../electron/shared/IPCHandler'
 
 @Injectable({
   providedIn: 'root'
@@ -42,7 +42,27 @@ export class ElectronService {
    * @param data The data object to send across IPC.
    * @returns A promise that resolves to the output data.
    */
-  async invoke<E extends keyof IPCEvents>(event: E, data: IPCEvents[E]['input']) {
-    return this.ipcRenderer.invoke(event, data) as Promise<IPCEvents[E]['output']>
+  async invoke<E extends keyof IPCInvokeEvents>(event: E, data: IPCInvokeEvents[E]['input']) {
+    return this.ipcRenderer.invoke(event, data) as Promise<IPCInvokeEvents[E]['output']>
+  }
+
+  /**
+   * Sends an IPC message to the main process.
+   * @param event The name of the IPC event to send.
+   * @param data The data object to send across IPC.
+   */
+  sendIPC<E extends keyof IPCEmitEvents>(event: E, data: IPCEmitEvents[E]) {
+    this.ipcRenderer.send(event, data)
+  }
+
+  /**
+   * Receives an IPC message from the main process.
+   * @param event The name of the IPC event to receive.
+   * @param callback The data object to receive across IPC.
+   */
+  receiveIPC<E extends keyof IPCEmitEvents>(event: E, callback: (result: IPCEmitEvents[E]) => void) {
+    this.ipcRenderer.on(event, (_event, ...results) => {
+      callback(results[0])
+    })
   }
 }

src/app/core/services/settings.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core'
+import { ElectronService } from './electron.service'
+import { Settings } from 'src/electron/shared/Settings'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SettingsService {
+
+  private settings: Settings
+
+  constructor(private electronService: ElectronService) { }
+
+  async getSettings() {
+    if (this.settings == undefined) {
+      this.settings = await this.electronService.invoke('init-settings', undefined)
+    }
+    return this.settings
+  }
+}