Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

tabs for new domain/regex input #1177

Merged
merged 1 commit into from Mar 8, 2020
Merged

tabs for new domain/regex input #1177

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

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
101 changes: 64 additions & 37 deletions groups-domains.php
View file
Open in desktop
Expand Up @@ -25,64 +25,91 @@
<div class="row">
<div class="col-md-12">
<div class="box" id="add-group">
<!-- /.box-header -->
<div class="box-header with-border">
<h3 class="box-title">
Add a new <?php echo $adjective; ?> domain or regex filter
</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-md-6">
<label for="ex1">Domain:</label>
<input id="new_domain" type="text" class="form-control" placeholder="Domain to be added">
</div>
<div class="col-md-6">
<label for="ex1">Regex:</label>
<input id="new_regex" type="text" class="form-control" placeholder="Regular expression to be added">
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a aria-expanded="true" href="#tab_domain" data-toggle="tab">Domain</a></li>
<li class=""><a aria-expanded="false" href="#tab_regex" data-toggle="tab">RegEx filter</a></li>
</ul>
<div class="tab-content">
<!-- Domain tab -->
<div id="tab_domain" class="tab-pane active in">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="new_domain">Domain:</label>
<div class="input-group">
<input id="new_domain" type="text" class="form-control active" placeholder="Domain to be added">
<span class="input-group-addon">
<input type="checkbox" id="wildcard_checkbox">
wildcard</span>
</span>
</div>
</div>
<div class="form-group">
<strong>wildcard:</span></strong> Check this box if you want to involve
all subdomains. The entered domain will be converted to a RegEx filter while adding.
</div>
</div>
<div class="col-md-6 form-group">
<label for="new_domain_comment">Comment:</label>
<input id="new_domain_comment" type="text" class="form-control" placeholder="Description (optional)">
</div>
</div>
</div>
<!-- RegEx tab -->
<div id="tab_regex" class="tab-pane">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="new_regex">Regular Expression:</label>
<input id="new_regex" type="text" class="form-control active" placeholder="RegEx to be added">
</div>
<div class="form-group">
<strong>Hint:</strong> Need help to write a proper RegEx rule? Have a look at our online
<a href="https://docs.pi-hole.net/ftldns/regex/tutorial" rel="noopener" target="_blank">
regular expressions tutorial</a>.
</div>
</div>
<div class="form-group col-md-6">
<label for="new_regex_comment">Comment:</label>
<input id="new_regex_comment" type="text" class="form-control" placeholder="Description (optional)">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
<div class="btn-toolbar pull-right" role="toolbar" aria-label="Toolbar with buttons">
<?php if ( $type !== "white" ) { ?>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-primary" id="add2black">Add to Blacklist</button>
</div>
</div>
<div class="row">
<div class="col-md-<?php if ($type === "all") { ?>3<?php } else { ?>6<?php } ?>">
<label>Domain wildcard blocking</label><br>
<input type="checkbox" name="active" id="wildcard_checkbox">
<?php } if ( $type !== "black" ) { ?>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-primary" id="add2white">Add to Whitelist</button>
</div>
<?php if ($type === "all") { ?>
<div class="col-md-3">
<label for="ex2">Type:</label>
<select id="new_type" class="form-control">
<option value="0">Whitelist</option>
<option value="1">Blacklist</option>
</select>
</div>
<?php } else { ?>
<input type="hidden" id="new_type"
value="<?php if ( $type === "white" ) { ?>0<?php } else { ?>1<?php } ?>">
<?php } ?>
<div class="col-md-6">
<label for="ex3">Comment:</label>
<input id="new_comment" type="text" class="form-control" placeholder="Description (optional)">
</div>
</div>
</div>
<div class="box-footer clearfix">
<button id="btnAdd" class="btn btn-primary pull-right">Add</button>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>

<!-- Domain List -->
<div class="row">
<div class="col-md-12">
<div class="box" id="domains-list">
<div class="box-header with-border">
<h3 class="box-title">
List of <?php echo $adjective; ?> domains
List of <?php echo $adjective; ?> entries
</h3>
</div>
<!-- /.box-header -->
Expand All @@ -91,7 +118,7 @@
<thead>
<tr>
<th>ID</th>
<th>Domain</th>
<th>Domain/RegEx</th>
<th>Type</th>
<th>Status</th>
<th>Comment</th>
Expand Down
167 changes: 100 additions & 67 deletions scripts/pi-hole/js/groups-domains.js
View file
Open in desktop
Expand Up @@ -37,38 +37,23 @@ $(document).ready(function() {
showtype = GETDict.type;
}

// Disable regex field when typing into domains field
// bind is not only triggered on key but also clipboard events
$("#new_domain").bind("input", function () {
if ($("#new_domain").val().length > 0) {
$("#new_regex").prop("disabled", true);
} else {
$("#new_regex").prop("disabled", false);
}
});

// Disable domain field when typing into regex field
$("#new_regex").bind("input", function () {
if ($("#new_regex").val().length > 0) {
$("#new_domain").prop("disabled", true);
$("#wildcard_checkbox").prop("disabled", true);
} else {
$("#new_domain").prop("disabled", false);
$("#wildcard_checkbox").prop("disabled", false);
// sync description fields, reset inactive inputs on tab change
$('a[data-toggle="tab"]').on("shown.bs.tab", function() {
var tabHref = $(this).attr("href");
var val;
if (tabHref === "#tab_domain") {
val = $("#new_regex_comment").val();
$("#new_domain_comment").val(val);
$("#new_regex").val("");
} else if (tabHref === "#tab_regex") {
val = $("#new_domain_comment").val();
$("#new_regex_comment").val(val);
$("#new_domain").val("");
$("#wildcard_checkbox").prop("checked", false);
}
});

// Disable domain field when typing into regex field
$("#wildcard_checkbox").change(function () {
if ($("#wildcard_checkbox").prop("checked")) {
$("#new_regex").text("");
$("#new_regex").prop("disabled", true);
} else {
$("#new_regex").prop("disabled", false);
}
});

$("#btnAdd").on("click", addDomain);
$("#add2black, #add2white").on("click", addDomain);

get_groups();
});
Expand Down Expand Up @@ -306,37 +291,53 @@ function initTable() {
}

function addDomain() {
var domain = $("#new_domain").val();
var regex = $("#new_regex").val();
var wildcard_checkbox = $("#wildcard_checkbox").prop("checked");
var type = $("#new_type").val();
var comment = $("#new_comment").val();
var action = this.id;
var tabHref = $('a[data-toggle="tab"][aria-expanded="true"]').attr("href");
var wildcardEl = $("#wildcard_checkbox");
var wildcard_checked = wildcardEl.prop("checked");
var type;

// current tab's inputs
var domain_regex, domainEl, commentEl;
if (tabHref === "#tab_domain") {
domain_regex = "domain";
domainEl = $("#new_domain");
commentEl = $("#new_domain_comment");
} else if (tabHref === "#tab_regex") {
domain_regex = "regex";
domainEl = $("#new_regex");
commentEl = $("#new_regex_comment");
}

var domain = domainEl.val();
var comment = commentEl.val();

utils.disableAll();
utils.showAlert("info", "", "Adding domain...", domain);
utils.showAlert("info", "", "Adding " + domain_regex + "...", domain);

// Determine type
if (domain.length > 0) {
if (wildcard_checkbox) {
// Strip "*." if specified by user in wildcard mode
if(domain.startsWith("*.")) {
domain = domain.substr(2);
}
if (type == 0) {
type = "2W";
} else {
type = "4W";
}
// strip "*." if specified by user in wildcard mode
if (domain_regex === "domain" && wildcard_checked && domain.startsWith("*.")) {
domain = domain.substr(2);
}

// determine list type
if (domain_regex === "domain" && action === "add2black" && wildcard_checked) {
type = "3W";
} else if (domain_regex === "domain" && action === "add2black" && !wildcard_checked) {
type = "1";
} else if (domain_regex === "domain" && action === "add2white" && wildcard_checked) {
type = "2W";
} else if (domain_regex === "domain" && action === "add2white" && !wildcard_checked) {
type = "0";
} else if (domain_regex === "regex" && action === "add2black") {
type = "3";
} else if (domain_regex === "regex" && action === "add2white") {
type = "2";
}
} else if (regex.length > 0 && type == 0) {
domain = regex;
type = "2";
} else if (regex.length > 0 && type == 1) {
domain = regex;
type = "3";
} else {
utils.enableAll();
utils.showAlert("warning", "", "Warning", "Please specify a domain");
utils.showAlert("warning", "", "Warning", "Please specify a " + domain_regex);
return;
}

Expand All @@ -354,16 +355,23 @@ function addDomain() {
success: function(response) {
utils.enableAll();
if (response.success) {
utils.showAlert("success", "glyphicon glyphicon-plus", "Successfully added domain", domain);
$("#new_domain").val("");
$("#new_comment").val("");
$("#new_regex").val("");
utils.showAlert(
"success",
"glyphicon glyphicon-plus",
"Successfully added " + domain_regex,
domain
);
domainEl.val("");
commentEl.val("");
wildcardEl.prop("checked", false);
table.ajax.reload();
} else utils.showAlert("error", "", "Error while adding new domain", response.message);
} else {
utils.showAlert("error", "", "Error while adding new " + domain_regex, response.message);
}
},
error: function(jqXHR, exception) {
utils.enableAll();
utils.showAlert("error", "", "Error while adding new domain", jqXHR.responseText);
utils.showAlert("error", "", "Error while adding new " + domain_regex, jqXHR.responseText);
console.log(exception);
}
});
Expand All @@ -379,6 +387,13 @@ function editDomain() {
var comment = tr.find("#comment_" + id).val();
var groups = tr.find("#multiselect_" + id).val();

var domain_regex;
if (type === "0" || type === "1") {
domain_regex = "domain";
} else if (type === "2" || type === "3") {
domain_regex = "regex";
}

var done = "edited";
var not_done = "editing";
switch (elem) {
Expand Down Expand Up @@ -414,7 +429,7 @@ function editDomain() {
}

utils.disableAll();
utils.showAlert("info", "", "Editing domain...", name);
utils.showAlert("info", "", "Editing " + domain_regex + "...", name);
$.ajax({
url: "scripts/pi-hole/php/groups.php",
method: "post",
Expand All @@ -434,14 +449,14 @@ function editDomain() {
utils.showAlert(
"success",
"glyphicon glyphicon-pencil",
"Successfully " + done + " domain",
"Successfully " + done + " " + domain_regex,
domain
);
} else
utils.showAlert(
"error",
"",
"Error while " + not_done + " domain with ID " + id,
"Error while " + not_done + " " + domain_regex + " with ID " + id,
response.message
);
},
Expand All @@ -450,7 +465,7 @@ function editDomain() {
utils.showAlert(
"error",
"",
"Error while " + not_done + " domain with ID " + id,
"Error while " + not_done + " " + domain_regex + " with ID " + id,
jqXHR.responseText
);
console.log(exception);
Expand All @@ -462,9 +477,17 @@ function deleteDomain() {
var tr = $(this).closest("tr");
var id = tr.attr("data-id");
var domain = tr.find("#domain_" + id).text();
var type = tr.find("#type_" + id).val();

var domain_regex;
if (type === "0" || type === "1") {
domain_regex = "domain";
} else if (type === "2" || type === "3") {
domain_regex = "regex";
}

utils.disableAll();
utils.showAlert("info", "", "Deleting domain...", domain);
utils.showAlert("info", "", "Deleting " + domain_regex + "...", domain);
$.ajax({
url: "scripts/pi-hole/php/groups.php",
method: "post",
Expand All @@ -476,20 +499,30 @@ function deleteDomain() {
utils.showAlert(
"success",
"glyphicon glyphicon-trash",
"Successfully deleted domain",
"Successfully deleted " + domain_regex,
domain
);
table
.row(tr)
.remove()
.draw(false);
} else {
utils.showAlert("error", "", "Error while deleting domain with ID " + id, response.message);
utils.showAlert(
"error",
"",
"Error while deleting " + domain_regex + " with ID " + id,
response.message
);
}
},
error: function(jqXHR, exception) {
utils.enableAll();
utils.showAlert("error", "", "Error while deleting domain with ID " + id, jqXHR.responseText);
utils.showAlert(
"error",
"",
"Error while deleting " + domain_regex + " with ID " + id,
jqXHR.responseText
);
console.log(exception);
}
});
Expand Down