[WebUI] Symbols: replace individual save buttons

with a sticky group

diff --git a/interface/index.html b/interface/index.html
index 2eddd2a77b3ba2a2b4ac87cd6472156a65735c75..2607348bd255a2d11a1491d0c6bf74e437c3f166 100644 (file)
--- a/interface/index.html
+++ b/interface/index.html
@@ -358,6 +358,18 @@
                                                        </button>
                                                </div>
                                        </div>
+                                       <div class="alert alert-info sticky-top py-2 mb-0 rounded-0 d-none" id="save-alert">
+                                               <span class="icon me-3 align-middle"><i class="fas fa-save"></i></span>
+                                               <span class="align-middle">The values have been updated. The changes must be saved to take effect.</span>
+                                               <div class="float-end">
+                                                       <button title="Save changes to the selected server" type="button" class="btn btn-primary btn-sm">
+                                                               Save
+                                                       </button>
+                                                       <button data-save="All SERVERS" title="Save changes to all servers" type="button" class="btn btn-warning btn-sm">
+                                                               Save in cluster
+                                                       </button>
+                                               </div>
+                                       </div>
                                        <div class="card-body p-0">
                                                <table class="table table-hover" id="symbolsTable"></table>
                                        </div>

diff --git a/interface/js/app/symbols.js b/interface/js/app/symbols.js
index 3db70456293683d0f4e36c42925f90022ea33219..6cbe984c3cd3804b86024c28df701e3d4a58b71a 100644 (file)
--- a/interface/js/app/symbols.js
+++ b/interface/js/app/symbols.js
@@ -30,6 +30,8 @@ define(["jquery", "app/rspamd", "footable"],
         const ui = {};
 
         function saveSymbols(action, id, server) {
+            $("#save-alert button").attr("disabled", true);
+
             const inputs = $("#" + id + ' :input[data-role="numerictextbox"]');
             const url = action;
             const values = [];
@@ -42,8 +44,10 @@ define(["jquery", "app/rspamd", "footable"],
 
             rspamd.query(url, {
                 success: function () {
+                    $("#save-alert").addClass("d-none");
                     rspamd.alertMessage("alert-modal alert-success", "Symbols successfully saved");
                 },
+                complete: () => $("#save-alert button").removeAttr("disabled", true),
                 errorMessage: "Save symbols error",
                 method: "POST",
                 params: {
@@ -59,7 +63,6 @@ define(["jquery", "app/rspamd", "footable"],
             const lookup = {};
             const freqs = [];
             const distinct_groups = [];
-            const selected_server = rspamd.getSelector("selSrv");
 
             data.forEach((group) => {
                 group.rules.forEach((item) => {
@@ -91,11 +94,6 @@ define(["jquery", "app/rspamd", "footable"],
                         lookup[item.group] = 1;
                         distinct_groups.push(item.group);
                     }
-                    item.save =
-                        '<button data-save="' + selected_server + '" title="Save changes to the selected server" ' +
-                        'type="button" class="btn btn-primary btn-sm mb-disabled">Save</button>&nbsp;' +
-                        '<button data-save="All SERVERS" title="Save changes to all servers" ' +
-                        'type="button" class="btn btn-primary btn-sm mb-disabled">Save in cluster</button>';
                     items.push(item);
                 });
             });
@@ -126,6 +124,7 @@ define(["jquery", "app/rspamd", "footable"],
         }
         // @get symbols into modal form
         ui.getSymbols = function (checked_server) {
+            $("#save-alert").addClass("d-none");
             rspamd.query("symbols", {
                 success: function (json) {
                     const [{data}] = json;
@@ -196,7 +195,6 @@ define(["jquery", "app/rspamd", "footable"],
                                 style: {"font-size": "11px"},
                                 sortValue: function (value) { return Number(value).toFixed(2); }},
                             {name: "time", title: "Avg. time", breakpoints: "xs sm", style: {"font-size": "11px"}},
-                            {name: "save", title: "Save", style: {"font-size": "11px"}},
                         ],
                         rows: items[0],
                         paging: {
@@ -227,12 +225,6 @@ define(["jquery", "app/rspamd", "footable"],
                 server: (checked_server === "All SERVERS") ? "local" : checked_server
             });
             $("#symbolsTable")
-                .off("click", ":button")
-                .on("click", ":button", function () {
-                    const value = $(this).data("save");
-                    if (!value) return;
-                    saveSymbols("./savesymbols", "symbolsTable", value);
-                })
                 .on("input", ".scorebar", ({target}) => {
                     const t = $(target);
                     t.removeClass("scorebar-ham scorebar-spam");
@@ -241,12 +233,17 @@ define(["jquery", "app/rspamd", "footable"],
                     } else if (target.value > 0) {
                         t.addClass("scorebar-spam");
                     }
+                    $("#save-alert").removeClass("d-none");
                 });
+            $("#save-alert button")
+                .off("click")
+                .on("click", ({target}) => saveSymbols("./savesymbols", "symbolsTable", $(target).data("save")));
         };
 
 
         $("#updateSymbols").on("click", (e) => {
             e.preventDefault();
+            $("#save-alert").addClass("d-none");
             const checked_server = rspamd.getSelector("selSrv");
             rspamd.query("symbols", {
                 success: function (data) {