Add ServiceObject

Administrator
1 parent f4c3aace
Showing 15 changed files with 405 additions and 52 deletions Show diff stats
src/app/data/bus-stop/bus-stop.component.html
src/app/data/bus-stop/bus-stop.component.ts
src/app/data/bus-stop/bus-stop.scss
src/app/data/service-object/service-object.component.html
src/app/data/service-object/service-object.component.ts
src/app/data/service-object/service-object.scss
src/models/department-affiliation-lis.ts
src/models/service-object.ts
src/services/road-select-list.service.ts
src/services/region-select-list.service.ts → src/services/service-object-create.service.ts
src/services/service-object.service.ts
src/services/settlement-select-list.service.ts
src/services/state-common-selectlist.service.ts
src/services/surface-type-select-list.service.ts
src/styles.scss
-<md-card tdMediaToggle="gt-xs" [mediaClasses]="['push']">
-    <div *ngIf="showGrid">
-        <div class="control_button">
-            <button md-fab color="accent" (click)="addNewRow()" type="button"><md-icon>add</md-icon></button>
-            <button md-fab color="warn" (click)="deleteRows()" type="button"><md-icon>delete</md-icon></button>
-        </div>
-        <div *ngIf="isLoading" class="">
-            ...Loading
-        </div>
-        <ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-dark" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups
-            toolPanelSuppressValues debug rowHeight="22" rowSelection="multiple" (cellClicked)="onCellClicked($event)" (cellDoubleClicked)="onCellDoubleClicked($event)" (cellContextMenu)="onCellContextMenu($event)" (cellValueChanged)="onCellValueChanged($event)"
-            (cellFocused)="onCellFocused($event)" (rowSelected)="onRowSelected($event)" (selectionChanged)="onSelectionChanged()" (beforeFilterChanged)="onBeforeFilterChanged()" (afterFilterChanged)="onAfterFilterChanged()" (filterModified)="onFilterModified()"
-            (beforeSortChanged)="onBeforeSortChanged()" (afterSortChanged)="onAfterSortChanged()" (virtualRowRemoved)="onVirtualRowRemoved($event)" (rowClicked)="onRowClicked($event)">
-        </ag-grid-ng2>
+<div class="grid_containert" *ngIf="showGrid">
+    <div *ngIf="isLoading" class="">
+        ...Loading
     </div>
-</md-card>
 \ No newline at end of file
+    <ag-grid-ng2 #agGrid style="width: 100%; height: 100%;" class="ag-dark" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups
+        toolPanelSuppressValues debug rowHeight="22" rowSelection="multiple" (cellClicked)="onCellClicked($event)" (cellDoubleClicked)="onCellDoubleClicked($event)" (cellContextMenu)="onCellContextMenu($event)" (cellValueChanged)="onCellValueChanged($event)"
+        (cellFocused)="onCellFocused($event)" (rowSelected)="onRowSelected($event)" (selectionChanged)="onSelectionChanged()" (beforeFilterChanged)="onBeforeFilterChanged()" (afterFilterChanged)="onAfterFilterChanged()" (filterModified)="onFilterModified()"
+        (beforeSortChanged)="onBeforeSortChanged()" (afterSortChanged)="onAfterSortChanged()" (virtualRowRemoved)="onVirtualRowRemoved($event)" (rowClicked)="onRowClicked($event)">
+    </ag-grid-ng2>
+    <div class="control_button">
+        <button md-fab color="accent" (click)="addNewRow()" type="button"><md-icon>add</md-icon></button>
+        <button md-fab color="warn" (click)="deleteRows()" type="button"><md-icon>delete</md-icon></button>
+    </div>
+</div>
 \ No newline at end of file
