Move Parking to AirportTab and make Airport always visible

src/renderer/components/AirportEdit.vue

@@ -1,70 +1,87 @@
 <template>
-  <div>
+  <div v-if="airport">
-    <div width="100%" v-if="airport">
+    <h1 class="leaflet-sidebar-header">{{ icao }} {{ name }}</h1>
-        <el-row>
+    <div width="100%" >
-          <el-col :span="7">ICAO :</el-col>
-          <el-col :span="17">{{ icao }}</el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="7">Name :</el-col>
-          <el-col :span="17">{{ name }}</el-col>
-        </el-row>
         <el-row>
           <el-col :span="7">Airlines :</el-col>
           <el-col :span="15">
             <el-tag v-for="item in airlines" :key="item.value">{{item.value}}</el-tag>
           </el-col>
         </el-row>
-        <el-row>
-          <el-col :span="5">Flights :</el-col>
-          <el-col :span="7">{{ flights }}</el-col>
-          <el-col :span="5">Parking :</el-col>
-          <el-col :span="7">{{ parking }}</el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="7">Groundnet :</el-col>
-          <el-col :span="15">{{groundnet}}</el-col>
-        </el-row>
     </div>
-    <el-divider  v-if="airport"></el-divider>  
+    <el-tabs v-model="activeTab" >
-    <h3 v-if="airport">Frequencies</h3>  
+    <el-tab-pane label="Frequencies" name="first"> 
-    <div v-if="airport">
+      <div>
-        <el-row v-for="f in Frequencies" :key="f.index">
+        <el-row v-for="f in frequencyList" :key="f.index">
           <Frequency :frequency="f"></Frequency>
         </el-row>
         <el-button @click="addFrequency" v-if="editing" >Add</el-button>
         </div>
+    </el-tab-pane>
+    <el-tab-pane label="Parkings" name="second">
+      <ParkingList></ParkingList>
+    </el-tab-pane>
+    <el-tab-pane label="Statistics" name="third">
+            <el-row>
+          <el-col :span="8">Flights :</el-col>
+          <el-col :span="4">{{ flights }}</el-col>
+          <el-col :span="8">Parking Positions :</el-col>
+          <el-col :span="4">{{ parking }}</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">Groundnet Nodes :</el-col>
+          <el-col :span="4">{{groundnet}}</el-col>
+          <el-col :span="8"></el-col>
+          <el-col :span="4"></el-col>
+        </el-row>
+    </el-tab-pane>
+  </el-tabs>
   </div>
 </template>
 
 <script lang="js">
   import Frequency from './Frequency'
