galleria_photo_face_rknn_openCL/public/js/pageControls.js

// public/js/pageControls.js
// Controlli della pagina Galleria

(() => {
  "use strict";

function initializeProtectedPage() {
  const authLoader =
    document.getElementById(
      "authLoader",
    );

  const app =
    document.getElementById(
      "app",
    );

  if (app) {
    app.hidden = true;

    app.setAttribute(
      "aria-hidden",
      "true",
    );
  }

  document.body.classList.remove(
    "authenticated",
  );

  const isAuthenticated =
    window.AppAuth &&
    typeof window.AppAuth
      .isLoggedIn ===
      "function" &&
    window.AppAuth.isLoggedIn();

  console.log(
    "[AUTH CHECK]",
    {
      authenticated:
        isAuthenticated,

      user:
        window.AppAuth
          ?.getUser?.(),
    },
  );

  if (!isAuthenticated) {
    sessionStorage.removeItem(
      "token",
    );

    window.location.replace(
      "/login?redirect=/",
    );

    return false;
  }

  document.body.classList.add(
    "authenticated",
  );

  if (app) {
    app.hidden = false;

    app.removeAttribute(
      "aria-hidden",
    );

    app.style.removeProperty(
      "display",
    );
  }

  if (authLoader) {
    authLoader.hidden = true;

    authLoader.style.display =
      "none";
  }

  return true;
}

  function initializeConfigButton() {
    const configButton = document.getElementById("configBtn");

    if (!configButton) {
      return;
    }

    configButton.addEventListener("click", () => {
      window.location.href = "/admin.html";
    });
  }

  function initializeModeToggle() {
    const modeToggle = document.getElementById("modeToggle");

const leafletViews = {
  photos: null,
  activities: null,
};

    if (!modeToggle) {
      console.error("[modeToggle] Pulsante non trovato");
      return;
    }

    function normalizeMode(mode) {
      return mode === "activities" ? "activities" : "photos";
    }

    function updateModeUI(mode) {
      const safeMode = normalizeMode(mode);

      document.body.classList.remove("photos", "activities");
      document.body.classList.add(safeMode);

      if (safeMode === "photos") {
        modeToggle.textContent = "📷";
        modeToggle.setAttribute("aria-label", "Passa alle attività");
        modeToggle.title = "Passa alle attività";
      } else {
        modeToggle.textContent = "🏃";
        modeToggle.setAttribute("aria-label", "Passa alle foto");
        modeToggle.title = "Passa alle foto";
      }
    }

modeToggle.addEventListener(
  "click",
  async () => {
    const currentMode =
      normalizeMode(
        window.state?.mode,
      );

    const nextMode =
      currentMode === "photos"
        ? "activities"
        : "photos";

    const leafletMapDiv =
      document.getElementById(
        "globalMap",
      );

    const terrainMapDiv =
      document.getElementById(
        "terrainMap",
      );

    const terrainEnabled =
      window.MapTerrain3D
        ?.enabled?.() === true;

    const leafletOpen =
      leafletMapDiv
        ?.classList
        .contains("open") === true;

    const terrainOpen =
      terrainEnabled ||
      terrainMapDiv
        ?.classList
        .contains("open") === true;

    const leafletMap =
      window.globalMap;

    if (
      leafletOpen &&
      !terrainEnabled &&
      leafletMap
    ) {
      const center =
        leafletMap.getCenter?.();

      const zoom =
        leafletMap.getZoom?.();

      if (
        center &&
        Number.isFinite(
          center.lat,
        ) &&
        Number.isFinite(
          center.lng,
        ) &&
        Number.isFinite(
          zoom,
        )
      ) {
        leafletViews[
          currentMode
        ] = {
          lat:
            center.lat,

          lng:
            center.lng,

          zoom,
        };
      }
    }

    modeToggle.disabled =
      true;

    try {
      if (terrainOpen) {
        if (
          currentMode ===
          "photos"
        ) {
          if (
            window.MapboxPhotoSpiderfy
              ?.isOpen?.()
          ) {
            window.MapboxPhotoSpiderfy
              ?.clear?.();
          }

          window.MapboxPhotoMarkers
            ?.clear?.();

          window.MapboxPhotoClusters
            ?.clear?.();

          window.MapboxMarkers
            ?.setPhotos?.([]);
        } else {
          if (
            window.MapboxActivitySpiderfy
              ?.isOpen?.()
          ) {
            window.MapboxActivitySpiderfy
              ?.clear?.();
          }

          window.MapboxActivityMarkers
            ?.clear?.();

          window.MapboxActivityClusters
            ?.clear?.();

          window.MapboxMarkers
            ?.setActivities?.([]);

          window.MapboxMarkers
            ?.setRoutes?.([]);
        }
} else if (leafletOpen) {
if (
  currentMode ===
  "photos"
) {
  window.clearPhotoMapLayer?.(
    true,
  );
} else {
  window.clearActivityMapLayers?.();
}
}

      window.closeBottomSheet?.();
      window.closeActivityModal?.();
      window.closeInfoPanel?.();

      if (
        leafletOpen &&
        !terrainEnabled &&
        nextMode === "photos" &&
        leafletMap
      ) {
        const savedPhotoView =
          leafletViews.photos;

        if (savedPhotoView) {
          leafletMap.setView(
            [
              savedPhotoView.lat,
              savedPhotoView.lng,
            ],
            savedPhotoView.zoom,
            {
              animate: false,
            },
          );
        } else {
          leafletMap.setView(
            [42.5, 12.5],
            6,
            {
              animate: false,
            },
          );
        }
      }

      // ===============================
      // CAMBIA MODALITÀ
      // ===============================
      if (
        typeof window
          .setGalleryMode ===
        "function"
      ) {
        window.setGalleryMode(
          nextMode,
        );
      } else {
        window.state ??= {};

        window.state.mode =
          nextMode;

        window.loadLocalState?.();
      }

      updateModeUI(
        nextMode,
      );

      // ===============================
      // SINCRONIZZA I DATI
      // ===============================

      if (
        typeof window
          .progressiveSync ===
        "function"
      ) {
        await window.progressiveSync(
          nextMode,
        );
      }

      window.refreshGallery?.();
      
      // ===============================
      // STATO MAPPE
      // ===============================

      console.log(
        "[modeToggle] aggiorno modalità",
        {
          currentMode,
          nextMode,
          leafletOpen,
          terrainOpen,
          terrainEnabled,
        },
      );



      // ===============================
      // MAPBOX 3D
      // ===============================

      if (terrainOpen) {
        if (
          nextMode ===
          "activities"
        ) {
          window
            .showActivityRoutesToggle
            ?.();
        } else {
          window
            .hideActivityRoutesToggle
            ?.(
              true,
            );
        }

        await window
          .refreshTerrainMarkers?.();
      }


      // ===============================
      // LEAFLET
      // ===============================

      else if (leafletOpen) {
        if (
          nextMode ===
          "activities"
        ) {
          window.showActivityRoutesToggle?.();
        } else {
          window.hideActivityRoutesToggle?.(
            true,
          );
        }

        window.globalMap
          ?.invalidateSize?.();

        await window
          .redrawGlobalMap?.();
      }

      updateModeUI(
        window.state?.mode ||
        nextMode,
      );
    } catch (error) {
      console.error(
        "[modeToggle] Errore cambio modalità:",
        error,
      );

      updateModeUI(
        window.state?.mode ||
        "photos",
      );
    } finally {
      modeToggle.disabled =
        false;
    }
  },
);

    updateModeUI(
      window.state?.mode ||
      "photos",
    );
  }

function initializeTerrainButton() {
  const btn = document.getElementById("terrain3dBtn");

  if (!btn) {
    return;
  }

  btn.addEventListener("click", async () => {
    try {
      await window.MapTerrain3D?.toggle();

      btn.classList.toggle(
        "active",
        window.MapTerrain3D?.enabled?.() === true
      );
    } catch (err) {
      console.error("[Terrain3D]", err);
    }
  });
}

window.updateTerrainButton = function(enabled) {
  const btn = document.getElementById("terrain3dBtn");
  if (!btn) return;

  btn.classList.toggle("active", enabled);

  btn.textContent = enabled ? "🗺️" : "🏔️";
  btn.title = enabled
    ? "Torna alla mappa 2D"
    : "Apri Terrain 3D";
};

  function initializeDeletedToggle() {
    const checkbox = document.getElementById("showDeleted");
    const toggleButton = document.getElementById("showDeletedBtn");

    if (!checkbox || !toggleButton) {
      console.error("[showDeleted] Checkbox o pulsante non trovato");
      return;
    }

    function updateDeletedToggleUI() {
      const showDeleted = checkbox.checked;

      // Occhio barrato: cancellate nascoste.
      // Occhio libero: cancellate visibili.
      toggleButton.classList.toggle("is-hidden", !showDeleted);
      toggleButton.classList.toggle("is-visible", showDeleted);

      toggleButton.setAttribute("aria-pressed", String(showDeleted));
      toggleButton.setAttribute(
        "aria-label",
        showDeleted
          ? "Nascondi elementi cancellati"
          : "Mostra elementi cancellati",
      );

      toggleButton.title = showDeleted
        ? "Elementi cancellati visibili"
        : "Elementi cancellati nascosti";
    }

    toggleButton.addEventListener("click", () => {
      checkbox.checked = !checkbox.checked;

      // gallery.js ascolta change, salva la preferenza e aggiorna la galleria.
      checkbox.dispatchEvent(
        new Event("change", {
          bubbles: true,
        }),
      );

      updateDeletedToggleUI();
    });

    checkbox.addEventListener("change", updateDeletedToggleUI);

    // gallery.js ripristina prima il valore salvato in localStorage.
    setTimeout(updateDeletedToggleUI, 0);
  }

  function initializeEruda() {
    if (window.eruda && typeof window.eruda.init === "function") {
      window.eruda.init();
    }
  }

  function initializePageControls() {
    const authenticated = initializeProtectedPage();

    if (!authenticated) {
      return;
    }

    initializeConfigButton();
    initializeModeToggle();
    initializeDeletedToggle();
    initializeTerrainButton();
    initializeEruda();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initializePageControls, {
      once: true,
    });
  } else {
    initializePageControls();
  }
})();