initial commit: working version

ui/src/app/app.component.ts

@@ -0,0 +1,65 @@
+import { Component, ViewChild, ElementRef } from '@angular/core';
+import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
+
+import { DownloadsService, Status } from './downloads.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.sass']
+})
+export class AppComponent {
+  addUrl: string;
+  addInProgress = false;
+  faTrashAlt = faTrashAlt;
+  masterSelected: boolean;
+  @ViewChild('masterCheckbox', {static: false}) masterCheckbox: ElementRef;
+  @ViewChild('delSelected', {static: false}) delSelected: ElementRef;
+
+  constructor(private downloads: DownloadsService) {
+    this.downloads.dlChanges.subscribe(() => this.selectionChanged());
+  }
+
+  // workaround to allow fetching of Map values in the order they were inserted
+  //  https://github.com/angular/angular/issues/31420
+  asIsOrder(a, b) {
+    return 1;
+  }
+
+  checkUncheckAll() {
+    this.downloads.downloads.forEach(dl => dl.checked = this.masterSelected);
+    this.selectionChanged();
+  }
+
+  selectionChanged() {
+    if (!this.masterCheckbox)
+      return;
+    let checked: number = 0;
+    this.downloads.downloads.forEach(dl => { if(dl.checked) checked++ });
+    this.masterSelected = checked > 0 && checked == this.downloads.downloads.size;
+    this.masterCheckbox.nativeElement.indeterminate = checked > 0 && checked < this.downloads.downloads.size;
+    this.delSelected.nativeElement.disabled = checked == 0;
+  }
+
+  addDownload() {
+    this.addInProgress = true;
+    this.downloads.add(this.addUrl).subscribe((status: Status) => {
+      if (status.status === 'error') {
+        alert(`Error adding URL: ${status.msg}`);
+      } else {
+        this.addUrl = '';
+      }
+      this.addInProgress = false;
+    });
+  }
+
+  delDownload(id: string) {
+    this.downloads.del([id]).subscribe();
+  }
+
+  delSelectedDownloads() {
+    let ids: string[] = [];
+    this.downloads.downloads.forEach(dl => { if(dl.checked) ids.push(dl.id) });
+    this.downloads.del(ids).subscribe();
+  }
+}