123 lines
3.3 KiB
HTML
Executable File
123 lines
3.3 KiB
HTML
Executable File
{% 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 %}
|