feat: Add search form for querying advisory resources

baba27ce · Lene Wasskog · 1915db97 · baba27ce
Commit baba27ce authored 5 months ago by Lene Wasskog
--- 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 -&gt; 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