Mercurial > hg > ng2-query-ismi
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 } |