add animation fil

Administrator
1 parent 781dc1c9
Showing 6 changed files with 57 additions and 56 deletions Show diff stats
angular-cli.json
src/animations/router.animation.ts
src/app/data/bus-stop/bus-stop.component.html
src/app/data/bus-stop/bus-stop.component.ts
src/app/data/service-object/service-object.component.html
src/app/data/service-object/service-object.component.ts
@@ -23,7 +23,7 @@
             "../node_modules/@covalent/core/common/platform.css",
             "../node_modules/@swimlane/ngx-charts/release/ngx-charts.css",
             "../node_modules/ag-grid/dist/styles/ag-grid.css",
-            "../node_modules/ag-grid/dist/styles/theme-dark.css"
+            "../node_modules/ag-grid/dist/styles/theme-blue.css"
         ],
         "scripts": [
             "../node_modules/hammerjs/hammer.min.js",
 import {trigger, state, animate, style, transition} from '@angular/core';
+// tslint:disable-next-line:typedef
 export function routerTransition() {
   return trigger('routerTransition', [
-    state('void', style({position:'absolute', width:'1000px', height:'1000px'}) ),
-    state('*', style({position:'absolute', width:'1000px', height:'1000px'}) ),
+    state('void', style({position: 'absolute', width: '100%', height: '100%', opacity: '1'}) ),
+    state('*', style({position: 'absolute', width: '100%', height: '100%', opacity: '1'}) ),
     transition(':enter', [
-      style({transform: 'translateY(-100%)'}),
-      animate('0.5s ease-in-out', style({transform: 'translateY(0%)'}))
+      style({opacity: '0.5'}),
+      animate('0.6s ease-in-out', style({opacity: '1'})),
     ]),
     transition(':leave', [
-      style({transform: 'translateY(0%)'}),
-      animate('0.5s ease-in-out', style({transform: 'translateY(100%)'}))
-    ])
+      style({transform: 'translateX(0%)', opacity: '1'}),
+      animate('0.6s ease-in-out', style({transform: 'translateX(100%)', opacity: '0.5'})),
+    ]),
   ]);
 }
 <div class="grid_containert" *ngIf="showGrid">
-    <ag-grid-ng2 #agGrid style="width: 100%; height: 100%;" class="ag-dark" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups
+    <ag-grid-ng2 #agGrid style="width: 100%; height: 100%;" class="ag-blue" [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)">
@@ -20,6 +20,7 @@ import { routerTransition } from &#39;../../../animations/router.animation&#39;;
 // only import this if you are using the ag-Grid-Enterprise
 @Component({
+    // tslint:disable-next-line:component-selector
     selector: 'bus-grid',
     templateUrl: 'bus-stop.component.html',
     styleUrls: ['bus-stop.scss'],
@@ -53,7 +54,7 @@ export class BusStopComponent {
         this.showGrid = true;
         this.gridOptions.rowModelType = 'virtual';
         this.booleanService.getModels().then((models) => this.boolean = models);
-        this.dataService.getModels().then(models => {
+        this.dataService.getModels().then((models) => {
         this.regions = models.regionSelectListDsM as RegionSelectList[];
         this.states = models.stateCommonSelectListDsM as StateCommonSelectList[];
         this.surfaceTypes = models.surfaceTypeSelectListDsM as SurfaceTypeSelectList[];
@@ -75,10 +76,10 @@ export class BusStopComponent {
       });
     }
     setRowData(allOfTheData) {
+      // tslint:disable-next-line:typedef
       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
@@ -90,7 +91,7 @@ export class BusStopComponent {
               }
               // call the success callback
               params.successCallback(rowsThisPage, lastRow);
-          }
+          },
       };
       return dataSource;
   }
@@ -127,7 +128,7 @@ export class BusStopComponent {
         checkboxSelection: true,
         suppressSorting: true,
         suppressMenu: true,
-        pinned: true
+        pinned: true,
       },
       {
         headerName: 'ID',
@@ -142,8 +143,8 @@ export class BusStopComponent {
         cellEditorParams: {
           data: this.roads,
           valueCol: 'roadId',
-          labelCol: 'name'
-        }
+          labelCol: 'name',
+        },
       },
       {
         headerName: 'Область',
@@ -154,8 +155,8 @@ export class BusStopComponent {
         cellEditorParams: {
           data: this.regions,
           valueCol: 'regionId',
-          labelCol: 'name'
-        }
+          labelCol: 'name',
+        },
       },
       {
         headerName: 'Місцезнаходження, км+ справа',
@@ -176,8 +177,8 @@ export class BusStopComponent {
         cellEditorParams: {
           data: this.surfaceTypes,
           valueCol: 'surfaceTypeId',
-          labelCol: 'name'
-        }
+          labelCol: 'name',
+        },
       },
       {
         headerName: 'Технічний стан',
@@ -188,8 +189,8 @@ export class BusStopComponent {
         cellEditorParams: {
           data: this.states,
           valueCol: 'stateCommonId',
-          labelCol: 'value'
-        }
+          labelCol: 'value',
+        },
       },
       ,
       {
@@ -201,8 +202,8 @@ export class BusStopComponent {
         cellEditorParams: {
           data: this.boolean,
           valueCol: 'value',
-          labelCol: 'label'
-        }
+          labelCol: 'label',
+        },
       },
       {
         headerName: 'Наявність елементів посад. майдан',
@@ -213,8 +214,8 @@ export class BusStopComponent {
         cellEditorParams: {
           data: this.boolean,
           valueCol: 'value',
-          labelCol: 'label'
-        }
+          labelCol: 'label',
+        },
       },
       {
         headerName: 'Наявність елементів заїзна кишеня',
@@ -225,8 +226,8 @@ export class BusStopComponent {
         cellEditorParams: {
           data: this.boolean,
           valueCol: 'value',
-          labelCol: 'label'
-        }
+          labelCol: 'label',
+        },
       },
       {
         headerName: 'Наявність туалету',
@@ -237,8 +238,8 @@ export class BusStopComponent {
         cellEditorParams: {
           data: this.boolean,
           valueCol: 'value',
-          labelCol: 'label'
-        }
+          labelCol: 'label',
+        },
       },
       {
         headerName: 'Рік будівництва',
@@ -249,7 +250,7 @@ export class BusStopComponent {
         headerName: 'Рік ремонту',
         field: 'yearRepair',
         editable: true,
-      }
+      },
     ];
   }
