https://github.com/Portree-Kid/flightgear-airports/issues/25

src/renderer/components/AirportEdit.vue

@@ -17,14 +17,41 @@
         <el-button type="primary" @click="addAirline">Confirm</el-button>
       </span>
     </el-dialog>
+    <el-dialog
+      title="Import File"
+      :visible.sync="showImportFile"
+      width="20%"
+      :before-close="handleClose">
+        <span>Beware wip will be overwritten</span>
+        <el-row>
+          <el-col :span="20">
+            <el-input
+            placeholder="Please input file"
+            v-model="fileImportName">
+            </el-input>
+          </el-col>
+          <el-col :span="4">
+            <file-select @input="fileImportFileName"></file-select>
+          </el-col>
+        </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showImportFile = false">Cancel</el-button>
+        <el-button type="primary" @click="importFile">Confirm</el-button>
+      </span>
+    </el-dialog>
     <h1 class="leaflet-sidebar-header">{{ icao }} {{ name }}</h1>
     <div width="100%" >
+        <el-row>
+            <el-button @click="showImportFile = true" v-if="!editing" ><i class="fas fa-file-import"></i></el-button>
+        </el-row>
         <el-row>
           <el-col :span="7"><span class="label"> Airlines :</span></el-col>
           <el-col :span="15">
             <el-tag v-for="item in airlines" :key="item.value">{{item.value}}</el-tag>
           </el-col>
-          <el-col :span="2"><el-button @click="dialogVisible = true" v-if="editing" ><i class="fas fa-plus"></i></el-button></el-col>
+          <el-col :span="2">
+            <el-button @click="dialogVisible = true" v-if="editing" ><i class="fas fa-plus"></i></el-button>
+          </el-col>
         </el-row>
     </div>
     <el-tabs v-model="activeTab" >
@@ -73,17 +100,35 @@
 </template>
 
 <script lang="js">
+  import EditButton from './EditButton'
+  import FileSelect from './FileSelect'
   import Frequency from './Frequency'
   import ParkingList from './ParkingList'
