From 7c0812b52b97f65872beb1fe601f9138ebc30dbd Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Fri, 17 Nov 2023 10:36:38 +0100
Subject: [PATCH] Apply necessary code styling changes

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/groups-clients.js | 411 ++++++++++----------
 scripts/pi-hole/js/groups-domains.js | 549 +++++++++++++-------------
 scripts/pi-hole/js/groups-lists.js   | 561 ++++++++++++++-------------
 3 files changed, 762 insertions(+), 759 deletions(-)

diff --git a/scripts/pi-hole/js/groups-clients.js b/scripts/pi-hole/js/groups-clients.js
index 8455e75b..8ec90033 100644
--- a/scripts/pi-hole/js/groups-clients.js
+++ b/scripts/pi-hole/js/groups-clients.js
@@ -6,6 +6,7 @@
  *  Please see LICENSE file for your rights under this license. */
 
 /* global utils:false, groups:false,, apiFailure:false, updateFtlInfo:false, getGroups:false, processGroupResult:false */
+/* exported initTable */
 
 var table;
 
@@ -90,228 +91,228 @@ $(function () {
   });
 });
 
+// eslint-disable-next-line no-unused-vars
 function initTable() {
-  table = $("#clientsTable")
-    .DataTable({
-      processing: true,
-      ajax: {
-        url: "/api/clients",
-        dataSrc: "clients",
-        type: "GET",
+  table = $("#clientsTable").DataTable({
+    processing: true,
+    ajax: {
+      url: "/api/clients",
+      dataSrc: "clients",
+      type: "GET",
+    },
+    order: [[0, "asc"]],
+    columns: [
+      { data: "id", visible: false },
+      { data: null, visible: true, orderable: false, width: "15px" },
+      { data: "client", type: "ip-address" },
+      { data: "comment" },
+      { data: "groups", searchable: false },
+      { data: null, width: "22px", orderable: false },
+    ],
+    columnDefs: [
+      {
+        targets: 1,
+        className: "select-checkbox",
+        render: function () {
+          return "";
+        },
       },
-      order: [[0, "asc"]],
-      columns: [
-        { data: "id", visible: false },
-        { data: null, visible: true, orderable: false, width: "15px" },
-        { data: "client", type: "ip-address" },
-        { data: "comment" },
-        { data: "groups", searchable: false },
-        { data: null, width: "22px", orderable: false },
-      ],
-      columnDefs: [
-        {
-          targets: 1,
-          className: "select-checkbox",
-          render: function () {
-            return "";
-          },
-        },
-        {
-          targets: "_all",
-          render: $.fn.dataTable.render.text(),
-        },
-      ],
-      drawCallback: function () {
-        // Hide buttons if all clients were deleted
-        var hasRows = this.api().rows({ filter: "applied" }).data().length > 0;
-        $(".datatable-bt").css("visibility", hasRows ? "visible" : "hidden");
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
+    ],
+    drawCallback: function () {
+      // Hide buttons if all clients were deleted
+      var hasRows = this.api().rows({ filter: "applied" }).data().length > 0;
+      $(".datatable-bt").css("visibility", hasRows ? "visible" : "hidden");
 
-        $('button[id^="deleteClient_"]').on("click", deleteClient);
-        // Remove visible dropdown to prevent orphaning
-        $("body > .bootstrap-select.dropdown").remove();
-      },
-      rowCallback: function (row, data) {
-        var dataId = utils.hexEncode(data.client);
-        $(row).attr("data-id", dataId);
-        var tooltip =
-          "Added: " +
-          utils.datetime(data.date_added, false) +
-          "\nLast modified: " +
-          utils.datetime(data.date_modified, false) +
-          "\nDatabase ID: " +
-          data.id;
-        var ipName =
-          '<code id="ip_' +
+      $('button[id^="deleteClient_"]').on("click", deleteClient);
+      // Remove visible dropdown to prevent orphaning
+      $("body > .bootstrap-select.dropdown").remove();
+    },
+    rowCallback: function (row, data) {
+      var dataId = utils.hexEncode(data.client);
+      $(row).attr("data-id", dataId);
+      var tooltip =
+        "Added: " +
+        utils.datetime(data.date_added, false) +
+        "\nLast modified: " +
+        utils.datetime(data.date_modified, false) +
+        "\nDatabase ID: " +
+        data.id;
+      var ipName =
+        '<code id="ip_' +
+        dataId +
+        '" title="' +
+        tooltip +
+        '" class="breakall">' +
+        data.client +
+        "</code>";
+      if (data.name !== null && data.name.length > 0)
+        ipName +=
+          '<br><code id="name_' +
           dataId +
           '" title="' +
           tooltip +
           '" class="breakall">' +
-          data.client +
+          data.name +
           "</code>";
-        if (data.name !== null && data.name.length > 0)
-          ipName +=
-            '<br><code id="name_' +
-            dataId +
-            '" title="' +
-            tooltip +
-            '" class="breakall">' +
-            data.name +
-            "</code>";
-        $("td:eq(1)", row).html(ipName);
+      $("td:eq(1)", row).html(ipName);
 
-        $("td:eq(2)", row).html('<input id="comment_' + dataId + '" class="form-control">');
-        var commentEl = $("#comment_" + dataId, row);
-        commentEl.val(utils.unescapeHtml(data.comment));
-        commentEl.on("change", editClient);
+      $("td:eq(2)", row).html('<input id="comment_' + dataId + '" class="form-control">');
+      var commentEl = $("#comment_" + dataId, row);
+      commentEl.val(utils.unescapeHtml(data.comment));
+      commentEl.on("change", editClient);
 
-        $("td:eq(3)", row).empty();
-        $("td:eq(3)", row).append(
-          '<select class="selectpicker" id="multiselect_' + dataId + '" multiple></select>'
+      $("td:eq(3)", row).empty();
+      $("td:eq(3)", row).append(
+        '<select class="selectpicker" id="multiselect_' + dataId + '" multiple></select>'
+      );
+      var selectEl = $("#multiselect_" + dataId, row);
+      // Add all known groups
+      for (var i = 0; i < groups.length; i++) {
+        var dataSub = "";
+        if (!groups[i].enabled) {
+          dataSub = 'data-subtext="(disabled)"';
+        }
+
+        selectEl.append(
+          $("<option " + dataSub + "/>")
+            .val(groups[i].id)
+            .text(groups[i].name)
         );
-        var selectEl = $("#multiselect_" + dataId, row);
-        // Add all known groups
-        for (var i = 0; i < groups.length; i++) {
-          var dataSub = "";
-          if (!groups[i].enabled) {
-            dataSub = 'data-subtext="(disabled)"';
+      }
+
+      // Select assigned groups
+      selectEl.val(data.groups);
+      // 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");
+            }
           }
+        })
+        .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_' +
+            dataId +
+            ' class="btn btn-block btn-sm" disabled>Apply</button>'
+        );
 
-          selectEl.append(
-            $("<option " + dataSub + "/>")
-              .val(groups[i].id)
-              .text(groups[i].name)
-          );
-        }
+      var applyBtn = "#btn_apply_" + dataId;
 
-        // Select assigned groups
-        selectEl.val(data.groups);
-        // 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");
-              }
-            }
-          })
-          .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_' +
-              dataId +
-              ' class="btn btn-block btn-sm" disabled>Apply</button>'
-          );
-
-        var applyBtn = "#btn_apply_" + dataId;
-
-        var button =
-          '<button type="button" class="btn btn-danger btn-xs" id="deleteClient_' +
-          dataId +
-          '" data-id="' +
-          dataId +
-          '">' +
-          '<span class="far fa-trash-alt"></span>' +
-          "</button>";
-        $("td:eq(4)", row).html(button);
-      },
-      select: {
-        style: "multi",
-        selector: "td:not(:last-child)",
-        info: false,
-      },
-      buttons: [
-        {
-          text: '<span class="far fa-square"></span>',
-          titleAttr: "Select All",
-          className: "btn-sm datatable-bt selectAll",
-          action: function () {
-            table.rows({ page: "current" }).select();
-          },
+      var button =
+        '<button type="button" class="btn btn-danger btn-xs" id="deleteClient_' +
+        dataId +
+        '" data-id="' +
+        dataId +
+        '">' +
+        '<span class="far fa-trash-alt"></span>' +
+        "</button>";
+      $("td:eq(4)", row).html(button);
+    },
+    select: {
+      style: "multi",
+      selector: "td:not(:last-child)",
+      info: false,
+    },
+    buttons: [
+      {
+        text: '<span class="far fa-square"></span>',
+        titleAttr: "Select All",
+        className: "btn-sm datatable-bt selectAll",
+        action: function () {
+          table.rows({ page: "current" }).select();
         },
-        {
-          text: '<span class="far fa-plus-square"></span>',
-          titleAttr: "Select All",
-          className: "btn-sm datatable-bt selectMore",
-          action: function () {
-            table.rows({ page: "current" }).select();
-          },
-        },
-        {
-          extend: "selectNone",
-          text: '<span class="far fa-check-square"></span>',
-          titleAttr: "Deselect All",
-          className: "btn-sm datatable-bt removeAll",
-        },
-        {
-          text: '<span class="far fa-trash-alt"></span>',
-          titleAttr: "Delete Selected",
-          className: "btn-sm datatable-bt deleteSelected",
-          action: function () {
-            // For each ".selected" row ...
-            var ids = [];
-            $("tr.selected").each(function () {
-              // ... add the row identified by "data-id".
-              ids.push($(this).attr("data-id"));
-            });
-            // Delete all selected rows at once
-            delItems(ids);
-          },
-        },
-      ],
-      dom:
-        "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
-        "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
-        "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
-        "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
-        "<'row'<'col-sm-12'i>>",
-      lengthMenu: [
-        [10, 25, 50, 100, -1],
-        [10, 25, 50, 100, "All"],
-      ],
-      stateSave: true,
-      stateDuration: 0,
-      stateSaveCallback: function (settings, data) {
-        utils.stateSaveCallback("groups-clients-table", data);
       },
-      stateLoadCallback: function () {
-        var data = utils.stateLoadCallback("groups-clients-table");
-
-        // Return if not available
-        if (data === null) {
-          return null;
-        }
-
-        // Reset visibility of ID column
-        data.columns[0].visible = false;
-        // Apply loaded state to table
-        return data;
+      {
+        text: '<span class="far fa-plus-square"></span>',
+        titleAttr: "Select All",
+        className: "btn-sm datatable-bt selectMore",
+        action: function () {
+          table.rows({ page: "current" }).select();
+        },
       },
-    });
+      {
+        extend: "selectNone",
+        text: '<span class="far fa-check-square"></span>',
+        titleAttr: "Deselect All",
+        className: "btn-sm datatable-bt removeAll",
+      },
+      {
+        text: '<span class="far fa-trash-alt"></span>',
+        titleAttr: "Delete Selected",
+        className: "btn-sm datatable-bt deleteSelected",
+        action: function () {
+          // For each ".selected" row ...
+          var ids = [];
+          $("tr.selected").each(function () {
+            // ... add the row identified by "data-id".
+            ids.push($(this).attr("data-id"));
+          });
+          // Delete all selected rows at once
+          delItems(ids);
+        },
+      },
+    ],
+    dom:
+      "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
+      "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
+      "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+      "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
+      "<'row'<'col-sm-12'i>>",
+    lengthMenu: [
+      [10, 25, 50, 100, -1],
+      [10, 25, 50, 100, "All"],
+    ],
+    stateSave: true,
+    stateDuration: 0,
+    stateSaveCallback: function (settings, data) {
+      utils.stateSaveCallback("groups-clients-table", data);
+    },
+    stateLoadCallback: function () {
+      var data = utils.stateLoadCallback("groups-clients-table");
+
+      // Return if not available
+      if (data === null) {
+        return null;
+      }
+
+      // Reset visibility of ID column
+      data.columns[0].visible = false;
+      // Apply loaded state to table
+      return data;
+    },
+  });
 
   // Disable autocorrect in the search box
   var input = document.querySelector("input[type=search]");
diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js
index d7b4abf7..4f912df1 100644
--- a/scripts/pi-hole/js/groups-domains.js
+++ b/scripts/pi-hole/js/groups-domains.js
@@ -6,6 +6,7 @@
  *  Please see LICENSE file for your rights under this license. */
 
 /* global utils:false, groups:false,, getGroups:false, updateFtlInfo:false, apiFailure:false, processGroupResult:false */
+/* exported initTable */
 
 var table;
 var GETDict = {};
@@ -91,291 +92,291 @@ function hideSuggestDomains() {
   $("#suggest_domains").slideUp("fast");
 }
 
+// eslint-disable-next-line no-unused-vars
 function initTable() {
-  table = $("#domainsTable")
-    .DataTable({
-      processing: true,
-      ajax: {
-        url: "/api/domains",
-        dataSrc: "domains",
-        type: "GET",
-      },
-      order: [[0, "asc"]],
-      columns: [
-        { data: "id", visible: false },
-        { data: null, visible: true, orderable: false, width: "15px" },
-        { data: "domain" },
-        { data: "type", searchable: false },
-        { data: "enabled", searchable: false },
-        { data: "comment" },
-        { data: "groups", searchable: false },
-        { data: null, width: "22px", orderable: false },
-      ],
-      columnDefs: [
-        {
-          targets: 1,
-          className: "select-checkbox",
-          render: function () {
-            return "";
-          },
+  table = $("#domainsTable").DataTable({
+    processing: true,
+    ajax: {
+      url: "/api/domains",
+      dataSrc: "domains",
+      type: "GET",
+    },
+    order: [[0, "asc"]],
+    columns: [
+      { data: "id", visible: false },
+      { data: null, visible: true, orderable: false, width: "15px" },
+      { data: "domain" },
+      { data: "type", searchable: false },
+      { data: "enabled", searchable: false },
+      { data: "comment" },
+      { data: "groups", searchable: false },
+      { data: null, width: "22px", orderable: false },
+    ],
+    columnDefs: [
+      {
+        targets: 1,
+        className: "select-checkbox",
+        render: function () {
+          return "";
         },
-        {
-          targets: "_all",
-          render: $.fn.dataTable.render.text(),
-        },
-      ],
-      drawCallback: function () {
-        // Hide buttons if all domains were deleted
-        var hasRows = this.api().rows({ filter: "applied" }).data().length > 0;
-        $(".datatable-bt").css("visibility", hasRows ? "visible" : "hidden");
-
-        $('button[id^="deleteDomain_"]').on("click", deleteDomain);
-        // Remove visible dropdown to prevent orphaning
-        $("body > .bootstrap-select.dropdown").remove();
       },
-      rowCallback: function (row, data) {
-        var dataId = utils.hexEncode(data.domain) + "_" + data.type + "_" + data.kind;
-        $(row).attr("data-id", dataId);
-        // Tooltip for domain
-        var tooltip =
-          "Added: " +
-          utils.datetime(data.date_added, false) +
-          "\nLast modified: " +
-          utils.datetime(data.date_modified, false) +
-          "\nDatabase ID: " +
-          data.id;
-        $("td:eq(1)", row).html(
-          '<code id="domain_' +
-            dataId +
-            '" title="' +
-            tooltip +
-            '" class="breakall">' +
-            data.domain +
-            "</code>"
-        );
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
+    ],
+    drawCallback: function () {
+      // Hide buttons if all domains were deleted
+      var hasRows = this.api().rows({ filter: "applied" }).data().length > 0;
+      $(".datatable-bt").css("visibility", hasRows ? "visible" : "hidden");
 
-        // Drop-down type selector
-        $("td:eq(2)", row).html(
-          '<select id="type_' +
-            dataId +
-            '" class="form-control">' +
-            '<option value="allow/exact"' +
-            (data.type === "allow" && data.kind === "exact" ? " selected" : "") +
-            ">Exact allow</option>" +
-            '<option value="allow/regex"' +
-            (data.type === "allow" && data.kind === "regex" ? " selected" : "") +
-            ">Regex allow</option>" +
-            '<option value="deny/exact"' +
-            (data.type === "deny" && data.kind === "exact" ? " selected " : "") +
-            ">Exact deny</option>" +
-            '<option value="deny/regex"' +
-            (data.type === "deny" && data.kind === "regex" ? " selected" : "") +
-            ">Regex deny</option>" +
-            "</select>" +
-            "<input type='hidden' id='old_type_" +
-            dataId +
-            "' value='" +
-            data.type +
-            "/" +
-            data.kind +
-            "'>"
-        );
-        var typeEl = $("#type_" + dataId, row);
-        typeEl.on("change", editDomain);
-
-        // Initialize bootstrap-toggle for status field (enabled/disabled)
-        $("td:eq(3)", row).html(
-          '<input type="checkbox" id="enabled_' +
-            dataId +
-            '"' +
-            (data.enabled ? " checked" : "") +
-            ">"
-        );
-        var statusEl = $("#enabled_" + dataId, row);
-        statusEl.bootstrapToggle({
-          on: "Enabled",
-          off: "Disabled",
-          size: "small",
-          onstyle: "success",
-          width: "80px",
-        });
-        statusEl.on("change", editDomain);
-
-        // Comment field
-        $("td:eq(4)", row).html('<input id="comment_' + dataId + '" class="form-control">');
-        var commentEl = $("#comment_" + dataId, row);
-        commentEl.val(utils.unescapeHtml(data.comment));
-        commentEl.on("change", editDomain);
-
-        // Group assignment field (multi-select)
-        $("td:eq(5)", row).empty();
-        $("td:eq(5)", row).append(
-          '<select class="selectpicker" id="multiselect_' + dataId + '" multiple></select>'
-        );
-        var selectEl = $("#multiselect_" + dataId, row);
-        // Add all known groups
-        for (var i = 0; i < groups.length; i++) {
-          var dataSub = "";
-          if (!groups[i].enabled) {
-            dataSub = 'data-subtext="(disabled)"';
-          }
-
-          selectEl.append(
-            $("<option " + dataSub + "/>")
-              .val(groups[i].id)
-              .text(groups[i].name)
-          );
-        }
-
-        // Select assigned groups
-        selectEl.val(data.groups);
-        // Initialize bootstrap-select
-        const applyBtn = "#btn_apply_" + dataId;
-        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");
-              }
-            }
-          })
-          .on("changed.bs.select", function () {
-            // enable Apply button if changes were made to the drop-down menu
-            // and have it call editDomain() on click
-            if ($(applyBtn).prop("disabled")) {
-              $(applyBtn)
-                .addClass("btn-success")
-                .prop("disabled", false)
-                .on("click", function () {
-                  editDomain.call(selectEl);
-                });
-            }
-          })
-          .on("hide.bs.select", function () {
-            // Restore values if drop-down menu is closed without clicking the
-            // Apply button (e.g. by clicking outside) and re-disable 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_' +
-              dataId +
-              ' class="btn btn-block btn-sm" disabled>Apply</button>'
-          );
-
-        // Highlight row (if url parameter "domainid=" is used)
-        if ("domainid" in GETDict && data.id === parseInt(GETDict.domainid, 10)) {
-          $(row).find("td").addClass("highlight");
-        }
-
-        // Add delete domain button
-        var button =
-          '<button type="button" class="btn btn-danger btn-xs" id="deleteDomain_' +
+      $('button[id^="deleteDomain_"]').on("click", deleteDomain);
+      // Remove visible dropdown to prevent orphaning
+      $("body > .bootstrap-select.dropdown").remove();
+    },
+    rowCallback: function (row, data) {
+      var dataId = utils.hexEncode(data.domain) + "_" + data.type + "_" + data.kind;
+      $(row).attr("data-id", dataId);
+      // Tooltip for domain
+      var tooltip =
+        "Added: " +
+        utils.datetime(data.date_added, false) +
+        "\nLast modified: " +
+        utils.datetime(data.date_modified, false) +
+        "\nDatabase ID: " +
+        data.id;
+      $("td:eq(1)", row).html(
+        '<code id="domain_' +
           dataId +
-          '" data-id="' +
+          '" title="' +
+          tooltip +
+          '" class="breakall">' +
+          data.domain +
+          "</code>"
+      );
+
+      // Drop-down type selector
+      $("td:eq(2)", row).html(
+        '<select id="type_' +
           dataId +
-          '">' +
-          '<span class="far fa-trash-alt"></span>' +
-          "</button>";
-        $("td:eq(6)", row).html(button);
-      },
-      select: {
-        style: "multi",
-        selector: "td:first-child",
-        info: false,
-      },
-      buttons: [
-        {
-          text: '<span class="far fa-square"></span>',
-          titleAttr: "Select All",
-          className: "btn-sm datatable-bt selectAll",
-          action: function () {
-            table.rows({ page: "current" }).select();
-          },
-        },
-        {
-          text: '<span class="far fa-plus-square"></span>',
-          titleAttr: "Select All",
-          className: "btn-sm datatable-bt selectMore",
-          action: function () {
-            table.rows({ page: "current" }).select();
-          },
-        },
-        {
-          extend: "selectNone",
-          text: '<span class="far fa-check-square"></span>',
-          titleAttr: "Deselect All",
-          className: "btn-sm datatable-bt removeAll",
-        },
-        {
-          text: '<span class="far fa-trash-alt"></span>',
-          titleAttr: "Delete Selected",
-          className: "btn-sm datatable-bt deleteSelected",
-          action: function () {
-            // For each ".selected" row ...
-            var ids = [];
-            $("tr.selected").each(function () {
-              // ... add the row identified by "data-id".
-              ids.push($(this).attr("data-id"));
-            });
-            // Delete all selected rows at once
-            delItems(ids);
-          },
-        },
-      ],
-      dom:
-        "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
-        "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
-        "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
-        "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
-        "<'row'<'col-sm-12'i>>",
-      lengthMenu: [
-        [10, 25, 50, 100, -1],
-        [10, 25, 50, 100, "All"],
-      ],
-      stateSave: true,
-      stateDuration: 0,
-      stateSaveCallback: function (settings, data) {
-        utils.stateSaveCallback("groups-domains-table", data);
-      },
-      stateLoadCallback: function () {
-        var data = utils.stateLoadCallback("groups-domains-table");
+          '" class="form-control">' +
+          '<option value="allow/exact"' +
+          (data.type === "allow" && data.kind === "exact" ? " selected" : "") +
+          ">Exact allow</option>" +
+          '<option value="allow/regex"' +
+          (data.type === "allow" && data.kind === "regex" ? " selected" : "") +
+          ">Regex allow</option>" +
+          '<option value="deny/exact"' +
+          (data.type === "deny" && data.kind === "exact" ? " selected " : "") +
+          ">Exact deny</option>" +
+          '<option value="deny/regex"' +
+          (data.type === "deny" && data.kind === "regex" ? " selected" : "") +
+          ">Regex deny</option>" +
+          "</select>" +
+          "<input type='hidden' id='old_type_" +
+          dataId +
+          "' value='" +
+          data.type +
+          "/" +
+          data.kind +
+          "'>"
+      );
+      var typeEl = $("#type_" + dataId, row);
+      typeEl.on("change", editDomain);
 
-        // Return if not available
-        if (data === null) {
-          return null;
+      // Initialize bootstrap-toggle for status field (enabled/disabled)
+      $("td:eq(3)", row).html(
+        '<input type="checkbox" id="enabled_' +
+          dataId +
+          '"' +
+          (data.enabled ? " checked" : "") +
+          ">"
+      );
+      var statusEl = $("#enabled_" + dataId, row);
+      statusEl.bootstrapToggle({
+        on: "Enabled",
+        off: "Disabled",
+        size: "small",
+        onstyle: "success",
+        width: "80px",
+      });
+      statusEl.on("change", editDomain);
+
+      // Comment field
+      $("td:eq(4)", row).html('<input id="comment_' + dataId + '" class="form-control">');
+      var commentEl = $("#comment_" + dataId, row);
+      commentEl.val(utils.unescapeHtml(data.comment));
+      commentEl.on("change", editDomain);
+
+      // Group assignment field (multi-select)
+      $("td:eq(5)", row).empty();
+      $("td:eq(5)", row).append(
+        '<select class="selectpicker" id="multiselect_' + dataId + '" multiple></select>'
+      );
+      var selectEl = $("#multiselect_" + dataId, row);
+      // Add all known groups
+      for (var i = 0; i < groups.length; i++) {
+        var dataSub = "";
+        if (!groups[i].enabled) {
+          dataSub = 'data-subtext="(disabled)"';
         }
 
-        // Reset visibility of ID column
-        data.columns[0].visible = false;
-        // Apply loaded state to table
-        return data;
-      },
-      initComplete: function () {
-        if ("domainid" in GETDict) {
-          var pos = table
-            .column(0, { order: "current" })
-            .data()
-            .indexOf(parseInt(GETDict.domainid, 10));
-          if (pos >= 0) {
-            var page = Math.floor(pos / table.page.info().length);
-            table.page(page).draw(false);
+        selectEl.append(
+          $("<option " + dataSub + "/>")
+            .val(groups[i].id)
+            .text(groups[i].name)
+        );
+      }
+
+      // Select assigned groups
+      selectEl.val(data.groups);
+      // Initialize bootstrap-select
+      const applyBtn = "#btn_apply_" + dataId;
+      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");
+            }
           }
-        }
+        })
+        .on("changed.bs.select", function () {
+          // enable Apply button if changes were made to the drop-down menu
+          // and have it call editDomain() on click
+          if ($(applyBtn).prop("disabled")) {
+            $(applyBtn)
+              .addClass("btn-success")
+              .prop("disabled", false)
+              .on("click", function () {
+                editDomain.call(selectEl);
+              });
+          }
+        })
+        .on("hide.bs.select", function () {
+          // Restore values if drop-down menu is closed without clicking the
+          // Apply button (e.g. by clicking outside) and re-disable 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_' +
+            dataId +
+            ' class="btn btn-block btn-sm" disabled>Apply</button>'
+        );
+
+      // Highlight row (if url parameter "domainid=" is used)
+      if ("domainid" in GETDict && data.id === parseInt(GETDict.domainid, 10)) {
+        $(row).find("td").addClass("highlight");
+      }
+
+      // Add delete domain button
+      var button =
+        '<button type="button" class="btn btn-danger btn-xs" id="deleteDomain_' +
+        dataId +
+        '" data-id="' +
+        dataId +
+        '">' +
+        '<span class="far fa-trash-alt"></span>' +
+        "</button>";
+      $("td:eq(6)", row).html(button);
+    },
+    select: {
+      style: "multi",
+      selector: "td:first-child",
+      info: false,
+    },
+    buttons: [
+      {
+        text: '<span class="far fa-square"></span>',
+        titleAttr: "Select All",
+        className: "btn-sm datatable-bt selectAll",
+        action: function () {
+          table.rows({ page: "current" }).select();
+        },
       },
-    });
+      {
+        text: '<span class="far fa-plus-square"></span>',
+        titleAttr: "Select All",
+        className: "btn-sm datatable-bt selectMore",
+        action: function () {
+          table.rows({ page: "current" }).select();
+        },
+      },
+      {
+        extend: "selectNone",
+        text: '<span class="far fa-check-square"></span>',
+        titleAttr: "Deselect All",
+        className: "btn-sm datatable-bt removeAll",
+      },
+      {
+        text: '<span class="far fa-trash-alt"></span>',
+        titleAttr: "Delete Selected",
+        className: "btn-sm datatable-bt deleteSelected",
+        action: function () {
+          // For each ".selected" row ...
+          var ids = [];
+          $("tr.selected").each(function () {
+            // ... add the row identified by "data-id".
+            ids.push($(this).attr("data-id"));
+          });
+          // Delete all selected rows at once
+          delItems(ids);
+        },
+      },
+    ],
+    dom:
+      "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
+      "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
+      "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+      "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
+      "<'row'<'col-sm-12'i>>",
+    lengthMenu: [
+      [10, 25, 50, 100, -1],
+      [10, 25, 50, 100, "All"],
+    ],
+    stateSave: true,
+    stateDuration: 0,
+    stateSaveCallback: function (settings, data) {
+      utils.stateSaveCallback("groups-domains-table", data);
+    },
+    stateLoadCallback: function () {
+      var data = utils.stateLoadCallback("groups-domains-table");
+
+      // Return if not available
+      if (data === null) {
+        return null;
+      }
+
+      // Reset visibility of ID column
+      data.columns[0].visible = false;
+      // Apply loaded state to table
+      return data;
+    },
+    initComplete: function () {
+      if ("domainid" in GETDict) {
+        var pos = table
+          .column(0, { order: "current" })
+          .data()
+          .indexOf(parseInt(GETDict.domainid, 10));
+        if (pos >= 0) {
+          var page = Math.floor(pos / table.page.info().length);
+          table.page(page).draw(false);
+        }
+      }
+    },
+  });
   // Disable autocorrect in the search box
   var input = document.querySelector("input[type=search]");
   if (input !== null) {
diff --git a/scripts/pi-hole/js/groups-lists.js b/scripts/pi-hole/js/groups-lists.js
index 33bea8ca..dc8c11de 100644
--- a/scripts/pi-hole/js/groups-lists.js
+++ b/scripts/pi-hole/js/groups-lists.js
@@ -6,6 +6,7 @@
  *  Please see LICENSE file for your rights under this license. */
 
 /* global utils:false, groups:false, apiFailure:false, updateFtlInfo:false, getGroups:false, processGroupResult:false */
+/* exported initTable */
 
 var table;
 var GETDict = {};
@@ -98,302 +99,302 @@ function format(data) {
   );
 }
 
