mirror of
https://github.com/pi-hole/web.git
synced 2025-12-22 19:58:27 +00:00
Use prettier to reformat JS files added in this PR.
Signed-off-by: DL6ER <dl6er@dl6er.de>
This commit is contained in:
DL6ER
@@ -2,217 +2,266 @@ var table;
|
|||||||
var groups = [];
|
var groups = [];
|
||||||
const token = $("#token").html();
|
const token = $("#token").html();
|
||||||
|
|
||||||
function showAlert(type, message)
|
function showAlert(type, message) {
|
||||||
{
|
var alertElement = null;
|
||||||
var alertElement = null;
|
var messageElement = null;
|
||||||
var messageElement = null;
|
|
||||||
|
|
||||||
switch (type)
|
switch (type) {
|
||||||
{
|
case "info":
|
||||||
case 'info': alertElement = $('#alInfo'); break;
|
alertElement = $("#alInfo");
|
||||||
case 'success': alertElement = $('#alSuccess'); break;
|
break;
|
||||||
case 'warning': alertElement = $('#alWarning'); messageElement = $('#warn'); break;
|
case "success":
|
||||||
case 'error': alertElement = $('#alFailure'); messageElement = $('#err'); break;
|
alertElement = $("#alSuccess");
|
||||||
default: return;
|
break;
|
||||||
}
|
case "warning":
|
||||||
|
alertElement = $("#alWarning");
|
||||||
|
messageElement = $("#warn");
|
||||||
|
break;
|
||||||
|
case "error":
|
||||||
|
alertElement = $("#alFailure");
|
||||||
|
messageElement = $("#err");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (messageElement != null)
|
if (messageElement != null) messageElement.html(message);
|
||||||
messageElement.html(message);
|
|
||||||
|
|
||||||
alertElement.fadeIn(200);
|
alertElement.fadeIn(200);
|
||||||
alertElement.delay(8000).fadeOut(2000);
|
alertElement.delay(8000).fadeOut(2000);
|
||||||
}
|
}
|
||||||
|
|
||||||
function get_groups()
|
function get_groups() {
|
||||||
{
|
$.post(
|
||||||
$.post("scripts/pi-hole/php/groups.php", { 'action': 'get_groups', "token":token },
|
"scripts/pi-hole/php/groups.php",
|
||||||
|
{ action: "get_groups", token: token },
|
||||||
function(data) {
|
function(data) {
|
||||||
groups = data.data;
|
groups = data.data;
|
||||||
initTable();
|
initTable();
|
||||||
}, "json");
|
},
|
||||||
|
"json"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
$.fn.redraw = function(){
|
$.fn.redraw = function() {
|
||||||
return $(this).each(function(){
|
return $(this).each(function() {
|
||||||
var redraw = this.offsetHeight;
|
var redraw = this.offsetHeight;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
function datetime(date)
|
function datetime(date) {
|
||||||
{
|
return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
|
||||||
return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
$("#btnAdd").on("click", addAdlist);
|
||||||
|
|
||||||
$('#btnAdd').on('click', addAdlist);
|
get_groups();
|
||||||
|
|
||||||
get_groups();
|
$("#select").on("change", function() {
|
||||||
|
$("#ip-custom").val("");
|
||||||
$('#select').on('change', function() {
|
$("#ip-custom").prop(
|
||||||
$("#ip-custom").val("");
|
"disabled",
|
||||||
$("#ip-custom").prop( "disabled" , $( "#select option:selected" ).val() !== "custom");
|
$("#select option:selected").val() !== "custom"
|
||||||
});
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function initTable()
|
function initTable() {
|
||||||
{
|
table = $("#adlistsTable").DataTable({
|
||||||
table = $("#adlistsTable").DataTable( {
|
ajax: {
|
||||||
"ajax": {
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
"url": "scripts/pi-hole/php/groups.php",
|
data: { action: "get_adlists", token: token },
|
||||||
"data": {"action": "get_adlists", "token": token},
|
type: "POST"
|
||||||
"type": "POST"
|
},
|
||||||
},
|
order: [[1, "asc"]],
|
||||||
order: [[ 1, 'asc' ]],
|
columns: [
|
||||||
columns: [
|
{ data: "address" },
|
||||||
{ data: "address" },
|
{ data: "enabled", searchable: false },
|
||||||
{ data: "enabled", searchable: false },
|
{ data: "comment" },
|
||||||
{ data: "comment" },
|
{ data: "groups", searchable: false },
|
||||||
{ data: "groups", searchable: false },
|
{ data: null, width: "80px", orderable: false }
|
||||||
{ data: null, width: "80px", orderable: false }
|
],
|
||||||
],
|
drawCallback: function(settings) {
|
||||||
"drawCallback": function( settings ) {
|
$(".editAdlist").on("click", editAdlist);
|
||||||
$('.editAdlist').on('click', editAdlist);
|
$(".deleteAdlist").on("click", deleteAdlist);
|
||||||
$('.deleteAdlist').on('click', deleteAdlist);
|
},
|
||||||
},
|
rowCallback: function(row, data) {
|
||||||
"rowCallback": function( row, data ) {
|
const tooltip =
|
||||||
const tooltip = 'Added: '+datetime(data["date_added"])+'\nLast modified: '+datetime(data["date_modified"]);
|
"Added: " +
|
||||||
$('td:eq(0)', row).html( '<code title="'+tooltip+'">'+data["address"]+'</code>' );
|
datetime(data["date_added"]) +
|
||||||
|
"\nLast modified: " +
|
||||||
|
datetime(data["date_modified"]);
|
||||||
|
$("td:eq(0)", row).html(
|
||||||
|
'<code title="' + tooltip + '">' + data["address"] + "</code>"
|
||||||
|
);
|
||||||
|
|
||||||
const disabled = data["enabled"] === 0;
|
const disabled = data["enabled"] === 0;
|
||||||
$('td:eq(1)', row).html( '<input type="checkbox" id="status"'+(disabled?'':' checked')+'>');
|
$("td:eq(1)", row).html(
|
||||||
$('#status', row).bootstrapToggle({ on: 'Enabled', off: 'Disabled', size: 'small', onstyle: "success", width: "80px" });
|
'<input type="checkbox" id="status"' +
|
||||||
|
(disabled ? "" : " checked") +
|
||||||
|
">"
|
||||||
|
);
|
||||||
|
$("#status", row).bootstrapToggle({
|
||||||
|
on: "Enabled",
|
||||||
|
off: "Disabled",
|
||||||
|
size: "small",
|
||||||
|
onstyle: "success",
|
||||||
|
width: "80px"
|
||||||
|
});
|
||||||
|
|
||||||
$('td:eq(2)', row).html( '<input id="comment" class="form-control"><input id="id" type="hidden" value="'+data["id"]+'">' );
|
$("td:eq(2)", row).html(
|
||||||
$('#comment', row).val(data["comment"]);
|
'<input id="comment" class="form-control"><input id="id" type="hidden" value="' +
|
||||||
|
data["id"] +
|
||||||
|
'">'
|
||||||
|
);
|
||||||
|
$("#comment", row).val(data["comment"]);
|
||||||
|
|
||||||
$('td:eq(3)', row).empty();
|
$("td:eq(3)", row).empty();
|
||||||
$('td:eq(3)', row).append( '<select id="multiselect" multiple="multiple"></select>' );
|
$("td:eq(3)", row).append(
|
||||||
var sel = $('#multiselect', row);
|
'<select id="multiselect" multiple="multiple"></select>'
|
||||||
// Add all known groups
|
);
|
||||||
for (var i = 0; i < groups.length; i++) {
|
var sel = $("#multiselect", row);
|
||||||
var extra = 'ID ' + groups[i].id;
|
// Add all known groups
|
||||||
if(!groups[i].enabled)
|
for (var i = 0; i < groups.length; i++) {
|
||||||
{
|
var extra = "ID " + groups[i].id;
|
||||||
extra += ', disabled';
|
if (!groups[i].enabled) {
|
||||||
}
|
extra += ", disabled";
|
||||||
sel.append($('<option />').val(groups[i].id).text(groups[i].name + ' (' + extra + ')'));
|
|
||||||
sel.redraw();
|
|
||||||
}
|
|
||||||
// Select assigned groups
|
|
||||||
sel.val(data.groups);
|
|
||||||
// Initialize multiselect
|
|
||||||
sel.multiselect({ includeSelectAllOption: true });
|
|
||||||
|
|
||||||
let button = "<button class=\"btn btn-success btn-xs editAdlist\" type=\"button\" data-id='"+data["id"]+"'>" +
|
|
||||||
"<span class=\"glyphicon glyphicon-pencil\"></span>" +
|
|
||||||
"</button>" +
|
|
||||||
" " +
|
|
||||||
"<button class=\"btn btn-danger btn-xs deleteAdlist\" type=\"button\" data-id='"+data["id"]+"'>" +
|
|
||||||
"<span class=\"glyphicon glyphicon-trash\"></span>" +
|
|
||||||
"</button>";
|
|
||||||
$('td:eq(4)', row).html( button );
|
|
||||||
},
|
|
||||||
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
|
|
||||||
"stateSave": true,
|
|
||||||
stateSaveCallback: function(settings, data) {
|
|
||||||
// Store current state in client's local storage area
|
|
||||||
localStorage.setItem("groups-adlists-table", JSON.stringify(data));
|
|
||||||
},
|
|
||||||
stateLoadCallback: function(settings) {
|
|
||||||
// Receive previous state from client's local storage area
|
|
||||||
var data = localStorage.getItem("groups-adlists-table");
|
|
||||||
// Return if not available
|
|
||||||
if(data === null){ return null; }
|
|
||||||
data = JSON.parse(data);
|
|
||||||
// Always start on the first page to show most recent queries
|
|
||||||
data["start"] = 0;
|
|
||||||
// Always start with empty search field
|
|
||||||
data["search"]["search"] = "";
|
|
||||||
// Apply loaded state to table
|
|
||||||
return data;
|
|
||||||
}
|
}
|
||||||
});
|
sel.append(
|
||||||
|
$("<option />")
|
||||||
|
.val(groups[i].id)
|
||||||
|
.text(groups[i].name + " (" + extra + ")")
|
||||||
|
);
|
||||||
|
sel.redraw();
|
||||||
|
}
|
||||||
|
// Select assigned groups
|
||||||
|
sel.val(data.groups);
|
||||||
|
// Initialize multiselect
|
||||||
|
sel.multiselect({ includeSelectAllOption: true });
|
||||||
|
|
||||||
|
let button =
|
||||||
|
'<button class="btn btn-success btn-xs editAdlist" type="button" data-id=\'' +
|
||||||
|
data["id"] +
|
||||||
|
"'>" +
|
||||||
|
'<span class="glyphicon glyphicon-pencil"></span>' +
|
||||||
|
"</button>" +
|
||||||
|
" " +
|
||||||
|
'<button class="btn btn-danger btn-xs deleteAdlist" type="button" data-id=\'' +
|
||||||
|
data["id"] +
|
||||||
|
"'>" +
|
||||||
|
'<span class="glyphicon glyphicon-trash"></span>' +
|
||||||
|
"</button>";
|
||||||
|
$("td:eq(4)", row).html(button);
|
||||||
|
},
|
||||||
|
lengthMenu: [
|
||||||
|
[10, 25, 50, 100, -1],
|
||||||
|
[10, 25, 50, 100, "All"]
|
||||||
|
],
|
||||||
|
stateSave: true,
|
||||||
|
stateSaveCallback: function(settings, data) {
|
||||||
|
// Store current state in client's local storage area
|
||||||
|
localStorage.setItem("groups-adlists-table", JSON.stringify(data));
|
||||||
|
},
|
||||||
|
stateLoadCallback: function(settings) {
|
||||||
|
// Receive previous state from client's local storage area
|
||||||
|
var data = localStorage.getItem("groups-adlists-table");
|
||||||
|
// Return if not available
|
||||||
|
if (data === null) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
data = JSON.parse(data);
|
||||||
|
// Always start on the first page to show most recent queries
|
||||||
|
data["start"] = 0;
|
||||||
|
// Always start with empty search field
|
||||||
|
data["search"]["search"] = "";
|
||||||
|
// Apply loaded state to table
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function addAdlist()
|
function addAdlist() {
|
||||||
{
|
var address = $("#address").val();
|
||||||
var address = $("#address").val();
|
var comment = $("#comment").val();
|
||||||
var comment = $("#comment").val();
|
|
||||||
|
|
||||||
showAlert('info');
|
showAlert("info");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "scripts/pi-hole/php/groups.php",
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
method: "post",
|
method: "post",
|
||||||
dataType: 'json',
|
dataType: "json",
|
||||||
data: {"action": "add_adlist", "address": address, "comment": comment, "token":token},
|
data: {
|
||||||
success: function(response) {
|
action: "add_adlist",
|
||||||
if (response.success) {
|
address: address,
|
||||||
showAlert('success');
|
comment: comment,
|
||||||
$("#address").empty();
|
token: token
|
||||||
$("#comment").empty();
|
},
|
||||||
table.ajax.reload();
|
success: function(response) {
|
||||||
}
|
if (response.success) {
|
||||||
else
|
showAlert("success");
|
||||||
showAlert('error', response.message);
|
$("#address").empty();
|
||||||
},
|
$("#comment").empty();
|
||||||
error: function(jqXHR, exception) {
|
table.ajax.reload();
|
||||||
showAlert('error', "Error while adding new adlist");
|
} else showAlert("error", response.message);
|
||||||
console.log(exception);
|
},
|
||||||
}
|
error: function(jqXHR, exception) {
|
||||||
});
|
showAlert("error", "Error while adding new adlist");
|
||||||
|
console.log(exception);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function editAdlist()
|
function editAdlist() {
|
||||||
{
|
var tr = $(this).closest("tr");
|
||||||
var tr = $(this).closest("tr");
|
var id = tr.find("#id").val();
|
||||||
var id = tr.find("#id").val();
|
var status = tr.find("#status").is(":checked") ? 1 : 0;
|
||||||
var status = tr.find("#status").is(":checked") ? 1 : 0;
|
var comment = tr.find("#comment").val();
|
||||||
var comment = tr.find("#comment").val();
|
var groups = tr.find("#multiselect").val();
|
||||||
var groups = tr.find("#multiselect").val();
|
|
||||||
|
|
||||||
showAlert('info');
|
showAlert("info");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "scripts/pi-hole/php/groups.php",
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
method: "post",
|
method: "post",
|
||||||
dataType: 'json',
|
dataType: "json",
|
||||||
data: {"action": "edit_adlist", "id": id, "comment": comment, "status": status, "groups": groups, "token":token},
|
data: {
|
||||||
success: function(response) {
|
action: "edit_adlist",
|
||||||
if (response.success) {
|
id: id,
|
||||||
showAlert('success');
|
comment: comment,
|
||||||
table.ajax.reload();
|
status: status,
|
||||||
}
|
groups: groups,
|
||||||
else
|
token: token
|
||||||
showAlert('error', response.message);
|
},
|
||||||
},
|
success: function(response) {
|
||||||
error: function(jqXHR, exception) {
|
if (response.success) {
|
||||||
showAlert('error', "Error while editing adlist with ID "+id);
|
showAlert("success");
|
||||||
console.log(exception);
|
table.ajax.reload();
|
||||||
}
|
} else showAlert("error", response.message);
|
||||||
});
|
},
|
||||||
|
error: function(jqXHR, exception) {
|
||||||
|
showAlert("error", "Error while editing adlist with ID " + id);
|
||||||
|
console.log(exception);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteAdlist()
|
function deleteAdlist() {
|
||||||
{
|
var id = $(this).attr("data-id");
|
||||||
var id = $(this).attr("data-id");
|
|
||||||
|
|
||||||
showAlert('info');
|
showAlert("info");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "scripts/pi-hole/php/groups.php",
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
method: "post",
|
method: "post",
|
||||||
dataType: 'json',
|
dataType: "json",
|
||||||
data: {"action": "delete_adlist", "id": id, "token":token},
|
data: { action: "delete_adlist", id: id, token: token },
|
||||||
success: function(response) {
|
success: function(response) {
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
showAlert('success');
|
showAlert("success");
|
||||||
table.ajax.reload();
|
table.ajax.reload();
|
||||||
}
|
} else showAlert("error", response.message);
|
||||||
else
|
},
|
||||||
showAlert('error', response.message);
|
error: function(jqXHR, exception) {
|
||||||
},
|
showAlert("error", "Error while deleting adlist with ID " + id);
|
||||||
error: function(jqXHR, exception) {
|
console.log(exception);
|
||||||
showAlert('error', "Error while deleting adlist with ID "+id);
|
}
|
||||||
console.log(exception);
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,217 +2,251 @@ var table;
|
|||||||
var groups = [];
|
var groups = [];
|
||||||
const token = $("#token").html();
|
const token = $("#token").html();
|
||||||
|
|
||||||
function showAlert(type, message)
|
function showAlert(type, message) {
|
||||||
{
|
var alertElement = null;
|
||||||
var alertElement = null;
|
var messageElement = null;
|
||||||
var messageElement = null;
|
|
||||||
|
|
||||||
switch (type)
|
switch (type) {
|
||||||
{
|
case "info":
|
||||||
case 'info': alertElement = $('#alInfo'); break;
|
alertElement = $("#alInfo");
|
||||||
case 'success': alertElement = $('#alSuccess'); break;
|
break;
|
||||||
case 'warning': alertElement = $('#alWarning'); messageElement = $('#warn'); break;
|
case "success":
|
||||||
case 'error': alertElement = $('#alFailure'); messageElement = $('#err'); break;
|
alertElement = $("#alSuccess");
|
||||||
default: return;
|
break;
|
||||||
}
|
case "warning":
|
||||||
|
alertElement = $("#alWarning");
|
||||||
|
messageElement = $("#warn");
|
||||||
|
break;
|
||||||
|
case "error":
|
||||||
|
alertElement = $("#alFailure");
|
||||||
|
messageElement = $("#err");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (messageElement != null)
|
if (messageElement != null) messageElement.html(message);
|
||||||
messageElement.html(message);
|
|
||||||
|
|
||||||
alertElement.fadeIn(200);
|
alertElement.fadeIn(200);
|
||||||
alertElement.delay(8000).fadeOut(2000);
|
alertElement.delay(8000).fadeOut(2000);
|
||||||
}
|
}
|
||||||
|
|
||||||
function reload_client_suggestions()
|
function reload_client_suggestions() {
|
||||||
{
|
$.post(
|
||||||
$.post("scripts/pi-hole/php/groups.php", { 'action': 'get_unconfigured_clients', "token":token },
|
"scripts/pi-hole/php/groups.php",
|
||||||
|
{ action: "get_unconfigured_clients", token: token },
|
||||||
function(data) {
|
function(data) {
|
||||||
var sel = $("#select");
|
var sel = $("#select");
|
||||||
sel.empty();
|
sel.empty();
|
||||||
for (var i = 0; i < data.length; i++) {
|
for (var i = 0; i < data.length; i++) {
|
||||||
sel.append($('<option />').val(data[i]).text(data[i]));
|
sel.append(
|
||||||
}
|
$("<option />")
|
||||||
sel.append($('<option />').val("custom").text("Custom, specified on the right"));
|
.val(data[i])
|
||||||
}, "json");
|
.text(data[i])
|
||||||
|
);
|
||||||
|
}
|
||||||
|
sel.append(
|
||||||
|
$("<option />")
|
||||||
|
.val("custom")
|
||||||
|
.text("Custom, specified on the right")
|
||||||
|
);
|
||||||
|
},
|
||||||
|
"json"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function get_groups()
|
function get_groups() {
|
||||||
{
|
$.post(
|
||||||
$.post("scripts/pi-hole/php/groups.php", { 'action': 'get_groups', "token":token },
|
"scripts/pi-hole/php/groups.php",
|
||||||
|
{ action: "get_groups", token: token },
|
||||||
function(data) {
|
function(data) {
|
||||||
groups = data.data;
|
groups = data.data;
|
||||||
initTable();
|
initTable();
|
||||||
}, "json");
|
},
|
||||||
|
"json"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
$.fn.redraw = function(){
|
$.fn.redraw = function() {
|
||||||
return $(this).each(function(){
|
return $(this).each(function() {
|
||||||
var redraw = this.offsetHeight;
|
var redraw = this.offsetHeight;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
$("#btnAdd").on("click", addClient);
|
||||||
|
|
||||||
$('#btnAdd').on('click', addClient);
|
reload_client_suggestions();
|
||||||
|
get_groups();
|
||||||
|
|
||||||
reload_client_suggestions();
|
$("#select").on("change", function() {
|
||||||
get_groups();
|
$("#ip-custom").val("");
|
||||||
|
$("#ip-custom").prop(
|
||||||
$('#select').on('change', function() {
|
"disabled",
|
||||||
$("#ip-custom").val("");
|
$("#select option:selected").val() !== "custom"
|
||||||
$("#ip-custom").prop( "disabled" , $( "#select option:selected" ).val() !== "custom");
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function initTable()
|
function initTable() {
|
||||||
{
|
table = $("#clientsTable").DataTable({
|
||||||
table = $("#clientsTable").DataTable( {
|
ajax: {
|
||||||
"ajax": {
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
"url": "scripts/pi-hole/php/groups.php",
|
data: { action: "get_clients", token: token },
|
||||||
"data": {"action": "get_clients", "token": token},
|
type: "POST"
|
||||||
"type": "POST"
|
},
|
||||||
},
|
order: [[1, "asc"]],
|
||||||
order: [[ 1, 'asc' ]],
|
columns: [
|
||||||
columns: [
|
{ data: "ip" },
|
||||||
{ data: "ip" },
|
{ data: "groups", searchable: false },
|
||||||
{ data: "groups", searchable: false },
|
{ data: null, width: "80px", orderable: false }
|
||||||
{ data: null, width: "80px", orderable: false }
|
],
|
||||||
],
|
drawCallback: function(settings) {
|
||||||
"drawCallback": function( settings ) {
|
$(".editClient").on("click", editClient);
|
||||||
$('.editClient').on('click', editClient);
|
$(".deleteClient").on("click", deleteClient);
|
||||||
$('.deleteClient').on('click', deleteClient);
|
},
|
||||||
},
|
rowCallback: function(row, data) {
|
||||||
"rowCallback": function( row, data ) {
|
$("td:eq(0)", row).html(
|
||||||
$('td:eq(0)', row).html( '<code>'+data["ip"]+'</code><input id="id" type="hidden" value="'+data["id"]+'">' );
|
"<code>" +
|
||||||
|
data["ip"] +
|
||||||
|
'</code><input id="id" type="hidden" value="' +
|
||||||
|
data["id"] +
|
||||||
|
'">'
|
||||||
|
);
|
||||||
|
|
||||||
$('td:eq(1)', row).empty();
|
$("td:eq(1)", row).empty();
|
||||||
$('td:eq(1)', row).append( '<select id="multiselect" multiple="multiple"></select>' );
|
$("td:eq(1)", row).append(
|
||||||
var sel = $('#multiselect', row);
|
'<select id="multiselect" multiple="multiple"></select>'
|
||||||
// Add all known groups
|
);
|
||||||
for (var i = 0; i < groups.length; i++) {
|
var sel = $("#multiselect", row);
|
||||||
var extra = 'ID ' + groups[i].id;
|
// Add all known groups
|
||||||
if(!groups[i].enabled)
|
for (var i = 0; i < groups.length; i++) {
|
||||||
{
|
var extra = "ID " + groups[i].id;
|
||||||
extra += ', disabled';
|
if (!groups[i].enabled) {
|
||||||
}
|
extra += ", disabled";
|
||||||
sel.append($('<option />').val(groups[i].id).text(groups[i].name + ' (' + extra + ')'));
|
|
||||||
sel.redraw();
|
|
||||||
}
|
|
||||||
// Select assigned groups
|
|
||||||
sel.val(data.groups);
|
|
||||||
// Initialize multiselect
|
|
||||||
sel.multiselect({ includeSelectAllOption: true });
|
|
||||||
|
|
||||||
let button = "<button class=\"btn btn-success btn-xs editClient\" type=\"button\" data-id='"+data["id"]+"'>" +
|
|
||||||
"<span class=\"glyphicon glyphicon-pencil\"></span>" +
|
|
||||||
"</button>" +
|
|
||||||
" " +
|
|
||||||
"<button class=\"btn btn-danger btn-xs deleteClient\" type=\"button\" data-id='"+data["id"]+"'>" +
|
|
||||||
"<span class=\"glyphicon glyphicon-trash\"></span>" +
|
|
||||||
"</button>";
|
|
||||||
$('td:eq(2)', row).html( button );
|
|
||||||
},
|
|
||||||
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
|
|
||||||
"stateSave": true,
|
|
||||||
stateSaveCallback: function(settings, data) {
|
|
||||||
// Store current state in client's local storage area
|
|
||||||
localStorage.setItem("groups-clients-table", JSON.stringify(data));
|
|
||||||
},
|
|
||||||
stateLoadCallback: function(settings) {
|
|
||||||
// Receive previous state from client's local storage area
|
|
||||||
var data = localStorage.getItem("groups-clients-table");
|
|
||||||
// Return if not available
|
|
||||||
if(data === null){ return null; }
|
|
||||||
data = JSON.parse(data);
|
|
||||||
// Always start on the first page to show most recent queries
|
|
||||||
data["start"] = 0;
|
|
||||||
// Always start with empty search field
|
|
||||||
data["search"]["search"] = "";
|
|
||||||
// Apply loaded state to table
|
|
||||||
return data;
|
|
||||||
}
|
}
|
||||||
});
|
sel.append(
|
||||||
}
|
$("<option />")
|
||||||
|
.val(groups[i].id)
|
||||||
|
.text(groups[i].name + " (" + extra + ")")
|
||||||
|
);
|
||||||
|
sel.redraw();
|
||||||
|
}
|
||||||
|
// Select assigned groups
|
||||||
|
sel.val(data.groups);
|
||||||
|
// Initialize multiselect
|
||||||
|
sel.multiselect({ includeSelectAllOption: true });
|
||||||
|
|
||||||
function addClient()
|
let button =
|
||||||
{
|
'<button class="btn btn-success btn-xs editClient" type="button" data-id=\'' +
|
||||||
var ip = $("#select").val();
|
data["id"] +
|
||||||
if(ip === "custom")
|
"'>" +
|
||||||
{
|
'<span class="glyphicon glyphicon-pencil"></span>' +
|
||||||
ip = $("#ip-custom").val();
|
"</button>" +
|
||||||
|
" " +
|
||||||
|
'<button class="btn btn-danger btn-xs deleteClient" type="button" data-id=\'' +
|
||||||
|
data["id"] +
|
||||||
|
"'>" +
|
||||||
|
'<span class="glyphicon glyphicon-trash"></span>' +
|
||||||
|
"</button>";
|
||||||
|
$("td:eq(2)", row).html(button);
|
||||||
|
},
|
||||||
|
lengthMenu: [
|
||||||
|
[10, 25, 50, 100, -1],
|
||||||
|
[10, 25, 50, 100, "All"]
|
||||||
|
],
|
||||||
|
stateSave: true,
|
||||||
|
stateSaveCallback: function(settings, data) {
|
||||||
|
// Store current state in client's local storage area
|
||||||
|
localStorage.setItem("groups-clients-table", JSON.stringify(data));
|
||||||
|
},
|
||||||
|
stateLoadCallback: function(settings) {
|
||||||
|
// Receive previous state from client's local storage area
|
||||||
|
var data = localStorage.getItem("groups-clients-table");
|
||||||
|
// Return if not available
|
||||||
|
if (data === null) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
data = JSON.parse(data);
|
||||||
|
// Always start on the first page to show most recent queries
|
||||||
|
data["start"] = 0;
|
||||||
|
// Always start with empty search field
|
||||||
|
data["search"]["search"] = "";
|
||||||
|
// Apply loaded state to table
|
||||||
|
return data;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
showAlert('info');
|
|
||||||
$.ajax({
|
|
||||||
url: "scripts/pi-hole/php/groups.php",
|
|
||||||
method: "post",
|
|
||||||
dataType: 'json',
|
|
||||||
data: {"action": "add_client", "ip": ip, "token":token},
|
|
||||||
success: function(response) {
|
|
||||||
if (response.success) {
|
|
||||||
showAlert('success');
|
|
||||||
reload_client_suggestions();
|
|
||||||
table.ajax.reload();
|
|
||||||
}
|
|
||||||
else
|
|
||||||
showAlert('error', response.message);
|
|
||||||
},
|
|
||||||
error: function(jqXHR, exception) {
|
|
||||||
showAlert('error', "Error while adding new client");
|
|
||||||
console.log(exception);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function editClient()
|
function addClient() {
|
||||||
{
|
var ip = $("#select").val();
|
||||||
var tr = $(this).closest("tr");
|
if (ip === "custom") {
|
||||||
var id = tr.find("#id").val();
|
ip = $("#ip-custom").val();
|
||||||
var groups = tr.find("#multiselect").val();
|
}
|
||||||
|
|
||||||
showAlert('info');
|
showAlert("info");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "scripts/pi-hole/php/groups.php",
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
method: "post",
|
method: "post",
|
||||||
dataType: 'json',
|
dataType: "json",
|
||||||
data: {"action": "edit_client", "id": id, "groups": groups, "token":token},
|
data: { action: "add_client", ip: ip, token: token },
|
||||||
success: function(response) {
|
success: function(response) {
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
showAlert('success');
|
showAlert("success");
|
||||||
table.ajax.reload();
|
reload_client_suggestions();
|
||||||
}
|
table.ajax.reload();
|
||||||
else
|
} else showAlert("error", response.message);
|
||||||
showAlert('error', response.message);
|
},
|
||||||
},
|
error: function(jqXHR, exception) {
|
||||||
error: function(jqXHR, exception) {
|
showAlert("error", "Error while adding new client");
|
||||||
showAlert('error', "Error while editing client with ID "+id);
|
console.log(exception);
|
||||||
console.log(exception);
|
}
|
||||||
}
|
});
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteClient()
|
function editClient() {
|
||||||
{
|
var tr = $(this).closest("tr");
|
||||||
var id = $(this).attr("data-id");
|
var id = tr.find("#id").val();
|
||||||
|
var groups = tr.find("#multiselect").val();
|
||||||
|
|
||||||
showAlert('info');
|
showAlert("info");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "scripts/pi-hole/php/groups.php",
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
method: "post",
|
method: "post",
|
||||||
dataType: 'json',
|
dataType: "json",
|
||||||
data: {"action": "delete_client", "id": id, "token":token},
|
data: { action: "edit_client", id: id, groups: groups, token: token },
|
||||||
success: function(response) {
|
success: function(response) {
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
showAlert('success');
|
showAlert("success");
|
||||||
reload_client_suggestions();
|
table.ajax.reload();
|
||||||
table.ajax.reload();
|
} else showAlert("error", response.message);
|
||||||
}
|
},
|
||||||
else
|
error: function(jqXHR, exception) {
|
||||||
showAlert('error', response.message);
|
showAlert("error", "Error while editing client with ID " + id);
|
||||||
},
|
console.log(exception);
|
||||||
error: function(jqXHR, exception) {
|
}
|
||||||
showAlert('error', "Error while deleting client with ID "+id);
|
});
|
||||||
console.log(exception);
|
}
|
||||||
}
|
|
||||||
});
|
function deleteClient() {
|
||||||
|
var id = $(this).attr("data-id");
|
||||||
|
|
||||||
|
showAlert("info");
|
||||||
|
$.ajax({
|
||||||
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
|
method: "post",
|
||||||
|
dataType: "json",
|
||||||
|
data: { action: "delete_client", id: id, token: token },
|
||||||
|
success: function(response) {
|
||||||
|
if (response.success) {
|
||||||
|
showAlert("success");
|
||||||
|
reload_client_suggestions();
|
||||||
|
table.ajax.reload();
|
||||||
|
} else showAlert("error", response.message);
|
||||||
|
},
|
||||||
|
error: function(jqXHR, exception) {
|
||||||
|
showAlert("error", "Error while deleting client with ID " + id);
|
||||||
|
console.log(exception);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,227 +2,288 @@ var table;
|
|||||||
var groups = [];
|
var groups = [];
|
||||||
const token = $("#token").html();
|
const token = $("#token").html();
|
||||||
|
|
||||||
function showAlert(type, message)
|
function showAlert(type, message) {
|
||||||
{
|
var alertElement = null;
|
||||||
var alertElement = null;
|
var messageElement = null;
|
||||||
var messageElement = null;
|
|
||||||
|
|
||||||
switch (type)
|
switch (type) {
|
||||||
{
|
case "info":
|
||||||
case 'info': alertElement = $('#alInfo'); break;
|
alertElement = $("#alInfo");
|
||||||
case 'success': alertElement = $('#alSuccess'); break;
|
break;
|
||||||
case 'warning': alertElement = $('#alWarning'); messageElement = $('#warn'); break;
|
case "success":
|
||||||
case 'error': alertElement = $('#alFailure'); messageElement = $('#err'); break;
|
alertElement = $("#alSuccess");
|
||||||
default: return;
|
break;
|
||||||
}
|
case "warning":
|
||||||
|
alertElement = $("#alWarning");
|
||||||
|
messageElement = $("#warn");
|
||||||
|
break;
|
||||||
|
case "error":
|
||||||
|
alertElement = $("#alFailure");
|
||||||
|
messageElement = $("#err");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (messageElement != null)
|
if (messageElement != null) messageElement.html(message);
|
||||||
messageElement.html(message);
|
|
||||||
|
|
||||||
alertElement.fadeIn(200);
|
alertElement.fadeIn(200);
|
||||||
alertElement.delay(8000).fadeOut(2000);
|
alertElement.delay(8000).fadeOut(2000);
|
||||||
}
|
}
|
||||||
|
|
||||||
function get_groups()
|
function get_groups() {
|
||||||
{
|
$.post(
|
||||||
$.post("scripts/pi-hole/php/groups.php", { 'action': 'get_groups', "token": token },
|
"scripts/pi-hole/php/groups.php",
|
||||||
|
{ action: "get_groups", token: token },
|
||||||
function(data) {
|
function(data) {
|
||||||
groups = data.data;
|
groups = data.data;
|
||||||
initTable();
|
initTable();
|
||||||
}, "json");
|
},
|
||||||
|
"json"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
$.fn.redraw = function(){
|
$.fn.redraw = function() {
|
||||||
return $(this).each(function(){
|
return $(this).each(function() {
|
||||||
var redraw = this.offsetHeight;
|
var redraw = this.offsetHeight;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
function datetime(date)
|
function datetime(date) {
|
||||||
{
|
return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
|
||||||
return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
$("#btnAdd").on("click", addDomain);
|
||||||
|
|
||||||
$('#btnAdd').on('click', addDomain);
|
get_groups();
|
||||||
|
|
||||||
get_groups();
|
$("#select").on("change", function() {
|
||||||
|
$("#ip-custom").val("");
|
||||||
$('#select').on('change', function() {
|
$("#ip-custom").prop(
|
||||||
$("#ip-custom").val("");
|
"disabled",
|
||||||
$("#ip-custom").prop( "disabled" , $( "#select option:selected" ).val() !== "custom");
|
$("#select option:selected").val() !== "custom"
|
||||||
});
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function initTable()
|
function initTable() {
|
||||||
{
|
table = $("#domainsTable").DataTable({
|
||||||
table = $("#domainsTable").DataTable( {
|
ajax: {
|
||||||
"ajax": {
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
"url": "scripts/pi-hole/php/groups.php",
|
data: { action: "get_domains", token: token },
|
||||||
"data": {"action": "get_domains", "token": token},
|
type: "POST"
|
||||||
"type": "POST"
|
},
|
||||||
},
|
order: [[1, "asc"]],
|
||||||
order: [[ 1, 'asc' ]],
|
columns: [
|
||||||
columns: [
|
{ data: "domain" },
|
||||||
{ data: "domain" },
|
{ data: "type", searchable: false },
|
||||||
{ data: "type", searchable: false },
|
{ data: "enabled", searchable: false },
|
||||||
{ data: "enabled", searchable: false },
|
{ data: "comment" },
|
||||||
{ data: "comment" },
|
{ data: "groups", searchable: false },
|
||||||
{ data: "groups", searchable: false },
|
{ data: null, width: "80px", orderable: false }
|
||||||
{ data: null, width: "80px", orderable: false }
|
],
|
||||||
],
|
drawCallback: function(settings) {
|
||||||
"drawCallback": function( settings ) {
|
$(".editDomain").on("click", editDomain);
|
||||||
$('.editDomain').on('click', editDomain);
|
$(".deleteDomain").on("click", deleteDomain);
|
||||||
$('.deleteDomain').on('click', deleteDomain);
|
},
|
||||||
},
|
rowCallback: function(row, data) {
|
||||||
"rowCallback": function( row, data ) {
|
const tooltip =
|
||||||
const tooltip = 'Added: '+datetime(data["date_added"])+'\nLast modified: '+datetime(data["date_modified"]);
|
"Added: " +
|
||||||
$('td:eq(0)', row).html( '<code title="'+tooltip+'">'+data["domain"]+'</code>' );
|
datetime(data["date_added"]) +
|
||||||
|
"\nLast modified: " +
|
||||||
|
datetime(data["date_modified"]);
|
||||||
|
$("td:eq(0)", row).html(
|
||||||
|
'<code title="' + tooltip + '">' + data["domain"] + "</code>"
|
||||||
|
);
|
||||||
|
|
||||||
$('td:eq(1)', row).html( '<select id="type" class="form-control">'+
|
$("td:eq(1)", row).html(
|
||||||
'<option value="0"'+(data["type"]===0?' selected':'')+'>Exact whitelist</option>'+
|
'<select id="type" class="form-control">' +
|
||||||
'<option value="1"'+(data["type"]===1?' selected':'')+'>Exact blacklist</option>'+
|
'<option value="0"' +
|
||||||
'<option value="2"'+(data["type"]===2?' selected':'')+'>Regex whitelist</option>'+
|
(data["type"] === 0 ? " selected" : "") +
|
||||||
'<option value="3"'+(data["type"]===3?' selected':'')+'>Regex blacklist</option>'+
|
">Exact whitelist</option>" +
|
||||||
'</select>' );
|
'<option value="1"' +
|
||||||
|
(data["type"] === 1 ? " selected" : "") +
|
||||||
|
">Exact blacklist</option>" +
|
||||||
|
'<option value="2"' +
|
||||||
|
(data["type"] === 2 ? " selected" : "") +
|
||||||
|
">Regex whitelist</option>" +
|
||||||
|
'<option value="3"' +
|
||||||
|
(data["type"] === 3 ? " selected" : "") +
|
||||||
|
">Regex blacklist</option>" +
|
||||||
|
"</select>"
|
||||||
|
);
|
||||||
|
|
||||||
const disabled = data["enabled"] === 0;
|
const disabled = data["enabled"] === 0;
|
||||||
$('td:eq(2)', row).html( '<input type="checkbox" id="status"'+(disabled?'':' checked')+'>');
|
$("td:eq(2)", row).html(
|
||||||
$('#status', row).bootstrapToggle({ on: 'Enabled', off: 'Disabled', size: 'small', onstyle: "success", width: "80px" });
|
'<input type="checkbox" id="status"' +
|
||||||
|
(disabled ? "" : " checked") +
|
||||||
|
">"
|
||||||
|
);
|
||||||
|
$("#status", row).bootstrapToggle({
|
||||||
|
on: "Enabled",
|
||||||
|
off: "Disabled",
|
||||||
|
size: "small",
|
||||||
|
onstyle: "success",
|
||||||
|
width: "80px"
|
||||||
|
});
|
||||||
|
|
||||||
$('td:eq(3)', row).html( '<input id="comment" class="form-control"><input id="id" type="hidden" value="'+data["id"]+'">' );
|
$("td:eq(3)", row).html(
|
||||||
$('#comment', row).val(data["comment"]);
|
'<input id="comment" class="form-control"><input id="id" type="hidden" value="' +
|
||||||
|
data["id"] +
|
||||||
|
'">'
|
||||||
|
);
|
||||||
|
$("#comment", row).val(data["comment"]);
|
||||||
|
|
||||||
$('td:eq(4)', row).empty();
|
$("td:eq(4)", row).empty();
|
||||||
$('td:eq(4)', row).append( '<select id="multiselect" multiple="multiple"></select>' );
|
$("td:eq(4)", row).append(
|
||||||
var sel = $('#multiselect', row);
|
'<select id="multiselect" multiple="multiple"></select>'
|
||||||
// Add all known groups
|
);
|
||||||
for (var i = 0; i < groups.length; i++) {
|
var sel = $("#multiselect", row);
|
||||||
var extra = 'ID ' + groups[i].id;
|
// Add all known groups
|
||||||
if(!groups[i].enabled)
|
for (var i = 0; i < groups.length; i++) {
|
||||||
{
|
var extra = "ID " + groups[i].id;
|
||||||
extra += ', disabled';
|
if (!groups[i].enabled) {
|
||||||
}
|
extra += ", disabled";
|
||||||
sel.append($('<option />').val(groups[i].id).text(groups[i].name + ' (' + extra + ')'));
|
|
||||||
sel.redraw();
|
|
||||||
}
|
|
||||||
// Select assigned groups
|
|
||||||
sel.val(data.groups);
|
|
||||||
// Initialize multiselect
|
|
||||||
sel.multiselect({ includeSelectAllOption: true });
|
|
||||||
|
|
||||||
let button = "<button class=\"btn btn-success btn-xs editDomain\" type=\"button\" data-id='"+data["id"]+"'>" +
|
|
||||||
"<span class=\"glyphicon glyphicon-pencil\"></span>" +
|
|
||||||
"</button>" +
|
|
||||||
" " +
|
|
||||||
"<button class=\"btn btn-danger btn-xs deleteDomain\" type=\"button\" data-id='"+data["id"]+"'>" +
|
|
||||||
"<span class=\"glyphicon glyphicon-trash\"></span>" +
|
|
||||||
"</button>";
|
|
||||||
$('td:eq(5)', row).html( button );
|
|
||||||
},
|
|
||||||
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
|
|
||||||
"stateSave": true,
|
|
||||||
stateSaveCallback: function(settings, data) {
|
|
||||||
// Store current state in client's local storage area
|
|
||||||
localStorage.setItem("groups-domains-table", JSON.stringify(data));
|
|
||||||
},
|
|
||||||
stateLoadCallback: function(settings) {
|
|
||||||
// Receive previous state from client's local storage area
|
|
||||||
var data = localStorage.getItem("groups-domains-table");
|
|
||||||
// Return if not available
|
|
||||||
if(data === null){ return null; }
|
|
||||||
data = JSON.parse(data);
|
|
||||||
// Always start on the first page to show most recent queries
|
|
||||||
data["start"] = 0;
|
|
||||||
// Always start with empty search field
|
|
||||||
data["search"]["search"] = "";
|
|
||||||
// Apply loaded state to table
|
|
||||||
return data;
|
|
||||||
}
|
}
|
||||||
});
|
sel.append(
|
||||||
|
$("<option />")
|
||||||
|
.val(groups[i].id)
|
||||||
|
.text(groups[i].name + " (" + extra + ")")
|
||||||
|
);
|
||||||
|
sel.redraw();
|
||||||
|
}
|
||||||
|
// Select assigned groups
|
||||||
|
sel.val(data.groups);
|
||||||
|
// Initialize multiselect
|
||||||
|
sel.multiselect({ includeSelectAllOption: true });
|
||||||
|
|
||||||
|
let button =
|
||||||
|
'<button class="btn btn-success btn-xs editDomain" type="button" data-id=\'' +
|
||||||
|
data["id"] +
|
||||||
|
"'>" +
|
||||||
|
'<span class="glyphicon glyphicon-pencil"></span>' +
|
||||||
|
"</button>" +
|
||||||
|
" " +
|
||||||
|
'<button class="btn btn-danger btn-xs deleteDomain" type="button" data-id=\'' +
|
||||||
|
data["id"] +
|
||||||
|
"'>" +
|
||||||
|
'<span class="glyphicon glyphicon-trash"></span>' +
|
||||||
|
"</button>";
|
||||||
|
$("td:eq(5)", row).html(button);
|
||||||
|
},
|
||||||
|
lengthMenu: [
|
||||||
|
[10, 25, 50, 100, -1],
|
||||||
|
[10, 25, 50, 100, "All"]
|
||||||
|
],
|
||||||
|
stateSave: true,
|
||||||
|
stateSaveCallback: function(settings, data) {
|
||||||
|
// Store current state in client's local storage area
|
||||||
|
localStorage.setItem("groups-domains-table", JSON.stringify(data));
|
||||||
|
},
|
||||||
|
stateLoadCallback: function(settings) {
|
||||||
|
// Receive previous state from client's local storage area
|
||||||
|
var data = localStorage.getItem("groups-domains-table");
|
||||||
|
// Return if not available
|
||||||
|
if (data === null) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
data = JSON.parse(data);
|
||||||
|
// Always start on the first page to show most recent queries
|
||||||
|
data["start"] = 0;
|
||||||
|
// Always start with empty search field
|
||||||
|
data["search"]["search"] = "";
|
||||||
|
// Apply loaded state to table
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function addDomain()
|
function addDomain() {
|
||||||
{
|
var domain = $("#domain").val();
|
||||||
var domain = $("#domain").val();
|
var type = $("#type").val();
|
||||||
var type = $("#type").val();
|
var comment = $("#comment").val();
|
||||||
var comment = $("#comment").val();
|
|
||||||
|
|
||||||
showAlert('info');
|
showAlert("info");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "scripts/pi-hole/php/groups.php",
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
method: "post",
|
method: "post",
|
||||||
dataType: 'json',
|
dataType: "json",
|
||||||
data: {"action": "add_domain", "domain": domain, "type": type, "comment": comment, "token":token},
|
data: {
|
||||||
success: function(response) {
|
action: "add_domain",
|
||||||
if (response.success) {
|
domain: domain,
|
||||||
showAlert('success');
|
type: type,
|
||||||
$("#domain").empty();
|
comment: comment,
|
||||||
$("#comment").empty();
|
token: token
|
||||||
table.ajax.reload();
|
},
|
||||||
}
|
success: function(response) {
|
||||||
else
|
if (response.success) {
|
||||||
showAlert('error', response.message);
|
showAlert("success");
|
||||||
},
|
$("#domain").empty();
|
||||||
error: function(jqXHR, exception) {
|
$("#comment").empty();
|
||||||
showAlert('error', "Error while adding new domain");
|
table.ajax.reload();
|
||||||
console.log(exception);
|
} else showAlert("error", response.message);
|
||||||
}
|
},
|
||||||
});
|
error: function(jqXHR, exception) {
|
||||||
|
showAlert("error", "Error while adding new domain");
|
||||||
|
console.log(exception);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function editDomain()
|
function editDomain() {
|
||||||
{
|
var tr = $(this).closest("tr");
|
||||||
var tr = $(this).closest("tr");
|
var id = tr.find("#id").val();
|
||||||
var id = tr.find("#id").val();
|
var type = tr.find("#type").val();
|
||||||
var type = tr.find("#type").val();
|
var status = tr.find("#status").is(":checked") ? 1 : 0;
|
||||||
var status = tr.find("#status").is(":checked") ? 1 : 0;
|
var comment = tr.find("#comment").val();
|
||||||
var comment = tr.find("#comment").val();
|
var groups = tr.find("#multiselect").val();
|
||||||
var groups = tr.find("#multiselect").val();
|
|
||||||
|
|
||||||
showAlert('info');
|
showAlert("info");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "scripts/pi-hole/php/groups.php",
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
method: "post",
|
method: "post",
|
||||||
dataType: 'json',
|
dataType: "json",
|
||||||
data: {"action": "edit_domain", "id": id, "type": type, "comment": comment, "status": status, "groups": groups, "token":token},
|
data: {
|
||||||
success: function(response) {
|
action: "edit_domain",
|
||||||
if (response.success) {
|
id: id,
|
||||||
showAlert('success');
|
type: type,
|
||||||
table.ajax.reload();
|
comment: comment,
|
||||||
}
|
status: status,
|
||||||
else
|
groups: groups,
|
||||||
showAlert('error', response.message);
|
token: token
|
||||||
},
|
},
|
||||||
error: function(jqXHR, exception) {
|
success: function(response) {
|
||||||
showAlert('error', "Error while editing domain with ID "+id);
|
if (response.success) {
|
||||||
console.log(exception);
|
showAlert("success");
|
||||||
}
|
table.ajax.reload();
|
||||||
});
|
} else showAlert("error", response.message);
|
||||||
|
},
|
||||||
|
error: function(jqXHR, exception) {
|
||||||
|
showAlert("error", "Error while editing domain with ID " + id);
|
||||||
|
console.log(exception);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteDomain()
|
function deleteDomain() {
|
||||||
{
|
var id = $(this).attr("data-id");
|
||||||
var id = $(this).attr("data-id");
|
|
||||||
|
|
||||||
showAlert('info');
|
showAlert("info");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "scripts/pi-hole/php/groups.php",
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
method: "post",
|
method: "post",
|
||||||
dataType: 'json',
|
dataType: "json",
|
||||||
data: {"action": "delete_domain", "id": id, "token":token},
|
data: { action: "delete_domain", id: id, token: token },
|
||||||
success: function(response) {
|
success: function(response) {
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
showAlert('success');
|
showAlert("success");
|
||||||
table.ajax.reload();
|
table.ajax.reload();
|
||||||
}
|
} else showAlert("error", response.message);
|
||||||
else
|
},
|
||||||
showAlert('error', response.message);
|
error: function(jqXHR, exception) {
|
||||||
},
|
showAlert("error", "Error while deleting domain with ID " + id);
|
||||||
error: function(jqXHR, exception) {
|
console.log(exception);
|
||||||
showAlert('error', "Error while deleting domain with ID "+id);
|
}
|
||||||
console.log(exception);
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,175 +1,197 @@
|
|||||||
var table;
|
var table;
|
||||||
const token = $("#token").html();
|
const token = $("#token").html();
|
||||||
|
|
||||||
function showAlert(type, message)
|
function showAlert(type, message) {
|
||||||
{
|
var alertElement = null;
|
||||||
var alertElement = null;
|
var messageElement = null;
|
||||||
var messageElement = null;
|
|
||||||
|
|
||||||
switch (type)
|
switch (type) {
|
||||||
{
|
case "info":
|
||||||
case 'info': alertElement = $('#alInfo'); break;
|
alertElement = $("#alInfo");
|
||||||
case 'success': alertElement = $('#alSuccess'); break;
|
break;
|
||||||
case 'warning': alertElement = $('#alWarning'); messageElement = $('#warn'); break;
|
case "success":
|
||||||
case 'error': alertElement = $('#alFailure'); messageElement = $('#err'); break;
|
alertElement = $("#alSuccess");
|
||||||
default: return;
|
break;
|
||||||
}
|
case "warning":
|
||||||
|
alertElement = $("#alWarning");
|
||||||
|
messageElement = $("#warn");
|
||||||
|
break;
|
||||||
|
case "error":
|
||||||
|
alertElement = $("#alFailure");
|
||||||
|
messageElement = $("#err");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (messageElement != null)
|
if (messageElement != null) messageElement.html(message);
|
||||||
messageElement.html(message);
|
|
||||||
|
|
||||||
alertElement.fadeIn(200);
|
alertElement.fadeIn(200);
|
||||||
alertElement.delay(8000).fadeOut(2000);
|
alertElement.delay(8000).fadeOut(2000);
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
$("#btnAdd").on("click", addGroup);
|
||||||
|
|
||||||
$('#btnAdd').on('click', addGroup);
|
table = $("#groupsTable").DataTable({
|
||||||
|
ajax: {
|
||||||
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
|
data: { action: "get_groups", token: token },
|
||||||
|
type: "POST"
|
||||||
|
},
|
||||||
|
order: [[1, "asc"]],
|
||||||
|
columns: [
|
||||||
|
{ data: "id", width: "60px" },
|
||||||
|
{ data: "enabled", searchable: false },
|
||||||
|
{ data: "name" },
|
||||||
|
{ data: "description" },
|
||||||
|
{ data: null, width: "60px", orderable: false }
|
||||||
|
],
|
||||||
|
drawCallback: function(settings) {
|
||||||
|
$(".deleteGroup").on("click", deleteGroup);
|
||||||
|
$(".editGroup").on("click", editGroup);
|
||||||
|
},
|
||||||
|
rowCallback: function(row, data) {
|
||||||
|
const disabled = data["enabled"] === 0;
|
||||||
|
$("td:eq(1)", row).html(
|
||||||
|
'<input type="checkbox" id="status"' +
|
||||||
|
(disabled ? "" : " checked") +
|
||||||
|
">"
|
||||||
|
);
|
||||||
|
$("#status", row).bootstrapToggle({
|
||||||
|
on: "Enabled",
|
||||||
|
off: "Disabled",
|
||||||
|
size: "small",
|
||||||
|
onstyle: "success",
|
||||||
|
width: "80px"
|
||||||
|
});
|
||||||
|
|
||||||
table = $("#groupsTable").DataTable( {
|
$("td:eq(2)", row).html('<input id="name" class="form-control">');
|
||||||
"ajax": {
|
$("#name", row).val(data["name"]);
|
||||||
"url": "scripts/pi-hole/php/groups.php",
|
|
||||||
"data": {"action": "get_groups", "token": token},
|
|
||||||
"type": "POST"
|
|
||||||
},
|
|
||||||
order: [[ 1, 'asc' ]],
|
|
||||||
columns: [
|
|
||||||
{ data: "id", width: "60px" },
|
|
||||||
{ data: "enabled", searchable: false },
|
|
||||||
{ data: "name" },
|
|
||||||
{ data: "description" },
|
|
||||||
{ data: null, width: "60px", orderable: false }
|
|
||||||
],
|
|
||||||
"drawCallback": function( settings ) {
|
|
||||||
$('.deleteGroup').on('click', deleteGroup);
|
|
||||||
$('.editGroup').on('click', editGroup);
|
|
||||||
},
|
|
||||||
"rowCallback": function( row, data ) {
|
|
||||||
const disabled = data["enabled"] === 0;
|
|
||||||
$('td:eq(1)', row).html( '<input type="checkbox" id="status"'+(disabled?'':' checked')+'>');
|
|
||||||
$('#status', row).bootstrapToggle({ on: 'Enabled', off: 'Disabled', size: 'small', onstyle: "success", width: "80px" });
|
|
||||||
|
|
||||||
$('td:eq(2)', row).html( '<input id="name" class="form-control">' );
|
$("td:eq(3)", row).html('<input id="desc" class="form-control">');
|
||||||
$('#name', row).val( data["name"] );
|
const desc = data["description"] !== null ? data["description"] : "";
|
||||||
|
$("#desc", row).val(desc);
|
||||||
|
|
||||||
$('td:eq(3)', row).html( '<input id="desc" class="form-control">' );
|
let button =
|
||||||
const desc = data["description"] !== null ? data["description"] : '';
|
'<button class="btn btn-success btn-xs editGroup" type="button" data-id=\'' +
|
||||||
$('#desc', row).val( desc );
|
data["id"] +
|
||||||
|
"'>" +
|
||||||
|
'<span class="glyphicon glyphicon-pencil"></span>' +
|
||||||
let button = "<button class=\"btn btn-success btn-xs editGroup\" type=\"button\" data-id='"+data["id"]+"'>" +
|
"</button>";
|
||||||
"<span class=\"glyphicon glyphicon-pencil\"></span>" +
|
if (data["id"] !== 0) {
|
||||||
"</button>";
|
button +=
|
||||||
if(data["id"] !== 0)
|
" " +
|
||||||
{
|
'<button class="btn btn-danger btn-xs deleteGroup" type="button" data-id=\'' +
|
||||||
button +=
|
data["id"] +
|
||||||
" " +
|
"'>" +
|
||||||
"<button class=\"btn btn-danger btn-xs deleteGroup\" type=\"button\" data-id='"+data["id"]+"'>" +
|
'<span class="glyphicon glyphicon-trash"></span>' +
|
||||||
"<span class=\"glyphicon glyphicon-trash\"></span>" +
|
"</button>";
|
||||||
"</button>";
|
}
|
||||||
}
|
$("td:eq(4)", row).html(button);
|
||||||
$('td:eq(4)', row).html( button );
|
},
|
||||||
},
|
lengthMenu: [
|
||||||
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
|
[10, 25, 50, 100, -1],
|
||||||
"stateSave": true,
|
[10, 25, 50, 100, "All"]
|
||||||
stateSaveCallback: function(settings, data) {
|
],
|
||||||
// Store current state in client's local storage area
|
stateSave: true,
|
||||||
localStorage.setItem("groups-table", JSON.stringify(data));
|
stateSaveCallback: function(settings, data) {
|
||||||
},
|
// Store current state in client's local storage area
|
||||||
stateLoadCallback: function(settings) {
|
localStorage.setItem("groups-table", JSON.stringify(data));
|
||||||
// Receive previous state from client's local storage area
|
},
|
||||||
var data = localStorage.getItem("groups-table");
|
stateLoadCallback: function(settings) {
|
||||||
// Return if not available
|
// Receive previous state from client's local storage area
|
||||||
if(data === null){ return null; }
|
var data = localStorage.getItem("groups-table");
|
||||||
data = JSON.parse(data);
|
// Return if not available
|
||||||
// Always start on the first page to show most recent queries
|
if (data === null) {
|
||||||
data["start"] = 0;
|
return null;
|
||||||
// Always start with empty search field
|
}
|
||||||
data["search"]["search"] = "";
|
data = JSON.parse(data);
|
||||||
// Apply loaded state to table
|
// Always start on the first page to show most recent queries
|
||||||
return data;
|
data["start"] = 0;
|
||||||
},
|
// Always start with empty search field
|
||||||
});
|
data["search"]["search"] = "";
|
||||||
|
// Apply loaded state to table
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function addGroup()
|
function addGroup() {
|
||||||
{
|
var name = $("#name").val();
|
||||||
var name = $("#name").val();
|
var desc = $("#desc").val();
|
||||||
var desc = $("#desc").val();
|
|
||||||
|
|
||||||
showAlert('info');
|
showAlert("info");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "scripts/pi-hole/php/groups.php",
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
method: "post",
|
method: "post",
|
||||||
dataType: 'json',
|
dataType: "json",
|
||||||
data: {"action": "add_group", "name": name, "desc": desc},
|
data: { action: "add_group", name: name, desc: desc },
|
||||||
success: function(response) {
|
success: function(response) {
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
showAlert('success');
|
showAlert("success");
|
||||||
$("#name").empty();
|
$("#name").empty();
|
||||||
$("#desc").empty();
|
$("#desc").empty();
|
||||||
table.ajax.reload();
|
table.ajax.reload();
|
||||||
}
|
} else showAlert("error", response.message);
|
||||||
else
|
},
|
||||||
showAlert('error', response.message);
|
error: function(jqXHR, exception) {
|
||||||
},
|
showAlert("error", "Error while adding new group");
|
||||||
error: function(jqXHR, exception) {
|
console.log(exception);
|
||||||
showAlert('error', "Error while adding new group");
|
}
|
||||||
console.log(exception);
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function editGroup()
|
function editGroup() {
|
||||||
{
|
var tr = $(this).closest("tr");
|
||||||
var tr = $(this).closest("tr");
|
var id = tr.find("td:eq(0)").html();
|
||||||
var id = tr.find("td:eq(0)").html();
|
var name = tr.find("#name").val();
|
||||||
var name = tr.find("#name").val();
|
var status = tr.find("#status").is(":checked") ? 1 : 0;
|
||||||
var status = tr.find("#status").is(":checked") ? 1 : 0;
|
var desc = tr.find("#desc").val();
|
||||||
var desc = tr.find("#desc").val();
|
|
||||||
|
|
||||||
showAlert('info');
|
showAlert("info");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "scripts/pi-hole/php/groups.php",
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
method: "post",
|
method: "post",
|
||||||
dataType: 'json',
|
dataType: "json",
|
||||||
data: {"action": "edit_group", "id": id, "name": name, "desc": desc, "status": status},
|
data: {
|
||||||
success: function(response) {
|
action: "edit_group",
|
||||||
if (response.success) {
|
id: id,
|
||||||
showAlert('success');
|
name: name,
|
||||||
table.ajax.reload();
|
desc: desc,
|
||||||
}
|
status: status
|
||||||
else
|
},
|
||||||
showAlert('error', response.message);
|
success: function(response) {
|
||||||
},
|
if (response.success) {
|
||||||
error: function(jqXHR, exception) {
|
showAlert("success");
|
||||||
showAlert('error', "Error while editing group with ID "+id);
|
table.ajax.reload();
|
||||||
console.log(exception);
|
} else showAlert("error", response.message);
|
||||||
}
|
},
|
||||||
});
|
error: function(jqXHR, exception) {
|
||||||
|
showAlert("error", "Error while editing group with ID " + id);
|
||||||
|
console.log(exception);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteGroup()
|
function deleteGroup() {
|
||||||
{
|
var id = $(this).attr("data-id");
|
||||||
var id = $(this).attr("data-id");
|
|
||||||
|
|
||||||
showAlert('info');
|
showAlert("info");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "scripts/pi-hole/php/groups.php",
|
url: "scripts/pi-hole/php/groups.php",
|
||||||
method: "post",
|
method: "post",
|
||||||
dataType: 'json',
|
dataType: "json",
|
||||||
data: {"action": "delete_group", "id": id},
|
data: { action: "delete_group", id: id },
|
||||||
success: function(response) {
|
success: function(response) {
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
showAlert('success');
|
showAlert("success");
|
||||||
table.ajax.reload();
|
table.ajax.reload();
|
||||||
}
|
} else showAlert("error", response.message);
|
||||||
else
|
},
|
||||||
showAlert('error', response.message);
|
error: function(jqXHR, exception) {
|
||||||
},
|
showAlert("error", "Error while deleting group with ID " + id);
|
||||||
error: function(jqXHR, exception) {
|
console.log(exception);
|
||||||
showAlert('error', "Error while deleting group with ID "+id);
|
}
|
||||||
console.log(exception);
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user