--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/query-select.component.js	Wed Mar 29 17:19:12 2017 +0200
@@ -0,0 +1,211 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var core_1 = require('@angular/core');
+var query_step_1 = require('./query-step');
+var query_service_1 = require('./query.service');
+var normalization_service_1 = require('./normalization.service');
+var ismi_relation_types_1 = require('./ismi-relation-types');
+var QuerySelectComponent = (function () {
+    function QuerySelectComponent(_queryService, _normService) {
+        this._queryService = _queryService;
+        this._normService = _normService;
+        // output queryChanged
+        this.queryChanged = new core_1.EventEmitter();
+    }
+    QuerySelectComponent.prototype.ngOnInit = function () {
+        this.setup();
+    };
+    QuerySelectComponent.prototype.setup = function () {
+        console.log("query-select setup step=", this.queryStep);
+        var step = this._queryService.state.steps[this.index]; // i-1?
+        if (step != null) {
+            this.setQueryStep(step);
+        }
+    };
+    QuerySelectComponent.prototype.getQueryModes = function () {
+        this.queryModes = this._queryService.getQueryModes(this.index);
+        return this.queryModes;
+    };
+    QuerySelectComponent.prototype.onSelectMode = function (event) {
+        var selected = event.target.value;
+        this.selectedMode = this.queryModes.find(function (mode) { return mode.id === selected; });
+        this.queryOptions = this._queryService.getQueryOptions(this.selectedMode);
+    };
+    QuerySelectComponent.prototype.onSelectOption = function (event) {
+        var selected = event.target.value;
+        console.debug("selected option:", selected);
+        this.selectedOption = selected;
+        this.onSubmit();
+    };
+    QuerySelectComponent.prototype.onSubmit = function () {
+        console.debug("Submit! selectedMode=", this.selectedMode, " selectedOption=", this.selectedOption, " queryInput=", this.queryInput);
+        var step = this.getQueryStep();
+        /*
+         * set step and submit change event
+         */
+        if (step != null) {
+            this._queryService.setQueryStep(this.index, step);
+            this.queryChanged.emit(this._queryService.getState());
+        }
+        return false;
+    };
+    /**
+     * Returns QueryStep from current form state.
+     */
+    QuerySelectComponent.prototype.getQueryStep = function () {
+        var _this = this;
+        var step = null;
+        if (this.selectedMode.id === 'type_is') {
+            /*
+             * type_is
+             */
+            var opt = this.selectedOption;
+            if (opt) {
+                step = new query_step_1.QueryStep(this.selectedMode, { 'objectType': opt });
+            }
+        }
+        else if (this.selectedMode.id === 'relation_is') {
+            /*
+             * relation_is
+             */
+            var opt = this.selectedOption;
+            if (opt) {
+                var rel = ismi_relation_types_1.getRelationByName(opt);
+                step = new query_step_1.QueryStep(this.selectedMode, { 'relationType': rel });
+            }
+        }
+        else if (this.selectedMode.id === 'id_is') {
+            /*
+             * id is
+             */
+            var val = this.queryInput;
+            if (val) {
+                step = new query_step_1.QueryStep(this.selectedMode, { 'value': val });
+            }
+        }
+        else if (this.selectedMode.id === 'att_contains') {
+            /*
+             * att_contains
+             */
+            var att = this.selectedOption;
+            var val = this.queryInput;
+            if (att && val) {
+                step = new query_step_1.QueryStep(this.selectedMode, { 'attribute': att, 'value': val });
+            }
+        }
+        else if (this.selectedMode.id === 'att_num_range') {
+            /*
+             * att_num_range
+             */
+            var att = this.selectedOption;
+            var nlo = this.queryInput;
+            var nhi = this.queryInput2;
+            if (att && nlo && nhi) {
+                step = new query_step_1.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
+             */
+            var att_1 = this.selectedOption;
+            var val_1 = this.queryInput;
+            if (att_1 && val_1) {
+                // run search term through normalizer 
+                this._normService.fetchArabicTranslitNormalizedString(val_1)
+                    .subscribe(function (data) {
+                    console.debug("openmind norm data=", data);
+                    step = new query_step_1.QueryStep(_this.selectedMode, { 'attribute': att_1, 'value': val_1, 'normValue': data.normalized_text });
+                    _this._queryService.setQueryStep(_this.index, step);
+                    // query has changed now
+                    _this.queryChanged.emit(_this._queryService.getState());
+                }, function (err) { return console.error("openmind norm error=", err); }, function () { return console.debug("openmind norm query Complete"); });
+                // query has not been set yet (gets set in callback)
+                return null;
+            }
+        }
+        return step;
+    };
+    /**
+     * Sets form state from given QueryStep.
+     */
+    QuerySelectComponent.prototype.setQueryStep = function (step) {
+        var mode = step.mode;
+        this.selectedMode = mode;
+        if (mode.id === 'id_is') {
+            /*
+         * id_is
+         */
+            this.queryInput = step.params.value;
+        }
+        else if (mode.id === 'type_is') {
+            /*
+             * type_is
+             */
+            var name_1 = step.params.objectType;
+            this.queryOptions = [name_1];
+            this.selectedOption = name_1;
+        }
+        else if (this.selectedMode.id === 'relation_is') {
+            /*
+             * relation_is
+             */
+            var name_2 = step.params.relationType.name;
+            var rel = ismi_relation_types_1.getRelationByName(name_2);
+            this.queryOptions = [rel];
+            this.selectedOption = name_2;
+        }
+        else if (this.selectedMode.id === 'att_contains') {
+            /*
+             * att_contains
+             */
+            var name_3 = step.params.attribute;
+            this.queryOptions = [name_3];
+            this.selectedOption = name_3;
+            this.queryInput = step.params.value;
+        }
+        else if (this.selectedMode.id === 'att_num_range') {
+            /*
+             * att_num_range
+             */
+            var name_4 = step.params.attribute;
+            this.queryOptions = [name_4];
+            this.selectedOption = name_4;
+            this.queryInput = step.params.numLo;
+            this.queryInput2 = step.params.numHi;
+        }
+        else if (this.selectedMode.id === 'att_contains_norm') {
+            /*
+             * att_contains_norm
+             */
+            var name_5 = step.params.attribute;
+            this.queryOptions = [name_5];
+            this.selectedOption = name_5;
+            this.queryInput = step.params.value;
+        }
+        // TODO: implement other modes
+        this.resultInfo = step.resultInfo;
+    };
+    QuerySelectComponent = __decorate([
+        core_1.Component({
+            selector: 'query-select',
+            template: "\n<p *ngIf=\"resultInfo\">&nbsp;&nbsp;&nbsp;result: {{resultInfo}}</p>\n<div>\n    <form (ngSubmit)=\"onSubmit()\">\n        <select name=\"mode\" (change)=\"onSelectMode($event)\">\n            <option></option>\n            <option *ngFor=\"let mode of getQueryModes()\" \n                [selected]=\"mode.id==selectedMode?.id\" [value]=\"mode.id\">\n                {{mode.label}}\n            </option>\n        </select>\n\n        <span *ngIf=\"selectedMode?.id=='type_is'\">\n            <select name=\"option\" *ngIf=\"queryOptions\" [ngModel]=\"selectedOption\" (change)=\"onSelectOption($event)\">\n                <option></option>\n                <option *ngFor=\"let option of queryOptions\" [value]=\"option\">\n                    {{option}}\n                </option>\n            </select>\n        </span>\n\n        <span *ngIf=\"selectedMode?.id=='relation_is'\">\n            <select name=\"option\" *ngIf=\"queryOptions\" [ngModel]=\"selectedOption\" (change)=\"onSelectOption($event)\">\n                <option></option>\n                <option *ngFor=\"let option of queryOptions\" [value]=\"option.getName()\">\n                    {{option.getLabel()}}\n                </option>\n            </select>\n        </span>\n\n        <span *ngIf=\"selectedMode?.id=='att_contains' || selectedMode?.id=='att_contains_norm'\">\n            <select name=\"option\" [ngModel]=\"selectedOption\" (change)=\"selectedOption=$event.target.value\">\n                <option></option>\n                <option *ngFor=\"let option of queryOptions\" [value]=\"option\">\n                    {{option}}\n                </option>\n            </select>\n            <span>contains</span>\n            <input type=\"text\" name=\"value\" [(ngModel)]=\"queryInput\"/>\n        </span>\n\n        <span *ngIf=\"selectedMode?.id=='att_num_range'\">\n            <select name=\"option\" [ngModel]=\"selectedOption\" (change)=\"selectedOption=$event.target.value\">\n                <option></option>\n                <option *ngFor=\"let option of queryOptions\" [value]=\"option\">\n                    {{option}}\n                </option>\n            </select>\n            <span>is between</span>\n            <input type=\"text\" name=\"value1\" [(ngModel)]=\"queryInput\"/>\n            <span>and</span>\n            <input type=\"text\" name=\"value2\" [(ngModel)]=\"queryInput2\"/>\n        </span>\n\n        <span *ngIf=\"selectedMode?.id=='id_is'\">\n            <input type=\"text\" name=\"value\" [(ngModel)]=\"queryInput\"/>\n        </span>\n\n        <button type=\"submit\">Submit</button>\n    </form>\n</div>\n        ",
+            inputs: ['queryStep', 'index'],
+            outputs: ['queryChanged']
+        }), 
+        __metadata('design:paramtypes', [query_service_1.QueryService, normalization_service_1.NormalizationService])
+    ], QuerySelectComponent);
+    return QuerySelectComponent;
+}());
+exports.QuerySelectComponent = QuerySelectComponent;
+//# sourceMappingURL=query-select.component.js.map
\ No newline at end of file