Chiro-Canto/chiro-canto
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added advanced search

Browse Source
This commit is contained in:
Samuel Ortion 2021-03-31 15:09:10 +02:00
parent 730e23b1a0
commit c8bc08b43e
9 changed files with 425 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
public/explore/index.php Normal file
View File

@ -0,0 +1,56 @@
<?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 id, recordist_name, file_name, license, species, sound_type, date, time FROM `records` WHERE species="unknown" ORDER BY `entry_timestamp` ASC LIMIT 1');
// $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>
<body>
<?php include("$root/menu.php");?>
<?php include("$root/header.php");?>
<section>
<h3>Explore</h3>
<ul>
<a href="search">
<li>Advanced Search</li>
</a>
<a href="mysteries">
<li>Mystery Recordings</li>
</a>
<a href="spectrograms">
<li>Recording Spectrograms</li>
</a>
<a href="random">
<li>Random Recording</li>
</a>
</ul>
</section>
<?php include("$root/footer.php");?>
</body>
<script src="/scripts/script.js"></script>
</html>

67
public/explore/random/index.php Normal file
View File

@ -0,0 +1,67 @@
<?php
session_reset();
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 `records` ORDER BY RAND() ASC LIMIT 1');
$req->execute();
if ($data = $req->fetch())
{
?>
<!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>
<body>
<?php include("$root/menu.php");?>
<?php include("$root/header.php");?>
<section>
<h3>Explore</h3>
<h4>Random Record</h4>
<table>
<thead>
<tr>
<th>Species</th>
<th>File Name</th>
<th>Author</th>
<th>License</th>
<th>Audio</th>
</tr>
</thead>
<tbody>
<tr>
<td><?=$data['species']." ".$data['subspecies']?></td>
<td><a href="../spectrograms/?record=<?=$data['id']?>"><?=$data['file_name']?></a></td>
<td><?=$data['recordist_name']?></td>
<td><?=$data['license']?></td>
<td><audio src="/storage/records/<?=$data['file_name']?>" controls></audio></td>
</tr>
</tbody>
</table>
<p>Click on the file name to go to the spectrogram view.</p>
</section>
<?php include("$root/footer.php");?>
</body>
<script src="/scripts/script.js"></script>
</html>
<?php
}

59
public/explore/search/index.php Normal file
View File

@ -0,0 +1,59 @@
<?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 id, recordist_name, file_name, license, species, sound_type, date, time FROM `records` WHERE species="unknown" ORDER BY `entry_timestamp` ASC LIMIT 1');
// $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>
<body>
<?php include("$root/menu.php");?>
<?php include("$root/header.php");?>
<section>
<h3>Explore</h3>
<h4>Multicriteria recordings Search</h4>
<form action="searchrecord.php" method="post">
<label for="species">Species name</label>
<input type="text" name="species" id="species">
<label for="subspecies">Subspecies name</label>
<input type="text" name="subspecies" id="subspecies">
<label for="recordist">Recordist name</label>
<input type="text" name="recordist" id="recordist">
<label for="date-after">After date</label>
<input type="text" name="date-after" id="date-after" placeholder="YYYY-MM-DD">
<label for="date-before">Before date</label>
<input type="text" name="date-before" id="date-before" placeholder="YYYY-MM-DD">
<label for="in-remarks">Keyword(s) in remarks (comma separated)</label>
<input type="text" name="keywords" id="in-remarks">
<input type="submit" name="submit" value="Search"><input type="reset">
</form>
</section>
<?php include("$root/footer.php");?>
</body>
<script src="/scripts/script.js"></script>
</html>

167
public/explore/search/searchrecord.php Normal file
View File

