Merge pull request #968 from pluby/directory-auto

Directory auto-complete.

cmd/syncthing/gui.go

@@ -94,6 +94,7 @@ func startGUI(cfg config.GUIConfiguration, assetDir string, m *model.Model) erro
 	getRestMux.HandleFunc("/rest/config", restGetConfig)
 	getRestMux.HandleFunc("/rest/config/sync", restGetConfigInSync)
 	getRestMux.HandleFunc("/rest/connections", withModel(m, restGetConnections))
+	getRestMux.HandleFunc("/rest/autocomplete/directory", restGetAutocompleteDirectory)
 	getRestMux.HandleFunc("/rest/discovery", restGetDiscovery)
 	getRestMux.HandleFunc("/rest/errors", restGetErrors)
 	getRestMux.HandleFunc("/rest/events", restGetEvents)
@@ -643,6 +644,29 @@ func restGetPeerCompletion(m *model.Model, w http.ResponseWriter, r *http.Reques
 	json.NewEncoder(w).Encode(comp)
 }
 
+func restGetAutocompleteDirectory(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json; charset=utf-8")
+	qs := r.URL.Query()
+	current := qs.Get("current")
+	search, _ := osutil.ExpandTilde(current)
+	pathSeparator := string(os.PathSeparator)
+	if strings.HasSuffix(current, pathSeparator) && !strings.HasSuffix(search, pathSeparator) {
+		search = search + pathSeparator
+	}
+	subdirectories, _ := filepath.Glob(search + "*")
+	ret := make([]string, 0, 10)
+	for _, subdirectory := range subdirectories {
+		info, err := os.Stat(subdirectory)
+		if err == nil && info.IsDir() {
+			ret = append(ret, subdirectory)
+			if len(ret) > 9 {
+				break
+			}
+		}
+	}
+	json.NewEncoder(w).Encode(ret)
+}
+
 func embeddedStatic(assetDir string) http.Handler {
 	assets := auto.Assets()
 

gui/app.js

@@ -777,6 +777,19 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http, $translate, $loca
         return folderList($scope.folders);
     };
 
+    $scope.directoryList = [];
+
+    $scope.$watch('currentFolder.Path', function (newvalue) {
+      $http.get(
+        urlbase + '/autocomplete/directory',
+        {
+          params: { current: newvalue }
+        }
+      ).success(function (data) {
+        $scope.directoryList = data;
+      });
+    });
+
     $scope.editFolder = function (deviceCfg) {
         $scope.currentFolder = angular.copy(deviceCfg);
         $scope.currentFolder.selectedDevices = {};

gui/index.html

@@ -458,7 +458,10 @@
                 </div>
                 <div class="form-group" ng-class="{'has-error': folderEditor.folderPath.$invalid && folderEditor.folderPath.$dirty}">
                   <label translate for="folderPath">Folder Path</label>
-                  <input name="folderPath" ng-readonly="editingExisting" id="folderPath" class="form-control" type="text" ng-model="currentFolder.Path" required></input>
+                  <input name="folderPath" ng-readonly="editingExisting" id="folderPath" class="form-control" type="text" ng-model="currentFolder.Path" list="directory-list" required />
+                  <datalist id="directory-list">
+                    <option ng-repeat="directory in directoryList" value="{{ directory }}" />
+                  </datalist>
                   <p class="help-block">
                     <span translate ng-if="folderEditor.folderPath.$valid || folderEditor.folderPath.$pristine">Path to the folder on the local computer. Will be created if it does not exist. The tilde character (~) can be used as a shortcut for</span> <code>{{system.tilde}}</code>.
                     <span translate ng-if="folderEditor.folderPath.$error.required && folderEditor.folderPath.$dirty">The folder path cannot be blank.</span>