Added species selection hint (ajax)

This commit is contained in:
Samuel Ortion 2021-04-01 14:31:56 +02:00
parent ee3960c95a
commit 3ef76404a7
6 changed files with 185 additions and 19 deletions

View File

@ -1,15 +0,0 @@
<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.ortion.xyz/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '4']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->

View File

@ -0,0 +1,78 @@
<?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$root = realpath($_SERVER["DOCUMENT_ROOT"]);
require "$root/database/credentials.php";
// Connect the database
try {
$db = new PDO("mysql:host=$host;dbname=$database;charset=utf8",
$user,
$password,
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
));
} catch (Exception $e) {
die("Error : ".$e->getMessage());
}
$req = $db->prepare('SELECT * FROM `taxa`');
$req->execute();
$result = $req->fetchAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore | Chiro - Canto</title>
<link rel="stylesheet" type="text/css" href="/styles/style.css">
</head>
<?php
include("$root/analytics/matomo.php");
?>
<body>
<?php include("$root/menu.php");?>
<?php include("$root/header.php");?>
<h3>Chiroptera Taxa</h3>
<p>These taxa come from INPN TAXREF v14.0.</p>
<table>
<thead>
<tr>
<th>Kingdom</th>
<th>Phylum</th>
<th>Class</th>
<th>Order</th>
<th>Family</th>
<th>Subfamily</th>
<th>Tribu</th>
<th>Genus</th>
<th>Species</th>
</tr>
</thead>
<tbody>
<?php
foreach ($result as $row)
{
?>
<tr>
<td><?=$row['taxon_kingdom']?></td>
<td><?=$row['taxon_phylum']?></td>
<td><?=$row['taxon_class']?></td>
<td><?=$row['taxon_order']?></td>
<td><?=$row['taxon_family']?></td>
<td><?=$row['taxon_subfamily']?></td>
<td><?=$row['taxon_tribu']?></td>
<td><?=$row['taxon_genus']?></td>
<td><?=$row['taxon_species']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php include("$root/footer.php");?>
</body>
<script src="/scripts/script.js"></script>
</html>

View File

@ -37,7 +37,7 @@ if ($file = fopen("/var/www/chiro-canto/public/database/TAXREF14.0_CHIRO.csv", '
"order"=>$order,
"family"=>$family,
"subfamily"=>$subfamily,
"tribu"=>$subfamily,
"tribu"=>$tribu,
"genus"=>$genus,
"species"=>$species
));

View File

@ -0,0 +1,54 @@
<?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$root = realpath($_SERVER["DOCUMENT_ROOT"]);
require "$root/database/credentials.php";
// Connect the database
try {
$db = new PDO("mysql:host=$host;dbname=$database;charset=utf8",
$user,
$password,
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
));
} catch (Exception $e) {
die("Error : ".$e->getMessage());
}
$req = $db->prepare('SELECT taxon_species FROM `taxa`');
$req->execute();
$result = $req->fetchAll();
$species = array();
foreach ($result as $row) {
$species[] = $row['taxon_species'];
}
$q = $_REQUEST['q'];
$hint = array();
// 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
?>
<select name="species-hint" id="species-hint">
<?php
foreach ($hint as $sp) {
?>
<option value="<?=$sp?>"><?=$sp?></option>
<?php
}
?>
</select>
<?

View File

@ -9,8 +9,10 @@
<label for="file">File*<span class="info">Audio File must be in wav format.</span></label>
<input type="file" name="file" value="file" required><br>
<label for="spchoice">Species*</label><br>
<input type="radio" name="spchoice" value="species" id="species" checked>
<input type="text" name="species" value="<?=isset($_COOKIE['species']) ? $_COOKIE['species'] : "" ?>" placeholder="Enter a species.."><br>
<input type="radio" name="spchoice" value="species" id="spchoice" checked>
<input type="text" name="species" value="<?=isset($_COOKIE['species']) ? $_COOKIE['species'] : "" ?>" id="species" placeholder="Enter a species..">
<br>
<span id="hint"></span>
<input type="radio" name="spchoice" value="unknown" id="spunknown">
<label for="spunknown">Identity unknown</label>
<br>
@ -52,3 +54,4 @@
<textarea id="remarks" name="remarks"></textarea><br>
<input type="submit" name="submit" value="submit">
</form>
<script src="scripts/ajax_species_suggestion.js"></script>

View File

@ -0,0 +1,46 @@
function showHint(str) {
if (str.length == 0) {
document.getElementById("hint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("hint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", `getspecieshint.php?q=${str}`, true);
xmlhttp.send();
}
}
document.getElementById('species').addEventListener('keyup', function() {
// console.log(this.value);
showHint(this.value);
});
function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeoutInMs) {
var startTimeInMs = Date.now();
(function loopSearch() {
if (document.querySelector(selector) != null) {
callback();
return;
}
else {
setTimeout(function () {
if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
return;
loopSearch();
}, checkFrequencyInMs);
}
})();
}
// Call the below function
waitForElementToDisplay("#species-hint", function(){
this.addEventListener('click', function() {
species_select = document.getElementById('species-hint')
document.getElementById('species').value = species_select.value;
// console.log(species_select.value);
});
},1000,9000);