Parking List

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flightgear-airports",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "author": "portree_kid <keith.paterson@gmx.de>",
   "description": "An software to design Flightgear groundnets",
   "license": "GPL v3",

src/renderer/components/EditLayer.vue

@@ -15,6 +15,8 @@
   const path = require('path')
   const fs = require('fs')
 
+  var selectedItem
+
   // import {LSymbol} from 'leaflet-polylinedecorator'
 
   export default {
@@ -64,6 +66,16 @@
             deep: true //add this if u need to watch object properties change etc.
           }
         );
+      this.$store.watch(
+        function (state) {
+              return state.Parkings.items;
+          },
+          () => { this.editedParkings() }
+          ,
+          {
+            deep: true //add this if u need to watch object properties change etc.
+          }
+        );
     },
     beforeDestroy () {
       this.remove()
@@ -135,6 +147,9 @@
       showCheck() {
         Vue.set(this, 'checking', true)
       },
+      getEditing () {
+        return this.editing;
+      },
       enableEdit () {
         this.editable = true
         this.editing = true
@@ -245,14 +260,22 @@
             var latlng = {};
             latlng.lat =  element._latlng.lat;
             latlng.lng =  element._latlng.lng;
-            element.highlight();
+            if (this.selectedItem != null) {
+              this.selectedItem.deselect();
+            }
+            this.selectedItem = element;
+            element.select();
             this.$store.dispatch('setCenter', latlng);
           } else if (element instanceof L.ParkingSpot) {
             console.log(element);
             var latlng = {};
             latlng.lat =  element._latlng.lat;
             latlng.lng =  element._latlng.lng;
-            element.highlight();
+            if (this.selectedItem != null) {
+              this.selectedItem.deselect();
+            }
+            this.selectedItem = element;
+            element.select();
             this.$store.dispatch('setCenter', latlng);
           }
         });
@@ -439,6 +462,30 @@
           }
         })
       },
+      editedParkings() {
+        console.log('Edited Parkings : ' + this.$store.state.Parkings.items)
+        this.$store.state.Parkings.items.forEach( newElement => {
+          console.log(newElement);
+          this.featureLookup[newElement.index].forEach((element,index) => {
+            if (element instanceof L.ParkingSpot) {
+              element.options.attributes.name = newElement.name
+              element.options.attributes.number = newElement.number
+              element.options.attributes.type = newElement.type
+              //element.updateVertexFromDirection();           
+            }
+          })
+        })
+
+/*
+        this.$store.dispatch('updatedParking', this.$store.state.Editable.data.parking);
+        this.featureLookup[this.$store.state.Editable.index].forEach((element,index) => {
+          if (element instanceof L.ParkingSpot) {
+            element.options.attributes = Object.assign({}, this.$store.state.Editable.data.parking)
+            element.updateVertexFromDirection();           
+          }
+        })
+*/        
+      },
       editedArc() {
         console.log('Edited Arc : ' + this.$store.state.Editable.index);
         if (!this.groundnetLayerGroup)

src/renderer/components/ParkingEdit.vue

@@ -16,13 +16,13 @@
         <span class="demo-input-label">Name :</span>
       </el-col>
       <el-col :span="8">
-        <el-input placeholder="Please input" v-model="name"></el-input>
+        <el-input placeholder="Name" v-model="name"></el-input>
       </el-col>
       <el-col :span="4">
         <span class="demo-input-label">Number :</span>
       </el-col>
       <el-col :span="8">
-        <el-input placeholder="Please input" v-model="number"></el-input>
+        <el-input placeholder="Number" v-model="number"></el-input>
       </el-col>
     </el-row>
     <el-row>
@@ -232,7 +232,7 @@
           {value: 'cargo', label: 'cargo'},
           {value: 'gate', label: 'commercial passenger traffic'},
           {value: 'mil-fighter', label: 'military fighter'},
-          {value: 'mil-cargo', label: 'commercial passenger traffic'}
+          {value: 'mil-cargo', label: 'military cargo'}
         ]
       },
       parking_type: {

src/renderer/components/ParkingItem.vue

@@ -1,5 +1,17 @@
 <template>
-  <el-link type="primary" @click="show(parking.index)">{{parking.name}} {{parking.number}} {{parking.type}}</el-link>
+<div>
+  <el-link v-if="!editing" type="primary" @click="show(parking.index)">{{parking.name}} {{parking.number}} {{parking.type}}</el-link>          
+  <el-input @focus="show(parking.index)" v-if="editing" placeholder="Name" v-model="name" class="wide"></el-input>
+  <el-input @focus="show(parking.index)" v-if="editing" placeholder="Number" v-model="number" class="narrow"></el-input>
+  <el-select @focus="show(parking.index)" v-if="editing" v-model="parking_type" placeholder="Select">
+          <el-option
+            v-for="type in options"
+            :key="type.value"
+            :label="type.label"
+            :value="type.value"
+          ></el-option>
+        </el-select>
+</div>
 </template>
 
 <script lang="js">
@@ -18,9 +30,72 @@
       }
     },
     computed: {
+      options: function () {
+        return [{value: 'none', label: 'none'},
+          {value: 'ga', label: 'general aviation'},
+          {value: 'cargo', label: 'cargo'},
+          {value: 'gate', label: 'commercial passenger traffic'},
+          {value: 'mil-fighter', label: 'military fighter'},
+          {value: 'mil-cargo', label: 'military cargo'}
+        ]
+      },
+      editing: {
+      // getter
+        get: function () {
+          return this.$parent.$parent.$parent.$parent.$parent.$refs.editLayer.getEditing()
+        },
+        // setter
+        set: function (newValue) {
+        }
+      },
+      name: {
+      // getter
+        get: function () {
+          return this.parking.name
+        },
+        // setter
+        set: function (newValue) {
+          this.$store.commit('SET_EDIT_PARKING_ITEM_NAME', [this.parking.index, newValue])
+        }
+      },
+      number: {
+      // getter
+        get: function () {
+          return this.parking.number
+        },
+        // setter
+        set: function (newValue) {
+          this.$store.commit('SET_EDIT_PARKING_ITEM_NUMBER', [this.parking.index, newValue])
+        }
+      },
+      parking_type: {
+      // getter
+        get: function () {
+          if (this.parking.type === undefined) {
+            return 'none'
+          }
+          return this.parking.type
+        },
+        // setter
+        set: function (newValue) {
+          this.$store.commit('SET_EDIT_PARKING_ITEM_TYPE', [this.parking.index, newValue])
+        }
+      }
+
     }
 }
 </script>
 
 <style scoped lang="scss">
