From 8ae52ec0f6cb7814eb66ec2c30ab3ccf7c55ff8c Mon Sep 17 00:00:00 2001 From: Vitaliy Date: Fri, 10 Feb 2017 12:35:58 +0200 Subject: [PATCH] add animation fil --- angular-cli.json | 2 +- src/animations/router.animation.ts | 15 ++++++++------- src/app/data/bus-stop/bus-stop.component.html | 2 +- src/app/data/bus-stop/bus-stop.component.ts | 47 ++++++++++++++++++++++++----------------------- src/app/data/service-object/service-object.component.html | 2 +- src/app/data/service-object/service-object.component.ts | 45 ++++++++++++++++++++++----------------------- 6 files changed, 57 insertions(+), 56 deletions(-) diff --git a/angular-cli.json b/angular-cli.json index 06e2dea..755eff5 100644 --- a/angular-cli.json +++ b/angular-cli.json @@ -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", diff --git a/src/animations/router.animation.ts b/src/animations/router.animation.ts index db4482f..a62d9b2 100644 --- a/src/animations/router.animation.ts +++ b/src/animations/router.animation.ts @@ -1,16 +1,17 @@ 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'})), + ]), ]); } diff --git a/src/app/data/bus-stop/bus-stop.component.html b/src/app/data/bus-stop/bus-stop.component.html index 1d612ee..dad08a5 100644 --- a/src/app/data/bus-stop/bus-stop.component.html +++ b/src/app/data/bus-stop/bus-stop.component.html @@ -1,5 +1,5 @@
- diff --git a/src/app/data/bus-stop/bus-stop.component.ts b/src/app/data/bus-stop/bus-stop.component.ts index 3399566..4b35229 100644 --- a/src/app/data/bus-stop/bus-stop.component.ts +++ b/src/app/data/bus-stop/bus-stop.component.ts @@ -20,6 +20,7 @@ import { routerTransition } from '../../../animations/router.animation'; // 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)); diff --git a/src/app/data/service-object/service-object.component.html b/src/app/data/service-object/service-object.component.html index 511e5c1..260c3b4 100644 --- a/src/app/data/service-object/service-object.component.html +++ b/src/app/data/service-object/service-object.component.html @@ -2,7 +2,7 @@
...Loading
- diff --git a/src/app/data/service-object/service-object.component.ts b/src/app/data/service-object/service-object.component.ts index 50c2053..ea958e0 100644 --- a/src/app/data/service-object/service-object.component.ts +++ b/src/app/data/service-object/service-object.component.ts @@ -1,5 +1,5 @@ -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 = {}; - 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 -- libgit2 0.21.4