feat(queue): show further information about the service providers

src/app/components/proceedings/proceedings.component.css

@@ -230,4 +230,18 @@ table thead tr th:hover {
     margin-top: 5px;
     margin-bottom: 5px;
     cursor: pointer;
+}
+
+.operation-tooltip .arrow {
+    color: skyblue !important;
+    border-color: skyblue !important;
+}
+
+.operation-tooltip .tooltip-inner {
+    background-color: skyblue !important;
+    color: black !important;
+}
+
+.operation-tooltip #ngb-tooltip-0 {
+    width: 200px !important;
 }

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

@@ -100,7 +100,7 @@ <h4>Start Processing</h4>
                     </div>
                     <div class="service-remarks">
                         <ul>
-                            <li>The processing time is dependent on the service provider.</li>
+                            <li>The processing time dependents on the service provider.</li>
                             <li>As soon as the service has finished processing the result appears here.</li>
                             <li>{{popover.operation.providerInformation.dataStoragePolicy}}</li>
                         </ul>

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

@@ -1,15 +1,47 @@
-table tr td,
-.table thead th,
-.table thead th div {
+#queue tr td,
+#queue thead th,
+#queue thead th div {
     text-align: center;
     font-size: 0.9em;
 }
 
-.table tr td:first-of-type,
-.table thead th:first-of-type {
+#queue tr td:first-of-type,
+#queue thead th:first-of-type {
     text-align: left;
 }
 
