Mercurial > hg > ng2-query-ismi

comparison app/query-select.component.ts @ 20:34cd764e234b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
make interfaces into classes. factor out NormalizationService.
author casties
date Fri, 22 Jan 2016 17:32:33 +0100
parents f84ff6781e57
children 4c046f3244ec
comparison
equal deleted inserted replaced
19:d75224bb8147 20:34cd764e234b
1 import {Component, Output, EventEmitter, OnInit} from 'angular2/core'; 1 import {Component, Output, EventEmitter, OnInit} from 'angular2/core';
2 2
3 import {QueryService} from './query.service';
4 import {QueryMode} from './query-mode'; 3 import {QueryMode} from './query-mode';
5 import {QueryStep} from './query-step'; 4 import {QueryStep} from './query-step';
6 import {QueryState} from './query-state'; 5 import {QueryState} from './query-state';
6
7 import {QueryService} from './query.service';
8 import {NormalizationService} from './normalization.service';
7 9
8 10
9 @Component({ 11 @Component({
10 selector: 'query-select', 12 selector: 'query-select',
11 template: ` 13 template: `
17 <option *ngFor="#mode of queryModes" [value]="mode.id"> 19 <option *ngFor="#mode of queryModes" [value]="mode.id">
18 {{mode.label}} 20 {{mode.label}}
19 </option> 21 </option>
20 </select> 22 </select>
21 23
22 <span *ngIf="selectedMode && selectedMode.id=='type_is' || selectedMode.id=='relation_is'"> 24 <span *ngIf="selectedMode && (selectedMode.id=='type_is' || selectedMode.id=='relation_is')">
23 <select *ngIf="queryOptions" [(ngModel)]="selectedOption" (change)="onSelectOption($event)"> 25 <select *ngIf="queryOptions" [(ngModel)]="selectedOption" (change)="onSelectOption($event)">
24 <option></option> 26 <option></option>
25 <option *ngFor="#option of queryOptions" [value]="option"> 27 <option *ngFor="#option of queryOptions" [value]="option">
26 {{option}} 28 {{option}}
27 </option> 29 </option>
28 </select> 30 </select>
29 </span> 31 </span>
30 32
31 <span *ngIf="selectedMode && selectedMode.id=='att_contains' || selectedMode.id=='att_contains_norm'"> 33 <span *ngIf="selectedMode && (selectedMode.id=='att_contains' || selectedMode.id=='att_contains_norm')">
32 <select [(ngModel)]="selectedOption"> 34 <select [(ngModel)]="selectedOption">
33 <option></option> 35 <option></option>
34 <option *ngFor="#option of queryOptions" [value]="option"> 36 <option *ngFor="#option of queryOptions" [value]="option">
35 {{option}} 37 {{option}}
36 </option> 38 </option>
59 inputs: ['queryStep', 'index'] 61 inputs: ['queryStep', 'index']
60 //outputs: ['queryChanged'] // this should work but doesn't 62 //outputs: ['queryChanged'] // this should work but doesn't
61 }) 63 })
62 64
63 export class QuerySelectComponent implements OnInit { 65 export class QuerySelectComponent implements OnInit {
64 public queryStep: QueryStep; 66 public queryStep: string;
65 public index: number; 67 public index: number;
66 public resultInfo: string; 68 public resultInfo: string;
67 public queryModes: QueryMode[]; 69 public queryModes: QueryMode[];
68 public selectedMode: QueryMode; 70 public selectedMode: QueryMode;
69 public queryOptions: string[]; 71 public queryOptions: string[];
71 public queryInput: string; 73 public queryInput: string;
72 public queryInput2: string; 74 public queryInput2: string;
73 75
74 @Output('queryChanged') queryChanged = new EventEmitter<QueryState>(); 76 @Output('queryChanged') queryChanged = new EventEmitter<QueryState>();
75 77
76 constructor(private _queryService: QueryService) {} 78 constructor(private _queryService: QueryService, private _normService: NormalizationService) {}
77 79
78 ngOnInit() { 80 ngOnInit() {
79 this.setup(); 81 this.setup();
80 } 82 }
81 83
84 this.queryModes = this._queryService.getQueryModes(); 86 this.queryModes = this._queryService.getQueryModes();
85 var step = this._queryService.state.steps[this.index-1]; 87 var step = this._queryService.state.steps[this.index-1];
86 if (step != null) { 88 if (step != null) {
87 this.resultInfo = step.resultInfo; 89 this.resultInfo = step.resultInfo;
88 } 90 }
89 // select first mode (too early?)
90 this.selectedMode = this.queryModes[0];
91 this.query2Options = this._queryService.getQueryOptions(this.selectedMode);
92 } 91 }
93 92
94 onSelectMode(event: any) { 93 onSelectMode(event: any) {
95 var selected = event.target.value; 94 var selected = event.target.value;
96 this.selectedMode = this.queryModes.find(mode => mode.id === selected); 95 this.selectedMode = this.queryModes.find(mode => mode.id === selected);
108 console.debug("Submit! selectedMode=", this.selectedMode, " selectedOption=", this.selectedOption, " queryInput=", this.queryInput); 107 console.debug("Submit! selectedMode=", this.selectedMode, " selectedOption=", this.selectedOption, " queryInput=", this.queryInput);
109 var step: QueryStep; 108 var step: QueryStep;
110 if (this.selectedMode.id == 'type_is') { 109 if (this.selectedMode.id == 'type_is') {
111 var opt = this.selectedOption; 110 var opt = this.selectedOption;
112 if (opt) { 111 if (opt) {
113 step = {'mode': this.selectedMode, 'objectType': opt}; 112 step = new QueryStep(this.selectedMode, {'objectType': opt});
114 } 113 }
115 } else if (this.selectedMode.id == 'relation_is') { 114 } else if (this.selectedMode.id == 'relation_is') {
116 var opt = this.selectedOption; 115 var opt = this.selectedOption;
117 if (opt) { 116 if (opt) {
118 step = {'mode': this.selectedMode, 'relationType': opt}; 117 step = new QueryStep(this.selectedMode, {'relationType': opt});
119 } 118 }
120 } else if (this.selectedMode.id == 'att_contains') { 119 } else if (this.selectedMode.id == 'att_contains') {
121 var att = this.selectedOption; 120 var att = this.selectedOption;
122 var val = this.queryInput; 121 var val = this.queryInput;
123 if (att && val) { 122 if (att && val) {
124 step = {'mode': this.selectedMode, 'attribute': att, 'value': val}; 123 step = new QueryStep(this.selectedMode, {'attribute': att, 'value': val});
125 } 124 }
126 } else if (this.selectedMode.id == 'att_num_range') { 125 } else if (this.selectedMode.id == 'att_num_range') {
127 var att = this.selectedOption; 126 var att = this.selectedOption;
128 var nlo = this.queryInput; 127 var nlo = this.queryInput;
129 var nhi = this.queryInput2; 128 var nhi = this.queryInput2;
130 if (att && nlo && nhi) { 129 if (att && nlo && nhi) {
131 step = {'mode': this.selectedMode, 'attribute': att, 'numLo': nlo, 'numHi': nhi}; 130 step = new QueryStep(this.selectedMode, {'attribute': att, 'numLo': nlo, 'numHi': nhi});
132 } 131 }
133 } else if (this.selectedMode.id == 'att_contains_norm') { 132 } else if (this.selectedMode.id == 'att_contains_norm') {
134 var att = this.selectedOption; 133 var att = this.selectedOption;
135 var val = this.queryInput; 134 var val = this.queryInput;
136 if (att && val) { 135 if (att && val) {
137 // run search term through normalizer 136 // run search term through normalizer
138 this._queryService.fetchNormalizedString(val) 137 this._normService.fetchArabicTranslitNormalizedString(val)
139 .subscribe( 138 .subscribe(
140 data => { 139 data => {
141 console.debug("openmind norm data=", data); 140 console.debug("openmind norm data=", data);
142 step = {'mode': this.selectedMode, 'attribute': att, 'value': val, 'normValue': data.normalized_text}; 141 step = new QueryStep(this.selectedMode, {'attribute': att, 'value': val, 'normValue': data.normalized_text});
143 this._queryService.setQueryStep(this.index, step); 142 this._queryService.setQueryStep(this.index, step);
144 // query has changed now 143 // query has changed now
145 this.queryChanged.emit(this._queryService.getState()); 144 this.queryChanged.emit(this._queryService.getState());
146 }, 145 },
147 err => console.error("openmind norm error=", err), 146 err => console.error("openmind norm error=", err),