From 6247c40cf993196640230e83050d976aa23e1980 Mon Sep 17 00:00:00 2001
From: Esenjin <esenjin@sangigi-fuchsia.fr>
Date: Mon, 6 Jan 2025 15:16:25 +0100
Subject: [PATCH] =?UTF-8?q?ajout=20d'une=20modale=20indiquant=20qu'un=20t?=
 =?UTF-8?q?=C3=A9l=C3=A9versement=20est=20en=20cours?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 arbre-img-prive.php | 124 ++++++++++++++++++++------------------------
 arbre-img.php       |  66 +++++++++++++++++++++++
 styles-admin.css    |  39 ++++++++++++++
 3 files changed, 162 insertions(+), 67 deletions(-)

diff --git a/arbre-img-prive.php b/arbre-img-prive.php
index f4ef211..6017b52 100644
--- a/arbre-img-prive.php
+++ b/arbre-img-prive.php
@@ -227,80 +227,70 @@ $config = getSiteConfig();
         </form>
     </div>
 
+    <!-- Modale d'indication de téléversement -->
+    <div id="uploadModal" class="modal-upload">
+        <div class="modal-content">
+            <div class="spinner"></div>
+            <p>Téléversement en cours... veuillez patienter...</p>
+        </div>
+    </div>
+
     <script>
-        function updateActionButtons() {
-            const checkboxes = document.querySelectorAll('.image-checkbox:checked');
-            const count = checkboxes.length;
-            const deleteBtn = document.getElementById('deleteSelectedBtn');
-            
-            if (count > 0) {
-                deleteBtn.style.display = 'inline-flex';
-            } else {
-                deleteBtn.style.display = 'none';
-            }
-        }
-
-        function deleteImage(imageName) {
-            if (confirm('Êtes-vous sûr de vouloir supprimer cette image ?')) {
-                const form = document.getElementById('imagesForm');
-                form.innerHTML = `
-                    <input type="hidden" name="action" value="delete">
-                    <input type="hidden" name="images[]" value="${imageName}">
-                `;
-                form.submit();
-            }
-        }
-
-        function deleteSelected() {
-            const checkboxes = document.querySelectorAll('.image-checkbox:checked');
-            if (checkboxes.length > 0 && confirm('Êtes-vous sûr de vouloir supprimer les images sélectionnées ?')) {
-                document.getElementById('formAction').value = 'delete';
-                document.getElementById('imagesForm').submit();
-            }
-        }
-
-        function toggleTop(imageName) {
-            const form = document.createElement('form');
-            form.method = 'post';
-            form.innerHTML = `
-                <input type="hidden" name="action" value="toggle_top">
-                <input type="hidden" name="image" value="${imageName}">
-            `;
-            document.body.appendChild(form);
-            form.submit();
-        }
-
-        // Gestion du drag & drop
+    document.addEventListener('DOMContentLoaded', function() {
+        const modal = document.getElementById('uploadModal');
         const dropZone = document.getElementById('dropZone');
         const uploadForm = document.getElementById('uploadForm');
         const imageUploadForm = document.getElementById('imageUploadForm');
 
-        dropZone.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            dropZone.classList.add('drag-over');
-        });
-
-        dropZone.addEventListener('dragleave', () => {
-            dropZone.classList.remove('drag-over');
-        });
-
-        dropZone.addEventListener('drop', (e) => {
-            e.preventDefault();
-            dropZone.classList.remove('drag-over');
-            
-            const files = e.dataTransfer.files;
-            if (files.length > 0) {
-                const dataTransfer = new DataTransfer();
-                for (let file of files) {
-                    dataTransfer.items.add(file);
+        // Gestion du formulaire d'upload
+        if (uploadForm) {
+            uploadForm.addEventListener('submit', function(e) {
+                const fileInput = this.querySelector('input[type="file"]');
+                if (fileInput && fileInput.files && fileInput.files.length > 0) {
+                    modal.style.display = 'block';
                 }
-                imageUploadForm.files = dataTransfer.files;
-                uploadForm.submit();
-            }
-        });
+            });
+        }
 
-        // Initialisation : masquer les boutons au chargement
-        document.addEventListener('DOMContentLoaded', updateActionButtons);
+        // Gestion du drag & drop
+        if (dropZone) {
+            dropZone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                dropZone.classList.add('drag-over');
+            });
+
+            dropZone.addEventListener('dragleave', () => {
+                dropZone.classList.remove('drag-over');
+            });
+
+            dropZone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dropZone.classList.remove('drag-over');
+                
+                const files = e.dataTransfer.files;
+                if (files.length > 0) {
+                    const dataTransfer = new DataTransfer();
+                    for (let file of files) {
+                        dataTransfer.items.add(file);
+                    }
+                    imageUploadForm.files = dataTransfer.files;
+                    modal.style.display = 'block';  // Afficher la modale avant la soumission
+                    uploadForm.submit();
+                }
+            });
+        }
+
+    // Gestion du click sur "Ajouter des images"
+        const imageUploadInput = document.getElementById('imageUploadForm');
+        if (imageUploadInput) {
+            imageUploadInput.addEventListener('change', function() {
+                if (this.files && this.files.length > 0) {
+                    modal.style.display = 'block';
+                    uploadForm.submit();
+                }
+            });
+        }
+    });
     </script>
     <?php include 'footer.php'; ?>
 </body>
