Commit e74fdc9c10bd397b17c496b8049ea47dd4379159
1 parent
7d0da8c3
Button
Showing
5 changed files
with
47 additions
and
5 deletions
Show diff stats
src/app/app.module.ts
... | ... | @@ -37,6 +37,7 @@ import { RoadServiceComponent } from './data/road-service/road-service.component |
37 | 37 | import { SettlementAddressLinkComponent } from './data/settlement-address-link/settlement-address-link.component'; |
38 | 38 | import { MapComponent } from './data/map/map.component'; |
39 | 39 | import { MapItemsComponent } from './data/map-items/map-items.component'; |
40 | +import { RoadMapComponent } from '../components/road-map.component'; | |
40 | 41 | |
41 | 42 | // Services |
42 | 43 | import { BusStopCreateService } from '../services/bus-stop-create.service'; |
... | ... | @@ -88,7 +89,8 @@ const httpInterceptorProviders: Type<any>[] = [ |
88 | 89 | CrossSectionComponent, |
89 | 90 | RoadServiceComponent, |
90 | 91 | SettlementAddressLinkComponent, |
91 | - MapComponent | |
92 | + MapComponent, | |
93 | + RoadMapComponent | |
92 | 94 | ], // directives, components, and pipes owned by this NgModule |
93 | 95 | imports: [ |
94 | 96 | BrowserModule, | ... | ... |
src/app/data/road/road.component.html
1 | 1 | <div class="grid_containert" *ngIf="showGrid"> |
2 | + <road-map [identificator]="'road-map'"></road-map> | |
2 | 3 | <ag-grid-ng2 #agGrid style="width: 100%; height: 100%;" class="ag-blue" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups |
3 | 4 | toolPanelSuppressValues debug rowHeight="22" rowSelection="multiple" (cellClicked)="onCellClicked($event)" (cellDoubleClicked)="onCellDoubleClicked($event)" (cellContextMenu)="onCellContextMenu($event)" (cellValueChanged)="onCellValueChanged($event)" |
4 | 5 | (cellFocused)="onCellFocused($event)" (rowSelected)="onRowSelected($event)" (selectionChanged)="onSelectionChanged()" (beforeFilterChanged)="onBeforeFilterChanged()" (afterFilterChanged)="onAfterFilterChanged()" (filterModified)="onFilterModified()" |
... | ... | @@ -6,6 +7,7 @@ |
6 | 7 | </ag-grid-ng2> |
7 | 8 | <div class="control_button"> |
8 | 9 | <div *tdLoading="'loading'; mode:'indeterminate'; type:'circle'; strategy:'replace'; color:'accent'"></div> |
10 | + <button md-fab color="accent" [disabled]="!isSelected" (click)="showOnMap()" type="button"><md-icon>map</md-icon></button> | |
9 | 11 | <button md-fab color="accent" [disabled]="isNew || isSelected" (click)="addNewRow()" type="button"><md-icon>add</md-icon></button> |
10 | 12 | <button md-fab color="warn" [disabled]="!isSelected" (click)="deleteRows()" type="button"><md-icon>delete</md-icon></button> |
11 | 13 | </div> | ... | ... |
src/app/data/road/road.component.ts
1 | -import { Component, ViewEncapsulation, AfterViewInit } from '@angular/core'; | |
1 | +import { Component, ViewEncapsulation, AfterViewInit, ViewChild } from '@angular/core'; | |
2 | 2 | import { TdLoadingService } from '@covalent/core'; |
3 | 3 | import { GridOptions, IGetRowsParams, IRowModel } from 'ag-grid/main'; |
4 | 4 | |
5 | 5 | import { StatementBase } from '../../../models/statement.base'; |
6 | +import { RoadMapComponent } from '../../../components/road-map.component'; | |
6 | 7 | |
7 | 8 | import { RoadService } from '../../../services/road.service'; |
8 | 9 | import { RoadCreateService } from '../../../services/road-create.service'; |
... | ... | @@ -21,7 +22,8 @@ import { routerTransition } from '../../../animations/router.animation'; |
21 | 22 | encapsulation: ViewEncapsulation.None, |
22 | 23 | }) |
23 | 24 | export class RoadComponent extends StatementBase { |
24 | - | |
25 | + @ViewChild(RoadMapComponent) | |
26 | + protected mapComponent: RoadMapComponent; | |
25 | 27 | public roadTypes: RoadTypeSelectList[]; |
26 | 28 | |
27 | 29 | constructor( |
... | ... | @@ -32,6 +34,11 @@ export class RoadComponent extends StatementBase { |
32 | 34 | super(); |
33 | 35 | } |
34 | 36 | |
37 | + public showOnMap(): void { | |
38 | + console.log(this.gridOptions.api.getSelectedRows()[0].id); | |
39 | + this.mapComponent.showMap(); | |
40 | + } | |
41 | + | |
35 | 42 | protected createColumnDefs(): any[] { |
36 | 43 | return [ |
37 | 44 | { | ... | ... |
1 | +import { Component, Input, AfterViewInit } from '@angular/core'; | |
2 | +import * as L from 'leaflet'; | |
3 | + | |
4 | +@Component({ | |
5 | + // tslint:disable-next-line:component-selector | |
6 | + selector: 'road-map', | |
7 | + template: '<div id="{{identificator}}" [style.height]="getHeight()" ></div>', | |
8 | +}) | |
9 | +export class RoadMapComponent implements AfterViewInit { | |
10 | + protected isVisible: boolean = false; | |
11 | + protected map: L.Map; | |
12 | + @Input() identificator: string = 'mapID'; | |
13 | + | |
14 | + public ngAfterViewInit(): void { | |
15 | + this.map = L.map(this.identificator).setView([51.505, -0.09], 13); | |
16 | + L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
17 | + maxZoom: 18, | |
18 | + }).addTo(this.map); | |
19 | + } | |
20 | + public showMap(): void { | |
21 | + this.isVisible = true; | |
22 | + } | |
23 | + public getHeight(): string { | |
24 | + return this.isVisible ? '100%' : '0'; | |
25 | + } | |
26 | +} | ... | ... |
src/styles.scss
... | ... | @@ -32,11 +32,16 @@ a[md-icon-button] { |
32 | 32 | } |
33 | 33 | } |
34 | 34 | |
35 | -.map-container{ | |
35 | +.map-container { | |
36 | 36 | height: 400px; |
37 | 37 | width: 400px; |
38 | 38 | } |
39 | -#mapId{ | |
39 | + | |
40 | +#mapId { | |
40 | 41 | height: 400px; |
41 | 42 | width: 400px; |
43 | +} | |
44 | + | |
45 | +road-map>div { | |
46 | + transition: height 1s ease-out; | |
42 | 47 | } |
43 | 48 | \ No newline at end of file | ... | ... |