forum（質問箱）new, show, edit, destroy

画像アップロードスクリプトは、お世話カレンダー機能と共有
document.addEventListener("turbo:load", function() {
  // 画像アップロードとプレビューの設定
  function setupImageUpload(containerSelector, inputSelector, previewSelector, removeIconSelector, removeEndpoint) {
    var container = document.querySelector(containerSelector);
    if (!container) return;

    var fileInputs = container.querySelectorAll(inputSelector);
    var imagePreviews = container.querySelectorAll(previewSelector);
    var removeIcons = container.querySelectorAll(removeIconSelector);
    var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    fileInputs.forEach((fileInput, index) => {
      var imagePreview = imagePreviews[index];
      if (!imagePreview.dataset.listenerAdded) {
        imagePreview.addEventListener('click', function(event) {
          event.stopPropagation();
          console.log(`Image preview clicked for index: ${index}`);
          fileInput.click();
        });

        fileInput.addEventListener('change', function() {
          console.log(`File input changed for index: ${index}`);
          if (fileInput.files && fileInput.files[0]) {
            console.log(`File selected for index: ${index}`);
            var reader = new FileReader();
            reader.onload = function(e) {
              console.log(`FileReader onload triggered for index: ${index}`);
              imagePreview.src = e.target.result;
              console.log(`Image preview updated for index: ${index}`);
            };
            reader.readAsDataURL(fileInput.files[0]);
            console.log(`FileReader readAsDataURL called for index: ${index}`);
          } else {
            console.log(`No file selected for index: ${index}`);
          }
        });

        imagePreview.dataset.listenerAdded = "true";
      }
    });

    removeIcons.forEach((icon, index) => {
      if (!icon.dataset.listenerAdded) {
        icon.addEventListener('click', function(event) {
          event.stopPropagation();
          var iconIndex = this.getAttribute('data-index');
          var questionId = container.getAttribute('data-question-id');
          var eventId = container.getAttribute('data-event-id');
          var petId = container.getAttribute('data-pet-id');
          console.log(`Removing image at index: ${iconIndex}`);

          var endpoint;
          if (questionId) {
            endpoint = `/questions/${questionId}/remove_image?index=${iconIndex}`;
          } else if (eventId && petId) {
            endpoint = `/pets/${petId}/events/${eventId}/remove_image?index=${iconIndex}`;
          }

          fetch(endpoint, {
            method: 'DELETE',
            headers: {
              'X-CSRF-Token': csrfToken,
              'Content-Type': 'application/json'
            },
            redirect: 'follow'
          })
          .then(response => response.json())
          .then(data => {
            if (data.status === 'success') {
              console.log(`Image removed successfully at index: ${iconIndex}`);
              imagePreviews[iconIndex].src = '/assets/forum_default_image.png';
              fileInputs[iconIndex].value = '';
            } else {
              console.error(`Failed to remove image at index: ${iconIndex}`);
            }
          })
          .catch(error => {
            console.error(`Error removing image at index: ${iconIndex}`, error);
          });
        });

        icon.dataset.listenerAdded = "true";
      }
    });
  }

  // Question pages
  if (document.querySelector('.new-question-container')) {
    setupImageUpload('.new-question-container', '.file-input', '.image-upload', '.remove-icon', '/questions/remove_image');
  }

  if (document.querySelector('.new-question-container[data-question-id]')) {
    setupImageUpload('.new-question-container[data-question-id]', '.file-input', '.image-upload', '.remove-icon', '/questions/remove_image');
  }

  // Event pages
  if (document.querySelector('.edit-event-container')) {
    setupImageUpload('.edit-event-container', '.file-input', '.image-upload', '.remove-icon', '');
  }

  if (document.querySelector('.new-event-container')) {
    setupImageUpload('.new-event-container', '.file-input', '.image-upload', '.remove-icon', '');
  }
});
yukina210 / repti_track

forum（質問箱）new, show, edit, destroy #28
