163 lines
4.7 KiB
PHP
163 lines
4.7 KiB
PHP
<?php
|
|
include("../includes/header.php");
|
|
|
|
// Obtener el nombre de la tabla desde la URL
|
|
$table = isset($_GET['table']) ? $_GET['table'] : '';
|
|
?>
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="generator" content="Hugo 0.72.0">
|
|
<title>server-side-datatable</title>
|
|
|
|
<!-- datatable css -->
|
|
<link rel="stylesheet" href="../css/jquery.dataTables.min.css" />
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link rel="stylesheet" href="../css/bootstrap.min.css" />
|
|
<script src="../js/bootstrap.min.js"></script>
|
|
<script src="../js/popper.min.js"></script>
|
|
</head>
|
|
|
|
<script>
|
|
const table = "<?php echo htmlspecialchars($table); ?>";
|
|
if (window.Worker) {
|
|
const statsWorker = new Worker('stats.worker.js');
|
|
statsWorker.postMessage({
|
|
table: table
|
|
});
|
|
statsWorker.onmessage = function(e) {
|
|
const stats = e.data;
|
|
document.getElementById('stats').innerHTML = `
|
|
<span class="badge bg-info text-dark me-2">
|
|
<b>Instruction</b> - Min: ${stats.instruction.min}, Max: ${stats.instruction.max}, Prom: ${stats.instruction.avg}
|
|
</span>
|
|
<span class="badge bg-info text-dark me-2">
|
|
<b>Input</b> - Min: ${stats.input.min}, Max: ${stats.input.max}, Prom: ${stats.input.avg}
|
|
</span>
|
|
<span class="badge bg-info text-dark">
|
|
<b>Output</b> - Min: ${stats.output.min}, Max: ${stats.output.max}, Prom: ${stats.output.avg}
|
|
</span>
|
|
`;
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<body style="background-color:#fdfdfd;">
|
|
<br>
|
|
<div class="container">
|
|
<div class="mb-3 d-flex align-items-center gap-3">
|
|
<a href="add_dataset.php?table=<?php echo htmlspecialchars($table); ?>" class="btn btn-primary">
|
|
<i class="bi bi-plus-circle"></i> Agregar Dataset
|
|
</a>
|
|
<label class="btn btn-success mb-0">
|
|
<i class="bi bi-upload"></i> Cargar JSON
|
|
<input type="file" id="jsonFile" accept=".json" style="display:none;">
|
|
</label>
|
|
<div id="stats" class="ms-3"></div>
|
|
</div>
|
|
<table id="example" class="display" style="width:100%">
|
|
<thead>
|
|
<tr>
|
|
<th>instruction</th>
|
|
<th>input</th>
|
|
<th>output</th>
|
|
<th>Created At</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
</table>
|
|
</div>
|
|
|
|
<!-- datatable js -->
|
|
<script src="../js/jquery-3.5.1.js"></script>
|
|
<script src="../js/jquery.dataTables.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
$('#example').DataTable({
|
|
"searching": true,
|
|
"processing": true,
|
|
"serverSide": true,
|
|
"ajax": {
|
|
"url": "server_side.php",
|
|
"type": "GET",
|
|
"data": {
|
|
"table": "<?php echo htmlspecialchars($_GET['table']); ?>" // Pasar el nombre de la tabla
|
|
}
|
|
},
|
|
"columns": [{
|
|
data: 0
|
|
},
|
|
{
|
|
data: 1
|
|
},
|
|
{
|
|
data: 2
|
|
},
|
|
{
|
|
data: 3
|
|
},
|
|
{
|
|
data: 4,
|
|
"render": function(data, type, row) {
|
|
return `
|
|
<a href="edit.php?table=<?php echo htmlspecialchars($_GET['table']); ?>&id=${data}" class="btn btn-secondary m-2">Editar</a>
|
|
<a href="delete_dataset.php?table=<?php echo htmlspecialchars($_GET['table']); ?>&id=${data}" class="btn btn-danger" onclick="return confirm('¿Estás seguro de que deseas eliminar este registro?');">Eliminar</a>
|
|
`;
|
|
}
|
|
}
|
|
],
|
|
"language": {
|
|
"url": "https://cdn.datatables.net/plug-ins/2.3.0/i18n/es-ES.json"
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
$('#jsonFile').on('change', function(e) {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
const reader = new FileReader();
|
|
reader.onload = function(evt) {
|
|
try {
|
|
const data = JSON.parse(evt.target.result);
|
|
if (!Array.isArray(data)) {
|
|
alert('El JSON debe ser un array de objetos.');
|
|
return;
|
|
}
|
|
// Enviar cada objeto al backend
|
|
$.ajax({
|
|
url: 'import_json.php?table=<?php echo htmlspecialchars($table); ?>',
|
|
method: 'POST',
|
|
data: {
|
|
json: JSON.stringify(data)
|
|
},
|
|
success: function(resp) {
|
|
alert(resp);
|
|
$('#example').DataTable().ajax.reload();
|
|
},
|
|
error: function() {
|
|
alert('Error al importar el JSON.');
|
|
}
|
|
});
|
|
} catch (err) {
|
|
alert('JSON inválido.');
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|