Update templates/static_deploy.html

templates/static_deploy.html

@@ -12,20 +12,21 @@
 /* -------------------------------------- */
 /* CSS pour la zone de Glisser-Déposer    */
 /* -------------------------------------- */
+/* ... (styles de dropzone inchangés) ... */
 .dropzone {
-    border: 3px dashed #007bff; /* Bordure plus visible et couleur primaire */
-    background-color: #f8f9fa; /* Fond légèrement gris */
-    padding: 40px; /* Augmenter le padding pour le rendre plus grand */
+    border: 3px dashed #007bff;
+    background-color: #f8f9fa;
+    padding: 40px;
     text-align: center;
     cursor: pointer;
     transition: background-color 0.2s, border-color 0.2s;
-    border-radius: 12px; /* Coins arrondis pour un look moderne */
+    border-radius: 12px;
     margin-bottom: 20px;
-    user-select: none; /* Empêcher la sélection de texte */
+    user-select: none;
 }
 
 .dropzone.dragover {
-    background-color: #e2f0ff; /* Couleur au survol/glissement */
+    background-color: #e2f0ff;
     border-color: #0056b3;
 }
 
@@ -91,6 +92,22 @@
 #copy-url-button {
     width: 50px; /* Fixer la largeur du bouton de copie */
 }
+
+/* Nouveau style pour l'animation de chargement */
+.spinner-border {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: middle;
+    border: .2em solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spinner-border .75s linear infinite;
+}
+
+@keyframes spinner-border {
+    to { transform: rotate(360deg); }
+}
 </style>
 
 <input type="file" id="file-input" multiple style="display: none;">
@@ -108,34 +125,55 @@
                 <div id="upload-status" class="mt-3 text-muted">Prêt pour l'upload.</div>
             </div>
 
-            <div id="launch-url-container" class="mt-4 p-3 bg-light border rounded" 
+            <div id="permanent-url-container" class="mt-4 p-3 border rounded" 
+                 style="display: none; background-color: #d1e7dd !important; border-color: #badbcc !important;">
+                <label class="form-label fw-bold d-block text-success" style="color: #0f5132 !important;">
+                    <span class="material-symbols-rounded align-middle me-1">check_circle</span> Lien de Déploiement Permanent
+                </label>
+                <div class="input-group mb-2">
+                    <input type="text" id="permanent-url-display" class="form-control" readonly 
+                           value="{{ permanent_deployment_url if permanent_deployment_url else '' }}">
+                    <button class="btn btn-outline-secondary" type="button" id="copy-permanent-button" title="Copier le lien permanent">
+                        <span class="material-symbols-rounded">content_copy</span>
+                    </button>
+                </div>
+                <small class="text-muted mt-1 d-block">
+                    ✅ Ce lien est sauvegardé sur Hugging Face et est permanent.
+                </small>
+            </div>
+            
+            <div id="temp-url-container" class="mt-4 p-3 bg-light border rounded" 
                  style="display: none; background-color: #fff3cd !important; border-color: #ffc107 !important;">
                 <label class="form-label fw-bold d-block text-warning" style="color: #664d03 !important;">
-                    <span class="material-symbols-rounded align-middle me-1">share</span> Lien de Déploiement Temporaire (Partageable)
+                    <span class="material-symbols-rounded align-middle me-1">share</span> Lien d'Aperçu Temporaire
                 </label>
                 <div class="input-group mb-2">
-                    <input type="text" id="launch-url-display" class="form-control" readonly 
-                           value="{{ launch_url if launch_url else '' }}">
-                    <button class="btn btn-outline-secondary" type="button" id="copy-url-button" title="Copier le lien">
+                    <input type="text" id="temp-url-display" class="form-control" readonly 
+                           value="{{ temp_launch_url if temp_launch_url else '' }}">
+                    <button class="btn btn-outline-secondary" type="button" id="copy-temp-button" title="Copier le lien temporaire">
                         <span class="material-symbols-rounded">content_copy</span>
                     </button>
                 </div>
                 <small class="text-danger mt-1 d-block">
-                    ⚠️ **Attention:** Ce lien est temporaire et sera supprimé lors du prochain redémarrage du service.
+                    ⚠️ **Attention:** Ce lien est temporaire. Cliquez sur "Déployer le Site Web" pour le rendre permanent.
                 </small>
             </div>
