formulaire de création et save REST par POST

src/app/app.module.ts

@@ -14,6 +14,7 @@ import {VttTraceComponent} from './vtt-trace/vtt-trace/vtt-trace.component';
 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';
 
 const routes: Routes = [
   {path: 'home', component: HomeComponent},
@@ -30,7 +31,8 @@ const routes: Routes = [
   declarations: [
     AppComponent,
     HomeComponent,
-    VttTraceComponent
+    VttTraceComponent,
+    VttTraceFormNewTraceComponent
   ],
   imports: [
     BrowserModule,
@@ -44,7 +46,6 @@ const routes: Routes = [
     MatSidenavModule,
     MatListModule,
     RouterModule.forRoot(routes),
-    LeafletModule.forRoot(),
     HttpClientModule,
     LeafletModule.forRoot(),
     FormsModule

src/app/vtt-trace/vtt-trace/vtt-trace-ws.service.ts

@@ -20,6 +20,26 @@ export class VttTraceWsService {
     return(this.http.get(`${this.baseUrl}/${this.redisApi}`));
   }
 
+  getTraceFromFile(filename) {
+    return this.getJsonFile('/assets/' + filename);
+  }
+
+  putNewTrace(newTrace) {
+    const geoJson = {
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [newTrace.latitude, newTrace.longitude]
+      },
+      properties: {
+        name: newTrace.name,
+        description: newTrace.description,
+        fichier: newTrace.filename
+      }
+    }
+
+    return(this.http.post(`${this.baseUrl}/${this.redisApi}`, geoJson));
+  }
 
   getVttRandosRoute(): GeoJSON.LineString {
     return this.getMockRoute();

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

@@ -19,9 +19,9 @@
        style="height: 500px;"
        [leafletOptions]="options"
        [leafletLayers]="layers"
-       [leafletBaseLayers]="baseLayers"
        [leafletZoom]="zoom"
        [leafletCenter]="center"
+       [leafletLayersControl]="layersControl"
        [leafletLayersControlOptions]="layersControlOptions">
 
   </div>
@@ -81,4 +81,10 @@
       </form>
       {{zoom}}
     </div>
+    <app-vtt-form-new-trace>
+
+    </app-vtt-form-new-trace>
+
+  </div>
 </div>
+

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

@@ -1,10 +1,8 @@
-import {ApplicationRef, ChangeDetectorRef, Component, OnInit} from '@angular/core';
-import {circle, icon, latLng, LatLng, Marker, marker, point, polygon, polyline, Polyline, tileLayer} from 'leaflet';
-import {GeoJSON, LatLngExpression} from 'leaflet';
+import {Component, OnInit} from '@angular/core';
+import {geoJSON, GeoJSON, icon, LatLng, latLng, marker, polyline, tileLayer} from 'leaflet';
 import {VttTraceWsService} from './vtt-trace-ws.service';
-import {Feature, GeometryObject, LineString, MultiLineString, Point} from 'geojson';
-import {LeafletCoreDemoModel} from './core-demo.model';
-import {Observable} from 'rxjs/Observable';
+import {Feature, LineString, MultiLineString, Point} from 'geojson';
+import {VttTraceFormNewTraceComponent} from './vtt-trace.formNewTraceComponent';
 
 
 // Utilise la librairie ngx-leaflet
@@ -18,7 +16,7 @@ import {Observable} from 'rxjs/Observable';
   selector: 'app-vtt-trace',
   templateUrl: './vtt-trace.component.html',
   styleUrls: ['./vtt-trace.component.css'],
-  providers: [VttTraceWsService]
+  providers: [VttTraceWsService, VttTraceFormNewTraceComponent]
 })
 
 export class VttTraceComponent implements OnInit {
@@ -42,14 +40,36 @@ export class VttTraceComponent implements OnInit {
     })
   };
 
-  // Values to bind to Leaflet Directive
-  layersControlOptions = { position: 'bottomright' };
-  baseLayers = {
-    'Open Street Map': this.LAYER_OSM.layer,
-    'Open Cycle Map': this.LAYER_OCM.layer
+  geoJSON = {
+    id: 'geoJSON',
+    name: 'Geo JSON Polygon',
+    enabled: true,
+    layer: geoJSON(
+      ({
+        type: 'Polygon',
+        coordinates: [[
+          [-121.6, 46.87],
+          [-121.5, 46.87],
+          [-121.5, 46.93],
+          [-121.6, 46.87]
+        ]]
+      }) as any,
+      {style: () => ({color: '#ff7800'})})
   };
 
 
+  // Values to bind to Leaflet Directive
+  layersControlOptions = {position: 'bottomright'};
+  layersControl = {
+    baseLayers: {
+      'Open Street Map': this.LAYER_OSM.layer,
+      'Open Cycle Map': this.LAYER_OCM.layer
+    },
+    overlays: {
+      GeoJSON: this.geoJSON.layer
+    }
+  };
+
   /*
    * This is a specification of the leaflet options
    * The reason to duplicate this object is so we can easily render it to the template
@@ -67,27 +87,28 @@ export class VttTraceComponent implements OnInit {
       }
     ],
     zoom: 5,
-    center: [ 46, 2 ]
+    center: [46, 2]
   };
 
   // Fields for managing the form inputs and binding to leaflet zoom/center
-/*
-  model = new LeafletCoreDemoModel(
-    this.optionsSpec.center[0],
-    this.optionsSpec.center[1],
-    this.optionsSpec.zoom
-  );
-*/
+  /*
+    model = new LeafletCoreDemoModel(
+      this.optionsSpec.center[0],
+      this.optionsSpec.center[1],
+      this.optionsSpec.zoom
+    );
+  */
   zoom: number;
   center: LatLng;
   latitude: number;
   longitude: number;
-  zoomLevels: number[] = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 ];
+  zoomLevels: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
+
 
   layers = [];
   options = {
     layers: this.optionsSpec.layers.map((l) => {
-      return tileLayer(l.url, { maxZoom: l.maxZoom, attribution: l.attribution });
+      return tileLayer(l.url, {maxZoom: l.maxZoom, attribution: l.attribution});
     }),
     zoom: this.optionsSpec.zoom,
     center: latLng(this.optionsSpec.center[0], this.optionsSpec.center[1])
@@ -102,10 +123,13 @@ export class VttTraceComponent implements OnInit {
     return false;
   }
 
-  constructor(private vttTraceWs: VttTraceWsService) { }
+  constructor(private vttTraceWs: VttTraceWsService) {
+  }
 
   ngOnInit() {
     this.getMarkersObs();
+    // this.layers.push(newMarker); = L.geoJSON().addTo(map);
+    this.addRoute6();
   }
 
   private getMarkersObs() {
@@ -124,34 +148,71 @@ export class VttTraceComponent implements OnInit {
       [feature.geometry.coordinates[0], feature.geometry.coordinates[1]],
       {
         icon: icon({
-          iconSize: [ 25, 41 ],
-          iconAnchor: [ 13, 41 ],
+          iconSize: [25, 41],
+          iconAnchor: [13, 41],
           iconUrl: 'assets/marker-icon.png',
-          shadowUrl: 'assets/marker-shadow.png'
-        })
+          shadowUrl: 'assets/marker-shadow.png',
+        }),
+        title: '' + feature.properties.fichier
       }
     );
 
-    console.log(feature.properties.name);
-    console.log('here' + this);
+    console.log(feature.properties.fichier);
+    // console.log('here' + this);
     newMarker.bindPopup(feature.properties.name).openPopup();
-    newMarker.on('click', this.markerOnClick, newMarker);
+    // newMarker.on('click', this.markerOnClick, newMarker);
+    newMarker.on('click', this.markerOnClick, this);
     this.layers.push(newMarker);
   }
 
