Pi-Hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2025-12-22 19:58:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use prettier to reformat JS files added in this PR.

Browse Source 
Signed-off-by: DL6ER <dl6er@dl6er.de>
This commit is contained in:
DL6ER
2019-12-14 20:06:26 +00:00
parent acf19c0eea
commit a75117a584
4 changed files with 878 additions and 712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
scripts/pi-hole/js/groups-adlists.js
View File

@@ -2,68 +2,79 @@ 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() { $("#select").on("change", function() {
$("#ip-custom").val(""); $("#ip-custom").val("");
$("#ip-custom").prop( "disabled" , $( "#select option:selected" ).val() !== "custom"); $("#ip-custom").prop(
"disabled",
$("#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 },
@@ -71,32 +82,57 @@ function initTable()
{ 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 = 'Added: '+datetime(data["date_added"])+'\nLast modified: '+datetime(data["date_modified"]); const tooltip =
$('td:eq(0)', row).html( '<code title="'+tooltip+'">'+data["address"]+'</code>' ); "Added: " +
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>'
);
var sel = $("#multiselect", row);
// Add all known groups // Add all known groups
for (var i = 0; i < groups.length; i++) { for (var i = 0; i < groups.length; i++) {
var extra = 'ID ' + groups[i].id; var extra = "ID " + groups[i].id;
if(!groups[i].enabled) if (!groups[i].enabled) {
{ extra += ", disabled";
extra += ', disabled';
} }
sel.append($('<option />').val(groups[i].id).text(groups[i].name + ' (' + extra + ')')); sel.append(
$("<option />")
.val(groups[i].id)
.text(groups[i].name + " (" + extra + ")")
);
sel.redraw(); sel.redraw();
} }
// Select assigned groups // Select assigned groups
@@ -104,17 +140,25 @@ function initTable()
// Initialize multiselect // Initialize multiselect
sel.multiselect({ includeSelectAllOption: true }); sel.multiselect({ includeSelectAllOption: true });
let button = "<button class=\"btn btn-success btn-xs editAdlist\" type=\"button\" data-id='"+data["id"]+"'>" + let button =
"<span class=\"glyphicon glyphicon-pencil\"></span>" + '<button class="btn btn-success btn-xs editAdlist" type="button" data-id=\'' +
data["id"] +
"'>" +
'<span class="glyphicon glyphicon-pencil"></span>' +
"</button>" + "</button>" +
" &nbsp;" + " &nbsp;" +
"<button class=\"btn btn-danger btn-xs deleteAdlist\" type=\"button\" data-id='"+data["id"]+"'>" + '<button class="btn btn-danger btn-xs deleteAdlist" type="button" data-id=\'' +
"<span class=\"glyphicon glyphicon-trash\"></span>" + data["id"] +
"'>" +
'<span class="glyphicon glyphicon-trash"></span>' +
"</button>"; "</button>";
$('td:eq(4)', row).html( button ); $("td:eq(4)", row).html(button);
}, },
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], lengthMenu: [
"stateSave": true, [10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
stateSave: true,
stateSaveCallback: function(settings, data) { stateSaveCallback: function(settings, data) {
// Store current state in client's local storage area // Store current state in client's local storage area
localStorage.setItem("groups-adlists-table", JSON.stringify(data)); localStorage.setItem("groups-adlists-table", JSON.stringify(data));
@@ -123,7 +167,9 @@ function initTable()
// Receive previous state from client's local storage area // Receive previous state from client's local storage area
var data = localStorage.getItem("groups-adlists-table"); var data = localStorage.getItem("groups-adlists-table");
// Return if not available // Return if not available
if(data === null){ return null; } if (data === null) {
return null;
}
data = JSON.parse(data); data = JSON.parse(data);
// Always start on the first page to show most recent queries // Always start on the first page to show most recent queries
data["start"] = 0; data["start"] = 0;
@@ -135,83 +181,86 @@ function initTable()
}); });
} }
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: {
action: "add_adlist",
address: address,
comment: comment,
token: token
},
success: function(response) { success: function(response) {
if (response.success) { if (response.success) {
showAlert('success'); showAlert("success");
$("#address").empty(); $("#address").empty();
$("#comment").empty(); $("#comment").empty();
table.ajax.reload(); table.ajax.reload();
} } else showAlert("error", response.message);
else
showAlert('error', response.message);
}, },
error: function(jqXHR, exception) { error: function(jqXHR, exception) {
showAlert('error', "Error while adding new adlist"); showAlert("error", "Error while adding new adlist");
console.log(exception); 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: {
action: "edit_adlist",
id: id,
comment: comment,
status: status,
groups: groups,
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) { error: function(jqXHR, exception) {
showAlert('error', "Error while editing adlist with ID "+id); showAlert("error", "Error while editing adlist with ID " + id);
console.log(exception); 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) { error: function(jqXHR, exception) {
showAlert('error', "Error while deleting adlist with ID "+id); showAlert("error", "Error while deleting adlist with ID " + id);
console.log(exception); console.log(exception);
} }
}); });

