Selection Editable Objects

src/renderer/components/AirportEdit.vue

@@ -11,19 +11,19 @@
       <div>
         <el-row>
           <el-col :span="7">ICAO :</el-col>
-          <el-col :span="15">{{ this.$store.state.Editable.data.properties.icao }}</el-col>
+          <el-col :span="15">{{ this.$store.state.Editable.data.airports[this.$store.state.Editable.index].icao }}</el-col>
         </el-row>
         <el-row>
           <el-col :span="7">Name :</el-col>
-          <el-col :span="15">{{ this.$store.state.Editable.data.properties.name }}</el-col>
+          <el-col :span="15">{{ this.$store.state.Editable.data.airports[this.$store.state.Editable.index].name }}</el-col>
         </el-row>
         <el-row>
           <el-col :span="7">Flights :</el-col>
-          <el-col :span="15">{{ this.$store.state.Editable.data.properties.flights }}</el-col>
+          <el-col :span="15">{{ this.$store.state.Editable.data.airports[this.$store.state.Editable.index].flights }}</el-col>
         </el-row>
         <el-row>
           <el-col :span="7">Airlines :</el-col>
-          <el-col :span="15">{{ this.$store.state.Editable.data.properties.airlines }}</el-col>
+          <el-col :span="15">{{ this.$store.state.Editable.data.airports[this.$store.state.Editable.index].airlines }}</el-col>
         </el-row>
         <el-row>
           <el-col :span="7">Groundnet :</el-col>
@@ -41,10 +41,7 @@
         return this.$store.state.Editable.type === 'airport'
       },
       groundnet: function () {
-        return this.$store.state.Editable.data.properties.groundnet
+        return this.$store.state.Editable.data.airports[this.$store.state.Editable.index].groundnet
-      },
-      airports_directory: function () {
-        return this.$store.state.Settings.settings.airportsDirectory
       }
     }
   }

src/renderer/components/EditLayer.vue

