@@ -0,0 +1,41 @@
+<template>
+  <div id="panel" width="100%">
+  <div id="panel" width="100%"  v-if="airport">
+    <h1 class="leaflet-sidebar-header">
+      Airports
+      <div class="leaflet-sidebar-close">
+        <i class="fa fa-caret-left"></i>
+      </div>
+    </h1>
+    <el-row>
+      <el-col :span="7">ICAO : </el-col>
+      <el-col :span="15">{{ this.$store.state.Editable.data.properties.icao }}</el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="7">Name : </el-col>
+      <el-col :span="15">{{ this.$store.state.Editable.data.properties.name }}</el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="7">Flights : </el-col>
+      <el-col :span="15">{{ this.$store.state.Editable.data.properties.flights }}</el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="7">Airlines : </el-col>
+      <el-col :span="15">{{ this.$store.state.Editable.data.properties.airlines }}</el-col>
+    </el-row>
+  </div>
+  </div>
+</template>
+
+<script lang="js">
+  export default {
+    computed: {
+      airport: function () {
+        return this.$store.state.Editable.type === 'airport'
+      },
+      airports_directory: function () {
+        return this.$store.state.Settings.settings.airportsDirectory
+      }
+    }
+  }
+</script>
@@ -5,30 +5,40 @@
 </template>

 <script lang="js">
+  import { LMap, LMarker } from 'vue2-leaflet'
  import L from 'leaflet'
