zoraxy-dhcp/web/app.js

/**
 * DHCP Lease Manager — client-side logic.
 * Uses Zoraxy's $.cjax() for CSRF-safe AJAX (jQuery is available from parent frame).
 */

// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------

function showToast(message, type) {
  var toast = document.getElementById('toast');
  toast.textContent = message;
  toast.className = 'toast ' + (type || '');
  void toast.offsetWidth;
  toast.classList.remove('hidden');
  setTimeout(function () { toast.classList.add('hidden'); }, 3000);
}

// ---------------------------------------------------------------------------
// Render
// ---------------------------------------------------------------------------

function renderLeases(data) {
  var tbody = document.getElementById('leases-body');
  var leases = data.leases || [];

  document.getElementById('active-count').textContent = data.active_count;
  document.getElementById('pinned-count').textContent = data.pinned_count;

  if (leases.length === 0) {
    tbody.innerHTML = '<tr class="loading-row"><td colspan="5">No active leases</td></tr>';
    return;
  }

  var rows = leases.map(function (lease) {
    var isPermanent = lease.status === 'permanent';
    return (
      '<tr>' +
        '<td>' + esc(lease.hostname || '--') + '</td>' +
        '<td>' + esc(lease.ip) + '</td>' +
        '<td class="mac-address">' + esc(lease.mac) + '</td>' +
        '<td>' +
          '<span class="status-badge ' + (isPermanent ? 'status-permanent' : 'status-active') + '">' +
            esc(lease.status) +
          '</span>' +
        '</td>' +
        '<td class="actions-cell">' +
          (isPermanent
            ? '<button class="btn btn-danger" data-action="unpin" data-mac="' + escAttr(lease.mac) + '" data-ip="' + escAttr(lease.ip) + '" data-hostname="' + escAttr(lease.hostname) + '">Unpin</button>'
            : '<button class="btn btn-primary pin-btn" data-action="show-pin-form" data-mac="' + escAttr(lease.mac) + '" data-ip="' + escAttr(lease.ip) + '" data-hostname="' + escAttr(lease.hostname) + '">Pin</button>' +
              '<span class="pin-form" style="display:none;margin-left:6px;">' +
                '<input type="text" class="pin-hostname" placeholder="hostname (optional)" size="14" value="' + escAttr(lease.hostname || '') + '">' +
                '<button class="btn btn-primary pin-confirm" data-mac="' + escAttr(lease.mac) + '" data-ip="' + escAttr(lease.ip) + '">OK</button>' +
                '<button class="btn btn-secondary pin-cancel">✕</button>' +
              '</span>'
          ) +
        '</td>' +
      '</tr>'
    );
  }).join('');

  tbody.innerHTML = rows;
}

function esc(s) {
  if (!s) return '';
  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

function escAttr(s) {
  if (!s) return '';
  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}

// ---------------------------------------------------------------------------
// Actions
// ---------------------------------------------------------------------------

function loadLeases() {
  $.get('./api/leases', function (data) {
    renderLeases(data);
  }).fail(function () {
    showToast('Failed to load leases', 'error');
  });
}

function pinLease(mac, ip, hostname) {
  $.cjax({
    url: './api/pin',
    type: 'POST',
    dataType: 'json',
    data: { mac: mac, ip: ip, hostname: hostname || '' },
    success: function () {
      showToast('Pinned ' + (hostname || mac), 'success');
      loadLeases();
    },
    error: function (xhr) {
      var msg = 'Pin failed';
      try { var r = JSON.parse(xhr.responseText); msg = r.message || r.error || msg; } catch(e) {}
      showToast(msg, 'error');
    }
  });
}

function unpinLease(mac, ip, hostname) {
  $.cjax({
    url: './api/unpin',
    type: 'POST',
    dataType: 'json',
    data: { mac: mac, ip: ip, hostname: hostname || '' },
    success: function () {
      showToast('Unpinned ' + (hostname || mac), 'success');
      loadLeases();
    },
    error: function (xhr) {
      var msg = 'Unpin failed';
      try { var r = JSON.parse(xhr.responseText); msg = r.message || r.error || msg; } catch(e) {}
      showToast(msg, 'error');
    }
  });
}

function reloadDnsmasq() {
  var btn = document.getElementById('reload-btn');
  btn.disabled = true;
  btn.textContent = 'Reloading...';
  $.cjax({
    url: './api/reload',
    type: 'POST',
    dataType: 'json',
    data: {},
    success: function (data) {
      if (data.success) {
        showToast('dnsmasq reloaded', 'success');
      } else {
        showToast(data.message || 'Reload failed', 'error');
      }
      loadLeases();
    },
    error: function (xhr) {
      var msg = 'Reload failed';
      try { var r = JSON.parse(xhr.responseText); msg = r.message || r.error || msg; } catch(e) {}
      showToast(msg, 'error');
    },
    complete: function () {
      btn.disabled = false;
      btn.textContent = 'Reload dnsmasq';
    }
  });
}

// ---------------------------------------------------------------------------
// Event delegation
// ---------------------------------------------------------------------------

document.getElementById('leases-body').addEventListener('click', function (e) {
  var btn = e.target.closest('button[data-action]');
  if (!btn) return;

  var action = btn.dataset.action;
  var mac = btn.dataset.mac;
  var ip = btn.dataset.ip;
  var hostname = btn.dataset.hostname;

  if (action === 'unpin') {
    unpinLease(mac, ip, hostname);
  } else if (action === 'show-pin-form') {
    // Show inline form, hide the Pin button
    var row = btn.closest('td');
    row.querySelector('.pin-btn').style.display = 'none';
    row.querySelector('.pin-form').style.display = 'inline';
    row.querySelector('.pin-hostname').focus();
  }
});

document.getElementById('leases-body').addEventListener('click', function (e) {
  // Confirm pin
  if (e.target.closest('.pin-confirm')) {
    var row = e.target.closest('td');
    var mac = e.target.dataset.mac;
    var ip = e.target.dataset.ip;
    var hostname = row.querySelector('.pin-hostname').value.trim();
    row.querySelector('.pin-form').style.display = 'none';
    row.querySelector('.pin-btn').style.display = 'inline';
    pinLease(mac, ip, hostname);
  }
  // Cancel pin form
  if (e.target.closest('.pin-cancel')) {
    var row = e.target.closest('td');
    row.querySelector('.pin-form').style.display = 'none';
    row.querySelector('.pin-btn').style.display = 'inline';
  }
});

document.getElementById('reload-btn').addEventListener('click', reloadDnsmasq);

// ---------------------------------------------------------------------------
// Init
// ---------------------------------------------------------------------------

loadLeases();