tô tentando adicionar uma funcionalidade no meu codigo de modo que assim que eu clicar na opçao do select Falha Processamento, imediatamente apareça um modal com um textarea e dois botões salvar e cancelar mas somente a interface grafica no entanto tô tentando isso a muito tempo mas não conssigo ou melhor o codigo que eu crio pra tentar fazer isso ccria conflito com outros codigos e as coisas param de funcionar,
function showDetails(type) {
const xhr = new XMLHttpRequest();
xhr.open('GET', `pedidos.php?type=${type}`, true);
xhr.onload = function() {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
let detailsContent = '';
if (type === 'miniaturas') {
detailsContent = `<div class="recentOrders">
<div class="cardHeader">
<h2>Lista de miniaturas para Imprimir</h2>
</div>
<table>
<thead>
<tr>
<td>Name</td>
<td>Nota</td>
<td>Status</td>
</tr>
</thead>
<tbody>`;
data.forEach(row => {
detailsContent += `<tr>
<td>${row.nome_miniatura}</td>
<td style="color: red;">${row.status === "Falha Processamento" ? "Erro na impressão" : ""}</td>
<td>
<form method="POST" action="/novo sistema/pedido/status/update_status.php">
<input type="hidden" name="id" value="${row.id}">
<select name="status" ${row.status === "Concluido" ? "disabled" : ""}>
<option value="Nao Concluido" ${row.status === "Nao Concluido" ? "selected" : ""}>Nao Concluido</option>
<option value="Concluido" ${row.status === "Concluido" ? "selected" : ""}>Concluido</option>
<option value="Montados" ${row.status === "Montados" ? "selected" : ""}>Pintado</option>
</select>
<button type="submit" ${row.status === "Concluido" ? "disabled" : ""}>Atualizar</button>
</form>
</td>
</tr>`;
});
detailsContent += `</tbody></table></div> <div class="footer">
<p>© 2024 Sistema Interno - Todos os direitos reservados.</p>
</div>`;
}
else if (type === 'guarda') {
detailsContent = `<div class="recentOrders">
<div class="cardHeader">
<h2>Lista de miniaturas para Passar Tinta de Guarda</h2>
</div>
<table>
<thead>
<tr>
<td>Name</td>
<td>Status</td>
</tr>
</thead>
<tbody>`;
data.forEach(row => {
detailsContent += `<tr>
<td>${row.nome_miniatura}</td>
<td>
<form method="POST" action="/novo sistema/pedido/status/update_status.php">
<input type="hidden" name="id" value="${row.id}">
<select name="status">
<option value="Guarda" ${row.status === 'Guarda' ? 'selected' : ''}>Guarda</option>
<option value="Falha" ${row.status === 'Falha' ? 'selected' : ''}>Falha</option>
</select>
<button type="submit">Atualizar</button>
</form>
</td>
</tr>`;
});
detailsContent += `</tbody></table></div> <div class="footer">
<p>© 2024 Sistema Interno - Todos os direitos reservados.</p>
</div>`;
}
else if (type === 'montar') {
detailsContent = `<div class="recentOrders">
<div class="cardHeader">
<h2>Lista de miniaturas para Montar</h2>
</div>
<table>
<thead>
<tr>
<td>Name</td>
<td>Status</td>
</tr>
</thead>
<tbody>`;
data.forEach(row => {
detailsContent += `<tr>
<td>${row.nome_miniatura}</td>
<td>
<form method="POST" action="/novo sistema/pedido/status/update_status.php">
<input type="hidden" name="id" value="${row.id}">
<select name="status" ${row.status === "Montado" || row.status === "Falha" || row.status === "Falha Processamento" ? "disabled" : ""}>
<option value="Montado" ${row.status === "Montado" ? "selected" : ""}>Montado</option>
<option value="Falha" ${row.status === "Falha" ? "selected" : ""}>Falha</option>
<option value="Falha Processamento" ${row.status === "Falha Processamento" ? "selected" : ""}>Falha Processamento</option>
</select>
<button type="submit" ${row.status === "Montado" || row.status === "Falha" || row.status === "Falha Processamento"? "disabled" : ""}>Atualizar</button>
</form>
</td>
</tr>`;
});
detailsContent += `</tbody></table></div> <div class="footer">
<p>© 2024 Sistema Interno - Todos os direitos reservados.</p>
</div>`;
}
else if (type === 'caixas') {
detailsContent = `<div class="recentOrders">
<div class="cardHeader">
<h2>Lista de caixas para Preparar</h2>
</div>
<table>
<thead>
<tr>
<td>Caixa</td>
<td>Miniatura</td>
<td>Status</td>
</tr>
</thead>
<tbody>`;
let caixa_numero = 1;
// Itera sobre os dados recebidos
data.forEach(row => {
// Divide as miniaturas em uma lista, considerando a separação por 'n'
const miniaturas = row.miniaturas.split('n');
miniaturas.forEach(miniatura => {
// Adiciona uma linha na tabela para cada miniatura
detailsContent += `<tr>
<td>Caixa ${caixa_numero} - ${row.nome_order}</td>
<td>${miniatura}</td>
<td>
<form method="POST" action="/novo sistema/pedido/status/update_status.php">
<input type="hidden" name="id" value="${row.id}">
<select name="status">
<option value="Pronto" ${row.status === "Pronto" ? "selected" : ""}>Pronto</option>
<option value="Falha" ${row.status === "Falha" ? "selected" : ""}>Falha</option>
</select>
<button type="submit">Atualizar</button>
</form>
</td>
</tr>`;
});
// Incrementa o número da caixa após adicionar todas as miniaturas
caixa_numero++;
});
detailsContent += `</tbody></table></div> <div class="footer">
<p>© 2024 Sistema Interno - Todos os direitos reservados.</p>
</div>`;
// Atualiza o conteúdo da página com o HTML gerado
document.getElementById('details').innerHTML = detailsContent;
}
else if (type === 'Rasteiartudo') {
detailsContent = `<div class="recentOrders">
<div class="cardHeader">
<h2>Lista de Caixas Rasteadas</h2>
</div>
<table>
<thead>
<tr>
<td>Caixas</td>
<td>Código de Rastreamento</td>
<td>Data</td>
</tr>
</thead>
<tbody>`;
let caixa_numero = 1;
data.forEach(row => {
detailsContent += `<tr>
<td>Caixa ${caixa_numero} - ${row.nome_order}</td>
<td>${row.codigo_rastreio}</td>
<td>${row.data}</td>
</tr>`;
caixa_numero++;
});
detailsContent += `</tbody></table></div>
<div class="footer">
<p>© 2024 Sistema Interno - Todos os direitos reservados.</p>
</div>`;
// Atualiza o conteúdo da página com o HTML gerado
document.getElementById('details').innerHTML = detailsContent;
}
else if (type === 'progresso') {
let selectedStatus = {};
// Retrieve stored selected status on page load
selectedStatus = JSON.parse(localStorage.getItem('selectedStatus')) || {};
detailsContent = `<div class="recentOrders">
<div class="cardHeader">
<h2>Progresso das Caixas</h2>
</div>
<table>
<thead>
<tr>
<td>Caixas</td>
<td class="status-column">STP</td>
<td class="status-column">CTT Portugal</td>
<td class="status-column" style="text-align:left;">Finalizado</td>
</tr>
</thead>
<tbody>`;
let caixa_numero = 1;
data.forEach(row => {
let codigoRastreamento = row.codigo_rastreio ? 1 : 0; // Se código de rastreio não for nulo, considera fase 1 como ativada
// Define o status atual para a caixa
let stpChecked = codigoRastreamento === 1 ? 'checked' : '';
let cttChecked = codigoRastreamento === 2 ? 'checked' : '';
let finalizadoChecked = codigoRastreamento === 3 ? 'checked' : '';
detailsContent += `<tr>
<td>Caixa ${caixa_numero} -» ${row.nome_order}</td>
<td class="status-column"><input type="radio" name="status_${caixa_numero}" value="stp" ${stpChecked}></td>
<td class="status-column"><input type="radio" name="status_${caixa_numero}" value="ctt" ${cttChecked}></td>
<td class="status-column"><input type="radio" name="status_${caixa_numero}" value="finalizado" ${finalizadoChecked} style="display: flex;
justify-content: center;
align-items: center;"></td>
</tr>`;
caixa_numero++;
});
detailsContent += `</tbody></table></div>
<div class="footer">
<p>© 2024 Sistema Interno - Todos os direitos reservados.</p>
</div>`;
// Atualiza o conteúdo da página com o HTML gerado
document.getElementById('details').innerHTML = detailsContent;
}
};
xhr.send();
<!-- Modal HTML -->
<div id="falhaModal" style="display: none;">
<div style="background-color: #f1f1f1; padding: 20px; border-radius: 10px; width: 300px; margin: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">
<h3>Informe o motivo da falha</h3>
<textarea id="falhaMotivo" rows="4" style="width: 100%;"></textarea>
<br><br>
<button id="salvarFalha">Salvar</button>
<button id="cancelarFalha">Cancelar</button>
</div>
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999;" id="modalOverlay"></div>
</div>
<!-- Seu select existente -->
<select id="statusSelect">
<option value="sucesso">Sucesso</option>
<option value="falha">Falha Processamento</option>
<!-- Outras opções -->
</select>
<!-- Script JS para mostrar o modal -->
<script>
document.getElementById('statusSelect').addEventListener('change', function() {
var selectedOption = this.value;
if (selectedOption === 'falha') {
document.getElementById('falhaModal').style.display = 'block';
}
});
document.getElementById('salvarFalha').addEventListener('click', function() {
var motivo = document.getElementById('falhaMotivo').value;
if (motivo.trim() === '') {
alert('Por favor, informe o motivo da falha.');
} else {
console.log('Motivo da falha salvo:', motivo);
document.getElementById('falhaModal').style.display = 'none';
}
});
document.getElementById('cancelarFalha').addEventListener('click', function() {
document.getElementById('falhaModal').style.display = 'none';
});
document.getElementById('modalOverlay').addEventListener('click', function() {
document.getElementById('falhaModal').style.display = 'none';
});
</script>
``` testei isso separadamente funcionou perfeitamente, mas o problema é que quando eu tento adaptar a este trecho do codigo aqui, não funciona e ainda interfere no funcionamento de outros
else if (type === ‘montar’) {
detailsContent = `
Lista de miniaturas para Montar
</div>
<table>
<thead>
<tr>
<td>Name</td>
<td>Status</td>
</tr>
</thead>
<tbody>`;
data.forEach(row => {
detailsContent += `<tr>
<td>${row.nome_miniatura}</td>
<td>
<form method="POST" action="/novo sistema/pedido/status/update_status.php">
<input type="hidden" name="id" value="${row.id}">
<select name="status" ${row.status === "Montado" || row.status === "Falha" || row.status === "Falha Processamento" ? "disabled" : ""}>
<option value="Montado" ${row.status === "Montado" ? "selected" : ""}>Montado</option>
<option value="Falha" ${row.status === "Falha" ? "selected" : ""}>Falha</option>
<option value="Falha Processamento" ${row.status === "Falha Processamento" ? "selected" : ""}>Falha Processamento</option>
</select>
<button type="submit" ${row.status === "Montado" || row.status === "Falha" || row.status === "Falha Processamento"? "disabled" : ""}>Atualizar</button>
</form>
</td>
</tr>`;
});
detailsContent += `</tbody></table></div> <div class="footer">
<p>© 2024 Sistema Interno - Todos os direitos reservados.</p>
</div>`;
}