Mercurial > hg > ng2-query-ismi
changeset 1:59b7c3afcc6b
first interface and http request.
author | Robert Casties <casties@mpiwg-berlin.mpg.de> |
---|---|
date | Mon, 11 Jan 2016 19:25:53 +0100 |
parents | 39ec75917ef7 |
children | 80270f5a5735 |
files | app/app.component.ts app/query-mode.ts app/query-select.component.ts app/query.service.ts index.html package.json |
diffstat | 6 files changed, 97 insertions(+), 19 deletions(-) [+] |
line wrap: on
line diff
--- a/app/app.component.ts Thu Jan 07 15:04:15 2016 +0100 +++ b/app/app.component.ts Mon Jan 11 19:25:53 2016 +0100 @@ -11,7 +11,9 @@ `, directives: [QuerySelectComponent] }) + export class AppComponent { public title = 'huhu!'; - public selectedOption = 'unknown'; + public selectedOption = 'unknown'; + }
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/app/query-mode.ts Mon Jan 11 19:25:53 2016 +0100 @@ -0,0 +1,4 @@ +export interface QueryMode { + id: string; + label: string; +} \ No newline at end of file
--- a/app/query-select.component.ts Thu Jan 07 15:04:15 2016 +0100 +++ b/app/query-select.component.ts Mon Jan 11 19:25:53 2016 +0100 @@ -1,31 +1,47 @@ -import {Component} from 'angular2/core'; +import {Component, OnInit} from 'angular2/core'; +import {HTTP_PROVIDERS} from 'angular2/http'; + +import {QueryService} from './query.service'; +import {QueryMode} from './query-mode'; + @Component({ selector: 'query-select', template: ` <p>Selected option: {{selectedQuery}}</p> <select (change)="onSelectType($event)"> - <option *ngFor="#option of queryTypes" [value]="option"> - {{option}} + <option *ngFor="#mode of queryModes" [value]="mode.id"> + {{mode.label}} </option> </select> <select [(ngModel)]="selectedQuery"> - <option *ngFor="#option of query2Types" [value]="option"> + <option *ngFor="#option of query2Options" [value]="option"> {{option}} </option> </select> - ` + `, + providers: [QueryService, HTTP_PROVIDERS] }) -export class QuerySelectComponent { - public queryTypes = ['Object type is', 'Attribute contains']; + +export class QuerySelectComponent implements OnInit { + public queryModes; public selectedQuery = 'unknown'; - public query2Types = ['a', 'b', 'c']; + public query2Options; + + constructor(private _queryService: QueryService) {} + + ngOnInit() { + this.setupQueryModes(); + } + + setupQueryModes() { + this.queryModes = this._queryService.getQueryModes(); + this._queryService.getIsmiObjectTypes(); + } onSelectType(event: any) { - var selected = event.target.value - this.selectedQuery = selected; - if (selected == 'Attribute contains') { - this.query2Types = ['d', 'e', 'f']; - } + var selected = event.target.value; + this._queryService.getQueryOptions(selected).then( + options => this.query2Options = options); } }
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/app/query.service.ts Mon Jan 11 19:25:53 2016 +0100 @@ -0,0 +1,55 @@ +import {Injectable} from 'angular2/core'; +import {Http, Headers} from 'angular2/http'; + +import 'rxjs/Rx'; // import all RxJS operators + +import {QueryMode} from './query-mode'; + +@Injectable() +export class QueryService { + + public QUERY_MODES: QueryMode[] = [ + {id: 'type_is', label:'Object type is'}, + {id: 'att_contains', label: 'Attribute contains'}]; + + constructor(private _http: Http) {} + + getQueryModes(): QueryMode[] { + return this.QUERY_MODES; + } + + getQueryOptions(queryMode: string) { + var options = ['a1', 'b1', 'c1']; + if (queryMode == 'Attribute contains') { + options = ['d', 'e', 'f']; + } + return Promise.resolve(options); + } + + getIsmiObjectTypes() { + var headers = new Headers(); + headers.append('Authorization', 'Basic ' + btoa('neo4j'+':'+'neo5j')); + headers.append('Content-Type', 'application/json'); + headers.append('Accept', 'application/json'); + var data = { + 'query': `MATCH (n) +WITH DISTINCT labels(n) AS labels +UNWIND labels AS label +RETURN DISTINCT label +ORDER BY label`, + 'params': {} + }; + + console.debug("http:", this._http, " headers:", headers, " data:", data); + + var post = this._http.post('http://localhost:7474/db/data/cypher/', JSON.stringify(data), {'headers': headers}); + console.debug("post:", post); + var map = post.map(res => res.json()); + console.debug("map:", map); + map.subscribe( + data => console.debug("neo4j data=", data), + err => console.error("neo4j error=", err), + () => console.debug('neo4j query Complete') + ); + } +} \ No newline at end of file
--- a/index.html Thu Jan 07 15:04:15 2016 +0100 +++ b/index.html Mon Jan 11 19:25:53 2016 +0100 @@ -8,6 +8,7 @@ <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> + <script src="node_modules/angular2/bundles/http.dev.js"></script> <!-- 2. Configure SystemJS --> <script>
--- a/package.json Thu Jan 07 15:04:15 2016 +0100 +++ b/package.json Mon Jan 11 19:25:53 2016 +0100 @@ -1,5 +1,5 @@ { - "name": "angular2-quickstart", + "name": "ng2-ismi-query-app", "version": "1.0.0", "scripts": { "tsc": "tsc", @@ -9,13 +9,13 @@ }, "license": "ISC", "dependencies": { - "angular2": "2.0.0-beta.0", - "systemjs": "0.19.6", + "angular2": "2.0.0-beta.1", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", - "reflect-metadata": "0.1.2", + "reflect-metadata": "^0.1.2", "rxjs": "5.0.0-beta.0", - "zone.js": "0.5.10" + "systemjs": "0.19.14", + "zone.js": "0.5.10", }, "devDependencies": { "concurrently": "^1.0.0",