changeset 100:bf8826d4e2c6

Use @angular/material select component.
author Lucas Thompson <dev@lucas.im>
date Thu, 02 Mar 2017 15:06:24 +0000
parents c702b208a527
children d5256e8309ab
files src/app/feature-extraction-menu/feature-extraction-menu.component.css src/app/feature-extraction-menu/feature-extraction-menu.component.html src/app/feature-extraction-menu/feature-extraction-menu.component.ts
diffstat 3 files changed, 31 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/src/app/feature-extraction-menu/feature-extraction-menu.component.css	Thu Mar 02 13:33:33 2017 +0000
+++ b/src/app/feature-extraction-menu/feature-extraction-menu.component.css	Thu Mar 02 15:06:24 2017 +0000
@@ -3,3 +3,8 @@
   display: block;
   margin: 0 auto;
 }
+
+.container {
+  margin-top: 10pt;
+  padding: 10pt;
+}
--- a/src/app/feature-extraction-menu/feature-extraction-menu.component.html	Thu Mar 02 13:33:33 2017 +0000
+++ b/src/app/feature-extraction-menu/feature-extraction-menu.component.html	Thu Mar 02 15:06:24 2017 +0000
@@ -1,16 +1,21 @@
-<select id="extractor-outputs" #extractorOutputs>
-  <option selected></option>
-  <option *ngFor="let extractor of extractors" value="{{extractor.combinedKey}}">
-    {{extractor.name}}
-  </option>
-</select>
-<p>
-  <button md-raised-button
-          color="primary"
-          (click)="extract(extractorOutputs.value)"
-          [disabled]="disabled">Extract</button>
-</p>
-<p>
-  <button md-raised-button
-          (click)="load()">Load Remote Plugins</button>
-</p>
+<div class="container">
+  <md-select #extractorSelect
+    placeholder="Extractors">
+    <md-option
+      *ngFor="let extractor of extractors"
+      [value]="extractor.combinedKey"
+    >
+      {{extractor.name}}
+    </md-option>
+  </md-select>
+  <p>
+    <button md-raised-button
+            color="primary"
+            (click)="extract(extractorSelect.selected.value)"
+            [disabled]="disabled">Extract</button>
+  </p>
+  <p>
+    <button md-raised-button
+            (click)="load()">Load Remote Plugins</button>
+  </p>
+</div>
--- a/src/app/feature-extraction-menu/feature-extraction-menu.component.ts	Thu Mar 02 13:33:33 2017 +0000
+++ b/src/app/feature-extraction-menu/feature-extraction-menu.component.ts	Thu Mar 02 15:06:24 2017 +0000
@@ -70,7 +70,11 @@
   }
 
   extract(combinedKey: string): void {
-    this.requestOutput.emit(this.extractorsMap.get(combinedKey));
+    const info: ExtractorOutputInfo =
+      this.extractorsMap.get(combinedKey);
+    if (info) {
+      this.requestOutput.emit(info);
+    }
   }
 
   load(): void {