html a modal intento 1
This commit is contained in:
@@ -1,15 +1,16 @@
|
||||
{% extends "macros/base.html" %}
|
||||
|
||||
{% from 'macros/modals.html' import view_rendicion_modal %}
|
||||
|
||||
{% block title %}Historial de Rendiciones{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<!-- HEAD -->
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h2 class="mb-4">Historial de Rendiciones</h2>
|
||||
|
||||
{{ view_rendicion_modal() }}
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
@@ -34,7 +35,14 @@
|
||||
<td class="align-middle">${{ "{:,.0f}".format(r[5]).replace(',', '.') }}</td>
|
||||
<td class="align-middle text-danger">${{ "{:,.0f}".format(r[6]).replace(',', '.') }}</td>
|
||||
<td class="text-end">
|
||||
<a href="{{ url_for('view_rendicion', id=r[0]) }}" class="btn btn-sm btn-primary">Ver Detalle</a>
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-primary"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#viewRendicionModal"
|
||||
data-url="{{ url_for('view_rendicion', id=r[0]) }}"
|
||||
data-id="{{ r[0] }}">
|
||||
Ver Detalle
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
@@ -47,3 +55,34 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
const viewModal = document.getElementById('viewRendicionModal');
|
||||
if (viewModal) {
|
||||
viewModal.addEventListener('show.bs.modal', function (event) {
|
||||
const button = event.relatedTarget;
|
||||
const url = button.getAttribute('data-url');
|
||||
const id = button.getAttribute('data-id');
|
||||
|
||||
const title = viewModal.querySelector('#rendicionModalTitle');
|
||||
const body = viewModal.querySelector('#rendicionModalBody');
|
||||
|
||||
title.textContent = `Detalle de Rendición #${id}`;
|
||||
body.innerHTML = '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div></div>';
|
||||
|
||||
fetch(url)
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, 'text/html');
|
||||
const content = doc.querySelector('.row').outerHTML;
|
||||
body.innerHTML = content;
|
||||
})
|
||||
.catch(err => {
|
||||
body.innerHTML = '<div class="alert alert-danger">Error al cargar los detalles.</div>';
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -116,3 +116,26 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro view_rendicion_modal() %}
|
||||
<div class="modal fade" id="viewRendicionModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-dark text-white">
|
||||
<h5 class="modal-title" id="rendicionModalTitle">Detalle de Rendición</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="rendicionModalBody">
|
||||
<div class="text-center py-5">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Cargando</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
Reference in New Issue
Block a user