Restructure

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

@@ -0,0 +1,28 @@
+<div *ngIf="downloads.length > 0" class="ui segments">
+	<div *ngFor="let download of downloads; trackBy: trackByVersionID" class="ui segment" [style.background-color]="getBackgroundColor(download)">
+		<h3 id="downloadTitle">
+			<span style="flex-grow: 1">{{ download.title }}</span>
+			<i class="inside right close icon" (click)="cancelDownload(download.versionID)"></i>
+		</h3>
+
+		<div id="downloadText">
+			<span style="flex-grow: 1">{{ download.header }}</span>
+			<span *ngIf="!download.isLink" class="description">{{ download.description }}</span>
+			<span *ngIf="download.isLink" class="description">
+				<a (click)="openFolder(download.description)">{{ download.description }}</a>
+			</span>
+		</div>
+
+		<div id="downloadProgressDiv">
+			<div id="downloadProgressBar" appProgressBar [percent]="download.percent" class="ui small progress">
+				<div class="bar" [style.height]="download.type === 'error' ? '-webkit-fill-available' : undefined">
+					<div class="progress"></div>
+				</div>
+			</div>
+			<button *ngIf="download.type === 'error'" class="ui right attached labeled compact icon button" (click)="retryDownload(download.versionID)">
+				<i class="redo icon"></i>
+				Retry
+			</button>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,26 @@
+#downloadTitle,
+#downloadText {
+  display: flex;
+  margin-bottom: 0.3rem;
+}
+
+#downloadText {
+  flex-wrap: wrap;
+}
+
+#downloadProgressDiv {
+  display: flex;
+}
+
+#downloadProgressBar {
+  flex-grow: 1;
+  margin: 0;
+  .bar {
+    transform: translateY(-50%);
+    top: 50%;
+  }
+}
+
+i.close.icon, a {
+  cursor: pointer;
+}

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

@@ -0,0 +1,56 @@
+import { ChangeDetectorRef, Component } from '@angular/core'
+
+import { DownloadProgress } from '../../../../../electron/shared/interfaces/download.interface'
+import { DownloadService } from '../../../../core/services/download.service'
+import { ElectronService } from '../../../../core/services/electron.service'
+
+@Component({
+	selector: 'app-downloads-modal',
+	templateUrl: './downloads-modal.component.html',
+	styleUrls: ['./downloads-modal.component.scss'],
+})
+export class DownloadsModalComponent {
+
+	downloads: DownloadProgress[] = []
+
+	constructor(private electronService: ElectronService, private downloadService: DownloadService, ref: ChangeDetectorRef) {
+		electronService.receiveIPC('queue-updated', order => {
+			this.downloads.sort((a, b) => order.indexOf(a.versionID) - order.indexOf(b.versionID))
+		})
+
+		downloadService.onDownloadUpdated(download => {
+			const index = this.downloads.findIndex(thisDownload => thisDownload.versionID == download.versionID)
+			if (download.type == 'cancel') {
+				this.downloads = this.downloads.filter(thisDownload => thisDownload.versionID != download.versionID)
+			} else if (index == -1) {
+				this.downloads.push(download)
+			} else {
+				this.downloads[index] = download
+			}
+			ref.detectChanges()
+		})
+	}
+
+	trackByVersionID(_index: number, item: DownloadProgress) {
+		return item.versionID
+	}
+
+	cancelDownload(versionID: number) {
+		this.downloadService.cancelDownload(versionID)
+	}
+
+	retryDownload(versionID: number) {
+		this.downloadService.retryDownload(versionID)
+	}
+
+	getBackgroundColor(download: DownloadProgress) {
+		switch (download.type) {
+			case 'error': return '#a63a3a'
+			default: return undefined
+		}
+	}
+
+	openFolder(filepath: string) {
+		this.electronService.showFolder(filepath)
+	}
+}

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

@@ -0,0 +1,44 @@
+<div id="bottomMenu" class="ui bottom borderless menu">
+	<div *ngIf="resultCount > 0" class="item">{{ resultCount }}{{ allResultsVisible ? '' : '+' }} Result{{ resultCount === 1 ? '' : 's' }}</div>
+	<div class="item">
+		<button *ngIf="selectedResults.length > 1" (click)="downloadSelected()" class="ui positive button">
+			Download {{ selectedResults.length }} Results
+		</button>
+	</div>
+	<a *ngIf="downloading" class="item right" (click)="showDownloads()">
+		<div #progressBar appProgressBar [percent]="percent" class="ui progress" [style.background-color]="error ? 'indianred' : undefined">
+			<div class="bar">
+				<div class="progress"></div>
+			</div>
+		</div>
+	</a>
+
+	<div id="selectedModal" class="ui modal">
+		<div class="header">Some selected songs have more than one chart!</div>
+		<div class="scrolling content">
+			<div class="ui segments">
+				<div class="ui segment" *ngFor="let chartGroup of chartGroups">
+					<p *ngFor="let chart of chartGroup">
+						{{ chart.chartName }} <b>[{{ chart.charters }}]</b>
+					</p>
+				</div>
+			</div>
+		</div>
+		<div class="actions">
+			<div class="ui approve button" (click)="downloadAllCharts()">Download all charts for each song</div>
+			<div class="ui cancel button" (click)="deselectSongsWithMultipleCharts()">Deselect these songs</div>
+			<div class="ui cancel button">Cancel</div>
+		</div>
+	</div>
+
+	<div id="downloadsModal" class="ui modal">
+		<i class="inside close icon"></i>
+		<div class="header">
+			<span>Downloads</span>
+			<div *ngIf="multipleCompleted" class="ui positive compact button" (click)="clearCompleted()">Clear completed</div>
+		</div>
+		<div class="scrolling content">
+			<app-downloads-modal></app-downloads-modal>
+		</div>
+	</div>
+</div>

