Administrator / maps_core_ng

Commit 198b5d4d84375fb1be6012049f3943e45e5ac5e1

Authored by Administrator
1 parent 4384eb9b

refactor bus stop

Showing 5 changed files with 190 additions and 71 deletions   Show diff stats
Inline Side-by-side
src/app/pages/statements/components/busStop2/busStop2.component.ts
  Show/Hide comments   View file @198b5d4
... ... @@ -22,7 +22,6 @@ import { RendererComponent } from '../../../../components/renderer.component';
22 22 templateUrl: './busStop2.html',
23 23 })
24 24 export class BusStop2 {
25   - // source: LocalDataSource = new LocalDataSource();
26 25  
27 26 public showGrid: boolean;
28 27 public rowData: any[] = [];
... ... @@ -40,45 +39,52 @@ export class BusStop2 {
40 39 protected service: BusStop2Service,
41 40 private dataService: BusStopCreateService,
42 41 ) {
43   - this.gridOptions = <GridOptions>{};
44   - this.gridOptions.rowModelType = 'virtual';
45   - this.showGrid = true;
46   - let dataSource = {
47   - rowCount: null, // behave as infinite scroll
48   - getRows: function (params) {
49   - // At this point in your code, you would call the server, using $http if in AngularJS.
50   - // To make the demo look real, wait for 500ms before returning
51   - // take a slice of the total rows
52   - let rowsThisPage = this.rowData.slice(params.startRow, params.endRow);
53   - // if on or after the last page, work out the last row.
54   - let lastRow = -1;
55   - if (this.rowData.length <= params.endRow) {
56   - lastRow = this.rowData.length;
57   - }
58   - // call the success callback
59   - params.successCallback(rowsThisPage, lastRow);
60   - }.bind(this)
61   - };
62   - this.gridOptions.datasource = dataSource;
  42 + this.gridOptions = <GridOptions>{};
  43 + this.showGrid = true;
  44 + this.gridOptions.rowModelType = 'virtual';
63 45 this.dataService.getModels().then(models => {
64 46 this.regions = models.regionSelectListDsM as RegionSelectList[];
65 47 this.states = models.stateCommonSelectListDsM as StateCommonSelectList[];
66 48 this.surfaceTypes = models.surfaceTypeSelectListDsM as SurfaceTypeSelectList[];
67 49 this.settlements = models.settlementSelectListDsM as SettlementSelectList[];
68 50 this.roads = models.roadSelectListDsM as RoadSelectList[];
69   - this.service.getData().then((data) => {
  51 + }).then(() => {
  52 + this.createColumnDefs();
  53 + });
  54 + this.service.getData().then((data) => {
70 55 if (data.length){
71   - // this.source.load(data);
72 56 this.rowData = data;
73 57 } else {
74 58 this.rowData = [new busStop2];
75 59 }
76   - this.createColumnDefs();
77   - this.gridOptions.api.refreshVirtualPageCache();
78   - });
  60 + }).then(() => {
  61 + this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
  62 + this.gridOptions.api.refreshVirtualPageCache();
79 63 });
80 64 }
81 65  
  66 +
  67 + setRowData(allOfTheData) {
  68 + let dataSource = {
  69 + rowCount: null, // behave as infinite scroll
  70 + getRows: function (params) {
  71 + console.log('asking for ' + params.startRow + ' to ' + params.endRow);
  72 + // At this point in your code, you would call the server, using $http if in AngularJS.
  73 + // To make the demo look real, wait for 500ms before returning
  74 + // take a slice of the total rows
  75 + let rowsThisPage = allOfTheData.slice(params.startRow, params.endRow);
  76 + // if on or after the last page, work out the last row.
  77 + let lastRow = -1;
  78 + if (allOfTheData.length <= params.endRow) {
  79 + lastRow = allOfTheData.length;
  80 + }
  81 + // call the success callback
  82 + params.successCallback(rowsThisPage, lastRow);
  83 + }
  84 + };
  85 + return dataSource;
  86 +
  87 + }
82 88 onDeleteConfirm(event): void {
83 89 if (window.confirm('Вы уверены что хотите удалить??')) {
84 90 event.confirm.resolve();
... ... @@ -88,29 +94,10 @@ export class BusStop2 {
88 94 }
89 95 public addNewRow() {
90 96 this.rowData.unshift(new busStop2());
  97 + this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
91 98 this.gridOptions.api.refreshVirtualPageCache();
92 99 }
93   - private setRowData(data) {
94   - let dataSource = {
95   - rowCount: null, // behave as infinite scroll
96   - getRows: function (params) {
97   - // At this point in your code, you would call the server, using $http if in AngularJS.
98   - // To make the demo look real, wait for 500ms before returning
99   - setTimeout( function() {
100   - // take a slice of the total rows
101   - var rowsThisPage = data.slice(params.startRow, params.endRow);
102   - // if on or after the last page, work out the last row.
103   - var lastRow = -1;
104   - if (data.length <= params.endRow) {
105   - lastRow = data.length;
106   - }
107   - // call the success callback
108   - params.successCallback(rowsThisPage, lastRow);
109   - }, 500);
110   - }
111   - };
112   - this.gridOptions.datasource = dataSource;
113   - }
  100 +
114 101 private createColumnDefs() {
115 102 this.columnDefs = [
116 103 {
... ... @@ -124,7 +111,6 @@ export class BusStop2 {
124 111 {
125 112 headerName: 'ID',
126 113 field: 'id',
127   - editable: true,
128 114 width: 150
129 115 },
130 116 {
... ... @@ -180,4 +166,75 @@ export class BusStop2 {
180 166 }
181 167 ];
182 168 }
  169 +
  170 +
  171 + private onCellClicked($event) {
  172 + console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
  173 + }
  174 +
  175 + private onCellValueChanged($event) {
  176 + console.log($event.data);
  177 + console.log('onCellValueChanged: ' + $event.oldValue + ' to ' + $event.newValue);
  178 + }
  179 +
  180 + private onCellDoubleClicked($event) {
  181 + console.log('onCellDoubleClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
  182 + }
  183 +
  184 + private onCellContextMenu($event) {
  185 + console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field);
  186 + }
  187 +
  188 + private onCellFocused($event) {
  189 + console.log('onCellFocused: (' + $event.rowIndex + ',' + $event.colIndex + ')');
  190 + }
  191 +
  192 + private onRowSelected($event) {
  193 + // taking out, as when we 'select all', it prints to much to the console!!
  194 + // console.log('onRowSelected: ' + $event.node.data.name);
  195 + }
  196 +
  197 + private onSelectionChanged() {
  198 + console.log('selectionChanged');
  199 + }
  200 +
  201 + private onBeforeFilterChanged() {
  202 + console.log('beforeFilterChanged');
  203 + }
  204 +
  205 + private onAfterFilterChanged() {
  206 + console.log('afterFilterChanged');
  207 + }
  208 +
  209 + private onFilterModified() {
  210 + console.log('onFilterModified');
  211 + }
  212 +
  213 + private onBeforeSortChanged() {
  214 + console.log('onBeforeSortChanged');
  215 + }
  216 +
  217 + private onAfterSortChanged() {
  218 + console.log('onAfterSortChanged');
  219 + }
  220 +
  221 + private onVirtualRowRemoved($event) {
  222 + // because this event gets fired LOTS of times, we don't print it to the
  223 + // console. if you want to see it, just uncomment out this line
  224 + // console.log('onVirtualRowRemoved: ' + $event.rowIndex);
  225 + }
  226 +
  227 + private onRowClicked($event) {
  228 + console.log('onRowClicked: ' + $event.node.data.name);
  229 + }
  230 +
  231 + public onQuickFilterChanged($event) {
  232 + this.gridOptions.api.setQuickFilter($event.target.value);
  233 + }
  234 +
  235 + // here we use one generic event to handle all the column type events.
  236 + // the method just prints the event name
  237 + private onColumnEvent($event) {
  238 + console.log('onColumnEvent: ' + $event);
  239 + }
183 240 }
... ...
src/app/pages/statements/components/busStop2/busStop2.html
  Show/Hide comments   View file @198b5d4
... ... @@ -3,8 +3,47 @@
3 3 <div class="row">
4 4 <ba-card title="Автобусні зупинки" baCardClass="with-scroll">
5 5 <button class="btn btn-warning" (click)="addNewRow()" type="button">Добавить новое поле</button>
6   - <ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-dark" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups
7   - toolPanelSuppressValues debug rowHeight="22" rowSelection="multiple">
  6 + <ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-dark"
  7 + [gridOptions]="gridOptions"
  8 + [columnDefs]="columnDefs"
  9 + [rowData]="rowData"
  10 + enableColResize
  11 + enableSorting
  12 + enableFilter
  13 + groupHeaders
  14 + suppressRowClickSelection
  15 + toolPanelSuppressGroups
  16 +
  17 + toolPanelSuppressValues
  18 + debug
  19 + rowHeight="22"
  20 + rowSelection="multiple"
  21 +
  22 + (cellClicked)="onCellClicked($event)"
  23 + (cellValueChanged)="onCellValueChanged($event)"
  24 +
  25 + (cellContextMenu)="onCellContextMenu($event)"
  26 +
  27 + (cellFocused)="onCellFocused($event)"
  28 + (rowSelected)="onRowSelected($event)"
  29 + (selectionChanged)="onSelectionChanged()"
  30 + (beforeFilterChanged)="onBeforeFilterChanged()"
  31 + (afterFilterChanged)="onAfterFilterChanged()"
  32 + (filterModified)="onFilterModified()"
  33 + (beforeSortChanged)="onBeforeSortChanged()"
  34 + (afterSortChanged)="onAfterSortChanged()"
  35 + (virtualRowRemoved)="onVirtualRowRemoved($event)"
  36 +
  37 +
  38 + (columnEverythingChanged)="onColumnEvent($event)"
  39 + (columnRowGroupChanged)="onColumnEvent($event)"
  40 + (columnValueChanged)="onColumnEvent($event)"
  41 + (columnMoved)="onColumnEvent($event)"
  42 + (columnVisible)="onColumnEvent($event)"
  43 + (columnGroupOpened)="onColumnEvent($event)"
  44 + (columnResized)="onColumnEvent($event)"
  45 + (columnPinnedCountChanged)="onColumnEvent($event)">
  46 + >
8 47 </ag-grid-ng2>
9 48 </ba-card>
10 49 </div>
... ...
src/app/pages/statements/components/busStop2/busStop2.service.ts
  Show/Hide comments   View file @198b5d4
... ... @@ -11,26 +11,26 @@ export class BusStop2Service {
11 11 private headers = new Headers({'Content-Type': 'application/json'});
12 12 constructor(private http: Http) { }
13 13 getData(): Promise<busStop2[]> {
14   - let busStops: busStop2[] = [{
15   - roadId: 1,
16   - regionId: 1,
17   - settlementId: 1,
18   - surfaceTypeId: '1',
19   - locationLeft: '1',
20   - locationRight: '1',
21   - stateCommonId: 1,
22   - areaStopAvailability: '',
23   - areaLandAvailability: '',
24   - pocketAvailability: '',
25   - toiletAvailability: '',
26   - yearBuild: '',
27   - yearRepair: '',
28   - }];
29   - return Promise.resolve(busStops);
30   - // return this.http.get(this.url)
31   - // .toPromise()
32   - // .then(response => response.json().busStopEditDsM as busStop2[])
33   - // .catch(this.handleError);
  14 + // let busStops: busStop2[] = [{
  15 + // roadId: 1,
  16 + // regionId: 1,
  17 + // settlementId: 1,
  18 + // surfaceTypeId: '1',
  19 + // locationLeft: '1',
  20 + // locationRight: '1',
  21 + // stateCommonId: 1,
  22 + // areaStopAvailability: '',
  23 + // areaLandAvailability: '',
  24 + // pocketAvailability: '',
  25 + // toiletAvailability: '',
  26 + // yearBuild: '',
  27 + // yearRepair: '',
  28 + // }];
  29 + // return Promise.resolve(busStops);
  30 + return this.http.get(this.url)
  31 + .toPromise()
  32 + .then(response => response.json().busStopEditDsM as busStop2[])
  33 + .catch(this.handleError);
34 34 }
35 35 private handleError(error: any): Promise<any> {
36 36 console.error('An error occured', error);
... ...
src/app/pages/statements/components/busStop2/directory.service.ts 0 → 100644
  Show/Hide comments   View file @198b5d4
  1 +import { Injectable } from '@angular/core';
  2 +import { Headers, Http } from '@angular/http';
  3 +
  4 +import 'rxjs/add/operator/toPromise';
  5 +
  6 +import { busStop2 } from './busStop2';
  7 +
  8 +@Injectable()
  9 +export class BusStop2Service {
  10 + private url = 'http://localhost:5000/busstop/directory';
  11 + private headers = new Headers({'Content-Type': 'application/json'});
  12 + constructor(private http: Http) { }
  13 + getData(): Promise<busStop2[]> {
  14 + return this.http.get(this.url)
  15 + .toPromise()
  16 + .then(response => response.json())
  17 + .catch(this.handleError);
  18 + }
  19 + private handleError(error: any): Promise<any> {
  20 + console.error('An error occured', error);
  21 + return Promise.reject(error.message || error);
  22 + }
  23 +}
... ...
src/app/services/busstopcreate.service.ts
  Show/Hide comments   View file @198b5d4
... ... @@ -5,7 +5,7 @@ import &#39;rxjs/add/operator/toPromise&#39;;
5 5  
6 6 @Injectable()
7 7 export class BusStopCreateService {
8   - private apiUrl = 'http://localhost:5000/busstop';
  8 + private apiUrl = 'http://localhost:5000/busstop/directory';
9 9 private headers = new Headers({'Content-Type': 'applicaton/json'});
10 10 constructor(private http: Http) { }
11 11 getModels(): Promise<any> {
... ...