232 lines
8.1 KiB
HTML
232 lines
8.1 KiB
HTML
{% extends 'h_tmp_usr/z_tmp.html' %}
|
|
|
|
{% block css %}
|
|
|
|
<!-- {# i jconfirm #} -->
|
|
<link rel="stylesheet" href="https://htmlguyllc.github.io/jConfirm/jConfirm.min.css">
|
|
<!-- {# f jconfirm #} -->
|
|
|
|
{% endblock css %}
|
|
|
|
{% block body %}
|
|
|
|
|
|
<h2 class="display-5 mb-4">Mis Publicaciones</h2>
|
|
<!-- https://codepen.io/componentity/embed/RwajNdW?height=500&theme-id=dark&default-tab=result&user=componentity&slug-hash=RwajNdW&pen-title=Blog%20Card%20Section%20Bootstrap%20-%202nd&name=cp_embed_1 -->
|
|
<!-- https://codepen.io/anon/embed/dgmjKK?height=602&theme-id=dark&slug-hash=dgmjKK&default-tab=result&animations=run&editable=&embed-version=2&user=anon&name=cp_embed_23 -->
|
|
<!-- https://bootstrapbrain.com/component/bootstrap-5-blog-card/#code -->
|
|
<!-- <div class="col-md-12"> -->
|
|
<style>
|
|
.fade-out {
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
</style>
|
|
|
|
<div class="container">
|
|
<!-- {# i pagination #} -->
|
|
{% if total_pages > 1 %}
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center mt-4">
|
|
|
|
<li class="page-item {% if current_page == 1 %}disabled{% endif %}">
|
|
<a class="page-link" href="?page={{ current_page - 1 }}" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
|
|
{% for p in range(1, total_pages + 1) %}
|
|
<li class="page-item {% if p == current_page %}active{% endif %}">
|
|
<a class="page-link" href="?page={{ p }}">{{ p }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
|
|
<li class="page-item {% if current_page == total_pages %}disabled{% endif %}">
|
|
<a class="page-link" href="?page={{ current_page + 1 }}" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
<!-- {# f pagination #} -->
|
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4" id="card-container">
|
|
{% for ele in data %}
|
|
|
|
<div class="col card-wrapper" data-id="{{ele[0]}}" data-aos="zoom-out-left" data-aos-delay="{{loop.index * 100 }}" data-aos-duration="800" data-aos-easing="ease-in-out">
|
|
<div class="card h-100">
|
|
|
|
<img src="{{ (ele[5] if ele[5] is not none else url_for('static', filename='y_img/other/no_img.png'))|safe }}"
|
|
class="card-img-top" alt="card image">
|
|
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="mb-3">
|
|
<h5 class="card-title">{{ ele[3] }}</h5>
|
|
<p class="card-text">{{ ele[4] }}...</p>
|
|
<small class="text-muted">
|
|
<i class="bi bi-calendar-week"></i> {{ ele[1] }}<br>
|
|
{% if ele[2] is not none %}
|
|
<i class="bi bi-arrow-repeat"></i> {{ ele[2] }}<br>
|
|
{% endif %}
|
|
<i class="bi bi-clock"></i> {{ ele[6] }} min.
|
|
</small>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<a class="btn btn-primary btn-sm" href="{{ url_for('post', post_id=ele[0]) }}"><i
|
|
class="bi bi-eye-fill"></i></a>
|
|
<a class="btn btn-secondary btn-sm" href="{{ url_for('edit_post', id_post=ele[0]) }}"><i
|
|
class="bi bi-vector-pen"></i></a>
|
|
<button type="button" class="btn btn-danger btn-sm delete-btn" data-id="{{ele[0]}}">
|
|
<i class="bi bi-trash3"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<!-- {# i pagination #} -->
|
|
{% if total_pages > 1 %}
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center mt-4">
|
|
|
|
<li class="page-item {% if current_page == 1 %}disabled{% endif %}">
|
|
<a class="page-link" href="?page={{ current_page - 1 }}" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
|
|
{% for p in range(1, total_pages + 1) %}
|
|
<li class="page-item {% if p == current_page %}active{% endif %}">
|
|
<a class="page-link" href="?page={{ p }}">{{ p }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
|
|
<li class="page-item {% if current_page == total_pages %}disabled{% endif %}">
|
|
<a class="page-link" href="?page={{ current_page + 1 }}" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
<!-- {# f pagination #} -->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <script>
|
|
document.querySelectorAll('.delete-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const wrapper = btn.closest('.card-wrapper');
|
|
wrapper.classList.add('fade-out');
|
|
|
|
setTimeout(() => {
|
|
wrapper.remove();
|
|
}, 300);
|
|
});
|
|
});
|
|
</script> -->
|
|
|
|
{% endblock body %}
|
|
|
|
{% block js %}
|
|
|
|
|
|
<!-- {# aos script #} -->
|
|
{% include 'z_comps/aos_script.html' %}
|
|
|
|
|
|
|
|
<!-- jQuery y jConfirm -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://htmlguyllc.github.io/jConfirm/jConfirm.min.js"></script>
|
|
|
|
<script>
|
|
function delete_post(e) {
|
|
let btn = $(this); // `this` es el botón que lanzó el jConfirm
|
|
let postId = btn.data('id'); // lee el data-id
|
|
let data = { 'id': postId };
|
|
|
|
fetch('/user/del-post', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data),
|
|
credentials: 'include'
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Error en la respuesta del servidor');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.ok) {
|
|
// Aquí puedes agregar código para eliminar el post del DOM
|
|
|
|
console.log(data.message);
|
|
document.querySelector(`div [data-id='${data.id}']`).remove();
|
|
// Por ejemplo, si el post está en un elemento con clase 'post':
|
|
btn.closest('.post').remove();
|
|
} else {
|
|
console.error('Error:', data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
|
|
// https://htmlguyllc.github.io/jConfirm/
|
|
$(function(){
|
|
$('.delete-btn').jConfirm({
|
|
//false|array: if provided, this will override the default confirm/deny buttons (see below for an example)
|
|
btns: false,
|
|
//string: question displayed to the user
|
|
question: '¿Deseas continuar con la eliminación?',
|
|
//string: confirm button text
|
|
confirm_text: 'Sí',
|
|
//string: deny button text
|
|
deny_text: 'No',
|
|
//boolean: if true, when the confirm button is clicked the user will be redirected to the button's href location
|
|
// follow_href: true,
|
|
//boolean: if true and follow_href is true, the href will be opened in a new window
|
|
open_new_tab: false,
|
|
//boolean: if true, the tooltip will be hidden if you click outside of it
|
|
hide_on_click: true,
|
|
//string ('auto','top','bottom','left','right'): preferred location of the tooltip (defaults to auto if no space)
|
|
position: 'auto',
|
|
//boolean: if true, the deny button will be shown
|
|
show_deny_btn: true,
|
|
//string ('black', 'white', 'bootstrap-4', 'bootstrap-4-white')
|
|
theme: 'bootstrap-4',
|
|
//string ('tiny', 'small', 'medium', 'large')
|
|
size: 'medium',
|
|
//boolean: show the tooltip immediately on instantiation
|
|
show_now: false,
|
|
//string: class(es) to add to the tooltip
|
|
'class': ''
|
|
}).on('confirm', delete_post)
|
|
.on('deny', function(e){
|
|
var btn = $(this);
|
|
//do something on deny
|
|
}).on('jc-show', function(e, tooltip){
|
|
// console.log("el tooltip es visible");
|
|
//do something when tooltip is shown
|
|
//tooltip dom element is passed as the second parameter
|
|
}).on('jc-hide', function(e){
|
|
//do something when tooltip is hidden
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
{% endblock js %} |