commit f8d9c24: [WebUI] Rework maps modal

[moisseev]

Author: moisseev
Date: 2020-07-10 20:12:40 +0300
URL: https://github.com/rspamd/rspamd/commit/f8d9c24ab8d506f2d70cf994cd3dc5a489eaa127 (refs/pull/3428/head)

[WebUI] Rework maps modal

---
 interface/css/rspamd.css   |  3 +--
 interface/index.html       | 14 +++++++------
 interface/js/app/config.js | 50 ++++++++++++++++++----------------------------
 3 files changed, 28 insertions(+), 39 deletions(-)

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index bbaa51586..4330962b0 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -285,8 +285,7 @@ table#symbolsTable input[type="number"] {
     background-color: #cddbff;
 }
 
-.list-textarea {
-    width: 100%;
+#map-textarea {
     height: 360px;
 }
 td.maps-cell {
diff --git a/interface/index.html b/interface/index.html
index f23567191..da5eaf351 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -453,18 +453,20 @@
 </div>
 
 <!-- Common modal -->
-<div id="modalDialog" class="modal fade" tabindex="-1" role="dialog">
+<div id="modalDialog" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog">
 	<div class="modal-dialog modal-xl">
-		<div class="modal-content">
-			<div class="modal-header py-2">
-				<h6 class="modal-title" id="modalTitle"></h6>
+		<div class="modal-content shadow">
+			<div class="modal-header text-secondary py-2">
+				<i class="fas my-auto"></i><h6 class="modal-title font-weight-bolder mx-3" id="modalTitle"></h6>
 				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 			</div>
 			<div class="modal-body" id="modalBody"></div>
 			<div class="modal-footer">
+				<div class="btn-group" id="modalSaveGroup">
+					<button class="btn btn-primary" id="modalSave">Save changes</button>
+					<button class="btn btn-warning" id="modalSaveAll">Save on cluster</button>
+				</div>
 				<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true" id="modalClose">Close</button>
-				<button class="btn btn-primary" id="modalSave">Save changes</button>
-				<button class="btn btn-primary" id="modalSaveAll">Save on cluster</button>
 			</div>
 		</div>
 	</div>
diff --git a/interface/js/app/config.js b/interface/js/app/config.js
index 431d9bb92..36cdafeea 100644
--- a/interface/js/app/config.js
+++ b/interface/js/app/config.js
@@ -162,9 +162,8 @@ define(["jquery"],
             });
         };
 
-        // @upload edited actions
         ui.setup = function (rspamd) {
-        // Modal form for maps
+            // Modal form for maps
             $(document).on("click", "[data-toggle=\"modal\"]", function () {
                 var checked_server = rspamd.getSelector("selSrv");
                 var item = $(this).data("item");
@@ -173,46 +172,35 @@ define(["jquery"],
                         Map: item.map
                     },
                     success: function (data) {
-                        var disabled = "";
+                        var readonly = "";
+                        var icon = "fa-edit";
                         var text = data[0].data;
                         if (item.editable === false || rspamd.read_only) {
-                            disabled = "disabled=\"disabled\"";
-                        }
-
-                        $("#" + item.map).remove();
-                        $("<form id=\"" + item.map + "\" style=\"display:none\"" +
-                        " data-type=\"map\" action=\"savemap\" method=\"post\">" +
-                        "<textarea class=\"list-textarea\"" + disabled + ">" + text +
-                        "</textarea>" +
-                        "</form>").appendTo("#modalBody");
-
-                        $("#modalTitle").html(item.uri);
-                        $("#" + item.map).first().show();
-                        $("#modalDialog").modal({backdrop:true, keyboard:"show", show:true});
-                        if (item.editable === false) {
-                            $("#modalSave").hide();
-                            $("#modalSaveAll").hide();
+                            readonly = " readonly";
+                            icon = "fa-eye";
+                            $("#modalSaveGroup").hide();
                         } else {
-                            $("#modalSave").show();
-                            $("#modalSaveAll").show();
+                            $("#modalSaveGroup").show();
                         }
+                        $("#modalDialog .modal-header").find("[data-fa-i2svg]").addClass(icon);
+                        $("#modalTitle").html(item.uri);
+                        $('<textarea id="map-textarea" class="form-control"' + readonly +
+                            ' data-id="' + item.map + '">' +
+                            text +
+                            "</textarea>").appendTo("#modalBody");
+                        $("#modalDialog").modal("show");
                     },
                     errorMessage: "Cannot receive maps data",
                     server: (checked_server === "All SERVERS") ? "local" : checked_server
                 });
                 return false;
             });
-            // close modal without saving
             $("#modalDialog").on("hidden.bs.modal", function () {
-                $("#modalBody form").remove();
+                $("#map-textarea").remove();
             });
-            // @save forms from modal
+
             function saveMap(server) {
-                var form = $("#modalBody").children().filter(":visible");
-                var action = $(form).attr("action");
-                var id = $(form).attr("id");
-                var data = $("#" + id).find("textarea").val();
-                rspamd.query(action, {
+                rspamd.query("savemap", {
                     success: function () {
                         rspamd.alertMessage("alert-success", "Map data successfully saved");
                         $("#modalDialog").modal("hide");
@@ -220,10 +208,10 @@ define(["jquery"],
                     errorMessage: "Save map error",
                     method: "POST",
                     headers: {
-                        Map: id,
+                        Map: $("#map-textarea").data("id"),
                     },
                     params: {
-                        data: data,
+                        data: $("#map-textarea").val(),
                         dataType: "text",
                     },
                     server: server