+            
             <div class="d-grid gap-2 d-md-flex justify-content-md-center mb-4 mt-4">
+                <button class="btn btn-success btn-lg" id="deploy-button" disabled>
+                    <span class="material-symbols-rounded align-middle me-1">cloud_upload</span> Déployer le Site Web (Permanent)
+                </button>
                 <button class="btn btn-primary btn-lg" id="launch-button" disabled>
                     <span class="material-symbols-rounded align-middle me-1">open_in_new</span> Lancer l'Aperçu
                 </button>
                 <button class="btn btn-danger btn-lg" id="clear-button" disabled>
-                    <span class="material-symbols-rounded align-middle me-1">delete</span> Vider
+                    <span class="material-symbols-rounded align-middle me-1">delete</span> Vider le Cache
                 </button>
             </div>
             
             <div class="card shadow-sm">
                 <div class="card-header bg-light">
-                    <h5 class="mb-0">Fichiers Actuellement Déployés (<span id="file-count">{{ files|length }}</span>)</h5>
+                    <h5 class="mb-0">Fichiers Actuellement Téléversés (<span id="file-count">{{ files|length }}</span>)</h5>
                 </div>
                 <div class="card-body">
                     {% if files %}
@@ -156,7 +194,7 @@
             </div>
             
             {% if deploy_id %}
-            <small class="text-muted mt-3 d-block text-center">ID de Déploiement Temporaire: <code>{{ deploy_id }}</code></small>
+            <small class="text-muted mt-3 d-block text-center">ID de Projet (Cache Local): <code>{{ deploy_id }}</code></small>
             {% endif %}
 
         </div>
@@ -170,28 +208,51 @@ const fileInput = document.getElementById('file-input');
 const uploadStatus = document.getElementById('upload-status');
 const launchButton = document.getElementById('launch-button');
 const clearButton = document.getElementById('clear-button');
-const urlContainer = document.getElementById('launch-url-container');
-const urlInput = document.getElementById('launch-url-display');
-const copyButton = document.getElementById('copy-url-button');
+
+// NOUVEAU
+const deployButton = document.getElementById('deploy-button');
+const permanentUrlContainer = document.getElementById('permanent-url-container');
+const permanentUrlInput = document.getElementById('permanent-url-display');
+const copyPermanentButton = document.getElementById('copy-permanent-button');
+
+// EXISTANT MAIS MODIFIÉ
+const tempUrlContainer = document.getElementById('temp-url-container');
+const tempUrlInput = document.getElementById('temp-url-display');
+const copyTempButton = document.getElementById('copy-temp-button');
+
 const fileCountSpan = document.getElementById('file-count');
+const uploadedFileList = document.getElementById('uploaded-file-list');
+const noFilesMessage = document.getElementById('no-files-message');
 
-// Récupération de l'URL injectée par Flask (sera null si aucun déploiement actif)
-const currentLaunchUrl = urlInput.value; 
 
+// Récupération de l'URL injectée par Flask
+const currentTempUrl = tempUrlInput.value; 
+const currentPermanentUrl = permanentUrlInput.value; 
 
 /* -------------------------------------- */
 /* 0. Initialisation des Boutons/Affichage*/
 /* -------------------------------------- */
 
-// 0a. Afficher l'URL si elle est présente dans le champ (injectée par Jinja2)
-if (currentLaunchUrl) {
-    urlContainer.style.display = 'block';
-}
-
-// 0b. État initial du bouton Lancer (géré par Jinja2 au chargement initial)
 const indexFilePresent = {{ index_file_present | tojson }};
 const fileCount = {{ files|length }};
+const deployId = '{{ deploy_id }}'; 
+
+
+// 0a. Gestion de l'affichage de l'URL
+if (currentPermanentUrl) {
+    // Si l'URL permanente est là, on affiche le lien permanent et on désactive le bouton de déploiement.
+    permanentUrlContainer.style.display = 'block';
+    deployButton.disabled = true;
+    tempUrlContainer.style.display = 'none';
+} else if (currentTempUrl) {
+    // Si l'URL temporaire est là (avant commit)
+    tempUrlContainer.style.display = 'block';
+    deployButton.disabled = false;
+    permanentUrlContainer.style.display = 'none';
+}
+
 
