1. Edit Layer

src/renderer/components/EditLayer.vue

@@ -7,26 +7,34 @@
 <script lang="js">
   import { LMap, LMarker } from 'vue2-leaflet'
   import L from 'leaflet'
+  import LEdit from 'leaflet-editable/src/Leaflet.Editable.js'
+  import {readGroundnetXML} from '../loaders/groundnet_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) {
+            this.groundnet = readGroundnetXML(this.$store.state.Settings.settings.airportsDirectory, airportsToLoad[0])
+            this.groundnet.addTo(this.$parent.mapObject)
+            this.editingAirport = airportsToLoad[0]
+          }
+          // console.log(this.groundnet)
+        }
+      })
+    },
     mounted () {
       console.log(LMap)
       console.log(LMarker)
       console.log(L)
-      this.$store.dispatch('getAirports')
-      console.log(this.$store.state.Airports.airports)
-      LMap.on('dragend', function onDragEnd () {
-        var width = L.Map.getBounds().getEast() - L.Map.getBounds().getWest()
-        var height = L.Map.getBounds().getNorth() - L.Map.getBounds().getSouth()
-        console.log(
-          'center:' + L.Map.getCenter() + '\n' +
-          'width:' + width + '\n' +
-          'height:' + height + '\n' +
-          'size in pixels:' + L.Map.getSize()
-        )
-      })
+      console.log(LEdit)
     },
     beforeDestroy () {
       this.remove()
@@ -36,13 +44,21 @@
       }
     },
     methods: {
+      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) {
-        console.log(parent)
-        console.log(L)
+        this.layerGroup = L.layerGroup()
       },
       remove () {
-        if (this.sidebar) {
-          this.$parent.removeLayer(this.sidebar)
+        if (this.layerGroup) {
+          this.$parent.removeLayer(this.layerGroup)
         }
       },
       add () {
@@ -52,7 +68,12 @@
       }
     },
     computed: {
-
+      edit: function () {
+        console.log('Zoom : ' + this.$store.state.Settings.zoom)
+        if (this.$store.state.Settings.zoom > 12) {
+          console.log()
+        }
+      }
     }
 }
 </script>

src/renderer/components/FlightgearMap.vue

@@ -2,6 +2,7 @@
   <l-map
     :zoom="zoom"
     :center="center"
+    :options="options"
     @update:zoom="zoomUpdated"
     @update:center="centerUpdated"
     @update:bounds="boundsUpdated"
@@ -10,7 +11,7 @@
     <!--<l-marker :lat-lng="marker"></l-marker>-->
     <LeafletSidebar></LeafletSidebar>
     <EditLayer></EditLayer>
-    <l-layer-group layerType="overlay" name="Sources">
+    <l-layer-group layerType="overlay" name="airports" ref="airportLayer">
       <l-circle
         v-for="(item, index) in this.$store.state.Airports.airports"
         :key="index"
@@ -43,14 +44,15 @@
     components: { LMap, LTileLayer, LMarker, LCircle, LeafletSidebar, EditLayer, LLayerGroup },
     props: [],
     mounted () {
-
+      this.$store.dispatch('getAirports')
     },
     data () {
       return {
         url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
         marker: L.latLng(47.413220, -1.219482),
-        airports: this.$store.state.Airports.airports
+        airports: this.$store.state.Airports.airports,
+        options: {editable: true}
       }
     },
     methods: {
@@ -60,12 +62,13 @@
       },
       zoomUpdated (zoom) {
         this.$store.commit('ZOOM', zoom)
+        console.log(this.$refs.airportLayer.setVisible(zoom < 12))
       },
       centerUpdated (center) {
         this.$store.commit('CENTER', center)
       },
       boundsUpdated (bounds) {
-        this.bounds = bounds
+        this.$store.commit('BOUNDS', bounds)
       }
     },
     computed: {

src/renderer/components/LeafletSidebar.vue

@@ -26,10 +26,6 @@
           <AirportEdit></AirportEdit>
         </div>
         <div class="leaflet-sidebar-pane" id="scan">
-            <h1 class="leaflet-sidebar-header">
-                Scanning
-                <div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div>
-            </h1>
           <RunScan></RunScan>
         </div>
         <div class="leaflet-sidebar-pane" id="settings">

src/renderer/components/RunScan.vue

@@ -1,32 +1,55 @@
 <template>
   <div>
+    <h1 class="leaflet-sidebar-header">
+      Scanning
+      <div class="leaflet-sidebar-close">
+        <i class="fa fa-caret-left"></i>
+      </div>
+    </h1>
     <el-container direction="vertical">
       <el-button @click="scanAPT()">Scan APT File</el-button>
       <el-button @click="scanGroundnets()">Scan Groundnet Files</el-button>
       <el-button @click="scanTraffic()">Scan Traffic Files</el-button>
+      <el-input placeholder="Search" v-model="searchterm" class="input-with-select">
+      </el-input>
     </el-container>
+    <li v-for="item in searched" v-bind:key="item.icao"><el-link type="primary" @click="goto(item.icao)">{{ item.icao }} {{ item.name }}</el-link></li>
   </div>
 </template>
 
 <script lang="js">
   // import scanner from '../utils/scan'
   import fileUrl from 'file-url'
+  import {Table, TableColumn} from 'element-ui'
 
   const path = require('path')
 
   export default {
     name: 'run-scan',
-    components: {},
+    components: { [Table.name]: Table,
+      [TableColumn.name]: TableColumn},
     props: [],
     mounted () {
     },
     beforeDestroy () {
     },
     data () {
-      return {
-      }
+      // this.$store.dispatch('getAirportsUnfiltered')
+      return {searchterm: this.searchterm}
     },
     methods: {
+      goto (icao) {
+        console.log(icao)
+        let airports = this.$store.state.Airports.airports
+          .filter(a => a.properties.icao.match(icao))
+        if (airports.length > 0) {
+          this.$store.commit('CENTER', [airports[0].geometry.coordinates[1], airports[0].geometry.coordinates[0]])
+        }
+      },
+      formatter (row, column) {
+        console.log('Row ' + row)
+        return row
+      },
       scanAPT () {
         try {
           const winURL = process.env.NODE_ENV === 'development'
@@ -105,6 +128,12 @@
       }
     },
     computed: {
+      searched: function () {
+        return this.$store.state.Airports.airports
+          .filter(a => a.properties.icao.match(this.searchterm) || a.properties.name.match(this.searchterm))
+          // .map(a => console.log(a.properties))
+          .map(a => ({ icao: a.properties.icao, name: a.properties.name }))
+      }
     }
 }
 </script>