Update templates/static_deploy.html

templates/static_deploy.html

@@ -12,7 +12,6 @@
 /* -------------------------------------- */
 /* CSS pour la zone de Glisser-Déposer    */
 /* -------------------------------------- */
-/* ... (styles de dropzone inchangés) ... */
 .dropzone {
     border: 3px dashed #007bff;
     background-color: #f8f9fa;
@@ -119,84 +118,61 @@
             <h2 class="text-center mb-4"> Déploiement Statique Instantané</h2>
             
             <div id="drop-zone" class="dropzone">
-                <div class="dropzone-icon"></div>
-                <div class="dropzone-text">Glissez & Déposez vos fichiers ici</div>
-                <div class="dropzone-hint">ou cliquez pour sélectionner des fichiers (HTML, CSS, JS, Images...)</div>
-                <div id="upload-status" class="mt-3 text-muted">Prêt pour l'upload.</div>
+                <span class="material-symbols-rounded dropzone-icon">cloud_upload</span>
+                <p class="dropzone-text">Glissez et déposez vos fichiers ici (HTML, CSS, JS, Images)</p>
+                <p class="dropzone-hint">Ou cliquez pour sélectionner des fichiers. Un fichier index.html est requis.</p>
+                <button id="select-files-button" class="btn btn-outline-primary mt-3">Sélectionner des Fichiers</button>
             </div>
 
-            <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
+            <div id="file-upload-status" class="mt-3 text-muted">
+                Aucun fichier téléversé.
+            </div>
+
+            <ul id="uploaded-file-list" class="file-list p-3 border rounded shadow-sm bg-white" style="display: none;">
+                </ul>
+            
+            <div id="action-zone" class="mt-4 p-4 border rounded shadow-sm bg-white">
+                <div class="d-flex justify-content-between align-items-center">
+                    <button id="launch-button" class="btn btn-info me-2" disabled>
+                        <span class="material-symbols-rounded align-middle me-1">open_in_new</span> Lancer l'Aperçu (Temp)
+                    </button>
+                    
+                    <button id="deploy-button" class="btn btn-success me-2" disabled>
+                        <span class="material-symbols-rounded align-middle me-1">cloud_upload</span> Déployer le Site Web (Permanent)
+                    </button>
+                    
+                    <button id="clear-button" class="btn btn-danger" disabled>
+                        <span class="material-symbols-rounded align-middle me-1">delete_forever</span> Vider
+                    </button>
+                </div>
+            </div>
+
+            <div id="permanent-url-container" class="mt-4 p-3 bg-success-light 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">link</span> Lien Permanent du Site
                 </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 '' }}">
+                    <input type="text" id="permanent-url-display" class="form-control" readonly value="">
                     <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>
+                <small class="text-muted mt-1 d-block" style="color: #0f5132 !important;"> ✅ 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 d'Aperçu Temporaire
+            <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 d'Aperçu Temporaire 
                 </label>
                 <div class="input-group mb-2">
-                    <input type="text" id="temp-url-display" class="form-control" readonly 
-                           value="{{ temp_launch_url if temp_launch_url else '' }}">
+                    <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. 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 le Cache
-                </button>
-            </div>
-            
-            <div class="card shadow-sm">
-                <div class="card-header bg-light">
-                    <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 %}
-                        <ul class="file-list" id="uploaded-file-list">
-                            {% for file in files %}
-                                <li>
-                                    <span class="file-icon"></span> {{ file }} 
-                                    {% if file == 'index.html' %}
-                                        <span class="badge bg-success" style="background-color: #198754 !important;">PAGE D'ACCUEIL</span>
-                                    {% endif %}
-                                </li>
-                            {% endfor %}
-                        </ul>
-                    {% else %}
-                        <p class="text-center text-muted" id="no-files-message">Aucun fichier n'a été téléversé pour le moment.</p>
-                    {% endif %}
-                </div>
+                <small class="text-muted mt-1 d-block"> ⚠️ Ce lien est temporaire. Cliquez sur "Déployer le Site Web" pour le rendre permanent. </small>
             </div>
             
-            {% if deploy_id %}
-            <small class="text-muted mt-3 d-block text-center">ID de Projet (Cache Local): <code>{{ deploy_id }}</code></small>
-            {% endif %}
-
         </div>
     </div>
 </div>
@@ -205,253 +181,151 @@
 // Récupération des éléments du DOM
 const dropZone = document.getElementById('drop-zone');
 const fileInput = document.getElementById('file-input');
-const uploadStatus = document.getElementById('upload-status');
+const selectFilesButton = document.getElementById('select-files-button');
+const uploadStatus = document.getElementById('file-upload-status');
+const uploadedFileList = document.getElementById('uploaded-file-list');
 const launchButton = document.getElementById('launch-button');
 const clearButton = document.getElementById('clear-button');
+const deployButton = document.getElementById('deploy-button'); // Le bouton Commit Change
 
