Pavement loader

src/renderer/components/FlightgearMap.vue

@@ -11,6 +11,7 @@
     <!--<l-marker :lat-lng="marker"></l-marker>-->
     <LeafletSidebar></LeafletSidebar>
     <EditLayer></EditLayer>
+    <PavementLayer></PavementLayer>
     <l-layer-group layerType="overlay" name="airports" ref="airportLayer">
       <l-circle
         v-for="(item, index) in this.$store.state.Airports.airports"
@@ -29,6 +30,7 @@
   import { LMap, LTileLayer, LMarker, LCircle, LLayerGroup } from 'vue2-leaflet'
   import LeafletSidebar from './LeafletSidebar'
   import EditLayer from './EditLayer'
+  import PavementLayer from './PavementLayer'
   import L from 'leaflet'
 
   // https://github.com/KoRiGaN/Vue2Leaflet/issues/103
@@ -41,7 +43,7 @@
   })
   export default {
     name: 'flightgear-map',
-    components: { LMap, LTileLayer, LMarker, LCircle, LeafletSidebar, EditLayer, LLayerGroup },
+    components: { LMap, LTileLayer, LMarker, LCircle, LeafletSidebar, EditLayer, PavementLayer, LLayerGroup },
     props: [],
     mounted () {
       this.$store.dispatch('getAirports')

src/renderer/components/PavementLayer.vue

@@ -0,0 +1,90 @@
+<template>
+  <section class="edit-layer">
+    <h1>edit-layer Component</h1>
+  </section>
+</template>
+
+<script lang="js">
+  import { LMap, LMarker } from 'vue2-leaflet'
+  import L from 'leaflet'
+  import LEdit from 'leaflet-editable/src/Leaflet.Editable.js'
+  import {readPavement} from '../loaders/pavement_loader'
+
+  export default {
+    name: 'edit-layer',
+    props: [],
+    created () {
+      this.$store.subscribe((mutation, state) => {
+        if (mutation.type === 'BOUNDS') {
+          // console.log(this.$parent)
+          // console.log(this.$store.state.Settings.bounds)
+          let airportsToLoad = this.$store.state.Airports.airports
+            .filter(feature => this.visible(feature))
+            .map(feature => feature.properties.icao)
+          if (airportsToLoad[0] !== this.editingAirport) {
+            readPavement(this.$store.state.Settings.settings.flightgearDirectory_apt, airportsToLoad[0], this.read)
+            this.editingAirport = airportsToLoad[0]
+          }
+          // console.log(this.groundnet)
+        }
+      })
+    },
+    mounted () {
+      console.log(LMap)
+      console.log(LMarker)
+      console.log(L)
+      console.log(LEdit)
+    },
+    beforeDestroy () {
+      this.remove()
+    },
+    data () {
+      return {
+      }
+    },
+    methods: {
+      read (layer) {
+        this.groundnet = layer
+        if (this.groundnet) {
+          this.groundnet.addTo(this.$parent.mapObject)
+        }
+      },
+      visible (feature) {
+        let bounds = this.$store.state.Settings.bounds
+        let coordinates = feature.geometry.coordinates
+        let ret = bounds.getNorthEast().lat > Number(coordinates[1]) &&
+                  bounds.getNorthEast().lng > Number(coordinates[0])
+        let ret2 = bounds.getSouthWest().lat < Number(coordinates[1]) &&
+                  bounds.getSouthWest().lng < Number(coordinates[0])
+        return ret && ret2
+      },
+      deferredMountedTo (parent) {
+        this.layerGroup = L.layerGroup()
+      },
+      remove () {
+        if (this.layerGroup) {
+          this.$parent.removeLayer(this.layerGroup)
+        }
+      },
+      add () {
+        if (this.$parent._isMounted) {
+          this.deferredMountedTo(this.$parent.mapObject)
+        }
+      }
+    },
+    computed: {
+      edit: function () {
+        console.log('Zoom : ' + this.$store.state.Settings.zoom)
+        if (this.$store.state.Settings.zoom > 12) {
+          console.log()
+        }
+      }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+  .edit-layer {
+
+  }
+</style>

src/renderer/components/SettingsPanel.vue

@@ -21,6 +21,18 @@
           <directory-select @input="flightgearDirectorySelect"></directory-select>
         </el-col>
       </el-row>
+      <el-row>
+        <el-col :span="7">AI Directory</el-col>
+        <el-col :span="15">{{ AI_directory }}</el-col>
+        <el-col :span="2">
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="7">APT File</el-col>
+        <el-col :span="15">{{ apt_file }}</el-col>
+        <el-col :span="2">
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
@@ -53,6 +65,12 @@
       flightgear_directory: function () {
         return this.$store.state.Settings.settings.flightgearDirectory
       },
+      AI_directory: function () {
+        return this.$store.state.Settings.settings.flightgearDirectory_ai
+      },
+      apt_file: function () {
+        return this.$store.state.Settings.settings.flightgearDirectory_apt
+      },
       airports_directory: function () {
         return this.$store.state.Settings.settings.airportsDirectory
       }