Merge pull request #194 from ehpersonal38/113

Update overview.php
This commit is contained in:
Patrick McGuire
2022-04-16 14:09:39 -04:00
committed by GitHub
+50 -41
View File
@@ -111,6 +111,38 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isse
}
die();
}
if(isset($_GET['ajax_left_chart']) && $_GET['ajax_left_chart'] == "true") {
?>
<table>
<tr>
<th>Total</th>
<td><?php echo $totalcount['COUNT(*)'];?></td>
</tr>
<tr>
<th>Today</th>
<td><form action="" method="GET"><button type="submit" name="view" value="Today's Detections"><?php echo $todaycount['COUNT(*)'];?></button></td>
</form>
</tr>
<tr>
<th>Last Hour</th>
<td><?php echo $hourcount['COUNT(*)'];?></td>
</tr>
<tr>
<th>Species Detected Today</th>
<td><form action="" method="GET"><input type="hidden" name="view" value="Recordings"><button type="submit" name="date" value="<?php echo date('Y-m-d');?>"><?php echo $speciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
</form>
</tr>
<tr>
<th>Total Number of Species</th>
<td><form action="" method="GET"><button type="submit" name="view" value="Species Stats"><?php echo $totalspeciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
</form>
</tr>
</table>
<?php
die();
}
?>
<head>
<meta charset="UTF-8">
@@ -125,34 +157,6 @@ body::-webkit-scrollbar {
<div class="overview">
<div class="overview-stats">
<div class="left-column">
<table>
<tr>
<th>Total</th>
<td><?php echo $totalcount['COUNT(*)'];?></td>
</tr>
<tr>
<th>Today</th>
<form action="" method="GET">
<td><button type="submit" name="view" value="Today's Detections"><?php echo $todaycount['COUNT(*)'];?></button></td>
</form>
</tr>
<tr>
<th>Last Hour</th>
<td><?php echo $hourcount['COUNT(*)'];?></td>
</tr>
<tr>
<th>Species Detected Today</th>
<form action="" method="GET">
<td><input type="hidden" name="view" value="Recordings"><button type="submit" name="date" value="<?php echo date('Y-m-d');?>"><?php echo $speciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
</form>
</tr>
<tr>
<th>Total Number of Species</th>
<form action="" method="GET">
<td><button type="submit" name="view" value="Species Stats"><?php echo $totalspeciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
</form>
</tr>
</table>
</div>
<div class="right-column">
<div class="chart">
@@ -170,12 +174,6 @@ if (file_exists('./Charts/'.$chart)) {
echo "<p>No Detections For Today</p>";
}
?>
<script>
// every $refresh seconds, this loop will run and refresh the spectrogram image
window.setInterval(function(){
document.getElementById("chart").src = "/Charts/<?php echo $chart;?>?nocache="+Date.now();
}, <?php echo $refresh; ?>*1000);
</script>
</div>
<div id="most_recent_detection"></div>
@@ -186,12 +184,6 @@ $refresh = $config['RECORDING_LENGTH'];
$time = time();
echo "<img id=\"spectrogramimage\" src=\"/spectrogram.png?nocache=$time\">";
?>
<script>
// every $refresh seconds, this loop will run and refresh the spectrogram image
window.setInterval(function(){
document.getElementById("spectrogramimage").src = "/spectrogram.png?nocache="+Date.now();
}, <?php echo $refresh; ?>*1000);
</script>
</div>
</div>
@@ -204,11 +196,22 @@ function loadDetectionIfNewExists(previous_detection_identifier=undefined) {
// if there's a new detection that needs to be updated to the page
if(this.responseText.length > 0) {
document.getElementById("most_recent_detection").innerHTML = this.responseText;
// only going to load left chart if there's a new detection
loadLeftChart();
}
}
xhttp.open("GET", "overview.php?ajax_detections=true&previous_detection_identifier="+previous_detection_identifier, true);
xhttp.send();
}
function loadLeftChart() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementsByClassName("left-column")[0].innerHTML = this.responseText;
}
xhttp.open("GET", "overview.php?ajax_left_chart=true", true);
xhttp.send();
}
window.setInterval(function(){
var videoelement = document.getElementsByTagName("video")[0];
if(typeof videoelement !== "undefined") {
@@ -220,9 +223,15 @@ window.setInterval(function(){
// image or audio didn't load for some reason, force a refresh in 5 seconds
loadDetectionIfNewExists();
}
}, 5*1000);
}, <?php echo intval($refresh/4); ?>*1000);
window.addEventListener("load", function(){
loadDetectionIfNewExists();
loadLeftChart();
});
// every $refresh seconds, this loop will run and refresh the spectrogram image
window.setInterval(function(){
document.getElementById("chart").src = "/Charts/<?php echo $chart;?>?nocache="+Date.now();
document.getElementById("spectrogramimage").src = "/spectrogram.png?nocache="+Date.now();
}, <?php echo $refresh; ?>*1000);
</script>