[WebUI] Symbols: replace individual save buttons

with a sticky group

2 files changed, 22 insertions, 13 deletions

diff --git a/interface/index.html b/interface/index.html
index 2eddd2a77..2607348bd 100644
--- 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 3db704562..6cbe984c3 100644
--- 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) {