Merge branch 'master' into master-to-development-v5.0

Signed-off-by: DL6ER <dl6er@dl6er.de>

scripts/pi-hole/js/groups-clients.js

@@ -57,6 +57,7 @@ $(document).ready(function () {
   $("#btnAdd").on("click", addClient);
 
   reload_client_suggestions();
+  utils.bsSelect_defaults();
   get_groups();
 
   $("#select").on("change", function () {
@@ -88,6 +89,8 @@ function initTable() {
     ],
     drawCallback: function () {
       $('button[id^="deleteClient_"]').on("click", deleteClient);
+      // Remove visible dropdown to prevent orphaning
+      $("body > .bootstrap-select.dropdown").remove();
     },
     rowCallback: function (row, data) {
       $(row).attr("data-id", data.id);
@@ -124,61 +127,73 @@ function initTable() {
 
       $("td:eq(2)", row).empty();
       $("td:eq(2)", row).append(
-        '<div id="selectHome_' +
-          data.id +
-          '">' +
-          '<select id="multiselect_' +
-          data.id +
-          '" multiple="multiple"></select></div>'
+        '<select class="selectpicker" id="multiselect_' + data.id + '" multiple></select>'
       );
       var selectEl = $("#multiselect_" + data.id, row);
       // Add all known groups
       for (var i = 0; i < groups.length; i++) {
-        var extra = "";
+        var data_sub = "";
         if (!groups[i].enabled) {
-          extra = " (disabled)";
+          data_sub = 'data-subtext="(disabled)"';
         }
 
         selectEl.append(
-          $("<option />")
+          $("<option " + data_sub + "/>")
             .val(groups[i].id)
-            .text(groups[i].name + extra)
+            .text(groups[i].name)
         );
       }
 
       // Select assigned groups
       selectEl.val(data.groups);
-      // Initialize multiselect
-      selectEl.multiselect({
-        includeSelectAllOption: true,
-        buttonContainer: '<div id="container_' + data.id + '" class="btn-group"/>',
-        maxHeight: 200,
-        onDropdownShown: function () {
-          var el = $("#container_" + data.id);
-          var top = el[0].getBoundingClientRect().top;
-          var bottom = $(window).height() - top - el.height();
-          if (bottom < 200) {
-            el.addClass("dropup");
+      // Initialize bootstrap-select
+      selectEl
+        // fix dropdown if it would stick out right of the viewport
+        .on("show.bs.select", function() {
+          var winWidth = $(window).width();
+          var dropdownEl = $("body > .bootstrap-select.dropdown");
+          if (dropdownEl.length > 0) {
+            dropdownEl.removeClass("align-right");
+            var width = dropdownEl.width();
+            var left = dropdownEl.offset().left;
+            if (left + width > winWidth) {
+              dropdownEl.addClass("align-right");
+            }
           }
-
-          if (bottom > 200) {
-            el.removeClass("dropup");
+        })
+        .on("changed.bs.select", function() {
+          // enable Apply button
+          if ($(ApplyBtn).prop("disabled")) {
+            $(ApplyBtn)
+              .addClass("btn-success")
+              .prop("disabled", false)
+              .on("click", function() {
+                editClient.call(selectEl);
+              });
           }
+        })
+        .on("hide.bs.select", function() {
+          // Restore values if drop-down menu is closed without clicking the Apply button
+          if (!$(ApplyBtn).prop("disabled")) {
+            $(this)
+              .val(data.groups)
+              .selectpicker("refresh");
+            $(ApplyBtn)
+              .removeClass("btn-success")
+              .prop("disabled", true)
+              .off("click");
+          }
+        })
+        .selectpicker()
+        .siblings(".dropdown-menu")
+        .find(".bs-actionsbox")
+        .prepend(
+          '<button type="button" id=btn_apply_' +
+            data.id +
+            ' class="btn btn-block btn-sm" disabled>Apply</button>'
+        );
 
-          var offset = el.offset();
-          $("body").append(el);
-          el.css("position", "absolute");
-          el.css("top", offset.top + "px");
-          el.css("left", offset.left + "px");
-        },
-        onDropdownHide: function () {
-          var el = $("#container" + data.id);
-          var home = $("#selectHome" + data.id);
-          home.append(el);
-          el.removeAttr("style");
-        }
-      });
-      selectEl.on("change", editClient);
+      var ApplyBtn = "#btn_apply_" + data.id;
 
       var button =
         '<button class="btn btn-danger btn-xs" type="button" id="deleteClient_' +
@@ -276,7 +291,7 @@ function addClient() {
       if (response.success) {
         utils.showAlert("success", "fas fa-plus", "Successfully added client", ip);
         reload_client_suggestions();
-        table.ajax.reload();
+        table.ajax.reload(null, false);
       } else {
         utils.showAlert("error", "", "Error while adding new client", response.message);
       }
@@ -335,7 +350,13 @@ function editClient() {
     success: function (response) {
       utils.enableAll();
       if (response.success) {
-        utils.showAlert("success", "fas fa-plus", "Successfully " + done + " client", ip_name);
+        utils.showAlert(
+          "success",
+          "glyphicon glyphicon-pencil",
+          "Successfully " + done + " client",
+          ip_name
+        );
+        table.ajax.reload(null, false);
       } else {
         utils.showAlert(
           "error",
@@ -378,8 +399,17 @@ function deleteClient() {
     success: function (response) {
       utils.enableAll();
       if (response.success) {
-        utils.showAlert("success", "far fa-trash-alt", "Successfully deleted client ", ip_name);
-        table.row(tr).remove().draw(false);
+        utils.showAlert(
+          "success",
+          "glyphicon glyphicon-trash",
+          "Successfully deleted client ",
+          ip_name
+        );
+        table
+          .row(tr)
+          .remove()
+          .draw(false)
+          .ajax.reload(null, false);
         reload_client_suggestions();
       } else {
         utils.showAlert("error", "", "Error while deleting client with ID " + id, response.message);