changeset 224:1c1cc4ec183c

Setup analysis-item to display determinate spinner if progress prop provided when declared.

--- a/src/app/analysis-item/analysis-item.component.html	Fri Apr 21 12:18:22 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.html	Fri Apr 21 12:55:24 2017 +0100
@@ -4,13 +4,21 @@
     <md-card-subtitle>{{description}}</md-card-subtitle>
   </md-card-header>
   <md-card-content>
-    <app-waveform
-      [timeline]="timeline"
-      [trackIdPrefix]=" id || title"
-      [isSubscribedToAudioService]="isActive && isRoot"
-      [isSubscribedToExtractionService]="isActive && !isRoot"
-      [isOneShotExtractor]="true"
-      [isSeeking]="isActive"
-    ></app-waveform>
+    <template [ngIf]="isLoading()">
+      <ugly-progress-spinner
+        [isDeterminate]="true"
+        [progress]="progress"
+      ></ugly-progress-spinner>
+    </template>
+    <template [ngIf]="!isLoading()">
+      <app-waveform
+        [timeline]="timeline"
+        [trackIdPrefix]=" id || title"
+        [isSubscribedToAudioService]="isActive && isRoot"
+        [isSubscribedToExtractionService]="isActive && !isRoot"
+        [isOneShotExtractor]="true"
+        [isSeeking]="isActive"
+      ></app-waveform>
+    </template>
   </md-card-content>
 </md-card>

--- a/src/app/analysis-item/analysis-item.component.ts	Fri Apr 21 12:18:22 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.ts	Fri Apr 21 12:55:24 2017 +0100
@@ -1,7 +1,7 @@
 /**
  * Created by lucast on 21/03/2017.
  */
-import {Component, Input} from "@angular/core";
+import {Component, Input, OnInit} from "@angular/core";
 import Waves from 'waves-ui';
 
 export interface AnalysisItem {
@@ -12,6 +12,7 @@
   title?: string;
   description?: string;
   id?: string;
+  progress?: number;
 }
 
 @Component({
@@ -19,11 +20,22 @@
   templateUrl: './analysis-item.component.html',
   styleUrls: ['./analysis-item.component.css']
 })
-export class AnalysisItemComponent {
+export class AnalysisItemComponent implements OnInit {
+
   @Input() timeline: Timeline;
   @Input() title: string;
   @Input() description: string;
   @Input() isActive: boolean;
   @Input() isRoot: boolean;
   @Input() id: string;
+  @Input() progress: number;
+  private hasProgressOnInit = false;
+
+  ngOnInit(): void {
+    this.hasProgressOnInit = this.progress != null;
+  }
+
+  isLoading(): boolean {
+    return this.hasProgressOnInit && this.progress < 100;
+  }
 }

--- a/src/app/notebook-feed/notebook-feed.component.html	Fri Apr 21 12:18:22 2017 +0100
+++ b/src/app/notebook-feed/notebook-feed.component.html	Fri Apr 21 12:55:24 2017 +0100
@@ -1,12 +1,14 @@
 
 <template ngFor let-item [ngForOf]="analyses">
   <div [class.break]="item.isRoot">
-      <ugly-analysis-item
-        [timeline]="item.hasSharedTimeline ? sharedTimeline : undefined"
-        [title]="item.title"
-        [description]="item.description"
-        [isActive]="rootAudioUri === item.rootAudioUri"
-        [isRoot]="item.isRoot"
-        [id]="item.id"></ugly-analysis-item>
+    <ugly-analysis-item
+      [timeline]="item.hasSharedTimeline ? sharedTimeline : undefined"
+      [title]="item.title"
+      [description]="item.description"
+      [isActive]="rootAudioUri === item.rootAudioUri"
+      [isRoot]="item.isRoot"
+      [id]="item.id"
+      [progress]="item.progress"
+    ></ugly-analysis-item>
   </div>
 </template>

--- a/src/app/progress-spinner/progress-spinner.component.ts	Fri Apr 21 12:18:22 2017 +0100
+++ b/src/app/progress-spinner/progress-spinner.component.ts	Fri Apr 21 12:55:24 2017 +0100
@@ -10,7 +10,9 @@
     <div class="container" [hidden]="!isVisible">
       <md-spinner
         class="spinner"
-        color="primary"
+        [attr.color]="'primary'"
+        [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
+        [value]="currentProcess"
       ></md-spinner>
     </div>
   `,
@@ -22,7 +24,7 @@
       top: calc(50% - 20px);
       left: calc(50% - 20px);
     }
-    
+
     .spinner {
       width: 100%;
       height: 100%;
@@ -30,5 +32,18 @@
   `]
 })
 export class ProgressSpinnerComponent {
+  private currentProcess: number = 0;
+
   @Input() isVisible: boolean = true;
+  @Input() isDeterminate: boolean = false;
+  @Input()
+  set progress(value: number) {
+    if (value < 0) {
+      this.currentProcess = 0;
+    } else if (value > 100) {
+      this.currentProcess = 100;
+    } else {
+      this.currentProcess = value;
+    }
+  }
 }