5 most recent detections on overview

homepage/style.css

@@ -676,6 +676,18 @@ dialog::backdrop {
   box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
 }
 
+#birdimage {
+  transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+  cursor:pointer;
+  border-radius: 5px;
+}
+
+#birdimage:hover {
+  opacity:0.8;
+  box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
+}
+
 .centered_image_container * {
   font-size:19px !important;
 }
@@ -711,4 +723,22 @@ dialog::backdrop {
 form#views button .updatenumber {
   position:initial;
   margin-left:0px;
-}
+}
+
+#detections_table_overview table {
+  width:944px;
+}
+
+#recent_detection_middle_td{
+  width:33%;
+}
+@media screen and (max-width:500px) {
+  #recent_detection_middle_td{
+    width:66%;
+  }
+}
+#recent_detection_middle_td img{
+  width:unset !important;
+  height:75px;
+  float:left;
+}

scripts/overview.php

@@ -251,6 +251,9 @@ if (file_exists('./Charts/'.$chart)) {
 </div>
 
 <div id="most_recent_detection"></div>
+<br>
+<h3>5 Most Recent Detections</h3>
+<div style="padding-bottom:10px;" id="detections_table"><h3>Loading...</h3></div>
 
 <h3>Currently Analyzing</h3>
 <?php
@@ -271,8 +274,9 @@ function loadDetectionIfNewExists(previous_detection_identifier=undefined) {
     if(this.responseText.length > 0 && !this.responseText.includes("Database is busy")) {
       document.getElementById("most_recent_detection").innerHTML = this.responseText;
 
-      // only going to load left chart if there's a new detection
+      // only going to load left chart & 5 most recents if there's a new detection
       loadLeftChart();
+      loadFiveMostRecentDetections();
     }
   }
   xhttp.open("GET", "overview.php?ajax_detections=true&previous_detection_identifier="+previous_detection_identifier, true);
@@ -298,10 +302,25 @@ window.setInterval(function(){
     loadDetectionIfNewExists();
   }
 }, <?php echo intval($refresh/4); ?>*1000);
+
+function loadFiveMostRecentDetections() {
+  const xhttp = new XMLHttpRequest();
+  xhttp.onload = function() {
+    document.getElementById("detections_table").innerHTML= this.responseText;
+  }
+  if (window.innerWidth > 500) {
+    xhttp.open("GET", "todays_detections.php?ajax_detections=true&display_limit=undefined&hard_limit=5", true);
+  } else {
+    xhttp.open("GET", "todays_detections.php?ajax_detections=true&display_limit=undefined&hard_limit=5&mobile=true", true);
+  }
+  xhttp.send();
+}
 window.addEventListener("load", function(){
+  loadFiveMostRecentDetections();
   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();

scripts/todays_detections.php

@@ -73,7 +73,12 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true"  ) {
     $statement0 = $db->prepare('SELECT Time, Com_Name, Sci_Name, Confidence, File_Name FROM detections WHERE Date == Date(\'now\', \'localtime\') '.$searchquery.' ORDER BY Time DESC LIMIT '.(intval($_GET['display_limit'])-40).',40');
   } else {
     // legacy mode
-    $statement0 = $db->prepare('SELECT Time, Com_Name, Sci_Name, Confidence, File_Name FROM detections WHERE Date == Date(\'now\', \'localtime\') '.$searchquery.' ORDER BY Time DESC');
+    if(isset($_GET['hard_limit']) && is_numeric($_GET['hard_limit'])) {
+      $statement0 = $db->prepare('SELECT Time, Com_Name, Sci_Name, Confidence, File_Name FROM detections WHERE Date == Date(\'now\', \'localtime\') '.$searchquery.' ORDER BY Time DESC LIMIT '.$_GET['hard_limit']);
+    } else {
+      $statement0 = $db->prepare('SELECT Time, Com_Name, Sci_Name, Confidence, File_Name FROM detections WHERE Date == Date(\'now\', \'localtime\') '.$searchquery.' ORDER BY Time DESC');
+    }
+    
   }
   if($statement0 == False){
     echo "Database is busy";
@@ -150,11 +155,21 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true"  ) {
           </td>
         <?php } else { //legacy mode ?>
           <tr class="relative" id="<?php echo $iterations; ?>">
-          <td><?php echo $todaytable['Time'];?><br></td><td>
-          <b><a class="a2" href="https://allaboutbirds.org/guide/<?php echo $comname;?>" target="top"><?php echo $todaytable['Com_Name'];?></a></b><br>
-          <a class="a2" href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="top"><i><?php echo $todaytable['Sci_Name'];?></i></a><br></td>
+          <td><?php echo $todaytable['Time'];?><br></td><td id="recent_detection_middle_td">
+          <div>
+            <div>
+            <?php if(!empty($config["FLICKR_API_KEY"])) { ?>
+              <img style="float:left;height:75px;" onclick='setModalText(<?php echo $iterations; ?>,"<?php echo urlencode($image[2]); ?>",  "<?php echo $image[3]; ?>", "<?php echo $image[4]; ?>", "<?php echo $image[1]; ?>")' src="<?php echo $image[1]; ?>" id="birdimage" class="img1">
+            <?php } ?>
+          </div>
+            <div>
+            <b><a class="a2" href="https://allaboutbirds.org/guide/<?php echo $comname;?>" target="top"><?php echo $todaytable['Com_Name'];?></a></b><br>
+            <a class="a2" href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="top"><i><?php echo $todaytable['Sci_Name'];?></i></a><br></td>
+        </div></div>
           <td><b>Confidence:</b> <?php echo round((float)round($todaytable['Confidence'],2) * 100 ) . '%';?><br></td>
+          <?php if(!isset($_GET['mobile'])) { ?>
           <td style="min-width:180px"><audio controls preload="none" title="<?php echo $filename;?>"><source preload="none" src="<?php echo $filename;?>"></video>
+          <?php } ?>
           </td>
         <?php } ?>
   <?php }?>