From 6b62200934b66379752cd089b618c69a9adb512c Mon Sep 17 00:00:00 2001
From: Alexandre <44178713+alexbelgium@users.noreply.github.com>
Date: Sat, 18 May 2024 23:15:36 +0200
Subject: [PATCH] Update convert_list.php

---
 .../helpers/convert_list/convert_list.php     | 95 +++++++++----------
 1 file changed, 46 insertions(+), 49 deletions(-)

diff --git a/birdnet-pi/rootfs/helpers/convert_list/convert_list.php b/birdnet-pi/rootfs/helpers/convert_list/convert_list.php
index 2fd1afa66..0367af876 100644
--- a/birdnet-pi/rootfs/helpers/convert_list/convert_list.php
+++ b/birdnet-pi/rootfs/helpers/convert_list/convert_list.php
@@ -1,42 +1,25 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
+  /* Add your custom styles here */
 </style>
 
 <p><strong>This tool will allow to convert on-the-fly species to compensate for model errors. It SHOULD NOT BE USED except if you know what you are doing, instead the model errors should be reported to the owner. However, it is still convenient for systematic biases that are confirmed through careful listening of samples, while waiting for the models to be updated.</strong></p>
 
 <div class="customlabels column1">
-<form action="" method="GET" id="add">
-  <input type="hidden" id="species" name="species">
-  <h3>Specie to convert from :</h3>
-  <!-- Input box to filter options in the first table -->
-  <input type="text" id="species1Search" onkeyup="filterOptions('species1')" placeholder="Search for species...">
-  <select name="species1" id="species1" size="25">
-  <?php
-    error_reporting(E_ALL);
-    ini_set('display_errors',1);
-
-    $filename = './scripts/labels.txt';
-    $eachline = file($filename, FILE_IGNORE_NEW_LINES);
-
-    foreach($eachline as $lines){echo
-  "<option value=\"".$lines."\">$lines</option>";}
-  ?>
-  </select>
-  <br><br> <!-- Added a space between the two tables -->
-  <h3>Specie to convert to :</h3>
-  <!-- Input box to filter options in the second table -->
-  <input type="text" id="species2Search" onkeyup="filterOptions('species2')" placeholder="Search for species...">
-  <select name="species2" id="species2" size="25">
-  <?php
-    foreach($eachline as $lines){echo
-  "<option value=\"".$lines."\">$lines</option>";}
-  ?>
-  </select>
-  <input type="hidden" name="add" value="add">
-</form>
-<div class="customlabels smaller">
-  <button type="submit" name="view" value="Converted" form="add">>>ADD>></button>
-</div>
+  <form action="" method="GET" id="add">
+    <input type="hidden" id="species" name="species">
+    <h3>Specie to convert from:</h3>
+    <input type="text" id="species1Search" placeholder="Search for species...">
+    <select name="species1" id="species1" size="25"></select>
+    <br><br>
+    <h3>Specie to convert to:</h3>
+    <input type="text" id="species2Search" placeholder="Search for species...">
+    <select name="species2" id="species2" size="25"></select>
+    <input type="hidden" name="add" value="add">
+  </form>
+  <div class="customlabels smaller">
+    <button type="submit" name="view" value="Converted" form="add">>>ADD>></button>
+  </div>
 </div>
 
 <div class="customlabels column2">
@@ -69,7 +52,19 @@
 <input type="hidden" id="hiddenSpecies" name="hiddenSpecies">
 
 <script>
-    document.getElementById("add").addEventListener("submit", function(event) {
+  // Assuming labels are defined in PHP and passed to JavaScript
+  var labels1 = <?php echo json_encode($eachline); ?>;
+  var labels2 = <?php echo json_encode($eachline); ?>;
+
+  document.getElementById('species1Search').addEventListener('keyup', function() {
+    filterOptions('species1', labels1);
+  });
+
+  document.getElementById('species2Search').addEventListener('keyup', function() {
+    filterOptions('species2', labels2);
+  });
+  
+  document.getElementById("add").addEventListener("submit", function(event) {
       var speciesSelect1 = document.getElementById("species1");
       var speciesSelect2 = document.getElementById("species2");
       if (speciesSelect1.selectedIndex < 0 || speciesSelect2.selectedIndex < 0) {
@@ -83,21 +78,23 @@
       }
     });
 
-    // Function to filter options in a select element
-    function filterOptions(id) {
-      var input = document.getElementById(id + 'Search');
-      var filter = input.value.toUpperCase();
-      var select = document.getElementById(id);
-      var options = select.getElementsByTagName('option');
-      for (var i = 0; i < options.length; i++) {
-        var txtValue = options[i].textContent || options[i].innerText;
-        if (txtValue.toUpperCase().indexOf(filter) > -1) {
-          options[i].style.display = '';
-        } else {
-          options[i].style.display = 'none';
-        }
-  }
-}
-
+  // Function to filter options in a select element
+  function filterOptions(id, labels) {
+    var input = document.getElementById(id + 'Search');
+    var filter = input.value.toUpperCase();
+    var select = document.getElementById(id);
+    // Clear the current options
+    while (select.firstChild) {
+      select.removeChild(select.firstChild);
     }
+    // Populate the select with options that match the filter
+    labels.forEach(function(label) {
+      if (label.toUpperCase().indexOf(filter) > -1) {
+        var option = document.createElement('option');
+        option.value = label;
+        option.text = label;
+        select.appendChild(option);
+      }
+    });
+  }
 </script>