gui: Add dropdown menu to choose discovered devices to device modal (fixes #4157)

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/4186
LGTM: AudriusButkevicius, calmh

gui/default/assets/lang/lang-en.json

@@ -273,6 +273,7 @@
    "When adding a new device, keep in mind that this device must be added on the other side too.": "When adding a new device, keep in mind that this device must be added on the other side too.",
    "When adding a new folder, keep in mind that the Folder ID is used to tie folders together between devices. They are case sensitive and must match exactly between all devices.": "When adding a new folder, keep in mind that the Folder ID is used to tie folders together between devices. They are case sensitive and must match exactly between all devices.",
    "Yes": "Yes",
+   "You can also select one of these nearby devices:": "You can also select one of these nearby devices:",
    "You can change your choice at any time in the Settings dialog.": "You can change your choice at any time in the Settings dialog.",
    "You can read more about the two release channels at the link below.": "You can read more about the two release channels at the link below.",
    "You must keep at least one version.": "You must keep at least one version.",

gui/default/syncthing/core/syncthingController.js

@@ -1185,7 +1185,15 @@ angular.module('syncthing.core')
         $scope.addDevice = function (deviceID, name) {
             return $http.get(urlbase + '/system/discovery')
                 .success(function (registry) {
-                    $scope.discovery = registry;
+                    $scope.discovery = [];
+                    for (var id in registry) {
+                        if ($scope.discovery.length === 5) {
+                            break;
+                        }
+                        if (!(id in $scope.devices)) {
+                            $scope.discovery.push(id);
+                        }
+                    }
                 })
                 .then(function () {
                     $scope.currentDevice = {

gui/default/syncthing/device/editDeviceModalView.html

@@ -5,9 +5,15 @@
         <label translate for="deviceID">Device ID</label>
         <input ng-if="!editingExisting" name="deviceID" id="deviceID" class="form-control text-monospace" type="text" ng-model="currentDevice.deviceID" required valid-deviceid list="discovery-list" />
         <datalist id="discovery-list" ng-if="!editingExisting">
-          <option ng-repeat="(id, data) in discovery" value="{{id}}" />
+          <option ng-repeat="id in discovery" value="{{id}}" />
         </datalist>
         <div ng-if="editingExisting" class="well well-sm text-monospace" select-on-click>{{currentDevice.deviceID}}</div>
+        <p class="help-block" ng-if="!editingExisting && discovery">
+          <span translate>You can also select one of these nearby devices:</span>
+          <ul>
+            <li ng-repeat="id in discovery"><a ng-click="currentDevice.deviceID = id">{{id}}</a>
+          </ul>
+        </p>
         <p class="help-block">
           <span translate ng-if="deviceEditor.deviceID.$valid || deviceEditor.deviceID.$pristine">The device ID to enter here can be found in the "Actions > Show ID" dialog on the other device. Spaces and dashes are optional (ignored).</span>
           <span translate ng-show="!editingExisting && (deviceEditor.deviceID.$valid || deviceEditor.deviceID.$pristine)">When adding a new device, keep in mind that this device must be added on the other side too.</span>