-  markerOnClick(e) {
-    console.log(e);
+  zoomAndCenter(latitude, longitude) {
     const window: Window = self;
-    console.log('parent' + this);
+    // console.log('parent' + this);
+
     this.zoom = 15;
     console.log(this.zoom);
     this.center = latLng(this.latitude, this.longitude);
-    //this.options.center = e.latlng;
+    // this.options.center = e.latlng;
+    // console.log(this.center);
+  }
 
-    console.log(this.center);
-    const attributes = e.layer.properties;
-    console.log(attributes.name, attributes);
+  markerOnClick(e) {
+    const attributes = e.sourceTarget.options;
+    console.log(attributes.title);
     // do some stuff…
+    // this.addTrace('' + attributes.title);
+    console.log(attributes);
+    this.options.zoom = 9;
+
+    this.vttTraceWs.getTraceFromFile(attributes.title)
+      .subscribe(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)));
+        // this.geoJSON.layer.addLayer(polyline(GeoJSON.coordsToLatLngs(g, 1))) ;
+        console.log(this.geoJSON.layer.addData(featureCollection.features[0].geometry));
+        /*this.geoJSON.layer = geoJSON(
+            featureCollection.features[0].geometry as any,
+            { style: () => ({ color: '#ff7800' })});*/
+
+
+        // this.geoJSON.layer = new Layer(polyline(GeoJSON.coordsToLatLngs(g, 1)));
+        // console.log(this.geoJSON.layer.options);
+      });
+    return false;
+  }
+
+  addTrace(fileName: string) {
+    this.vttTraceWs.getTraceFromFile(fileName)
+      .subscribe(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)));
+      });
     return false;
   }
 

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

@@ -0,0 +1,72 @@
+<div class="vtt">
+  <div class="row">
+
+    <!-- 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>
+
+          <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>
+          <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>
+        </div>
+
+        <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>
+
+
+        <button type="submit">Créer trace</button>
+
+      </form>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,64 @@
+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 {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;
+  latitude: number;
+  longitude: number;
+  name: string;
+  description: string;
+  filename: string;
+}
+
+
+// class GeoJsonTrace {
+//   "type": "Feature",
+//   "geometry": {
+//     "type": "Point",
+//     "coordinates": [43.272578333333001, 6.52412]
+//   },
+//   "properties": {
+//     "name": "Grimaud - Le Plan de la Tour - Grimaud",
+//     "description": "blabla",
+//     "fichier": "2018-05-09_PlanDelaTour.json"
+//   }
+// }
+
+@Component({
+  selector: 'app-vtt-form-new-trace',
+  templateUrl: './vtt-trace.formNewTrace.html',
+  styleUrls: ['./vtt-trace.component.css'],
+  providers: [VttTraceWsService]
+})
+
+export class VttTraceFormNewTraceComponent {
+  // Gestion de l'ajout d'une nouvelle trace à déporter dans un module
+  /*newTrace: { "type": "Feature", "geometry": {"type": "Point", "coordinates": [43.12359813, 6.35863452]}, "properties": { "name": "Bormes Mimosa - Printemps 2017","description": "blabla", "fichier": "2017-04-16_BormesMimosa.json"
+    } } }*/
+  vttTrace = new VttTrace();
+
+  constructor(private vttTraceWs: VttTraceWsService) {
+  }
+
+
+  register() {
+    console.log(this.vttTrace);
+
+    this.vttTraceWs.putNewTrace(this.vttTrace)
+      .subscribe((response: Array<string>) => {
+        response.forEach(x => {
+          console.log(response);
+        });
+      });
+  }
+}
+
+