Add search bar if a there's a URL miss when displaying data.

Signed-off-by: Munyoki Kilyungi <me@bonfacemunyoki.com>

3 files changed, 47 insertions, 4 deletions

diff --git a/wqflask/wqflask/templates/dataset.html b/wqflask/wqflask/templates/dataset.html
index 94452e9e..244f529e 100644
--- a/wqflask/wqflask/templates/dataset.html
+++ b/wqflask/wqflask/templates/dataset.html
@@ -26,14 +26,53 @@
      content: ":";
  }
 
+ .search {
+     width: 50%;
+     margin: 50px auto;
+ }
+ .has-search .form-control-feedback {
+     right: initial;
+     left: 0;
+     color: #ccc;
+ }
+
+ .has-search .form-control {
+     padding-right: 12px;
+     padding-left: 34px;
+ }
 </style>
 {% endblock %}
 
 {% block title %}Dataset: {{ name }}{% endblock %}
 {% block content %}
 
+{% if dataset %}
+
 {% include 'metadata/dataset.html' %}
 
+{% else %}
+<div class="container">
+    <p class="lead">We appreciate your interest, but unfortunately, we don't have any additional information available for: <strong>{{ name }}</strong>. If you have any other questions or need assistance with something else, please feel free to reach out to us.  In the meantime search for other datasets here:</p>.
+
+    <!-- Actual search box -->
+    <div class="search">
+	<form class="form-group has-feedback has-search"
+	      hx-post="/dataset/search"
+	      hx-target="#search-results">
+	    <span class="glyphicon glyphicon-search form-control-feedback"></span>
+	    <input class="form-control"
+		   type="search"
+		   name="search" placeholder="Begin to search dataset titles...">
+	</form>
+    </div>
+
+    <div id="search-results"></div>
+
+</div>
+
+
+{% endif %}
+
 {% endblock %}
 
 {% block js %}
diff --git a/wqflask/wqflask/templates/metadata/dataset.html b/wqflask/wqflask/templates/metadata/dataset.html
index 70f2bfb9..dfe58f9b 100644
--- a/wqflask/wqflask/templates/metadata/dataset.html
+++ b/wqflask/wqflask/templates/metadata/dataset.html
@@ -11,9 +11,6 @@
 </header>
 
 <div class="container">
-    {% if metadata == {} %}
-    <p class="lead">We appreciate your interest, but unfortunately, we don't have any additional information available for: <strong>{{ name }}</strong>. If you have any other questions or need assistance with something else, please feel free to reach out to us.</p>
-    {% else %}
     <div class="panel-about panel panel-info panel-metadata text-muted{{ float_p }}">
         <div class="panel-heading"><strong><span class="glyphicon glyphicon-info-sign aria-hidden=true"></span> Details</strong> </div>
         <div class="panel-body">
@@ -110,7 +107,6 @@
         <div>{{ dataset.acknowledgment|safe}}</div>
         {% endif %}
     </div>
-    {% endif %}
 
 </div>
 
diff --git a/wqflask/wqflask/views.py b/wqflask/wqflask/views.py
index a6f036a8..22b7384c 100644
--- a/wqflask/wqflask/views.py
+++ b/wqflask/wqflask/views.py
@@ -1121,6 +1121,14 @@ def get_dataset(name):
         float_p=float_p
     )
 
+@app.route("/dataset/search", methods=('POST',))
+def search_for_dataset():
+    results = {}
+    search = request.form.get('search')
+    return render_template(
+        "metadata/dataset_search_results.html",
+        results=search
+    )
 
 @app.route("/publication/<name>", methods=('GET',))
 def get_publication(name):