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 } |
