my_gallery/app.js

// ===============================
// CONFIG
// ===============================
const API_URL = 'https://prova.patachina.it/photos';

let photosData = [];
let currentPhoto = null;

// ===============================
// DEBUG INIZIALE
// ===============================
console.log("app.js caricato correttamente");


// ===============================
// FETCH DELLE FOTO
// ===============================
async function loadPhotos() {
  console.log("Inizio fetch:", API_URL);

  let res;
  try {
    res = await fetch(API_URL);
  } catch (e) {
    console.error("Errore fetch:", e);
    return;
  }

  console.log("Status fetch:", res.status);

  const text = await res.text();
  console.log("Risposta grezza (prime 200 chars):", text.substring(0, 200));

  try {
    photosData = JSON.parse(text);
    console.log("JSON parse OK, numero foto:", photosData.length);
  } catch (e) {
    console.error("Errore nel parse JSON:", e);
    return;
  }

  renderGallery(photosData);
}


// ===============================
// RENDER GALLERIA
// ===============================
function renderGallery(photos) {
  console.log("Render gallery, foto:", photos.length);

  const gallery = document.getElementById('gallery');
  gallery.innerHTML = '';

  photos.forEach(photo => {
    const thumbDiv = document.createElement('div');
    thumbDiv.className = 'thumb';

    const img = document.createElement('img');
    img.src = `https://prova.patachina.it/${photo.thub1}`;
    img.alt = photo.name || '';
    img.loading = "lazy";

    thumbDiv.appendChild(img);

    // Fallback se thub2 manca
    const preview = photo.thub2
      ? `https://prova.patachina.it/${photo.thub2}`
      : `https://prova.patachina.it/${photo.thub1}`;

    thumbDiv.addEventListener('click', () => {
      openModal(
        `https://prova.patachina.it/${photo.path}`,
        preview,
        photo
      );
    });

    gallery.appendChild(thumbDiv);
  });
}


// ===============================
// MODALE IMMAGINE
// ===============================
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modalImage');
const modalClose = document.getElementById('modalClose');

function openModal(srcOriginal, srcPreview, photo) {
  currentPhoto = photo;

  modalImg.src = srcPreview;
  modal.classList.add('open');

  const img = new Image();
  img.src = srcOriginal;
  img.onload = () => {
    modalImg.src = srcOriginal;
  };
}

function closeModal() {
  modal.classList.remove('open');
  modalImg.src = '';
}

modalClose.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
  if (e.target === modal) closeModal();
});


// ===============================
// PANNELLO INFO
// ===============================
const infoPanel = document.getElementById('infoPanel');
const infoBtn = document.getElementById('modalInfoBtn');

infoBtn.addEventListener('click', () => {
  if (!currentPhoto) return;

  // Gestione sicura GPS null
  const gps = currentPhoto.gps || { lat: '-', lng: '-', alt: '-' };

  // Cartella estratta dal path
  const folder = currentPhoto.path.split('/').slice(2, -1).join('/');

  infoPanel.innerHTML = `
    <h3>Informazioni</h3>

    <div class="info-row"><b>Nome:</b> ${currentPhoto.name}</div>
    <div class="info-row"><b>Data:</b> ${currentPhoto.taken_at}</div>

    <div class="info-row"><b>Latitudine:</b> ${gps.lat}</div>
    <div class="info-row"><b>Longitudine:</b> ${gps.lng}</div>
    <div class="info-row"><b>Altitudine:</b> ${gps.alt} m</div>

    <div class="info-row"><b>Dimensioni:</b> ${currentPhoto.width} × ${currentPhoto.height}</div>
    <div class="info-row"><b>Peso:</b> ${(currentPhoto.size_bytes / 1024 / 1024).toFixed(2)} MB</div>
    <div class="info-row"><b>Tipo:</b> ${currentPhoto.mime_type}</div>

    <div class="info-row"><b>Cartella:</b> ${folder}</div>
  `;

  infoPanel.classList.add('open');
});

// Chiudi pannello cliccando fuori
document.addEventListener('click', (e) => {
  if (!infoPanel.classList.contains('open')) return;

  const clickedInsidePanel = infoPanel.contains(e.target);
  const clickedInfoBtn = infoBtn.contains(e.target);

  if (!clickedInsidePanel && !clickedInfoBtn) {
    infoPanel.classList.remove('open');
  }
});


// ===============================
// AVVIO
// ===============================
loadPhotos();