+// 0b. État initial des boutons Lancer et Vider
 if (!indexFilePresent || fileCount === 0) {
     launchButton.disabled = true;
 } else {
@@ -201,71 +262,46 @@ if (fileCount > 0) {
     clearButton.disabled = false;
 }
 
-// 0c. Gère le lancement de l'aperçu (utilise l'URL complète si disponible)
+
+// 0c. Gère le lancement de l'aperçu
 launchButton.addEventListener('click', () => {
-    if (currentLaunchUrl) {
-        window.open(currentLaunchUrl, '_blank');
-    } else {
-        // Logique de secours au cas où l'URL n'a pas été injectée mais le deploy_id est là
-        const deployId = '{{ deploy_id }}'; 
-        if (deployId) {
-             window.open(`/serve-static/${deployId}/index.html`, '_blank');
-        }
+    // Utiliser l'URL permanente si disponible, sinon la temporaire
+    const urlToLaunch = currentPermanentUrl || currentTempUrl;
+    if (urlToLaunch) {
+        window.open(urlToLaunch, '_blank');
+    } else if (deployId && indexFilePresent) {
+         window.open(`/serve-static/${deployId}/index.html`, '_blank');
     }
 });
 
 
 /* -------------------------------------- */
-/* 1. Gestion du Clic sur la Dropzone     */
+/* 1, 2, 3 : Gestion de l'Upload (UI)     */
 /* -------------------------------------- */
-dropZone.addEventListener('click', () => {
-    fileInput.click();
-});
 
-/* -------------------------------------- */
-/* 2. Gestion du Glisser-Déposer          */
-/* -------------------------------------- */
+// ... (Gestion de la Dropzone et du File Input inchangée) ...
+dropZone.addEventListener('click', () => { fileInput.click(); });
 
 ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
     dropZone.addEventListener(eventName, preventDefaults, false);
 });
 
-function preventDefaults(e) {
-    e.preventDefault();
-    e.stopPropagation();
-}
+function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); }
 
-['dragenter', 'dragover'].forEach(eventName => {
-    dropZone.addEventListener(eventName, highlight, false);
-});
+['dragenter', 'dragover'].forEach(eventName => { dropZone.addEventListener(eventName, highlight, false); });
+['dragleave', 'drop'].forEach(eventName => { dropZone.addEventListener(eventName, unhighlight, false); });
 
-['dragleave', 'drop'].forEach(eventName => {
-    dropZone.addEventListener(eventName, unhighlight, false);
-});
-
-function highlight() {
-    dropZone.classList.add('dragover');
-    uploadStatus.textContent = "Relâchez les fichiers pour téléverser...";
-}
-
-function unhighlight() {
-    dropZone.classList.remove('dragover');
-}
+function highlight() { dropZone.classList.add('dragover'); uploadStatus.textContent = "Relâchez les fichiers pour téléverser..."; }
+function unhighlight() { dropZone.classList.remove('dragover'); }
 
 dropZone.addEventListener('drop', handleDrop, false);
 
 function handleDrop(e) {
     const dt = e.dataTransfer;
-    const files = dt.files;
-    
-    fileInput.files = files;
+    fileInput.files = dt.files;
     handleFileSelection();
 }
 
