alterações 07-04-26
This commit is contained in:
Ronaldo
164
lista/index.php
164
lista/index.php
@@ -39,94 +39,106 @@ $result = $conn->query($sql);
|
||||
</head>
|
||||
|
||||
<body class="p-6 bg-gray-100" app="lista">
|
||||
<h2 class="text-xl font-bold mb-4">Lista de Cadastros</h2>
|
||||
<div id="cadastros">
|
||||
<?php while ($row = $result->fetch_assoc()) : ?>
|
||||
<div class="row-dados p-4 bg-white shadow rounded mb-2 flex justify-between items-center"
|
||||
id="cadastro-<?= $row['id'] ?>">
|
||||
<div class="col-codigo">
|
||||
<p><strong><?= $row['codigo'] ?></strong></p>
|
||||
</div>
|
||||
<div class="col-dados">
|
||||
<p><strong><?= $row['nome'] ?></strong></p>
|
||||
<p><?= $row['empresa'] ?></p>
|
||||
<?php
|
||||
// extrair email de dados_adicionais (se presente)
|
||||
$email = '';
|
||||
if (!empty($row['dados_adicionais'])) {
|
||||
// restaurar aspas simples duplicadas e decodificar JSON
|
||||
$json = str_replace("''", "'", $row['dados_adicionais']);
|
||||
$extras = json_decode($json, true);
|
||||
if (json_last_error() === JSON_ERROR_NONE && is_array($extras) && !empty($extras['email'])) {
|
||||
$email = htmlspecialchars($extras['email']);
|
||||
}
|
||||
}
|
||||
?>
|
||||
<?php if ($email !== ''): ?>
|
||||
<p class="text-sm text-gray-200">Email: <span class="font-medium"><?= $email ?></span></p>
|
||||
<?php else: ?>
|
||||
<p class="text-sm text-gray-500">Email: <span class="italic">(não informado)</span></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<button class="bg-green-500 text-white px-4 py-2 rounded activate"
|
||||
data-id="<?= $row['id'] ?>">Ativar</button>
|
||||
<div class="flex items-center justify-between mb-6 bg-white p-4 rounded shadow">
|
||||
<h2 class="text-xl font-bold !text-gray-800">Lista de Cadastros</h2>
|
||||
<div class="flex items-center space-x-6">
|
||||
<!-- Toggle Ativados -->
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" id="toggleAtvados" class="sr-only peer">
|
||||
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
|
||||
<span class="ms-3 text-sm font-medium text-gray-700">Mostrar Ativados</span>
|
||||
</label>
|
||||
|
||||
<!-- Download Button -->
|
||||
<a href="gerar_excel.php" class="bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center shadow-md">
|
||||
<svg class="w-4 h-4 me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
|
||||
Download Excel
|
||||
</a>
|
||||
</div>
|
||||
<?php endwhile; ?>
|
||||
</div>
|
||||
|
||||
<div id="cadastros">
|
||||
<!-- Itens serão carregados via polling -->
|
||||
</div>
|
||||
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$(".activate").click(function () {
|
||||
console.log('ativar');
|
||||
let id = $(this).data("id");
|
||||
let showActivated = false;
|
||||
|
||||
$.post("ativar.php", {
|
||||
id: id
|
||||
}, function (response) {
|
||||
console.log(response);
|
||||
function refreshList() {
|
||||
$.getJSON("atualiza.php?rand=" + Math.random() + "&ativados=" + showActivated, function (data) {
|
||||
const container = $("#cadastros");
|
||||
container.empty();
|
||||
|
||||
if (data.length === 0) {
|
||||
container.append('<p class="text-center text-gray-400 py-10 italic">Nenhum cadastro encontrado.</p>');
|
||||
return;
|
||||
}
|
||||
|
||||
$.each(data, function (key, val) {
|
||||
const isActivated = val.status == 1;
|
||||
const rowClass = isActivated ? 'opacity-50 grayscale bg-gray-50' : 'bg-white';
|
||||
|
||||
container.append(`
|
||||
<div class="row-dados p-4 shadow rounded mb-2 flex justify-between items-center ${rowClass}" id="cadastro-${val.id}">
|
||||
<div class="col-codigo text-gray-800">
|
||||
<strong>${val.codigo}</strong>
|
||||
</div>
|
||||
<div class="col-dados flex-grow px-8">
|
||||
<p class="text-gray-900 font-bold text-lg">${val.nome}</p>
|
||||
<p class="text-gray-600">${val.empresa}</p>
|
||||
${val.email ?
|
||||
`<p class="text-sm text-gray-500">Email: <span class="font-medium">${val.email}</span></p>` :
|
||||
`<p class="text-sm text-gray-400 italic">Email: (não informado)</p>`
|
||||
}
|
||||
</div>
|
||||
<div class="col-acao">
|
||||
${!isActivated ?
|
||||
`<button class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-bold shadow-sm activate" data-id="${val.id}">Ativar</button>` :
|
||||
`<span class="text-green-700 font-bold bg-green-100 px-3 py-1 rounded-full text-sm">✓ Ativado</span>`
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
|
||||
// Reatribui eventos
|
||||
bindEvents();
|
||||
});
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
$(".activate").off('click').on('click', function () {
|
||||
let id = $(this).data("id");
|
||||
let btn = $(this);
|
||||
btn.prop('disabled', true).addClass('opacity-50');
|
||||
|
||||
$.post("ativar.php", { id: id }, function (response) {
|
||||
if (response == "success") {
|
||||
$("#cadastro-" + id).fadeOut();
|
||||
if (!showActivated) {
|
||||
$("#cadastro-" + id).fadeOut(300);
|
||||
} else {
|
||||
refreshList();
|
||||
}
|
||||
} else {
|
||||
alert("Erro ao ativar!");
|
||||
btn.prop('disabled', false).removeClass('opacity-50');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
// Inicializa Polling
|
||||
refreshList();
|
||||
setInterval(refreshList, 5000); // Polling a cada 5 segundos
|
||||
|
||||
// Toggle Ativados
|
||||
$("#toggleAtvados").on('change', function() {
|
||||
showActivated = $(this).is(':checked');
|
||||
refreshList();
|
||||
});
|
||||
});
|
||||
setInterval(function () {
|
||||
$.getJSON("atualiza.php?rand=" + Math.random(), function (data) {
|
||||
$("#cadastros").empty();
|
||||
$.each(data, function (key, val) {
|
||||
$("#cadastros").append(
|
||||
`<div class="row-dados p-4 bg-white shadow rounded mb-2 flex justify-between items-center" id="cadastro-${val.id}">
|
||||
<div class="col-codigo">
|
||||
<p><strong>${val.codigo}</strong></p>
|
||||
</div>
|
||||
<div class="col-dados">
|
||||
<p><strong>${val.nome}</strong></p>
|
||||
<p>${val.empresa}</p>
|
||||
${val.email ? `<p class="text-sm text-gray-200">Email: <span class="font-medium">${val.email}</span></p>` : `<p class="text-sm text-gray-500">Email: <span class="italic">(não informado)</span></p>`}
|
||||
</div>
|
||||
<button class="bg-green-500 text-white px-4 py-2 rounded activate" data-id="${val.id}">Ativar</button>
|
||||
</div>`
|
||||
);
|
||||
});$(".activate").click(function () {
|
||||
console.log('ativar');
|
||||
let id = $(this).data("id");
|
||||
|
||||
$.post("ativar.php", {
|
||||
id: id
|
||||
}, function (response) {
|
||||
console.log(response);
|
||||
if (response == "success") {
|
||||
$("#cadastro-" + id).fadeOut();
|
||||
} else {
|
||||
alert("Erro ao ativar!");
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
}, 10000);
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
|
||||
Reference in New Issue
Block a user