Ajout d'une gestion de boîte de dialogue

src/app/app.component.html

@@ -1,3 +1,5 @@
+
+
 <mat-toolbar color="primary" >
   <button class="hamburger mat-button" mat-button="" title="Docs menu" (click)="sidenav.toggle()">
     <mat-icon>menu</mat-icon>
@@ -63,3 +65,5 @@
 
 
 </mat-sidenav-container>
+
+<dialog></dialog>

src/app/app.module.ts

@@ -1,20 +1,28 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
 import {
-  MatButtonModule, MatCardModule, MatGridListModule, MatIconModule, MatListModule, MatMenuModule, MatSidenavModule,
+  MatButtonModule,
+  MatCardModule,
+  MatDialogModule,
+  MatGridListModule,
+  MatIconModule,
+  MatListModule,
+  MatMenuModule,
+  MatSidenavModule,
   MatToolbarModule
 } from '@angular/material';
 import {RouterModule, Routes} from '@angular/router';
-import { HomeComponent } from './home/home.component';
-import { RouterLinkWithHref } from '@angular/router';
+import {HomeComponent} from './home/home.component';
 import {VttTraceComponent} from './vtt-trace/vtt-trace/vtt-trace.component';
-import { LeafletModule } from '@asymmetrik/ngx-leaflet';
-import {HttpClientModule} from "@angular/common/http";
+import {LeafletModule} from '@asymmetrik/ngx-leaflet';
+import {HttpClientModule} from '@angular/common/http';
 import {FormsModule} from '@angular/forms';
 import {VttTraceFormNewTraceComponent} from './vtt-trace/vtt-trace/vtt-trace.formNewTraceComponent';
