detect internet connection cut and temporary add mask to page

app/app_routes.js

@@ -57,6 +57,47 @@ angular.module('ulakbus')
 
             .otherwise({redirectTo: '/dashboard'});
     }])
+    .factory('IsOnline', function () {
+        var isOnlineService = {};
+        isOnlineService.status = navigator.onLine;
+        isOnlineService.set_status = function (state) {
+            isOnlineService.status = state;
+        };
+        isOnlineService.get_status = function () {
+            return isOnlineService.status;
+        };
+        return isOnlineService;
+    })
+    .run(function ($window, $rootScope, $document, $route, IsOnline) {
+        // in this run configuration we detect internet connection and append a mask to body
+        // when reconnect the mask will be removed
+        var offlineMask = angular.element('<div class="body-mask">' +
+            '</div>');
+        offlineMask.css({zIndex: '2010', opacity: '0.6'});
+        var offlineAlert = angular.element(
+            '<div class="alert alert-danger text-center" role="alert">' +
+            'İnternet bağlantınız kesilmiştir. Bağlantı sağlandığında kaldığınız yerden devam edebilirsiniz.' +
+            '</div>'
+        ).css({zIndex: '2011', position: 'relative'});
+        var body = $document.find('body').eq(0);
+        // detect internet connection
+        var is_online = navigator.onLine;
+        if (!is_online){body.append(offlineMask).append(offlineAlert);}
+        $window.addEventListener("offline", function () {
+            is_online = false;
+            IsOnline.set_status(false);
+            body.append(offlineMask).append(offlineAlert);
+        }, false);
+
+        $window.addEventListener("online", function () {
+            is_online = true;
+            IsOnline.set_status(true);
+            offlineMask.remove();
+            offlineAlert.remove();
+            if ($rootScope.current_user === true){window.location.reload();}
+            // $route.reload();
+        }, false);
+    })
     .run(function ($rootScope, AuthService) {
 
         AuthService.check_auth();

app/index.html

@@ -120,6 +120,7 @@
 <script src="components/auth/auth_controller.js"></script>
 <script src="components/auth/auth_service.js"></script>
 <script src="components/dashboard/dashboard_controller.js"></script>
+<script src="components/dashboard/dashboard_widgets_directives.js"></script>
 <script src="components/crud/crud_controller.js"></script>
 <script src="components/debug/debug_controller.js"></script>
 <script src="components/devSettings/devSettings_controller.js"></script>

app/main.html

@@ -128,6 +128,7 @@
 <script src="components/auth/auth_controller.js"></script>
 <script src="components/auth/auth_service.js"></script>
 <script src="components/dashboard/dashboard_controller.js"></script>
+<script src="components/dashboard/dashboard_widgets_directives.js"></script>
 <script src="components/crud/crud_controller.js"></script>
 <script src="components/debug/debug_controller.js"></script>
 <script src="components/devSettings/devSettings_controller.js"></script>