Current Dev State

templates/search.html

@@ -0,0 +1,114 @@
+{% extends "framework.html" %}
+{% load static %}
+{% block content %}
+<!--<script>-->
+<!--$(document).arrive(".selPackages", function() {-->
+<!--    // selectpicker triggers 'bootstrap-select' library-->
+<!--    $(this).selectpicker();-->
+<!--});-->
+<!--</script>-->
+
+<div id=searchContent>
+    <div id="packSelector">
+        <label>Select Packages</label><br>
+        <select id="selPackages" name="selPackages" data-actions-box='true' class="selPackages" multiple
+                data-width='100%'>
+            {% if unreviewed_objects %}
+            <option disabled>Reviewed Packages</option>
+            {% endif %}
+            {% for obj in reviewed_objects %}
+            <option value="{{ obj.url }}" selected>{{ obj.name }}</option>
+            {% endfor %}
+            {% if unreviewed_objects %}
+            <option disabled>Unreviewed Packages</option>
+            {% endif %}
+            {% for obj in unreviewed_objects %}
+            <option value="{{ obj.url }}">{{ obj.name }}</option>
+            {% endfor %}
+        </select>
+    </div>
+    <p></p>
+    <div>
+        <label>Search Term</label><br>
+        <div class="input-group" id="index-form-bar">
+            <input type="text" class="form-control" id='index-form-text-input' placeholder="Benfuracarb">
+            <div class="input-group-btn">
+                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="action-button"
+                        aria-haspopup="true" aria-expanded="false">Text <span class="caret"></span></button>
+                <ul class="dropdown-menu">
+                    <li class="dropdown-header">Text</li>
+                    <li><a id="dropdown-predict-text-text">Text</a></li>
+                    <li class="dropdown-header">SMILES</li>
+                    <li><a id="dropdown-search-smiles-default" data-toggle="tooltip">Default</a></li>
+                    <li><a id="dropdown-search-smiles-canonical">Canonical</a></li>
+                    <li><a id="dropdown-search-smiles-exact">Exact</a></li>
+                    <li class="dropdown-header">InChI</li>
+                    <li><a id="dropdown-search-inchi-inchikey">InChIKey</a></li>
+                </ul>
+                <button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="run-button">Go!
+                </button>
+            </div>
+        </div>
+        <div id="results">
+        </div>
+        <div id="loading"></div>
+
+    </div>
+    <script>
+
+        $(function() {
+
+            tooltips = {
+                'dropdown-predict-text-text': 'The inserted pattern will be searched on all enviPath object names and descriptions',
+                'dropdown-search-smiles-default': 'Search by SMILES, stereochemistry and charge are ignored',
+                'dropdown-search-smiles-canonical': 'Search by SMILES, stereochemistry is ignored but charge is preserved',
+                'dropdown-search-smiles-exact': 'Search by SMILES, exact match for stereochemistry and charge',
+                'dropdown-search-inchi-inchikey': 'Search by InChIKey',
+            }
+
+            Object.keys(tooltips).forEach(key => {
+                $('#' + key).tooltip({
+                    placement: "top",
+                    title: tooltips[key]
+                });
+            });
+
+            $("#selPackages").selectpicker();
+
+            $("#search-button").on("click", function(e) {
+                e.preventDefault();
+
+                if (!hasValue("searchbar")) {
+                    return;
+                }
+
+                var query = $("#searchbar").val();
+
+                selPackages = [];
+                var selPacks = $("#selPackages :selected");
+                selPacks.each(function () {
+                    var id = this.value;
+                    selPackages.push(id);
+                });
+
+                var par = {};
+                par['packages'] = selPackages;
+                par['search'] = query;
+                var queryString = $.param(par);
+
+                makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
+
+                $("#results").empty();
+
+                $.getJSON("{{ SERVER_BASE }}/search?" + queryString, function (result) {
+                    makeSearchList("#results", result);
+                    $("#loading").empty();
+                }).fail(function (d) {
+                    handleError(JSON.parse(d.responseText));
+                });
+            });
+        });
+
+    </script>
+
+    {% endblock content %}