Long-term data: Show date range only after user chose a valid range. Fixes #897

Signed-off-by: DL6ER <dl6er@dl6er.de>

db_graph.php

@@ -32,7 +32,7 @@ $token = $_SESSION['token'];
           <div class="input-group-addon">
             <i class="fa fa-clock-o"></i>
           </div>
-          <input type="text" class="form-control pull-right" id="querytime">
+          <input type="text" class="form-control pull-right" id="querytime" value="Click to select date and time range">
         </div>
         <!-- /.input group -->
       </div>

db_lists.php

@@ -33,7 +33,7 @@ $token = $_SESSION['token'];
           <div class="input-group-addon">
             <i class="fa fa-clock-o"></i>
           </div>
-          <input type="text" class="form-control pull-right" id="querytime">
+          <input type="text" class="form-control pull-right" id="querytime" value="Click to select date and time range">
         </div>
         <!-- /.input group -->
       </div>

db_queries.php

@@ -33,7 +33,7 @@ $token = $_SESSION['token'];
           <div class="input-group-addon">
             <i class="fa fa-clock-o"></i>
           </div>
-          <input type="text" class="form-control pull-right" id="querytime">
+          <input type="text" class="form-control pull-right" id="querytime" value="Click to select date and time range">
         </div>
         <!-- /.input group -->
       </div>

scripts/pi-hole/js/db_graph.js

@@ -16,11 +16,13 @@ var until = moment(end__).utc().valueOf()/1000;
 
 var timeoutWarning = $("#timeoutWarning");
 
+var dateformat = "MMMM Do YYYY, HH:mm";
+
 $(function () {
     $("#querytime").daterangepicker(
     {
       timePicker: true, timePickerIncrement: 15,
-      locale: { format: "MMMM Do YYYY, HH:mm" },
+      locale: { format: dateformat },
       ranges: {
         "Today": [moment().startOf("day"), moment()],
         "Yesterday": [moment().subtract(1, "days").startOf("day"), moment().subtract(1, "days").endOf("day")],
@@ -31,7 +33,8 @@ $(function () {
         "This Year": [moment().startOf("year"), moment()],
         "All Time": [moment(0), moment()]
       },
-      "opens": "center", "showDropdowns": true
+      "opens": "center", "showDropdowns": true,
+      "autoUpdateInput": false
     },
     function (startt, endt) {
       from = moment(startt).utc().valueOf()/1000;
@@ -243,6 +246,7 @@ $(document).ready(function() {
 });
 
 $("#querytime").on("apply.daterangepicker", function(ev, picker) {
+    $(this).val(picker.startDate.format(dateformat) + " to " + picker.endDate.format(dateformat));
     $("#queries-over-time").show();
     updateQueriesOverTime();
 });

scripts/pi-hole/js/db_lists.js

@@ -17,6 +17,8 @@ var until = moment(end__).utc().valueOf()/1000;
 var timeoutWarning = $("#timeoutWarning");
 var listsStillLoading = 0;
 
+var dateformat = "MMMM Do YYYY, HH:mm";
+
 $(function () {
     $("#querytime").daterangepicker(
     {
@@ -32,7 +34,8 @@ $(function () {
         "This Year": [moment().startOf("year"), moment()],
         "All Time": [moment(0), moment()]
       },
-      "opens": "center", "showDropdowns": true
+      "opens": "center", "showDropdowns": true,
+      "autoUpdateInput": false
     },
     function (startt, endt) {
       from = moment(startt).utc().valueOf()/1000;
@@ -190,6 +193,7 @@ function updateTopAdsChart() {
 }
 
 $("#querytime").on("apply.daterangepicker", function(ev, picker) {
+    $(this).val(picker.startDate.format(dateformat) + " to " + picker.endDate.format(dateformat));
     timeoutWarning.show();
     listsStillLoading = 3;
     updateTopClientsChart();

scripts/pi-hole/js/db_queries.js

@@ -18,6 +18,8 @@ var daterange;
 
 var timeoutWarning = $("#timeoutWarning");
 
+var dateformat = "MMMM Do YYYY, HH:mm";
+
 // Do we want to filter queries?
 var GETDict = {};
 location.search.substr(1).split("&").forEach(function(item) {GETDict[item.split("=")[0]] = item.split("=")[1];});
@@ -46,7 +48,8 @@ $(function () {
         "This Year": [moment().startOf("year"), moment()],
         "All Time": [moment(0), moment()]
       },
-      "opens": "center", "showDropdowns": true
+      "opens": "center", "showDropdowns": true,
+      "autoUpdateInput": false
     },
     function (startt, endt) {
       from = moment(startt).utc().valueOf()/1000;
@@ -332,6 +335,7 @@ $(document).ready(function() {
 } );
 
 $("#querytime").on("apply.daterangepicker", function(ev, picker) {
+    $(this).val(picker.startDate.format(dateformat) + " to " + picker.endDate.format(dateformat));
     refreshTableData();
 });