@@ -18,7 +18,7 @@ import { SurfaceTypeSelectList } from &#39;../../../models/surface-type-select-list&#39;
 // only import this if you are using the ag-Grid-Enterprise
 @Component({
-    selector: 'rich-grid',
+    selector: 'bus-grid',
     templateUrl: 'bus-stop.component.html',
     styleUrls: ['bus-stop.scss'],
     encapsulation: ViewEncapsulation.None
 .toolbar button {
     margin: 2px;
     padding: 0;
-}
-
-.control_button {
-    position: fixed;
-    bottom: 10px;
-    right: 10px;
 }
 \ No newline at end of file
+<div class="grid_containert" *ngIf="showGrid">
+    <div *ngIf="isLoading" class="">
+        ...Loading
+    </div>
+    <ag-grid-ng2 #agGrid style="width: 100%; height: 100%;" class="ag-dark" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups
+        toolPanelSuppressValues debug rowHeight="22" rowSelection="multiple" (cellClicked)="onCellClicked($event)" (cellDoubleClicked)="onCellDoubleClicked($event)" (cellContextMenu)="onCellContextMenu($event)" (cellValueChanged)="onCellValueChanged($event)"
+        (cellFocused)="onCellFocused($event)" (rowSelected)="onRowSelected($event)" (selectionChanged)="onSelectionChanged()" (beforeFilterChanged)="onBeforeFilterChanged()" (afterFilterChanged)="onAfterFilterChanged()" (filterModified)="onFilterModified()"
+        (beforeSortChanged)="onBeforeSortChanged()" (afterSortChanged)="onAfterSortChanged()" (virtualRowRemoved)="onVirtualRowRemoved($event)" (rowClicked)="onRowClicked($event)">
+    </ag-grid-ng2>
+    <div class="control_button">
+        <button md-fab color="accent" (click)="addNewRow()" type="button"><md-icon>add</md-icon></button>
+        <button md-fab color="warn" (click)="deleteRows()" type="button"><md-icon>delete</md-icon></button>
+    </div>
+</div>
 \ No newline at end of file
+import {Component, ViewEncapsulation} from "@angular/core";
+import {GridOptions} from "ag-grid/main";
+
+import { ServiceObjectService } from '../../../services/service-object.service';
+import { ServiceObject } from '../../../models/service-object';
+import { EditorComponent } from '../../../helpers/editor.component';
+import { RendererComponent } from '../../../helpers/renderer.component';
+import { ServiceObjectCreateService } from '../../../services/service-object-create.service';
+import { BooleanSelectListService } from '../../../services/boolean-select-list.service';
+import { RegionSelectList } from '../../../models/region-select-list';
+import { StateCommonSelectList } from '../../../models/state-common-select-list';
+import { RoadSelectList } from '../../../models/road-select-list';
+import { BooleanSelectList } from '../../../models/boolean-select-list';
+import { SettlementSelectList } from '../../../models/settlement-select-list';
+import { SurfaceTypeSelectList } from '../../../models/surface-type-select-list';
+
+
+// only import this if you are using the ag-Grid-Enterprise
+
+@Component({
+    selector: 'service-object',
+    templateUrl: 'service-object.component.html',
+    styleUrls: ['service-object.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class BusStopComponent {
+
+    public showGrid: boolean;
+    public rowData: any[];
+    public rowCount: string;
+    public regions: RegionSelectList[];
+    public states: StateCommonSelectList[];
+    public surfaceTypes: SurfaceTypeSelectList[];
+    public settlements: SettlementSelectList[];
+    public roads: RoadSelectList[];
+    public boolean: BooleanSelectList[];
+    public isLoading: boolean = false;
+    public isBootstrapping: boolean = true;
+    public isSelected: boolean = true;
+    private columnDefs: any[];
+    private gridOptions: GridOptions;
+
+    constructor(
+        protected service: ServiceObjectService,
+        private dataService: ServiceObjectCreateService,
+        private booleanService: BooleanSelectListService
+    ) {
+        this.gridOptions = <GridOptions>{};
+      this.gridOptions.enableSorting = true;
+      this.showGrid = true;
+      this.gridOptions.rowModelType = 'virtual';
+      this.booleanService.getModels().then((models) => this.boolean = models);
+      this.dataService.getModels().then(models => {
+        this.regions = models.regionSelectListDsM as RegionSelectList[];
+        this.states = models.stateCommonSelectListDsM as StateCommonSelectList[];
+        this.surfaceTypes = models.surfaceTypeSelectListDsM as SurfaceTypeSelectList[];
+        this.settlements = models.settlementSelectListDsM as SettlementSelectList[];
+        this.roads = models.roadSelectListDsM as RoadSelectList[];
+      }).then(() => {
+            this.createColumnDefs();
+            this.isBootstrapping = false;
+      });
+      this.service.getData().then((data) => {
+          if (data.length){
+            this.rowData = data;
+          } else {
+            this.rowData = [new ServiceObject];
+          }
+      }).then(() => {
+          this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
+          this.gridOptions.api.refreshVirtualPageCache();
+      });
+    }
+    setRowData(allOfTheData) {
+      let dataSource = {
+          rowCount: null, // behave as infinite scroll
+          getRows: function (params) {
+              console.log('asking for ' + params.startRow + ' to ' + params.endRow);
+              // At this point in your code, you would call the server, using $http if in AngularJS.
+              // To make the demo look real, wait for 500ms before returning
+              // take a slice of the total rows
+              let rowsThisPage = allOfTheData.slice(params.startRow, params.endRow);
+              // if on or after the last page, work out the last row.
+              let lastRow = -1;
+              if (allOfTheData.length <= params.endRow) {
+                  lastRow = allOfTheData.length;
+              }
+              // call the success callback
+              params.successCallback(rowsThisPage, lastRow);
+          }
+      };
+      return dataSource;
+
+  }
+  onDeleteConfirm(event): void {
+    if (window.confirm('Вы уверены что хотите удалить??')) {
+      event.confirm.resolve();
+    } else {
+      event.confirm.reject();
+    }
+  }
+  public addNewRow() {
+        this.rowData.unshift(new ServiceObject());
+        this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
+        this.gridOptions.api.refreshVirtualPageCache();
+  }
+
+  private createColumnDefs() {
+    this.columnDefs = [
+      {
+        headerName: '#',
+        width: 30,
+        checkboxSelection: true,
+        suppressSorting: true,
+        suppressMenu: true,
+        pinned: true
+      },
+      {
+        headerName: 'ID',
+        field: 'busStopId',
+      },
+      {
+        headerName: 'Назва дороги',
+        field: 'roadId',
+        editable: true,
+        cellEditorFramework: EditorComponent,
+        cellRendererFramework: RendererComponent,
+        cellEditorParams: {
+          data: this.roads,
+          valueCol: 'roadId',
+          labelCol: 'name'
+        }
+      },
+      {
+        headerName: 'Область',
+        field: 'regionId',
+        editable: true,
+        cellEditorFramework: EditorComponent,
+        cellRendererFramework: RendererComponent,
+        cellEditorParams: {
+          data: this.regions,
+          valueCol: 'regionId',
+          labelCol: 'name'
+        }
+      },
+      {
+        headerName: 'Місцезнаходження, км+ справа',
+        field: 'locationRight',
+        editable: true,
+      },
+      {
+        headerName: 'Місцезнаходження, км+ зліва',
+        field: 'locationLeft',
+        editable: true,
+      },
+      {
+        headerName: 'Технічний стан',
+        field: 'stateCommonId',
+        editable: true,
+        cellEditorFramework: EditorComponent,
+        cellRendererFramework: RendererComponent,
+        cellEditorParams: {
+          data: this.states,
+          valueCol: 'stateCommonId',
+          labelCol: 'value'
+        }
+      },
+      {
+        headerName: 'Наявність туалету',
+        field: 'toiletAvailability',
+        editable: true,
+        cellEditorFramework: EditorComponent,
+        cellRendererFramework: RendererComponent,
+        cellEditorParams: {
+          data: this.boolean,
+          valueCol: 'value',
+          labelCol: 'label'
+        }
+      }
+    ];
+  }
+
+    private onCellClicked($event) {
+        console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
+    }
+
+    private onCellValueChanged($event) {
+        if ($event.oldValue !== $event.newValue) {
+            let data = JSON.stringify($event.data);
+            let id = $event.data.busStopId;
+            let result = null;
+            if (id) {
+                this.isLoading = true;
+                result = this.service.update(id, data).then(() => this.isLoading = false);
+            } else {
+                // Protection of posting new row being already sent.
+                if (this.isLoading) {
+                    return ;
+                }
+                this.isLoading = true;
+                result = this.service.create(data).then((busStop) => {
+                    this.rowData[$event.node.rowIndex] = busStop;
+                    this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
+                    this.gridOptions.api.refreshVirtualPageCache();
+                    this.isLoading = false;
+                });
+            }
+        }
+    }
+
+    private deleteRows() {
+        let rows = this.gridOptions.api.getSelectedNodes();
+        if (!rows.length) {
+            return ;
+        }
+        rows.forEach(element => {
+            let id = element.data.busStopId;
+            if (id) {
+                this.isLoading = true;
+                this.service.delete(id).then(() => this.isLoading = false);
+            }
+        });
+        // Sort in order to protect array from reindexing (remove rear elements first)
+        let sorted = rows.sort((a, b) => {
+                if (a > b) {
+                    return -1;
+                } else {
+                    return 1;
+                }
+            });
+        sorted.forEach(item => {
+            this.rowData.splice(item.rowIndex, 1);
+        });
+        this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
+        this.gridOptions.api.refreshVirtualPageCache();
+    }
+
+    private onCellDoubleClicked($event) {
+        console.log('onCellDoubleClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
+    }
+
+    private onCellContextMenu($event) {
+        console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field);
+    }
+
+    private onCellFocused($event) {
+        console.log('onCellFocused: (' + $event.rowIndex + ',' + $event.colIndex + ')');
+    }
+
+    private onRowSelected($event) {
+        // taking out, as when we 'select all', it prints to much to the console!!
+        // console.log('onRowSelected: ' + $event.node.data.name);
+    }
+
+    private onSelectionChanged() {
+        console.log('selectionChanged');
+    }
+
+    private onBeforeFilterChanged() {
+        console.log('beforeFilterChanged');
+    }
+
+    private onAfterFilterChanged() {
+        console.log('afterFilterChanged');
+    }
+
+    private onFilterModified() {
+        console.log('onFilterModified');
+    }
+
+    private onBeforeSortChanged() {
+        console.log('onBeforeSortChanged');
+    }
+
+    private onAfterSortChanged() {
+        console.log('onAfterSortChanged');
+    }
+
+    private onVirtualRowRemoved($event) {
+        // because this event gets fired LOTS of times, we don't print it to the
+        // console. if you want to see it, just uncomment out this line
+        // console.log('onVirtualRowRemoved: ' + $event.rowIndex);
+    }
+
+    private onRowClicked($event) {
+        console.log('onRowClicked: ' + $event.node.data.name);
+    }
+
+    public onQuickFilterChanged($event) {
+        this.gridOptions.api.setQuickFilter($event.target.value);
+    }
+
+    // here we use one generic event to handle all the column type events.
+    // the method just prints the event name
+    private onColumnEvent($event) {
+        console.log('onColumnEvent: ' + $event);
+    }
+}
+.toolbar button {
+    margin: 2px;
+    padding: 0;
+}
 \ No newline at end of file
+export class DepartmentAffiliationLis {
+    departmentAffiliationId: number;
+    name: string;
+ }
+export class ServiceObject{
+    serviceObjectID: number;
+    roadId: number;
+    regionId: number;
+    serviceObjectTypeId: number;
+    settlementId: number;
+    departmentAffiliationId: number;
+    locationLeft: string;
+    locationRight: string;
+    locationAxis: number;
+    distance: number;
+    capacity: number;
+    arrangementElements: string;
+}
@@ -3,17 +3,15 @@ import { Headers, Http } from &#39;@angular/http&#39;;
 import 'rxjs/add/operator/toPromise';
-import { RegionSelectList } from '../models/region-select-list';
-
 @Injectable()
-export class RegionSelectListService {
-    private apiUrl = 'http://localhost:5000/directory/regionds';
+export class ServiceObjectCreateService {
+    private apiUrl = 'http://localhost:5000/serviceobject/directory';
     private headers = new Headers({'Content-Type': 'applicaton/json'});
     constructor(private http: Http) { }
-    getModels(): Promise<RegionSelectList[]> {
+    getModels(): Promise<any> {
         return this.http.get(this.apiUrl)
             .toPromise()
-            .then(response => response.json().regionSelectListDsM as RegionSelectList[])
+            .then(response => response.json())
             .catch(this.handleError);
     }
     private handleError(error: any): Promise<any> {
+import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http';
+
+import 'rxjs/add/operator/toPromise';
+
+import { ServiceObject } from '../models/service-object';
+
+@Injectable()
+export class ServiceObjectService {
+  private url = 'http://localhost:5000/serviceobject';
+  private headers = new Headers({'Content-Type': 'application/json'});
+  constructor(private http: Http) { }
+  getData(): Promise<ServiceObject[]> {
+    return this.http.get(this.url)
+      .toPromise()
+      .then(response => response.json().busStopEditDsM as ServiceObject[])
+      .catch(this.handleError);
+  }
+  update(id: number, data: string): Promise<any> {
+    return this.http.post(this.url + '/update?id=' + id, data, { headers: this.headers })
+      .toPromise()
+      .then(response => response.json())
+      .catch(this.handleError);
+  }
+  create(data: string): Promise<ServiceObject> {
+    return this.http.post(this.url + '/create', data, { headers: this.headers })
+      .toPromise()
+      .then(response => response.json() as ServiceObject)
+      .catch(this.handleError);
+  }
+  delete(id: number): Promise<any> {
+    return this.http.delete(this.url + '/delete?id=' + id, { headers: this.headers })
+      .toPromise()
+      .then(response => response.json())
+      .catch(this.handleError);
+  }
+  private handleError(error: any): Promise<any> {
+    console.error('An error occured', error);
+    return Promise.reject(error.message || error);
+  }
+}
-import { Injectable } from '@angular/core';
-import { Headers, Http } from '@angular/http';
-
-import 'rxjs/add/operator/toPromise';
-
-import { StateCommonSelectList } from '../models/state-common-select-list';
-
-@Injectable()
-export class StateCommonSelectListService {
-    private apiUrl = 'http://localhost:5000/directory/statecommonds';
-    private headers = new Headers({'Content-Type': 'applicaton/json'});
-    constructor(private http: Http) { }
-    getModels(): Promise<StateCommonSelectList[]> {
-        return this.http.get(this.apiUrl)
-            .toPromise()
-            .then(response => response.json().stateCommonSelectListDsM as StateCommonSelectList[])
-            .catch(this.handleError);
-    }
-    private handleError(error: any): Promise<any> {
-        console.error('An error occured', error);
-        return Promise.reject(error.message || error);
-    }
-}
@@ -2,6 +2,7 @@
 .will-load {
     min-height: 80px;
 }
+
 // Href line height wasn't right for md-icon-button
 a[md-icon-button] {
     line-height: 36px;
@@ -9,5 +10,15 @@ a[md-icon-button] {
 // Capitalize
 .text-capital {
-  text-transform: capitalize;
+    text-transform: capitalize;
+}
+
+.grid_containert {
+    height: 100%;
+}
+
+.control_button {
+    position: fixed;
+    bottom: 40px;
+    right: 40px;
 }
 \ No newline at end of file