210
scripts/pi-hole/js/groups-clients.js
View File

@@ -2,100 +2,134 @@ 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 />")
.val(data[i])
.text(data[i])
);
} }
sel.append($('<option />').val("custom").text("Custom, specified on the right")); sel.append(
}, "json"); $("<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(); reload_client_suggestions();
get_groups(); get_groups();
$('#select').on('change', function() { $("#select").on("change", function() {
$("#ip-custom").val(""); $("#ip-custom").val("");
$("#ip-custom").prop( "disabled" , $( "#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( '<code>'+data["ip"]+'</code><input id="id" type="hidden" value="'+data["id"]+'">' ); $("td:eq(0)", row).html(
"<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>'
);
var sel = $("#multiselect", row);
// Add all known groups // Add all known groups
for (var i = 0; i < groups.length; i++) { for (var i = 0; i < groups.length; i++) {
var extra = 'ID ' + groups[i].id; var extra = "ID " + groups[i].id;
if(!groups[i].enabled) if (!groups[i].enabled) {
{ extra += ", disabled";
extra += ', disabled';
} }
sel.append($('<option />').val(groups[i].id).text(groups[i].name + ' (' + extra + ')')); sel.append(
$("<option />")
.val(groups[i].id)
.text(groups[i].name + " (" + extra + ")")
);
sel.redraw(); sel.redraw();
} }
// Select assigned groups // Select assigned groups
@@ -103,17 +137,25 @@ function initTable()
// Initialize multiselect // Initialize multiselect
sel.multiselect({ includeSelectAllOption: true }); sel.multiselect({ includeSelectAllOption: true });
let button = "<button class=\"btn btn-success btn-xs editClient\" type=\"button\" data-id='"+data["id"]+"'>" + let button =
"<span class=\"glyphicon glyphicon-pencil\"></span>" + '<button class="btn btn-success btn-xs editClient" type="button" data-id=\'' +
data["id"] +
"'>" +
'<span class="glyphicon glyphicon-pencil"></span>' +
"</button>" + "</button>" +
" &nbsp;" + " &nbsp;" +
"<button class=\"btn btn-danger btn-xs deleteClient\" type=\"button\" data-id='"+data["id"]+"'>" + '<button class="btn btn-danger btn-xs deleteClient" type="button" data-id=\'' +
"<span class=\"glyphicon glyphicon-trash\"></span>" + data["id"] +
"'>" +
'<span class="glyphicon glyphicon-trash"></span>' +
"</button>"; "</button>";
$('td:eq(2)', row).html( button ); $("td:eq(2)", row).html(button);
}, },
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], lengthMenu: [
"stateSave": true, [10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
stateSave: true,
stateSaveCallback: function(settings, data) { stateSaveCallback: function(settings, data) {
// Store current state in client's local storage area // Store current state in client's local storage area
localStorage.setItem("groups-clients-table", JSON.stringify(data)); localStorage.setItem("groups-clients-table", JSON.stringify(data));
@@ -122,7 +164,9 @@ function initTable()
// Receive previous state from client's local storage area // Receive previous state from client's local storage area
var data = localStorage.getItem("groups-clients-table"); var data = localStorage.getItem("groups-clients-table");
// Return if not available // Return if not available
if(data === null){ return null; } if (data === null) {
return null;
}
data = JSON.parse(data); data = JSON.parse(data);
// Always start on the first page to show most recent queries // Always start on the first page to show most recent queries
data["start"] = 0; data["start"] = 0;
@@ -134,84 +178,74 @@ function initTable()
}); });
} }
function addClient() function addClient() {
{
var ip = $("#select").val(); var ip = $("#select").val();
if(ip === "custom") if (ip === "custom") {
{
ip = $("#ip-custom").val(); ip = $("#ip-custom").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_client", "ip": ip, "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");
reload_client_suggestions(); reload_client_suggestions();
table.ajax.reload(); table.ajax.reload();
} } else showAlert("error", response.message);
else
showAlert('error', response.message);
}, },
error: function(jqXHR, exception) { error: function(jqXHR, exception) {
showAlert('error', "Error while adding new client"); showAlert("error", "Error while adding new client");
console.log(exception); console.log(exception);
} }
}); });
} }
function editClient() function editClient() {
{
var tr = $(this).closest("tr"); var tr = $(this).closest("tr");
var id = tr.find("#id").val(); var id = tr.find("#id").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_client", "id": id, "groups": groups, "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");
table.ajax.reload(); table.ajax.reload();
} } else showAlert("error", response.message);
else
showAlert('error', response.message);
}, },
error: function(jqXHR, exception) { error: function(jqXHR, exception) {
showAlert('error', "Error while editing client with ID "+id); showAlert("error", "Error while editing client with ID " + id);
console.log(exception); console.log(exception);
} }
}); });
} }
function deleteClient() function deleteClient() {
{
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_client", "id": id, "token":token}, data: { action: "delete_client", id: id, token: token },
success: function(response) { success: function(response) {
if (response.success) { if (response.success) {
showAlert('success'); showAlert("success");
reload_client_suggestions(); reload_client_suggestions();
table.ajax.reload(); table.ajax.reload();
} } else showAlert("error", response.message);
else
showAlert('error', response.message);
}, },
error: function(jqXHR, exception) { error: function(jqXHR, exception) {
showAlert('error', "Error while deleting client with ID "+id); showAlert("error", "Error while deleting client with ID " + id);
console.log(exception); console.log(exception);
} }
}); });

