KH_Clock/dashboard/app.js

'use strict';

const msgTextarea = document.getElementById('msg');
const charNum     = document.getElementById('char-num');
const sendBtn     = document.getElementById('send-btn');
const clearBtn    = document.getElementById('clear-btn');
const statusDot   = document.getElementById('status-dot');
const statusText  = document.getElementById('status-text');

// ── Character counter ────────────────────────────────────────────────────────

msgTextarea.addEventListener('input', () => {
  charNum.textContent = msgTextarea.value.length;
});

// ── Duration helper ──────────────────────────────────────────────────────────

function getSelectedDuration() {
  const checked = document.querySelector('input[name="duration"]:checked');
  return checked ? parseInt(checked.value, 10) : 60;
}

// ── Auth redirect helper ─────────────────────────────────────────────────────

function handleUnauth(status) {
  if (status === 401) {
    window.location.href = '/login';
    return true;
  }
  return false;
}

// ── Send message ─────────────────────────────────────────────────────────────

async function sendMessage() {
  const text = msgTextarea.value.trim();
  if (!text) {
    msgTextarea.focus();
    return;
  }

  const duration = getSelectedDuration();
  const body = { text };
  if (duration === 0) {
    body.persist = true;
  } else {
    body.duration = duration;
  }

  sendBtn.disabled = true;
  try {
    const res = await fetch('/dashboard/message', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });

    if (handleUnauth(res.status)) return;

    if (res.ok) {
      msgTextarea.value = '';
      charNum.textContent = '0';
      await refreshStatus();
    } else {
      const err = await res.text();
      setStatus(false, `Error: ${err}`);
    }
  } catch {
    setStatus(false, 'Could not reach server.');
  } finally {
    sendBtn.disabled = false;
  }
}

// ── Clear message ────────────────────────────────────────────────────────────

async function clearMessage() {
  try {
    const res = await fetch('/dashboard/message', { method: 'DELETE' });
    if (handleUnauth(res.status)) return;
    if (res.ok) {
      await refreshStatus();
    }
  } catch {
    setStatus(false, 'Could not reach server.');
  }
}

// ── Status polling ───────────────────────────────────────────────────────────

function setStatus(active, message) {
  statusDot.className = 'status-dot' + (active ? ' active' : '');
  statusText.textContent = message;
}

async function refreshStatus() {
  try {
    const res = await fetch('/dashboard/status');
    if (handleUnauth(res.status)) return;

    const data = await res.json();

    if (data.active) {
      let detail = '';
      if (data.persistent) {
        detail = ' — until cleared';
      } else if (data.remaining_seconds !== null) {
        const secs = Math.round(data.remaining_seconds);
        const mins = Math.floor(secs / 60);
        detail = mins > 0
          ? ` — ${mins}m ${secs % 60}s remaining`
          : ` — ${secs}s remaining`;
      }
      setStatus(true, `Showing: "${data.text}"${detail}`);
    } else {
      setStatus(false, 'Screen is showing the clock.');
    }
  } catch {
    setStatus(false, 'Could not reach server.');
  }
}

// ── Wire up events ───────────────────────────────────────────────────────────

sendBtn.addEventListener('click', sendMessage);
clearBtn.addEventListener('click', clearMessage);

// Initial status fetch, then poll every 5 seconds
refreshStatus();
setInterval(refreshStatus, 5000);