New feat : add a tools for species management

homepage/static/generateMiniGraph.js

@@ -0,0 +1,116 @@
+function generateMiniGraph(elem, comname, days = 30) {
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', '/todays_detections.php?comname=' + encodeURIComponent(comname) + '&days=' + days);
+  xhr.onload = function() {
+    if (xhr.status === 200) {
+      var detections = JSON.parse(xhr.responseText);
+      if (typeof(window.chartWindow) !== 'undefined') {
+        document.body.removeChild(window.chartWindow);
+        window.chartWindow = undefined;
+      }
+      var chartWindow = document.createElement('div');
+      chartWindow.className = 'chartdiv';
+      document.body.appendChild(chartWindow);
+
+      var canvas = document.createElement('canvas');
+      canvas.width = chartWindow.offsetWidth;
+      canvas.height = chartWindow.offsetHeight - 40;
+      chartWindow.appendChild(canvas);
+
+      var ctx = canvas.getContext('2d');
+      var chart = new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: detections.map(item => item.date),
+          datasets: [{
+            label: 'Detections',
+            data: detections.map(item => item.count),
+            backgroundColor: '#9fe29b',
+            borderColor: '#77c487',
+            borderWidth: 1,
+            lineTension: 0.3,
+            pointRadius: 1,
+            pointHitRadius: 10,
+            trendlineLinear: {
+              style: 'rgba(55, 99, 64, 0.5)',
+              lineStyle: 'solid',
+              width: 1.5
+            }
+          }]
+        },
+        options: {
+          layout: { padding: { right: 10 } },
+          title: { display: true, text: 'Detections Over ' + days + 'd' },
+          legend: { display: false },
+          scales: {
+            xAxes: [{
+              display: true,
+              gridLines: { display: true },
+              ticks: {
+                autoSkip: true,
+                maxTicksLimit: 6,
+                callback: value => value.substring(5)
+              }
+            }],
+            yAxes: [{
+              gridLines: { display: false },
+              ticks: { beginAtZero: true, precision: 0, maxTicksLimit: 5 }
+            }]
+          }
+        }
+      });
+
+      var buttonRect = elem.getBoundingClientRect();
+      var chartRect = chartWindow.getBoundingClientRect();
+      if (window.innerWidth < 700) {
+        chartWindow.style.left = 'calc(75% - ' + (chartRect.width / 2) + 'px)';
+      } else {
+        chartWindow.style.left = (buttonRect.right + 10) + 'px';
+      }
+
+      var buttonCenter = buttonRect.top + (buttonRect.height / 2);
+      var chartHeight = chartWindow.offsetHeight;
+      var chartTop = buttonCenter - (chartHeight / 2);
+      chartWindow.style.top = chartTop + 'px';
+
+      var closeButton = document.createElement('button');
+      closeButton.id = 'chartcb';
+      closeButton.innerText = 'X';
+      closeButton.style.position = 'absolute';
+      closeButton.style.top = '5px';
+      closeButton.style.right = '5px';
+      closeButton.addEventListener('click', () => {
+        document.body.removeChild(chartWindow);
+        window.chartWindow = undefined;
+      });
+      chartWindow.appendChild(closeButton);
+
+      var selector = document.createElement('select');
+      [30, 180, 360, 720, 1080].forEach(opt => {
+        var option = document.createElement('option');
+        option.value = opt;
+        option.text = opt + 'd';
+        if (opt === days) option.selected = true;
+        selector.appendChild(option);
+      });
+      selector.addEventListener('change', function() {
+        generateMiniGraph(elem, comname, parseInt(this.value));
+      });
+      selector.style.position = 'absolute';
+      selector.style.bottom = '5px';
+      selector.style.left = '5px';
+      chartWindow.appendChild(selector);
+
+      window.chartWindow = chartWindow;
+    }
+  };
+  xhr.send();
+}
+
+window.addEventListener('scroll', function() {
+  var charts = document.querySelectorAll('.chartdiv');
+  charts.forEach(chart => {
+    chart.parentNode.removeChild(chart);
+    window.chartWindow = undefined;
+  });
+});

homepage/views.php

@@ -173,6 +173,7 @@ function update_species_list($filename, $species, $add) {
       <button type=\"submit\" name=\"view\" value=\"Included\" form=\"views\">Custom Species List</button>
       <button type=\"submit\" name=\"view\" value=\"Excluded\" form=\"views\">Excluded Species List</button>
       <button type=\"submit\" name=\"view\" value=\"Whitelisted\" form=\"views\">Whitelist Species List</button>
+      <button type=\"submit\" name=\"view\" value=\"Species Management\" form=\"views\">Species Management</button>
       </form>
       </div>";
   }
@@ -203,6 +204,10 @@ function update_species_list($filename, $species, $add) {
     $species_list="whitelist";
     include('./scripts/species_list.php');
   }
+  if($_GET['view'] == "Species Management"){
+    ensure_authenticated();
+    include('scripts/species_tools.php');
+  }
   if($_GET['view'] == "File"){
     echo "<iframe src='scripts/filemanager/filemanager.php'></iframe>";
   }

scripts/backup_data.sh

@@ -171,6 +171,7 @@ optional=("/home/$BIRDNET_USER/BirdNET-Pi/apprise.txt"
 "/home/$BIRDNET_USER/BirdNET-Pi/scripts/blacklisted_images.txt"
 "/home/$BIRDNET_USER/BirdNET-Pi/scripts/disk_check_exclude.txt"
 "/home/$BIRDNET_USER/BirdNET-Pi/exclude_species_list.txt"
+"/home/$BIRDNET_USER/BirdNET-Pi/confirmed_species_list.txt"
 "/home/$BIRDNET_USER/BirdNET-Pi/include_species_list.txt")
 
 [ $ACTION == "backup" ] && backup_check

