comparison src/app/query-app.component.ts @ 57:d7c947909ab8 ng2-table

renamed query-app.module to app.module. loading query from url fragment works now.
author casties
date Wed, 29 Mar 2017 17:16:10 +0200
parents b22e52a128a8
children
comparison
equal deleted inserted replaced
56:b22e52a128a8 57:d7c947909ab8
18 [queryStep]="step" [index]="i" 18 [queryStep]="step" [index]="i"
19 (queryChanged)="onQueryChanged($event)"></query-select> 19 (queryChanged)="onQueryChanged($event)"></query-select>
20 <div> 20 <div>
21 <button (click)="addQueryStep()">add step</button> 21 <button (click)="addQueryStep()">add step</button>
22 <button (click)="removeQueryStep()">remove step</button> 22 <button (click)="removeQueryStep()">remove step</button>
23 <button (click)="resetQuery()">reset query</button>
24 <button (click)="showQueryUrl()">get query url</button>
23 </div> 25 </div>
24 </div> 26 </div>
25 <div class="container"> 27 <div class="container">
26 <query-result *ngIf="queryState?.results" 28 <query-result *ngIf="queryState?.results"
27 [resultInfo]="queryState.resultInfo" 29 [resultInfo]="queryState.resultInfo"
35 public queryState: QueryState; 37 public queryState: QueryState;
36 public queryStepList: string[]; 38 public queryStepList: string[];
37 39
38 constructor(private _queryService: QueryService) { 40 constructor(private _queryService: QueryService) {
39 console.debug("QueryAppComponent constructor!"); 41 console.debug("QueryAppComponent constructor!");
40 let newState = this.getStateStringFromFragment(); 42 let newState = this.getStateStringFromUrlFragment();
43 // initialize query service using external state
41 this._queryService.setup(newState); 44 this._queryService.setup(newState);
42 this.queryStepList = []; 45 this.queryStepList = [];
46 // set state in queryStepList
43 if (this._queryService.state.getNumSteps() > 0) { 47 if (this._queryService.state.getNumSteps() > 0) {
44 // use state from URL 48 // use state from URL
45 this._queryService.state.steps 49 this._queryService.state.steps
46 .forEach((elem) => this.queryStepList.push('param')); 50 .forEach((elem) => this.queryStepList.push('param'));
47 } else { 51 } else {
48 // new empty state 52 // new empty state
49 this.addQueryStep(); 53 this.addQueryStep();
50 } 54 }
51 } 55 }
52 56
53 getStateStringFromFragment(): string { 57 getStateStringFromUrlFragment(): string {
54 let hash: string = window.location.hash; 58 let hash: string = window.location.hash;
55 if (hash) { 59 if (hash) {
56 let frag: string = hash.substr(1); 60 let fragb: string = hash.substr(1);
57 frag = decodeURIComponent(frag);
58 // base64 decode 61 // base64 decode
62 let fragu = window.atob(fragb);
63 // url decode
64 let frag = decodeURIComponent(fragu);
65 // reset hash
66 window.location.hash = '';
59 return frag; 67 return frag;
60 } 68 }
61 return null; 69 return null;
70 }
71
72 getUrlFragmentFromState() {
73 let stateStr = this._queryService.state.getStateAsString();
74 let frag = '#';
75 if (stateStr.length > 0) {
76 let fragu = encodeURIComponent(stateStr);
77 let fragb = window.btoa(fragu);
78 frag += fragb;
79 }
80 return frag;
62 } 81 }
63 82
64 addQueryStep() { 83 addQueryStep() {
65 this.queryStepList.push('step'); 84 this.queryStepList.push('step');
66 } 85 }
68 removeQueryStep() { 87 removeQueryStep() {
69 this.queryStepList.pop(); 88 this.queryStepList.pop();
70 this._queryService.state.steps.pop(); 89 this._queryService.state.steps.pop();
71 } 90 }
72 91
92 resetQuery() {
93 // reset everything by reloading
94 window.location.reload();
95 }
96
97 showQueryUrl() {
98 let url = window.location.href
99 url = url.replace(/#.*/, '') + this.getUrlFragmentFromState();
100 window.prompt("URL to current query state", url);
101 }
102
73 onQueryChanged(event: any) { 103 onQueryChanged(event: any) {
74 console.debug("app.onquerychanged! event=", event); 104 console.debug("app.onquerychanged! event=", event);
75 this._queryService.runQuery(); 105 this._queryService.runQuery();
76 this.queryState = this._queryService.getState(); 106 this.queryState = this._queryService.getState();
77 } 107 }