+// eslint-disable-next-line no-unused-vars
 function initTable() {
-  table = $("#listsTable")
-    .DataTable({
-      processing: true,
-      ajax: {
-        url: "/api/lists",
-        dataSrc: "lists",
-        type: "GET",
-      },
-      order: [[0, "asc"]],
-      columns: [
-        { data: "id", visible: false },
-        { data: null, visible: true, orderable: false, width: "15px" },
-        { data: "status", searchable: false, class: "details-control" },
-        { data: "address" },
-        { data: "enabled", searchable: false },
-        { data: "comment" },
-        { data: "groups", searchable: false },
-        { data: null, width: "22px", orderable: false },
-      ],
-      columnDefs: [
-        {
-          targets: 1,
-          className: "select-checkbox",
-          render: function () {
-            return "";
-          },
+  table = $("#listsTable").DataTable({
+    processing: true,
+    ajax: {
+      url: "/api/lists",
+      dataSrc: "lists",
+      type: "GET",
+    },
+    order: [[0, "asc"]],
+    columns: [
+      { data: "id", visible: false },
+      { data: null, visible: true, orderable: false, width: "15px" },
+      { data: "status", searchable: false, class: "details-control" },
+      { data: "address" },
+      { data: "enabled", searchable: false },
+      { data: "comment" },
+      { data: "groups", searchable: false },
+      { data: null, width: "22px", orderable: false },
+    ],
+    columnDefs: [
+      {
+        targets: 1,
+        className: "select-checkbox",
+        render: function () {
+          return "";
         },
-        {
-          targets: "_all",
-          render: $.fn.dataTable.render.text(),
-        },
-      ],
-      drawCallback: function () {
-        // Hide buttons if all lists were deleted
-        var hasRows = this.api().rows({ filter: "applied" }).data().length > 0;
-        $(".datatable-bt").css("visibility", hasRows ? "visible" : "hidden");
-
-        $('button[id^="deleteList_"]').on("click", deleteList);
-        // Remove visible dropdown to prevent orphaning
-        $("body > .bootstrap-select.dropdown").remove();
       },
-      rowCallback: function (row, data) {
-        var dataId = utils.hexEncode(data.address);
-        $(row).attr("data-id", dataId);
-        $(row).attr("data-type", data.type);
+      {
+        targets: "_all",
+        render: $.fn.dataTable.render.text(),
+      },
+    ],
+    drawCallback: function () {
+      // Hide buttons if all lists were deleted
+      var hasRows = this.api().rows({ filter: "applied" }).data().length > 0;
+      $(".datatable-bt").css("visibility", hasRows ? "visible" : "hidden");
 
-        var statusCode = 0,
-          statusIcon;
-        // If there is no status or the list is disabled, we keep
-        // status 0 (== unknown)
-        if (data.status !== null && data.enabled) {
-          statusCode = parseInt(data.status, 10);
-        }
+      $('button[id^="deleteList_"]').on("click", deleteList);
+      // Remove visible dropdown to prevent orphaning
+      $("body > .bootstrap-select.dropdown").remove();
+    },
+    rowCallback: function (row, data) {
+      var dataId = utils.hexEncode(data.address);
+      $(row).attr("data-id", dataId);
+      $(row).attr("data-type", data.type);
 
-        switch (statusCode) {
-          case 1:
-            statusIcon = "fa-check";
-            break;
-          case 2:
-            statusIcon = "fa-history";
-            break;
-          case 3:
-            statusIcon = "fa-exclamation-circle";
-            break;
-          case 4:
-            statusIcon = "fa-times";
-            break;
-          default:
-            statusIcon = "fa-question-circle";
-            break;
-        }
+      var statusCode = 0,
+        statusIcon;
+      // If there is no status or the list is disabled, we keep
+      // status 0 (== unknown)
+      if (data.status !== null && data.enabled) {
+        statusCode = parseInt(data.status, 10);
+      }
 
-        // Add red minus sign icon if data["type"] is "block"
-        // Add green plus sign icon if data["type"] is "allow"
-        let status =
-          "<i class='fa fa-fw fa-question-circle text-orange' title='This list is of unknown type'></i>";
-        if (data.type === "block") {
-          status = "<i class='fa fa-fw fa-minus text-red' title='This is a blocklist'></i>";
-        } else if (data.type === "allow") {
-          status = "<i class='fa fa-fw fa-plus text-green' title='This is an allowlist'></i>";
-        }
+      switch (statusCode) {
+        case 1:
+          statusIcon = "fa-check";
+          break;
+        case 2:
+          statusIcon = "fa-history";
+          break;
+        case 3:
+          statusIcon = "fa-exclamation-circle";
+          break;
+        case 4:
+          statusIcon = "fa-times";
+          break;
+        default:
+          statusIcon = "fa-question-circle";
+          break;
+      }
 
-        $("td:eq(1)", row).addClass("list-status-" + statusCode);
-        $("td:eq(1)", row).html(
-          "<i class='fa fa-fw " +
-            statusIcon +
-            "' title='Click for details about this list'></i>" +
-            status
+      // Add red minus sign icon if data["type"] is "block"
+      // Add green plus sign icon if data["type"] is "allow"
+      let status =
+        "<i class='fa fa-fw fa-question-circle text-orange' title='This list is of unknown type'></i>";
+      if (data.type === "block") {
+        status = "<i class='fa fa-fw fa-minus text-red' title='This is a blocklist'></i>";
+      } else if (data.type === "allow") {
+        status = "<i class='fa fa-fw fa-plus text-green' title='This is an allowlist'></i>";
+      }
+
+      $("td:eq(1)", row).addClass("list-status-" + statusCode);
+      $("td:eq(1)", row).html(
+        "<i class='fa fa-fw " +
+          statusIcon +
+          "' title='Click for details about this list'></i>" +
+          status
+      );
+
+      if (data.address.startsWith("file://")) {
+        // Local files cannot be downloaded from a distant client so don't show
+        // a link to such a list here
+        $("td:eq(2)", row).html(
+          '<code id="address_' + dataId + '" class="breakall">' + data.address + "</code>"
         );
-
-        if (data.address.startsWith("file://")) {
-          // Local files cannot be downloaded from a distant client so don't show
-          // a link to such a list here
-          $("td:eq(2)", row).html(
-            '<code id="address_' + dataId + '" class="breakall">' + data.address + "</code>"
-          );
-        } else {
-          $("td:eq(2)", row).html(
-            '<a id="address_' +
-              dataId +
-              '" class="breakall" href="' +
-              data.address +
-              '" target="_blank" rel="noopener noreferrer">' +
-              data.address +
-              "</a>"
-          );
-        }
-
-        $("td:eq(3)", row).html(
-          '<input type="checkbox" id="enabled_' +
+      } else {
+        $("td:eq(2)", row).html(
+          '<a id="address_' +
             dataId +
-            '"' +
-            (data.enabled ? " checked" : "") +
-            ">"
+            '" class="breakall" href="' +
+            data.address +
+            '" target="_blank" rel="noopener noreferrer">' +
+            data.address +
+            "</a>"
         );
-        var statusEl = $("#enabled_" + dataId, row);
-        statusEl.bootstrapToggle({
-          on: "Enabled",
-          off: "Disabled",
-          size: "small",
-          onstyle: "success",
-          width: "80px",
-        });
-        statusEl.on("change", editList);
+      }
 
-        $("td:eq(4)", row).html('<input id="comment_' + dataId + '" class="form-control">');
-        var commentEl = $("#comment_" + dataId, row);
-        commentEl.val(utils.unescapeHtml(data.comment));
-        commentEl.on("change", editList);
+      $("td:eq(3)", row).html(
+        '<input type="checkbox" id="enabled_' +
+          dataId +
+          '"' +
+          (data.enabled ? " checked" : "") +
+          ">"
+      );
+      var statusEl = $("#enabled_" + dataId, row);
+      statusEl.bootstrapToggle({
+        on: "Enabled",
+        off: "Disabled",
+        size: "small",
+        onstyle: "success",
+        width: "80px",
+      });
+      statusEl.on("change", editList);
 
-        $("td:eq(5)", row).empty();
-        $("td:eq(5)", row).append(
-          '<select class="selectpicker" id="multiselect_' + dataId + '" multiple></select>'
+      $("td:eq(4)", row).html('<input id="comment_' + dataId + '" class="form-control">');
+      var commentEl = $("#comment_" + dataId, row);
+      commentEl.val(utils.unescapeHtml(data.comment));
+      commentEl.on("change", editList);
+
+      $("td:eq(5)", row).empty();
+      $("td:eq(5)", row).append(
+        '<select class="selectpicker" id="multiselect_' + dataId + '" multiple></select>'
+      );
+      var selectEl = $("#multiselect_" + dataId, row);
+      // Add all known groups
+      for (var i = 0; i < groups.length; i++) {
+        var dataSub = "";
+        if (!groups[i].enabled) {
+          dataSub = 'data-subtext="(disabled)"';
+        }
+
+        selectEl.append(
+          $("<option " + dataSub + "/>")
+            .val(groups[i].id)
+            .text(groups[i].name)
         );
-        var selectEl = $("#multiselect_" + dataId, row);
-        // Add all known groups
-        for (var i = 0; i < groups.length; i++) {
-          var dataSub = "";
-          if (!groups[i].enabled) {
-            dataSub = 'data-subtext="(disabled)"';
+      }
+
+      // Select assigned groups
+      selectEl.val(data.groups);
+      // 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");
+            }
           }
-
-          selectEl.append(
-            $("<option " + dataSub + "/>")
-              .val(groups[i].id)
-              .text(groups[i].name)
-          );
-        }
-
-        // Select assigned groups
-        selectEl.val(data.groups);
-        // 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");
-              }
-            }
-          })
-          .on("changed.bs.select", function () {
-            // enable Apply button
-            if ($(applyBtn).prop("disabled")) {
-              $(applyBtn)
-                .addClass("btn-success")
-                .prop("disabled", false)
-                .on("click", function () {
-                  editList.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_' +
-              dataId +
-              ' class="btn btn-block btn-sm" disabled>Apply</button>'
-          );
-
-        var applyBtn = "#btn_apply_" + dataId;
-
-        // Highlight row (if url parameter "listid=" is used)
-        if ("listid" in GETDict && data.id === parseInt(GETDict.listid, 10)) {
-          $(row).find("td").addClass("highlight");
-        }
-
-        var button =
-          '<button type="button" class="btn btn-danger btn-xs" id="deleteList_' +
-          dataId +
-          '" data-id="' +
-          dataId +
-          '">' +
-          '<span class="far fa-trash-alt"></span>' +
-          "</button>";
-        $("td:eq(6)", row).html(button);
-      },
-      dom:
-        "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
-        "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
-        "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
-        "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
-        "<'row'<'col-sm-12'i>>",
-      lengthMenu: [
-        [10, 25, 50, 100, -1],
-        [10, 25, 50, 100, "All"],
-      ],
-      select: {
-        style: "multi",
-        selector: "td:not(:last-child)",
-        info: false,
-      },
-      buttons: [
-        {
-          text: '<span class="far fa-square"></span>',
-          titleAttr: "Select All",
-          className: "btn-sm datatable-bt selectAll",
-          action: function () {
-            table.rows({ page: "current" }).select();
-          },
-        },
-        {
-          text: '<span class="far fa-plus-square"></span>',
-          titleAttr: "Select All",
-          className: "btn-sm datatable-bt selectMore",
-          action: function () {
-            table.rows({ page: "current" }).select();
-          },
-        },
-        {
-          extend: "selectNone",
-          text: '<span class="far fa-check-square"></span>',
-          titleAttr: "Deselect All",
-          className: "btn-sm datatable-bt removeAll",
-        },
-        {
-          text: '<span class="far fa-trash-alt"></span>',
-          titleAttr: "Delete Selected",
-          className: "btn-sm datatable-bt deleteSelected",
-          action: function () {
-            // For each ".selected" row ...
-            var ids = [];
-            $("tr.selected").each(function () {
-              // ... add the row identified by "data-id".
-              ids.push($(this).attr("data-id"));
-            });
-            // Delete all selected rows at once
-            delItems(ids);
-          },
-        },
-      ],
-      stateSave: true,
-      stateDuration: 0,
-      stateSaveCallback: function (settings, data) {
-        utils.stateSaveCallback("groups-lists-table", data);
-      },
-      stateLoadCallback: function () {
-        var data = utils.stateLoadCallback("groups-lists-table");
-
-        // Return if not available
-        if (data === null) {
-          return null;
-        }
-
-        // Reset visibility of ID column
-        data.columns[0].visible = false;
-        // Apply loaded state to table
-        return data;
-      },
-      initComplete: function () {
-        if ("listid" in GETDict) {
-          var pos = table
-            .column(0, { order: "current" })
-            .data()
-            .indexOf(parseInt(GETDict.listid, 10));
-          if (pos >= 0) {
-            var page = Math.floor(pos / table.page.info().length);
-            table.page(page).draw(false);
+        })
+        .on("changed.bs.select", function () {
+          // enable Apply button
+          if ($(applyBtn).prop("disabled")) {
+            $(applyBtn)
+              .addClass("btn-success")
+              .prop("disabled", false)
+              .on("click", function () {
+                editList.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_' +
+            dataId +
+            ' class="btn btn-block btn-sm" disabled>Apply</button>'
+        );
+
+      var applyBtn = "#btn_apply_" + dataId;
+
+      // Highlight row (if url parameter "listid=" is used)
+      if ("listid" in GETDict && data.id === parseInt(GETDict.listid, 10)) {
+        $(row).find("td").addClass("highlight");
+      }
+
+      var button =
+        '<button type="button" class="btn btn-danger btn-xs" id="deleteList_' +
+        dataId +
+        '" data-id="' +
+        dataId +
+        '">' +
+        '<span class="far fa-trash-alt"></span>' +
+        "</button>";
+      $("td:eq(6)", row).html(button);
+    },
+    dom:
+      "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
+      "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
+      "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+      "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
+      "<'row'<'col-sm-12'i>>",
+    lengthMenu: [
+      [10, 25, 50, 100, -1],
+      [10, 25, 50, 100, "All"],
+    ],
+    select: {
+      style: "multi",
+      selector: "td:not(:last-child)",
+      info: false,
+    },
+    buttons: [
+      {
+        text: '<span class="far fa-square"></span>',
+        titleAttr: "Select All",
+        className: "btn-sm datatable-bt selectAll",
+        action: function () {
+          table.rows({ page: "current" }).select();
+        },
       },
-    });
+      {
+        text: '<span class="far fa-plus-square"></span>',
+        titleAttr: "Select All",
+        className: "btn-sm datatable-bt selectMore",
+        action: function () {
+          table.rows({ page: "current" }).select();
+        },
+      },
+      {
+        extend: "selectNone",
+        text: '<span class="far fa-check-square"></span>',
+        titleAttr: "Deselect All",
+        className: "btn-sm datatable-bt removeAll",
+      },
+      {
+        text: '<span class="far fa-trash-alt"></span>',
+        titleAttr: "Delete Selected",
+        className: "btn-sm datatable-bt deleteSelected",
+        action: function () {
+          // For each ".selected" row ...
+          var ids = [];
+          $("tr.selected").each(function () {
+            // ... add the row identified by "data-id".
+            ids.push($(this).attr("data-id"));
+          });
+          // Delete all selected rows at once
+          delItems(ids);
+        },
+      },
+    ],
+    stateSave: true,
+    stateDuration: 0,
+    stateSaveCallback: function (settings, data) {
+      utils.stateSaveCallback("groups-lists-table", data);
+    },
+    stateLoadCallback: function () {
+      var data = utils.stateLoadCallback("groups-lists-table");
+
+      // Return if not available
+      if (data === null) {
+        return null;
+      }
+
+      // Reset visibility of ID column
+      data.columns[0].visible = false;
+      // Apply loaded state to table
+      return data;
+    },
+    initComplete: function () {
+      if ("listid" in GETDict) {
+        var pos = table
+          .column(0, { order: "current" })
+          .data()
+          .indexOf(parseInt(GETDict.listid, 10));
+        if (pos >= 0) {
+          var page = Math.floor(pos / table.page.info().length);
+          table.page(page).draw(false);
+        }
+      }
+    },
+  });
 
   table.on("init select deselect", function () {
     utils.changeBulkDeleteStates(table);