Improved sp-hint

This commit is contained in:
Samuel Ortion 2021-04-20 18:58:20 +02:00
parent 1e4ae8b19e
commit 0ada636f57
4 changed files with 37 additions and 45 deletions

View File

@ -13,7 +13,7 @@ try {
die("Error : ".$e->getMessage()); die("Error : ".$e->getMessage());
} }
$req = $db->prepare('SELECT id, recordist_name, file_name, license, species, sound_type, date, time FROM `records` ORDER BY `entry_timestamp` DESC LIMIT 1'); $req = $db->prepare('SELECT * FROM `records` ORDER BY `entry_timestamp` DESC LIMIT 1');
$req->execute(); $req->execute();
if ($data = $req->fetch()) if ($data = $req->fetch())
{ {
@ -22,17 +22,12 @@ if ($data = $req->fetch())
<h3><?=$data['file_name']?></h3> <h3><?=$data['file_name']?></h3>
<h4><em><?=$data['species']?></em></h4> <h4><em><?=$data['species']?></em></h4>
<p><?=_('Recorded on')?> <?=$data['date']?> at <?=$data['time']?></p> <p><?=_('Recorded on')?> <?=$data['date']?> at <?=$data['time']?></p>
<?php
if (file_exists($root."/storage/spectrograms/".$data['file_name'].'.png'))
{
?>
<img id="spectrogram" src="<?="/storage/spectrograms/".$data['file_name'].'.png'?>" alt="bat sound spectrogram">
<?php
}
?>
<br> <br>
<audio src="<?="../storage/records/".$data['file_name']?>" controls></audio> <audio src="<?="../storage/records/".$data['file_name']?>" controls></audio>
<p><?=$data['license']?> <?=$data['recordist_name']?></p> <p><?=$data['license']?> <?=$data['recordist_name']?></p>
<div class="remarks">
<?=$data['remarks']?>
</div>
</div> </div>
<?php <?php
} else { } else {

View File

@ -15,36 +15,33 @@ try {
} catch (Exception $e) { } catch (Exception $e) {
die("Error : ".$e->getMessage()); die("Error : ".$e->getMessage());
} }
$q = $_REQUEST['q'];
$req = $db->prepare('SELECT taxon_species FROM `taxa`'); $req = $db->prepare("SELECT taxon_species FROM `taxa`
WHERE (id LIKE '%$q%'
OR lower(taxon_phylum) LIKE '%$q%'
OR lower(taxon_kingdom) LIKE '%$q%'
OR lower(taxon_class) LIKE '%$q%'
OR lower(taxon_order) LIKE '%$q%'
OR lower(taxon_family) LIKE '%$q%'
OR lower(taxon_subfamily) LIKE '%$q%'
OR lower(taxon_tribu) LIKE '%$q%'
OR lower(taxon_genus) LIKE '%$q%'
OR lower(taxon_species) LIKE '%$q%')");
$req->execute(); $req->execute();
$result = $req->fetchAll(); $result = $req->fetchAll();
// print_r($result);
$species = array(); $species = array();
foreach ($result as $row) { foreach ($result as $row) {
$species[] = $row['taxon_species']; $species[] = $row['taxon_species'];
} }
$q = $_REQUEST['q'];
$hint = array();
// print_r($species); // print_r($species);
if ($q !== "") {
$q = strtolower($q);
$len = strlen($q);
foreach($species as $sp) {
if (stristr($q, substr($sp, 0, $len))) {
$hint[] = $sp;
}
}
}
// Output "no suggestion" if no hint was found or output correct values // Output "no suggestion" if no hint was found or output correct values
?> ?>
<select name="species-hint" id="species-hint"> <select name="species" id="species">
<?php <?php
foreach ($hint as $sp) { echo "Hello";
foreach ($species as $sp) {
?> ?>
<option value="<?=$sp?>"><?=$sp?></option> <option value="<?=$sp?>"><?=$sp?></option>
<?php <?php

View File

@ -13,7 +13,7 @@ function showHint(str) {
xmlhttp.send(); xmlhttp.send();
} }
} }
document.getElementById('species').addEventListener('keyup', function() { document.getElementById('sp-entry').addEventListener('keyup', function() {
// console.log(this.value); // console.log(this.value);
showHint(this.value); showHint(this.value);
}); });
@ -22,25 +22,22 @@ function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeout
var startTimeInMs = Date.now(); var startTimeInMs = Date.now();
(function loopSearch() { (function loopSearch() {
if (document.querySelector(selector) != null) { if (document.querySelector(selector) != null) {
callback(); callback();
return;
}
else {
setTimeout(function () {
if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
return; return;
loopSearch(); } else {
}, checkFrequencyInMs); setTimeout(function() {
} if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
return;
loopSearch();
}, checkFrequencyInMs);
}
})(); })();
} }
// Call the below function // Call the below function
waitForElementToDisplay("#species-hint", function(){ waitForElementToDisplay("#species-hint", function() {
this.addEventListener('click', function() { this.addEventListener('click', function() {
species_select = document.getElementById('species-hint') species_select = document.getElementById('species');
document.getElementById('species').value = species_select.value;
// console.log(species_select.value);
}); });
},1000,9000); }, 1000, 9000);

View File

@ -12,7 +12,10 @@
<label for="spchoice"><?=_('Species')?>*</label><br> <label for="spchoice"><?=_('Species')?>*</label><br>
<input type="radio" name="spchoice" value="species" id="spchoice" checked> <input type="radio" name="spchoice" value="species" id="spchoice" checked>
<label for="spchoice"><?=_('Species identified')?></label> <label for="spchoice"><?=_('Species identified')?></label>
<input type="text" name="species" value="<?= isset($_COOKIE['species']) ? $_COOKIE['species'] : "" ?>" id="species" placeholder="<?=_('Enter a species..')?>"> <input type="text" name="sp-entry" value="<?= isset($_COOKIE['species']) ? $_COOKIE['species'] : "" ?>" id="sp-entry" placeholder="<?=_('Enter a species..')?>">
<!-- <select name="species" id="species">
<option value="<?=_('Type species above')?>"></option>
</select> -->
<br> <br>
<span id="hint"></span> <span id="hint"></span>
<input type="radio" name="spchoice" value="unknown" id="spunknown"> <input type="radio" name="spchoice" value="unknown" id="spunknown">