actualizado 3-sept
This commit is contained in:
@@ -1,122 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Poblaciones{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-icons/bootstrap-icons.css') }}">
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-eyebrow">Configuración</div>
|
||||
<div class="page-title">Poblaciones</div>
|
||||
<div class="page-subtitle">Gestiona las poblaciones administradas.</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div style="display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;">
|
||||
|
||||
{# Formulario añadir #}
|
||||
<div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;min-width:260px;">
|
||||
<p class="form-label" style="margin-bottom:14px;">Nueva población</p>
|
||||
<form method="POST" action="{{ url_for('poblaciones_nueva') }}">
|
||||
<div class="form-group">
|
||||
<input class="form-input" type="text" name="poblacion"
|
||||
placeholder="Nombre de la población" required autofocus>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" style="width:100%;margin-top:8px;">
|
||||
✚ Añadir
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{# Listado #}
|
||||
<div style="flex:1;min-width:280px;max-width: 800px;">
|
||||
<p style="margin-top:8px;font-size:12px;color:var(--muted)">{{ rows|length }} poblaciones</p>
|
||||
<div class="table-wrap border">
|
||||
<table id="tabla" class="">
|
||||
<thead class="">
|
||||
<tr class="">
|
||||
<th hidden >ID</th>
|
||||
<th>Población</th>
|
||||
<!-- <th style="text-align:right">Acción</th> -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for r in rows %}
|
||||
{% set nombre_pob = r['poblacion'] %}
|
||||
<tr class="border-bottom">
|
||||
<td hidden class="td-id">{{ r['id'] }}</td>
|
||||
<td>{{ r['poblacion'] }}</td>
|
||||
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="3"><div class="empty-state">Sin poblaciones registradas.</div></td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/tabledit.min.js') }}"></script>
|
||||
|
||||
|
||||
<script>
|
||||
$('#tabla').Tabledit({
|
||||
url:'/editar_poblaciones',
|
||||
|
||||
editButton:true,
|
||||
deleteButton:true,
|
||||
restoreButton:false,
|
||||
hideIdentifier:false,
|
||||
|
||||
buttons:{
|
||||
edit:{
|
||||
class:'btn btn-sm border rounded me-1',
|
||||
html:'<i class="bi bi-pencil"></i> '
|
||||
},
|
||||
delete:{
|
||||
class:'btn btn-sm btn-light text-danger border me-1',
|
||||
html:'<i class="bi bi-trash"></i>'
|
||||
// html:'Borrar'
|
||||
},
|
||||
save:{
|
||||
class:'btn btn-sm btn-success',
|
||||
html:'Guardar'
|
||||
},
|
||||
confirm:{
|
||||
class:'btn btn-sm btn-warning',
|
||||
html:'¿Seguro?'
|
||||
}
|
||||
},
|
||||
|
||||
columns:{
|
||||
identifier:[0,'id'],
|
||||
editable:[
|
||||
[1,'poblacion']
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
onSuccess:function(data){
|
||||
if (data.action == "edit") {
|
||||
location.reload();
|
||||
}
|
||||
|
||||
if (data.action == "delete") {
|
||||
location.reload();
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
}
|
||||
});
|
||||
|
||||
$('#tabla td:last-child').attr(
|
||||
'style',
|
||||
'white-space: nowrap; width:185px;'
|
||||
);
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-eyebrow">Configuración</div>
|
||||
<div class="page-title">Tipo vehículo</div>
|
||||
<div class="page-title"><i class="bi bi-bus-front"></i> Tipo vehículo</div>
|
||||
<div class="page-subtitle">Gestiona los tipos de vehículos.</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-eyebrow">Configuración</div>
|
||||
<div class="page-title">Unidades</div>
|
||||
<div class="page-title"><i class="bi bi-building"></i> Unidades</div>
|
||||
<div class="page-subtitle">Gestiona los unidades a las que se asignan los vehículos.</div>
|
||||
</div>
|
||||
|
||||
|
||||
Executable
+828
@@ -0,0 +1,828 @@
|
||||
```html
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Unidades{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/[email protected]/dist/css/tabulator_bootstrap5.min.css"
|
||||
>
|
||||
|
||||
<style>
|
||||
|
||||
/* CONTENEDOR TABULATOR */
|
||||
|
||||
#tabla-unidades {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* CABECERA */
|
||||
|
||||
.unidades-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.unidades-search {
|
||||
position: relative;
|
||||
width: 500px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.unidades-search svg {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
color: var(--muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.unidades-search input {
|
||||
width: 100%;
|
||||
padding: 9px 38px 9px 38px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
.unidades-search input:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
|
||||
.clear-search {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
.clear-search:hover {
|
||||
background: var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
|
||||
/* =====================================================
|
||||
TABULATOR
|
||||
===================================================== */
|
||||
|
||||
.tabulator {
|
||||
border: 0 !important;
|
||||
background: var(--surface);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.tabulator .tabulator-header {
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col {
|
||||
background: transparent;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
|
||||
.tabulator .tabulator-row {
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
|
||||
.tabulator .tabulator-row:hover {
|
||||
background: rgba(0,0,0,.025);
|
||||
}
|
||||
|
||||
|
||||
/* .tabulator .tabulator-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-right: 0;
|
||||
} */
|
||||
|
||||
|
||||
/* ESTADO */
|
||||
|
||||
#estadoTabla {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
margin-top: 8px;
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
|
||||
/* =====================================================
|
||||
RESPONSIVE
|
||||
===================================================== */
|
||||
|
||||
@media (max-width: 700px) {
|
||||
|
||||
.unidades-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.unidades-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<!-- =========================================================
|
||||
CABECERA
|
||||
========================================================== -->
|
||||
|
||||
<div class="page-header">
|
||||
|
||||
<div class="page-eyebrow">
|
||||
Configuración
|
||||
</div>
|
||||
|
||||
<div class="page-title">
|
||||
<i class="bi bi-building"></i>
|
||||
Unidades
|
||||
</div>
|
||||
|
||||
<div class="page-subtitle">
|
||||
Gestiona las unidades a las que se asignan los vehículos.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div style="
|
||||
display:flex;
|
||||
gap:24px;
|
||||
align-items:flex-start;
|
||||
flex-wrap:wrap;
|
||||
">
|
||||
|
||||
|
||||
<!-- =====================================================
|
||||
FORMULARIO NUEVA UNIDAD
|
||||
====================================================== -->
|
||||
|
||||
<div style="
|
||||
background:var(--surface);
|
||||
border:1px solid var(--border);
|
||||
border-radius:var(--radius);
|
||||
padding:24px;
|
||||
min-width:400px;
|
||||
">
|
||||
|
||||
<p
|
||||
class="form-label"
|
||||
style="margin-bottom:14px;"
|
||||
>
|
||||
Nueva unidad
|
||||
</p>
|
||||
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="{{ url_for('unidades_nueva') }}"
|
||||
>
|
||||
|
||||
|
||||
<!-- POBLACIÓN -->
|
||||
|
||||
<div class="form-group">
|
||||
|
||||
<label class="form-label">
|
||||
Población
|
||||
</label>
|
||||
|
||||
<div class="select-wrap">
|
||||
|
||||
<select
|
||||
class="form-input form-select"
|
||||
name="poblacion_id"
|
||||
required
|
||||
>
|
||||
|
||||
<option value="">
|
||||
— Selecciona población —
|
||||
</option>
|
||||
|
||||
{% for p in poblaciones %}
|
||||
|
||||
<option value="{{ p['id'] }}">
|
||||
{{ p['poblacion'] }}
|
||||
</option>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</select>
|
||||
|
||||
<svg
|
||||
class="select-arrow"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- UNIDAD -->
|
||||
|
||||
<div class="form-group">
|
||||
|
||||
<label class="form-label">
|
||||
Unidad
|
||||
</label>
|
||||
|
||||
<input
|
||||
class="form-input"
|
||||
type="text"
|
||||
name="unidad"
|
||||
placeholder="Nombre de la unidad"
|
||||
required
|
||||
>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-sm btn-primary"
|
||||
style="
|
||||
width:50%;
|
||||
margin-top:12px;
|
||||
display:block;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
"
|
||||
>
|
||||
|
||||
✚ Añadir
|
||||
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =====================================================
|
||||
LISTADO
|
||||
====================================================== -->
|
||||
|
||||
<div style="
|
||||
flex:1;
|
||||
min-width:320px;
|
||||
max-width:800px;
|
||||
">
|
||||
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
|
||||
<div class="unidades-toolbar">
|
||||
|
||||
|
||||
<!-- BUSCADOR -->
|
||||
|
||||
<div class="unidades-search">
|
||||
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle
|
||||
cx="11"
|
||||
cy="11"
|
||||
r="8"
|
||||
/>
|
||||
<line
|
||||
x1="21"
|
||||
y1="21"
|
||||
x2="16.65"
|
||||
y2="16.65"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="searchUnidades"
|
||||
placeholder="Buscar por población o unidad…"
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
>
|
||||
|
||||
|
||||
<button
|
||||
type="button"
|
||||
id="clearSearch"
|
||||
class="clear-search"
|
||||
>
|
||||
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
>
|
||||
<line
|
||||
x1="18"
|
||||
y1="6"
|
||||
x2="6"
|
||||
y2="18"
|
||||
/>
|
||||
|
||||
<line
|
||||
x1="6"
|
||||
y1="6"
|
||||
x2="18"
|
||||
y2="18"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- CONTADOR -->
|
||||
|
||||
<div
|
||||
id="contador"
|
||||
style="
|
||||
margin:8px 0;
|
||||
font-size:12px;
|
||||
color:var(--muted);
|
||||
"
|
||||
>
|
||||
{{ rows|length }}
|
||||
unidad{% if rows|length != 1 %}es{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<!-- TABLA -->
|
||||
|
||||
<div id="tabla-unidades"></div>
|
||||
|
||||
|
||||
<!-- ESTADO -->
|
||||
|
||||
<div id="estadoTabla"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- DATOS PARA TABULATOR=============================== -->
|
||||
|
||||
<script>
|
||||
|
||||
const unidades = [
|
||||
|
||||
{% for r in rows %}
|
||||
|
||||
{
|
||||
id: {{ r['id'] | tojson }},
|
||||
|
||||
poblacion_id:
|
||||
{{ r['poblacion_id'] | tojson }},
|
||||
|
||||
poblacion:
|
||||
{{ (r['poblacion'] or '') | tojson }},
|
||||
|
||||
unidad:
|
||||
{{ r['unidad'] | tojson }}
|
||||
}
|
||||
|
||||
{% if not loop.last %},{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
|
||||
];
|
||||
|
||||
|
||||
const poblaciones = [
|
||||
|
||||
{% for p in poblaciones %}
|
||||
|
||||
{
|
||||
id: {{ p['id'] | tojson }},
|
||||
|
||||
nombre:
|
||||
{{ p['poblacion'] | tojson }}
|
||||
}
|
||||
|
||||
{% if not loop.last %},{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
|
||||
];
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!-- TABULATOR -->
|
||||
|
||||
<script
|
||||
src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js">
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
// =========================================================
|
||||
// ELEMENTOS
|
||||
// =========================================================
|
||||
|
||||
const buscador =
|
||||
document.getElementById(
|
||||
"searchUnidades"
|
||||
);
|
||||
|
||||
const clearSearch =
|
||||
document.getElementById(
|
||||
"clearSearch"
|
||||
);
|
||||
|
||||
const contador =
|
||||
document.getElementById(
|
||||
"contador"
|
||||
);
|
||||
|
||||
const estadoTabla =
|
||||
document.getElementById(
|
||||
"estadoTabla"
|
||||
);
|
||||
|
||||
|
||||
// =========================================================
|
||||
// LISTA DE POBLACIONES PARA EL SELECT
|
||||
// =========================================================
|
||||
|
||||
const opcionesPoblaciones = {};
|
||||
|
||||
poblaciones.forEach(function(p) {
|
||||
|
||||
opcionesPoblaciones[p.id] =
|
||||
p.nombre;
|
||||
|
||||
});
|
||||
|
||||
|
||||
// =========================================================
|
||||
// CONTADOR
|
||||
// =========================================================
|
||||
|
||||
function actualizarContador() {
|
||||
|
||||
const cantidad =
|
||||
tabla.getDataCount("active");
|
||||
|
||||
|
||||
contador.textContent =
|
||||
cantidad +
|
||||
" unidad" +
|
||||
(cantidad !== 1 ? "es" : "");
|
||||
|
||||
}
|
||||
|
||||
|
||||
// =========================================================
|
||||
// MENSAJE
|
||||
// =========================================================
|
||||
|
||||
function mostrarEstado(texto, error = false) {
|
||||
|
||||
estadoTabla.textContent = texto;
|
||||
|
||||
estadoTabla.style.color =
|
||||
error
|
||||
? "#dc3545"
|
||||
: "#198754";
|
||||
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
estadoTabla.textContent = "";
|
||||
|
||||
}, 3000);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// TABULATOR
|
||||
|
||||
const tabla = new Tabulator(
|
||||
"#tabla-unidades",
|
||||
{
|
||||
|
||||
data: unidades,
|
||||
layout: "fitColumns",
|
||||
height: "500px",
|
||||
placeholder:
|
||||
"Sin unidades registradas.",
|
||||
editTriggerEvent: "click",
|
||||
|
||||
columns: [
|
||||
|
||||
|
||||
{ title: "ID",
|
||||
field: "id",
|
||||
visible: false
|
||||
},
|
||||
|
||||
|
||||
{ title: "Población",
|
||||
field: "poblacion_id",
|
||||
minWidth: 220,
|
||||
editor: "list",
|
||||
editorParams: {
|
||||
values:
|
||||
opcionesPoblaciones,
|
||||
autocomplete: true,
|
||||
listOnEmpty: true
|
||||
},
|
||||
|
||||
formatter: function(cell) {
|
||||
const id =
|
||||
cell.getValue();
|
||||
return opcionesPoblaciones[id]
|
||||
|| "—";
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: "Unidad",
|
||||
field: "unidad",
|
||||
editor: "input",
|
||||
validator: "required",
|
||||
minWidth: 250,
|
||||
formatter: function(cell) {
|
||||
const valor =
|
||||
cell.getValue();
|
||||
return valor
|
||||
? `<strong>${escapeHtml(valor)}</strong>`
|
||||
: "";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// ESCAPAR HTML
|
||||
|
||||
function escapeHtml(text) {
|
||||
|
||||
const div =
|
||||
document.createElement("div");
|
||||
|
||||
div.textContent = text;
|
||||
|
||||
return div.innerHTML;
|
||||
|
||||
}
|
||||
|
||||
|
||||
// EDICIÓN DE CELDA
|
||||
|
||||
tabla.on(
|
||||
"cellEdited",
|
||||
async function(cell) {
|
||||
|
||||
const fila =
|
||||
cell.getRow();
|
||||
|
||||
const datos =
|
||||
fila.getData();
|
||||
|
||||
const campo =
|
||||
cell.getField();
|
||||
|
||||
const valor =
|
||||
cell.getValue();
|
||||
|
||||
|
||||
console.log(
|
||||
"Edición:",
|
||||
{
|
||||
id: datos.id,
|
||||
campo: campo,
|
||||
valor: valor
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// Guardar en Flask
|
||||
|
||||
try {
|
||||
|
||||
const respuesta =
|
||||
await fetch(
|
||||
`/api/unidades/${datos.id}`,
|
||||
{
|
||||
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
"Content-Type":
|
||||
"application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
campo: campo,
|
||||
valor: valor
|
||||
})
|
||||
}
|
||||
);
|
||||
|
||||
const resultado =
|
||||
await respuesta.json();
|
||||
|
||||
if (!respuesta.ok) {
|
||||
|
||||
throw new Error(
|
||||
resultado.error ||
|
||||
"No se pudo guardar"
|
||||
);
|
||||
}
|
||||
|
||||
// Actualizar fila con respuesta de Flask
|
||||
|
||||
await fila.update({
|
||||
|
||||
id: resultado.id,
|
||||
poblacion_id: resultado.poblacion_id,
|
||||
poblacion: resultado.poblacion,
|
||||
unidad: resultado.unidad
|
||||
});
|
||||
|
||||
mostrarEstado(
|
||||
"✓ Cambios guardados"
|
||||
);
|
||||
|
||||
}
|
||||
catch (error) {
|
||||
console.error(
|
||||
"Error:",
|
||||
error
|
||||
);
|
||||
|
||||
mostrarEstado(
|
||||
error.message,
|
||||
true
|
||||
);
|
||||
|
||||
// Volvemos a obtener los datos originales
|
||||
// desde el servidor.
|
||||
|
||||
tabla.replaceData(
|
||||
unidades
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// BUSCADOR
|
||||
buscador.addEventListener(
|
||||
"input",
|
||||
function() {
|
||||
|
||||
const texto =
|
||||
this.value
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
|
||||
|
||||
clearSearch.style.display =
|
||||
texto
|
||||
? "flex"
|
||||
: "none";
|
||||
|
||||
|
||||
if (!texto) {
|
||||
|
||||
tabla.clearFilter();
|
||||
|
||||
actualizarContador();
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
|
||||
tabla.setFilter(
|
||||
function(data) {
|
||||
|
||||
const poblacion =
|
||||
String(
|
||||
data.poblacion || ""
|
||||
).toLowerCase();
|
||||
|
||||
|
||||
const unidad =
|
||||
String(
|
||||
data.unidad || ""
|
||||
).toLowerCase();
|
||||
|
||||
|
||||
return (
|
||||
poblacion.includes(texto) ||
|
||||
unidad.includes(texto)
|
||||
);
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
setTimeout(
|
||||
actualizarContador,
|
||||
0
|
||||
);
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// LIMPIAR BUSCADOR
|
||||
|
||||
clearSearch.addEventListener(
|
||||
"click",
|
||||
function() {
|
||||
|
||||
buscador.value = "";
|
||||
|
||||
clearSearch.style.display =
|
||||
"none";
|
||||
|
||||
tabla.clearFilter();
|
||||
|
||||
buscador.focus();
|
||||
|
||||
actualizarContador();
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// CONTADOR INICIAL
|
||||
|
||||
actualizarContador();
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
```
|
||||
Reference in New Issue
Block a user