Basic search/filter (#223)

index.html

@@ -15,6 +15,7 @@
       body { color: #4e4e4e; font: var(--font-sans); height: 100vh; overflow-x: hidden; padding: 0 }
       h3 { font: var(--font-sans); font-weight: 400; margin: 0; opacity: 0.5; text-transform: lowercase }
       p { line-height: 1.5rem; margin: 0.75rem 0 }
+      input { display: block; padding: 0.5rem 0.75rem; width: 100% }
 
       .box { background: rgba(255, 255, 255, 0.85); border-radius: 0.25rem; flex: 1 1; margin: 0.5rem; min-width: 15rem; max-width: 40rem; padding: 1rem 1.5rem; text-align: center; white-space: nowrap; width: 40rem; z-index: 2 }
       .buttons { display: none; margin: 2rem 0 1.5rem }
@@ -26,8 +27,12 @@
       .header { align-items: center; background: rgba(255, 255, 255, 0.85); display: flex; left: 0; justify-content: space-between; padding: 0.5rem 1rem; position: fixed; right: 0; top: 0; z-index: 1 }
       .header div.logo { display: flex; align-items: center }
       .header img { height: 1.5rem; margin-right: 0.5rem; width: 1.5rem }
+      .hidden { display: none }
       .row { align-items: center; display: flex; justify-content: center }
 
+      p.search { padding: 0 1rem }
+      input#search { display: none }
+
       table { margin: 0 }
       td:not(.centered) { font: var(--font-mono); padding: 0.25rem 0.5rem; text-align: right }
       td.centered { opacity: 0.65; padding: 1rem; text-align: center }
@@ -46,6 +51,7 @@
           <p class="desc">Any additions can be made by editing <a href="https://github.com/polkadot-js/phishing/edit/master/all.json">phishing/all.json</a> and adding any new sites in alphabetical order. In the same vein addresses can be added in <a href="https://github.com/polkadot-js/phishing/edit/master/address.json">phishing/address.json</a>. For any discrepancies or requests <a href="https://github.com/polkadot-js/phishing/issues">log an issue</a>.</p>
           <p class="desc">The list of sites are blocked when using extensions such as the <a href="https://github.com/polkadot-js/extension">polkadot{.js} extension</a>. The addresses are blocked in wallets such as <a href="https://polkadot.js.org/apps">polkadot{.js} apps</a> and <a href="https://fearlesswallet.io/">Fearless Wallet</a>.</p>
           <p id="buttons" class="buttons"><a href="#" id="btn-sites" onclick="fillTable('sites')">Sites</a><a href="#" id="btn-addresses" onclick="fillTable('addresses')">Addresses</a></p>
+          <p class="search"><input id="search" placeholder="search & filter entries" type="search"></p>
           <table>
             <tbody id="table">
               <tr>
@@ -91,6 +97,22 @@
         setTimeout(() => window.requestAnimationFrame(draw), 100);
       }
 
+      function onSearch (evt) {
+        const text = evt.target.value;
+        const trs = document.getElementsByTagName('tr');
+
+        for (let i = 0; i < trs.length; i++) {
+          const tr = trs[i];
+          const attr = tr.getAttribute('data-value');
+
+          if (attr && !attr.includes(text)) {
+            tr.classList.add('hidden');
+          } else {
+            tr.classList.remove('hidden');
+          }
+        }
+      }
+
       function appendRow (date, url = '', status) {
         const row = document.createElement('tr');
         const a = document.createElement('td');
@@ -113,6 +135,7 @@
           c.appendChild(s);
         }
 
+        row.setAttribute('data-value', url);
         row.appendChild(a);
         row.appendChild(b);
         row.appendChild(c);
@@ -246,6 +269,12 @@
 
         document.getElementById('buttons').style.display = 'block';
         fillTable('sites');
+
+        const search = document.getElementById('search');
+
+        search.addEventListener('input', onSearch);
+        search.style.display = 'block';
+        search.focus();
       }
 
       main();