+  
+  const fs = require('fs')
+  const path = require('path')
 
 export default {
     data () {
-      return {activeTab: 'first', editing: false, dialogVisible: false, airlineCode: ''}
+      return {showImportFile: false, activeTab: 'first', editing: false, dialogVisible: false, airlineCode: '', fileImport: null}
     },
     components: {
-      Frequency, ParkingList
+      EditButton, FileSelect, Frequency, ParkingList
     },
     methods: {
+      fileImportFileName (f) {
+        this.fileImport = f
+      },
+      importFile () {
+        this.showImportFile = false
+        var fDir = this.$store.state.Settings.settings.airportsDirectory
+        var fNew = path.join(fDir, this.icao[0], this.icao[1], this.icao[2], this.icao + '.groundnet.new.xml')
+
+        var editLayer = this.$parent.$parent.$parent.$refs.editLayer
+        fs.copyFile(this.fileImport.path, fNew, () => {
+          editLayer.reload(false)
+        })
+      },
       setEditing (editing) {
         this.editing = editing
       },
@@ -108,6 +153,13 @@ export default {
       }
     },
     computed: {
+      fileImportName: function () {
+        if (this.fileImport !== null) {
+          console.log(this.fileImport)
+          return this.fileImport.path
+        }
+        return 'Please select'
+      },
       icao: function () {
         return this.$store.state.Airports.currentAirport.icao
       },

src/renderer/components/FileSelect.vue

@@ -1,13 +1,11 @@
 <template>
   <label class="file-select">
     <div class="select-button">
-      <span v-if="value">Selected File: {{value.name}}</span>
+      ...
-      <span v-else>Select File</span>
     </div>
     <input type="file" @change="handleFileChange"/>
   </label>
 </template>
-
 <script>
 export default {
   props: {

src/renderer/components/FlightgearMap.vue

@@ -68,7 +68,6 @@ You should have received a copy of the GNU General Public License along with FG
 
   // https://github.com/KoRiGaN/Vue2Leaflet/issues/103
   delete L.Icon.Default.prototype._getIconUrl
-
   L.Icon.Default.mergeOptions({
     iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
     iconUrl: require('leaflet/dist/images/marker-icon.png'),
@@ -80,6 +79,26 @@ You should have received a copy of the GNU General Public License along with FG
     props: [],
     created () {
       this.loadingInstance = null
+      this.$store.watch(
+        function (state) {
+          return state.Loading.icao
+        },
+        (newValue, oldValue) => {
+          // debugger
+          console.log('setIcaoLoading ' + oldValue + ' => ' + newValue + ' ' + this.groundnetLoaded + ' ' + this.pavementLoaded + ' ' + this.loadingInstance)
+          if (newValue !== oldValue && newValue !== '') {
+            this.groundnetLoaded = newValue
+            if ((this.loadingInstance === null || this.loadingInstance === undefined)) {
+              this.loadingInstance = Loading.service({ fullscreen: false })
+            }
+          }
+        }
+        ,
+        {
+          deep: false,
+          immediate: true
+        }
+      )
       this.$store.watch(
         function (state) {
           return state.Loading.groundnetLoaded
@@ -89,11 +108,6 @@ You should have received a copy of the GNU General Public License along with FG
           console.log('groundnetLoaded ' + oldValue + ' => ' + newValue + ' ' + this.groundnetLoaded + ' ' + this.pavementLoaded + ' ' + this.loadingInstance)
           if (newValue !== oldValue) {
             this.groundnetLoaded = newValue
-            if (!(this.groundnetLoaded &&
-                this.pavementLoaded) &&
-                (this.loadingInstance === null || this.loadingInstance === undefined)) {
-              this.loadingInstance = Loading.service({ fullscreen: false })
-            }
             if (this.groundnetLoaded &&
                 this.pavementLoaded &&
                 this.loadingInstance !== null) {
@@ -116,11 +130,6 @@ You should have received a copy of the GNU General Public License along with FG
           console.log('pavementLoaded ' + oldValue + ' => ' + newValue + ' ' + this.groundnetLoaded + ' ' + this.pavementLoaded + ' ' + this.loadingInstance)
           if (newValue !== oldValue) {
             this.pavementLoaded = newValue
-            if (!(this.groundnetLoaded &&
-                this.pavementLoaded) &&
-                (this.loadingInstance === null || this.loadingInstance === undefined)) {
-              this.loadingInstance = Loading.service({ fullscreen: false })
-            }
             if (this.groundnetLoaded &&
                 this.pavementLoaded &&
                 this.loadingInstance !== null) {
@@ -146,6 +155,7 @@ You should have received a copy of the GNU General Public License along with FG
             .filter(feature => this.visible(feature))
             .map(feature => feature.properties.icao)
           if (airportsToLoad.length > 0 && airportsToLoad[0] !== this.editingAirport && this.zoom > 12) {
+            this.$store.dispatch('setIcaoLoading', airportsToLoad[0])
             this.$nextTick(() => { // Loading should be closed asynchronously
               this.$refs.pavementLayer.load(airportsToLoad[0])
               this.$refs.editLayer.load(airportsToLoad[0])

src/renderer/store/modules/Loading.js

@@ -12,9 +12,12 @@ You should have received a copy of the GNU General Public License along with FG
 
 import Vue from 'vue'
 
-const state = { groundnetLoaded: false, pavementLoaded: false }
+const state = { icao: '', groundnetLoaded: false, pavementLoaded: false }
 
 const mutations = {
+  SET_ICAO_LOADING (state, icao) {
+    Vue.set(state, 'icao', icao)
+  },
   SET_GROUNDNET_LOADED (state, loaded) {
     Vue.set(state, 'groundnetLoaded', loaded)
   },
@@ -24,6 +27,9 @@ const mutations = {
 }
 
 const actions = {
+  async setIcaoLoading (context, p) {
+    context.commit('SET_ICAO_LOADING', p)
+  },
   async setGroundnetLoaded (context, p) {
     context.commit('SET_GROUNDNET_LOADED', p)
   },