src-angular/app/components/browse/status-bar/status-bar.component.scss

@@ -0,0 +1,23 @@
+.ui.progress {
+  margin: 0;
+  min-width: 200px;
+}
+
+#bottomMenu {
+  border-radius: 0px;
+  border-width: 1px 0px 0px 0px;
+}
+
+#downloadsModal {
+  .header {
+    display: flex;
+
+    span {
+      flex-grow: 1;
+    }
+
+    .ui.positive.button {
+      margin-right: 30px;
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+import { ChangeDetectorRef, Component } from '@angular/core'
+
+import { VersionResult } from '../../../../electron/shared/interfaces/songDetails.interface'
+import { groupBy } from '../../../../electron/shared/UtilFunctions'
+import { DownloadService } from '../../../core/services/download.service'
+import { ElectronService } from '../../../core/services/electron.service'
+import { SearchService } from '../../../core/services/search.service'
+import { SelectionService } from '../../../core/services/selection.service'
+
+@Component({
+	selector: 'app-status-bar',
+	templateUrl: './status-bar.component.html',
+	styleUrls: ['./status-bar.component.scss'],
+})
+export class StatusBarComponent {
+
+	resultCount = 0
+	multipleCompleted = false
+	downloading = false
+	error = false
+	percent = 0
+	batchResults: VersionResult[]
+	chartGroups: VersionResult[][]
+
+	constructor(
+		private electronService: ElectronService,
+		private downloadService: DownloadService,
+		private searchService: SearchService,
+		private selectionService: SelectionService,
+		ref: ChangeDetectorRef
+	) {
+		downloadService.onDownloadUpdated(() => {
+			setTimeout(() => { // Make sure this is the last callback executed to get the accurate downloadCount
+				this.downloading = downloadService.downloadCount > 0
+				this.multipleCompleted = downloadService.completedCount > 1
+				this.percent = downloadService.totalDownloadingPercent
+				this.error = downloadService.anyErrorsExist
+				ref.detectChanges()
+			}, 0)
+		})
+
+		searchService.onSearchChanged(() => {
+			this.resultCount = searchService.resultCount
+		})
+	}
+
+	get allResultsVisible() {
+		return this.searchService.allResultsVisible
+	}
+
+	get selectedResults() {
+		return this.selectionService.getSelectedResults()
+	}
+
+	showDownloads() {
+		$('#downloadsModal').modal('show')
+	}
+
+	async downloadSelected() {
+		this.chartGroups = []
+		this.batchResults = await this.electronService.invoke('batch-song-details', this.selectedResults.map(result => result.id))
+		const versionGroups = groupBy(this.batchResults, 'songID')
+		for (const versionGroup of versionGroups) {
+			if (versionGroup.findIndex(version => version.chartID != versionGroup[0].chartID) != -1) {
+				// Must have multiple charts of this song
+				this.chartGroups.push(versionGroup.filter(version => version.versionID == version.latestVersionID))
+			}
+		}
+
+		if (this.chartGroups.length == 0) {
+			for (const versions of versionGroups) {
+				this.searchService.sortChart(versions)
+				const downloadVersion = versions[0]
+				const downloadSong = this.selectedResults.find(song => song.id == downloadVersion.songID)
+				this.downloadService.addDownload(
+					downloadVersion.versionID, {
+					chartName: downloadVersion.chartName,
+					artist: downloadSong.artist,
+					charter: downloadVersion.charters,
+					driveData: downloadVersion.driveData,
+				})
+			}
+		} else {
+			$('#selectedModal').modal('show')
+			// [download all charts for each song] [deselect these songs] [X]
+		}
+	}
+
+	downloadAllCharts() {
+		const songChartGroups = groupBy(this.batchResults, 'songID', 'chartID')
+		for (const chart of songChartGroups) {
+			this.searchService.sortChart(chart)
+			const downloadVersion = chart[0]
+			const downloadSong = this.selectedResults.find(song => song.id == downloadVersion.songID)
+			this.downloadService.addDownload(
+				downloadVersion.versionID, {
+				chartName: downloadVersion.chartName,
+				artist: downloadSong.artist,
+				charter: downloadVersion.charters,
+				driveData: downloadVersion.driveData,
+			}
+			)
+		}
+	}
+
+	deselectSongsWithMultipleCharts() {
+		for (const chartGroup of this.chartGroups) {
+			this.selectionService.deselectSong(chartGroup[0].songID)
+		}
+	}
+
+	clearCompleted() {
+		this.downloadService.cancelCompleted()
+	}
+}