began to improve download modal ref #5, #30

src/app/app.module.ts

@@ -29,6 +29,7 @@ import {ProtocolFooterComponent} from './components/protocol-footer/protocol-foo
 import {FilePreviewModalComponent} from './modals/file-preview-modal/file-preview-modal.component';
 import {AlertComponent} from './components/alert/alert.component';
 import {AlertService} from './shared/alert.service';
+import {DownloadModalComponent} from './modals/download-modal/download-modal.component';
 
 @NgModule({
   declarations: [
@@ -49,7 +50,8 @@ import {AlertService} from './shared/alert.service';
     QueueModalComponent,
     ProtocolFooterComponent,
     FilePreviewModalComponent,
-    AlertComponent
+    AlertComponent,
+    DownloadModalComponent
   ],
   imports: [
     BrowserModule,

src/app/components/proceedings/context-menu/context-menu.component.html

@@ -1,19 +1,25 @@
 <table class="table table-hover">
     <tbody>
-    <tr *ngIf="filesCount > 0 || dirCount > 0" (click)="onDeleteTasks()">
-        <td><i class="fa fa-times"></i></td>
-        <td>
-            <ng-container *ngIf="filesCount > 0 && dirCount < 1">
-                Delete {{filesCount}} task(s)
-            </ng-container>
-            <ng-container *ngIf="dirCount > 0 && filesCount < 1">
-                Delete {{dirCount}} folder(s)
-            </ng-container>
-            <ng-container *ngIf="dirCount > 0 && filesCount > 0">
-                Delete {{filesCount}} task(s) and {{dirCount}} folder(s)
-            </ng-container>
-        </td>
-    </tr>
+    <ng-container *ngIf="filesCount > 0 || dirCount > 0">
+        <tr (click)="onAction('delete')">
+            <td><i class="fa fa-times"></i></td>
+            <td>
+                <ng-container *ngIf="filesCount > 0 && dirCount < 1">
+                    Delete {{filesCount}} task(s)
+                </ng-container>
+                <ng-container *ngIf="dirCount > 0 && filesCount < 1">
+                    Delete {{dirCount}} folder(s)
+                </ng-container>
+                <ng-container *ngIf="dirCount > 0 && filesCount > 0">
+                    Delete {{filesCount}} task(s) and {{dirCount}} folder(s)
+                </ng-container>
+            </td>
+        </tr>
+        <tr (click)="onAction('download')">
+            <td><i class="fa fa-download"></i></td>
+            <td>Download results</td>
+        </tr>
+    </ng-container>
     <tr *ngIf="selected_tasks.length > 0">
         <td></td>
         <td (click)="onRemoveAppendings()">Remove appendings</td>

src/app/components/proceedings/context-menu/context-menu.component.ts

@@ -21,8 +21,8 @@ export class ContextMenuComponent implements OnInit {
   ngOnInit() {
   }
 
-  onDeleteTasks() {
-    this.optionselected.emit('delete');
+  onAction(action: string) {
+    this.optionselected.emit(action);
     this.hid = true;
   }
 

src/app/components/proceedings/proceedings.component.html

@@ -1,17 +1,4 @@
-<ng-template #content let-c="close" let-d="dismiss">
-    <div class="modal-header">
-        <h4 class="modal-title">Download Archive</h4>
-        <button type="button" class="close" aria-label="Close" (click)="d()">
-            <span aria-hidden="true">&times;</span>
-        </button>
-    </div>
-    <div class="modal-body">
-        <p><a [href]="archiveURL">Download Archive</a></p>
-    </div>
-    <div class="modal-footer">
-        <button type="button" class="btn btn-outline-dark" (click)="c()">Close</button>
-    </div>
-</ng-template>
+<app-download-modal #content [selectedTasks]="selected_tasks" [column]="selectedOperation"></app-download-modal>
 
 <app-file-preview-modal #filePreview></app-file-preview-modal>
 
@@ -112,7 +99,7 @@ <h4 class="modal-title">Download Archive</h4>
                     <th>
                         <div>
                 <span *ngIf="operation.icon === ''; else showIcon" style="display:block;"
-                      (click)="openContentModal(operation)">
+                      (click)="openArchiveDownload('column', operation)">
                     <ng-container *ngIf="shortstyle">
                         {{operation.name.charAt(0)}}
                     </ng-container>
@@ -121,7 +108,8 @@ <h4 class="modal-title">Download Archive</h4>
                     </ng-container>
                 </span>
                             <ng-template #showIcon>
-                                <div [innerHTML]="operation.icon" (click)="openContentModal(operation)"></div>
+                                <div [innerHTML]="operation.icon"
+                                     (click)="openArchiveDownload('column', operation)"></div>
                             </ng-template>
                             <input *ngIf="operation.name === 'OCTRA' || operation.name === 'ASR'" type="checkbox"
                                    class="header-checkbox"

src/app/components/proceedings/proceedings.component.ts

@@ -11,28 +11,25 @@ import {
   ViewChild
 } from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
-import {isArray, isNullOrUndefined} from 'util';
+import {isNullOrUndefined} from 'util';
 import {ANIMATIONS} from '../../shared/Animations';
 
 import {PopoverComponent} from '../popover/popover.component';
 import {Task, TaskDirectory, TaskList, TaskState} from '../../obj/tasks';
 import {UploadOperation} from '../../obj/tasks/upload-operation';
 import {HttpClient} from '@angular/common/http';
-import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {FileInfo} from '../../obj/fileInfo';
 import {TaskService} from '../../obj/tasks/task.service';
 import {DirectoryInfo} from '../../obj/directoryInfo';
 import {OCTRAOperation} from '../../obj/tasks/octra-operation';
-import * as moment from 'moment';
 import {StorageService} from '../../storage.service';
 import {Operation} from '../../obj/tasks/operation';
 import {ToolOperation} from '../../obj/tasks/tool-operation';
 import {EmuOperation} from '../../obj/tasks/emu-operation';
 import {ASROperation} from '../../obj/tasks/asr-operation';
 import {QueueItem} from '../../obj/preprocessor';
 import {FilePreviewModalComponent} from '../../modals/file-preview-modal/file-preview-modal.component';
-import {AppInfo} from '../../app.info';
-import * as X2JS from 'x2js';
+import {DownloadModalComponent} from '../../modals/download-modal/download-modal.component';
 
 declare var window: any;
 
@@ -87,15 +84,15 @@ export class ProceedingsComponent implements OnInit, OnDestroy {
   @Output() public afterdrop: EventEmitter<(FileInfo | DirectoryInfo)[]> = new EventEmitter<(FileInfo | DirectoryInfo)[]>();
   @Output() public operationclick: EventEmitter<Operation> = new EventEmitter<Operation>();
   @Output() public operationhover: EventEmitter<Operation> = new EventEmitter<Operation>();
-  @ViewChild('content') content;
+  @ViewChild('content') content: DownloadModalComponent;
 
   @ViewChild('popoverRef') public popoverRef: PopoverComponent;
   @ViewChild('filePreview') public filePreview: FilePreviewModalComponent;
 
   public selectedOperation: Operation;
 
   constructor(public sanitizer: DomSanitizer, private cd: ChangeDetectorRef, public taskService: TaskService, private http: HttpClient,
-              private modalService: NgbModal, public storage: StorageService) {
+              public storage: StorageService) {
     // Check for the various FileInfo API support.
     if (window.File && window.FileReader && window.FileList && window.Blob) {
       this.fileAPIsupported = true;
@@ -274,134 +271,16 @@ export class ProceedingsComponent implements OnInit, OnDestroy {
 
 
   onContextMenuOptionSelected(option: String) {
-
     if (option === 'delete') {
       this.deleteSelectedTasks();
-    } else if (option === 'compress') {
-      this.contextmenu.hidden = false;
-      this.openContentModal(this.selectedOperation);
     } else if (option === 'appendings-remove') {
       this.removeAppendings();
+    } else if (option === 'download') {
+      this.openArchiveDownload('line', this.selectedOperation);
     }
     this.contextmenu.hidden = true;
   }
 
-  openContentModal(selectedOperation: Operation) {
-    if (!(selectedOperation instanceof UploadOperation || selectedOperation instanceof EmuOperation)) {
-      // prepare package
-      let dateStr = moment().format('YYYY-MM-DD_H-mm-ss');
-      let requestPackage = {
-        requestType: 'createArchieve',
-        data: {
-          archieveName: `${selectedOperation.name}Results_${dateStr}`,
-          files: []
-        }
-      };
-      let tasks = this.taskList.getAllTasks();
-
-      const promises: Promise<void>[] = [];
-
-      for (let i = 0; i < tasks.length; i++) {
-        const task = tasks[i];
-
-
-        const langObj = AppInfo.getLanguageByCode(task.language);
-        const url = `${langObj.host}uploadFileMulti`;
-
-        for (let i = 0; i < task.operations.length; i++) {
-          const operation = task.operations[i];
-
-          // TODO improve code!
-          if (operation.name === selectedOperation.name
-            && operation.results.length > 0
-          ) {
-            const result: FileInfo = operation.lastResult;
-            if (result.online) {
-              requestPackage.data.files.push({
-                name: result.fullname,
-                url: result.url
-              });
-            } else {
-              const promise = new Promise<void>((resolve, reject) => {
-                UploadOperation.upload([result], url, this.http).subscribe(
-                  (obj) => {
-                    if (obj) {
-                      if (obj.type === 'loadend') {
-                        const httpResult = <string> obj.result;
-                        const x2js = new X2JS();
-                        let json: any = x2js.xml2js(httpResult);
-                        json = json.UploadFileMultiResponse;
-
-
-                        // add messages to protocol
-                        if (json.warnings !== '') {
-                          console.warn(json.warnings);
-                        }
-
-                        if (json.success === 'true') {
-                          // TODO set urls to results only
-                          if (isArray(json.fileList.entry)) {
-                            result.url = json.fileList.entry[0].value;
-                          } else {
-                            // json attribute entry is an object
-                            result.url = json.fileList.entry['value'];
-                          }
-
-                          this.storage.saveTask(task);
-
-                          requestPackage.data.files.push({
-                            name: result.fullname,
-                            url: result.url
-                          });
-
-                          resolve();
-                        } else {
-                          reject(json['message']);
-                        }
-                      }
-                    }
-                  },
-                  (error) => {
-                    reject(error);
-                  }
-                );
-              });
-
-              promises.push(promise);
-            }
-            break;
-          }
-        }
-      }
-
-      new Promise<void>((resolve, reject) => {
-        if (promises.length === 0) {
-          resolve();
-        } else {
-          Promise.all(promises).then(() => {
-              resolve();
-            },
-            (error) => {
-              reject(error);
-            });
-        }
-      }).then(() => {
-        this.http.post('https://www.phonetik.uni-muenchen.de/apps/octra/zAPI/', requestPackage).subscribe(
-          (response: any) => {
-            this.archiveURL = response.result;
-            this.openArchiveDownlaod(this.content);
-          },
-          (error) => {
-            console.error(error);
-          }
-        );
-      }).catch((error) => {
-        console.error(error);
-      });
-
-    }
-  }
-
   removeAppendings() {
     for (let i = 0; i < this.selected_tasks.length; i++) {
       const entry = this.selected_tasks[i];
@@ -633,10 +512,9 @@ export class ProceedingsComponent implements OnInit, OnDestroy {
     this.operationclick.emit(operation);
   }
 
-  openArchiveDownlaod(content) {
-    this.modalService.open(content).result.then((result) => {
-      this.closeResult = `Closed with: ${result}`;
-    });
+  openArchiveDownload(type: 'column' | 'line', operation: Operation) {
+    this.selectedOperation = operation;
+    this.content.open(type);
   }
 
   @HostListener('window:keydown', ['$event'])

src/app/modals/download-modal/download-modal.component.css

@@ -0,0 +1,22 @@
+.conversion {
+    margin-right: 5px;
+    margin-bottom: 2px;
+    font-size: 0.9em;
+    display: inline;
+    background-color: whitesmoke;
+    padding: 3px;
+    float: left;
+    white-space: nowrap;
+}
+
+.conversion * {
+    cursor: pointer;
+}
+
+.conversion input {
+    margin-right: 3px;
+}
+
+.conversion label {
+    margin-bottom: 3px;
+}

src/app/modals/download-modal/download-modal.component.html

@@ -0,0 +1,30 @@
+<ng-template #content let-c="close" let-d="dismiss">
+    <div class="modal-header">
+        <h4 class="modal-title">Download results by {{type}}</h4>
+        <button type="button" class="close" aria-label="Close" (click)="d()">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body">
+        <p>Add conversions (optional):</p>
+        <div>
+            <ng-container *ngFor="let conversion of AppInfo.converters; let i = index">
+                <div class="conversion">
+                    <input class="conversion-check" [attr.id]="'check-' + i" type="checkbox"
+                           [name]="conversion.obj.name"/> <label [attr.for]="'check-' + i"> <i class="fa fa-file-text"
+                                                                                               [ngStyle]="{color: conversion.color}"></i>
+                    {{conversion.obj.name}} ({{conversion.obj.extension}})</label>
+                </div>
+            </ng-container>
+            <div class="clearfix"></div>
+        </div>
+        <ng-container *ngIf="type === 'line'">
+            <input type="checkbox" id="remove-check"/> <label style="margin-left:3px;" for="remove-check">remove
+            selected lines from table</label><br/><br/>
+        </ng-container>
+        <button class="btn btn-primary" style="width:100%;" (click)="process()">DOWNLOAD</button>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-outline-dark" (click)="c()">Close</button>
+    </div>
+</ng-template>

src/app/modals/download-modal/download-modal.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {DownloadModalComponent} from './download-modal.component';
+
+describe('DownloadModalComponent', () => {
+  let component: DownloadModalComponent;
+  let fixture: ComponentFixture<DownloadModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [DownloadModalComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DownloadModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});