mirror of
https://github.com/pi-hole/web.git
synced 2026-02-15 07:25:39 +00:00
Dark mode optimizations for Query Log and Long-term graphics
Signed-off-by: DL6ER <dl6er@dl6er.de>
This commit is contained in:
DL6ER
65
db_graph.php
65
db_graph.php
@@ -17,49 +17,60 @@ $token = $_SESSION['token'];
|
||||
<!-- Send PHP info to JS -->
|
||||
<div id="token" hidden><?php echo $token ?></div>
|
||||
|
||||
<!-- Title -->
|
||||
<div class="page-header">
|
||||
<h1>Compute graphical statistics from the Pi-hole query database</h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<!-- Date Input -->
|
||||
<div class="form-group">
|
||||
<label>Date and time range:</label>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">
|
||||
<i class="far fa-clock"></i>
|
||||
<div class="col-md-12">
|
||||
<div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">
|
||||
Select date and time range
|
||||
</h3>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-12">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">
|
||||
<i class="far fa-clock"></i>
|
||||
</div>
|
||||
<input type="button" class="form-control pull-right" id="querytime" value="Click to select date and time range">
|
||||
</div>
|
||||
</div>
|
||||
<input type="button" class="form-control pull-right" id="querytime" value="Click to select date and time range">
|
||||
</div>
|
||||
<!-- /.input group -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="timeoutWarning" class="alert alert-warning alert-dismissible fade in" role="alert" hidden="true">
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="col-md-12">
|
||||
<div id="timeoutWarning" class="alert alert-warning alert-dismissible fade in" role="alert" hidden="true">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="box" id="queries-over-time">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Queries over the selected time period</h3>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<div class="chart">
|
||||
<canvas id="queryOverTimeChart" width="800" height="250"></canvas>
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">
|
||||
Queries over the selected time period
|
||||
</h3>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="chart">
|
||||
<canvas id="queryOverTimeChart" width="800" height="250"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overlay" hidden="true">
|
||||
<i class="fa fa-sync fa-spin"></i>
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="scripts/vendor/daterangepicker.js"></script>
|
||||
|
||||
@@ -257,12 +257,14 @@ $(document).ready(function () {
|
||||
break;
|
||||
default:
|
||||
blocked = false;
|
||||
colorClass = "text-black";
|
||||
colorClass = false;
|
||||
fieldtext = "Unknown (" + parseInt(data[4]) + ")";
|
||||
buttontext = "";
|
||||
}
|
||||
|
||||
$(row).addClass(colorClass);
|
||||
if(colorClass !== false) {
|
||||
$("td:eq(4)", row).addClass(colorClass);
|
||||
}
|
||||
$("td:eq(4)", row).html(fieldtext);
|
||||
$("td:eq(6)", row).html(buttontext);
|
||||
|
||||
@@ -344,7 +346,6 @@ $(document).ready(function () {
|
||||
replytext = "-";
|
||||
}
|
||||
|
||||
$("td:eq(5)", row).addClass("text-black");
|
||||
$("td:eq(5)", row).html(replytext);
|
||||
|
||||
if (data.length > 7 && data[7] > 0) {
|
||||
|
||||
@@ -254,34 +254,6 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.text-black {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.text-green-light {
|
||||
color: #7fff00 !important;
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: #080 !important;
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
color: #ffa500 !important;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #f00 !important;
|
||||
}
|
||||
|
||||
.text-vivid-blue {
|
||||
color: #36f !important;
|
||||
}
|
||||
|
||||
td.highlight {
|
||||
background-color: #ff0 !important;
|
||||
}
|
||||
|
||||
code.breakall {
|
||||
white-space: -moz-pre-wrap;
|
||||
white-space: -pre-wrap;
|
||||
|
||||
@@ -39,6 +39,7 @@ h4 {
|
||||
.table > tfoot > tr.even:hover {
|
||||
background-color: #1e2226;
|
||||
}
|
||||
.table-bordered,
|
||||
.table-bordered > thead > tr > th,
|
||||
.table-bordered > tbody > tr > th,
|
||||
.table-bordered > tfoot > tr > th,
|
||||
@@ -53,12 +54,6 @@ h4 {
|
||||
border: 0;
|
||||
color: #bec5cb;
|
||||
}
|
||||
.dataTables_wrapper select {
|
||||
border-radius: 4px;
|
||||
background-color: #353c42;
|
||||
border: 0;
|
||||
color: #bec5cb;
|
||||
}
|
||||
.dataTables_paginate .pagination li > a {
|
||||
background-color: #353c42;
|
||||
border-color: #353c42;
|
||||
@@ -385,4 +380,70 @@ code {
|
||||
color: #bec5cb;
|
||||
background-color: #353c42;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Used in the Query Log table */
|
||||
.text-green-light {
|
||||
color: #5ca314 !important;
|
||||
}
|
||||
.text-green {
|
||||
color: #007e47 !important;
|
||||
}
|
||||
.text-orange {
|
||||
color: #b1720c !important;
|
||||
}
|
||||
.text-red {
|
||||
color: #bd2c19 !important;
|
||||
}
|
||||
.text-vivid-blue {
|
||||
color: #007997 !important;
|
||||
}
|
||||
td.highlight {
|
||||
background-color: yellow;
|
||||
}
|
||||
.btn-default {
|
||||
box-shadow: none;
|
||||
background-color: #3e464c;
|
||||
color: #bec5cb;
|
||||
border: 1px solid #353c42;
|
||||
}
|
||||
|
||||
/* Used by the long-term pages */
|
||||
.daterangepicker {
|
||||
background-color: #3e464c;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #353c42;
|
||||
}
|
||||
.daterangepicker .ranges li:hover {
|
||||
background-color: #353c42;
|
||||
}
|
||||
.daterangepicker .ranges li.active {
|
||||
background-color: #1e2226; /* Color also used in table pagination */
|
||||
}
|
||||
.daterangepicker .calendar-table {
|
||||
background-color: #3e464c;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #353c42;
|
||||
}
|
||||
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
|
||||
background-color: #485158;
|
||||
}
|
||||
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
|
||||
background-color: #1e2226;
|
||||
}
|
||||
.daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker td.in-range:hover {
|
||||
background-color: #225e92;
|
||||
}
|
||||
.daterangepicker td.in-range {
|
||||
background-color: #1e2226;
|
||||
color: #bec5cb;
|
||||
}
|
||||
select, .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
|
||||
width: 50px;
|
||||
margin: 0 auto;
|
||||
background: #eee;
|
||||
border: 1px solid #eee;
|
||||
padding: 2px;
|
||||
outline: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -171,3 +171,32 @@
|
||||
.progress {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
/* Used in the Query Log table */
|
||||
.text-black {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.text-green-light {
|
||||
color: #7fff00 !important;
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: #080 !important;
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
color: #ffa500 !important;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #f00 !important;
|
||||
}
|
||||
|
||||
.text-vivid-blue {
|
||||
color: #36f !important;
|
||||
}
|
||||
|
||||
td.highlight {
|
||||
background-color: #ff0 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user