+
  export default {
    name: 'edit-layer',
    props: [],
    mounted () {
-      this.add()
+      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()
+        )
+      })
    },
    beforeDestroy () {
      this.remove()
    },
    data () {
      return {
-
      }
    },
    methods: {
      deferredMountedTo (parent) {
-        this.sidebar = L.control.sidebar({
-          autopan: false, // whether to maintain the centered map point when opening the sidebar
-          closeButton: true, // whether t add a close button to the panes
-          container: 'sidebar', // the DOM container or #ID of a predefined sidebar container that should be used
-          position: 'left' // left or right
-        })
-        parent.addControl(this.sidebar)
+        console.log(parent)
+        console.log(L)
      },
      remove () {
        if (this.sidebar) {
@@ -1,15 +1,31 @@
 <template>
-    <l-map :zoom="zoom" :center="center">
-      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
-      <l-marker :lat-lng="marker"></l-marker>
-      <LeafletSidebar></LeafletSidebar>
-      <EditLayer></EditLayer>
-    </l-map>
+  <l-map
+    :zoom="zoom"
+    :center="center"
+    @update:zoom="zoomUpdated"
+    @update:center="centerUpdated"
+    @update:bounds="boundsUpdated"
+  >
+    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
+    <!--<l-marker :lat-lng="marker"></l-marker>-->
+    <LeafletSidebar></LeafletSidebar>
+    <EditLayer></EditLayer>
+    <l-layer-group layerType="overlay" name="Sources">
+      <l-circle
+        v-for="(item, index) in this.$store.state.Airports.airports"
+        :key="index"
+        :lat-lng="[item.geometry.coordinates[1], item.geometry.coordinates[0]]"
+        :radius="((item.properties.flights+5)*20)"
+        :color="item.properties.color"
+        @click="onClick(item)"
+      ></l-circle>
+    </l-layer-group>
+  </l-map>
 </template>

 <script lang="js">
  import 'leaflet/dist/leaflet.css'
-  import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'
+  import { LMap, LTileLayer, LMarker, LCircle, LLayerGroup } from 'vue2-leaflet'
  import LeafletSidebar from './LeafletSidebar'
  import EditLayer from './EditLayer'
  import L from 'leaflet'
@@ -24,21 +40,37 @@
  })
  export default {
    name: 'flightgear-map',
-    components: { LMap, LTileLayer, LMarker, LeafletSidebar, EditLayer },
+    components: { LMap, LTileLayer, LMarker, LCircle, LeafletSidebar, EditLayer, LLayerGroup },
    props: [],
    mounted () {

    },
    data () {
      return {
-        zoom: 13,
-        center: L.latLng(47.413220, -1.219482),
+        zoom: this.$store.state.Settings.zoom,
+        center: this.$store.state.Settings.center,
        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)
+        marker: L.latLng(47.413220, -1.219482),
+        airports: this.$store.state.Airports.airports
      }
    },
    methods: {
+      onClick (item) {
+        console.log(item)
+        this.$store.commit('SET_EDIT_AIRPORT', item)
+      },
+      zoomUpdated (zoom) {
+        this.zoom = zoom
+        this.$store.commit('ZOOM', this.zoom)
+      },
+      centerUpdated (center) {
+        this.center = center
+        this.$store.commit('CENTER', this.center)
+      },
+      boundsUpdated (bounds) {
+        this.bounds = bounds
+      }
    },
    computed: {

@@ -47,13 +79,13 @@
 </script>

 <style scoped lang="scss">
-  .vue2leaflet-map {
-    height: 100%;
-  }
-  .l-map{
-    height: 100%;
-  }
-  .flightgear-map {
-     color: aqua
-  }
+.vue2leaflet-map {
+  height: 100%;
+}
+.l-map {
+  height: 100%;
+}
+.flightgear-map {
+  color: aqua;
+}
 </style>
@@ -4,6 +4,7 @@
    <div class="leaflet-sidebar-tabs">
        <ul role="tablist"> <!-- top aligned tabs -->
            <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
+            <li><a href="#airports" role="tab"><i class="fa fa-pencil"></i></a></li>
            <li><a href="#scan" role="tab"><i class="fa fa-search"></i></a></li>
        </ul>

@@ -21,7 +22,14 @@
            </h1>
            <p>A responsive sidebar for mapping libraries</p>
        </div>
+        <div class="leaflet-sidebar-pane" id="airports">
+          <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">
@@ -36,13 +44,14 @@
  import 'font-awesome/css/font-awesome.css'
  import {} from 'leaflet-sidebar-v2'
  import L from 'leaflet'
+  import AirportEdit from './AirportEdit'
  import SettingsPanel from './SettingsPanel'
  import RunScan from './RunScan'
  import FileSelect from './FileSelect'

  export default {
    name: 'leaflet-sidebar',
-    components: { SettingsPanel, RunScan, FileSelect },
+    components: { AirportEdit, SettingsPanel, RunScan, FileSelect },
    props: [],
    mounted () {
      this.add()
@@ -1,10 +1,10 @@
 <template>
  <div>
-    <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-container>      
+    <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-container>
  </div>
 </template>

@@ -38,11 +38,14 @@
          console.log(fileUrl('src/renderer/utils/worker.js'))

          // var worker = new Worker(fileUrl('src/renderer/utils/worker.js'))
-          worker.postMessage('scanapt')
+          worker.postMessage(['scanapt'])
          // the reply
+          var store = this.$store
          worker.onmessage = function (e) {
            if (e.data === 'DONE') {
              console.log('DONE')
+              store.dispatch('getAirports')
+              worker.terminate()
            }
            console.log(e.data)
          }
@@ -60,12 +63,14 @@
          const worker = new Worker(winURL)
          console.log(fileUrl('src/renderer/utils/worker.js'))

-          // var worker = new Worker(fileUrl('src/renderer/utils/worker.js'))
-          worker.postMessage('scan')
+          worker.postMessage(['scan', this.$store.state.Settings.settings.airportsDirectory])
          // the reply
+          var store = this.$store
          worker.onmessage = function (e) {
            if (e.data === 'DONE') {
              console.log('DONE')
+              store.dispatch('getAirports')
+              worker.terminate()
            }
            console.log(e.data)
          }
@@ -83,13 +88,14 @@

          const worker = new Worker(winURL)
          console.log(fileUrl('src/renderer/utils/worker.js'))
-
-          // var worker = new Worker(fileUrl('src/renderer/utils/worker.js'))
-          worker.postMessage('scanai')
+          worker.postMessage(['scanai', this.$store.state.Settings.settings.flightgearDirectory])
          // the reply
+          var store = this.$store
          worker.onmessage = function (e) {
            if (e.data === 'DONE') {
              console.log('DONE')
+              store.dispatch('getAirports')
+              worker.terminate()
            }
            console.log(e.data)
          }
@@ -7,11 +7,18 @@
      </div>
    </h1>
    <div id="panel" width="100%">
+      <el-row>
+        <el-col :span="7">Airports Directory</el-col>
+        <el-col :span="15">{{ airports_directory }}</el-col>
+        <el-col :span="2">
+          <directory-select @input="airportsDirectorySelect"></directory-select>
+        </el-col>
+      </el-row>
      <el-row>
        <el-col :span="7">Flightgear Directory</el-col>
        <el-col :span="15">{{ flightgear_directory }}</el-col>
        <el-col :span="2">
-          <directory-select @input="directorySelect"></directory-select>
+          <directory-select @input="flightgearDirectorySelect"></directory-select>
        </el-col>
      </el-row>
    </div>
@@ -33,14 +40,21 @@
      }
    },
    methods: {
-      directorySelect: function (flightgearDirectory) {
+      flightgearDirectorySelect: function (flightgearDirectory) {
        console.log(flightgearDirectory)
-        this.$store.commit('SETTINGS_DIRECTORY', flightgearDirectory.path)
+        this.$store.commit('FLIGHTGEAR_DIRECTORY', flightgearDirectory.path)
+      },
+      airportsDirectorySelect: function (flightgearDirectory) {
+        console.log(flightgearDirectory)
+        this.$store.commit('AIPORTS_DIRECTORY', flightgearDirectory.path)
      }
    },
    computed: {
      flightgear_directory: function () {
        return this.$store.state.Settings.settings.flightgearDirectory
+      },
+      airports_directory: function () {
+        return this.$store.state.Settings.settings.airportsDirectory
      }
    }
  }