From 0e0584093b660fad60a277a7f81440bf3f2fdd96 Mon Sep 17 00:00:00 2001
From: Kayne Ruse <kayneruse@gmail.com>
Date: Mon, 27 Feb 2017 23:30:04 +1100
Subject: [PATCH] Added a search function to the tables

---
 public_html/feedback.html     |  3 ---
 public_html/styles/shared.css |  1 +
 public_html/utilities.js      | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/public_html/feedback.html b/public_html/feedback.html
index c9d7044..7100c22 100644
--- a/public_html/feedback.html
+++ b/public_html/feedback.html
@@ -1,6 +1,3 @@
-<script>
-</script>
-
 <p>If you have an idea for a card, a rule, or some other feedback (encouragement is greatly appreciated!) please let me know below!</p>
 
 <br />
diff --git a/public_html/styles/shared.css b/public_html/styles/shared.css
index d7abd54..9331420 100644
--- a/public_html/styles/shared.css
+++ b/public_html/styles/shared.css
@@ -25,6 +25,7 @@ p {
 }
 
 .scrollable {
+	margin-top: 1rem;
 	max-width: 100%;
 	overflow: auto;
 }
diff --git a/public_html/utilities.js b/public_html/utilities.js
index c19ff1f..76a1193 100644
--- a/public_html/utilities.js
+++ b/public_html/utilities.js
@@ -48,6 +48,21 @@ var printCSV = function (fname, node) {
     if (request.status === 200) {
       node.innerHTML = "";
 
+      //build the search bar
+      var div = document.createElement("DIV");
+      div.className = "ui action input";
+      var input = document.createElement("INPUT");
+      input.id = "searchInput";
+      input.type = "text";
+      input.placeholder = "Search...";
+      div.appendChild(input);
+      var button = document.createElement("BUTTON");
+      button.id = "searchButton";
+      button.className = "ui button";
+      button.innerHTML = "Search";
+      button.onclick = searchTable;
+      div.appendChild(button);
+
       var table = parseCSVToTable(request.responseText, ';');
       table.id = "table";
       table.className = "ui celled table unstackable";
@@ -56,6 +71,7 @@ var printCSV = function (fname, node) {
       scrollable.className = "scrollable";
 
       scrollable.appendChild(table);
+      node.appendChild(div);
       node.appendChild(scrollable);
 
       var sorter = tsorter.create("table");
@@ -113,3 +129,20 @@ var parseCSVToTable = function(csvText, delim) {
   return table;
 }
 
+function searchTable() {
+  var input = document.getElementById("searchInput");
+  var table = document.getElementById("table");
+
+  var filter = input.value.toUpperCase();
+  var trows = table.getElementsByTagName("tr");
+
+  for (var i = 1; i < trows.length; i++) {
+    var tds = trows[i].cells;
+    trows[i].style.display = "none";
+    for (var j = 0; j < tds.length; j++) {
+      if (tds[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
+        trows[i].style.display = "";
+      }
+    }
+  }
+}