Spaces:

ernestmindres
/

Mailix

Build error

App Files Files Community

ernestmindres commited on Nov 5, 2025

Commit

4f79710

verified ·

1 Parent(s): b56de37

Update templates/static_deploy.html

Browse files

Files changed (1) hide show

templates/static_deploy.html +377 -272

templates/static_deploy.html CHANGED Viewed

@@ -1,273 +1,378 @@
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mailix | Déploiement Statique</title>
-    <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
-    <link rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        :root {
-            --main-bg: #2d2d30;
-            --bar-color: #3e3e42;
-            --text-color: #f0f0f0;
-            --accent-color: #007acc;
-            --border-color: #444444;
-        }
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: var(--main-bg);
-            color: var(--text-color);
-            padding: 20px;
-        }
-        .container {
-            max-width: 900px;
-            margin: 0 auto;
-            background-color: var(--bar-color);
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-        }
-        .input-group {
-            margin-bottom: 20px;
-            border: 2px dashed var(--border-color);
-            padding: 20px;
-            border-radius: 6px;
-            text-align: center;
-            cursor: pointer;
-            transition: border-color 0.3s;
-        }
-        .input-group:hover {
-            border-color: var(--accent-color);
-        }
-        #file-input {
-            display: none;
-        }
-        /* Boutons */
-        .btn {
-            padding: 10px 20px;
-            border-radius: 4px;
-            font-weight: bold;
-            cursor: pointer;
-            transition: background-color 0.2s;
-        }
-        #commit-btn {
-            background-color: var(--accent-color);
-            color: white;
-        }
-        #commit-btn:hover:not(:disabled) {
-            background-color: #005f99;
-        }
-        #commit-btn:disabled {
-            background-color: #444;
-            cursor: not-allowed;
-            opacity: 0.7;
-        }
-        .status-badge {
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 0.8em;
-            font-weight: bold;
-            display: inline-block;
-        }
-        .status-badge.running {
-            background-color: #10b981; /* Vert */
-            color: white;
-        }
-        .status-badge.error {
-            background-color: #ef4444; /* Rouge */
-            color: white;
-        }
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 20px;
-        }
-        th, td {
-            border: 1px solid var(--border-color);
-            padding: 10px;
-            text-align: left;
-        }
-        th {
-            background-color: #444444;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h2 class="text-2xl font-bold mb-4">🌐 Déploiement de Site Statique Temporaire</h2>
-        <div class="input-group" id="drop-area">
-            <p class="text-xl">Glissez-déposez vos fichiers ici (HTML, CSS, JS, Images)</p>
-            <p class="text-sm text-gray-400">ou cliquez pour sélectionner un ou plusieurs fichiers.</p>
-            <input type="file" id="file-input" multiple>
-        </div>
-        <div id="upload-status" class="mb-4 text-center">
-            <span id="status-text" class="text-yellow-400">Importez des fichiers et assurez-vous d'avoir un "index.html".</span>
-        </div>
-        <div class="flex justify-between items-center mb-4">
-            <button id="commit-btn" class="btn" disabled>
-                <span id="commit-text">Pas d'application fichier</span>
-            </button>
-            <div id="running-status" class="status-badge error">INACTIF</div>
-        </div>
-        <h3 class="text-xl font-semibold mb-2 mt-6">Fichiers Actuels (<span id="file-count">0</span>)</h3>
-        <div id="file-list-container" class="max-h-60 overflow-y-auto border border-gray-600 rounded">
-            <table>
-                <thead>
-                    <tr>
-                        <th class="w-1/2">Nom du Fichier</th>
-                        <th class="w-1/2">Type</th>
-                    </tr>
-                </thead>
-                <tbody id="files-table-body">
-                    {% for file in files %}
-                        <tr>
-                            <td>{{ file }}</td>
-                            <td>{{ file.rsplit('.', 1)[1] if '.' in file else 'Inconnu' }}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-            {% if not files %}
-            <p id="no-files-message" class="p-4 text-center text-gray-400">Aucun fichier importé.</p>
-            {% endif %}
-        </div>
-    </div>
-    <script>
-        const fileInput = document.getElementById('file-input');
-        const dropArea = document.getElementById('drop-area');
-        const commitBtn = document.getElementById('commit-btn');
-        const commitText = document.getElementById('commit-text');
-        const runningStatus = document.getElementById('running-status');
-        const statusText = document.getElementById('status-text');
-        const filesTableBody = document.getElementById('files-table-body');
-        const fileCountSpan = document.getElementById('file-count');
-        const noFilesMessage = document.getElementById('no-files-message');
-        let deployId = "{{ deploy_id }}";
-        let isIndexPresent = {{ 'true' if index_file_present else 'false' }};
-        let launchUrl = null;
-        // Fonction pour mettre à jour l'interface après un upload
-        function updateUI(files, indexPresent, newLaunchUrl, message) {
-            isIndexPresent = indexPresent;
-            launchUrl = newLaunchUrl;
-            statusText.textContent = message;
-            fileCountSpan.textContent = files.length;
-            // Mise à jour du tableau
-            filesTableBody.innerHTML = '';
-            if (files.length > 0) {
-                noFilesMessage.style.display = 'none';
-                files.forEach(file => {
-                    const row = filesTableBody.insertRow();
-                    row.innerHTML = `<td>${file}</td><td>${file.split('.').pop() || 'Inconnu'}</td>`;
-                });
-            } else {
-                noFilesMessage.style.display = 'block';
-            }
-            // Mise à jour du bouton Commit et du badge de statut
-            if (isIndexPresent) {
-                commitBtn.disabled = false;
-                commitText.textContent = "Lancer le Site Statique";
-                runningStatus.textContent = "PRÊT";
-                runningStatus.className = 'status-badge running';
-            } else {
-                commitBtn.disabled = true;
-                commitText.textContent = "Pas d'application fichier (index.html manquant)";
-                runningStatus.textContent = "ERREUR";
-                runningStatus.className = 'status-badge error';
-            }
-        }
-        // Initialiser l'UI avec les données du template (si la page est rechargée)
-        const initialFiles = [{% for file in files %}"{{ file }}"{% if not loop.last %}, {% endif %}{% endfor %}];
-        updateUI(initialFiles, isIndexPresent, null, 'Bienvenue sur le Déploiement Statique.');
-        // 1. Déclencheur du dialogue de fichier
-        dropArea.addEventListener('click', () => {
-            fileInput.click();
-        });
-        // 2. Gestion de la sélection et de l'upload
-        fileInput.addEventListener('change', async (event) => {
-            const files = event.target.files;
-            if (files.length === 0) return;
-            statusText.textContent = `Téléversement de ${files.length} fichiers...`;
-            commitBtn.disabled = true;
-            const formData = new FormData();
-            // Ajouter tous les fichiers sélectionnés à FormData
-            for (let i = 0; i < files.length; i++) {
-                // Utiliser une clé générique pour que le backend puisse itérer sur request.files
-                formData.append('files[]', files[i]);
-            }
-            try {
-                const response = await fetch('/upload-static', {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                if (response.ok && data.status === 'success') {
-                    deployId = data.deploy_id;
-                    // Mettre à jour la liste des fichiers et l'état
-                    const fileNames = Array.from(files).map(f => f.name);
-                    updateUI(fileNames, data.index_present, data.launch_url, "Upload réussi. Le site est prêt à être lancé.");
-                } else {
-                    throw new Error(data.message || "Erreur de téléversement.");
-                }
-            } catch (error) {
-                console.error("Erreur d'upload:", error);
-                statusText.textContent = `Erreur: ${error.message}`;
-                commitBtn.disabled = true;
-            }
-            // Réinitialiser l'input file
-            fileInput.value = "";
-        });
-        // 3. Gestion du bouton "Lancer le Site Statique"
-        commitBtn.addEventListener('click', () => {
-            if (isIndexPresent && launchUrl) {
-                // Rediriger vers l'interface de lancement
-                window.location.href = `/html-run?url=${encodeURIComponent(launchUrl)}`;
-            } else {
-                alert("Veuillez d'abord importer les fichiers et vous assurer qu'un index.html est présent.");
-            }
-        });
-    </script>
-</body>
 </html>

+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mailix | Déploiement Statique</title>
+    <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+<style>
+/* -------------------------------------- */
+/* CSS pour la zone de Glisser-Déposer    */
+/* -------------------------------------- */
+.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 */
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 0.2s, border-color 0.2s;
+    border-radius: 12px; /* Coins arrondis pour un look moderne */
+    margin-bottom: 20px;
+    user-select: none; /* Empêcher la sélection de texte */
+}
+.dropzone.dragover {
+    background-color: #e2f0ff; /* Couleur au survol/glissement */
+    border-color: #0056b3;
+}
+.dropzone-icon {
+    font-size: 3rem;
+    color: #007bff;
+    margin-bottom: 10px;
+}
+.dropzone-text {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: #343a40;
+}
+.dropzone-hint {
+    font-size: 0.9rem;
+    color: #6c757d;
+    margin-top: 5px;
+}
+/* -------------------------------------- */
+/* Style pour le Responsive (Mobile)      */
+/* -------------------------------------- */
+@media (max-width: 576px) {
+    .dropzone {
+        padding: 25px;
+    }
+    .dropzone-icon {
+        font-size: 2.5rem;
+    }
+    .dropzone-text {
+        font-size: 1rem;
+    }
+    .file-list {
+        font-size: 0.9rem;
+    }
+}
+/* Style pour la liste de fichiers */
+.file-list {
+    list-style-type: none;
+    padding: 0;
+    margin-top: 15px;
+    text-align: left;
+}
+.file-list li {
+    padding: 8px 10px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.file-list li:last-child {
+    border-bottom: none;
+}
+.file-icon {
+    margin-right: 8px;
+    color: #007bff;
+}
+/* Style pour le bouton de copie */
+#copy-url-button {
+    width: 50px; /* Fixer la largeur du bouton de copie */
+}
+</style>
+<input type="file" id="file-input" multiple style="display: none;">
+<div class="container my-5">
+    <div class="row">
+        <div class="col-12 col-lg-8 mx-auto">
+            <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>
+            </div>
+            <div id="launch-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)
+                </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">
+                        <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.
+                </small>
+            </div>
+            <div class="d-grid gap-2 d-md-flex justify-content-md-center mb-4 mt-4">
+                <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
+                </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>
+                </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>
+            </div>
+            {% if deploy_id %}
+            <small class="text-muted mt-3 d-block text-center">ID de Déploiement Temporaire: <code>{{ deploy_id }}</code></small>
+            {% endif %}
+        </div>
+    </div>
+</div>
+<script>
+// 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 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');
+const fileCountSpan = document.getElementById('file-count');
+// Récupération de l'URL injectée par Flask (sera null si aucun déploiement actif)
+const currentLaunchUrl = urlInput.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 }};
+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 (utilise l'URL complète si disponible)
+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');
+        }
+    }
+});
+/* -------------------------------------- */
+/* 1. Gestion du Clic sur la Dropzone     */
+/* -------------------------------------- */
+dropZone.addEventListener('click', () => {
+    fileInput.click();
+});
+/* -------------------------------------- */
+/* 2. Gestion du Glisser-Déposer          */
+/* -------------------------------------- */
+['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;
+    const files = dt.files;
+    fileInput.files = files;
+    handleFileSelection();
+}
+/* -------------------------------------- */
+/* 3. Gestion de la Sélection de Fichiers */
+/* -------------------------------------- */
+fileInput.addEventListener('change', handleFileSelection);
+function handleFileSelection() {
+    if (fileInput.files.length > 0) {
+        uploadFiles(fileInput.files);
+    }
+}
+/* -------------------------------------- */
+/* 4. Logique de l'Upload (AJAX)          */
+/* -------------------------------------- */
+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...`;
+    launchButton.disabled = true;
+    clearButton.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...";
+            // 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';
+            // Recharger pour que le backend (Jinja2) mette à jour l'interface
+            setTimeout(() => {
+                window.location.href = "{{ url_for('web_bp.static_deploy_page') }}";
+            }, 500); // Petite pause pour que l'utilisateur voie le message de succès
+        } else {
+            uploadStatus.className = 'mt-3 text-danger';
+            uploadStatus.textContent = `Échec du téléversement: ${data.message}`;
+        }
+    })
+    .catch(error => {
+        console.error('Erreur AJAX:', 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;
+            clearButton.disabled = false;
+        }
+    });
+}
+/* -------------------------------------- */
+/* 5. Gestion du Bouton 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.');
+            });
+    }
+});
+// Gère le bouton Vider (doit être implémenté au backend pour la suppression du dossier)
+clearButton.addEventListener('click', () => {
+    alert("Fonction Vider: Une route de suppression doit être implémentée au backend pour supprimer le dossier temporaire et vider la session.");
+});
+</script>
+</body>
 </html>