Filesettings

src/renderer/components/DirectorySelect.vue

@@ -3,7 +3,7 @@
     <div class="select-button">
       ...
     </div>
-    <input type="file" @change="handleFileChange" webkitdirectory directory/>
+    <input name="hiddenDir" type="file" v-on:change="handleFileChange($event)" webkitdirectory directory tabindex="-1"/>
   </label>
 </template>
 
@@ -20,9 +20,15 @@
 
   methods: {
     handleFileChange (e) {
-      var first = e.target.files[0].webkitRelativePath.split("/")[0];
-      var webkitdirectoryPath = e.target.files[0].path.split(first)[0] + first;
-      this.$emit('input', webkitdirectoryPath)
+      try {
+        if (e.target.files && e.target.files.length>0) {
+          var first = e.target.files[0].webkitRelativePath.split("/")[0];
+          var webkitdirectoryPath = e.target.files[0].path.split(first)[0] + first;
+          this.$emit('input', webkitdirectoryPath)          
+        }
+      } catch (error) {
+        console.error(error)
+      }
     }
   }
 }
@@ -39,6 +45,8 @@
 
   text-align: center;
   font-weight: bold;
+  width: 28px;
+  height: 28px;
 }
 
 .directory-select > input[type="file"] {

src/renderer/components/SettingsPanel.vue

@@ -11,17 +11,25 @@
         <el-col :span="22" class="label">Airports Directory</el-col>
       </el-row>
       <el-row>
-        <el-col :span="20" class="file-label">{{ airports_directory }}</el-col>
-        <el-col :span="4">
-          <directory-select @input="airportsDirectorySelect"></directory-select>
+        <el-col :span="22" v-bind:class="{ invalid: !airports_directory_ok, file_label: airports_directory_ok}">{{ airports_directory }}</el-col>
+        <el-col :span="2">
+          <el-popover
+            placement="top-start"
+            title="E-Mail"
+            width="200"
+            trigger="hover"
+            content="The work directory. Best is a copy from groundweb"
+          >
+            <directory-select @input="airportsDirectorySelect" slot="reference"></directory-select>
+          </el-popover>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="22" class="label">Flightgear Data Directory</el-col>
       </el-row>
       <el-row>
-        <el-col :span="20" class="file-label">{{ flightgear_directory }}</el-col>
-        <el-col :span="4">
+        <el-col :span="22" v-bind:class="{ invalid: !flightgear_directory_ok, file_label: flightgear_directory_ok}">{{ flightgear_directory }}</el-col>
+        <el-col :span="2">
         <el-popover
           placement="top-start"
           title="E-Mail"
@@ -34,20 +42,24 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col :span="7" class="label">Traffic Directory</el-col>
-        <el-col :span="15" v-bind:class="{ invalid: !Traffic_directory_ok}">{{ Traffic_directory }}</el-col>
+        <el-col :span="22" class="label">Traffic Directory</el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="22" v-bind:class="{ invalid: !Traffic_directory_ok, file_label: Traffic_directory_ok}">{{ Traffic_directory }}</el-col>
         <el-col :span="2">
         </el-col>
       </el-row>
       <el-row>
-        <el-col :span="7" class="label">APT File</el-col>
-        <el-col :span="15" v-bind:class="{invalid: !apt_file_ok}" >{{ apt_file }}</el-col>
+        <el-col :span="22" class="label">APT File</el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="22" v-bind:class="{invalid: !apt_file_ok}" >{{ apt_file }}</el-col>
         <el-col :span="2">
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="7" class="label">Export Directory</el-col>
-        <el-col :span="15" class="file-label">{{ test_directory }}</el-col>
+        <el-col :span="15" v-bind:class="{invalid: !test_directory_ok, file_label: test_directory_ok}">{{ test_directory }}</el-col>
         <el-col :span="2">
           <directory-select @input="testDirectorySelect"></directory-select>
         </el-col>
@@ -194,6 +206,14 @@
       flightgear_directory: function () {
         return this.$store.state.Settings.settings.flightgearDirectory
       },
+      flightgear_directory_ok: function () {
+        try {
+          fs.accessSync(this.$store.state.Settings.settings.flightgearDirectory)
+          return true
+        } catch (error) {
+          return false
+        }
+      },
       AI_directory: function () {
         return this.$store.state.Settings.settings.flightgearDirectory_ai
       },
@@ -222,9 +242,25 @@
       airports_directory: function () {
         return this.$store.state.Settings.settings.airportsDirectory
       },
+      airports_directory_ok: function () {
+        try {
+          fs.accessSync(this.$store.state.Settings.settings.airportsDirectory)
+          return true
+        } catch (error) {
+          return false
+        }
+      },
       test_directory: function () {
         return this.$store.state.Settings.settings.testDirectory
       },
+      test_directory_ok: function () {
+        try {
+          fs.accessSync(this.$store.state.Settings.settings.testDirectory)
+          return true
+        } catch (error) {
+          return false
+        }
+      },
       scanLogging: {
       // getter
         get: function () {
@@ -247,14 +283,14 @@
   border-radius: 4px;
 }
 .label {
-  padding: 10px;
+  padding: 5px;
   font-weight: bold;
 }
-.file-label {
-  padding: 10px;
+.file_label {
+  padding: 5px;
 }
 .invalid {
-  padding: 10px;
+  padding: 5px;
   background-color: red;
 }