resolvendo dependencias dos projetos

pages/enviaProjeto.md

@@ -11,12 +11,10 @@ permalink: /envie_seu_projeto/
     <div class="container">
       <br />
       
-      <!-- 1. MENU DE ABAS (Padrão) -->
       <div class="tabs is-centered is-boxed is-medium mb-6">
         {% include sidebar.html %}
       </div>
 
-      <!-- 2. CABEÇALHO -->
       <div class="columns is-centered">
         <div class="column is-8 has-text-centered">
             <h1 class="title is-3 has-text-grey-dark mb-3">
@@ -30,14 +28,12 @@ permalink: /envie_seu_projeto/
         </div>
       </div>
 
-      <!-- 3. FORMULÁRIO DE UPLOAD -->
       <div class="columns is-centered">
         <div class="column is-8">
 
             <div class="box p-5" style="background-color: #f0f8ff; border: 1px solid #cfe8fc; border-radius: 12px;">
                 <form id="upload-project-form">
 
-                    <!-- ÁREA DE ARQUIVO (DROPZONE) -->
                     <div class="field mb-5">
                         <label class="label has-text-grey-dark">Arquivo do Projeto (LMMS)</label>
                         <div class="file-upload-wrapper" id="drop-zone">
@@ -51,7 +47,6 @@ permalink: /envie_seu_projeto/
                         </div>
                     </div>
 
-                    <!-- INFORMAÇÕES BÁSICAS -->
                     <div class="columns">
                         <div class="column is-6">
                             <div class="field">
@@ -110,7 +105,6 @@ permalink: /envie_seu_projeto/
                         </div>
                     </div>
 
-                    <!-- PREVIEW DE ÁUDIO (OPCIONAL) -->
                     <div class="field mb-5">
                         <label class="label has-text-grey-dark">Preview de Áudio (Opcional)</label>
                         <div class="file has-name is-fullwidth">
@@ -132,7 +126,6 @@ permalink: /envie_seu_projeto/
                         <p class="help">Envie um .mp3 ou .wav para que as pessoas possam ouvir antes de baixar.</p>
                     </div>
 
-                    <!-- BOTÃO DE ENVIO -->
                     <div class="field mt-5">
                         <div class="control">
                             <button type="submit" class="button is-info is-fullwidth is-medium shadow-sm" id="submit-btn">
@@ -153,7 +146,6 @@ permalink: /envie_seu_projeto/
   </div>
 </main>
 
-<!-- MODAL DE SUCESSO -->
 <div id="success-modal" class="modal">
   <div class="modal-background"></div>
   <div class="modal-card">
@@ -175,6 +167,50 @@ permalink: /envie_seu_projeto/
   </div>
 </div>
 
