Allows reloading the queries after modifying the options.

Signed-off-by: rdwebdesign <github@rdwebdesign.com.br>

db_queries.php

@@ -64,6 +64,16 @@
     </div>
 </div>
 
+<div class="row reload-box">
+    <div class="col-sm-9 col-xs-8">
+       New options selected. Please, reload the data or choose a another time range.
+    </div>
+    <div class="col-sm-3 col-xs-4">
+        <button type="button" class="btn btn-primary bt-reload">Reload Data</button>
+    </div>
+</div>
+<br>
+
 <div id="timeoutWarning" class="alert alert-warning alert-dismissible fade in" role="alert" hidden>
     Depending on how large of a range you specified, the request may time out while Pi-hole tries to retrieve all the data.<br/><span id="err"></span>
 </div>

scripts/pi-hole/js/db_queries.js

@@ -15,6 +15,7 @@ var instantquery = false;
 var daterange;
 
 var timeoutWarning = $("#timeoutWarning");
+var reloadBox = $(".reload-box");
 
 var dateformat = "MMMM Do YYYY, HH:mm";
 
@@ -148,6 +149,7 @@ function getQueryTypes() {
 
 var reloadCallback = function () {
   timeoutWarning.hide();
+  reloadBox.hide();
   statistics = [0, 0, 0, 0];
   var data = tableApi.rows().data();
   for (var i = 0; i < data.length; i++) {
@@ -380,3 +382,11 @@ $("#querytime").on("apply.daterangepicker", function (ev, picker) {
   $(this).val(picker.startDate.format(dateformat) + " to " + picker.endDate.format(dateformat));
   refreshTableData();
 });
+
+$("input[id^=type]").change(function (){
+  reloadBox.show();
+});
+
+$(".bt-reload").click(function (){
+  refreshTableData();
+});

style/pi-hole.css

@@ -378,6 +378,14 @@ td.details-control {
   background-color: rgb(70, 149, 74, 0.1);
 }
 
+.bt-reload-box {
+  display: none;
+  margin-top: 10px;
+}
+.bt-reload-box .col-xs-4 {
+  text-align: right;
+}
+
 @media screen and (max-width: 991px) {
   #domain-search-block {
     display: block;