diff --git a/config/head-config.common.js b/config/head-config.common.js
index 6d1c5e4..df81338 100644
--- a/config/head-config.common.js
+++ b/config/head-config.common.js
@@ -32,8 +32,7 @@ module.exports = {
/** tags for favicons **/
{ rel: 'icon', type: 'image/png', sizes: '32x32', href: 'assets/icon/favicon-32x32.png' },
{ rel: 'icon', type: 'image/png', sizes: '96x96', href: 'assets/icon/favicon-96x96.png' },
- { rel: 'icon', type: 'image/png', sizes: '16x16', href: 'assets/icon/favicon-16x16.png' }
-
+ { rel: 'icon', type: 'image/png', sizes: '16x16', href: 'assets/icon/favicon-16x16.png' },
],
meta: [
{ name: 'msapplication-TileColor', content: '#ffffff' },
diff --git a/config/webpack.common.js b/config/webpack.common.js
index c896fc5..4c92b89 100644
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@@ -31,7 +31,6 @@ const METADATA = {
baseUrl: '/',
isDevServer: helpers.isWebpackDevServer()
};
-
/*
* Webpack configuration
*
diff --git a/package.json b/package.json
index 9cf4bd8..b41e492 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,10 @@
"reflect-metadata": "^0.1.9",
"rxjs": "~5.0.2",
"tether": "^1.2.4",
- "zone.js": "~0.7.4"
+ "zone.js": "~0.7.4",
+ "ag-grid": "7.2.x",
+ "ag-grid-enterprise": "7.2.x",
+ "ag-grid-ng2": "7.2.x"
},
"devDependencies": {
"@angular/compiler-cli": "2.4.4",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index dcd7b82..6026d66 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -46,7 +46,7 @@ export type StoreType = {
ReactiveFormsModule,
NgaModule.forRoot(),
PagesModule,
- routing
+ routing,
],
providers: [ // expose our Services and Providers into Angular's dependency injection
ENV_PROVIDERS,
diff --git a/src/app/pages/statements/ag-grid.css b/src/app/pages/statements/ag-grid.css
new file mode 100644
index 0000000..c656538
--- /dev/null
+++ b/src/app/pages/statements/ag-grid.css
@@ -0,0 +1,751 @@
+ag-grid-ng2 {
+ display: inline-block;
+}
+.ag-rtl {
+ direction: rtl;
+}
+.ag-ltr {
+ direction: ltr;
+}
+.ag-select-agg-func-popup {
+ position: absolute;
+}
+.ag-body-no-select {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.ag-root {
+/* set to relative, so absolute popups appear relative to this */
+ position: relative;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+/* was getting some 'should be there' scrolls, this sorts it out */
+ overflow: hidden;
+}
+.ag-font-style {
+ cursor: default;
+/* disable user mouse selection */
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.ag-no-scrolls {
+ white-space: nowrap;
+ display: inline-block;
+}
+.ag-scrolls {
+ height: 100%;
+}
+.ag-popup-backdrop {
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+}
+.ag-header {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ white-space: nowrap;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: hidden;
+ width: 100%;
+}
+.ag-pinned-left-header {
+ float: left;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ display: inline-block;
+ overflow: hidden;
+ height: 100%;
+}
+.ag-pinned-right-header {
+ float: right;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ display: inline-block;
+ overflow: hidden;
+ height: 100%;
+}
+.ag-header-viewport {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: hidden;
+ height: 100%;
+}
+.ag-scrolls .ag-header-row {
+ position: absolute;
+}
+.ag-scrolls .ag-header-container {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ position: relative;
+ white-space: nowrap;
+ height: 100%;
+}
+.ag-no-scrolls .ag-header-container {
+ white-space: nowrap;
+}
+.ag-header-overlay {
+ display: block;
+ position: absolute;
+}
+.ag-header-cell {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ vertical-align: bottom;
+ text-align: center;
+ display: inline-block;
+ height: 100%;
+ position: absolute;
+}
+.ag-dnd-ghost {
+ font-size: 14px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ position: absolute;
+ background: #e5e5e5;
+ border: 1px solid #000;
+ cursor: move;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ padding: 3px;
+ line-height: 1.4;
+}
+.ag-dnd-ghost-icon {
+ display: inline-block;
+ float: left;
+ padding-left: 2px;
+ padding-right: 2px;
+}
+.ag-dnd-ghost-label {
+ display: inline-block;
+}
+.ag-header-group-cell {
+ height: 100%;
+ display: inline-block;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ position: absolute;
+}
+.ag-header-group-cell-label {
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.ag-header-cell-label {
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.ag-header-cell-resize {
+ height: 100%;
+ width: 4px;
+ cursor: col-resize;
+}
+.ag-ltr .ag-header-cell-resize {
+ float: right;
+}
+.ag-ltr .ag-pinned-right-header .ag-header-cell-resize {
+ float: left;
+}
+.ag-rtl .ag-header-cell-resize {
+ float: left;
+}
+.ag-rtl .ag-pinned-left-header .ag-header-cell-resize {
+ float: right;
+}
+.ag-header-expand-icon {
+ padding-left: 4px;
+}
+.ag-header-cell-menu-button {
+ float: right;
+}
+.ag-overlay-panel {
+ display: table;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+.ag-overlay-wrapper {
+ display: table-cell;
+ vertical-align: middle;
+ text-align: center;
+}
+.ag-bl-overlay {
+ pointer-events: none;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0px;
+ left: 0px;
+}
+.ag-bl-full-height {
+ height: 100%;
+ overflow: auto;
+ position: relative;
+}
+.ag-bl-full-height-west {
+ height: 100%;
+ float: left;
+}
+.ag-bl-full-height-east {
+ height: 100%;
+ float: right;
+}
+.ag-bl-full-height-center {
+ height: 100%;
+}
+.ag-bl-normal {
+ height: 100%;
+ position: relative;
+}
+.ag-bl-normal-center-row {
+ height: 100%;
+ overflow: hidden;
+}
+.ag-bl-normal-west {
+ height: 100%;
+ float: left;
+}
+.ag-bl-normal-east {
+ height: 100%;
+ float: right;
+}
+.ag-bl-normal-center {
+ height: 100%;
+}
+.ag-bl-dont-fill {
+ position: relative;
+}
+.ag-body {
+ height: 100%;
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ position: absolute;
+}
+.ag-floating-top {
+ position: absolute;
+ left: 0px;
+ width: 100%;
+ white-space: nowrap;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+.ag-pinned-left-floating-top {
+ float: left;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ display: inline-block;
+ overflow: hidden;
+ height: 100%;
+ position: relative;
+}
+.ag-pinned-right-floating-top {
+ float: right;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ display: inline-block;
+ overflow: hidden;
+ height: 100%;
+ position: relative;
+}
+.ag-floating-top-viewport {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: hidden;
+ height: 100%;
+}
+.ag-floating-top-container {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ position: relative;
+ white-space: nowrap;
+}
+.ag-floating-bottom {
+ position: absolute;
+ left: 0px;
+ width: 100%;
+ white-space: nowrap;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+.ag-pinned-left-floating-bottom {
+ float: left;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ display: inline-block;
+ overflow: hidden;
+ height: 100%;
+ position: relative;
+}
+.ag-pinned-right-floating-bottom {
+ float: right;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ display: inline-block;
+ overflow: hidden;
+ height: 100%;
+ position: relative;
+}
+.ag-floating-bottom-viewport {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: hidden;
+ height: 100%;
+}
+.ag-floating-bottom-container {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ position: relative;
+ white-space: nowrap;
+}
+.ag-pinned-left-cols-viewport {
+ float: left;
+}
+.ag-pinned-left-cols-container {
+ display: inline-block;
+ position: relative;
+}
+.ag-pinned-right-cols-viewport {
+ float: right;
+}
+.ag-ltr .ag-pinned-right-cols-viewport {
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+.ag-ltr .ag-pinned-left-cols-viewport {
+ overflow: hidden;
+}
+.ag-rtl .ag-pinned-right-cols-viewport {
+ overflow: hidden;
+}
+.ag-rtl .ag-pinned-left-cols-viewport {
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+.ag-pinned-right-cols-container {
+ display: inline-block;
+ position: relative;
+}
+.ag-body-viewport-wrapper {
+ height: 100%;
+}
+.ag-body-viewport {
+ overflow-x: auto;
+ overflow-y: auto;
+ height: 100%;
+}
+.ag-full-width-viewport {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ display: inline;
+ pointer-events: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+.ag-full-width-container {
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+}
+.ag-floating-bottom-full-width-container {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ pointer-events: none;
+ overflow: hidden;
+ display: inline;
+}
+.ag-floating-top-full-width-container {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ pointer-events: none;
+ overflow: hidden;
+ display: inline;
+}
+.ag-full-width-row {
+ pointer-events: all;
+ overflow: hidden;
+}
+.ag-scrolls .ag-body-container {
+ position: relative;
+ display: inline-block;
+}
+.ag-row-animation {
+ -webkit-transition: top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
+ -moz-transition: top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
+ -o-transition: top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
+ -ms-transition: top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
+ transition: top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
+}
+.ag-row-no-animation {
+ -webkit-transition: background-color 0.1s;
+ -moz-transition: background-color 0.1s;
+ -o-transition: background-color 0.1s;
+ -ms-transition: background-color 0.1s;
+ transition: background-color 0.1s;
+}
+.ag-row {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.ag-scrolls .ag-row {
+ white-space: nowrap;
+ position: absolute;
+ width: 100%;
+}
+.ag-no-scrolls .ag-row {
+ position: relative;
+}
+.ag-column-drop {
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.ag-column-drop-vertical .ag-column-drop-cell {
+ display: block;
+}
+.ag-column-drop-vertical .ag-column-drop-empty-message {
+ display: block;
+}
+.ag-column-drop-vertical .ag-column-drop-cell-button {
+ line-height: 16px;
+}
+.ag-ltr .ag-column-drop-vertical .ag-column-drop-cell-button {
+ float: right;
+}
+.ag-rtl .ag-column-drop-vertical .ag-column-drop-cell-button {
+ float: left;
+}
+.ag-column-drop-horizontal {
+ white-space: nowrap;
+}
+.ag-column-drop-horizontal .ag-column-drop-cell {
+ display: inline-block;
+}
+.ag-column-drop-horizontal .ag-column-drop-empty-message {
+ display: inline-block;
+}
+.ag-cell {
+ display: inline-block;
+ white-space: nowrap;
+ height: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ position: absolute;
+}
+.ag-value-slide-out {
+ opacity: 1;
+ -ms-filter: none;
+ filter: none;
+ margin-right: 5px;
+ -webkit-transition: opacity 3s, margin-right 3s;
+ -moz-transition: opacity 3s, margin-right 3s;
+ -o-transition: opacity 3s, margin-right 3s;
+ -ms-transition: opacity 3s, margin-right 3s;
+ transition: opacity 3s, margin-right 3s;
+ -webkit-transition-timing-function: linear;
+ -moz-transition-timing-function: linear;
+ -o-transition-timing-function: linear;
+ -ms-transition-timing-function: linear;
+ transition-timing-function: linear;
+}
+.ag-value-slide-out-end {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ margin-right: 10px;
+}
+.ag-opacity-zero {
+ opacity: 0;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+}
+.ag-cell-edit-input {
+ width: 100%;
+ height: 100%;
+}
+.ag-group-cell-entire-row {
+ width: 100%;
+ display: inline-block;
+ white-space: nowrap;
+ height: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.ag-footer-cell-entire-row {
+ width: 100%;
+ display: inline-block;
+ white-space: nowrap;
+ height: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.ag-large .ag-root {
+ font-size: 20px;
+}
+.ag-popup-editor {
+ position: absolute;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.ag-menu {
+ position: absolute;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.ag-menu-column-select-wrapper {
+ width: 200px;
+ height: 300px;
+ overflow: auto;
+}
+.ag-menu-list {
+ display: table;
+ border-collapse: collapse;
+}
+.ag-menu-option {
+ display: table-row;
+}
+.ag-menu-option-text {
+ display: table-cell;
+}
+.ag-menu-option-shortcut {
+ display: table-cell;
+}
+.ag-menu-option-icon {
+ display: table-cell;
+}
+.ag-menu-option-popup-pointer {
+ display: table-cell;
+}
+.ag-menu-separator {
+ display: table-row;
+}
+.ag-menu-separator-cell {
+ display: table-cell;
+}
+.ag-virtual-list-viewport {
+ overflow-x: auto;
+ height: 100%;
+ width: 100%;
+}
+.ag-virtual-list-container {
+ position: relative;
+ overflow: hidden;
+}
+.ag-rich-select {
+ outline: none;
+}
+.ag-rich-select-list {
+ width: 200px;
+ height: 200px;
+}
+.ag-set-filter-list {
+ width: 200px;
+ height: 200px;
+}
+.ag-set-filter-item {
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.ag-virtual-list-item {
+ position: absolute;
+ width: 100%;
+}
+.ag-filter-filter {
+ width: 170px;
+ margin: 4px;
+}
+.ag-filter-select {
+ width: 110px;
+ margin: 4px 4px 0px 4px;
+}
+.ag-no-vertical-scroll .ag-scrolls {
+ height: unset;
+}
+.ag-no-vertical-scroll .ag-body {
+ height: unset;
+}
+.ag-no-vertical-scroll .ag-body-viewport-wrapper {
+ height: unset;
+}
+.ag-no-vertical-scroll .ag-body-viewport {
+ height: unset;
+}
+.ag-list-selection {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+}
+.ag-tool-panel {
+ width: 200px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+ height: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: auto;
+}
+.ag-column-select-indent {
+ display: inline-block;
+}
+.ag-column-select-column {
+ white-space: nowrap;
+}
+.ag-ltr .ag-column-select-column {
+ margin-left: 14px;
+}
+.ag-rtl .ag-column-select-column {
+ margin-right: 14px;
+}
+.ag-column-select-column-group {
+ white-space: nowrap;
+}
+.ag-hidden {
+ display: none !important;
+}
+.ag-faded {
+ opacity: 0.3;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+ filter: alpha(opacity=30);
+}
+.ag-width-half {
+ width: 50%;
+ display: inline-block;
+}
+.ag-shake-left-to-right {
+ -webkit-animation-name: ag-shake-left-to-right;
+ -moz-animation-name: ag-shake-left-to-right;
+ -o-animation-name: ag-shake-left-to-right;
+ -ms-animation-name: ag-shake-left-to-right;
+ animation-name: ag-shake-left-to-right;
+ -webkit-animation-duration: 0.2s;
+ -moz-animation-duration: 0.2s;
+ -o-animation-duration: 0.2s;
+ -ms-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ -o-animation-iteration-count: infinite;
+ -ms-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -moz-animation-direction: alternate;
+ -o-animation-direction: alternate;
+ -ms-animation-direction: alternate;
+ animation-direction: alternate;
+}
+@-moz-keyframes ag-shake-left-to-right {
+ from {
+ padding-left: 6px;
+ padding-right: 2px;
+ }
+ to {
+ padding-left: 2px;
+ padding-right: 6px;
+ }
+}
+@-webkit-keyframes ag-shake-left-to-right {
+ from {
+ padding-left: 6px;
+ padding-right: 2px;
+ }
+ to {
+ padding-left: 2px;
+ padding-right: 6px;
+ }
+}
+@-o-keyframes ag-shake-left-to-right {
+ from {
+ padding-left: 6px;
+ padding-right: 2px;
+ }
+ to {
+ padding-left: 2px;
+ padding-right: 6px;
+ }
+}
+@keyframes ag-shake-left-to-right {
+ from {
+ padding-left: 6px;
+ padding-right: 2px;
+ }
+ to {
+ padding-left: 2px;
+ padding-right: 6px;
+ }
+}
diff --git a/src/app/pages/statements/components/busStop2/busStop2.component.ts b/src/app/pages/statements/components/busStop2/busStop2.component.ts
new file mode 100644
index 0000000..b8f02b2
--- /dev/null
+++ b/src/app/pages/statements/components/busStop2/busStop2.component.ts
@@ -0,0 +1,91 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+import { BusStop2Service } from './busStop2.service';
+
+import { LocalDataSource } from 'ng2-smart-table';
+import { GridOptions } from 'ag-grid/main';
+
+@Component({
+ selector: 'statement-table',
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['./busStop2.scss'],
+ templateUrl: './busStop2.html',
+})
+export class BusStop2 {
+ source: LocalDataSource = new LocalDataSource();
+
+ public showGrid: boolean;
+ public rowData: any[];
+ public rowCount: string;
+ private gridOptions: GridOptions;
+ private columnDefs: any[];
+
+
+ constructor(protected service: BusStop2Service) {
+ this.gridOptions = {};
+ // this.gridOptions.rowModelType = 'virtual';
+ this.service.getData().then((data) => {
+ this.source.load(data);
+ this.rowData = data;
+ });
+ this.createColumnDefs();
+ this.showGrid = true;
+ }
+
+ onDeleteConfirm(event): void {
+ if (window.confirm('Вы уверены что хотите удалить??')) {
+ event.confirm.resolve();
+ } else {
+ event.confirm.reject();
+ }
+ }
+
+ private createColumnDefs() {
+ this.columnDefs = [
+ {
+ headerName: '#',
+ width: 30,
+ checkboxSelection: true,
+ suppressSorting: true,
+ suppressMenu: true,
+ pinned: true
+ },
+ {
+ headerName: 'ID',
+ field: 'id',
+ editable: true,
+ width: 150
+ },
+ {
+ headerName: 'Назва дороги',
+ field: 'road',
+ editable: true,
+ width: 150
+ },
+ {
+ headerName: 'Область',
+ field: 'region',
+ editable: true,
+ width: 150
+ },
+ {
+ headerName: 'Місцезнаходження, км+ справа',
+ field: 'locationRight',
+ editable: true,
+ width: 150
+ },
+ {
+ headerName: 'Місцезнаходження, км+ зліва',
+ field: 'locationLeft',
+ editable: true,
+ width: 150
+ },
+ {
+ headerName: 'Технічний стан',
+ field: 'state',
+ editable: true,
+ width: 150
+ }
+ ];
+ }
+}
diff --git a/src/app/pages/statements/components/busStop2/busStop2.html b/src/app/pages/statements/components/busStop2/busStop2.html
new file mode 100644
index 0000000..3f5614e
--- /dev/null
+++ b/src/app/pages/statements/components/busStop2/busStop2.html
@@ -0,0 +1,25 @@
+
diff --git a/src/app/pages/statements/components/busStop2/busStop2.scss b/src/app/pages/statements/components/busStop2/busStop2.scss
new file mode 100644
index 0000000..6852454
--- /dev/null
+++ b/src/app/pages/statements/components/busStop2/busStop2.scss
@@ -0,0 +1,59 @@
+@import "../../../../theme/sass/conf/conf";
+
+.ng2-smart-table-container table.ng2-smart-table {
+ th, td {
+ border: 1px solid $border-light !important;
+ line-height: 35px;
+ vertical-align: middle;
+ }
+
+ color: $default-text;
+
+ input {
+ line-height: 1.5 !important;
+ }
+
+ tbody {
+ tr:hover {
+ background: rgba(0, 0, 0, 0.03);
+ }
+ }
+
+ a.ng2-smart-sort-link {
+ font-size: 14px !important;
+ color: $default-text;
+ font-weight: $font-bolder;
+ &.sort {
+ font-weight: $font-bolder !important;
+
+ &::after {
+ border-bottom-color: $default-text !important;
+ }
+ }
+ }
+
+ .ng2-smart-actions {
+ width: 70px;
+ text-align: center;
+ .actions {
+ float: none;
+ text-align: center;
+ }
+ }
+
+ a.ng2-smart-action {
+ font-size: 14px !important;
+ color: $default-text;
+ padding: 0 5px;
+ display: inline-block;
+
+ &.ng2-smart-action-add-add {
+ font-size: 25px !important;
+ }
+ }
+}
+
+nav.ng2-smart-pagination-nav {
+ display: flex;
+ justify-content: center;
+}
diff --git a/src/app/pages/statements/components/busStop2/busStop2.service.ts b/src/app/pages/statements/components/busStop2/busStop2.service.ts
new file mode 100644
index 0000000..d793d48
--- /dev/null
+++ b/src/app/pages/statements/components/busStop2/busStop2.service.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http';
+
+import 'rxjs/add/operator/toPromise';
+
+import { BusStop2 } from './busStop2';
+
+@Injectable()
+export class BusStop2Service {
+ private url = 'http://localhost:5000/busstop';
+ private headers = new Headers({'Content-Type': 'application/json'});
+ constructor(private http: Http) { }
+ getData(): Promise {
+ let busStops: BusStop2[] = [{
+ id: 1,
+ road: 'Test',
+ region: 'Test',
+ locationLeft: '1',
+ locationRight: '1',
+ state: 'Test'
+ }];
+ return Promise.resolve(busStops);
+ // return this.http.get(this.url)
+ // .toPromise()
+ // .then(response => response.json().busStopListDsM as BusStop2[])
+ // .catch(this.handleError);
+ }
+ private handleError(error: any): Promise {
+ console.error('An error occured', error);
+ return Promise.reject(error.message || error);
+ }
+}
diff --git a/src/app/pages/statements/components/busStop2/busStop2.ts b/src/app/pages/statements/components/busStop2/busStop2.ts
new file mode 100644
index 0000000..6c43143
--- /dev/null
+++ b/src/app/pages/statements/components/busStop2/busStop2.ts
@@ -0,0 +1,8 @@
+export class BusStop2 {
+ id: number;
+ road: string;
+ region: string;
+ locationRight: string;
+ locationLeft: string;
+ state: string;
+}
diff --git a/src/app/pages/statements/components/busStop2/index.ts b/src/app/pages/statements/components/busStop2/index.ts
new file mode 100644
index 0000000..d6f915c
--- /dev/null
+++ b/src/app/pages/statements/components/busStop2/index.ts
@@ -0,0 +1 @@
+export * from './busStop2.component';
diff --git a/src/app/pages/statements/statements.component.ts b/src/app/pages/statements/statements.component.ts
index 8aedd76..a5f3790 100644
--- a/src/app/pages/statements/statements.component.ts
+++ b/src/app/pages/statements/statements.component.ts
@@ -1,8 +1,8 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
@Component({
selector: 'statements',
- styles: [],
+ styles: [ ],
template: ``
})
export class Statements {
diff --git a/src/app/pages/statements/statements.module.ts b/src/app/pages/statements/statements.module.ts
index e61b761..48a0540 100644
--- a/src/app/pages/statements/statements.module.ts
+++ b/src/app/pages/statements/statements.module.ts
@@ -3,11 +3,14 @@ import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgaModule } from '../../theme/nga.module';
import { Ng2SmartTableModule } from 'ng2-smart-table';
+import { AgGridModule } from 'ag-grid-ng2/main';
import { routing } from './statements.routing';
import { Statements } from './statements.component';
import { BusStop } from './components/busStop/busStop.component';
+import { BusStop2 } from './components/busStop2/busStop2.component';
import { BusStopService } from './components/busStop/busStop.service';
+import { BusStop2Service } from './components/busStop2/busStop2.service';
@NgModule({
imports: [
@@ -16,13 +19,18 @@ import { BusStopService } from './components/busStop/busStop.service';
NgaModule,
routing,
Ng2SmartTableModule,
+ AgGridModule.withComponents([
+ BusStop2
+ ]),
],
declarations: [
Statements,
BusStop,
+ BusStop2
],
providers: [
BusStopService,
+ BusStop2Service
]
})
export class StatementsModule {
diff --git a/src/app/pages/statements/statements.routing.ts b/src/app/pages/statements/statements.routing.ts
index 5a02eea..e6e6715 100644
--- a/src/app/pages/statements/statements.routing.ts
+++ b/src/app/pages/statements/statements.routing.ts
@@ -2,6 +2,7 @@ import { Routes, RouterModule } from '@angular/router';
import { Statements } from './statements.component';
import { BusStop } from './components/busStop/busStop.component';
+import { BusStop2 } from './components/busStop2/busStop2.component';
// noinspection TypeScriptValidateTypes
const routes: Routes = [
@@ -9,7 +10,8 @@ const routes: Routes = [
path: '',
component: Statements,
children: [
- { path: 'bus-stop', component: BusStop }
+ { path: 'bus-stop', component: BusStop },
+ { path: 'bus-stop-2', component: BusStop2 }
]
}
];
diff --git a/src/app/pages/statements/theme-bootstrap.css b/src/app/pages/statements/theme-bootstrap.css
new file mode 100644
index 0000000..83860fd
--- /dev/null
+++ b/src/app/pages/statements/theme-bootstrap.css
@@ -0,0 +1,480 @@
+.ag-bootstrap {
+ line-height: 1.4;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ color: #000;
+/* this is for the rowGroupPanel, that appears along the top of the grid */
+/* this is for the column drops that appear in the toolPanel */
+}
+.ag-bootstrap img {
+ vertical-align: middle;
+ border: 0;
+}
+.ag-bootstrap .ag-root {
+ border: none;
+}
+.ag-bootstrap .ag-cell-not-inline-editing {
+ padding: 4px;
+}
+.ag-bootstrap .ag-cell-range-selected-1:not(.ag-cell-focus) {
+ background-color: rgba(120,120,120,0.4);
+}
+.ag-bootstrap .ag-cell-range-selected-2:not(.ag-cell-focus) {
+ background-color: rgba(80,80,80,0.4);
+}
+.ag-bootstrap .ag-cell-range-selected-3:not(.ag-cell-focus) {
+ background-color: rgba(40,40,40,0.4);
+}
+.ag-bootstrap .ag-cell-range-selected-4:not(.ag-cell-focus) {
+ background-color: rgba(0,0,0,0.4);
+}
+.ag-bootstrap .ag-column-moving .ag-cell {
+ -webkit-transition: left 0.2s;
+ -moz-transition: left 0.2s;
+ -o-transition: left 0.2s;
+ -ms-transition: left 0.2s;
+ transition: left 0.2s;
+}
+.ag-bootstrap .ag-column-moving .ag-header-cell {
+ -webkit-transition: left 0.2s;
+ -moz-transition: left 0.2s;
+ -o-transition: left 0.2s;
+ -ms-transition: left 0.2s;
+ transition: left 0.2s;
+}
+.ag-bootstrap .ag-column-moving .ag-header-group-cell {
+ -webkit-transition: left 0.2s;
+ -moz-transition: left 0.2s;
+ -o-transition: left 0.2s;
+ -ms-transition: left 0.2s;
+ transition: left 0.2s;
+}
+.ag-bootstrap .ag-cell-focus {
+ border: 2px solid #217346;
+}
+.ag-bootstrap .ag-cell-no-focus {
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+}
+.ag-bootstrap .ag-ltr .ag-cell-no-focus {
+ border-right: none;
+ border-left: 1px solid transparent;
+}
+.ag-bootstrap .ag-rtl .ag-cell-no-focus {
+ border-right: 1px solid transparent;
+ border-left: none;
+}
+.ag-bootstrap .ag-rtl .ag-cell-first-right-pinned {
+ border-left: none;
+}
+.ag-bootstrap .ag-ltr .ag-cell-first-right-pinned {
+ border-left: none;
+}
+.ag-bootstrap .ag-rtl .ag-cell-last-left-pinned {
+ border-right: none;
+}
+.ag-bootstrap .ag-ltr .ag-cell-last-left-pinned {
+ border-right: none;
+}
+.ag-bootstrap .ag-cell-highlight {
+ border: 1px solid #006400;
+}
+.ag-bootstrap .ag-cell-highlight-animation {
+ -webkit-transition: border 1s;
+ -moz-transition: border 1s;
+ -o-transition: border 1s;
+ -ms-transition: border 1s;
+ transition: border 1s;
+}
+.ag-bootstrap .ag-value-change-delta {
+ padding-right: 2px;
+}
+.ag-bootstrap .ag-value-change-delta-up {
+ color: #006400;
+}
+.ag-bootstrap .ag-value-change-delta-down {
+ color: #8b0000;
+}
+.ag-bootstrap .ag-value-change-value {
+ background-color: transparent;
+ border-radius: 1px;
+ padding-left: 1px;
+ padding-right: 1px;
+ -webkit-transition: background-color 1s;
+ -moz-transition: background-color 1s;
+ -o-transition: background-color 1s;
+ -ms-transition: background-color 1s;
+ transition: background-color 1s;
+}
+.ag-bootstrap .ag-value-change-value-highlight {
+ background-color: #cec;
+ -webkit-transition: background-color 0.1s;
+ -moz-transition: background-color 0.1s;
+ -o-transition: background-color 0.1s;
+ -ms-transition: background-color 0.1s;
+ transition: background-color 0.1s;
+}
+.ag-bootstrap .ag-rich-select {
+ font-size: 14px;
+ border: none;
+ background-color: #fff;
+}
+.ag-bootstrap .ag-rich-select-value {
+ padding: 2px;
+}
+.ag-bootstrap .ag-rich-select-list {
+ border-top: 1px solid #d3d3d3;
+}
+.ag-bootstrap .ag-rich-select-row {
+ padding: 2px;
+}
+.ag-bootstrap .ag-rich-select-row-selected {
+ background-color: #bde2e5;
+}
+.ag-bootstrap .ag-large-text {
+ border: none;
+}
+.ag-bootstrap .ag-header {
+ color: #000;
+ background: none;
+ border-bottom: none;
+ font-weight: 600;
+}
+.ag-bootstrap .ag-header-icon {
+ color: #000;
+ stroke: none;
+ fill: #000;
+}
+.ag-bootstrap .ag-no-scrolls .ag-header-container {
+ background: none;
+ border-bottom: none;
+}
+.ag-bootstrap .ag-ltr .ag-header-cell {
+ border-right: none;
+}
+.ag-bootstrap .ag-rtl .ag-header-cell {
+ border-left: none;
+}
+.ag-bootstrap .ag-header-cell-moving .ag-header-cell-label {
+ opacity: 0.5;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+ filter: alpha(opacity=50);
+}
+.ag-bootstrap .ag-header-cell-moving {
+ background-color: #bebebe;
+}
+.ag-bootstrap .ag-ltr .ag-header-group-cell {
+ border-right: none;
+}
+.ag-bootstrap .ag-rtl .ag-header-group-cell {
+ border-left: none;
+}
+.ag-bootstrap .ag-header-group-cell-with-group {
+ border-bottom: none;
+}
+.ag-bootstrap .ag-header-cell-label {
+ padding: 4px 2px 4px 2px;
+}
+.ag-bootstrap .ag-header-cell-text {
+ padding-left: 2px;
+}
+.ag-bootstrap .ag-header-group-cell-label {
+ padding: 4px;
+}
+.ag-bootstrap .ag-ltr .ag-header-group-cell-label {
+ padding-left: 10px;
+}
+.ag-bootstrap .ag-rtl .ag-header-group-cell-label {
+ padding-right: 10px;
+}
+.ag-bootstrap .ag-rtl .ag-header-group-text {
+ margin-left: 2px;
+}
+.ag-bootstrap .ag-ltr .ag-header-group-text {
+ margin-right: 2px;
+}
+.ag-bootstrap .ag-header-cell-menu-button {
+ padding: 2px;
+ margin-top: 4px;
+ margin-left: 1px;
+ margin-right: 1px;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ -webkit-box-sizing: content-box /* When using bootstrap, box-sizing was set to 'border-box' */;
+ -moz-box-sizing: content-box /* When using bootstrap, box-sizing was set to 'border-box' */;
+ box-sizing: content-box /* When using bootstrap, box-sizing was set to 'border-box' */;
+ line-height: 0px /* normal line height, a space was appearing below the menu button */;
+}
+.ag-bootstrap .ag-ltr .ag-pinned-right-header {
+ border-left: none;
+}
+.ag-bootstrap .ag-rtl .ag-pinned-left-header {
+ border-right: none;
+}
+.ag-bootstrap .ag-header-cell-menu-button:hover {
+ border: none;
+}
+.ag-bootstrap .ag-body {
+ background-color: #f6f6f6;
+}
+.ag-bootstrap .ag-row-odd {
+ background-color: #f6f6f6;
+}
+.ag-bootstrap .ag-row-even {
+ background-color: #fff;
+}
+.ag-bootstrap .ag-row-selected {
+ background-color: #b0e0e6;
+}
+.ag-bootstrap .ag-floating-top .ag-row {
+ background-color: #f0f0f0;
+}
+.ag-bootstrap .ag-floating-bottom .ag-row {
+ background-color: #f0f0f0;
+}
+.ag-bootstrap .ag-overlay-loading-wrapper {
+ background-color: rgba(255,255,255,0.5);
+}
+.ag-bootstrap .ag-overlay-loading-center {
+ background-color: #fff;
+ border: none;
+ border-radius: 10px;
+ padding: 10px;
+ color: #000;
+}
+.ag-bootstrap .ag-overlay-no-rows-center {
+ background-color: #fff;
+ border: none;
+ border-radius: 10px;
+ padding: 10px;
+}
+.ag-bootstrap .ag-group-cell-entire-row {
+ background-color: #f6f6f6;
+ padding: 4px;
+}
+.ag-bootstrap .ag-footer-cell-entire-row {
+ background-color: #f6f6f6;
+ padding: 4px;
+}
+.ag-bootstrap .ag-group-cell {
+ font-style: italic;
+}
+.ag-bootstrap .ag-ltr .ag-group-expanded {
+ padding-right: 4px;
+}
+.ag-bootstrap .ag-rtl .ag-group-expanded {
+ padding-left: 4px;
+}
+.ag-bootstrap .ag-ltr .ag-group-contracted {
+ padding-right: 4px;
+}
+.ag-bootstrap .ag-rtl .ag-group-contracted {
+ padding-left: 4px;
+}
+.ag-bootstrap .ag-ltr .ag-group-value {
+ padding-right: 2px;
+}
+.ag-bootstrap .ag-rtl .ag-group-value {
+ padding-left: 2px;
+}
+.ag-bootstrap .ag-ltr .ag-group-checkbox {
+ padding-right: 2px;
+}
+.ag-bootstrap .ag-rtl .ag-group-checkbox {
+ padding-left: 2px;
+}
+.ag-bootstrap .ag-group-child-count {
+ display: inline-block;
+}
+.ag-bootstrap .ag-footer-cell {
+ font-style: italic;
+}
+.ag-bootstrap .ag-menu {
+ border: 1px solid #808080;
+ background-color: #f6f6f6;
+ cursor: default;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+}
+.ag-bootstrap .ag-menu .ag-tab-header {
+ background-color: #e6e6e6;
+}
+.ag-bootstrap .ag-menu .ag-tab {
+ padding: 6px 8px 6px 8px;
+ margin: 2px 2px 0px 2px;
+ display: inline-block;
+ border-right: 1px solid transparent;
+ border-left: 1px solid transparent;
+ border-top: 1px solid transparent;
+ border-top-right-radius: 2px;
+ border-top-left-radius: 2px;
+}
+.ag-bootstrap .ag-menu .ag-tab-selected {
+ background-color: #f6f6f6;
+ border-right: 1px solid #d3d3d3;
+ border-left: 1px solid #d3d3d3;
+ border-top: 1px solid #d3d3d3;
+}
+.ag-bootstrap .ag-menu-separator {
+ border-top: 1px solid #d3d3d3;
+}
+.ag-bootstrap .ag-menu-option-active {
+ background-color: #bde2e5;
+}
+.ag-bootstrap .ag-menu-option-icon {
+ padding: 2px 4px 2px 4px;
+ vertical-align: middle;
+}
+.ag-bootstrap .ag-menu-option-text {
+ padding: 2px 4px 2px 4px;
+ vertical-align: middle;
+}
+.ag-bootstrap .ag-menu-option-shortcut {
+ padding: 2px 2px 2px 2px;
+ vertical-align: middle;
+}
+.ag-bootstrap .ag-menu-option-popup-pointer {
+ padding: 2px 4px 2px 4px;
+ vertical-align: middle;
+}
+.ag-bootstrap .ag-menu-option-disabled {
+ opacity: 0.5;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+ filter: alpha(opacity=50);
+}
+.ag-bootstrap .ag-menu-column-select-wrapper {
+ margin: 2px;
+}
+.ag-bootstrap .ag-filter-checkbox {
+ position: relative;
+ top: 2px;
+ left: 2px;
+}
+.ag-bootstrap .ag-filter-header-container {
+ border-bottom: 1px solid #d3d3d3;
+}
+.ag-bootstrap .ag-filter-apply-panel {
+ border-top: 1px solid #d3d3d3;
+ padding: 2px;
+}
+.ag-bootstrap .ag-filter-value {
+ margin-left: 4px;
+}
+.ag-bootstrap .ag-ltr .ag-selection-checkbox {
+ padding-right: 4px;
+}
+.ag-bootstrap .ag-rtl .ag-selection-checkbox {
+ padding-left: 4px;
+}
+.ag-bootstrap .ag-paging-panel {
+ padding: 4px;
+}
+.ag-bootstrap .ag-paging-button {
+ margin-left: 4px;
+ margin-right: 4px;
+}
+.ag-bootstrap .ag-paging-row-summary-panel {
+ display: inline-block;
+ width: 300px;
+}
+.ag-bootstrap .ag-tool-panel {
+ background-color: #f6f6f6;
+ border-bottom: none;
+ border-top: none;
+ color: #000;
+}
+.ag-bootstrap .ltr .ag-tool-panel {
+ border-right: none;
+}
+.ag-bootstrap .rtl .ag-tool-panel {
+ border-left: none;
+}
+.ag-bootstrap .ag-status-bar {
+ color: #000;
+ background-color: #f6f6f6;
+ font-size: 14px;
+ height: 22px;
+ border-bottom: none;
+ border-left: none;
+ border-right: none;
+ padding: 2px;
+}
+.ag-bootstrap .ag-status-bar-aggregations {
+ float: right;
+}
+.ag-bootstrap .ag-status-bar-item {
+ padding-left: 10px;
+}
+.ag-bootstrap .ag-column-drop-cell {
+ background: none;
+ color: #000;
+ border: 1px solid #808080;
+}
+.ag-bootstrap .ag-column-drop-cell-ghost {
+ opacity: 0.5;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+ filter: alpha(opacity=50);
+}
+.ag-bootstrap .ag-column-drop-cell-text {
+ padding-left: 2px;
+ padding-right: 2px;
+}
+.ag-bootstrap .ag-column-drop-cell-button {
+ border: 1px solid transparent;
+ padding-left: 2px;
+ padding-right: 2px;
+ border-radius: 3px;
+}
+.ag-bootstrap .ag-column-drop-cell-button:hover {
+ border: none;
+}
+.ag-bootstrap .ag-column-drop-empty-message {
+ padding-left: 2px;
+ padding-right: 2px;
+ color: #808080;
+}
+.ag-bootstrap .ag-column-drop-icon {
+ margin: 3px;
+}
+.ag-bootstrap .ag-column-drop {
+ background-color: #f6f6f6;
+}
+.ag-bootstrap .ag-column-drop-horizontal {
+ padding: 2px;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+}
+.ag-bootstrap .ag-column-drop-vertical {
+ padding: 4px 4px 10px 4px;
+ border-bottom: none;
+}
+.ag-bootstrap .ag-column-drop-vertical .ag-column-drop-cell {
+ margin-top: 2px;
+}
+.ag-bootstrap .ag-column-drop-vertical .ag-column-drop-empty-message {
+ text-align: center;
+ padding: 5px;
+}
+.ag-bootstrap .ag-pivot-mode {
+ border-bottom: none;
+ padding: 4px;
+ background-color: #f6f6f6;
+}
+.ag-bootstrap .ag-tool-panel .ag-column-select-panel {
+ border-bottom: none;
+}
+.ag-bootstrap .ag-select-agg-func-popup {
+ cursor: default;
+ position: absolute;
+ font-size: 14px;
+ background-color: #fff;
+ border: none;
+}
+.ag-bootstrap .ag-select-agg-func-item {
+ padding-left: 2px;
+ padding-right: 2px;
+}
+.ag-bootstrap .ag-select-agg-func-item:hover {
+ background-color: #bde2e5;
+}
diff --git a/src/index.html b/src/index.html
index a2cbf84..f8f60b3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,8 +7,9 @@
<%= htmlWebpackPlugin.options.title %>
+
+
-
<% if (webpackConfig.htmlElements.headTags) { %>
<%= webpackConfig.htmlElements.headTags %>
--
libgit2 0.21.4