--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/query-select.component.ts	Mon Mar 20 18:50:31 2017 +0100
@@ -0,0 +1,207 @@
+import {Component, Output, EventEmitter, OnInit} from '@angular/core';
+
+import {QueryMode} from './query-mode';
+import {QueryStep} from './query-step';
+import {QueryState} from './query-state';
+
+import {QueryService} from './query.service';
+import {NormalizationService} from './normalization.service';
+import {getRelationByName} from './ismi-relation-types';
+
+
+@Component({
+    selector: 'query-select',
+    template: `
+<p *ngIf="resultInfo">&nbsp;&nbsp;&nbsp;result: {{resultInfo}}</p>
+<div>
+    <form (ngSubmit)="onSubmit()">
+        <select name="mode" (change)="onSelectMode($event)">
+            <option></option>
+            <option *ngFor="let mode of getQueryModes()" [value]="mode.id">
+                {{mode.label}}
+            </option>
+        </select>
+
+        <span *ngIf="selectedMode?.id=='type_is'">
+            <select name="option" *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)">
+                <option></option>
+                <option *ngFor="let option of queryOptions" [value]="option">
+                    {{option}}
+                </option>
+            </select>
+        </span>
+
+        <span *ngIf="selectedMode?.id=='relation_is'">
+            <select name="option" *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)">
+                <option></option>
+                <option *ngFor="let option of queryOptions" [value]="option.getName()">
+                    {{option.getLabel()}}
+                </option>
+            </select>
+        </span>
+
+        <span *ngIf="selectedMode?.id=='att_contains' || selectedMode?.id=='att_contains_norm'">
+            <select name="option" [ngModel]="selectedOption" (change)="selectedOption=$event.target.value">
+                <option></option>
+                <option *ngFor="let option of queryOptions" [value]="option">
+                    {{option}}
+                </option>
+            </select>
+            <span>contains</span>
+            <input type="text" name="value" [(ngModel)]="queryInput"/>
+        </span>
+
+        <span *ngIf="selectedMode?.id=='att_num_range'">
+            <select name="option" [ngModel]="selectedOption" (change)="selectedOption=$event.target.value">
+                <option></option>
+                <option *ngFor="let option of queryOptions" [value]="option">
+                    {{option}}
+                </option>
+            </select>
+            <span>is between</span>
+            <input type="text" name="value1" [(ngModel)]="queryInput"/>
+            <span>and</span>
+            <input type="text" name="value2" [(ngModel)]="queryInput2"/>
+        </span>
+
+        <span *ngIf="selectedMode?.id=='id_is'">
+            <input type="text" name="value" [(ngModel)]="queryInput"/>
+        </span>
+
+        <button type="submit">Submit</button>
+    </form>
+</div>
+        `,
+    inputs: ['queryStep', 'index'],
+    outputs: ['queryChanged']
+})
+   
+export class QuerySelectComponent implements OnInit { 
+    public queryStep: string;
+    public index: number;
+    public resultInfo: string;
+    public queryModes: QueryMode[];
+    public selectedMode: QueryMode;
+    public queryOptions: string[];
+    public selectedOption: string;
+    public queryInput: string;
+    public queryInput2: string;
+    
+    // output queryChanged
+    public queryChanged: EventEmitter<QueryState> = new EventEmitter<QueryState>();
+    
+    constructor(private _queryService: QueryService, private _normService: NormalizationService) {}
+    
+    ngOnInit() {
+        this.setup();
+    }
+    
+    setup() {
+        console.log("query-select setup step=", this.queryStep);
+        var step = this._queryService.state.steps[this.index-1];
+        if (step != null) {
+            this.resultInfo = step.resultInfo;
+        }
+    }
+    
+    getQueryModes(): QueryMode[] {
+        this.queryModes = this._queryService.getQueryModes(this.index);
+        return this.queryModes;
+    }
+    
+    onSelectMode(event: any) {
+        var selected = event.target.value;
+        this.selectedMode = this.queryModes.find(mode => mode.id === selected);
+        this.queryOptions = this._queryService.getQueryOptions(this.selectedMode);
+    }
+    
+    onSelectOption(event: any) {
+        var selected = event.target.value;
+        console.debug("selected option:", selected);
+        this.selectedOption = selected;
+        this.onSubmit();
+    }
+    
+    onSubmit() {
+        console.debug("Submit! selectedMode=", this.selectedMode, " selectedOption=", this.selectedOption, " queryInput=", this.queryInput);
+        var step: QueryStep;
+        if (this.selectedMode.id == 'type_is') {
+            /*
+             * type_is
+             */
+            let opt = this.selectedOption;
+            if (opt) {
+                step = new QueryStep(this.selectedMode, {'objectType': opt});
+            }
+        } else if (this.selectedMode.id == 'relation_is') {
+            /*
+             * relation_is
+             */
+            let opt = this.selectedOption;
+            if (opt) {
+                let rel = getRelationByName(opt);
+                step = new QueryStep(this.selectedMode, {'relationType': rel});
+            }
+        } else if (this.selectedMode.id == 'id_is') {
+            /*
+             * id is
+             */
+            let val = this.queryInput;
+            if (val) {
+                step = new QueryStep(this.selectedMode, {'value': val});
+            }
+        } else if (this.selectedMode.id == 'att_contains') {
+            /*
+             * att_contains
+             */
+            let att = this.selectedOption;
+            let val = this.queryInput;
+            if (att && val) {
+                step = new QueryStep(this.selectedMode, {'attribute': att, 'value': val});
+            }
+        } else if (this.selectedMode.id == 'att_num_range') {
+            /*
+             * att_num_range
+             */
+            let att = this.selectedOption;
+            let nlo = this.queryInput;
+            let nhi = this.queryInput2;
+            if (att && nlo && nhi) {
+                step = new QueryStep(this.selectedMode, {'attribute': att, 'numLo': nlo, 'numHi': nhi});
+            }
+        } else if (this.selectedMode.id == 'att_contains_norm') {
+            /*
+             * att_contains_norm
+             * 
+             * calls normalization service and submits event in callback
+             */
+            let att = this.selectedOption;
+            let val = this.queryInput;
+            if (att && val) {
+                // run search term through normalizer 
+                this._normService.fetchArabicTranslitNormalizedString(val)
+                .subscribe(
+                    data => {
+                        console.debug("openmind norm data=", data);
+                        step = new QueryStep(this.selectedMode, {'attribute': att, 'value': val, 'normValue': data.normalized_text});
+                        this._queryService.setQueryStep(this.index, step);
+                        // query has changed now
+                        this.queryChanged.emit(this._queryService.getState());
+                    },
+                    err => console.error("openmind norm error=", err),
+                    () => console.debug("openmind norm query Complete")
+                );
+                // query has not been set yet
+                return;
+           }
+        }
+
+        /*
+         * set step and submit change event
+         */
+        if (step != null) {
+            this._queryService.setQueryStep(this.index, step);
+            this.queryChanged.emit(this._queryService.getState());
+        }
+    }
+}