@ -0,0 +1,167 @@
<?php
session_reset();
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());
}
$_SESSION['error_msg'] = "";
if (isset($_POST['submit']))
{
if (isset($_POST['species']) and $_POST['species'] != "")
{
$_SESSION['query']['species'] = $_POST['species'];
}
if (isset($_POST['subspecies']) and $_POST['subspecies'] != "")
{
$_SESSION['query']['subspecies'] = $_POST['subspecies'];
}
if (isset($_POST['recordist']) and $_POST['recordist'] != "")
{
$_SESSION['query']['recordist'] = $_POST['recordist'];
}
if (isset($_POST['date-after']) and $_POST['date-after'] != "")
{
$_SESSION['query']['date-after'] = $_POST['date-after'];
}
if (isset($_POST['date-before']) and $_POST['date-before'] != "")
{
$_SESSION['query']['date-before'] = $_POST['date-before'];
}
if (isset($_POST['keywords']) and $_POST['keywords'] != "")
{
$_SESSION['query']['keywords'] = explode(',', $_POST['keywords']);
}
} else {
$_SESSION['error_msg'] .= "You did not submit the search form. \n";
}
if ($_SESSION['error_msg'] == "") {
if (isset($_SESSION['query'])) {
$sql = 'SELECT * FROM `records` WHERE ';
$and = False;
if (isset($_SESSION['query']['species']) and $_SESSION['query']['species'] != "") {
if ($and) {
$sql .= " AND ";
}
$sql .= ' species="'.$_SESSION['query']['species'].'"';
$and = True;
}
if (isset($_SESSION['query']['subspecies']) and $_SESSION['query']['subspecies'] != "") {
if ($and) {
$sql .= " AND ";
}
$sql .= ' subspecies="'.$_SESSION['query']['subspecies'].'"';
$and = True;
}
if (isset($_SESSION['query']['recordist']) and $_SESSION['query']['recordist'] != "") {
if ($and) {
$sql .= " AND ";
}
$sql .= ' recordist_name="'.$_SESSION['query']['recordist'].'"';
$and = True;
}
if (isset($_SESSION['query']['date-after']) and $_SESSION['query']['date-after'] != "") {
if ($and) {
$sql .= " AND ";
}
$sql .= ' date>='.$_SESSION['query']['date-after'];
$and = True;
}
if (isset($_SESSION['query']['date-before']) and $_SESSION['query']['date-before'] != "") {
$sql .= ' date<='.$_SESSION['query']['date-before'];
}
if (isset($_SESSION['query']['keywords'])) {
$and = False;
foreach ($_SESSION['query']['keywords'] as $keyword) {
if ($keyword != ""){
if ($and) {
$sql .= " AND ";
}
$sql .= "LIKE %$keyword%";
}
$and = True;
}
}
// echo $sql;
$req = $db->prepare($sql);
$req->execute();
$result = $req->fetchAll();
} else {
$_SESSION['error_msg'] .= "You did not enter any query.\n";
header("Location: /explore/search");
}
} else {
header("Location: /explore/search");
}
if (isset($result)) {
?>
<!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>
<body>
<?php include("$root/menu.php");?>
<?php include("$root/header.php");?>
<section>
<h3>Explore</h3>
<h4>Search Results</h4>
<?php
if (empty($result)) {
echo "No result for this query, please try again.\n";
} else {
?>
<table>
<thead>
<tr>
<th>File name</th>
<th>Author</th>
<th>License</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<?php
foreach($result as $row) {
?>
<tr>
<td><a href="/explore/spectrograms?record=<?=$row['id']?>"><?=$row['file_name']?></a></td>
<td><?=$row['recordist_name']?></td>
<td><?=$row['license']?></td>
<td><?=$row['date']?> <?=$row['time']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}
?>
</section>
<?php include("$root/footer.php");?>
</body>
<script src="/scripts/script.js"></script>
</html>
<?php
}

48
public/explore/spectrograms/index.php
View File

@ -15,10 +15,16 @@ try {
} catch (Exception $e) {
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` ASC LIMIT 1');
$req->execute();
$result = $req->fetchAll();
if (isset($_GET['record'])) {
$req = $db->prepare('SELECT id, recordist_name, file_name, license, species, sound_type, date, time FROM `records` WHERE id=:id');
$req->execute(array(
"id"=>$_GET['record']
));
} else {
$req = $db->prepare('SELECT id, recordist_name, file_name, license, species, sound_type, date, time FROM `records` ORDER BY date DESC, time DESC LIMIT 1');
$req->execute();
}
$data = $req->fetch();
?>
<!DOCTYPE html>
@ -34,36 +40,38 @@ $result = $req->fetchAll();
<?php include("$root/menu.php");?>
<?php include("$root/header.php");?>
<section>
<h3>Mystery recording</h3>
<h3>Spectrograms</h3>
<?php
foreach ($result as $row)
{
?>
<div class="sound">
<h3><?=$row['file_name']?></h3>
<h4><em><?=$row['species']?></em></h4>
<p>Recorded on <?=$row['date']?> at <?=$row['time']?></p>
<h3><?=$data['file_name']?></h3>
<h4><em><?=$data['species']?></em></h4>
<p>Recorded on <?=$data['date']?> at <?=$data['time']?></p>
<?php
if (file_exists($root."/storage/spectrograms/".$row['file_name'].'.png'))
if (file_exists($root."/storage/spectrograms/".$data['file_name'].'.png'))
{
?>
<!-- <img id="spectrogram" src="<?="/storage/spectrograms/".$row['file_name'].'.png'?>" alt="bat sound spectrogram"> -->
<!-- <img id="spectrogram" src="<?="/storage/spectrograms/".$data['file_name'].'.png'?>" alt="bat sound spectrogram"> -->
<?php
}
?>
<div id="waveform"></div>
<div id="wave-spectrogram"></div>
<br>
<audio src="<?="/storage/records/".$row['file_name']?>" id="audio" controls></audio>
<p><?=$row['license']?> <?=$row['recordist_name']?></p>
<audio src="<?="/storage/records/".$data['file_name']?>" id="audio"></audio>
<input type="button" name="play" value="play" id="play">
<input type="button" value="pause" id="pause">
<input type="button" value="restart" id="restart"><br>
<p><?=$data['license']?> <?=$data['recordist_name']?></p>
</div>
<?php
}
?>
</section>
<?php include("$root/footer.php");?>
<br>
<script src="https://unpkg.com/wavesurfer.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.spectrogram.min.js" type="text/javascript"></script>
<script src="scripts/spectro.js"></script>
<script src="/scripts/script.js"></script>
</body>
<script src="/scripts/wavesurfer/src/wavesurfer.js"></script>
<script src="scripts/script.js"></script>
<script src="/scripts/script.js"></script>
</html>

35
public/explore/spectrograms/scripts/spectro.js Normal file
View File

@ -0,0 +1,35 @@
'use strict';
let audio = document.getElementById('audio');
let file_path = audio.src;
var wavesurfer;
// Init & load
document.addEventListener('DOMContentLoaded', function() {
// Create an instance
var options = {
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple',
loaderColor: 'purple',
cursorColor: 'navy',
plugins: [
WaveSurfer.spectrogram.create({
container: '#wave-spectrogram'
})
]
};
wavesurfer = WaveSurfer.create(options);
wavesurfer.load(file_path);
});
let play = document.getElementById('play').addEventListener('click', function() {
wavesurfer.play();
});
let pause = document.getElementById('pause').addEventListener('click', function() {
wavesurfer.pause();
});
let restart = document.getElementById('restart').addEventListener('click', function() {
wavesurfer.play(0);
});

2
public/header.php
View File

@ -1,9 +1,11 @@
<header>
<div class="container row">
<a href="/">
<div class="container column">
<h1>Chiro - Canto</h1>
<h2>Bat sound sharing tools</h2>
</div>
</a>
<?php include("searchbar.php");?>
</div>
</header>

5
public/styles/style.css
View File

@ -13,6 +13,11 @@ header {
margin-top: 1em;
}
header a {
text-decoration: none;
color: black;
}
nav, nav .container{
padding: 0;
margin: 0;

2
sync.sh Normal file
View File

@ -0,0 +1,2 @@
#!/bin/bash
rsync -avz /var/www/chiro-canto root@93.113.207.244:/var/www/