247
scripts/pi-hole/js/groups-domains.js
View File

@@ -2,68 +2,79 @@ 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() { $("#select").on("change", function() {
$("#ip-custom").val(""); $("#ip-custom").val("");
$("#ip-custom").prop( "disabled" , $( "#select option:selected" ).val() !== "custom"); $("#ip-custom").prop(
"disabled",
$("#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 },
@@ -72,39 +83,74 @@ function initTable()
{ 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 = 'Added: '+datetime(data["date_added"])+'\nLast modified: '+datetime(data["date_modified"]); const tooltip =
$('td:eq(0)', row).html( '<code title="'+tooltip+'">'+data["domain"]+'</code>' ); "Added: " +
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>'
);
var sel = $("#multiselect", row);
// Add all known groups // Add all known groups
for (var i = 0; i < groups.length; i++) { for (var i = 0; i < groups.length; i++) {
var extra = 'ID ' + groups[i].id; var extra = "ID " + groups[i].id;
if(!groups[i].enabled) if (!groups[i].enabled) {
{ extra += ", disabled";
extra += ', disabled';
} }
sel.append($('<option />').val(groups[i].id).text(groups[i].name + ' (' + extra + ')')); sel.append(
$("<option />")
.val(groups[i].id)
.text(groups[i].name + " (" + extra + ")")
);
sel.redraw(); sel.redraw();
} }
// Select assigned groups // Select assigned groups
@@ -112,17 +158,25 @@ function initTable()
// Initialize multiselect // Initialize multiselect
sel.multiselect({ includeSelectAllOption: true }); sel.multiselect({ includeSelectAllOption: true });
let button = "<button class=\"btn btn-success btn-xs editDomain\" type=\"button\" data-id='"+data["id"]+"'>" + let button =
"<span class=\"glyphicon glyphicon-pencil\"></span>" + '<button class="btn btn-success btn-xs editDomain" type="button" data-id=\'' +
data["id"] +
"'>" +
'<span class="glyphicon glyphicon-pencil"></span>' +
"</button>" + "</button>" +
" &nbsp;" + " &nbsp;" +
"<button class=\"btn btn-danger btn-xs deleteDomain\" type=\"button\" data-id='"+data["id"]+"'>" + '<button class="btn btn-danger btn-xs deleteDomain" type="button" data-id=\'' +
"<span class=\"glyphicon glyphicon-trash\"></span>" + data["id"] +
"'>" +
'<span class="glyphicon glyphicon-trash"></span>' +
"</button>"; "</button>";
$('td:eq(5)', row).html( button ); $("td:eq(5)", row).html(button);
}, },
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], lengthMenu: [
"stateSave": true, [10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
stateSave: true,
stateSaveCallback: function(settings, data) { stateSaveCallback: function(settings, data) {
// Store current state in client's local storage area // Store current state in client's local storage area
localStorage.setItem("groups-domains-table", JSON.stringify(data)); localStorage.setItem("groups-domains-table", JSON.stringify(data));
@@ -131,7 +185,9 @@ function initTable()
// Receive previous state from client's local storage area // Receive previous state from client's local storage area
var data = localStorage.getItem("groups-domains-table"); var data = localStorage.getItem("groups-domains-table");
// Return if not available // Return if not available
if(data === null){ return null; } if (data === null) {
return null;
}
data = JSON.parse(data); data = JSON.parse(data);
// Always start on the first page to show most recent queries // Always start on the first page to show most recent queries
data["start"] = 0; data["start"] = 0;
@@ -143,37 +199,39 @@ function initTable()
}); });
} }
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: {
action: "add_domain",
domain: domain,
type: type,
comment: comment,
token: token
},
success: function(response) { success: function(response) {
if (response.success) { if (response.success) {
showAlert('success'); showAlert("success");
$("#domain").empty(); $("#domain").empty();
$("#comment").empty(); $("#comment").empty();
table.ajax.reload(); table.ajax.reload();
} } else showAlert("error", response.message);
else
showAlert('error', response.message);
}, },
error: function(jqXHR, exception) { error: function(jqXHR, exception) {
showAlert('error', "Error while adding new domain"); showAlert("error", "Error while adding new domain");
console.log(exception); 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();
@@ -181,47 +239,50 @@ function editDomain()
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: {
action: "edit_domain",
id: id,
type: type,
comment: comment,
status: status,
groups: groups,
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) { error: function(jqXHR, exception) {
showAlert('error', "Error while editing domain with ID "+id); showAlert("error", "Error while editing domain with ID " + id);
console.log(exception); 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) { error: function(jqXHR, exception) {
showAlert('error', "Error while deleting domain with ID "+id); showAlert("error", "Error while deleting domain with ID " + id);
console.log(exception); console.log(exception);
} }
}); });

