Parking List

src/renderer/components/EditLayer.vue

@@ -254,6 +254,15 @@
           }
         });
       },
+      getParkings (){
+        var parkings = []
+        this.groundnetLayerGroup.eachLayer(l => {
+          if (l instanceof L.ParkingSpot) {
+            parkings.push(l)
+          }
+        })
+        return parkings
+      },
       removeNode (index) {
         if(this.featureLookup[index]===undefined) {
           console.error("Lookup " + index + " failed ");          
@@ -300,12 +309,13 @@
         })
       },
       editedParking() {
-        console.log(this.$store.state.Editable.data.parking)
+        console.log('Edited Parking : ' + this.$store.state.Editable.data.parking)
         if (this.$store.state.Editable.index === undefined ||
             this.$store.state.Editable.data.parking === undefined ||
             this.featureLookup===undefined) {
           return
         }
+        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)

src/renderer/components/LeafletSidebar.vue

@@ -5,12 +5,13 @@
         <ul role="tablist"> <!-- top aligned tabs -->
             <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
             <li><a href="#edit" role="tab"><i class="fas fa-edit"></i></a></li>
+            <li><a href="#parking" role="tab"><i class="fas fa-parking"></i></a></li>
             <li><a href="#search" role="tab"><i class="fa fa-search"></i></a></li>
-            <li><a href="#scan" role="tab"><i class="fa fa-sync"></i></a></li>
             <li><a href="#check" role="tab"><i class="far fa-check-square"></i></a></li>
         </ul>
 
         <ul role="tablist"> <!-- bottom aligned tabs -->
+            <li><a href="#scan" role="tab"><i class="fa fa-sync"></i></a></li>
             <li><a href="#settings" role="tab"><i class="fas fa-cog"></i></a></li>
         </ul>
     </div>
@@ -28,6 +29,9 @@
           <ArcEdit></ArcEdit>
           <NodeEdit></NodeEdit>
         </div>
+        <div class="leaflet-sidebar-pane" id="parking">
+          <ParkingList></ParkingList>
+        </div>
         <div class="leaflet-sidebar-pane" id="search">
           <Search></Search>
         </div>
@@ -49,20 +53,21 @@
   import '@fortawesome/fontawesome-free/css/all.css'
   import {} from 'leaflet-sidebar-v2'
   import L from 'leaflet'
-  import Help from './Help'
   import AirportEdit from './AirportEdit'
-  import CheckPanel from './CheckPanel'
-  import ParkingEdit from './ParkingEdit'
   import ArcEdit from './ArcEdit'
+  import CheckPanel from './CheckPanel'
   import FileSelect from './FileSelect'
+  import Help from './Help'
   import NodeEdit from './NodeEdit'
+  import ParkingEdit from './ParkingEdit'
+  import ParkingList from './ParkingList'
   import RunScan from './RunScan'
   import SettingsPanel from './SettingsPanel'
   import Search from './Search'
 
   export default {
     name: 'leaflet-sidebar',
-    components: { Help, AirportEdit, ArcEdit, CheckPanel, NodeEdit, ParkingEdit, SettingsPanel, RunScan, FileSelect, Search },
+    components: { Help, AirportEdit, ArcEdit, CheckPanel, NodeEdit, ParkingEdit, ParkingList, RunScan, FileSelect, SettingsPanel, Search },
     props: [],
     mounted () {
       this.add()

src/renderer/components/ParkingEdit.vue

@@ -118,6 +118,11 @@
 <script lang="js">
 /* eslint-disable */
   export default {
+    methods: {
+      show (idx) {
+        this.$parent.$parent.$parent.$refs.editLayer.show(idx)
+      }
+    },
     computed: {
       parking: function () {
         return this.$store.state.Editable.type === 'parking'

src/renderer/components/ParkingList.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h1 class="leaflet-sidebar-header">
+      Parking List
+      <div class="leaflet-sidebar-close">
+        <i class="fa fa-caret-left"></i>
+      </div>
+    </h1>
+    <el-container direction="vertical">
+      <el-row>
+        <li v-for="p in parkings" v-bind:key="p.index">
+          <el-link type="primary" @click="show(p.index)">{{p.name}} {{p.number}}</el-link>
+        </li>
+      </el-row>
+    </el-container>
+  </div>
+</template>
+
+<script lang="js">
+  export default {
+    name: 'parking-list',
+    props: [],
+    data () {
+      return {
+
+      }
+    },
+    methods: {
+      show (idx) {
+        this.$parent.$parent.$parent.$refs.editLayer.show(idx)
+      }
+    },
+    computed: {
+      parkings: {
+      // getter
+        get: function () {
+          if (this.$store.state.Parkings.items !== undefined) {
+            return this.$store.state.Parkings.items.sort((p1, p2) => {
+              if (p1.name === p2.name) {
+                return p1.number.localeCompare(p2.number)
+              } else {
+                return p1.name.localeCompare(p2.name)
+              }
+            })
+          }
+        },
+        // setter
+        set: function (newValue) {
+        }
+      }
+    }
+}
+</script>