Alexandre
b07c28bbfb
* Change input box logic from selection to filtering * Change user input logic from going to filtering * Update scripts/include_list.php Co-authored-by: Nachtzuster <Nachtzuster@users.noreply.github.com> * Multiple size reverted to 25 ; typo "ol" removed https://github.com/Nachtzuster/BirdNET-Pi/pull/69 * Re-add dummy "Please select"option * Update include_list.php * Align with "option disabled" * Update scripts/exclude_list.php thanks Co-authored-by: Nachtzuster <Nachtzuster@users.noreply.github.com> --------- Co-authored-by: Nachtzuster <Nachtzuster@users.noreply.github.com>
105 lines
3.4 KiB
PHP
105 lines
3.4 KiB
PHP
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
</style>
|
|
|
|
<div class="customlabels column1">
|
|
<form action="" method="GET" id="add">
|
|
<h3>All Species Labels</h3>
|
|
<input autocomplete="off" size="18" type="text" placeholder="Search Species..." id="exclude_species_searchterm" name="exclude_species_searchterm">
|
|
<br>
|
|
<span>Once the desired species has been highlighted, click it and then click ADD to have it excluded.</span>
|
|
<select name="species[]" id="species" multiple 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>
|
|
<input type="hidden" name="add" value="add">
|
|
</form>
|
|
<div class="customlabels smaller">
|
|
<button type="submit" name="view" value="Excluded" form="add">>>ADD>></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="customlabels column2">
|
|
<table><td>
|
|
<button type="submit" name="view" value="Excluded" form="add">>>ADD>></button>
|
|
<br><br>
|
|
<button type="submit" name="view" value="Excluded" form="del">REMOVE</button>
|
|
</td></table>
|
|
</div>
|
|
|
|
<div class="customlabels column3">
|
|
<form action="" method="GET" id="del">
|
|
<h3>Excluded Species List</h3>
|
|
<br><br><br>
|
|
<select name="species[]" id="value2" multiple size="25">
|
|
<option disabled value="base">Please Select</option>
|
|
<?php
|
|
$filename = './scripts/exclude_species_list.txt';
|
|
$eachline = file($filename, FILE_IGNORE_NEW_LINES);
|
|
foreach($eachline as $lines){
|
|
echo
|
|
"<option value=\"".$lines."\">$lines</option>";
|
|
}?>
|
|
</select>
|
|
<input type="hidden" name="del" value="del">
|
|
</form>
|
|
<div class="customlabels smaller">
|
|
<button type="submit" name="view" value="Excluded" form="del">REMOVE</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Store the original list of options in a variable
|
|
var originalOptions = {};
|
|
|
|
document.getElementById("add").addEventListener("submit", function(event) {
|
|
var speciesSelect = document.getElementById("species");
|
|
if (speciesSelect.selectedIndex < 0) {
|
|
alert("Please click the species you want to add.");
|
|
document.querySelector('.views').style.opacity = 1;
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
var search_term = document.querySelector("input#exclude_species_searchterm");
|
|
search_term.addEventListener("keyup", function() {
|
|
filterOptions("species");
|
|
});
|
|
|
|
// Function to filter options in a select element
|
|
function filterOptions(id) {
|
|
var input = document.getElementById("exclude_species_searchterm");
|
|
var filter = input.value.toUpperCase();
|
|
var select = document.getElementById(id);
|
|
var options = select.getElementsByTagName("option");
|
|
|
|
// If the original list of options for this select element hasn't been stored yet, store it
|
|
if (!originalOptions[id]) {
|
|
originalOptions[id] = Array.from(options).map(option => option.value);
|
|
}
|
|
|
|
// Clear the select element
|
|
while (select.firstChild) {
|
|
select.removeChild(select.firstChild);
|
|
}
|
|
|
|
// Populate the select element with the filtered labels
|
|
originalOptions[id].forEach(label => {
|
|
if (label.toUpperCase().indexOf(filter) > -1) {
|
|
let option = document.createElement('option');
|
|
option.value = label;
|
|
option.text = label;
|
|
select.appendChild(option);
|
|
}
|
|
});
|
|
}
|
|
</script>
|