Administrator / maps-admin

Commit e74fdc9c10bd397b17c496b8049ea47dd4379159

Authored by Yarik
1 parent 7d0da8c3

Button

Showing 5 changed files with 47 additions and 5 deletions   Show diff stats
Inline Side-by-side
src/app/app.module.ts
  Show/Hide comments   View file @e74fdc9
... ... @@ -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
  Show/Hide comments   View file @e74fdc9
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
  Show/Hide comments   View file @e74fdc9
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 &#39;../../../animations/router.animation&#39;;
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 {
... ...
src/components/road-map.component.ts 0 → 100644
  Show/Hide comments   View file @e74fdc9
  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
  Show/Hide comments   View file @e74fdc9
... ... @@ -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
... ...