add search controls for records-based items HTML (#2130)

* add search controls for records-based items HTML

Author: tomkralidis

pygeoapi/api/itemtypes.py

@@ -641,6 +641,7 @@ def get_collection_items(
         tpl_config = api.get_dataset_templates(dataset)
         # For constructing proper URIs to items
 
+        content['itemtype'] = p.type
         content['items_path'] = uri
         content['dataset_path'] = '/'.join(uri.split('/')[:-1])
         content['collections_path'] = api.get_collections_url()

pygeoapi/templates/collections/items/index.html

@@ -16,6 +16,11 @@
     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css"/>
     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css"/>
     <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
+
+    {% if data['itemtype'] == 'record' %}
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.draw.css"></script>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.draw.js"></script>
+    {% endif %}
 {% endblock %}
 
 {% block body %}
@@ -25,6 +30,34 @@ <h1>{% for l in data['links'] if l.rel == 'collection' %} {{ l['title'] }} {% en
   </section>
   <section id="items">
     {% if data['features'] %}
+    {% if data['itemtype'] == 'record' %}
+    <div class="row">
+      <div class="col-sm-12 col-md-6">
+        <div class="row">
+          <div class="col-sm-4">
+            <label for="q">Search</label>
+            <input name="q" id="q" type="text" class="form-control search-input" placeholder="Search">
+          </div>
+          <div class="col-sm-4">
+            <label for="datetime_begin">Start date</label>
+            <input name="datetime_begin" id="datetime_begin" type="date" class="form-control" />
+          </div>
+          <div class="col-sm-4">
+            <label for="datetime_end">End date</label>
+            <input name="datetime_end" id="datetime_end" type="date" class="form-control" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-12">
+            <input class="form-check-input" onchange="checkSpatialFilter()"  type="checkbox" id="spatial_filter_check">
+            <label class="form-check-label" for="spatial_filter_check">Spatial filter</label>
+            <button type="button" class="btn btn-primary" onclick="submitForm();">Search</button>
+            <button type="reset" class="btn btn-secondary">Reset</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    {% endif %}
     <div class="row">
       <div class="col-sm-12 col-md-6">
         <div class="row">
@@ -153,6 +186,51 @@ <h1>{% for l in data['links'] if l.rel == 'collection' %} {{ l['title'] }} {% en
 {% block extrafoot %}
 {% if data['features'] %}
     <script>
+    {% if data['itemtype'] == 'record' %}
+
+    document.getElementById("q").addEventListener("keydown", function(event) {
+        if (event.key === "Enter") {
+            submitForm();
+        }
+    });
+
+    function submitForm() {
+        var query_string = [];
+        var datetime = [];
+
+        var q = document.getElementById('q').value;
+        var datetime_begin = document.getElementById('datetime_begin').value;
+        var datetime_end = document.getElementById('datetime_end').value;
+
+        if (q) {
+            query_string.push('q=' + encodeURIComponent(q));
+        }
+        if (datetime_begin) {
+            datetime.push(datetime_begin + 'T00:00:00Z');
+        } else {
+            datetime.push('..');
+        }
+        if (datetime_end) {
+            datetime.push(datetime_end + 'T23:59:59Z');
+        } else {
+            datetime.push('..');
+        }
+
+        datetime = datetime.join('/');
+
+        if (datetime !== '../..') {
+            query_string.push('datetime=' + encodeURIComponent(datetime));
+        }
+
+        if (map.hasLayer(rectangle)) {
+            query_string.push('bbox=' + getBbox(rectangle).join(','));
+        }
+
+        if (query_string.length > 0)  {
+            document.location.href = '{{ data['items_path'] }}' + '?' + query_string.join('&');
+        }
+    }
+    {% endif %}
     var map = L.map('items-map').setView([{{ 45 }}, {{ -75 }}], 5);
     map.addLayer(new L.TileLayer(
         '{{ config['server']['map']['url'] }}', {
@@ -178,6 +256,37 @@ <h1>{% for l in data['links'] if l.rel == 'collection' %} {{ l['title'] }} {% en
     map.addLayer(markers);
 
     map.fitBounds(items.getBounds());
+
+    {% if data['itemtype'] == 'record' %}
+    function getBbox(rect) {
+        bounds = rect.getBounds();
+
+        return [bounds.getWest(),
+                bounds.getSouth(),
+                bounds.getEast(),
+                bounds.getNorth()];
+    }
+
+    var rectangle;
+    function setRectangle(bbox) {
+        if (rectangle) {
+            rectangle.setBounds(bbox)
+        } else {
+            rectangle = L.rectangle(bbox);
+            rectangle.editing.enable();
+            rectangle.setStyle({color :'green'});
+        }
+        map.addLayer(rectangle);
+    }
+
+    function checkSpatialFilter() {
+        if (map.hasLayer(rectangle)) {
+            rectangle.remove();
+        } else {
+            setRectangle(map.getBounds().pad(-0.95));
+        }
+    }
+    {% endif %}
     </script>
 {% endif %}
 {% endblock %}