Merge pull request #134 from meilisearch/improve_httpui

add a button to display or show the facets

http-ui/public/script.js

@@ -1,5 +1,6 @@
 var request = null;
 var timeoutID = null;
+var display_facets = false;
 
 $('#query, #filters').on('input', function () {
   var query = $('#query').val();
@@ -18,7 +19,7 @@ $('#query, #filters').on('input', function () {
       data: JSON.stringify({
         'query': query,
         'filters': filters,
-        "facetDistribution": true,
+        "facetDistribution": display_facets,
       }),
       contentType: 'application/json',
       success: function (data, textStatus, request) {
@@ -114,6 +115,22 @@ function selectedFacetsToArray(facets_obj) {
   return array;
 }
 
+$('#display_facets').click(function() {
+  if (display_facets) {
+    display_facets = false;
+    $('#display_facets').html("Display facets")
+    $('#display_facets').removeClass("is-danger");
+    $('#display_facets').addClass("is-success");
+    $('#facets').hide();
+  } else {
+    display_facets = true;
+    $('#display_facets').html("Hide facets")
+    $('#display_facets').addClass("is-danger");
+    $('#display_facets').removeClass("is-success");
+    $('#facets').show();
+  }
+});
+
 // Make the number of document a little bit prettier
 $('#docs-count').text(function(index, text) {
   return parseInt(text).toLocaleString()

http-ui/public/style.css

@@ -10,6 +10,7 @@
 }
 
 #facets {
+    display: none;
     max-width: 900px;
     margin: 20px auto 0 auto;
     padding: 0;
@@ -17,6 +18,13 @@
     overflow: scroll;
 }
 
+#display_facets {
+    margin: 20px auto 0 auto;
+    padding: 5px;
+    max-height: 16em;
+    overflow: scroll;
+}
+
 #facets .tag:hover {
   cursor: pointer;
 }

http-ui/templates/index.html

@@ -41,6 +41,7 @@
               <p class="heading">Number of Documents</p>
               <p class="title" id="docs-count">{{ docs_count }}</p>
             </div>
+	    <button id="display_facets" class="button is-success">display facets</button>
           </div>
         </nav>
       </div>