photo_server_json_flutter_con_gallery1/public/js/main.js

// ===============================
// AVVIO
// ===============================
console.log("main.js avviato");

// ===============================
// UTILS AUTH + SYNC HEADER UI
// ===============================
function isAuthenticated() {
  return !!localStorage.getItem("token");
}

function syncHeaderAuthUI() {
  const authed = isAuthenticated();
  document.body.classList.toggle('authenticated', authed);

  const logoutBtn = document.getElementById('logoutBtn');
  if (logoutBtn) {
    logoutBtn.style.display = authed ? 'inline-flex' : 'none';
  }
}

// ===============================
// PATCH HEADER HEIGHT
// ===============================
(function () {
  const root = document.documentElement;
  const header = document.querySelector('header');

  function setHeaderHeight() {
    const h = header ? Math.round(header.getBoundingClientRect().height) : 60;
    root.style.setProperty('--header-h', h + 'px');
  }

  setHeaderHeight();

  if (window.ResizeObserver && header) {
    const ro = new ResizeObserver(setHeaderHeight);
    ro.observe(header);
  } else {
    window.addEventListener('resize', setHeaderHeight);
    window.addEventListener('orientationchange', setHeaderHeight);
  }

  window.addEventListener('load', setHeaderHeight);
})();

// ===============================
// PATCH MAP invalidateSize
// ===============================
(function () {
  const mapEl = document.getElementById('globalMap');
  if (!mapEl) return;

  function invalidateWhenOpen() {
    if (!mapEl.classList.contains('open')) return;
    setTimeout(() => {
      try {
        window.leafletMapInstance?.invalidateSize();
      } catch (e) {
        console.warn('invalidateSize non eseguito:', e);
      }
    }, 0);
  }

  const mo = new MutationObserver((mutations) => {
    if (mutations.some(m => m.attributeName === 'class')) {
      invalidateWhenOpen();
    }
  });
  mo.observe(mapEl, { attributes: true, attributeFilter: ['class'] });

  document.getElementById('openMapBtn')?.addEventListener('click', () => {
    setTimeout(invalidateWhenOpen, 0);
  });
})();

// ===============================
// MENU ⋮
// ===============================
(() => {
  const optBtn   = document.getElementById("optionsBtn");
  const optSheet = document.getElementById("optionsSheet");
  const overlayEl= document.getElementById("sheetOverlay");

  if (!optBtn || !optSheet) return;

  function openOptionsSheet() {
    try { window.closeBottomSheet?.(); } catch {}
    optSheet.classList.add("open");
    overlayEl?.classList.add("open");
    optBtn.setAttribute("aria-expanded", "true");
    optSheet.setAttribute("aria-hidden", "false");
  }

  function closeOptionsSheet() {
    optSheet.classList.remove("open");
    overlayEl?.classList.remove("open");
    optBtn.setAttribute("aria-expanded", "false");
    optSheet.setAttribute("aria-hidden", "true");
  }

  function toggleOptionsSheet(e) {
    e?.preventDefault();
    e?.stopPropagation();
    if (optSheet.classList.contains("open")) closeOptionsSheet();
    else openOptionsSheet();
  }

  optBtn.addEventListener("click", toggleOptionsSheet, { capture: true });
  overlayEl?.addEventListener("click", (e) => {
    e.stopPropagation();
    closeOptionsSheet();
  });

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && optSheet.classList.contains("open")) {
      closeOptionsSheet();
    }
  });

  optSheet.addEventListener("click", (e) => e.stopPropagation());
  window.closeOptionsSheet = closeOptionsSheet;
})();

// ===============================
// LOGIN AUTOMATICO SU INDEX
// ===============================
document.addEventListener("DOMContentLoaded", async () => {
  syncHeaderAuthUI();

  try {
    const cfgRes = await fetch('/config');
    const cfg = await cfgRes.json();
    window.BASE_URL = cfg.baseUrl;

    const savedToken = localStorage.getItem("token");

    if (!savedToken) {
      document.getElementById("loginModal").style.display = "flex";
      return;
    }

    const ping = await fetch(`${window.BASE_URL}/photos`, {
      headers: { "Authorization": "Bearer " + savedToken }
    });

    if (!ping.ok) {
      localStorage.removeItem("token");
      syncHeaderAuthUI();
      document.getElementById("loginModal").style.display = "flex";
      return;
    }

    window.token = savedToken;
    syncHeaderAuthUI();

    // 🔥 NON caricare più foto da main.js
    // La gallery viene caricata da initGallery() in gallery.js

  } catch (err) {
    console.error("Errore autenticazione:", err);
    document.getElementById("loginModal").style.display = "flex";
  }
});

// ===============================
// SETTINGS (⚙️)
// ===============================
document.getElementById('settingsBtn')?.addEventListener('click', () => {
  window.location.href = "admin.html";
});

// ===============================
// LOGIN SUBMIT
// ===============================
/* 
document.getElementById("loginSubmit").addEventListener("click", async () => {
  const email = document.getElementById("loginEmail").value;
  const password = document.getElementById("loginPassword").value;
  const errorEl = document.getElementById("loginError");

  errorEl.textContent = "";

  try {
    const res = await fetch(`${window.BASE_URL}/auth/login`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password })
    });

    if (!res.ok) {
      errorEl.textContent = "Utente o password errati";
      return;
    }

    const data = await res.json();
    const token = data.token;

    localStorage.setItem("token", token);
    window.token = token;

    document.getElementById("loginModal").style.display = "none";

    syncHeaderAuthUI();

    // 🔥 NON caricare più foto da main.js
    // initGallery() farà tutto

  } catch (err) {
    console.error("Errore login:", err);
    errorEl.textContent = "Errore di connessione al server";
  }
});
*/

// ===============================
// LOGIN SUBMIT
// ===============================
document.getElementById("loginSubmit").addEventListener("click", async () => {
  const email = document.getElementById("loginEmail").value;
  const password = document.getElementById("loginPassword").value;
  const errorEl = document.getElementById("loginError");

  errorEl.textContent = "";

  try {
    const res = await fetch(`${window.BASE_URL}/auth/login`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password })
    });

    if (!res.ok) {
      errorEl.textContent = "Utente o password errati";
      return;
    }

    const data = await res.json();
    const token = data.token;

    // Salva token
    localStorage.setItem("token", token);
    window.token = token;

    // Chiudi login
    const loginModalEl = document.getElementById("loginModal");
    if (loginModalEl) loginModalEl.style.display = "none";

    // Riallinea UI header subito
    syncHeaderAuthUI();

    // 🔥 RICARICA LA PAGINA PER FAR PARTIRE initGallery()
    window.location.reload();

  } catch (err) {
    console.error("Errore login:", err);
    errorEl.textContent = "Errore di connessione al server";
  }
});