-.table thead th {
+#queue thead th {
     vertical-align: top;
+}
+
+.languageTable thead th {
+    text-align: center;
+    font-size: 0.8em;
+    vertical-align: middle;
+}
+
+.languageTable .selected {
+    background-color: powderblue;
+}
+
+.languageTable tr td {
+    font-size: 0.8em;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+.languageTable .logo {
+    width: 120px;
+}
+
+.languageTable a {
+    display: block;
+}
+
+.popover-header{
+    font-size: 0.9em;
+}
+
+ngb-tooltip-window {
+    opacity: 1;
 }

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

@@ -9,12 +9,17 @@ <h4 class="modal-title">Queue</h4>
         </button>
     </div>
     <div class="modal-body" (drop)="cancelEvent($event)" (dragover)="cancelEvent($event)">
-        <p>
+        <p style="font-size: 0.9em;text-align: justify;margin-bottom:0px;">
             The following files are going to be processed one after the other. Please check if all options are set as
-            you wish.
-            Click "OK" to mark the files for further processing.
+            you wish. While you are selecting the language you can click on the logos of the service providers for
+            further information like data storage policy and terms and
+            conditions.
         </p>
-        <p *ngIf="orangeCount > 0" class="yellow" style="text-align: center;">
+        <p style="font-size: 0.9em;text-align: justify;margin-top:5px;">
+            When you click "OK" you agree with the terms and conditions of the selected (third-party) services and the
+            files are marked for further processing.
+        </p>
+        <p *ngIf="orangeCount > 0" class="yellow" style="text-align: center; font-size:0.9em;">
             Please add the files with orange file names again. Otherwise these files will be
             skipped.
         </p>
@@ -24,32 +29,131 @@ <h4 class="modal-title">Queue</h4>
             <button class="btn btn-outline-secondary" id="dropdownBasic1" ngbDropdownToggle>
                 <ng-container *ngIf="taskService.selectedlanguage === null">
                     {{AppSettings.configuration.api.languages[0].code | uppercase}}
-                    ({{getShortCode(AppSettings.configuration.api.languages[0].code)}}) [{{AppSettings.configuration.api.languages[0].asr}}]
+                    ({{getShortCode(AppSettings.configuration.api.languages[0].code)}})
+                    [{{AppSettings.configuration.api.languages[0].asr}}]
                 </ng-container>
                 <ng-container *ngIf="taskService.selectedlanguage !== null">
                     {{taskService.selectedlanguage.name}} ({{getShortCode(taskService.selectedlanguage.code)}})
                     [{{taskService.selectedlanguage.asr}}]
                 </ng-container>
             </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-                <ng-container *ngFor="let lang of AppSettings.configuration.api.languages; let i = index;">
-                    <button class="dropdown-item" *ngIf="lang.state === 'active'"
-                            (click)="onASRLangChanged(lang)">
-                        <ng-container
-                                *ngIf="!(taskService.selectedlanguage === null && i === 0) && (taskService.selectedlanguage !== lang.code)">
-                            {{lang.name}} ({{getShortCode(lang.code)}}) [{{lang.asr}}]
-                        </ng-container>
-                    </button>
-                    <button class="dropdown-item disabled" disabled="disabled" *ngIf="lang.state === 'inactive'">
-                        <ng-container
-                                *ngIf="!(taskService.selectedlanguage === null && i === 0) && (taskService.selectedlanguage !== lang.code)">
-                            {{lang.name}} ({{getShortCode(lang.code)}}) [{{lang.asr}}] (currently not available)
-                        </ng-container>
-                    </button>
-                </ng-container>
+            <div ngbDropdownMenu aria-labelledby="dropdownBasic1" style="padding:5px;">
+                <table class="table table-hover languageTable">
+                    <thead>
+                    <tr>
+                        <th>Language</th>
+                        <th>Upload</th>
+                        <th>Speech Recognition</th>
+                        <th>Manual transcription, Word alignment, Phonetic detail</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <ng-container *ngFor="let lang of AppSettings.configuration.api.languages; let i = index;">
+                        <tr [ngClass]="{
+                            selected:  !(taskService.selectedlanguage === null)
+                                        && (taskService.selectedlanguage.code === lang.code)
+                                        && (taskService.selectedlanguage.asr === lang.asr)
+                            }"
+                            (click)="onASRLangChanged(lang)"
+                        >
+                            <td class="col-language">
+                                <ng-container
+                                        *ngIf="lang !== undefined && lang.state === 'active'">
+                                    {{lang.name}} ({{getShortCode(lang.code)}}) [{{lang.asr}}]
+                                </ng-container>
+                                <ng-container
+                                        *ngIf="lang !== undefined && lang.state === 'inactive'">
+                                    {{lang.name}} ({{getShortCode(lang.code)}}) [{{lang.asr}}] (currently not
+                                    available)
+                                </ng-container>
+                            </td>
+                            <td class="col-upload">
+                                <img [src]="serviceProviders['BAS']?.logoURL" class="logo"
+                                     popoverTitle="Service Information"
+                                     popoverClass="popover-logo"
+                                     [ngbPopover]="otherDescription">
+                            </td>
+                            <td class="col-asr">
+                                <img [src]="serviceProviders[lang.asr]?.logoURL" class="logo"
+                                     popoverTitle="Service Information"
+                                     [ngbPopover]="asrDescription">
+                                <ng-template #asrDescription>
+                                    <table class="table table-sm table-borderless">
+                                        <tbody>
+                                        <tr>
+                                            <td>
+                                                <i class="fa fa-database"></i>
+                                            </td>
+                                            <td>
+                                                {{serviceProviders[lang.asr]?.dataStoragePolicy}}
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <i class="fa fa-handshake-o"></i>
+                                            </td>
+                                            <td>
+                                                <a [href]="serviceProviders[lang.asr]?.termsURL" target="_blank">Terms
+                                                    &amp; Conditions</a>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <i class="fa fa-globe"></i>
+                                            </td>
+                                            <td>
+                                                <a [href]="serviceProviders[lang.asr]?.homepageURL" target="_blank">Homepage</a>
+                                            </td>
+                                        </tr>
+                                        </tbody>
+                                    </table>
+                                </ng-template>
+                            </td>
+                            <td class="col-octra" style="text-align: center;">
+                                <img [src]="serviceProviders['BAS']?.logoURL" class="logo"
+                                     popoverTitle="Service Information"
+                                     popoverClass="popover-logo"
+                                     [ngbPopover]="otherDescription">
+                            </td>
+                            <ng-template #otherDescription>
+                                <table class="table table-sm table-borderless">
+                                    <tbody>
+                                    <tr>
+                                        <td>
+                                            <i class="fa fa-database"></i>
+                                        </td>
+                                        <td>
+                                            {{serviceProviders['BAS']?.dataStoragePolicy}}
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <i class="fa fa-handshake-o"></i>
+                                        </td>
+                                        <td>
+                                            <a [href]="serviceProviders['BAS']?.termsURL" target="_blank">Terms &amp;
+                                                Conditions</a>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <i class="fa fa-globe"></i>
+                                        </td>
+                                        <td>
+                                            <a [href]="serviceProviders['BAS']?.homepageURL"
+                                               target="_blank">Homepage</a>
+                                        </td>
+                                    </tr>
+                                    </tbody>
+                                </table>
+                            </ng-template>
+                        </tr>
+                    </ng-container>
+                    </tbody>
+                </table>
             </div>
         </div>