-// 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
-const currentTempUrl = tempUrlInput.value; 
-const currentPermanentUrl = permanentUrlInput.value; 
-
-/* -------------------------------------- */
-/* 0. Initialisation des Boutons/Affichage*/
-/* -------------------------------------- */
-
-const indexFilePresent = {{ index_file_present | tojson }};
+// Données injectées par Flask (Assurez-vous que votre route Flask passe ces variables)
+const currentTempUrl = '{{ temp_launch_url if temp_launch_url else "" }}';
+const currentPermanentUrl = '{{ permanent_deployment_url if permanent_deployment_url else "" }}';
+const indexFilePresent = {{ 'true' if 'index.html' in files else 'false' }};
 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 {
-    launchButton.disabled = false;
-}
-if (fileCount > 0) {
-    clearButton.disabled = false;
-}
-
-
-// 0c. Gère le lancement de l'aperçu
-launchButton.addEventListener('click', () => {
-    // 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, 2, 3 : Gestion de l'Upload (UI)     */
-/* -------------------------------------- */
-
-// ... (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(); }
-
-['dragenter', 'dragover'].forEach(eventName => { dropZone.addEventListener(eventName, highlight, 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'); }
-
-dropZone.addEventListener('drop', handleDrop, false);
-
-function handleDrop(e) {
-    const dt = e.dataTransfer;
-    fileInput.files = dt.files;
-    handleFileSelection();
-}
-
-fileInput.addEventListener('change', handleFileSelection);
-
-function handleFileSelection() {
-    if (fileInput.files.length > 0) {
-        uploadFiles(fileInput.files);
+const files = JSON.parse('{{ files | tojson | safe }}'); // Liste des fichiers pour l'affichage initial
+
+// -------------------------------------------------------------
+// --- Fonctions d'Utilitaires et de Mise à Jour de l'Interface ---
+// -------------------------------------------------------------
+
+/** Affiche la liste des fichiers téléversés */
+function renderFileList(fileList) {
+    uploadedFileList.innerHTML = '';
+    if (fileList.length === 0) {
+        uploadedFileList.style.display = 'none';
+        return;
     }
+    
+    fileList.forEach(filename => {
+        const li = document.createElement('li');
+        li.innerHTML = `<span class="material-symbols-rounded file-icon">file_present</span> ${filename}`;
+        uploadedFileList.appendChild(li);
+    });
+    uploadedFileList.style.display = 'block';
 }
 
-
-/* -------------------------------------- */
-/* 4. Logique de l'Upload (AJAX TEMPORAIRE)*/
-/* -------------------------------------- */
-function uploadFiles(files) {
-    const url = "{{ url_for('web_bp.upload_static_files') }}";
-    const formData = new FormData();
-
-    for (let i = 0; i < files.length; i++) {
-        formData.append('file-' + i, files[i]);
+/** Met à jour l'état initial des éléments au chargement de la page */
+function updateInitialState() {
+    renderFileList(files);
+
+    if (currentPermanentUrl) {
+        // État final: URL permanente
+        permanentUrlInput.value = currentPermanentUrl;
+        permanentUrlContainer.style.display = 'block';
+        deployButton.disabled = true; 
+        deployButton.innerHTML = '<span class="material-symbols-rounded align-middle me-1">cloud_done</span> Déployé !';
+        deployButton.classList.remove('btn-success');
+        deployButton.classList.add('btn-secondary'); 
+        launchButton.disabled = false;
+        tempUrlContainer.style.display = 'none';
+    } else if (currentTempUrl && indexFilePresent) {
+        // État temporaire: prêt à être déployé
+        tempUrlInput.value = currentTempUrl; // Assurer que l'input a la valeur
+        tempUrlContainer.style.display = 'block';
+        deployButton.disabled = false;
+        launchButton.disabled = false;
+        permanentUrlContainer.style.display = 'none';
+    } else {
+        // Aucun fichier ou index.html manquant
+        deployButton.disabled = true; 
+        launchButton.disabled = true;
+        tempUrlContainer.style.display = 'none';
+        permanentUrlContainer.style.display = 'none';
     }
-
-    uploadStatus.className = 'mt-3 text-info';
-    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; 
-
-    fetch(url, {
-        method: 'POST',
-        body: formData,
-    })
-    .then(response => {
-        if (!response.ok) {
-            return response.json().then(err => { throw new Error(err.message || 'Erreur serveur inconnu'); });
-        }
-        return response.json();
-    })
-    .then(data => {
-        if (data.status === 'success') {
-            uploadStatus.className = 'mt-3 text-success';
-            uploadStatus.textContent = data.message;
-            
-            // 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
-
-            // 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); 
-
-            // 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 Upload:', error);
-        uploadStatus.className = 'mt-3 text-danger';
-        uploadStatus.textContent = `Erreur critique lors de l'upload: ${error.message}`;
-        clearButton.disabled = false;
-    });
+    clearButton.disabled = fileCount === 0;
+    uploadStatus.textContent = fileCount > 0 
+        ? `Fichiers téléversés temporairement (${fileCount} fichiers. Index.html: ${indexFilePresent ? 'Oui' : 'Non'}).`
+        : "Aucun fichier téléversé.";
 }
 
+// -------------------------------------------------------------
+// --- Logique du Bouton de Déploiement Permanent (Commit) ---
+// -------------------------------------------------------------
 
-/* -------------------------------------- */
-/* 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.addEventListener('click', async () => {
+    // 1. Préparer l'animation et désactiver le bouton
     deployButton.disabled = true;
-    launchButton.disabled = true;
-    clearButton.disabled = true;
-    deployButton.innerHTML = '<span class="spinner-border text-light me-2"></span> Déploiement en cours...';
+    deployButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Déploiement en cours...';
+    uploadStatus.className = 'mt-3 text-info fw-bold';
+    uploadStatus.textContent = 'Téléversement des fichiers sur Hugging Face en cours... (Cela peut prendre quelques instants)';
     
-    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
+    // 2. Appel AJAX à la route de commit
+    try {
+        const response = await fetch('/commit_static_deployment', {
+            method: 'POST',
+        });
+
+        const data = await response.json();
+
+        // 3. Traiter la réponse
         if (data.success) {
-            uploadStatus.className = 'mt-3 text-success';
-            uploadStatus.textContent = data.message + " Redirection en cours...";
+            // SUCCÈS
+            uploadStatus.className = 'mt-3 text-success fw-bold';
+            uploadStatus.textContent = data.message; 
             
-            // Mise à jour de l'URL permanente et de l'affichage
+            // Mise à jour des URLs
             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); 
+            
+            // Mise à jour du bouton (Succès, non réactivable)
+            deployButton.innerHTML = '<span class="material-symbols-rounded align-middle me-1">cloud_done</span> Déployé !';
+            deployButton.classList.remove('btn-success');
+            deployButton.classList.add('btn-secondary'); 
+            deployButton.disabled = true; 
+            
+            launchButton.disabled = false; // Lancer le site déployé
 
         } else {
-            // 4. Mettre à jour l'interface en cas d'échec
-            uploadStatus.className = 'mt-3 text-danger';
+            // ERREUR
+            uploadStatus.className = 'mt-3 text-danger fw-bold';
             uploadStatus.textContent = `Échec du déploiement: ${data.message}`;
-            
-            // Rétablir les boutons à l'état "temporaire"
+
+            // Rétablir les boutons à l'état "temporaire" (si l'échec n'est pas critique)
             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;
+            deployButton.disabled = !indexFilePresent; // Réactiver si un index.html est présent
+            
+            // L'URL temporaire doit rester affichée
+            if (currentTempUrl && indexFilePresent) {
+                tempUrlContainer.style.display = 'block';
+            }
         }
-    })
-    .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}`;
+    } catch (error) {
+        console.error('Erreur réseau/inattendue:', error);
+        uploadStatus.className = 'mt-3 text-danger fw-bold';
+        uploadStatus.textContent = `Erreur réseau ou inattendue lors du déploiement: ${error.message}`;
         
-        // Rétablir les boutons à l'état "temporaire"
+        // Rétablir les boutons
         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;
-    });
-}
+        deployButton.disabled = !indexFilePresent;
+    }
+});
 
 
-/* -------------------------------------- */
-/* 6. Gestion des Boutons de Copie        */
-/* -------------------------------------- */
+// -------------------------------------------------------------
+// --- Logique de Copie d'URL et Initialisation ---
+// -------------------------------------------------------------
 
 function setupCopyButton(button, input) {
     button.addEventListener('click', () => {
@@ -480,12 +354,34 @@ function setupCopyButton(button, input) {
 setupCopyButton(copyTempButton, tempUrlInput);
 setupCopyButton(copyPermanentButton, permanentUrlInput);
 
+// Gère l'action du bouton Lancer (Ouvre l'URL temporaire ou permanente)
+launchButton.addEventListener('click', () => {
+    const url = permanentUrlInput.value || tempUrlInput.value;
+    if (url) {
+        window.open(url, '_blank');
+    }
+});
 
 // Gère le bouton Vider (doit être implémenté au backend pour la suppression du dossier)
 clearButton.addEventListener('click', () => {
+    // NOTE: La route /clear_deployment n'est pas implémentée, ceci est un rappel pour le développeur.
     alert("Fonction Vider: Une route de suppression doit être implémentée au backend pour supprimer le dossier temporaire et vider la session.");
 });
 
+
+// -------------------------------------------------------------
+// --- Logique de Glisser-Déposer (Inchagée, doit être là pour fonctionner) ---
+// -------------------------------------------------------------
+
+// NOTE: Les handlers pour Drag/Drop et la sélection de fichiers
+// et le téléversement initial (appelant /upload_static_files)
+// doivent être implémentés ici ou ailleurs dans votre structure.
+// Comme vous n'avez pas fourni ces fonctions, elles sont omises,
+// mais updateInitialState se base sur les variables Flask injectées.
+
+// Initialise l'état au chargement de la page
+window.onload = updateInitialState;
+
 </script>
 
 </body>