-
-/* -------------------------------------- */
-/* 3. Gestion de la Sélection de Fichiers */
-/* -------------------------------------- */
 fileInput.addEventListener('change', handleFileSelection);
 
 function handleFileSelection() {
@@ -276,95 +312,173 @@ function handleFileSelection() {
 
 
 /* -------------------------------------- */
-/* 4. Logique de l'Upload (AJAX)          */
+/* 4. Logique de l'Upload (AJAX TEMPORAIRE)*/
 /* -------------------------------------- */
 function uploadFiles(files) {
     const url = "{{ url_for('web_bp.upload_static_files') }}";
     const formData = new FormData();
 
-    // 1. Ajouter tous les fichiers au FormData
     for (let i = 0; i < files.length; i++) {
         formData.append('file-' + i, files[i]);
     }
 
-    // 2. Mettre à jour l'état et désactiver les boutons
     uploadStatus.className = 'mt-3 text-info';
-    uploadStatus.textContent = `Téléversement de ${files.length} fichiers...`;
+    uploadStatus.textContent = `Téléversement de ${files.length} fichiers en cours...`;
+    
+    // Désactiver tous les boutons pendant l'upload
     launchButton.disabled = true;
     clearButton.disabled = true;
+    deployButton.disabled = true; 
 
-    // 3. Envoyer la requête AJAX
     fetch(url, {
         method: 'POST',
         body: formData,
     })
     .then(response => {
         if (!response.ok) {
-            // Tente de lire l'erreur JSON même en cas de statut HTTP 4xx/5xx
             return response.json().then(err => { throw new Error(err.message || 'Erreur serveur inconnu'); });
         }
         return response.json();
     })
     .then(data => {
-        // 4. Mettre à jour l'interface avec les résultats
         if (data.status === 'success') {
             uploadStatus.className = 'mt-3 text-success';
-            uploadStatus.textContent = data.message + " Redirection en cours...";
+            uploadStatus.textContent = data.message;
             
-            // L'URL de lancement est maintenant dans data.launch_url
-            // On affiche le lien (temporairement) et on recharge la page pour la robustesse.
-            urlInput.value = data.launch_url;
-            urlContainer.style.display = 'block';
+            // Mise à jour de l'URL temporaire et affichage du conteneur temporaire
+            tempUrlInput.value = data.launch_url;
+            tempUrlContainer.style.display = 'block';
+            permanentUrlContainer.style.display = 'none'; // Cacher l'ancien permanent
 
-            // Recharger pour que le backend (Jinja2) mette à jour l'interface
-            setTimeout(() => {
+            // Réactiver les boutons selon l'état
+            launchButton.disabled = !data.index_present;
+            clearButton.disabled = false;
+            deployButton.disabled = !data.index_present; // On ne peut déployer que s'il y a un index.html
+
+            // Mise à jour de la liste des fichiers (rechargement pour la simplicité)
+             setTimeout(() => {
                 window.location.href = "{{ url_for('web_bp.static_deploy_page') }}";
-            }, 500); // Petite pause pour que l'utilisateur voie le message de succès
-            
+            }, 500); 
+
+            // Si la liste était mise à jour côté client (sans rechargement):
+            // updateFileList(data.uploaded_files_list, data.index_present, data.file_count);
+
         } else {
             uploadStatus.className = 'mt-3 text-danger';
             uploadStatus.textContent = `Échec du téléversement: ${data.message}`;
+            // Réactiver les boutons de base si l'upload a échoué
+            clearButton.disabled = fileCount === 0;
         }
     })
     .catch(error => {
-        console.error('Erreur AJAX:', error);
+        console.error('Erreur AJAX Upload:', error);
         uploadStatus.className = 'mt-3 text-danger';
-        uploadStatus.textContent = `Erreur critique: ${error.message}`;
-        
-        // Réactiver les boutons si l'upload a échoué mais des fichiers étaient présents
-        if (fileCount > 0) {
-            launchButton.disabled = !indexFilePresent; 
+        uploadStatus.textContent = `Erreur critique lors de l'upload: ${error.message}`;
+        clearButton.disabled = false;
+    });
+}
+
+
+/* -------------------------------------- */
+/* 5. Logique du Déploiement (AJAX PERMANENT) */
+/* -------------------------------------- */
+deployButton.addEventListener('click', commitDeployment);
+
+function commitDeployment() {
+    const url = "{{ url_for('web_bp.deploy_to_hf') }}";
+    
+    // 1. Démarrer l'animation de chargement
+    deployButton.disabled = true;
+    launchButton.disabled = true;
+    clearButton.disabled = true;
+    deployButton.innerHTML = '<span class="spinner-border text-light me-2"></span> Déploiement en cours...';
+    
+    uploadStatus.className = 'mt-3 text-info';
+    uploadStatus.textContent = `Déploiement permanent sur Hugging Face en cours... (Cela peut prendre quelques instants)`;
+
+    // 2. Envoyer la requête AJAX
+    fetch(url, {
+        method: 'POST',
+    })
+    .then(response => {
+        // Tente de lire l'erreur JSON pour un statut HTTP 4xx/5xx
+        if (!response.ok) {
+            return response.json().then(err => { throw new Error(err.message || 'Erreur serveur inconnu'); });
+        }
+        return response.json();
+    })
+    .then(data => {
+        // 3. Mettre à jour l'interface en cas de succès
+        if (data.success) {
+            uploadStatus.className = 'mt-3 text-success';
+            uploadStatus.textContent = data.message + " Redirection en cours...";
+            
+            // Mise à jour de l'URL permanente et de l'affichage
+            permanentUrlInput.value = data.url;
+            permanentUrlContainer.style.display = 'block';
+            tempUrlContainer.style.display = 'none';
+
+            // Recharger pour que Flask mette à jour l'interface JINJA2 pour un état permanent
+            setTimeout(() => {
+                window.location.href = "{{ url_for('web_bp.static_deploy_page') }}";
+            }, 500); 
+
+        } else {
+            // 4. Mettre à jour l'interface en cas d'échec
+            uploadStatus.className = 'mt-3 text-danger';
+            uploadStatus.textContent = `Échec du déploiement: ${data.message}`;
+            
+            // Rétablir les boutons à l'état "temporaire"
+            deployButton.innerHTML = '<span class="material-symbols-rounded align-middle me-1">cloud_upload</span> Déployer le Site Web (Permanent)';
+            deployButton.disabled = false;
+            launchButton.disabled = !indexFilePresent;
             clearButton.disabled = false;
         }
+    })
+    .catch(error => {
+        console.error('Erreur AJAX Déploiement:', error);
+        uploadStatus.className = 'mt-3 text-danger';
+        uploadStatus.textContent = `Erreur critique lors du déploiement: ${error.message}`;
+        
+        // Rétablir les boutons à l'état "temporaire"
+        deployButton.innerHTML = '<span class="material-symbols-rounded align-middle me-1">cloud_upload</span> Déployer le Site Web (Permanent)';
+        deployButton.disabled = false;
+        launchButton.disabled = !indexFilePresent;
+        clearButton.disabled = false;
     });
 }
 
 
 /* -------------------------------------- */
-/* 5. Gestion du Bouton de Copie          */
+/* 6. Gestion des Boutons de Copie        */
 /* -------------------------------------- */
-copyButton.addEventListener('click', () => {
-    if (urlInput.value) {
-        urlInput.select();
-        urlInput.setSelectionRange(0, 99999); // Pour mobile
-        navigator.clipboard.writeText(urlInput.value)
-            .then(() => {
-                // Rétroaction visuelle
-                copyButton.innerHTML = '<span class="material-symbols-rounded">done</span>';
-                copyButton.classList.remove('btn-outline-secondary');
-                copyButton.classList.add('btn-success');
-                setTimeout(() => {
-                    copyButton.innerHTML = '<span class="material-symbols-rounded">content_copy</span>';
-                    copyButton.classList.remove('btn-success');
-                    copyButton.classList.add('btn-outline-secondary');
-                }, 2000);
-            })
-            .catch(err => {
-                console.error('Erreur lors de la copie: ', err);
-                alert('Erreur lors de la copie du lien.');
-            });
-    }
-});
+
+function setupCopyButton(button, input) {
+    button.addEventListener('click', () => {
+        if (input.value) {
+            input.select();
+            input.setSelectionRange(0, 99999); 
+            navigator.clipboard.writeText(input.value)
+                .then(() => {
+                    button.innerHTML = '<span class="material-symbols-rounded">done</span>';
+                    button.classList.remove('btn-outline-secondary');
+                    button.classList.add('btn-success');
+                    setTimeout(() => {
+                        button.innerHTML = '<span class="material-symbols-rounded">content_copy</span>';
+                        button.classList.remove('btn-success');
+                        button.classList.add('btn-outline-secondary');
+                    }, 2000);
+                })
+                .catch(err => {
+                    console.error('Erreur lors de la copie: ', err);
+                    alert('Erreur lors de la copie du lien.');
+                });
+        }
+    });
+}
+
+setupCopyButton(copyTempButton, tempUrlInput);
+setupCopyButton(copyPermanentButton, permanentUrlInput);
 
 
 // Gère le bouton Vider (doit être implémenté au backend pour la suppression du dossier)