Added Repository

static/js/edit_product.js

@@ -0,0 +1,118 @@
+let deletedImages = [];
+
+document.addEventListener('DOMContentLoaded', function () {
+  const imageInput = document.getElementById('image-input');
+  const imagePreview = document.getElementById('image-preview');
+  const uploadArea = document.getElementById('image-upload-area');
+
+  imageInput.addEventListener('change', function (e) {
+    updatePreview();
+  });
+
+  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+    uploadArea.addEventListener(eventName, preventDefaults, false);
+  });
+
+  function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  ['dragenter', 'dragover'].forEach(eventName => {
+    uploadArea.addEventListener(eventName, highlight, false);
+  });
+
+  ['dragleave', 'drop'].forEach(eventName => {
+    uploadArea.addEventListener(eventName, unhighlight, false);
+  });
+
+  function highlight() {
+    uploadArea.style.borderColor = '#007bff';
+    uploadArea.style.background = '#f8f9fa';
+  }
+
+  function unhighlight() {
+    uploadArea.style.borderColor = '#ccc';
+    uploadArea.style.background = '';
+  }
+
+  uploadArea.addEventListener('drop', handleDrop, false);
+
+  function handleDrop(e) {
+    const dt = e.dataTransfer;
+    const files = dt.files;
+    imageInput.files = files;
+    updatePreview();
+  }
+
+  function updatePreview() {
+    imagePreview.innerHTML = '';
+    const files = imageInput.files;
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      if (!file.type.match('image.*')) continue;
+
+      const reader = new FileReader();
+
+      reader.onload = function (e) {
+        const previewItem = document.createElement('div');
+        previewItem.className = 'preview-item';
+
+        const img = document.createElement('img');
+        img.src = e.target.result;
+
+        const removeBtn = document.createElement('button');
+        removeBtn.className = 'remove-image';
+        removeBtn.innerHTML = '×';
+        removeBtn.onclick = function () {
+          previewItem.remove();
+          const dt = new DataTransfer();
+          const inputFiles = imageInput.files;
+
+          for (let j = 0; j < inputFiles.length; j++) {
+            if (j !== i) {
+              dt.items.add(inputFiles[j]);
+            }
+          }
+
+          imageInput.files = dt.files;
+        };
+
+        previewItem.appendChild(img);
+        previewItem.appendChild(removeBtn);
+        imagePreview.appendChild(previewItem);
+      };
+
+      reader.readAsDataURL(file);
+    }
+  }
+});
+
+function deleteImage(imageId) {
+  if (confirm('Delete this image?')) {
+    deletedImages.push(imageId);
+    document.getElementById('deleted-images').value = JSON.stringify(deletedImages);
+
+    const imageItem = document.querySelector('.image-item[data-id="' + imageId + '"]');
+    if (imageItem) {
+      imageItem.style.display = 'none';
+    }
+
+    fetch('/admin/image/delete/' + imageId, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({})
+    }).then(function (response) {
+      return response.json();
+    }).then(function (data) {
+      if (!data.success) {
+        alert('Error deleting image: ' + data.error);
+      }
+    }).catch(function (error) {
+      console.error('Error:', error);
+    });
+  }
+}