Skip to content

Commit

Permalink
Add better select menu allowing users to filter inside the dropdown a…
Browse files Browse the repository at this point in the history
…s well as add new entries in place.

Signed-off-by: DL6ER <[email protected]>
  • Loading branch information
DL6ER committed May 13, 2020
1 parent 2f0b8bf commit bdca810
Show file tree
Hide file tree
Showing 6 changed files with 46 additions and 22 deletions.
8 changes: 6 additions & 2 deletions groups-clients.php
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,18 @@
<label for="select">Known clients:</label>
<select id="select" class="form-control" placeholder="">
<option disabled selected>Loading...</option>
</select><br>
<input id="ip-custom" type="text" class="form-control" disabled placeholder="Client IP address (IPv4 or IPv6, CIDR subnetting available, optional)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
</select>
</div>
<div class="form-group col-md-6">
<label for="new_comment">Comment:</label>
<input id="new_comment" type="text" class="form-control" placeholder="Client description (optional)">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>You can select an existing client or add a custom one by typing into the field above and confirming your entry with <kbd>&#x23CE;</kbd>. Clients can be described either by their IP addresses (IPv4 and IPv6 are supported), IP subnets (CIDR notation, like <code>192.168.2.0/24</code>) or by their MAC addresses. Note that client recognition by MAC addresses only work for devices at most one networking hop away from your Pi-hole.</p>
</div>
</div>
</div>
<div class="box-footer clearfix">
<button type="button" id="btnAdd" class="btn btn-primary pull-right">Add</button>
Expand Down
47 changes: 31 additions & 16 deletions scripts/pi-hole/js/groups-clients.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,36 @@ function reload_client_suggestions() {
{ action: "get_unconfigured_clients", token: token },
function (data) {
var sel = $("#select");
var customWasSelected = sel.val() === "custom";
sel.empty();

// In order for the placeholder value to appear, we have to have a blank
// <option> as the first option in our <select> control. This is because
// the browser tries to select the first option by default. If our first
// option were non-empty, the browser would display this instead of the
// placeholder.
sel.append($("<option />"));

// Add data obtained from API
for (var key in data) {
if (!Object.prototype.hasOwnProperty.call(data, key)) {
continue;
}

var text = key;
// Add MAC address
var text = key.toUpperCase();

// Check if this is a valid MAC address (skip mock devices)
if (!utils.validateMAC(text)) {
continue;
}

// Append host name if available
if (data[key].length > 0) {
text += " (" + data[key] + ")";
}

sel.append($("<option />").val(key).text(text));
}

sel.append($("<option />").val("custom").text("Custom, specified below..."));
if (customWasSelected) {
sel.val("custom");
}
},
"json"
);
Expand All @@ -57,19 +68,19 @@ $(document).ready(function () {
$("#btnAdd").on("click", addClient);

reload_client_suggestions();
$("select").select2({
tags: true,
placeholder: "Select client...",
allowClear: true
});

utils.bsSelect_defaults();
get_groups();

$("#select").on("change", function () {
$("#ip-custom").val("");
$("#ip-custom").prop("disabled", $("#select option:selected").val() !== "custom");
});
// Disable autocorrect in the search box
var input = document.querySelector("input[type=search]");
input.setAttribute("autocomplete", "off");
input.setAttribute("autocorrect", "off");
input.setAttribute("autocapitalize", "off");
input.setAttribute("spellcheck", false);
});

function initTable() {
Expand Down Expand Up @@ -231,6 +242,13 @@ function initTable() {
}
});

// Disable autocorrect in the search box
var input = document.querySelector("input[type=search]");
input.setAttribute("autocomplete", "off");
input.setAttribute("autocorrect", "off");
input.setAttribute("autocapitalize", "off");
input.setAttribute("spellcheck", false);

table.on("order.dt", function () {
var order = table.order();
if (order[0][0] !== 0 || order[0][1] !== "asc") {
Expand All @@ -248,9 +266,6 @@ function initTable() {
function addClient() {
var ip = $("#select").val();
var comment = $("#new_comment").val();
if (ip === "custom") {
ip = $("#ip-custom").val();
}

utils.disableAll();
utils.showAlert("info", "", "Adding client...", ip);
Expand Down
8 changes: 4 additions & 4 deletions scripts/pi-hole/php/groups.php
Original file line number Diff line number Diff line change
Expand Up @@ -208,15 +208,15 @@ function JSON_error($message = null)
$QUERYDB = getQueriesDBFilename();
$FTLdb = SQLite3_connect($QUERYDB);

$query = $FTLdb->query('SELECT DISTINCT ip,network.name FROM network_addresses AS name LEFT JOIN network ON network.id = network_id ORDER BY ip ASC;');
$query = $FTLdb->query('SELECT DISTINCT hwaddr,name FROM network;');
if (!$query) {
throw new Exception('Error while querying FTL\'s database: ' . $db->lastErrorMsg());
}

// Loop over results
$ips = array();
while ($res = $query->fetchArray(SQLITE3_ASSOC)) {
$ips[$res['ip']] = $res['name'] !== null ? $res['name'] : '';
$ips[$res['hwaddr']] = $res['name'] !== null ? $res['name'] : '';
}
$FTLdb->close();

Expand All @@ -227,8 +227,8 @@ function JSON_error($message = null)

// Loop over results, remove already configured clients
while (($res = $query->fetchArray(SQLITE3_ASSOC)) !== false) {
if (isset($ips[$res['ip']])) {
unset($ips[$res['ip']]);
if (isset($ips[$res['hwaddr']])) {
unset($ips[$res['hwaddr']]);
}
}

Expand Down
2 changes: 2 additions & 0 deletions scripts/pi-hole/php/header.php
Original file line number Diff line number Diff line change
Expand Up @@ -209,13 +209,15 @@ function pidofFTL()

<link rel="stylesheet" href="style/vendor/AdminLTE.min.css">
<link rel="stylesheet" href="style/vendor/animate.css">
<link rel="stylesheet" href="style/vendor/select2.min.css">

<noscript><link rel="stylesheet" href="style/vendor/js-warn.css"></noscript>
<script src="scripts/vendor/jquery.min.js"></script>
<script src="scripts/vendor/jquery-ui.min.js"></script>
<script src="style/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="scripts/vendor/adminlte.min.js"></script>
<script src="scripts/vendor/bootstrap-notify.min.js"></script>
<script src="scripts/vendor/select2.min.js"></script>

<?php if(in_array($scriptname, array("groups.php", "groups-clients.php", "groups-domains.php", "groups-adlists.php"))){ ?>
<script src="style/vendor/bootstrap/js/bootstrap-select.min.js"></script>
Expand Down
2 changes: 2 additions & 0 deletions scripts/vendor/select2.min.js

Large diffs are not rendered by default.

Loading

0 comments on commit bdca810

Please sign in to comment.