Cancel, Retry, and Warning download UI

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

@@ -128,8 +128,8 @@ export class ChartSidebarComponent {
   }
 
   onDownloadClicked() {
-    this.downloadService.addDownload({
-      versionID: this.selectedVersion.versionID,
+    this.downloadService.addDownload(
+      this.selectedVersion.versionID, {
       avTagName: this.selectedVersion.avTagName,
       artist: this.songResult.artist,
       charter: this.selectedVersion.charters,

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

@@ -1,9 +1,24 @@
 <div class="ui cards">
-  <div *ngFor="let download of downloads; trackBy:trackByVersionID" class="card">
+  <div *ngFor="let download of downloads; trackBy:trackByVersionID" class="card" [style.background-color]="getBackgroundColor(download)">
     <div class="content">
+      <i class="inside right floated close icon" (click)="cancelDownload(download.versionID)"></i>
       <div class="header">{{download.title}}</div>
     </div>
     <div class="content">
+      <button
+        *ngIf="download.type == 'error'"
+        class="ui right floated labeled icon button"
+        (click)="retryDownload(download.versionID)">
+        <i class="redo icon"></i>
+        Retry
+      </button>
+      <button
+        *ngIf="download.type == 'warning'"
+        class="ui right floated labeled icon button"
+        (click)="continueDownload(download.versionID)">
+        <i class="exclamation triangle icon"></i>
+        Download Anyway
+      </button>
       <div class="header">{{download.header}}</div>
       <div class="description">{{download.description}}</div>
       <div appProgressBar [percent]="download.percent" class="ui progress">

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

@@ -4,4 +4,8 @@
 
 .ui.progress {
   margin: 0;
+}
+
+i.close.icon {
+  cursor: pointer;
 }

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

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectorRef } from '@angular/core'
-import { Download } from '../../../../../electron/shared/interfaces/download.interface'
+import { DownloadProgress } from '../../../../../electron/shared/interfaces/download.interface'
 import { DownloadService } from '../../../../core/services/download.service'
 
 @Component({
@@ -9,13 +9,15 @@ import { DownloadService } from '../../../../core/services/download.service'
 })
 export class DownloadsModalComponent {
 
-  downloads: Download[] = []
+  downloads: DownloadProgress[] = []
 
-  constructor(downloadService: DownloadService, ref: ChangeDetectorRef) {
+  constructor(private downloadService: DownloadService, ref: ChangeDetectorRef) {
     downloadService.onDownloadUpdated(download => {
       const index = this.downloads.findIndex(thisDownload => thisDownload.versionID == download.versionID)
       if (index == -1) {
         this.downloads.push(download)
+      } else if (download.type == 'cancel') {
+        this.downloads.splice(index, 1)
       } else {
         this.downloads[index] = download
       }
@@ -23,7 +25,28 @@ export class DownloadsModalComponent {
     })
   }
 
-  trackByVersionID(_index: number, item: Download) {
+  trackByVersionID(_index: number, item: DownloadProgress) {
     return item.versionID
   }
+
+  cancelDownload(versionID: number) {
+    this.downloadService.cancelDownload(versionID)
+  }
+
+  retryDownload(versionID: number) {
+    this.downloadService.retryDownload(versionID)
+  }
+
+  continueDownload(versionID: number) {
+    // TODO: test this
+    this.downloadService.continueDownload(versionID)
+  }
+
+  getBackgroundColor(download: DownloadProgress) {
+    switch(download.type) {
+      case 'good': return 'unset'
+      case 'warning': return 'yellow'
+      case 'error': return 'indianred'
+    }
+  }
 }

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

@@ -1,6 +1,6 @@
 import { Injectable, EventEmitter } from '@angular/core'
 import { ElectronService } from './electron.service'
-import { Download, NewDownload } from '../../../electron/shared/interfaces/download.interface'
+import { NewDownload, DownloadProgress } from '../../../electron/shared/interfaces/download.interface'
 import * as _ from 'underscore'
 
 @Injectable({
@@ -8,12 +8,24 @@ import * as _ from 'underscore'
 })
 export class DownloadService {
 
-  private downloadUpdatedEmitter = new EventEmitter<Download>()
-  private downloads: Download[] = []
+  private downloadUpdatedEmitter = new EventEmitter<DownloadProgress>()
+  private downloads: DownloadProgress[] = []
 
   constructor(private electronService: ElectronService) { }
 
-  addDownload(newDownload: NewDownload) {
+  get downloadCount() {
+    return this.downloads.length
+  }
+
+  get totalPercent() {
+    let total = 0
+    for (const download of this.downloads) {
+      total += download.percent
+    }
+    return total / this.downloads.length
+  }
+
+  addDownload(versionID: number, newDownload: NewDownload) {
     this.electronService.receiveIPC('download-updated', result => {
       this.downloadUpdatedEmitter.emit(result)
 
@@ -25,28 +37,26 @@ export class DownloadService {
         this.downloads[thisDownloadIndex] = result
       }
     })
-    this.electronService.sendIPC('add-download', newDownload)
+    this.electronService.sendIPC('download', { action: 'add', versionID, data: newDownload })
   }
 
-  onDownloadUpdated(callback: (download: Download) => void) {
+  onDownloadUpdated(callback: (download: DownloadProgress) => void) {
     this.downloadUpdatedEmitter.subscribe(_.throttle(callback, 30))
   }
 
-  get downloadCount() {
-    return this.downloads.length
-  }
-
-  removeDownload(versionID: number) {
+  cancelDownload(versionID: number) {
     const removedDownload = this.downloads.find(download => download.versionID == versionID)
     this.downloads = this.downloads.filter(download => download.versionID != versionID)
+    removedDownload.type = 'cancel'
     this.downloadUpdatedEmitter.emit(removedDownload)
+    this.electronService.sendIPC('download', { action: 'cancel', versionID })
   }
 
-  get totalPercent() {
-    let total = 0
-    for (const download of this.downloads) {
-      total += download.percent
-    }
-    return total / this.downloads.length
+  retryDownload(versionID: number) {
+    this.electronService.sendIPC('download', { action: 'retry', versionID })
+  }
+
+  continueDownload(versionID: number) {
+    this.electronService.sendIPC('download', { action: 'continue', versionID })
   }
 }