@@ -30,6 +30,9 @@
     },
     methods: {
       load (icao) {
+        if (this.groundnet !== undefined) {
+          this.groundnet.removeFrom(this.$parent.mapObject)
+        }
         this.groundnet = readGroundnetXML(this.$store.state.Settings.settings.airportsDirectory, icao)
         this.groundnet.addTo(this.$parent.mapObject)
         this.groundnet.eachLayer(l => {

src/renderer/components/FlightgearMap.vue

@@ -84,7 +84,7 @@
         return ret && ret2
       },
       addEvent (event, item) {
-        console.log(event, item)
+        // console.log(event, item)
         if (item.properties.groundnet === 0) {
           event.target.setStyle({color: 'red', fillcolor: 'red'})
         } else if ((item.properties.flights / item.properties.parking) > 10) {
@@ -93,7 +93,7 @@
       },
       onClick (item) {
         console.log(item)
-        this.$store.commit('SET_EDIT_AIRPORT', item)
+        this.$store.commit('SET_EDIT_AIRPORT', item.properties)
       },
       zoomUpdated (zoom) {
         this.$store.dispatch('setZoom', zoom)

src/renderer/components/GroundnetEdit.vue

@@ -18,6 +18,7 @@
           radius: 18
           type: "gate"
         -->
+        {{this.$store.state.Editable.index}}
         <el-row>
           <el-col :span="7"><span class="demo-input-label">Name :</span></el-col>          
           <el-col :span="15"><el-input placeholder="Please input" v-model="name"></el-input></el-col>
@@ -35,7 +36,7 @@
       name: {
       // getter
         get: function () {
-          return this.$store.state.Editable.data.name
+          return this.$store.state.Editable.data.parking[this.$store.state.Editable.index].name
         },
         // setter
         set: function (newValue) {

src/renderer/loaders/ParkingSpot.js

@@ -6,24 +6,21 @@ const util = require('util');
 
 var $ = require('jquery');
 L.ParkingSpot = L.Circle.extend({
-    options: { 
-        id: 'Custom data!',
-        attributes: {}
-    },
-
     createDirection: function () {
         if (this.direction === undefined ) {
             var start = this._latlng;
             var options = { units: 'kilometers' };
-            var end = turf.destination([start.lat, start.lng], this.options.attributes.radius / 1000, this.options.attributes.heading - 180, options);
+            
+            var end = turf.destination([start.lng, start.lat], this.options.attributes.radius / 1000, this.options.attributes.heading - 180, options);
             // Resize, since leaflet is wrong      
-            var rad2 = start.distanceTo(end.geometry.coordinates);
+            var rad2 = start.distanceTo(this.turfToLatLng(end), options);
+            console.debug('Dist ', start, [start.lng, start.lat], end.geometry.coordinates, this.options.attributes.radius, rad2);
             this.setRadius(rad2);
             // console.log(util.inspect(this.editor));
             if(this.editor._resizeLatLng.__vertex !== undefined){
-                this.editor._resizeLatLng.__vertex.setLatLng(end.geometry.coordinates);
+                this.editor._resizeLatLng.__vertex.setLatLng(this.turfToLatLng(end));
             }
-            this.direction = L.polyline([start, end.geometry.coordinates]);
+            this.direction = L.polyline([start, this.turfToLatLng(end)]);
             this.direction.addTo(this.editor.editLayer);
 
 
@@ -37,26 +34,28 @@ L.ParkingSpot = L.Circle.extend({
         if (this.editEnabled()) {
             var start = this._latlng;
             var options = { units: 'kilometers' };
-            var end = turf.destination([start.lat, start.lng], this.options.attributes.radius / 1000, this.options.attributes.heading - 180, options);
+            var end = turf.destination([start.lng, start.lat], this.options.attributes.radius / 1000, this.options.attributes.heading - 180, options);
             // Resize, since leaflet is wrong
-            var rad2 = start.distanceTo(end.geometry.coordinates);
+            var rad2 = start.distanceTo(this.turfToLatLng(end), options);
             this.setRadius(rad2);
             if(this.editor._resizeLatLng.__vertex!== undefined){
-                this.editor._resizeLatLng.__vertex.setLatLng(end.geometry.coordinates);
+                this.editor._resizeLatLng.__vertex.setLatLng(this.turfToLatLng(end));
             }
-            this.direction.setLatLngs([start, end.geometry.coordinates]);
+            this.direction.setLatLngs([start, this.turfToLatLng(end)]);
         }
     },
     updateDirectionFromVertex: function () {
         if (this.editEnabled()) {
             var start = this._latlng;
             var end = this.editor._resizeLatLng.__vertex.getLatLng();
-            var heading = turf.bearing([start.lat, start.lng], [end.lat, end.lng]);
+            var heading = turf.bearing([start.lng, start.lat], [end.lng, end.lat]);
             this.options.attributes.heading = heading + 180;
             this.direction.setLatLngs([start, end]);
         }
     },
-
+    turfToLatLng: function (turfPoint) {
+        return {lat: turfPoint.geometry.coordinates[1], lng: turfPoint.geometry.coordinates[0]};
+    },
     extensions: function () {
        this.createDirection(); 
     },
@@ -77,10 +76,7 @@ var parkingSpot = function (n, layerGroup) {
     var latlon = convert(n.attr('lat') + " " + n.attr('lon'));
     //console.log(latlon.decimalLatitude);
     //console.log(convert(n.attr('lat') + " " + n.attr('lon')).decimalLongitude);
-    const circle = new L.ParkingSpot([latlon.decimalLatitude, latlon.decimalLongitude], { radius: n.attr('radius') });
+    const circle = new L.ParkingSpot([latlon.decimalLatitude, latlon.decimalLongitude], { radius_m: n.attr('radius'), attributes: {}  });
-    circle.on('add', function (event) {
-        console.log(event);
-    });
     circle.on('editable:enable', function (event) {
       // event.target.createDirection();
     });
@@ -100,7 +96,7 @@ airlineCodes="VIR,KAL,DAL,KLM" />
     //circle.attributes = { type: n.attr('type'), name: n.attr('name'), radius: Number(n.attr('radius')), airlineCodes: n.attr('airlineCodes'), heading: Number(n.attr('heading')) };
 
     $.each( n.attrs, function( key, value ) {
-        console.log( key + "\t" + value);
+        console.log( '$', circle.id, key , value);
         
         if(isNaN(value))
           circle.options.attributes[ key ] = value;

src/renderer/store/modules/Editable.js

@@ -1,6 +1,7 @@
 const state = {
   type: 'none',
-  data: Object
+  index: 'none',
+  data: {airports: {}, parking: {}, arc: {}}
 }
 
 const SET_EDIT_AIRPORT = 'SET_EDIT_AIRPORT'
@@ -9,15 +10,17 @@ const SET_EDIT_ARC = 'SET_EDIT_ARC'
 
 const mutations = {
   SET_EDIT_AIRPORT (state, airport) {
-    state.data = airport
+    state.data.airports[airport.icao] = airport
+    state.index = airport.icao
     state.type = 'airport'
   },
   SET_EDIT_PARKING (state, parking) {
-    state.data = parking
+    state.data.parking[parking.index] = parking
+    state.index = parking.index
     state.type = 'parking'
   },
   SET_EDIT_ARC (state, arc) {
-    state.data = arc
+    state.data.arc = arc
     state.type = 'arc'
   },
   'SET_EDIT_PARKING_NAME' (state, parkingName) {