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 -->
|
|
||||||
78
public/explore/taxa/index.php
Normal file
78
public/explore/taxa/index.php
Normal 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>
|
||||||
@ -37,7 +37,7 @@ if ($file = fopen("/var/www/chiro-canto/public/database/TAXREF14.0_CHIRO.csv", '
|
|||||||
"order"=>$order,
|
"order"=>$order,
|
||||||
"family"=>$family,
|
"family"=>$family,
|
||||||
"subfamily"=>$subfamily,
|
"subfamily"=>$subfamily,
|
||||||
"tribu"=>$subfamily,
|
"tribu"=>$tribu,
|
||||||
"genus"=>$genus,
|
"genus"=>$genus,
|
||||||
"species"=>$species
|
"species"=>$species
|
||||||
));
|
));
|
||||||
|
|||||||
54
public/upload/getspecieshint.php
Normal file
54
public/upload/getspecieshint.php
Normal 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>
|
||||||
|
<?
|
||||||
@ -9,8 +9,10 @@
|
|||||||
<label for="file">File*<span class="info">Audio File must be in wav format.</span></label>
|
<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>
|
<input type="file" name="file" value="file" required><br>
|
||||||
<label for="spchoice">Species*</label><br>
|
<label for="spchoice">Species*</label><br>
|
||||||
<input type="radio" name="spchoice" value="species" id="species" checked>
|
<input type="radio" name="spchoice" value="species" id="spchoice" checked>
|
||||||
<input type="text" name="species" value="<?=isset($_COOKIE['species']) ? $_COOKIE['species'] : "" ?>" placeholder="Enter a species.."><br>
|
<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">
|
<input type="radio" name="spchoice" value="unknown" id="spunknown">
|
||||||
<label for="spunknown">Identity unknown</label>
|
<label for="spunknown">Identity unknown</label>
|
||||||
<br>
|
<br>
|
||||||
@ -51,4 +53,5 @@
|
|||||||
<label for="remarks">Remarks</label>
|
<label for="remarks">Remarks</label>
|
||||||
<textarea id="remarks" name="remarks"></textarea><br>
|
<textarea id="remarks" name="remarks"></textarea><br>
|
||||||
<input type="submit" name="submit" value="submit">
|
<input type="submit" name="submit" value="submit">
|
||||||
</form>
|
</form>
|
||||||
|
<script src="scripts/ajax_species_suggestion.js"></script>
|
||||||
46
public/upload/scripts/ajax_species_suggestion.js
Normal file
46
public/upload/scripts/ajax_species_suggestion.js
Normal 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);
|
||||||
Loading…
Reference in New Issue
Block a user