databisnisid/static/app.js

// Live filter daftar pemilih by owner (V11). Tanpa JS: form GET ?q= tetap jalan.
(function () {
  'use strict';

  var input = document.getElementById('search-input');
  var rows = document.getElementById('rows');
  var pager = document.getElementById('pager');
  var result = document.getElementById('search-result');

  if (!input || !rows || !pager) {
    return;
  }

  var timer = null;
  var originalRows = null;
  var originalPager = null;
  var DEBOUNCE_MS = 200;

  function escapeHtml(text) {
    var el = document.createElement('div');
    el.textContent = text == null ? '' : String(text);
    return el.innerHTML;
  }

  function vex(value) {
    return Number(value).toLocaleString('id-ID', {
      minimumFractionDigits: 4,
      maximumFractionDigits: 4
    });
  }

  function setSearchMode(on) {
    if (on && originalRows === null) {
      originalRows = rows.innerHTML;
      originalPager = pager.style.display || '';
    } else if (!on && originalRows !== null) {
      rows.innerHTML = originalRows;
      pager.style.display = originalPager;
      originalRows = null;
      originalPager = null;
      if (result) {
        result.textContent = '';
      }
    }
  }

  function renderResults(data) {
    if (!data.results.length) {
      rows.innerHTML = '<div class="empty">TAK ADA AKUN COCOK</div>';
    } else {
      rows.innerHTML = data.results.map(function (r) {
        return '<div class="list-row">' +
          '<span class="rank">' + r.rank + '</span>' +
          '<span class="owner">' + escapeHtml(r.owner) + '</span>' +
          '<span class="stake" data-label="STAKE (VEX)">' + vex(r.staked) + '</span>' +
          '<span class="weight" data-label="BOBOT SUARA">' + escapeHtml(r.weight) + '</span>' +
          '</div>';
      }).join('');
    }
    if (result) {
      result.textContent = 'HASIL · ' + data.count + ' AKUN UNTUK "' + data.query + '"';
    }
    pager.style.display = 'none';
  }

  function liveSearch(q) {
    fetch('/api/search?q=' + encodeURIComponent(q))
      .then(function (res) {
        return res.json();
      })
      .then(renderResults)
      .catch(function () {
        // Biarkan baris server tetap tampil bila fetch gagal.
      });
  }

  input.addEventListener('input', function () {
    clearTimeout(timer);
    var q = input.value.trim();
    if (q === '') {
      setSearchMode(false);
      return;
    }
    setSearchMode(true);
    timer = setTimeout(function () {
      liveSearch(q);
    }, DEBOUNCE_MS);
  });
})();