# HG changeset patch
# User casties
# Date 1490029968 -3600
# Node ID f8d6f8479e77011fd043c5feb2b14a476d0aaffc
# Parent  b65a031c4967a2f2071540e608e3b4e1598f6691
first working version with angular 2.4 (using old table w/o pager).

diff -r b65a031c4967 -r f8d6f8479e77 src/app/query-app.component.ts
--- a/src/app/query-app.component.ts	Fri Mar 17 20:16:52 2017 +0100
+++ b/src/app/query-app.component.ts	Mon Mar 20 18:12:48 2017 +0100
@@ -8,8 +8,8 @@
 import {NormalizationService} from './normalization.service';
 
 import {QuerySelectComponent} from './query-select.component';
-//import {QueryResultComponent} from './query-result.component';
-import {QueryResultTableComponent} from './query-result-table.component';
+import {QueryResultComponent} from './query-result.component';
+//import {QueryResultTableComponent} from './query-result-table.component';
 
 @Component({
     selector: 'query-app',
diff -r b65a031c4967 -r f8d6f8479e77 src/app/query-app.module.ts
--- a/src/app/query-app.module.ts	Fri Mar 17 20:16:52 2017 +0100
+++ b/src/app/query-app.module.ts	Mon Mar 20 18:12:48 2017 +0100
@@ -1,17 +1,22 @@
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
 
 import { QueryAppComponent }  from './query-app.component';
 import { QuerySelectComponent }  from './query-select.component';
 import { QueryResultComponent }  from './query-result.component';
 import { QueryResultRowComponent }  from './query-result-row.component';
 //import { QueryResultTableComponent }  from './query-result-table.component';
+import { QueryService } from './query.service';
+import { NormalizationService } from './normalization.service';
 
 
 @NgModule({
-  imports:      [ BrowserModule ],
+  imports:      [ BrowserModule, FormsModule, HttpModule ],
   declarations: [ QueryAppComponent, QuerySelectComponent, 
                   QueryResultComponent, QueryResultRowComponent ],
+  providers:    [ QueryService, NormalizationService ],
   bootstrap:    [ QueryAppComponent ]
 })
 export class AppModule { }
diff -r b65a031c4967 -r f8d6f8479e77 src/app/query-result-row.component.ts
--- a/src/app/query-result-row.component.ts	Fri Mar 17 20:16:52 2017 +0100
+++ b/src/app/query-result-row.component.ts	Mon Mar 20 18:12:48 2017 +0100
@@ -3,14 +3,16 @@
 @Component({
     selector: 'tr.resultRow',
     template: `
-        <td style="vertical-align: top;"
-            *ngIf="rowType=='node'" *ngFor="let col of columns">
+        <ng-container *ngIf="rowType=='node'">
+          <td style="vertical-align: top;"
+            *ngFor="let col of columns">
             <a *ngIf="col && col.name=='link'" href="{{rowData[col.name]}}" target="_blank">Link</a>
             <span *ngIf="col && col.name!='link'">{{rowData[col.name]}}</span>
-        </td>
-
-        <td style="vertical-align: top;"
-            *ngIf="rowType=='text'">{{rowData}}</td>
+          </td>
+        </ng-container>
+        <ng-container *ngIf="rowType=='text'">
+          <td style="vertical-align: top;">{{rowData}}</td>
+        </ng-container>
         `,
     inputs: ['rowData', 'rowType', 'columns']
 })
@@ -21,7 +23,7 @@
     public rowData: any;
     public columns: any[];
     
-    /* ngOnInit() {
-        console.debug("row init! columns=", this.columns, " rowData=", this.rowData);
-    } */
+    ngOnInit() {
+        console.debug("row init! rowType=", this.rowType, " columns=", this.columns, " rowData=", this.rowData);
+    }
 }
diff -r b65a031c4967 -r f8d6f8479e77 src/app/query-result.component.ts
--- a/src/app/query-result.component.ts	Fri Mar 17 20:16:52 2017 +0100
+++ b/src/app/query-result.component.ts	Mon Mar 20 18:12:48 2017 +0100
@@ -11,10 +11,11 @@
           <span>Cypher query:</span>
           <pre>{{queryState.resultCypherQuery}}</pre>
           <p>Query results ({{queryState.resultInfo}}):</p>
-          <table>
+          <table border="1">
             <tr>
-              <th *ngIf="queryState.resultTypes=='node' && queryState.resultColumns"
-                  *ngFor="let col of queryState.resultColumns">{{col?col.title:col}}</th>
+              <ng-container *ngIf="queryState.resultTypes=='node' && queryState.resultColumns">
+                <th *ngFor="let col of queryState.resultColumns">{{col?col.title:col}}</th>
+              </ng-container>
             </tr>
             <tr class="resultRow" *ngFor="let row of queryState.results"
                 [rowData]="row" [rowType]="queryState.resultTypes"
diff -r b65a031c4967 -r f8d6f8479e77 src/app/query-select.component.ts
--- a/src/app/query-select.component.ts	Fri Mar 17 20:16:52 2017 +0100
+++ b/src/app/query-select.component.ts	Mon Mar 20 18:12:48 2017 +0100
@@ -15,7 +15,7 @@
 <p *ngIf="resultInfo">&nbsp;&nbsp;&nbsp;result: {{resultInfo}}</p>
 <div>
     <form (ngSubmit)="onSubmit()">
-        <select (change)="onSelectMode($event)">
+        <select name="mode" (change)="onSelectMode($event)">
             <option></option>
             <option *ngFor="let mode of getQueryModes()" [value]="mode.id">
                 {{mode.label}}
@@ -23,7 +23,7 @@
         </select>
 
         <span *ngIf="selectedMode?.id=='type_is'">
-            <select *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)">
+            <select name="option" *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)">
                 <option></option>
                 <option *ngFor="let option of queryOptions" [value]="option">
                     {{option}}
@@ -32,7 +32,7 @@
         </span>
 
         <span *ngIf="selectedMode?.id=='relation_is'">
-            <select *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)">
+            <select name="option" *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)">
                 <option></option>
                 <option *ngFor="let option of queryOptions" [value]="option.getName()">
                     {{option.getLabel()}}
@@ -41,31 +41,31 @@
         </span>
 
         <span *ngIf="selectedMode?.id=='att_contains' || selectedMode?.id=='att_contains_norm'">
-            <select [ngModel]="selectedOption" (change)="selectedOption=$event.target.value">
+            <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" [(ngModel)]="queryInput"/>
+            <input type="text" name="value" [(ngModel)]="queryInput"/>
         </span>
 
         <span *ngIf="selectedMode?.id=='att_num_range'">
-            <select [ngModel]="selectedOption" (change)="selectedOption=$event.target.value">
+            <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" [(ngModel)]="queryInput"/>
+            <input type="text" name="value1" [(ngModel)]="queryInput"/>
             <span>and</span>
-            <input type="text" [(ngModel)]="queryInput2"/>
+            <input type="text" name="value2" [(ngModel)]="queryInput2"/>
         </span>
 
         <span *ngIf="selectedMode?.id=='id_is'">
-            <input type="text" [(ngModel)]="queryInput"/>
+            <input type="text" name="value" [(ngModel)]="queryInput"/>
         </span>
 
         <button type="submit">Submit</button>