From baba27cee3fcf2c1ebd538987d4230ed7fe79a5e Mon Sep 17 00:00:00 2001
From: Lene Wasskog <lene.wasskog@nibio.no>
Date: Tue, 10 Dec 2024 14:54:25 +0100
Subject: [PATCH] feat: Add search form for querying advisory resources
---
html/index.html | 114 ++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 114 insertions(+)
diff --git a/html/index.html b/html/index.html
index 26234bd..936eddd 100644
--- a/html/index.html
+++ b/html/index.html
@@ -2,6 +2,19 @@
<html>
<head>
<title>MaDIPHS Integration platform</title>
+ <style>
+ select {
+ margin: 5px;
+ width: 200px;
+ }
+ ul {
+ list-style-type: none;
+ padding: 0;
+ }
+ li {
+ padding: 10px;
+ }
+ </style>
</head>
<body>
<img src="css/images/MaDiPHS_logo.png" style="width: 300px;" alt="MaDiPHS logo"/>
@@ -34,5 +47,106 @@
<ul>
<li><a href="datasets/copernicus22/">Weather data from Copernicus Jan 22 -> May 23</a></li>
</ul>
+ <h4>Advisory resources</h4>
+ <p>You can query <a href="https://ckan-test.madiphs.org/advisory-resources-dataset/">advisory resources</a> using the form below.</p>
+ <div class="container">
+ <form id="searchForm">
+ <select name="crop" id="crop">
+ <option value="">--Please choose a crop--</option>
+ <option value="https://gd.eppo.int/taxon/ZEAMX">Maize</option>
+ <option value="https://gd.eppo.int/taxon/MANES">Cassava</option>
+ </select><br>
+ <select name="pest" id="pest">
+ <option value="">--Please choose a pest --</option>
+ <option value="https://gd.eppo.int/taxon/LAPHFR">Fall Army Worm</option>
+ <option value="https://gd.eppo.int/taxon/ALTESO">Early Blight</option>
+ </select><br>
+ <select name="category" id="category">
+ <option value="">--Please choose a category --</option>
+ <option value="http://voc.madiphs.org#c_cb042b84">Biology</option>
+ <option value="http://voc.madiphs.org#c_4a30845a">Identification</option>
+ <option value="http://voc.madiphs.org#c_0dfdaf11">Prevention</option>
+ <option value="http://voc.madiphs.org#c_39965b7c">Treatment</option>
+ </select><br>
+ <select name="mediatype" id="mediatype">
+ <option value="">--Please choose a media type --</option>
+ <option value="http://voc.madiphs.org#c_754af88f">Text</option>
+ <option value="http://voc.madiphs.org#c_3fe9f2f5">Audio</option>
+ <option value="http://voc.madiphs.org#c_8a3539b5">Video</option>
+ </select><br>
+ <button type="submit">Submit</button>
+ </form>
+ <p id="count"></p>
+ <p id="query"></p>
+ <ul id="results"></ul>
+ </div>
+
+ <script type="text/javascript">
+ document.getElementById('searchForm').addEventListener('submit', function(
+ event) {
+ event
+ .preventDefault(); // Prevent the form from submitting the traditional way
+
+ let query = document.getElementById('query').value;
+
+ const crop = document.getElementById('crop').value;
+ const pest = document.getElementById('pest').value;
+ const category = document.getElementById('category').value;
+ const mediatype = document.getElementById('mediatype').value;
+ const encodedCrop = encodeURIComponent(crop);
+ const encodedPest = encodeURIComponent(pest);
+ const encodedCategory = encodeURIComponent(category);
+ const encodedMediatype = encodeURIComponent(mediatype);
+
+ const baseUrl = 'https://ckan-test.madiphs.org/api/3/action/package_search';
+ const typeParam = 'type:advisory-resources-dataset';
+
+ let endpoint = `${baseUrl}?q=${typeParam}`;
+ if(encodedPest) {
+ endpoint += `+pest:%22${encodedPest}%22`;
+ }
+ if(encodedCategory) {
+ endpoint += `+information_subject_category:%22${encodedCategory}%22`;
+ }
+ if(encodedMediatype) {
+ endpoint += `+media_type:%22${encodedMediatype}%22`;
+ }
+ if(encodedCrop) {
+ endpoint += `+crop:(%22${encodedCrop}%22)`;
+ //endpoint += `&fq=language:eng`;
+ }
+ console.info("endpoint", endpoint)
+
+ fetch(endpoint)
+ .then(response => response.json())
+ .then(data => {
+ if (data.success) {
+ let queryElement = document.getElementById('query')
+ let countElement = document.getElementById('count')
+ let resultsElement = document.getElementById('results');
+
+ countElement.innerHTML = '<p>' + data.result.count + ' resources found</p>';
+ resultsElement.innerHTML = '';
+
+ data.result.results.forEach(item => {
+ var listItem = document.createElement('li');
+ let itemName = item.name;
+ if(item.resources) {
+ itemName = "<a href='" + item.resources[0].url + "'>" + item.name + "</a> (" + item.resources[0].format + ")"
+ }
+ listItem.innerHTML = itemName;
+ resultsElement.appendChild(listItem);
+ });
+ } else {
+ alert('Search failed. Please try again.');
+ }
+ })
+ .catch(error => {
+ console.error('Error:', error);
+ alert('An error occurred. Please try again. ' + error);
+ });
+ });
+ </script>
</body>
+
</html>
\ No newline at end of file
--
GitLab