claudecode/AvianVisitors
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update overview.php

Browse Source 
Now the left tally chart updates with JS too!

Also cleaned up & optimized a few lines of code.
This commit is contained in:
ehpersonal38
2022-04-16 13:31:20 -04:00
parent 261c30d8d3
commit 2027967b7b
1 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/overview.php
+38 -26
View File
@@ -111,20 +111,9 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isse
}
die();
}
if(isset($_GET['ajax_left_chart']) && $_GET['ajax_left_chart'] == "true") {
?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Overview</title>
<style>
body::-webkit-scrollbar {
display:none
}
</style>
</head>
<div class="overview">
<div class="overview-stats">
<div class="left-column">
<table>
<tr>
<th>Total</th>
@@ -153,6 +142,24 @@ body::-webkit-scrollbar {
</form>
</tr>
</table>
<?php
die();
}
?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Overview</title>
<style>
body::-webkit-scrollbar {
display:none
}
</style>
</head>
<div class="overview">
<div class="overview-stats">
<div class="left-column">
</table>
</div>
<div class="right-column">
<div class="chart">
@@ -170,12 +177,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 +187,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 +199,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 +226,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>