resolvendo dependencias dos projetos

pages/enviaProjeto.md

@@ -169,42 +169,42 @@ permalink: /envie_seu_projeto/
 
 <div id="resolve-modal" class="modal">
   <div class="modal-background"></div>
-  <div class="modal-card">
+  <div class="modal-card" style="width: 600px; max-width: 95%;">
     <header class="modal-card-head has-background-warning-light">
-      <p class="modal-card-title has-text-warning-dark">Atenção: Arquivos Faltando</p>
+      <p class="modal-card-title has-text-warning-dark">
+          <span class="icon mr-2"><i class="fa-solid fa-link-slash"></i></span>
+          Arquivos Externos Detectados
+      </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>
+    
+    <section class="modal-card-body">
+      <div class="content is-small mb-4">
+        <p>Este projeto utiliza samples que não são nativos do LMMS. Para que o som saia correto, precisamos que você envie os arquivos correspondentes.</p>
       </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 class="table-container">
+              <table class="table is-fullwidth is-striped is-hoverable">
+                  <thead>
+                      <tr>
+                          <th>Arquivo Faltante (XML)</th>
+                          <th style="width: 50px;">Status</th>
+                          <th style="width: 120px;">Ação</th>
+                      </tr>
+                  </thead>
+                  <tbody id="missing-files-table-body">
+                      </tbody>
+              </table>
           </div>
 
-          <button type="submit" class="button is-warning is-fullwidth mt-4" id="resolve-btn">
-              Enviar Arquivos e Finalizar
+          <div class="notification is-danger is-light is-hidden" id="resolve-error-msg"></div>
+
+          <button type="submit" class="button is-success is-fullwidth mt-4" id="resolve-btn" disabled>
+              <span class="icon"><i class="fa-solid fa-check"></i></span>
+              <span>Enviar Todos e Processar</span>
           </button>
       </form>
     </section>
@@ -396,24 +396,95 @@ document.addEventListener('DOMContentLoaded', () => {
         document.documentElement.classList.add('is-clipped');
     }
 
+    // --- FUNÇÃO PARA GERAR A TABELA DE UPLOAD ---
     function mostrarResolveModal(data) {
-        // 1. Preenche o input hidden com o nome do projeto (retornado pelo backend)
+        // 1. Configurações iniciais
         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
+        const tbody = document.getElementById('missing-files-table-body');
+        tbody.innerHTML = ''; // Limpa tabela
         
-        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);
-            });
-        }
+        const resolveBtn = document.getElementById('resolve-btn');
+        resolveBtn.disabled = true; // Começa desabilitado até preencher tudo
+        
+        // Controle de validação
+        let totalFiles = data.missing_files.length;
+        let filledFiles = 0;
 
-        // 3. Abre o modal
-        resolveModal.classList.add('is-active');
+        // 2. Gera uma linha para cada arquivo faltante
+        data.missing_files.forEach((originalName, index) => {
+            const tr = document.createElement('tr');
+            
+            // Coluna 1: Nome do arquivo
+            const tdName = document.createElement('td');
+            tdName.style.verticalAlign = "middle";
+            tdName.innerHTML = `<span class="has-text-grey-dark is-family-code">${originalName}</span>`;
+            
+            // Coluna 2: Ícone de Status
+            const tdStatus = document.createElement('td');
+            tdStatus.style.verticalAlign = "middle";
+            tdStatus.style.textAlign = "center";
+            tdStatus.innerHTML = `<span class="icon has-text-grey-light status-icon"><i class="fa-solid fa-circle-xmark"></i></span>`;
+
+            // Coluna 3: Botão de Upload
+            const tdAction = document.createElement('td');
+            tdAction.style.textAlign = "right";
+
+            // Cria o input file invisível
+            // O 'name' do input é o NOME ORIGINAL DO ARQUIVO. O Backend usará isso para mapear.
+            const fileInput = document.createElement('input');
+            fileInput.type = 'file';
+            fileInput.name = originalName; // <--- O PULO DO GATO
+            fileInput.style.display = 'none';
+            fileInput.accept = ".wav, .mp3, .ogg, .flac, .ds";
+
+            // Botão bonito que aciona o input
+            const uploadLabel = document.createElement('label');
+            uploadLabel.className = 'button is-small is-info is-outlined';
+            uploadLabel.innerHTML = `<span class="icon"><i class="fa-solid fa-upload"></i></span>`;
+            
+            // Evento: Ao clicar no botão, abre o seletor de arquivo
+            uploadLabel.addEventListener('click', (e) => {
+                e.preventDefault(); // Evita submit
+                fileInput.click();
+            });
+
+            // Evento: Quando o usuário seleciona um arquivo
+            fileInput.addEventListener('change', () => {
+                if (fileInput.files.length > 0) {
+                    // Muda visual para sucesso
+                    uploadLabel.className = 'button is-small is-success';
+                    uploadLabel.innerHTML = `<span class="icon"><i class="fa-solid fa-rotate"></i></span>`; // Ícone de trocar
+                    
+                    const icon = tdStatus.querySelector('.status-icon');
+                    icon.innerHTML = `<i class="fa-solid fa-circle-check"></i>`;
+                    icon.classList.remove('has-text-grey-light');
+                    icon.classList.add('has-text-success');
+
+                    // Lógica de validação (simples)
+                    if (!fileInput.dataset.filled) {
+                        fileInput.dataset.filled = "true";
+                        filledFiles++;
+                    }
+                    
+                    // Se todos foram preenchidos, habilita o botão final
+                    if (filledFiles >= totalFiles) {
+                        resolveBtn.disabled = false;
+                        resolveBtn.classList.remove('is-outlined');
+                    }
+                }
+            });
+
+            tdAction.appendChild(fileInput);
+            tdAction.appendChild(uploadLabel);
+
+            tr.appendChild(tdName);
+            tr.appendChild(tdStatus);
+            tr.appendChild(tdAction);
+            tbody.appendChild(tr);
+        });
+
+        // 3. Exibe o modal
+        document.getElementById('resolve-modal').classList.add('is-active');
         document.documentElement.classList.add('is-clipped');
     }