+import {DialogComponent} from './dialog/dialog.component';
+import { MyDialogComponent } from './my-dialog/my-dialog.component';
 
 const routes: Routes = [
   {path: 'home', component: HomeComponent},
@@ -32,7 +40,10 @@ const routes: Routes = [
     AppComponent,
     HomeComponent,
     VttTraceComponent,
-    VttTraceFormNewTraceComponent
+    VttTraceFormNewTraceComponent,
+    DialogComponent,
+    MyDialogComponent,
+    MyDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -45,11 +56,13 @@ const routes: Routes = [
     MatIconModule,
     MatSidenavModule,
     MatListModule,
+    MatDialogModule,
     RouterModule.forRoot(routes),
     HttpClientModule,
     LeafletModule.forRoot(),
     FormsModule
   ],
+  entryComponents: [MyDialogComponent],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/dialog/dialog.component.html

@@ -0,0 +1,12 @@
+
+<mat-card class="card1">
+  <mat-card-header>
+    <mat-card-title><h1>Dialog Demo</h1></mat-card-title>
+  </mat-card-header>
+  <hr>
+  <mat-card-content>
+    <button mat-raised-button (click)="openDialog()">Open Dialog</button>
+    <hr>
+    <strong>Result: {{dialogResult}}</strong>
+  </mat-card-content>
+</mat-card>

src/app/dialog/dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogComponentComponent } from './dialog-component.component';
+
+describe('DialogComponentComponent', () => {
+  let component: DialogComponentComponent;
+  let fixture: ComponentFixture<DialogComponentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DialogComponentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogComponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dialog/dialog.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import {MatDialog} from '@angular/material';
+import {MyDialogComponent} from '../my-dialog/my-dialog.component';
+
+@Component({
+  selector: 'app-dialog',
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.css']
+})
+export class DialogComponent implements OnInit {
+
+  dialogResult;
+
+  constructor(public dialog: MatDialog) { }
+
+  ngOnInit() {
+  }
+
+  openDialog() {
+    const dialogRef = this.dialog.open(MyDialogComponent, {
+      width: '600px',
+      data: 'thist text is passed into the dialog!'
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(`Dialog closed: ${result}`);
+      this.dialogResult = result;
+    });
+    }
+
+
+}

src/app/my-dialog/my-dialog.component.html

@@ -0,0 +1,15 @@
+<div>
+  <h2 md-dialog-title>MY DIALOG</h2>
+  <hr>
+  <mat-dialog-content>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam maxime cum dolorem officiis assumenda rem alias, omnis nobis nam. Ratione soluta libero architecto cupiditate at fugit consectetur sit dignissimos vitae.
+    <br>
+    <br>
+    <strong>{{data}}</strong>
+  </mat-dialog-content>
+  <hr>
+  <mat-dialog-actions>
+    <button md-raised-button (click)="onCloseConfirm()">CONFIRM</button>&nbsp;
+    <button md-raised-button (click)="onCloseCancel()">CANCEL</button>
+  </mat-dialog-actions>
+</div>

src/app/my-dialog/my-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyDialogComponentComponent } from './my-dialog-component.component';
+
+describe('MyDialogComponentComponent', () => {
+  let component: MyDialogComponentComponent;
+  let fixture: ComponentFixture<MyDialogComponentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MyDialogComponentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyDialogComponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/my-dialog/my-dialog.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material';
+import {MatDialogRef} from '@angular/material';
+
+@Component({
+  selector: 'app-my-dialog',
+  templateUrl: './my-dialog.component.html',
+  styleUrls: ['./my-dialog.component.css']
+})
+export class MyDialogComponent implements OnInit {
+
+  constructor(public thisDialogRef: MatDialogRef<MyDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: string) { }
+
+  ngOnInit() {
+  }
+
+  onCloseConfirm() {
+    this.thisDialogRef.close('Confirm');
+  }
+
+  onCloseCancel() {
+    this.thisDialogRef.close('Cancel');
+  }
+}

src/app/vtt-trace/vtt-trace/vtt-trace.component.html

@@ -31,7 +31,7 @@
 
     <!-- Control Form -->
     <div class="col-sm-12 col-md-6 col-lg-4">
-
+angular  data refresh event
       <form>
 
         <div class="form-group">
@@ -61,8 +61,6 @@
             <input type="text" class="form-control" name="latitude" [(ngModel)]="latitude" required>
           </div>
         </div>
-
-
         <div class="form-group row">
           <div class="col-4">
             <label class="col-form-label float-right">
@@ -81,9 +79,8 @@
       </form>
       {{zoom}}
     </div>
-    <app-vtt-form-new-trace>
 
-    </app-vtt-form-new-trace>
+    <app-dialog></app-dialog>
 
   </div>
 </div>

src/app/vtt-trace/vtt-trace/vtt-trace.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {geoJSON, GeoJSON, icon, LatLng, latLng, marker, polyline, tileLayer} from 'leaflet';
+import {geoJSON, GeoJSON, icon, LatLng, latLng, map, marker, polyline, tileLayer} from 'leaflet';
 import {VttTraceWsService} from './vtt-trace-ws.service';
 import {Feature, LineString, MultiLineString, Point} from 'geojson';
 import {VttTraceFormNewTraceComponent} from './vtt-trace.formNewTraceComponent';
@@ -132,6 +132,12 @@ export class VttTraceComponent implements OnInit {
     this.addRoute6();
   }
 
+  resetLayers () {
+    console.log('Resetting layers');
+    // console.log(`Here\'s the counter: ${this.counter}`);
+    this.layers = [];
+  }
+
   private getMarkersObs() {
     this.vttTraceWs.gettVttRandosDescFromServerObs()
       .subscribe((response: Array<string>) => {
@@ -177,17 +183,26 @@ export class VttTraceComponent implements OnInit {
   }
 
   markerOnClick(e) {
+    console.log(e.sourceTarget._latlng);
     const attributes = e.sourceTarget.options;
     console.log(attributes.title);
     // do some stuff…
     // this.addTrace('' + attributes.title);
     console.log(attributes);
-    this.options.zoom = 9;
+    this.centerAndZoom(e.sourceTarget._latlng.lat, e.sourceTarget._latlng.lng, 9);
+    this.zoom = 9;
+    this.latitude = e.sourceTarget._latlng.lat;
+    this.longitude = e.sourceTarget._latlng.lng;
+    this.onApply();
+    this.resetLayers();
+    // How to refresh automaticaly the map???
+    // this._onResize();
+    // this.geoJSON.layer.addEventParent(geoJSON.);
 
     this.vttTraceWs.getTraceFromFile(attributes.title)
       .subscribe(data => {
         // console.log(data);
-        const featureCollection: GeoJSON.FeatureCollection<Point | LineString | MultiLineString> = data
+        const featureCollection: GeoJSON.FeatureCollection<Point | LineString | MultiLineString> = data;
         // const g = featureCollection.features[0].geometry.coordinates;
         // console.log(featureCollection.features[0].geometry.coordinates[0]);
         // this.layers.push(polyline(GeoJSON.coordsToLatLngs(g, 1)));
@@ -207,8 +222,8 @@ export class VttTraceComponent implements OnInit {
   addTrace(fileName: string) {
     this.vttTraceWs.getTraceFromFile(fileName)
       .subscribe(data => {
-        console.log(data)
-        const featureCollection: GeoJSON.FeatureCollection<Point | LineString | MultiLineString> = data
+        console.log(data);
+        const featureCollection: GeoJSON.FeatureCollection<Point | LineString | MultiLineString> = data;
         const g = featureCollection.features[0].geometry.coordinates;
         console.log(featureCollection.features[0].geometry.coordinates[0]);
         this.layers.push(polyline(GeoJSON.coordsToLatLngs(g, 1)));
@@ -216,6 +231,14 @@ export class VttTraceComponent implements OnInit {
     return false;
   }
 
+  centerAndZoom(lat, lng, zoom) {
+    this.zoom = zoom;
+    this.center = latLng(lat, lng);
+
+    return false;
+
+  }
+
   addRoute() {
     // create a red polyline from an array of LatLng points
     const route = polyline(this.vttTraceWs.getMockRoute1());
@@ -233,8 +256,8 @@ export class VttTraceComponent implements OnInit {
   addRoute4() {
     this.vttTraceWs.getMockRoute4()
       .subscribe(data => {
-        console.log(data)
-        const featureCollection: GeoJSON.FeatureCollection<Point | LineString | MultiLineString> = data
+        console.log(data);
+        const featureCollection: GeoJSON.FeatureCollection<Point | LineString | MultiLineString> = data;
         const g = featureCollection.features[1].geometry.coordinates;
         //     console.log(g);
         console.log(featureCollection.features[1].geometry.coordinates[0]);
@@ -247,8 +270,8 @@ export class VttTraceComponent implements OnInit {
   addRoute5() {
     this.vttTraceWs.getMockRoute5()
       .subscribe(data => {
-        console.log(data)
-        const featureCollection: GeoJSON.FeatureCollection<Point | LineString | MultiLineString> = data
+        console.log(data);
+        const featureCollection: GeoJSON.FeatureCollection<Point | LineString | MultiLineString> = data;
         const g = featureCollection.features[0].geometry.coordinates;
         console.log(featureCollection.features[0].geometry.coordinates[0]);
         this.layers.push(polyline(GeoJSON.coordsToLatLngs(g, 1)));
@@ -258,8 +281,8 @@ export class VttTraceComponent implements OnInit {
   addRoute6() {
     this.vttTraceWs.getMockRoute6()
       .subscribe(data => {
-        console.log(data)
-        const featureCollection: GeoJSON.FeatureCollection<Point | LineString | MultiLineString> = data
+        console.log(data);
+        const featureCollection: GeoJSON.FeatureCollection<Point | LineString | MultiLineString> = data;
         const g = featureCollection.features[0].geometry.coordinates;
         console.log(featureCollection.features[0].geometry.coordinates[0]);
         this.layers.push(polyline(GeoJSON.coordsToLatLngs(g, 1)));

src/app/vtt-trace/vtt-trace/vtt-trace.formNewTrace.html

@@ -1,72 +1,72 @@
-<div class="vtt">
-  <div class="row">
+<div style="text-align:center">
+    <div class="vtt">
+      <!-- Control Form -->
+      <div class="col-sm-12 col-md-6 col-lg-4">
+        <form (ngSubmit)="register()" #traceForm="ngForm">
+          <label class="col-form-label float-right">
+            Création nouvelle randonnée
+          </label>
 
-    <!-- Control Form -->
-    <div class="col-sm-12 col-md-6 col-lg-4">
-      <form (ngSubmit)="register()" #traceForm="ngForm">
-        <label class="col-form-label float-right">
-          Création nouvelle randonnée
-        </label>
+          <!-- Zoom Levels -->
+          <div class="form-group row">
+            <div class="col-4">
+              <label class="col-form-label float-right">
+                Nom rando
+              </label>
+            </div>
+            <div class="col">
+              <input type="text"  name="newTraceName" [(ngModel)]="vttTrace.name" required ngModel >
+            </div>
 
-        <!-- Zoom Levels -->
-        <div class="form-group row">
-          <div class="col-4">
-            <label class="col-form-label float-right">
-              Nom rando
-            </label>
-          </div>
-          <div class="col">
-            <input type="text"  name="newTraceName" [(ngModel)]="vttTrace.name" required ngModel >
-          </div>
+            <div class="col-4">
+              <label class="col-form-label float-right">
+                Description rando
+              </label>
+            </div>
+            <div class="col">
+              <input type="text" name="newTraceDesc" [(ngModel)]="vttTrace.description" required ngModel >
+            </div>
 
-          <div class="col-4">
-            <label class="col-form-label float-right">
-              Description rando
-            </label>
           </div>
-          <div class="col">
-            <input type="text" name="newTraceDesc" [(ngModel)]="vttTrace.description" required ngModel >
-          </div>
-
-        </div>
 
-        <div class="form-group row">
-          <div class="col-4">
-            <label class="col-form-label float-right">
-              Fichier trace Json
-            </label>
+          <div class="form-group row">
+            <div class="col-4">
+              <label class="col-form-label float-right">
+                Fichier trace Json
+              </label>
+            </div>
+            <div class="col">
+              <input type="text" name="newTraceFilename" [(ngModel)]="vttTrace.filename" required ngModel >
+            </div>
           </div>
-          <div class="col">
-            <input type="text" name="newTraceFilename" [(ngModel)]="vttTrace.filename" required ngModel >
-          </div>
-        </div>
 
-        <div class="form-group row">
-          <div class="col-4">
-            <label class="col-form-label float-right">
-              Longitude
-            </label>
-          </div>
-          <div class="col">
-            <input type="text" name="newTraceLongitude" [(ngModel)]="vttTrace.longitude" required ngModel >
+          <div class="form-group row">
+            <div class="col-4">
+              <label class="col-form-label float-right">
+                Longitude
+              </label>
+            </div>
+            <div class="col">
+              <input type="text" name="newTraceLongitude" [(ngModel)]="vttTrace.longitude" required ngModel >
+            </div>
           </div>
-        </div>
 
-        <div class="form-group row">
-          <div class="col-4">
-            <label class="col-form-label float-right">
-              Latitude
-            </label>
+          <div class="form-group row">
+            <div class="col-4">
+              <label class="col-form-label float-right">
+                Latitude
+              </label>
+            </div>
+            <div class="col">
+              <input type="text" name="newTraceLatitude" [(ngModel)]="vttTrace.latitude" required ngModel >
+            </div>
           </div>
-          <div class="col">
-            <input type="text" name="newTraceLatitude" [(ngModel)]="vttTrace.latitude" required ngModel >
-          </div>
-        </div>
 
 
-        <button type="submit">Créer trace</button>
+          <button type="submit">Créer trace</button>
 
-      </form>
+        </form>
+      </div>
     </div>
-  </div>
 </div>
+

src/app/vtt-trace/vtt-trace/vtt-trace.formNewTraceComponent.ts

@@ -1,13 +1,7 @@
-import {ApplicationRef, ChangeDetectorRef, Component, OnInit} from '@angular/core';
-import {
-  circle, geoJSON, GeoJSONOptions, icon, latLng, LatLng, Marker, marker, point, polygon, polyline, Polyline,
-  tileLayer
-} from 'leaflet';
-import {GeoJSON, LatLngExpression, Layer} from 'leaflet';
+import {Component} from '@angular/core';
+import {LatLng} from 'leaflet';
 import {VttTraceWsService} from './vtt-trace-ws.service';
-import {Feature, GeoJsonObject, GeometryObject, LineString, MultiLineString, Point} from 'geojson';
-import {LeafletCoreDemoModel} from './core-demo.model';
-import {Observable} from 'rxjs/Observable';
+
 
 class VttTrace {
   coordinates: LatLng;