Restore and refactor facts filtering

that has been removed in voxpupuli#708

Fixes voxpupuli#714

puppetboard/static/js/utils.js

@@ -0,0 +1,91 @@
+/**
+ * Simple debounce function
+ */
+debounce = function(cb, delay = 250) {
+  let timeout
+
+  return (...args) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      cb(...args)
+    }, delay)
+  }
+}
+
+/**
+ * Transform date string with tz to shorter string.
+ * If localisation enabled in config,  date is timezoned with browser
+ * If localisation disabled in config, date is UTC
+ */
+$.fn.transformDatetime = function (format = "MMM DD YYYY - HH:mm:ss") {
+  this.each(function () {
+    let $el = $(this)
+    let localise = $el.data("localise")
+    let dt = moment($el.text())
+
+    if (!dt.isValid()) return
+
+    if (localise) {
+      $el.text(dt.format("MMM DD YYYY - HH:mm:ss"))
+    } else {
+      $el.text(dt.utc().format("MMM DD YYYY - HH:mm:ss"))
+    }
+  })
+  return this
+}
+
+
+/**
+ * Enable filtering on fact list
+ *
+ * If text is entered in input, it will use this text to create a regexp and
+ * test againts every fact name.
+ * If match is found, ensure fact name is visible.
+ * If match is not found, ensure fact name is hidden.
+ * Then when all fact names has been tested, we hide all letter segment
+ * who have not at least one visible fact name
+ */
+$.fn.factList = function () {
+  this.each(function() {
+    const $el = $(this)
+    const $input = $el.find("input[name=filter]")
+    const $segments = $el.find(".segment")
+    const $facts = $el.find(".segment li")
+
+    $input.on("input", debounce(function (e) {
+      const text = $input.val()
+
+      if (!text) {
+        $segments.show()
+        $facts.show()
+        return
+      }
+
+      const pattern = new RegExp(text, "i")
+
+      $facts.each(function () {
+        const $fact = $(this)
+
+        if (pattern.test($fact.text())) {
+          $fact.show()
+        } else {
+          $fact.hide()
+        }
+      })
+      $segments.not(':has(li:visible)').hide()
+    }, 250))
+  })
+
+  return this
+}
+
+$(document).ready(function () {
+  $("[data-localise]").transformDatetime()
+
+  let dataTable = $("#main-table").DataTable()
+  $("#main-table-search").on("input", function () {
+    dataTable.search(this.value).draw()
+  })
+
+  $('#fact-list').factList()
+})

puppetboard/templates/facts.html

@@ -1,24 +1,26 @@
 {% extends 'layout.html' %}
 {% block content %}
-<div class="ui fluid icon input" style="margin-bottom:20px">
-  <input autofocus="autofocus" class="filter-list" placeholder="Type here to filter...">
-</div>
-<div class="ui searchable stackable doubling four column grid factlist">
-  {%- for column in facts_columns %}
-  <div class="column">
-    {%- for letter in column %}
-      {%- if letter is not none  %}
-        <div class="ui list_hide_segment segment">
-          <a class="ui darkblue ribbon label">{{ letter[0][0]|upper }}</a>
-          <ul>
-            {%- for fact in letter %}
-            <li><a href="{{url_for('fact', env=current_env, fact=fact)}}">{{ fact }}</a></li>
-            {%- endfor %}
-          </ul>
-        </div>
-      {%- endif %}
+<div id="fact-list">
+  <div class="ui fluid icon input" style="margin-bottom:20px">
+    <input autofocus="autofocus" name="filter" placeholder="Type here to filter...">
+  </div>
+  <div class="ui searchable stackable doubling four column grid factlist">
+    {%- for column in facts_columns %}
+    <div class="column">
+      {%- for letter in column %}
+        {%- if letter is not none  %}
+          <div class="ui segment">
+            <a class="ui darkblue ribbon label">{{ letter[0][0]|upper }}</a>
+            <ul>
+              {%- for fact in letter %}
+              <li><a href="{{url_for('fact', env=current_env, fact=fact)}}">{{ fact }}</a></li>
+              {%- endfor %}
+            </ul>
+          </div>
+        {%- endif %}
+      {%- endfor %}
+    </div>
     {%- endfor %}
   </div>
-  {%- endfor %}
 </div>
 {% endblock content %}

puppetboard/templates/layout.html

@@ -18,7 +18,7 @@
     <link href="{{ url_for('static', filename='css/puppetboard.css') }}" rel="stylesheet" />
 
     {#- JS LOCAL #}
-    <script src="{{ url_for('static', filename='js/lists.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
     <script src="{{ url_for('static', filename='js/scroll.top.js') }}"></script>
     <script src="{{ url_for('static', filename='js/pretty.js') }}"></script>