diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js index 88bd3738..c430e560 100644 --- a/scripts/pi-hole/js/groups-domains.js +++ b/scripts/pi-hole/js/groups-domains.js @@ -13,6 +13,7 @@ var GETDict = {}; $(function () { GETDict = utils.parseQueryString(); + // Tabs: Domain/Regex handling // sync description fields, reset inactive inputs on tab change $('a[data-toggle="tab"]').on("shown.bs.tab", function () { var tabHref = $(this).attr("href"); @@ -34,6 +35,7 @@ $(function () { $("#add_deny, #add_allow").on("click", addDomain); + // Domain suggestion handling var suggestTimeout; $("#new_domain").on("input", function (e) { hideSuggestDomains(); @@ -45,6 +47,7 @@ $(function () { initTable(); }); +// Show a list of suggested domains based on the user's input function showSuggestDomains(value) { function createButton(hostname) { // Purposefully omit 'btn' class to save space on padding @@ -134,8 +137,9 @@ function initTable() { $("body > .bootstrap-select.dropdown").remove(); }, rowCallback: function (row, data) { - var dataId = utils.hexEncode(data.domain); + 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) + @@ -182,6 +186,7 @@ function initTable() { var typeEl = $("#type_" + dataId, row); typeEl.on("change", editDomain); + // Initialize bootstrap-toggle for status field (enabled/disabled) $("td:eq(3)", row).html( ''); var commentEl = $("#comment_" + dataId, row); commentEl.val(utils.unescapeHtml(data.comment)); commentEl.on("change", editDomain); - // Group assignment field + // Group assignment field (multi-select) $("td:eq(5)", row).empty(); $("td:eq(5)", row).append( '' @@ -227,6 +233,7 @@ function initTable() { // 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 () { @@ -242,7 +249,8 @@ function initTable() { } }) .on("changed.bs.select", function () { - // enable Apply button + // 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") @@ -253,7 +261,9 @@ function initTable() { } }) .on("hide.bs.select", function () { - // Restore values if drop-down menu is closed without clicking the Apply button + // 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"); @@ -268,8 +278,6 @@ function initTable() { ' class="btn btn-block btn-sm" disabled>Apply' ); - var applyBtn = "#btn_apply_" + dataId; - // Highlight row (if url parameter "domainid=" is used) if ("domainid" in GETDict && data.id === parseInt(GETDict.domainid, 10)) { $(row).find("td").addClass("highlight"); @@ -288,7 +296,7 @@ function initTable() { }, select: { style: "multi", - selector: "td:not(:last-child)", + selector: "td:first-child", info: false, }, buttons: [ @@ -433,7 +441,7 @@ function delItems(ids) { // Get first element from array const domainRaw = ids[0]; - const domain = utils.hexDecode(domainRaw); + const domain = utils.hexDecode(domainRaw.split("_")[0]); const typestr = $("#old_type_" + domainRaw).val(); // Remove first element from array @@ -612,7 +620,7 @@ function editDomain() { } utils.disableAll(); - const domainDecoded = utils.hexDecode(domain); + const domainDecoded = utils.hexDecode(domain.split("_")[0]); utils.showAlert("info", "", "Editing domain...", domain); $.ajax({ url: "/api/domains/" + newTypestr + "/" + encodeURIComponent(domainDecoded),