+  import ParkingList from './ParkingList'
+
 export default {
     data () {
-      return { }
+      return {activeTab: 'first', editLayer: null}
     },
     components: {
-      Frequency
+      Frequency, ParkingList
     },
     methods: {
       addFrequency () {
         this.$store.dispatch('addFrequency', {type: 'AWOS', value: 0})
+      },
+      initLayer () {
+        var parent = this.$parent
+        while (parent !== undefined && parent.$refs.editLayer === undefined) {
+          parent = parent.$parent
+        }
+        if (parent === undefined) {
+          return
+        }
+        this.editLayer = parent.$refs.editLayer
       }
     },
     computed: {
       editing: {
         get: function () {
-          return this.$parent.$parent.$parent.$refs.editLayer.editing
+          if (this.editLayer === null) {
+            this.initLayer()
+          }
+          return this.editLayer.editing
         }
       },
       icao: function () {
-        return this.$store.state.Editable.data.airport.icao
+        return this.$store.state.Airports.currentAirport.icao
       },
       name: function () {
-        return this.$store.state.Editable.data.airport.name
+        return this.$store.state.Airports.currentAirport.name
       },
       flights: function () {
-        return this.$store.state.Editable.data.airport.flights
+        return this.$store.state.Airports.currentAirport.flights
       },
       airlines: function () {
         var airlineCodes = []
@@ -77,15 +94,17 @@
         return airlineCodes
       },
       groundnet: function () {
-        return this.$store.state.Editable.data.airport.groundnet
+        return this.$store.state.Airports.currentAirport.groundnet
       },
       parking: function () {
-        return this.$store.state.Editable.data.airport.parking
+        return this.$store.state.Airports.currentAirport.parking
       },
-      airport: function () {
+      airport: {
-        return this.$store.state.Editable.type === 'airport'
+        get: function () {
+          return this.$store.state.Airports.currentAirport !== undefined
+        }
       },
-      Frequencies: {
+      frequencyList: {
         // getter
         get: function () {
           return this.$store.state.Frequencies.items

src/renderer/components/Frequency.vue

@@ -3,7 +3,7 @@
     <span>
       <el-row>
         <el-col :span="7">
-          <el-select v-model="type" placeholder="Select">
+          <el-select v-model="type" placeholder="Select" :disabled="!editing">
             <el-option
               v-for="type in options"
               :key="type.value"
@@ -38,7 +38,7 @@
     },
     data () {
       return {
-        ok: true
+        ok: true, editLayer: null
       }
     },
     methods: {
@@ -67,11 +67,20 @@
             return false
         }
         return true
+      },
+      initLayer() {
+        var parent = this.$parent
+        while (parent.$refs.editLayer===undefined) {
+          parent = parent.$parent
+        }
+        this.editLayer = parent.$refs.editLayer
       }
     },
     computed: {
       editing: function () {
-        return this.$parent.$parent.$parent.$parent.$parent.$refs.editLayer.editing
+        if(this.editLayer=== null) 
+          this.initLayer()
+        return this.editLayer.editing
       },
       options: function () {
         return [

src/renderer/components/LeafletSidebar.vue

@@ -5,7 +5,7 @@
         <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="#parking" role="tab"><i class="fas fa-parking"></i></a></li>-->
             <li><a href="#check" role="tab"><i class="far fa-check-square"></i></a></li>
             <li><a href="#search" role="tab"><i class="fa fa-search"></i></a></li>
             <li><a href="#wip" role="tab"><i class="fas fa-wrench"></i></a></li>
@@ -25,14 +25,16 @@
                 Properties
                 <div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div>
             </h1>
-          <AirportEdit></AirportEdit>
           <ParkingEdit></ParkingEdit>
           <ArcEdit></ArcEdit>
           <NodeEdit></NodeEdit>          
+          <AirportEdit></AirportEdit>
         </div>
+        <!--
         <div class="leaflet-sidebar-pane" id="parking">
           <ParkingList></ParkingList>
         </div>
+        -->
         <div class="leaflet-sidebar-pane" id="search">
           <Search></Search>
         </div>
@@ -64,7 +66,7 @@
   import Help from './Help'
   import NodeEdit from './NodeEdit'
   import ParkingEdit from './ParkingEdit'
-  import ParkingList from './ParkingList'
+  // import ParkingList from './ParkingList'
   import RunScan from './RunScan'
   import SettingsPanel from './SettingsPanel'
   import Search from './Search'
@@ -72,7 +74,7 @@
 
   export default {
     name: 'leaflet-sidebar',
-    components: { Help, AirportEdit, ArcEdit, CheckPanel, NodeEdit, ParkingEdit, ParkingList, RunScan, FileSelect, SettingsPanel, Search, WorkInProgress },
+    components: { Help, AirportEdit, ArcEdit, CheckPanel, NodeEdit, ParkingEdit, RunScan, FileSelect, SettingsPanel, Search, WorkInProgress },
     props: [],
     mounted () {
       this.add()

src/renderer/components/ParkingItem.vue

@@ -22,12 +22,22 @@
     mounted () {
     },
     data () {
-      return {
+      return { editLayer: null
       }
     },
     methods: {
       show (idx) {
-        this.$parent.$parent.$parent.$parent.$parent.$refs.editLayer.show(idx)
+        if (this.editLayer === null) {
+          this.initLayer()
+        }
+        return this.editLayer.show(idx)
+      },
+      initLayer () {
+        var parent = this.$parent
+        while (parent.$refs.editLayer === undefined) {
+          parent = parent.$parent
+        }
+        this.editLayer = parent.$refs.editLayer
       }
     },
     computed: {
@@ -40,14 +50,11 @@
           {value: 'mil-cargo', label: 'military cargo'}
         ]
       },
-      editing: {
+      editing: function () {
-      // getter
+        if (this.editLayer === null) {
-        get: function () {
+          this.initLayer()
-          return this.$parent.$parent.$parent.$parent.$parent.$refs.editLayer.getEditing()
-        },
-        // setter
-        set: function (newValue) {
         }
+        return this.editLayer.editing
       },
       name: {
       // getter

src/renderer/components/ParkingList.vue

@@ -1,11 +1,13 @@
 <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">
         <div v-for="p in parkings" v-bind:key="p.index" class="row">
           <ParkingItem :parking="p"></ParkingItem>