static/js/shared.js

// TalkToDoc shared page logic: offline/online banner and relative time
// formatting, used by both the patient and provider pages.

(function () {
  function setupOfflineBanner() {
    const banner = document.createElement("div");
    banner.className = "offline-banner";
    banner.id = "offline-banner";
    banner.setAttribute("role", "status");
    banner.setAttribute("aria-live", "polite");
    banner.innerHTML = '<span class="offline-dot"></span><span>You\'re offline. We\'ll keep trying to reconnect.</span>';

    const main = document.querySelector(".app-main");
    if (main) main.insertBefore(banner, main.firstChild);

    function updateStatus() {
      banner.classList.toggle("visible", !navigator.onLine);
    }

    window.addEventListener("online", updateStatus);
    window.addEventListener("offline", updateStatus);
    updateStatus();
  }

  document.addEventListener("DOMContentLoaded", setupOfflineBanner);

  // Turns an ISO timestamp into a short relative label, e.g. "2m ago".
  window.formatRelativeTime = function (isoString) {
    if (!isoString) return "";
    const then = new Date(isoString).getTime();
    const now = Date.now();
    const diffSeconds = Math.max(0, Math.floor((now - then) / 1000));

    if (diffSeconds < 60) return "just now";
    const diffMinutes = Math.floor(diffSeconds / 60);
    if (diffMinutes < 60) return diffMinutes + (diffMinutes === 1 ? "m ago" : "m ago");
    const diffHours = Math.floor(diffMinutes / 60);
    if (diffHours < 24) return diffHours + "h ago";
    const diffDays = Math.floor(diffHours / 24);
    return diffDays + (diffDays === 1 ? "d ago" : "d ago");
  };
})();