Button

Yarik
1 parent 7d0da8c3
Showing 5 changed files with 47 additions and 5 deletions Show diff stats
src/app/app.module.ts
src/app/data/road/road.component.html
src/app/data/road/road.component.ts
src/components/road-map.component.ts
src/styles.scss
@@ -37,6 +37,7 @@ import { RoadServiceComponent } from &#39;./data/road-service/road-service.component
 import { SettlementAddressLinkComponent } from './data/settlement-address-link/settlement-address-link.component';
 import { MapComponent } from './data/map/map.component';
 import { MapItemsComponent } from './data/map-items/map-items.component';
+import { RoadMapComponent } from '../components/road-map.component';
 // Services
 import { BusStopCreateService } from '../services/bus-stop-create.service';
@@ -88,7 +89,8 @@ const httpInterceptorProviders: Type&lt;any&gt;[] = [
     CrossSectionComponent,
     RoadServiceComponent,
     SettlementAddressLinkComponent,
-    MapComponent
+    MapComponent,
+    RoadMapComponent
   ], // directives, components, and pipes owned by this NgModule
   imports: [
     BrowserModule,
 <div class="grid_containert" *ngIf="showGrid">
+    <road-map [identificator]="'road-map'"></road-map>
     <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()"
@@ -6,6 +7,7 @@
     </ag-grid-ng2>
     <div class="control_button">
         <div *tdLoading="'loading'; mode:'indeterminate'; type:'circle'; strategy:'replace'; color:'accent'"></div>
+        <button md-fab color="accent" [disabled]="!isSelected" (click)="showOnMap()" type="button"><md-icon>map</md-icon></button>
         <button md-fab color="accent" [disabled]="isNew || isSelected" (click)="addNewRow()" type="button"><md-icon>add</md-icon></button>
         <button md-fab color="warn" [disabled]="!isSelected" (click)="deleteRows()" type="button"><md-icon>delete</md-icon></button>
     </div>
-import { Component, ViewEncapsulation, AfterViewInit } from '@angular/core';
+import { Component, ViewEncapsulation, AfterViewInit, ViewChild } from '@angular/core';
 import { TdLoadingService } from '@covalent/core';
 import { GridOptions, IGetRowsParams, IRowModel } from 'ag-grid/main';
 import { StatementBase } from '../../../models/statement.base';
+import { RoadMapComponent } from '../../../components/road-map.component';
 import { RoadService } from '../../../services/road.service';
 import { RoadCreateService } from '../../../services/road-create.service';
@@ -21,7 +22,8 @@ import { routerTransition } from &#39;../../../animations/router.animation&#39;;
     encapsulation: ViewEncapsulation.None,
 })
 export class RoadComponent extends StatementBase {
-
+  @ViewChild(RoadMapComponent)
+  protected mapComponent: RoadMapComponent;
     public roadTypes: RoadTypeSelectList[];
     constructor(
@@ -32,6 +34,11 @@ export class RoadComponent extends StatementBase {
         super();
     }
+    public showOnMap(): void {
+      console.log(this.gridOptions.api.getSelectedRows()[0].id);
+      this.mapComponent.showMap();
+    }
+
   protected createColumnDefs(): any[] {
     return [
       {
+import { Component, Input, AfterViewInit } from '@angular/core';
+import * as L from 'leaflet';
+
+@Component({
+    // tslint:disable-next-line:component-selector
+    selector: 'road-map',
+    template: '<div id="{{identificator}}" [style.height]="getHeight()" ></div>',
+})
+export class RoadMapComponent implements AfterViewInit {
+    protected isVisible: boolean = false;
+    protected map: L.Map;
+    @Input() identificator: string = 'mapID';
+
+    public ngAfterViewInit(): void {
+        this.map = L.map(this.identificator).setView([51.505, -0.09], 13);
+        L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 18,
+        }).addTo(this.map);
+    }
+    public showMap(): void {
+        this.isVisible = true;
+    }
+    public getHeight(): string {
+        return this.isVisible ? '100%' : '0';
+    }
+}
@@ -32,11 +32,16 @@ a[md-icon-button] {
     }
 }
-.map-container{
+.map-container {
     height: 400px;
     width: 400px;
 }
-#mapId{
+
+#mapId {
     height: 400px;
     width: 400px;
+}
+
+road-map>div {
+    transition: height 1s ease-out;
 }
 \ No newline at end of file