beerds/server/static/scripts.js

let urlCreator = window.URL || window.webkitURL;

async function SavePhoto(self) {
  document.getElementById("result").innerHTML = "";
  let photo = document.getElementById("file-input").files[0];
  let formData = new FormData();
  formData.append("f", photo);
  let response = await fetch(self.action, { method: "POST", body: formData });

  if (response.ok) {
    let json = await response.json();
    let text = "<h3 class='image-results'>Результаты</h3>";
    let uniqChecker = {};

    // Функция для создания HTML галереи
    const createGalleryHTML = (urls) => {
      if (urls.length === 0) return '';

      let mainImage = `<img src="${urls[0]}" class="main-image" data-urls='${JSON.stringify(urls)}' />`;
      let otherImages = urls.slice(1)
        .map(url => `<img src="${url}" class="thumbnail" />`)
        .join('');

      return `
        <div class="gallery-container">
          <div class="main-image-container">${mainImage}</div>
          <div class="thumbnails" style="display:none;">${otherImages}</div>
        </div>
      `;
    };

    // Обработка основных результатов
    for (let key in json.results) {
      if (json.description != undefined) {
        text += `<div class='image-block'><div class='image-text'>${json.results[key]} (вероятность: ${Math.round(parseFloat(key) * 100)}%) <br/><a href="/dogs-characteristics/${json.results[key]}" target='_blank'>Описание </a></div>`;
      } else {
        text += `<div class='image-block'><div class='image-text'>${json.results[key]} (вероятность: ${Math.round(parseFloat(key) * 100)}%)</div>`;
      }
      

      // Поиск всех изображений для текущего результата
      let allUrls = [];
      for (let imgKey in json.images) {
        if (json.images[imgKey].name === json.results[key]) {
          allUrls.push(...json.images[imgKey].url);
        }
      }

      text += createGalleryHTML(allUrls);
      text += "</div>";
      uniqChecker[json.results[key]] = key;
    }

    // Обработка дополнительных результатов
    for (let key in json.results_net) {
      if (uniqChecker[json.results_net[key]] !== undefined) continue;

      text += `<div class='image-block'><div class='image-text'>${json.results_net[key]}</div>`;

      let allUrls = [];
      for (let imgKey in json.images) {
        if (json.images[imgKey].name === json.results_net[key]) {
          allUrls.push(...json.images[imgKey].url);
        }
      }

      text += createGalleryHTML(allUrls);
      text += "</div>";
    }

    document.getElementById("result").innerHTML = text;
    setTimeout(function(){
      window.scrollBy({
        top: 300,
        behavior: 'smooth'
      });
    }, 100);
    // Внутри функции SavePhoto после вставки HTML:
    document.querySelectorAll('.main-image').forEach(img => {
      img.addEventListener('click', function (e) {
        const urls = JSON.parse(this.dataset.urls);
        showModal(urls);
        e.stopPropagation();
      });
    });

    // Функции для работы модального окна
    function showModal(urls) {
      const modal = document.createElement('div');
      modal.className = 'modal-overlay';
      modal.innerHTML = `
    <div class="modal-content">
      <div class="thumbnails-grid">
        ${urls.map(url => `<img src="${url}" class="thumbnail" />`).join('')}
      </div>
    </div>
  `;

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

      document.body.appendChild(modal);
      modal.style.display = 'flex';
      document.body.style.overflow = 'hidden';
    }

    function hideModal() {
      const modal = document.querySelector('.modal-overlay');
      if (modal) {
        document.body.removeChild(modal);
        document.body.style.overflow = 'auto';
      }
    }
    let isTouchDevice = 'ontouchstart' in window;
    let startX = 0;
    let scrollLeft = 0;

    document.addEventListener('DOMContentLoaded', () => {
      const grid = document.querySelector('.thumbnails-grid');

      if (isTouchDevice && grid) {
        grid.addEventListener('touchstart', (e) => {
          startX = e.touches[0].pageX - grid.offsetLeft;
          scrollLeft = grid.scrollLeft;
        });

        grid.addEventListener('touchmove', (e) => {
          e.preventDefault();
          const x = e.touches[0].pageX - grid.offsetLeft;
          const walk = (x - startX) * 2;
          grid.scrollLeft = scrollLeft - walk;
        });
      }
    });

  } else {
    alert("Ошибка HTTP: " + response.status);
  }
}
const fileInput = document.getElementById("file-input");
if (fileInput) {
  fileInput.addEventListener("change", function () {
    let photo = document.getElementById("file-input").files[0];
    let imageUrl = urlCreator.createObjectURL(photo);
    document.getElementById("image").src = imageUrl;
    document.getElementById("upload-image-text").innerHTML = "Ваше изображение:";
  });
}


// Добавляем обработчик клика для бургера
document.addEventListener('DOMContentLoaded', function () {
  const burger = document.querySelector('.burger');
  const menu = document.querySelector('#menu ul');

  burger.addEventListener('click', function () {
    this.classList.toggle('active');
    menu.classList.toggle('active');
  });


  // Закрываем меню при ресайзе окна
  window.addEventListener('resize', function () {
    if (window.innerWidth > 768) {
      burger.classList.remove('active');
      menu.classList.remove('active');
    }
  });
});

// описание породы
function openModal(imgElement) {
    const modal = document.getElementById('modal');
    const modalImg = document.getElementById('modal-img');
    const caption = document.getElementById('caption');
    modal.style.display = "block";
    modalImg.src = imgElement.src;
    caption.innerHTML = imgElement.alt;
}
function closeModal() {
    document.getElementById('modal').style.display = "none";
}