From ea41acfff51b1cf312d69badac281b5e80fdf453 Mon Sep 17 00:00:00 2001
From: Jakob Borg <jakob@nym.se>
Date: Wed, 5 Feb 2014 22:42:23 +0100
Subject: [PATCH] Clarify status badges and fix column widths (fixes #53)

---
 gui/app.js     | 16 ++++++++++++++++
 gui/index.html | 18 +++++++++---------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/gui/app.js b/gui/app.js
index c5a430da..3f80135d 100644
--- a/gui/app.js
+++ b/gui/app.js
@@ -118,6 +118,22 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         return "minus";
     };
 
+    $scope.nodeStatus = function (nodeCfg) {
+        if ($scope.connections[nodeCfg.NodeID]) {
+            return "Connected";
+        }
+
+        return "Disconnected";
+    };
+
+    $scope.nodeIcon = function (nodeCfg) {
+        if ($scope.connections[nodeCfg.NodeID]) {
+            return "ok";
+        }
+
+        return "minus";
+    };
+
     $scope.nodeClass = function (nodeCfg) {
         var conn = $scope.connections[nodeCfg.NodeID];
         if (conn) {
diff --git a/gui/index.html b/gui/index.html
index 284f79a3..31e09255 100644
--- a/gui/index.html
+++ b/gui/index.html
@@ -76,35 +76,35 @@ html, body {
                         <tbody>
                         <!-- myself -->
                         <tr class="text-muted">
-                            <td>
+                            <td style="width:13%">
                                 <span class="label label-default">
-                                    <span class="glyphicon glyphicon-ok"></span>
+                                    <span class="glyphicon glyphicon-ok"></span> This node
                                 </span>
                             </td>
-                            <td>
+                            <td style="width:12%">
                                 <span class="text-monospace">{{myID | short}}</span>
                             </td>
-                            <td>{{version}}</td>
-                            <td>this node</td>
-                            <td class="text-right">
+                            <td style="width:20%">{{version}}</td>
+                            <td style="width:25%"></td>
+                            <td style="width:10%" class="text-right">
                                 <span ng-show="nodeCfg.NodeID != myID">
                                     {{inbps | metric}}bps
                                     <span class="text-muted glyphicon glyphicon-chevron-down"></span>
                                 </span>
                             </td>
-                            <td class="text-right">
+                            <td style="width:10%" class="text-right">
                                 <span ng-show="nodeCfg.NodeID != myID">
                                     {{outbps | metric}}bps
                                     <span class="text-muted glyphicon glyphicon-chevron-up"></span>
                                 </span>
                             </td>
-                            <td class="text-right"></td>
+                            <td style="width:10%" class="text-right"></td>
                         </tr>
                         <!-- all other nodes -->
                         <tr ng-repeat="nodeCfg in nodes">
                             <td>
                                 <span class="label label-{{nodeClass(nodeCfg)}}">
-                                    <span class="glyphicon glyphicon-{{nodeIcon(nodeCfg)}}"></span>
+                                    <span class="glyphicon glyphicon-{{nodeIcon(nodeCfg)}}"></span> {{nodeStatus(nodeCfg)}}
                                 </span>
                             </td>
                             <td>