[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).

4 files changed, 41 insertions, 9 deletions

diff --git a/interface/index.html b/interface/index.html
index 88a3c41f8..bb3206aa9 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -24,8 +24,8 @@
 		<form class="navbar-form navbar-left">
 			<select id="selSrv" class="form-control"></select>
 		</form>
-		<ul class="nav navbar-nav nav-pills" role="tablist">
-			<li role="presentation" class="active"><a id="status_nav" aria-controls="status" role="tab" href="#status" data-toggle="tab">Status</a></li>
+		<ul class="nav navbar-nav nav-pills nav-tabs-sticky" role="tablist">
+			<li role="presentation"><a id="status_nav" aria-controls="status" role="tab" href="#status" data-toggle="tab">Status</a></li>
 
 			<li role="presentation"><a id="throughput_nav" aria-controls="throughput" role="tab" href="#throughput" data-toggle="tab">Throughput</a></li>
 
@@ -35,8 +35,8 @@
 			<li role="presentation"><a id="history_nav" aria-controls="history" role="tab" href="#history" data-toggle="tab">History</a></li>
 		</ul>
     <ul class="nav navbar-nav nav-pills pull-right" style="display: none;">
-      <li><a href="#" data-toggle="tab" id="refresh"><i class="glyphicon glyphicon-refresh glyphicon-spin"></i> Refresh</a></li>
-      <li><a href="#" data-toggle="tab" id="disconnect"><i class="glyphicon glyphicon-off"></i> Disconnect</a></li>
+      <li><a href="#" role="button" data-toggle="button" id="refresh"><i class="glyphicon glyphicon-refresh glyphicon-spin"></i> Refresh</a></li>
+      <li><a href="#" role="button" data-toggle="button" id="disconnect"><i class="glyphicon glyphicon-off"></i> Disconnect</a></li>
     </ul>
 	</div>
 </nav>
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);
         });
diff --git a/interface/js/lib/jquery.stickytabs.min.js b/interface/js/lib/jquery.stickytabs.min.js
new file mode 100644
index 000000000..96967ea43
--- /dev/null
+++ b/interface/js/lib/jquery.stickytabs.min.js
@@ -0,0 +1,9 @@
+/*!
+ * jQuery Plugin: Sticky Tabs
+ *
+ * @author Aidan Lister <aidan@php.net>
+ * @version 1.2.1
+ * @see https://github.com/aidanlister/jquery-stickytabs
+ * @license MIT
+ */
+!function(c){c.fn.stickyTabs=function(o){function t(){var o="href"==n.selectorAttribute?window.location.hash:window.location.hash.substring(1),t=o?"a["+n.selectorAttribute+'="'+o+'"]':n.initialTab;c(t,i).tab("show"),setTimeout(l,1)}var i=this,n=c.extend({getHashCallback:function(o,t){return o},selectorAttribute:"href",backToTop:!1,initialTab:c("li.active > a",i)},o),l=function(){!0===n.backToTop&&window.scrollTo(0,0)};return t(),c(window).on("hashchange",t),c("a",i).on("click",function(o){var t=this.href.split("#")[1];!function(o){history&&history.pushState?history.pushState(null,null,window.location.pathname+window.location.search+"#"+o):(scrollV=document.body.scrollTop,scrollH=document.body.scrollLeft,window.location.hash=o,document.body.scrollTop=scrollV,document.body.scrollLeft=scrollH)}(n.getHashCallback(t,this)),setTimeout(l,1)}),this}}(jQuery);
\ No newline at end of file
diff --git a/interface/js/main.js b/interface/js/main.js
index 0c48d95f5..d5ca99a94 100644
--- a/interface/js/main.js
+++ b/interface/js/main.js
@@ -13,12 +13,14 @@ requirejs.config({
         d3pie: "d3pie.min",
         footable: "footable.min",
         nprogress: "nprogress.min",
+        stickytabs: "jquery.stickytabs.min"
     },
     shim: {
         bootstrap: {exports:"bootstrap", deps:["jquery"]},
         d3pie: {exports:"d3pie", deps:["d3.global", "jquery"]},
         d3evolution: {exports:"D3Evolution", deps:["d3", "jquery"]},
-        footable: {deps:["bootstrap", "jquery"]}
+        footable: {deps:["bootstrap", "jquery"]},
+        stickytabs: {deps:["jquery"]}
     }
 });