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