Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

make id names unique on group management pages #1170

Merged
merged 1 commit into from Feb 21, 2020
Merged

make id names unique on group management pages #1170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
105 changes: 55 additions & 50 deletions scripts/pi-hole/js/groups-adlists.js
View file
Open in desktop
Expand Up @@ -27,11 +27,6 @@ $(document).ready(function() {
$("#btnAdd").on("click", addAdlist);

get_groups();

$("#select").on("change", function() {
$("#ip-custom").val("");
$("#ip-custom").prop("disabled", $("#select option:selected").val() !== "custom");
});
});

function initTable() {
Expand All @@ -51,9 +46,10 @@ function initTable() {
{ data: null, width: "80px", orderable: false }
],
drawCallback: function() {
$(".deleteAdlist").on("click", deleteAdlist);
$('button[id^="deleteAdlist_"]').on("click", deleteAdlist);
},
rowCallback: function(row, data) {
$(row).attr("data-id", data.id);
var tooltip =
"Added: " +
utils.datetime(data.date_added) +
Expand All @@ -62,62 +58,61 @@ function initTable() {
"\nDatabase ID: " +
data.id;
$("td:eq(0)", row).html(
'<code id="address" title="' + tooltip + '">' + data.address + "</code>"
'<code id="address_' + data.id + '" title="' + tooltip + '">' + data.address + "</code>"
);

var disabled = data.enabled === 0;
$("td:eq(1)", row).html(
'<input type="checkbox" id="status"' + (disabled ? "" : " checked") + ">"
'<input type="checkbox" id="status_' + data.id + '"' + (disabled ? "" : " checked") + ">"
);
var status = $("#status", row);
status.bootstrapToggle({
var statusEl = $("#status_" + data.id, row);
statusEl.bootstrapToggle({
on: "Enabled",
off: "Disabled",
size: "small",
onstyle: "success",
width: "80px"
});
status.on("change", editAdlist);
statusEl.on("change", editAdlist);

$("td:eq(2)", row).html(
'<input id="comment" class="form-control"><input id="id" type="hidden" value="' +
data.id +
'">'
);
var comment = $("#comment", row);
comment.val(data.comment);
comment.on("change", editAdlist);
$("td:eq(2)", row).html('<input id="comment_' + data.id + '" class="form-control">');
var commentEl = $("#comment_" + data.id, row);
commentEl.val(data.comment);
commentEl.on("change", editAdlist);

$("td:eq(3)", row).empty();
$("td:eq(3)", row).append(
'<div id="selectHome' +
'<div id="selectHome_' +
data.id +
'"><select id="multiselect" multiple="multiple"></select></div>'
'">' +
'<select id="multiselect_' +
data.id +
'" multiple="multiple"></select></div>'
);
var sel = $("#multiselect", row);
var selectEl = $("#multiselect_" + data.id, row);
// Add all known groups
for (var i = 0; i < groups.length; i++) {
var extra = "";
if (!groups[i].enabled) {
extra = " (disabled)";
}

sel.append(
selectEl.append(
$("<option />")
.val(groups[i].id)
.text(groups[i].name + extra)
);
}

// Select assigned groups
sel.val(data.groups);
selectEl.val(data.groups);
// Initialize multiselect
sel.multiselect({
selectEl.multiselect({
includeSelectAllOption: true,
buttonContainer: '<div id="container' + data.id + '" class="btn-group"/>',
buttonContainer: '<div id="container_' + data.id + '" class="btn-group"/>',
maxHeight: 200,
onDropdownShown: function() {
var el = $("#container" + data.id);
var el = $("#container_" + data.id);
var top = el[0].getBoundingClientRect().top;
var bottom = $(window).height() - top - el.height();
if (bottom < 200) {
Expand All @@ -135,16 +130,16 @@ function initTable() {
el.css("left", offset.left + "px");
},
onDropdownHide: function() {
var el = $("#container" + data.id);
var home = $("#selectHome" + data.id);
var el = $("#container_" + data.id);
var home = $("#selectHome_" + data.id);
home.append(el);
el.removeAttr("style");
}
});
sel.on("change", editAdlist);
selectEl.on("change", editAdlist);

var button =
'<button class="btn btn-danger btn-xs deleteAdlist" type="button" data-id="' +
'<button class="btn btn-danger btn-xs" type="button" id="deleteAdlist_' +
data.id +
'">' +
'<span class="glyphicon glyphicon-trash"></span>' +
Expand Down Expand Up @@ -247,26 +242,36 @@ function addAdlist() {
function editAdlist() {
var elem = $(this).attr("id");
var tr = $(this).closest("tr");
var id = tr.find("#id").val();
var status = tr.find("#status").is(":checked") ? 1 : 0;
var comment = tr.find("#comment").val();
var groups = tr.find("#multiselect").val();
var address = tr.find("#address").text();
var id = tr.attr("data-id");
var status = tr.find("#status_" + id).is(":checked") ? 1 : 0;
var comment = tr.find("#comment_" + id).val();
var groups = tr.find("#multiselect_" + id).val();
var address = tr.find("#address_" + id).text();

var done = "edited";
var not_done = "editing";
if (elem === "status" && status === 1) {
done = "enabled";
not_done = "enabling";
} else if (elem === "status" && status === 0) {
done = "disabled";
not_done = "disabling";
} else if (elem === "comment") {
done = "edited comment of";
not_done = "editing comment of";
} else if (elem === "multiselect") {
done = "edited groups of";
not_done = "editing groups of";
switch (elem) {
case "status_" + id:
if (status === 0) {
done = "disabled";
not_done = "disabling";
} else if (status === 1) {
done = "enabled";
not_done = "enabling";
}

break;
case "comment_" + id:
done = "edited comment of";
not_done = "editing comment of";
break;
case "multiselect_" + id:
done = "edited groups of";
not_done = "editing groups of";
break;
default:
alert("bad element or invalid data-id!");
return;
}

utils.disableAll();
Expand Down Expand Up @@ -316,9 +321,9 @@ function editAdlist() {
}

function deleteAdlist() {
var id = $(this).attr("data-id");
var tr = $(this).closest("tr");
var address = tr.find("#address").text();
var id = tr.attr("data-id");
var address = tr.find("#address_" + id).text();

utils.disableAll();
utils.showAlert("info", "", "Deleting adlist...", address);
Expand Down
83 changes: 42 additions & 41 deletions scripts/pi-hole/js/groups-clients.js
View file
Open in desktop
Expand Up @@ -85,66 +85,61 @@ function initTable() {
{ data: "name", width: "80px", orderable: false }
],
drawCallback: function() {
$(".deleteClient").on("click", deleteClient);
$('button[id^="deleteClient_"]').on("click", deleteClient);
},
rowCallback: function(row, data) {
$(row).attr("data-id", data.id);
var tooltip =
"Added: " +
utils.datetime(data.date_added) +
"\nLast modified: " +
utils.datetime(data.date_modified) +
"\nDatabase ID: " +
data.id;
var ip_name =
'<code id="ip" title="' +
tooltip +
'">' +
data.ip +
'</code><input id="id" type="hidden" value="' +
data.id +
'">';
var ip_name = '<code id="ip_' + data.id + '" title="' + tooltip + '">' + data.ip + "</code>";
if (data.name !== null && data.name.length > 0)
ip_name += '<br><code id="name" title="' + tooltip + '">' + data.name + "</code>";
ip_name +=
'<br><code id="name_' + data.id + '" title="' + tooltip + '">' + data.name + "</code>";
$("td:eq(0)", row).html(ip_name);

$("td:eq(1)", row).html(
'<input id="comment" class="form-control"><input id="id" type="hidden" value="' +
data.id +
'">'
);
$("#comment", row).val(data.comment);
$("#comment", row).on("change", editClient);
$("td:eq(1)", row).html('<input id="comment_' + data.id + '" class="form-control">');
var commentEl = $("#comment_" + data.id, row);
commentEl.val(data.comment);
commentEl.on("change", editClient);

$("td:eq(2)", row).empty();
$("td:eq(2)", row).append(
'<div id="selectHome' +
'<div id="selectHome_' +
data.id +
'"><select id="multiselect" multiple="multiple"></select></div>'
'">' +
'<select id="multiselect_' +
data.id +
'" multiple="multiple"></select></div>'
);
var sel = $("#multiselect", row);
var selectEl = $("#multiselect_" + data.id, row);
// Add all known groups
for (var i = 0; i < groups.length; i++) {
var extra = "";
if (!groups[i].enabled) {
extra = " (disabled)";
}

sel.append(
selectEl.append(
$("<option />")
.val(groups[i].id)
.text(groups[i].name + extra)
);
}

// Select assigned groups
sel.val(data.groups);
selectEl.val(data.groups);
// Initialize multiselect
sel.multiselect({
selectEl.multiselect({
includeSelectAllOption: true,
buttonContainer: '<div id="container' + data.id + '" class="btn-group"/>',
buttonContainer: '<div id="container_' + data.id + '" class="btn-group"/>',
maxHeight: 200,
onDropdownShown: function() {
var el = $("#container" + data.id);
var el = $("#container_" + data.id);
var top = el[0].getBoundingClientRect().top;
var bottom = $(window).height() - top - el.height();
if (bottom < 200) {
Expand All @@ -168,10 +163,10 @@ function initTable() {
el.removeAttr("style");
}
});
sel.on("change", editClient);
selectEl.on("change", editClient);

var button =
'<button class="btn btn-danger btn-xs deleteClient" type="button" data-id="' +
'<button class="btn btn-danger btn-xs" type="button" id="deleteClient_' +
data.id +
'">' +
'<span class="glyphicon glyphicon-trash"></span>' +
Expand Down Expand Up @@ -267,20 +262,26 @@ function addClient() {
function editClient() {
var elem = $(this).attr("id");
var tr = $(this).closest("tr");
var id = tr.find("#id").val();
var groups = tr.find("#multiselect").val();
var ip = tr.find("#ip").text();
var name = tr.find("#name").text();
var comment = tr.find("#comment").val();
var id = tr.attr("data-id");
var groups = tr.find("#multiselect_" + id).val();
var ip = tr.find("#ip_" + id).text();
var name = tr.find("#name_" + id).text();
var comment = tr.find("#comment_" + id).val();

var done = "edited";
var not_done = "editing";
if (elem === "multiselect") {
done = "edited groups of";
not_done = "editing groups of";
} else if (elem === "comment") {
done = "edited comment of";
not_done = "editing comment of";
switch (elem) {
case "multiselect_" + id:
done = "edited groups of";
not_done = "editing groups of";
break;
case "comment_" + id:
done = "edited comment of";
not_done = "editing comment of";
break;
default:
alert("bad element or invalid data-id!");
return;
}

var ip_name = ip;
Expand Down Expand Up @@ -332,10 +333,10 @@ function editClient() {
}

function deleteClient() {
var id = $(this).attr("data-id");
var tr = $(this).closest("tr");
var ip = tr.find("#ip").text();
var name = tr.find("#name").text();
var id = tr.attr("data-id");
var ip = tr.find("#ip_" + id).text();
var name = tr.find("#name_" + id).text();

var ip_name = ip;
if (name.length > 0) {
Expand Down