@@ -286,7 +287,7 @@ export class BusStopComponent {
         if (!rows.length) {
             return ;
         }
-        rows.forEach(element => {
+        rows.forEach((element) => {
             let id = element.data.busStopId;
             if (id) {
                 this.enableLoader();
@@ -301,7 +302,7 @@ export class BusStopComponent {
                     return 1;
                 }
             });
-        sorted.forEach(item => {
+        sorted.forEach((item) => {
             this.rowData.splice(item.rowIndex, 1);
         });
         this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
@@ -2,7 +2,7 @@
     <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
+    <ag-grid-ng2 #agGrid style="width: 100%; height: 100%;" class="ag-blue" [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)">
-import {Component, ViewEncapsulation} from "@angular/core";
-import {GridOptions} from "ag-grid/main";
+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';
@@ -44,14 +44,14 @@ export class ServiceObjectComponent {
     constructor(
         protected service: ServiceObjectService,
         private dataService: ServiceObjectCreateService,
-        private booleanService: BooleanSelectListService
+        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.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.departmentAffiliation = models.departmentAffiliationListDsM as DepartmentAffiliationList[];
@@ -61,7 +61,7 @@ export class ServiceObjectComponent {
             this.createColumnDefs();
             this.isBootstrapping = false;
       });
-      this.service.getData().then((data) => {
+        this.service.getData().then((data) => {
           if (data.length){
             this.rowData = data;
           } else {
@@ -88,7 +88,7 @@ export class ServiceObjectComponent {
               }
               // call the success callback
               params.successCallback(rowsThisPage, lastRow);
-          }
+          },
       };
       return dataSource;
@@ -114,7 +114,7 @@ export class ServiceObjectComponent {
         checkboxSelection: true,
         suppressSorting: true,
         suppressMenu: true,
-        pinned: true
+        pinned: true,
       },
       {
         headerName: 'ID',
@@ -129,8 +129,8 @@ export class ServiceObjectComponent {
         cellEditorParams: {
           data: this.roads,
           valueCol: 'roadId',
-          labelCol: 'name'
-        }
+          labelCol: 'name',
+        },
       },
       {
         headerName: 'Область',
@@ -141,8 +141,8 @@ export class ServiceObjectComponent {
         cellEditorParams: {
           data: this.regions,
           valueCol: 'regionId',
-          labelCol: 'name'
-        }
+          labelCol: 'name',
+        },
       },
       {
         headerName: 'Місцезнаходження, км+ справа',
@@ -153,7 +153,7 @@ export class ServiceObjectComponent {
         headerName: 'Місцезнаходження, км+ зліва',
         field: 'locationLeft',
         editable: true,
-      }
+      },
     ];
   }
@@ -164,7 +164,7 @@ export class ServiceObjectComponent {
     private onCellValueChanged($event) {
         if ($event.oldValue !== $event.newValue) {
             let data = JSON.stringify($event.data);
-            let id = $event.data.serviceObjectId;
+            let id = $event.data.busStopId;
             let result = null;
             if (id) {
                 this.isLoading = true;
@@ -175,8 +175,8 @@ export class ServiceObjectComponent {
                     return ;
                 }
                 this.isLoading = true;
-                result = this.service.create(data).then((serviceObject) => {
-                    this.rowData[$event.node.rowIndex] = serviceObject;
+                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;
@@ -190,8 +190,8 @@ export class ServiceObjectComponent {
         if (!rows.length) {
             return ;
         }
-        rows.forEach(element => {
-            let id = element.data.serviceObjectId;
+        rows.forEach((element) => {
+            let id = element.data.busStopId;
             if (id) {
                 this.isLoading = true;
                 this.service.delete(id).then(() => this.isLoading = false);
@@ -205,7 +205,7 @@ export class ServiceObjectComponent {
                     return 1;
                 }
             });
-        sorted.forEach(item => {
+        sorted.forEach((item) => {
             this.rowData.splice(item.rowIndex, 1);
         });
         this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
@@ -273,4 +273,3 @@ export class ServiceObjectComponent {
         console.log('onColumnEvent: ' + $event);
     }
 }
-ServiceObject
 \ No newline at end of file