-        <table class="table table-responsive-lg table-striped">
+        <table class="table table-responsive-lg table-striped" id="queue">
             <thead>
             <tr>
                 <th>File</th>

src/app/modals/queue-modal/queue-modal.component.ts

@@ -1,4 +1,12 @@
-import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
 import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';
 import {Task, TaskState} from '../../obj/tasks';
@@ -15,7 +23,9 @@ import {OHLanguageObject} from '../../obj/oh-config';
 @Component({
   selector: 'app-queue-modal',
   templateUrl: './queue-modal.component.html',
-  styleUrls: ['./queue-modal.component.css']
+  styleUrls: ['./queue-modal.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class QueueModalComponent implements OnInit {
   @ViewChild('content', {static: true}) content: NgbModal;
@@ -29,8 +39,15 @@ export class QueueModalComponent implements OnInit {
     return AppSettings;
   }
 
+  public serviceProviders = {};
+
   constructor(private modalService: NgbModal, private sanitizer: DomSanitizer,
-              private taskService: TaskService, private storage: StorageService) {
+              private taskService: TaskService, private storage: StorageService,
+              private cd: ChangeDetectorRef) {
+    for (let i = 0; i < AppSettings.configuration.api.services.length; i++) {
+      const provider = AppSettings.configuration.api.services[i];
+      this.serviceProviders['' + provider.provider] = provider;
+    }
   }
 
   ngOnInit() {
@@ -62,6 +79,8 @@ export class QueueModalComponent implements OnInit {
     }
     this.modalRef.dismiss();
     this.onDismiss();
+    this.cd.markForCheck();
+    this.cd.detectChanges();
   }
 
   public get orangeCount(): number {
@@ -104,6 +123,9 @@ export class QueueModalComponent implements OnInit {
       language: this.taskService.selectedlanguage.code,
       asr: this.taskService.selectedlanguage.asr
     });
+
+    this.cd.markForCheck();
+    this.cd.detectChanges();
   }
 
   deactivateOperation(operation: Operation, index: number) {
@@ -175,6 +197,9 @@ export class QueueModalComponent implements OnInit {
     }
 
     this.updateEnableState();
+
+    this.cd.markForCheck();
+    this.cd.detectChanges();
   }
 
   public updateEnableState() {

src/app/obj/operations/asr-operation.ts

@@ -61,8 +61,8 @@ export class ASROperation extends Operation {
     result.enabled = operationObj.enabled;
     result.webService = operationObj.webService;
 
-    if (!(operationObj.serviceProvider === null || operationObj.serviceProvider === undefined)) {
-      result._providerInformation = AppSettings.getServiceInformation(operationObj.serviceProvider);
+    if (!(operationObj.serviceProviders === null || operationObj.serviceProviders === undefined)) {
+      result._providerInformation = AppSettings.getServiceInformation(operationObj.serviceProviders);
     } else {
       result._providerInformation = AppSettings.getServiceInformation(operationObj.webService.replace('ASR', ''));
       console.log(operationObj.webService);

src/app/obj/operations/upload-operation.ts

@@ -3,7 +3,7 @@ import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 import {TimePipe} from '../../shared/time.pipe';
 import {FileInfo} from '../fileInfo';
 import {Operation} from './operation';
-import {Task, TaskState} from '../tasks/task';
+import {Task, TaskState} from '../tasks';
 import * as X2JS from 'x2js';
 import {Subject} from 'rxjs';
 import {OHLanguageObject} from '../oh-config';
@@ -55,7 +55,7 @@ export class UploadOperation extends Operation {
       }
       subj.next({
         type: 'progress',
-        result: <any> progress
+        result: <any>progress
       });
     }, false);
 
@@ -66,7 +66,7 @@ export class UploadOperation extends Operation {
     xhr.onloadend = (e) => {
       subj.next({
         type: 'loadend',
-        result: <any> e.currentTarget['responseText']
+        result: <any>e.currentTarget['responseText']
       });
       subj.complete();
     };
@@ -97,13 +97,13 @@ export class UploadOperation extends Operation {
 
     subj.subscribe((obj) => {
       if (obj.type === 'progress') {
-        this.progress = <number> obj.result;
+        this.progress = <number>obj.result;
         this.updateEstimatedEnd();
         this.changed.next();
       } else if (obj.type === 'loadend') {
 
         this.time.duration = Date.now() - this.time.start;
-        const result = <string> obj.result;
+        const result = <string>obj.result;
         const x2js = new X2JS();
         let json: any = x2js.xml2js(result);
         json = json.UploadFileMultiResponse;