+<div id="resolve-modal" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head has-background-warning-light">
+      <p class="modal-card-title has-text-warning-dark">Atenção: Arquivos Faltando</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body p-5">
+      <div class="notification is-warning is-light">
+        <span class="icon"><i class="fa-solid fa-triangle-exclamation"></i></span>
+        <strong>Seu projeto usa samples externos!</strong>
+        <p class="mt-2">Para que o projeto funcione para todos, precisamos dos seguintes arquivos:</p>
+      </div>
+
+      <div class="box">
+          <ul id="missing-files-list" style="list-style: disc; margin-left: 20px; color: #d63031;">
+              </ul>
+      </div>
+
+      <form id="resolve-form">
+          <input type="hidden" name="project_file" id="hidden-project-name">
+
+          <div class="field">
+              <label class="label">Envie os arquivos listados acima:</label>
+              <div class="file has-name is-fullwidth is-warning">
+                <label class="file-label">
+                  <input class="file-input" type="file" name="sample_files" multiple required>
+                  <span class="file-cta">
+                    <span class="file-icon"><i class="fa-solid fa-upload"></i></span>
+                    <span class="file-label">Selecionar Samples...</span>
+                  </span>
+                  <span class="file-name" id="resolve-file-name">Nenhum selecionado</span>
+                </label>
+              </div>
+          </div>
+
+          <button type="submit" class="button is-warning is-fullwidth mt-4" id="resolve-btn">
+              Enviar Arquivos e Finalizar
+          </button>
+      </form>
+    </section>
+  </div>
+</div>
+
 <style>
     /* Estilo do Dropzone */
     .file-upload-wrapper {
@@ -216,105 +252,176 @@ permalink: /envie_seu_projeto/
 
 <script>
 document.addEventListener('DOMContentLoaded', () => {
-    // 1. Lógica do Dropzone (Visual)
+    // --- ELEMENTOS GERAIS ---
     const dropZone = document.getElementById('drop-zone');
     const fileInput = document.getElementById('project_file');
     const fileNameDisplay = document.getElementById('file-name-display');
     const dragTextTitle = dropZone.querySelector('.title');
+    
+    // --- MODAIS ---
+    const successModal = document.getElementById('success-modal');
+    const resolveModal = document.getElementById('resolve-modal');
+    const closeBtns = document.querySelectorAll('.delete, #close-success-modal, .modal-background');
 
-    // Efeito visual ao arrastar
-    ['dragenter', 'dragover'].forEach(eventName => {
-        dropZone.addEventListener(eventName, (e) => {
-            e.preventDefault();
-            dropZone.classList.add('dragover');
-        });
-    });
-    ['dragleave', 'drop'].forEach(eventName => {
-        dropZone.addEventListener(eventName, (e) => {
-            dropZone.classList.remove('dragover');
-        });
-    });
+    // --- FORMULÁRIOS ---
+    const mainForm = document.getElementById('upload-project-form');
+    const resolveForm = document.getElementById('resolve-form');
+    const submitBtn = document.getElementById('submit-btn');
+    const resolveBtn = document.getElementById('resolve-btn');
+
+    // 1. VISUAL DO DROPZONE
+    ['dragenter', 'dragover'].forEach(evt => dropZone.addEventListener(evt, (e) => {
+        e.preventDefault(); dropZone.classList.add('dragover');
+    }));
+    ['dragleave', 'drop'].forEach(evt => dropZone.addEventListener(evt, (e) => {
+        dropZone.classList.remove('dragover');
+    }));
 
-    // Mostrar nome do arquivo selecionado
     fileInput.addEventListener('change', () => {
         if (fileInput.files.length > 0) {
-            const name = fileInput.files[0].name;
-            fileNameDisplay.textContent = name;
+            fileNameDisplay.textContent = fileInput.files[0].name;
             fileNameDisplay.classList.remove('is-hidden');
-            dragTextTitle.textContent = "Arquivo Selecionado!";
+            dragTextTitle.textContent = "Arquivo Pronto!";
             dropZone.style.borderColor = "#4caf50";
             dropZone.style.backgroundColor = "#f0fff4";
         }
     });
 
-    // 2. Lógica do Input de Áudio (padrão Bulma)
-    const audioInput = document.querySelector('.file-input');
-    const audioName = document.querySelector('.file-name');
-    if(audioInput) {
-        audioInput.addEventListener('change', () => {
-            if (audioInput.files.length > 0) {
-                audioName.textContent = audioInput.files[0].name;
+    // 2. INPUT DE ÁUDIO & RESOLVE (Nomes de arquivo)
+    document.querySelectorAll('.file-input').forEach(input => {
+        input.addEventListener('change', () => {
+            if (input.files.length > 0) {
+                const nameContainer = input.parentElement.querySelector('.file-name');
+                if (nameContainer) {
+                    nameContainer.textContent = input.files.length > 1 
+                        ? `${input.files.length} arquivos selecionados` 
+                        : input.files[0].name;
+                }
             }
         });
-    }
+    });
 
-    // 3. Simulação de Envio (Modal)
-    const form = document.getElementById('upload-project-form');
-    const modal = document.getElementById('success-modal');
-    const submitBtn = document.getElementById('submit-btn');
-    const closeBtns = document.querySelectorAll('.delete, #close-success-modal, .modal-background');
+    // 3. FUNÇÃO DE FECHAR MODAIS
+    closeBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            successModal.classList.remove('is-active');
+            resolveModal.classList.remove('is-active');
+            document.documentElement.classList.remove('is-clipped');
+        });
+    });
 
-    form.addEventListener('submit', async (e) => {
+    // ============================================================
+    // 4. SUBMISSÃO PRINCIPAL (PROJETO)
+    // ============================================================
+    mainForm.addEventListener('submit', async (e) => {
         e.preventDefault();
-        
         submitBtn.classList.add('is-loading');
         
-        const formData = new FormData(form);
+        const formData = new FormData(mainForm);
 
         try {
-            // APONTA PARA O SEU SERVIDOR PYTHON
-            // Se estiver rodando localmente, geralmente é localhost:5000
-            // Se for no servidor de produção, coloque o IP ou domínio correto
+            // Rota principal de upload
             const response = await fetch('https://alice.ufsj.edu.br:33002/api/upload', {
                 method: 'POST',
                 body: formData
             });
 
+            // Parseamos o JSON independente do status para ler mensagens
             const result = await response.json();
 
-            if (response.ok) {
-                // Sucesso!
-                submitBtn.classList.remove('is-loading');
-                
-                // Atualiza a mensagem do modal se quiser
-                const modalTitle = modal.querySelector('.title');
-                modalTitle.textContent = "Projeto Processado!";
-                
-                modal.classList.add('is-active');
-                document.documentElement.classList.add('is-clipped');
-                
-                form.reset(); 
-                document.getElementById('file-name-display').classList.add('is-hidden');
-                document.querySelector('.drag-text .title').textContent = "Arraste e solte o arquivo aqui";
-                document.getElementById('drop-zone').style.borderColor = "#3273dc";
-                document.getElementById('drop-zone').style.backgroundColor = "#fff";
+            submitBtn.classList.remove('is-loading');
+
+            if (response.status === 200) {
+                // SUCESSO TOTAL (Status 200)
+                mostrarSucesso();
+                mainForm.reset();
+                resetDropzone();
+
+            } else if (response.status === 202) {
+                // SUCESSO PARCIAL (Status 202 - Faltam Samples)
+                mostrarResolveModal(result);
+
             } else {
-                alert('Erro: ' + (result.error || 'Falha desconhecida'));
-                submitBtn.classList.remove('is-loading');
+                // ERRO (400, 500)
+                alert('Erro: ' + (result.error || 'Ocorreu um erro desconhecido.'));
             }
+
         } catch (error) {
             console.error('Erro:', error);
-            alert('Erro de conexão com o servidor de processamento.');
+            alert('Erro de conexão com o servidor.');
             submitBtn.classList.remove('is-loading');
         }
     });
 
-    // Fechar Modal
-    closeBtns.forEach(btn => {
-        btn.addEventListener('click', () => {
-            modal.classList.remove('is-active');
-            document.documentElement.classList.remove('is-clipped');
-        });
+    // ============================================================
+    // 5. SUBMISSÃO DE RESOLUÇÃO (SAMPLES FALTANDO)
+    // ============================================================
+    resolveForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        resolveBtn.classList.add('is-loading');
+
+        const formData = new FormData(resolveForm);
+
+        try {
+            // Rota de resolução (envio dos samples faltantes)
+            const response = await fetch('https://alice.ufsj.edu.br:33002/api/upload/resolve', {
+                method: 'POST',
+                body: formData
+            });
+
+            const result = await response.json();
+            resolveBtn.classList.remove('is-loading');
+
+            if (response.ok) {
+                // Agora sim, tudo certo!
+                resolveModal.classList.remove('is-active');
+                mostrarSucesso();
+                mainForm.reset();
+                resetDropzone();
+            } else {
+                alert('Erro ao enviar samples: ' + (result.error || 'Erro desconhecido'));
+            }
+
+        } catch (error) {
+            console.error(error);
+            alert('Erro ao enviar samples.');
+            resolveBtn.classList.remove('is-loading');
+        }
     });
+
+    // --- FUNÇÕES AUXILIARES ---
+
+    function mostrarSucesso() {
+        successModal.classList.add('is-active');
+        document.documentElement.classList.add('is-clipped');
+    }
+
+    function mostrarResolveModal(data) {
+        // 1. Preenche o input hidden com o nome do projeto (retornado pelo backend)
+        document.getElementById('hidden-project-name').value = data.project_file;
+
+        // 2. Preenche a lista visual de arquivos faltando
+        const list = document.getElementById('missing-files-list');
+        list.innerHTML = ''; // Limpa lista anterior
+        
+        if (data.missing_files && data.missing_files.length > 0) {
+            data.missing_files.forEach(file => {
+                const li = document.createElement('li');
+                li.textContent = file;
+                list.appendChild(li);
+            });
+        }
+
+        // 3. Abre o modal
+        resolveModal.classList.add('is-active');
+        document.documentElement.classList.add('is-clipped');
+    }
+
+    function resetDropzone() {
+        fileNameDisplay.classList.add('is-hidden');
+        dragTextTitle.textContent = "Arraste e solte o arquivo aqui";
+        dropZone.style.borderColor = "#3273dc";
+        dropZone.style.backgroundColor = "#fff";
+    }
 });
-</script>
+</script>