166
scripts/pi-hole/js/groups.js
View File

@@ -1,38 +1,45 @@
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: {
table = $("#groupsTable").DataTable( { url: "scripts/pi-hole/php/groups.php",
"ajax": { data: { action: "get_groups", token: token },
"url": "scripts/pi-hole/php/groups.php", type: "POST"
"data": {"action": "get_groups", "token": token},
"type": "POST"
}, },
order: [[ 1, 'asc' ]], order: [[1, "asc"]],
columns: [ columns: [
{ data: "id", width: "60px" }, { data: "id", width: "60px" },
{ data: "enabled", searchable: false }, { data: "enabled", searchable: false },
@@ -40,38 +47,54 @@ $(document).ready(function() {
{ data: "description" }, { data: "description" },
{ data: null, width: "60px", orderable: false } { data: null, width: "60px", orderable: false }
], ],
"drawCallback": function( settings ) { drawCallback: function(settings) {
$('.deleteGroup').on('click', deleteGroup); $(".deleteGroup").on("click", deleteGroup);
$('.editGroup').on('click', editGroup); $(".editGroup").on("click", editGroup);
}, },
"rowCallback": function( row, data ) { rowCallback: function(row, data) {
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="name" class="form-control">' ); $("td:eq(2)", row).html('<input id="name" class="form-control">');
$('#name', row).val( data["name"] ); $("#name", row).val(data["name"]);
$('td:eq(3)', row).html( '<input id="desc" class="form-control">' ); $("td:eq(3)", row).html('<input id="desc" class="form-control">');
const desc = data["description"] !== null ? data["description"] : ''; const desc = data["description"] !== null ? data["description"] : "";
$('#desc', row).val( desc ); $("#desc", row).val(desc);
let button =
let button = "<button class=\"btn btn-success btn-xs editGroup\" type=\"button\" data-id='"+data["id"]+"'>" + '<button class="btn btn-success btn-xs editGroup" type="button" data-id=\'' +
"<span class=\"glyphicon glyphicon-pencil\"></span>" + data["id"] +
"'>" +
'<span class="glyphicon glyphicon-pencil"></span>' +
"</button>"; "</button>";
if(data["id"] !== 0) if (data["id"] !== 0) {
{
button += button +=
" &nbsp;" + " &nbsp;" +
"<button class=\"btn btn-danger btn-xs deleteGroup\" type=\"button\" data-id='"+data["id"]+"'>" + '<button class="btn btn-danger btn-xs deleteGroup" type="button" data-id=\'' +
"<span class=\"glyphicon glyphicon-trash\"></span>" + data["id"] +
"'>" +
'<span class="glyphicon glyphicon-trash"></span>' +
"</button>"; "</button>";
} }
$('td:eq(4)', row).html( button ); $("td:eq(4)", row).html(button);
}, },
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], lengthMenu: [
"stateSave": true, [10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
stateSave: true,
stateSaveCallback: function(settings, data) { stateSaveCallback: function(settings, data) {
// Store current state in client's local storage area // Store current state in client's local storage area
localStorage.setItem("groups-table", JSON.stringify(data)); localStorage.setItem("groups-table", JSON.stringify(data));
@@ -80,7 +103,9 @@ $(document).ready(function() {
// Receive previous state from client's local storage area // Receive previous state from client's local storage area
var data = localStorage.getItem("groups-table"); var data = localStorage.getItem("groups-table");
// Return if not available // Return if not available
if(data === null){ return null; } if (data === null) {
return null;
}
data = JSON.parse(data); data = JSON.parse(data);
// Always start on the first page to show most recent queries // Always start on the first page to show most recent queries
data["start"] = 0; data["start"] = 0;
@@ -88,87 +113,84 @@ $(document).ready(function() {
data["search"]["search"] = ""; data["search"]["search"] = "";
// Apply loaded state to table // Apply loaded state to table
return data; 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) { error: function(jqXHR, exception) {
showAlert('error', "Error while adding new group"); showAlert("error", "Error while adding new group");
console.log(exception); 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: {
action: "edit_group",
id: id,
name: name,
desc: desc,
status: status
},
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) { error: function(jqXHR, exception) {
showAlert('error', "Error while editing group with ID "+id); showAlert("error", "Error while editing group with ID " + id);
console.log(exception); 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) { error: function(jqXHR, exception) {
showAlert('error', "Error while deleting group with ID "+id); showAlert("error", "Error while deleting group with ID " + id);
console.log(exception); console.log(exception);
} }
}); });