+div {
+  display: flex;
+  justify-content: space-between;
+}
+div.wide {
+  width: 40%;
+}
+div.narrow {
+  width: 20%;
+}
+
 </style>

src/renderer/components/ParkingList.vue

@@ -7,9 +7,9 @@
       </div>
     </h1>
     <el-container direction="vertical">
-        <li v-for="p in parkings" v-bind:key="p.index">
+        <div v-for="p in parkings" v-bind:key="p.index" class="row">
           <ParkingItem :parking="p"></ParkingItem>
-        </li>
+        </div>
     </el-container>
   </div>
 </template>
@@ -34,8 +34,18 @@
         },
         // setter
         set: function (newValue) {
+          console.log(newValue)
         }
       }
     }
 }
 </script>
+
+<style>
+div.row.div {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
+
+

src/renderer/loaders/ParkingSpot.js

@@ -89,11 +89,16 @@ L.ParkingSpot = L.Circle.extend({
             this.direction.setLatLngs([start, end]);
         }
     },
-    highlight() {
+    select() {
         var style = {};
         style['color'] = 'red';
         this.setStyle(style);        
     },    
+    deselect() {
+        var style = {};
+        style['color'] = '#3388ff';
+        this.setStyle(style);
+    },
     addListeners: function () {
         this.on('editable:drawing:move', function (event) {
             console.log("Move : ", event);
@@ -117,7 +122,7 @@ L.ParkingSpot = L.Circle.extend({
         this.on('click', function (event) {
             console.log("Click : " + event.target);
             store.default.dispatch('setParking', event.target.options.attributes);
-            this.highlight(); 
+            this.select(); 
             this.unwatch = store.default.watch(
                 function (state) {
                         return state.Editable.data.parking;
@@ -139,6 +144,7 @@ L.ParkingSpot = L.Circle.extend({
             if(event.target.editor._resizeLatLng.__vertex._icon !== event.sourceTarget._element){
                 event.vertex._icon.style['background-color'] = 'red';
                 store.default.dispatch('setParking', event.target.options.attributes);
+                this.select();
                 this.unwatch = store.default.watch(
                     function (state) {
                             return state.Editable.data.parking;

src/renderer/loaders/RunwayNode.js

@@ -42,7 +42,7 @@ L.RunwayNode = L.Marker.extend({
 
         });
     },
-    highlight() {
+    select() {
         try {
             this._icon.style['color'] = 'red';            
         } catch (error) {

src/renderer/loaders/Threshold.js

@@ -7,7 +7,7 @@ const store = require('../store');
 
 var $ = require('jquery');
 L.Threshold = L.Circle.extend({
-    highlight() {
+    select() {
         var style = {};
         style['color'] = 'red';
         this.setStyle(style);
@@ -35,7 +35,7 @@ L.Threshold = L.Circle.extend({
         this.on('click', function (event) {
             console.log("Click : " + event.target);
             store.default.dispatch('setParking', event.target.options.attributes);
-            this.highlight(); 
+            this.select(); 
             this.unwatch = store.default.watch(
                 function (state) {
                         return state.Editable.data.parking;

src/renderer/store/modules/Parkings.js

@@ -14,6 +14,18 @@ const mutations = {
   },
   SET_PARKINGS (state, parkings) {
     Vue.set(state, 'items', parkings)
+  },
+  'SET_EDIT_PARKING_ITEM_NAME' (state, value) {
+    const existingItem = state.items.find((i) => i.index === value[0])
+    Vue.set(existingItem, 'name', value[1])
+  },
+  'SET_EDIT_PARKING_ITEM_NUMBER' (state, value) {
+    const existingItem = state.items.find((i) => i.index === value[0])
+    Vue.set(existingItem, 'number', value[1])
+  },
+  'SET_EDIT_PARKING_ITEM_TYPE' (state, value) {
+    const existingItem = state.items.find((i) => i.index === value[0])
+    Vue.set(existingItem, 'type', value[1])
   }
 }