Added species selection hint (ajax)
This commit is contained in:
parent
ee3960c95a
commit
3ef76404a7
|
|
@ -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 -->
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
));
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<?
|
||||
|
|
@ -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>
|
||||
|
|
@ -51,4 +53,5 @@
|
|||
<label for="remarks">Remarks</label>
|
||||
<textarea id="remarks" name="remarks"></textarea><br>
|
||||
<input type="submit" name="submit" value="submit">
|
||||
</form>
|
||||
</form>
|
||||
<script src="scripts/ajax_species_suggestion.js"></script>
|
||||
|
|
@ -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);
|
||||
Loading…
Reference in New Issue