Parking List

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>
+
+