[WebUI] Add symbols sorting buttons

to detail history rows

diff --git a/.eslintrc.json b/.eslintrc.json
index 722f2b8aee8ed831ee97854d4e6030ebabbde2fe..230365d867b20995478385f0aee41f0459575413 100644 (file)
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -23,7 +23,7 @@
             "singleLine": { "afterColon": false }
         }],
         "max-params": ["warn", 6],
-        "max-statements": ["warn", 30],
+        "max-statements": ["warn", 31],
         "max-statements-per-line": ["error", { "max": 2 }],
         "multiline-comment-style": "off",
         "multiline-ternary": ["error", "always-multiline"],
@@ -46,6 +46,7 @@
         "prefer-spread": "off",
         "prefer-template": "off",
         "quote-props" : ["error", "consistent-as-needed"],
+        "quotes": ["error", "double", { "avoidEscape": true }],
         "require-jsdoc": "off",
         "require-unicode-regexp": "off",
         "space-before-function-paren": ["error", {

diff --git a/interface/js/app/history.js b/interface/js/app/history.js
index 1edd4bf288ce263794797dcf0dc9f649ff47ce1e..184be994cb7c801fcbb4d01eb943feed8b08b7f4 100644 (file)
--- a/interface/js/app/history.js
+++ b/interface/js/app/history.js
@@ -113,6 +113,11 @@ define(["jquery", "footable", "humanize"],
             };
         }
 
+        function getSelector(id) {
+            var e = document.getElementById(id);
+            return e.options[e.selectedIndex].value;
+        }
+
         function get_compare_function() {
             var compare_functions = {
                 magnitude: function (e1, e2) {
@@ -126,11 +131,6 @@ define(["jquery", "footable", "humanize"],
                 }
             };
 
-            function getSelector(id) {
-                var e = document.getElementById(id);
-                return e.options[e.selectedIndex].value;
-            }
-
             return compare_functions[getSelector("selSymOrder")];
         }
 
@@ -346,7 +346,13 @@ define(["jquery", "footable", "humanize"],
                 sortValue: function (val) { return Number(val.options.sortValue); }
             }, {
                 name: "symbols",
-                title: "Symbols",
+                title: "Symbols<br /><br />" +
+                        '<span style="font-weight:normal;">Sort by:</span><br />' +
+                        '<div class="btn-group btn-group-xs btn-sym-order" data-toggle="buttons">' +
+                            '<button type="button" class="btn btn-default btn-sym-magnitude" value="magnitude">Magnitude</button>' +
+                            '<button type="button" class="btn btn-default btn-sym-score" value="score">Value</button>' +
+                            '<button type="button" class="btn btn-default btn-sym-name" value="name">Name</button>' +
+                        "</div>",
                 breakpoints: "all",
                 style: {
                     "font-size": "11px",
@@ -611,7 +617,15 @@ define(["jquery", "footable", "humanize"],
                     "ready.ft.table": drawTooltips,
                     "after.ft.sorting": drawTooltips,
                     "after.ft.paging": drawTooltips,
-                    "after.ft.filtering": drawTooltips
+                    "after.ft.filtering": drawTooltips,
+                    "expand.ft.row": function (e, ft, row) {
+                        setTimeout(function () {
+                            var detail_row = row.$el.next();
+                            var order = getSelector("selSymOrder");
+                            detail_row.find(".btn-sym-" + order)
+                                .addClass("active").siblings().removeClass("active");
+                        }, 5);
+                    }
                 }
             });
         }
@@ -698,18 +712,29 @@ define(["jquery", "footable", "humanize"],
         };
 
         ui.setup = function (rspamd, tables) {
-            $("#updateHistory").off("click");
-            $("#updateHistory").on("click", function (e) {
-                e.preventDefault();
-                ui.getHistory(rspamd, tables);
-            });
-            $("#selSymOrder").unbind().change(function () {
+            function change_symbols_order(order) {
+                $(".btn-sym-" + order).addClass("active").siblings().removeClass("active");
                 var compare_function = get_compare_function();
                 $.each(tables.history.rows.all, function (i, row) {
                     var cell_val = sort_symbols(symbols[i], compare_function);
                     row.cells[8].val(cell_val, false, true);
                 });
                 drawTooltips();
+            }
+
+            $("#updateHistory").off("click");
+            $("#updateHistory").on("click", function (e) {
+                e.preventDefault();
+                ui.getHistory(rspamd, tables);
+            });
+            $("#selSymOrder").unbind().change(function () {
+                var order = this.value;
+                change_symbols_order(order);
+            });
+            $(document).on("click", ".btn-sym-order button", function () {
+                var order = this.value;
+                $("#selSymOrder").val(order);
+                change_symbols_order(order);
             });
 
             // @reset history log