diff --git a/arbre-img.php b/arbre-img.php
index ef14039..9f96f1e 100644
--- a/arbre-img.php
+++ b/arbre-img.php
@@ -602,6 +602,72 @@ $config = getSiteConfig();
             </form>
         </div>
     </div>
+    <!-- Modale d'indication de téléversement -->
+    <div id="uploadModal" class="modal-upload">
+        <div class="modal-content">
+            <div class="spinner"></div>
+            <p>Téléversement en cours... veuillez patienter...</p>
+        </div>
+    </div>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const modal = document.getElementById('uploadModal');
+        const dropZone = document.getElementById('dropZone');
+        const uploadForm = document.getElementById('uploadForm');
+        const imageUploadForm = document.getElementById('imageUploadForm');
+
+        // Gestion du formulaire d'upload
+        if (uploadForm) {
+            uploadForm.addEventListener('submit', function(e) {
+                const fileInput = this.querySelector('input[type="file"]');
+                if (fileInput && fileInput.files && fileInput.files.length > 0) {
+                    modal.style.display = 'block';
+                }
+            });
+        }
+
+        // Gestion du drag & drop
+        if (dropZone) {
+            dropZone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                dropZone.classList.add('drag-over');
+            });
+
+            dropZone.addEventListener('dragleave', () => {
+                dropZone.classList.remove('drag-over');
+            });
+
+            dropZone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dropZone.classList.remove('drag-over');
+                
+                const files = e.dataTransfer.files;
+                if (files.length > 0) {
+                    const dataTransfer = new DataTransfer();
+                    for (let file of files) {
+                        dataTransfer.items.add(file);
+                    }
+                    imageUploadForm.files = dataTransfer.files;
+                    modal.style.display = 'block';  // Afficher la modale avant la soumission
+                    uploadForm.submit();
+                }
+            });
+        }
+
+    // Gestion du click sur "Ajouter des images"
+        const imageUploadInput = document.getElementById('imageUploadForm');
+        if (imageUploadInput) {
+            imageUploadInput.addEventListener('change', function() {
+                if (this.files && this.files.length > 0) {
+                    modal.style.display = 'block';
+                    uploadForm.submit();
+                }
+            });
+        }
+    });
+    </script>
+
     <?php include 'footer.php'; ?>
 </body>
 </html>
diff --git a/styles-admin.css b/styles-admin.css
index 11b4d6e..fb111ca 100644
--- a/styles-admin.css
+++ b/styles-admin.css
@@ -761,6 +761,45 @@ body {
     border-color: #1976d2;
 }
 
+.modal-upload {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+}
+
+.modal-content {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #2a2a2a;
+    color: #ffffff;
+    padding: 20px;
+    border-radius: 5px;
+    text-align: center;
+    border: 1px solid #3a3a3a;
+}
+
+.spinner {
+    border: 4px solid #3a3a3a;
+    border-top: 4px solid #ffffff;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 10px auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 /* Style de la modale des clés de partage */
 .tree-button-share {
     background-color: rgba(33, 150, 243, 0.2) !important;