scripts/clear_all_data.sh

@@ -23,6 +23,7 @@ echo "Re-creating necessary directories"
 [ -d ${PROCESSED} ] || sudo -u ${USER} mkdir -p ${PROCESSED}
 
 sudo -u ${USER} ln -fs $(dirname $my_dir)/exclude_species_list.txt $my_dir
+sudo -u ${USER} ln -fs $(dirname $my_dir)/confirmed_species_list.txt $my_dir
 sudo -u ${USER} ln -fs $(dirname $my_dir)/include_species_list.txt $my_dir
 sudo -u ${USER} ln -fs $(dirname $my_dir)/whitelist_species_list.txt $my_dir
 sudo -u ${USER} ln -fs $(dirname $my_dir)/homepage/* ${EXTRACTED}

scripts/install_services.sh

@@ -65,6 +65,7 @@ create_necessary_dirs() {
   [ -L ${EXTRACTED}/spectrogram.png ] || sudo -u ${USER} ln -sf ${RECS_DIR}/StreamData/spectrogram.png ${EXTRACTED}/spectrogram.png
 
   sudo -u ${USER} ln -fs $my_dir/exclude_species_list.txt $my_dir/scripts
+  sudo -u ${USER} ln -fs $my_dir/confirmed_species_list.txt $my_dir/scripts
   sudo -u ${USER} ln -fs $my_dir/include_species_list.txt $my_dir/scripts
   sudo -u ${USER} ln -fs $my_dir/whitelist_species_list.txt $my_dir/scripts
   sudo -u ${USER} ln -fs $my_dir/homepage/* ${EXTRACTED}

scripts/overview.php

@@ -600,127 +600,8 @@ function startAutoRefresh() {
 }
 </style>
 <script src="static/custom-audio-player.js"></script>
+<script src="static/generateMiniGraph.js"></script>
 <script>
-function generateMiniGraph(elem, comname, days = 30) {
-
-  // Make an AJAX call to fetch the number of detections for the bird species
-  var xhr = new XMLHttpRequest();
-  xhr.open('GET', '/todays_detections.php?comname=' + comname + '&days=' + days);
-  xhr.onload = function() {
-    if (xhr.status === 200) {
-      var detections = JSON.parse(xhr.responseText);
-
-      // Create a div element for the chart window
-      if (typeof(window.chartWindow) != 'undefined') {
-        document.body.removeChild(window.chartWindow);
-        window.chartWindow = undefined;
-      }
-      var chartWindow = document.createElement('div');
-      chartWindow.className = "chartdiv"
-      document.body.appendChild(chartWindow);
-
-
-            // Create a canvas element for the chart
-      var canvas = document.createElement('canvas');
-      canvas.width = chartWindow.offsetWidth;
-      canvas.height = chartWindow.offsetHeight;
-      chartWindow.appendChild(canvas);
-
-      // Create a new Chart.js chart
-      var ctx = canvas.getContext('2d');
-      var chart = new Chart(ctx, {
-        type: 'line',
-        data: {
-          labels: detections.map(item => item.date),
-          datasets: [{
-            label: 'Detections',
-            data: detections.map(item => item.count),
-            backgroundColor: '#9fe29b',
-            borderColor: '#77c487',
-            borderWidth: 1,
-            lineTension: 0.3, // Add smoothing to the line
-            pointRadius: 1, // Make the data points smaller
-            pointHitRadius: 10, // Increase the area around data points for mouse events
-
-          trendlineLinear: {
-            style: "rgba(55, 99, 64, 0.5)",
-            lineStyle: "solid",
-            width: 1.5
-          }
-
-          }]
-        },
-        options: {
-          layout: {
-            padding: {
-              right: 10
-            }
-          },
-          title: {
-            display: true,
-            text: 'Detections Over ' + days + 'd'
-          },
-          legend: {
-            display: false
-          },
-          scales: {
-            xAxes: [{
-              display: false,
-              gridLines: {
-                display: false // Hide the gridlines on the x-axis
-              },
-              ticks: {
-                autoSkip: true,
-                maxTicksLimit: 2
-              }
-            }],
-            yAxes: [{
-              gridLines: {
-                display: false // Hide the gridlines on the y-axis
-              },
-              ticks: {
-                beginAtZero: true,
-                precision: 0,
-                stepSize: 1
-              }
-            }]
-          }
-        }
-      });
-
-      var buttonRect = elem.getBoundingClientRect();
-      var chartRect = chartWindow.getBoundingClientRect();
-      if (window.innerWidth < 700) {
-        chartWindow.style.left = 'calc(75% - ' + (chartRect.width / 2) + 'px)';
-      } else {
-        chartWindow.style.left = (buttonRect.right + 10) + 'px';
-      }
-
-
-      // Calculate the top position of the chart to center it with the button
-      var buttonCenter = buttonRect.top + (buttonRect.height / 2);
-      var chartHeight = chartWindow.offsetHeight;
-      var chartTop = buttonCenter - (chartHeight / 2);
-      chartWindow.style.top = chartTop + 'px';
-
-      // Add a close button to the chart window
-      var closeButton = document.createElement('button');
-      closeButton.id = "chartcb";
-      closeButton.innerText = 'X';
-      closeButton.style.position = 'absolute';
-      closeButton.style.top = '5px';
-      closeButton.style.right = '5px';
-      closeButton.addEventListener('click', function() {
-        document.body.removeChild(chartWindow);
-        window.chartWindow = undefined;
-      });
-      chartWindow.appendChild(closeButton);
-      window.chartWindow = chartWindow;
-    }
-  };
-  xhr.send();
-}
-
 // Listen for the scroll event on the window object
 window.addEventListener('scroll', function() {
   // Get all chart elements