Skip to content

Commit

Permalink
Merge pull request #288 from pi-hole/new/tools
Browse files Browse the repository at this point in the history 
New feature and code improvements for the web UI
  • Loading branch information
@DL6ER
DL6ER authored Dec 23, 2016
2 parents f9d9bbd + 0aed676 commit 3aabec6
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 55 deletions.
11 changes: 10 additions & 1 deletion api.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,16 @@
}
elseif (isset($_GET['disable'], $_GET['token']) && $auth) {
check_csrf($_GET['token']);
exec('sudo pihole disable');
$disable = intval($_GET['disable']);
// intval returns the integer value on success, or 0 on failure
if($disable > 0)
{
exec("sudo pihole disable ".$disable."s");
}
else
{
exec('sudo pihole disable');
}
$data = array_merge($data, Array(
"status" => "disabled"
));
Expand Down
111 changes: 82 additions & 29 deletions header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,61 +314,114 @@
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<?php
$scriptname = basename($_SERVER['SCRIPT_FILENAME']);
if($scriptname === "list.php")
{
if($_GET["l"] === "white")
{
$scriptname = "whitelist";
}
elseif($_GET["l"] === "black")
{
$scriptname = "blacklist";
}
}
?>
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<!-- Home Page -->
<li>
<li<?php if($scriptname === "index.php"){ ?> class="active"<?php } ?>>
<a href="index.php">
<i class="fa fa-home"></i> <span>Main Page</span>
</a>
</li>
<?php if($auth){ ?>
<!-- Query Log -->
<li>
<li<?php if($scriptname === "queries.php"){ ?> class="active"<?php } ?>>
<a href="queries.php">
<i class="fa fa-file-text-o"></i> <span>Query Log</span>
</a>
</li>
<!-- Whitelist -->
<li>
<li<?php if($scriptname === "whitelist"){ ?> class="active"<?php } ?>>
<a href="list.php?l=white">
<i class="fa fa-pencil-square-o"></i> <span>Whitelist</span>
</a>
</li>
<!-- Blacklist -->
<li>
<li<?php if($scriptname === "blacklist"){ ?> class="active"<?php } ?>>
<a href="list.php?l=black">
<i class="fa fa-ban"></i> <span>Blacklist</span>
</a>
</li>
<!-- Run gravity.sh -->
<li>
<a href="gravity.php">
<i class="fa fa-arrow-circle-down"></i> <span>Update Lists</span>
</a>
<!-- Toggle -->

<li id="pihole-disable" class="treeview"<?php if ($pistatus == "0") { ?> hidden="true"<?php } ?>>
<a href="#">
<i class="fa fa-stop"></i> <span>Disable</span>&nbsp;&nbsp;&nbsp;<span id="flip-status-disable"></span>
<span class="pull-right-container">
<i class="fa fa-angle-down pull-right" style="padding-right: 5px;"></i>
</span>
</a>
<ul class="treeview-menu">
<li>
<a href="#" id="pihole-disable-permanently">
<i class="fa fa-stop"></i> <span>Permanently</span>
</a>
</li>
<li>
<a href="#" id="pihole-disable-10s">
<i class="fa fa-clock-o"></i> <span>For 10 seconds</span>
</a>
</li>
<li>
<a href="#" id="pihole-disable-30s">
<i class="fa fa-clock-o"></i> <span>For 30 seconds</span>
</a>
</li>
<li>
<a href="#" id="pihole-disable-5m">
<i class="fa fa-clock-o"></i> <span>For 5 minutes</span>
</a>
</li>
</ul>
<!-- <a href="#" id="flip-status"><i class="fa fa-stop"></i> <span>Disable</span></a> -->
</li>
<!-- Query adlists -->
<li>
<a href="queryads.php">
<i class="fa fa-search"></i> <span>Query adlists</span>
</a>
<li id="pihole-enable" class="treeview"<?php if ($pistatus == "1") { ?> hidden="true"<?php } ?>>
<a href="#"><i class="fa fa-play"></i> <span>Enable</span>&nbsp;&nbsp;&nbsp;<span id="flip-status-enable"></span></a>
</li>
<!-- Tail pihole.log -->
<li>
<a href="taillog.php">
<i class="fa fa-list-ul"></i> <span>Tail pihole.log</span>
</a>
<!-- Tools -->
<li class="treeview <?php if($scriptname === "gravity.php" || $scriptname === "queryads.php"){ ?>active<?php } ?>">
<a href="#">
<i class="fa fa-folder"></i> <span>Tools</span>
<span class="pull-right-container">
<i class="fa fa-angle-down pull-right" style="padding-right: 5px;"></i>
</span>
</a>
<ul class="treeview-menu">
<!-- Run gravity.sh -->
<li<?php if($scriptname === "gravity.php"){ ?> class="active"<?php } ?>>
<a href="gravity.php">
<i class="fa fa-arrow-circle-down"></i> <span>Update Lists</span>
</a>
</li>
<!-- Query adlists -->
<li<?php if($scriptname === "queryads.php"){ ?> class="active"<?php } ?>>
<a href="queryads.php">
<i class="fa fa-search"></i> <span>Query adlists</span>
</a>
</li>
<!-- Tail pihole.log -->
<li<?php if($scriptname === "taillog.php"){ ?> class="active"<?php } ?>>
<a href="taillog.php">
<i class="fa fa-list-ul"></i> <span>Tail pihole.log</span>
</a>
</li>
</ul>
</li>
<!-- Toggle -->
<?php
if ($pistatus == "1") {
echo ' <li><a href="#" id="flip-status"><i class="fa fa-stop"></i> <span>Disable</span></a></li>';
} else {
echo ' <li><a href="#" id="flip-status"><i class="fa fa-play"></i> <span>Enable</span></a></li>';
}
?>
<!-- Settings -->
<li>
<li<?php if($scriptname === "settings.php"){ ?> class="active"<?php } ?>>
<a href="settings.php">
<i class="fa fa-gears"></i> <span>Settings</span>
</a>
Expand Down Expand Up @@ -402,7 +455,7 @@
</li>
<?php if($auth){ ?>
<!-- Help -->
<li>
<li<?php if($scriptname === "help.php"){ ?> class="active"<?php } ?>>
<a href="help.php">
<i class="fa fa-question-circle"></i> <span>Help</span>
</a>
Expand Down
98 changes: 73 additions & 25 deletions js/pihole/footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,82 @@ $("body").on("click", function(event) {
}
});

// Enable/Disable
$("#flip-status").on("click", (e) => {
e.preventDefault();
const btnStatus = $("#flip-status");
function piholeChanged(action)
{
const status = $("#status");
const text = btnStatus.text().trim();
const token = encodeURIComponent($("#token").html());
const ena = $("#pihole-enable");
const dis = $("#pihole-disable");

switch(action) {
case "enabled":
status.html("<i class='fa fa-circle' style='color:#7FFF00'></i> Active");
ena.hide();
dis.show();
dis.removeClass("active");
break;

case "disabled":
status.html("<i class='fa fa-circle' style='color:#FF0000'></i> Offline");
ena.show();
dis.hide();
break;
}

}

switch(text) {
case "Enable":
btnStatus.html("<i class='fa fa-spinner'></i> <span>Enabling...</span>");
$.getJSON("api.php?enable&token=" + token, (data) => {
if(data.status === "enabled") {
btnStatus.html("<i class='fa fa-stop'></i> <span>Disable</span>");
status.html("<i class='fa fa-circle' style='color:#7FFF00'></i> Active");
}
});
break;
case "Disable":
btnStatus.html("<i class='fa fa-spinner'></i> <span>Disabling...</span>");
$.getJSON("api.php?disable&token=" + token, (data) => {
if(data.status === "disabled") {
btnStatus.html("<i class='fa fa-play'></i> <span>Enable</span>");
status.html("<i class='fa fa-circle' style='color:#FF0000'></i> Offline");
}
});
break;
function piholeChange(action, duration)
{
const token = encodeURIComponent($("#token").html());
var btnStatus;

switch(action) {
case "enable":
btnStatus = $("#flip-status-enable");
btnStatus.html("<i class='fa fa-spinner'> </i>");
$.getJSON("api.php?enable&token=" + token, (data) => {
if(data.status === "enabled") {
btnStatus.html("");
piholeChanged("enabled");
}
});
break;

case "disable":
btnStatus = $("#flip-status-disable");
btnStatus.html("<i class='fa fa-spinner'> </i>");
$.getJSON("api.php?disable=" + duration + "&token=" + token, (data) => {
if(data.status === "disabled") {
btnStatus.html("");
piholeChanged("disabled");
}
});
break;
}
}

// Handle Enable/Disable
$("#pihole-enable").on("click", (e) => {
e.preventDefault();
piholeChange("enable","");
});
$("#pihole-disable-permanently").on("click", (e) => {
e.preventDefault();
piholeChange("disable","0");
});
$("#pihole-disable-10s").on("click", (e) => {
e.preventDefault();
piholeChange("disable","10");
setTimeout(function(){piholeChanged("enabled");},10000);
});
$("#pihole-disable-30s").on("click", (e) => {
e.preventDefault();
piholeChange("disable","30");
setTimeout(function(){piholeChanged("enabled");},30000);
});
$("#pihole-disable-5m").on("click", (e) => {
e.preventDefault();
piholeChange("disable","300");
setTimeout(function(){piholeChanged("enabled");},300000);
});

var piholeVersion = $("#piholeVersion").html();
Expand Down

0 comments on commit 3aabec6

Please sign in to comment.