Advanced UI implementarion ready for testing

Implements requests from issue #13

src/renderer/App.vue

@@ -90,6 +90,7 @@ button.btn {
     fill: contrast(@main-color);
     width: 22px;
     float: left;
+    margin-right: 5px;
   }
 }
 

src/renderer/ProcessHandlerWin.js

@@ -7,7 +7,7 @@ class ProcessHandlerWin {
 
   create (conn) {
     return new Promise((resolve, reject) => {
-      const cmdArgs = [
+      let cmdArgs = [
         'cmd',
         `${conn.user}@${conn.host}:${conn.folder}`,
         conn.mountPoint,
@@ -26,6 +26,27 @@ class ProcessHandlerWin {
         '-okernel_cache'
       ]
 
+      if (conn.advanced.customCmdlOptionsEnabled) {
+        let optionalArgs = []
+
+        conn.advanced.customCmdlOptions.forEach(arg => {
+          cmdArgs = cmdArgs.filter(a => a.substr(2, arg.name.length) !== arg.name)
+
+          if (arg.value !== '') {
+            optionalArgs.push(`-o${arg.name}=${arg.value}`)
+          } else {
+            optionalArgs.push(`-o${arg.name}`)
+          }
+        })
+
+        cmdArgs = [
+          ...cmdArgs,
+          ...optionalArgs
+        ]
+      }
+
+      console.log(cmdArgs)
+
       if (conn.authType === 'password') {
         cmdArgs.push('-oPreferredAuthentications=password')
         cmdArgs.push('-opassword_stdin')

src/renderer/SshfsParamsList.js

@@ -0,0 +1,112 @@
+export default [
+  {
+    name: 'reconnect',
+    type: 'bool',
+    description: 'Reconnect to server'
+  },
+  {
+    name: 'delay_connect',
+    type: 'bool',
+    description: 'Delay connection to server'
+  },
+  {
+    name: 'sshfs_sync',
+    type: 'bool',
+    description: 'Synchronous writes'
+  },
+  {
+    name: 'no_readahead',
+    type: 'bool',
+    description: 'Synchronous reads (no speculative readahead)'
+  },
+  {
+    name: 'sshfs_debug',
+    type: 'bool',
+    description: 'Print some debugging information'
+  },
+  {
+    name: 'cache',
+    type: 'string',
+    description: 'Enable caching {yes,no} (default: yes)'
+  },
+  {
+    name: 'cache_timeout',
+    type: 'number',
+    description: 'Sets timeout for caches in seconds (default: 20)'
+  },
+  {
+    name: 'cache_stat_timeout',
+    type: 'number',
+    description: 'Sets timeout for stat cache'
+  },
+  {
+    name: 'cache_dir_timeout',
+    type: 'number',
+    description: 'Sets timeout for dir cache'
+  },
+  {
+    name: 'cache_link_timeout',
+    type: 'number',
+    description: 'Sets timeout for link cache'
+  },
+  {
+    name: 'workaround',
+    type: 'string',
+    description: 'Colon separated list of workarounds'
+  },
+  {
+    name: 'idmap',
+    type: 'string',
+    description: 'User/group ID mapping'
+  },
+  {
+    name: 'oidfile',
+    type: 'string',
+    description: 'File containing username:uid mappings for idmap=file'
+  },
+  {
+    name: 'gidfile',
+    type: 'string',
+    description: 'File containing groupname:gid mappings for idmap=file'
+  },
+  {
+    name: 'nomap',
+    type: 'string',
+    description: 'With idmap=file, how to handle missing mappings'
+  },
+  {
+    name: 'ssh_command',
+    type: 'string',
+    description: 'Execute CMD instead of "ssh"'
+  },
+  {
+    name: 'ssh_protocol',
+    type: 'string',
+    description: 'SSH protocol to use (default: 2)'
+  },
+  {
+    name: 'sftp_server',
+    type: 'string',
+    description: 'Path to SFTP server or subsystem (default: sftp)'
+  },
+  {
+    name: 'directport',
+    type: 'number',
+    description: 'Directly connect to port bypassing SSH -o slave communicate over stdin and stdout bypassing network'
+  },
+  {
+    name: 'transform_symlinks',
+    type: 'bool',
+    description: 'Transform absolute symlinks to relative'
+  },
+  {
+    name: 'follow_symlinks',
+    type: 'bool',
+    description: 'Follow symlinks on the server'
+  },
+  {
+    name: 'no_check_root',
+    type: 'bool',
+    description: 'Don\'t check for existence of "dir" on server'
+  }
+]

src/renderer/components/AddEditConnectionWindow/CustomCmdlOptions.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="custom-cmdl-list">
-    <h1 v-if="params.length === 0" class="no-data">No params added yet</h1>
+    <h1 v-if="value.length === 0" class="no-data">No params added yet</h1>
 
-    <div v-for="param in params" :key="param.uuid">
+    <div v-for="param in value" :key="param.uuid">
       <div class="option">
-        <select v-model="param.name" class="option">
+        <select v-model="param.name" class="option" @input="emmitChanges">
           <option v-for="option in options" :key="option.name" :value="option.name" :selected="param.name === option.name">{{option.name}}</option>
         </select>
       </div>
       <div>
-        <input type="text" :placeholder="getOption(param.name).description" v-model="param.value">
+        <input type="text" :placeholder="getOption(param.name).description" v-model="param.value" :disabled="getOption(param.name).type === 'bool'" @input="emmitChanges">
       </div>
       <div class="remove">
         <button @click="removeParam(param)">
@@ -27,6 +27,8 @@ import { v4 as uuid } from 'uuid'
 
 import Icon from '@/components/Icon'
 
+import SshfsParamsList from '@/SshfsParamsList'
+
 export default {
   name: 'CustomCmdlOptions',
 
@@ -35,23 +37,28 @@ export default {
   },
 
   props: {
-    list: {
+    value: {
       type: Array,
-      required: true
+      required: false,
+      default: []
     }
   },
 
   methods: {
     addParam () {
-      this.params.push({
+      this.value.push({
         uuid: uuid(),
         name: '',
         value: ''
       })
+
+      this.emmitChanges()
     },
 
     removeParam (param) {
-      this.params = this.params.filter(a => a.uuid !== param.uuid)
+      this.value.splice(this.value.findIndex(a => a.uuid === param.uuid), 1)
+
+      this.emmitChanges()
     },
 
     getOption (name) {
@@ -66,75 +73,16 @@ export default {
       }
 
       return option
+    },
+
+    emmitChanges () {
+      this.$emit('input', this.value)
     }
   },
 
   data () {
     return {
-      params: this.list,
-
-      options: [
-        {
-          name: 'reconnect',
-          type: 'bool',
-          description: 'Reconnect to server'
-        },
-        {
-          name: 'delay_connect',
-          type: 'bool',
-          description: 'Delay connection to server'
-        },
-        {
-          name: 'sshfs_sync',
-          type: 'bool',
-          description: 'Synchronous writes'
-        },
-        {
-          name: 'no_readahead',
-          type: 'bool',
-          description: 'Synchronous reads (no speculative readahead)'
-        },
-        {
-          name: 'sshfs_debug',
-          type: 'bool',
-          description: 'Print some debugging information'
-        },
-        {
-          name: 'cache',
-          type: 'string',
-          description: 'Enable caching {yes,no} (default: yes)'
-        },
-        {
-          name: 'cache_timeout',
-          type: 'number',
-          description: 'Sets timeout for caches in seconds (default: 20)'
-        },
-        {
-          name: 'cache_stat_timeout',
-          type: 'number',
-          description: 'Sets timeout for stat cache'
-        },
-        {
-          name: 'cache_dir_timeout',
-          type: 'number',
-          description: 'Sets timeout for dir cache'
-        },
-        {
-          name: 'cache_link_timeout',
-          type: 'number',
-          description: 'Sets timeout for link cache'
-        },
-        {
-          name: 'workaround',
-          type: 'string',
-          description: 'Colon separated list of workarounds'
-        },
-        {
-          name: 'idmap',
-          type: 'string',
-          description: 'User/group ID mapping'
-        }
-      ]
+      options: SshfsParamsList
     }
   }
 }
@@ -145,6 +93,7 @@ export default {
   .no-data {
     font-size: 15pt;
     color: fade(contrast(@main-color), 20%);
+    margin: 9px 0;
   }
 
   > div {

src/renderer/components/AddEditConnectionWindow/index.vue

@@ -62,7 +62,7 @@
           <div class="form-item">
             <label>Custom Command Line params <toggle-button style="float: right;" :color="toggleButtonColor" v-model="conn.advanced.customCmdlOptionsEnabled" sync labels></toggle-button></label>
 
-            <CustomCmdlOptions :list="conn.advanced.customCmdlOptions"/>
+            <CustomCmdlOptions v-model="conn.advanced.customCmdlOptions"/>
           </div>
         </Tab>
       </Tabs>

src/renderer/components/MainWindow/index.vue

@@ -202,7 +202,7 @@ export default {
       if (!this.runningInBackgroundNotificationShowed) {
         if (this.$store.state.Settings.settings.displayTrayMessageOnClose) {
           this.notify('Program still running in the system tray')
-          
+
           this.runningInBackgroundNotificationShowed = true
         }
       }