Start to add Socket Disconnected Modal.

res/app/components/stf/common-ui/modals/index.js

@@ -1,5 +1,6 @@
 module.exports = angular.module('stf.modals', [
   require('./fatal-message').name,
+  require('./socket-disconnected').name,
   require('./version-update').name,
   require('./add-adb-key-modal').name
 ])

res/app/components/stf/common-ui/modals/socket-disconnected/index.js

@@ -0,0 +1,4 @@
+module.exports = angular.module('stf.socket-disconnected', [
+  require('stf/common-ui/modals/common').name
+])
+  .factory('SocketDisconnectedService', require('./socket-disconnected-service'))

res/app/components/stf/common-ui/modals/socket-disconnected/socket-disconnected-service.js

@@ -0,0 +1,40 @@
+module.exports =
+  function SocketDisconnectedServiceFactory($modal, $location, $route) {
+    var service = {}
+
+
+    var ModalInstanceCtrl = function ($scope, $modalInstance) {
+      $scope.ok = function () {
+        $modalInstance.close(true)
+        $route.reload()
+        //$location.path('/control/' + device.serial)
+      }
+
+
+      $scope.second = function () {
+        $modalInstance.dismiss()
+        //$location.path('/devices/')
+      }
+
+      $scope.cancel = function () {
+        $modalInstance.dismiss('cancel')
+      }
+
+    }
+
+    service.open = function () {
+      var modalInstance = $modal.open({
+        template: require('./socket-disconnected.jade'),
+        controller: ModalInstanceCtrl,
+        resolve: {}
+      })
+
+      modalInstance.result.then(function () {
+      }, function () {
+
+      })
+    }
+
+
+    return service
+  }

res/app/components/stf/common-ui/modals/socket-disconnected/socket-disconnected-spec.js

@@ -0,0 +1,11 @@
+describe('SocketDisconnectedService', function() {
+
+  beforeEach(angular.mock.module(require('./index').name))
+
+  it('should ...', inject(function(SocketDisconnectedService) {
+
+	//expect(SocketDisconnectedService.doSomething()).toEqual('something')
+
+  }))
+
+})

res/app/components/stf/common-ui/modals/socket-disconnected/socket-disconnected.jade

@@ -0,0 +1,24 @@
+.stf-fatal-message.stf-modal
+  .modal-header.dialog-header-errorX
+    button(type='button', ng-click='cancel()').close ×
+    h4.modal-title.text-danger
+      i.fa.fa-warning
+      .button-spacer
+      span(translate) Socket was disconnected
+  .modal-body
+    h4(translate, ng-bind='device.likelyLeaveReason | likelyLeaveReason')
+    br
+    .big-thumbnail
+      //.device-photo-small
+      //  img(ng-src='/static/app/devices/icon/x120/{{ device.image || "E30HT.jpg" }}')
+      //.device-name(ng-bind='device.enhancedName')
+      //h3.device-status(ng-class='stateColor')
+      //  span(ng-bind='device.enhancedStatePassive | translate')
+
+  .modal-footer
+    button.btn.btn-primary-outline.pull-right(type='button', ng-click='ok()')
+      i.fa.fa-refresh
+      span(translate) Try to reconnect
+    //button.btn.btn-success-outline(ng-click='second()')
+      i.fa.fa-sitemap
+      span(translate) Go to Device List

res/app/layout/index.js

@@ -12,6 +12,7 @@ module.exports = angular.module('layout', [
   require('angular-borderlayout').name,
   require('stf/common-ui').name,
   require('stf/socket/socket-state').name,
+  require('stf/common-ui/modals/socket-disconnected').name,
   require('stf/browser-info').name
 ])
   .config(['$tooltipProvider', function ($tooltipProvider) {

res/app/layout/layout-controller.js

@@ -1,7 +1,9 @@
 module.exports =
-  function LayoutCtrl(LanguageService, $rootScope, hotkeys, $filter, gettext) {
+  function LayoutCtrl(LanguageService, $rootScope, hotkeys, $filter, gettext,
+    SocketDisconnectedService) {
     LanguageService.updateLanguage()
 
+    //SocketDisconnectedService.open()
 
     function toggleAdminMode() {
       var enabled = $filter('translate')(gettext('Admin mode has been enabled.'))