Mark unused devices as 'Unused' and in warning color, show folders per device (fixes #962)

gui/index.html

@@ -227,14 +227,15 @@
             <div class="panel-heading" data-toggle="collapse" data-parent="#devices" href="#device-{{$index}}" style="cursor: pointer">
               <h3 class="panel-title">
                 <identicon data-value="deviceCfg.DeviceID"></identicon>&emsp;{{deviceName(deviceCfg)}}
-                <span class="pull-right hidden-xs">
-                  <span ng-if="connections[deviceCfg.DeviceID] && completion[deviceCfg.DeviceID]._total == 100">
+                <span ng-switch="deviceStatus(deviceCfg)" class="pull-right hidden-xs">
+                  <span ng-switch-when="insync">
                     <span translate>Up to Date</span> (100%)
                   </span>
-                  <span ng-if="connections[deviceCfg.DeviceID] && completion[deviceCfg.DeviceID]._total < 100">
+                  <span ng-switch-when="syncing">
                     <span translate>Syncing</span> ({{completion[deviceCfg.DeviceID]._total | number:0}}%)
                   </span>
-                  <span translate ng-if="!connections[deviceCfg.DeviceID]">Disconnected</span>
+                  <span translate ng-switch-when="disconnected">Disconnected</span>
+                  <span translate ng-switch-when="unused">Unused</span>
                 </span>
               </h3>
             </div>
@@ -271,6 +272,10 @@
                       <td translate ng-if="!stats[deviceCfg.DeviceID].LastSeenDays || stats[deviceCfg.DeviceID].LastSeenDays >= 365" class="text-right">Never</td>
                       <td ng-if="stats[deviceCfg.DeviceID].LastSeenDays < 365" class="text-right">{{stats[deviceCfg.DeviceID].LastSeen | date:"yyyy-MM-dd HH:mm"}}</td>
                     </tr>
+                    <tr ng-if="deviceFolders(deviceCfg).length > 0">
+                      <th><span class="glyphicon glyphicon-hdd"></span>&emsp;<span translate>Folders</span></th>
+                      <td class="text-right">{{deviceFolders(deviceCfg).join(", ")}}</td>
+                    </tr>
                   </tbody>
                 </table>
               </div>

gui/scripts/syncthing/core/controllers/syncthingController.js

@@ -466,7 +466,29 @@ angular.module('syncthing.core')
             return 'minus';
         };
 
+        $scope.deviceStatus = function (deviceCfg) {
+            if ($scope.deviceFolders(deviceCfg).length === 0) {
+                return 'unused';
+            }
+
+            if ($scope.connections[deviceCfg.DeviceID]) {
+                if ($scope.completion[deviceCfg.DeviceID] && $scope.completion[deviceCfg.DeviceID]._total === 100) {
+                    return 'insync';
+                } else {
+                    return 'syncing';
+                }
+            }
+
+            // Disconnected
+            return 'disconnected';
+        };
+
         $scope.deviceClass = function (deviceCfg) {
+            if ($scope.deviceFolders(deviceCfg).length === 0) {
+                // Unused
+                return 'warning';
+            }
+
             if ($scope.connections[deviceCfg.DeviceID]) {
                 if ($scope.completion[deviceCfg.DeviceID] && $scope.completion[deviceCfg.DeviceID]._total === 100) {
                     return 'success';
@@ -475,6 +497,7 @@ angular.module('syncthing.core')
                 }
             }
 
+            // Disconnected
             return 'info';
         };
 
@@ -861,15 +884,19 @@ angular.module('syncthing.core')
             $scope.saveConfig();
         };
 
-        $scope.sharesFolder = function (folderCfg) {
-            var names = [];
-            folderCfg.Devices.forEach(function (device) {
-                if (device.DeviceID != $scope.myID) {
-                    names.push($scope.deviceName($scope.findDevice(device.DeviceID)));
+        $scope.deviceFolders = function (deviceCfg) {
+            var folders = [];
+            for (var folderID in $scope.folders) {
+                var devices = $scope.folders[folderID].Devices
+                for (var i = 0; i < devices.length; i++) {
+                    if (devices[i].DeviceID == deviceCfg.DeviceID) {
+                        folders.push(folderID)
+                        break
+                    }
                 }
-            });
-            names.sort();
-            return names.join(", ");
+            };
+            folders.sort();
+            return folders;
         };
 
         $scope.deleteFolder = function () {