[WebUI] Add URL fragments (#) support

for tab switching

- Show the correct tab when the page is loaded if there is a hash in the URL.
- Changing the hash in the URL when the tab is changed.
- Change the tab when the hash changes in the URL (back / forward buttons).

1 files changed, 25 insertions, 4 deletions

diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index 2188f201f..e37a08cf0 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -25,10 +25,10 @@
 
 /* global jQuery:false, Visibility:false */
 
-define(["jquery", "d3pie", "visibility", "nprogress", "app/stats", "app/graph", "app/config",
+define(["jquery", "d3pie", "visibility", "nprogress", "stickytabs", "app/stats", "app/graph", "app/config",
     "app/symbols", "app/history", "app/upload"],
 // eslint-disable-next-line max-params
-function ($, D3pie, visibility, NProgress, tab_stat, tab_graph, tab_config,
+function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
     tab_symbols, tab_history, tab_upload) {
     "use strict";
     // begin
@@ -135,6 +135,23 @@ function ($, D3pie, visibility, NProgress, tab_stat, tab_graph, tab_config,
     }
 
     function displayUI() {
+        ui.query("auth", {
+            success: function (neighbours_status) {
+                $("#selSrv").empty();
+                $("#selSrv").append($('<option value="All SERVERS">All SERVERS</option>'));
+                neighbours_status.forEach(function (e) {
+                    $("#selSrv").append($('<option value="' + e.name + '">' + e.name + "</option>"));
+                    if (checked_server === e.name) {
+                        $('#selSrv [value="' + e.name + '"]').prop("selected", true);
+                    } else if (!e.status) {
+                        $('#selSrv [value="' + e.name + '"]').prop("disabled", true);
+                    }
+                });
+            },
+            errorMessage: "Cannot get server status",
+            server: "All SERVERS"
+        });
+
         // In many browsers local storage can only store string.
         // So when we store the boolean true or false, it actually stores the strings "true" or "false".
         ui.read_only = sessionStorage.getItem("read_only") === "true";
@@ -152,7 +169,7 @@ function ($, D3pie, visibility, NProgress, tab_stat, tab_graph, tab_config,
         $("#mainUI").show();
         $("#progress").show();
         $(buttons).show();
-        tabClick("#refresh");
+        $(".nav-tabs-sticky").stickyTabs({initialTab:"#status_nav"});
         $("#progress").hide();
     }
 
@@ -267,7 +284,11 @@ function ($, D3pie, visibility, NProgress, tab_stat, tab_graph, tab_config,
             }, 1000);
         });
 
-        $("a[data-toggle=\"tab\"]").on("click", function (e) {
+        $("a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) {
+            var tab_id = "#" + $(e.target).attr("id");
+            tabClick(tab_id);
+        });
+        $("a[data-toggle=\"button\"]").on("click", function (e) {
             var tab_id = "#" + $(e.target).attr("id");
             tabClick(tab_id);
         });