Display alert on GUI connection error (fixes #26)

gui/app.js

@@ -1,18 +1,36 @@
 var syncthing = angular.module('syncthing', []);
 
 syncthing.controller('SyncthingCtrl', function ($scope, $http) {
+    var prevDate = 0;
+    var modelGetOK = true;
+
+    function modelGetSucceeded() {
+        if (!modelGetOK) {
+            $('#networkError').modal('hide');
+            modelGetOK = true;
+        }
+    }
+
+    function modelGetFailed() {
+        if (modelGetOK) {
+            $('#networkError').modal({backdrop: 'static', keyboard: false});
+            modelGetOK = false;
+        }
+    }
+
     $http.get("/rest/version").success(function (data) {
         $scope.version = data;
     });
     $http.get("/rest/config").success(function (data) {
         $scope.config = data;
     });
-    
-    var prevDate = 0;
 
     $scope.refresh = function () {
         $http.get("/rest/model").success(function (data) {
             $scope.model = data;
+            modelGetSucceeded();
+        }).error(function () {
+            modelGetFailed();
         });
         $http.get("/rest/connections").success(function (data) {
             var now = Date.now();
@@ -21,8 +39,8 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
 
             for (var id in data) {
                 try {
-                    data[id].inbps = 8 * (data[id].InBytesTotal - $scope.connections[id].InBytesTotal) / td;
-                    data[id].outbps = 8 * (data[id].OutBytesTotal - $scope.connections[id].OutBytesTotal) / td;
+                    data[id].inbps = Math.max(0, 8 * (data[id].InBytesTotal - $scope.connections[id].InBytesTotal) / td);
+                    data[id].outbps = Math.max(0, 8 * (data[id].OutBytesTotal - $scope.connections[id].OutBytesTotal) / td);
                 } catch (e) {
                     data[id].inbps = 0;
                     data[id].outbps = 0;

gui/index.html

@@ -118,6 +118,25 @@ html, body {
     | <a href="https://github.com/calmh/syncthing">Source Code</a>
 </div>
 
+<div id="networkError" class="modal fade">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header alert alert-danger">
+                <h4 class="modal-title">
+                <span class="glyphicon glyphicon-exclamation-sign"></span>
+                    Connection Error
+                </h4>
+            </div>
+            <div class="modal-body">
+                <p>
+                Syncthing seems to be down, or there is a problem with your Internet connection.
+                Retrying&hellip;
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
 <script src="angular.min.js"></script>
 <script src="jquery-2.0.3.min.js"></script>
 <script src="bootstrap/js/bootstrap.min.js"></script>