334 lines
12 KiB
HTML
334 lines
12 KiB
HTML
{% extends 'h_tmp_usr/z_tmp.html' %}
|
|
|
|
{% block css %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='f_contact/form.css') }}">
|
|
|
|
<!-- {# datatables #} -->
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.bootstrap5.css">
|
|
|
|
<!-- {# i jconfirm #} -->
|
|
<link rel="stylesheet" href="https://htmlguyllc.github.io/jConfirm/jConfirm.min.css">
|
|
<!-- {# f jconfirm #} -->
|
|
{% endblock css %}
|
|
|
|
{% block body %}
|
|
|
|
<style>
|
|
/* estilos del carousel */
|
|
@media screen and (orientation: landscape) {
|
|
.carousel img {
|
|
height: 80vh;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.carousel-item video {
|
|
width: 100%;
|
|
height: 80vh;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.carousel-item {
|
|
position: relative;
|
|
overflow: hidden;
|
|
/* height: 100vh; */
|
|
}
|
|
.carousel-inner {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.carousel-caption.centered {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.carousel-caption.centered .caption-content {
|
|
padding: 1rem 2rem;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.3);
|
|
pointer-events: auto;
|
|
width: max-content;
|
|
max-width: 90%;
|
|
}
|
|
|
|
.carousel-caption.centered .caption-content h2 {
|
|
font-size: clamp(1.5rem, 5vw, 3rem);
|
|
margin: 0;
|
|
text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
|
|
}
|
|
|
|
/* ------------------ */
|
|
/* Aplica a ambas: imágenes y videos */
|
|
.carousel-item img,
|
|
.carousel-item video {
|
|
/* width: 100%; */
|
|
/* height: 100%; */
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true"><i class="bi bi-file-earmark-slides-fill"></i> Slides</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false"><i class="bi bi-database-fill-up"></i> Añadir Slide</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false"><i class="bi bi-play-circle-fill"></i> Carousel</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
|
<!-- {# --------------------------------------------------------------- #} -->
|
|
<!-- {# i tabla slides #} -->
|
|
<table id="tblCarousel" class="table table-striped" style="width:100%" >
|
|
<thead>
|
|
<th>ID</th>
|
|
<th>Creado</th>
|
|
<th>Archivo</th>
|
|
<th>Texto</th>
|
|
<th>Acciones</th>
|
|
</thead>
|
|
<tbody>
|
|
{% for ele in data %}
|
|
<tr id="{{ ele[0] }}">
|
|
<td>{{ loop.index }}</td>
|
|
<td>{{ ele[5] }}</td>
|
|
<td>{{ ele[1] }}</td>
|
|
|
|
<td style="background-color: {{ ele[2] }}; color: {{ ele[3] }};">{{ ele[4] }}</td>
|
|
<td >
|
|
<div class="field_btns">
|
|
<a href="{{ url_for('download_file', filename = ele[1] ) }}" class="btn btn-dark" style="color: white;">
|
|
<i class="bi bi-download"></i>
|
|
</a>
|
|
<a href="#" class="btn btn-danger delete-btn" data-id="{{ ele[0] }}">
|
|
<i class="bi bi-trash"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- {# f tabla slides #} -->
|
|
<!-- {# --------------------------------------------------------------- #} -->
|
|
</div>
|
|
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
|
<!-- {# --------------------------------------------------------------- #} -->
|
|
<!-- {# i form add slide #} -->
|
|
<!-- {# inicio form #} -->
|
|
<div class="form-container" data-aos="fade-down" data-aos-delay="0" data-aos-duration="800"
|
|
data-aos-easing="ease-in-out">
|
|
<div class="form-header">
|
|
<h2>Agregar Slide</h2>
|
|
</div>
|
|
<form method="POST" action="{{ url_for('carousel') }}" enctype="multipart/form-data" class="login-form">
|
|
{{ form.hidden_tag() }}
|
|
|
|
<!-- {# input imagen #} -->
|
|
<div class="form-row">
|
|
{{ form.img.label() }}
|
|
{{ form.img( class_="form-control" ) }}
|
|
</div>
|
|
|
|
<!-- {# bg color picker #} -->
|
|
<div class="form-row">
|
|
{{ form.bg_color.label() }}
|
|
{{ form.bg_color( type="color", class_="form-control form-control-color", value="") }}
|
|
</div>
|
|
|
|
<!-- {# txt color picker #} -->
|
|
<div class="form-row">
|
|
{{ form.txt_color.label() }}
|
|
{{ form.txt_color( type="color", class_="form-control form-control-color", value="" ) }}
|
|
</div>
|
|
|
|
<!-- {# txt #} -->
|
|
<div class="form-row">
|
|
{{ form.txt.label() }}
|
|
{{ form.txt( class_="form-control" ) }}
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="bi bi-database-fill-up"></i> Enviar Datos
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<!-- {# final form #} -->
|
|
<!-- {# f form add slide #} -->
|
|
<!-- {# --------------------------------------------------------------- #} -->
|
|
|
|
</div>
|
|
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
|
<!-- {# --------------------------------------------------------------- #} -->
|
|
<!-- {# i carousel #} -->
|
|
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
|
<div class="carousel-indicators">
|
|
{% for s in data %}
|
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ loop.index0 }}"
|
|
class="{% if loop.first %}active{% endif %}" aria-current="{{ 'true' if loop.first else 'false' }}"
|
|
aria-label="Slide {{ loop.index }}"></button>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="carousel-inner">
|
|
<!-- {# inicio card item slide #} -->
|
|
{% for s in data %}
|
|
<div class="carousel-item {% if loop.first %}active{% endif %}">
|
|
{% if s[1].endswith('.mp4') %}
|
|
<video class="d-block w-100" autoplay muted loop playsinline>
|
|
<source src="{{ url_for('static', filename='uploads/' + s[1]) }}" type="video/mp4">
|
|
Tu navegador no soporta el video.
|
|
</video>
|
|
{% else %}
|
|
<img src="{{ url_for('static', filename='uploads/' + s[1]) }}" class="d-block w-100" alt="...">
|
|
{% endif %}
|
|
<div class="carousel-caption centered">
|
|
<div class="caption-content" style="background-color: {{ s[2] }}; color: {{ s[3] }};">
|
|
<h2>{{ s[4] }}</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<!-- {# fin card item slide #} -->
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
<!-- {# f carousel #} -->
|
|
<!-- {# --------------------------------------------------------------- #} -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{% endblock body %}
|
|
|
|
{% block js %}
|
|
|
|
<!-- {# js databases #} -->
|
|
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> -->
|
|
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
|
|
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.bootstrap5.js"></script>
|
|
|
|
<!-- 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_file(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 };
|
|
console.log(data)
|
|
|
|
}
|
|
// 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_file)
|
|
.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>
|
|
|
|
<script>
|
|
|
|
new DataTable('#tblCarousel', {
|
|
initComplete: function() {
|
|
// Agrega campos de filtro para cada columna
|
|
this.api().columns().every(function() {
|
|
let column = this;
|
|
let header = $(column.header());
|
|
let title = header.text().trim();
|
|
|
|
// Excluir la columna "Estatus" del filtro
|
|
if (title !== 'Acciones') {
|
|
// Crea input de filtro
|
|
header.append('<div class="filter"><input type="text" class="form-control" placeholder="'+title+'" /></div>');
|
|
|
|
// Aplica el filtro al escribir
|
|
$('input', header)
|
|
.on('keyup change', function() {
|
|
if (column.search() !== this.value) {
|
|
column.search(this.value).draw();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<!-- {# if flash #} -->
|
|
{% include 'z_comps/if_flash.html' %}
|
|
|
|
<!-- {# aos script #} -->
|
|
{% include 'z_comps/aos_script.html' %}
|
|
|
|
<!-- {# validador archivos extensión #} -->
|
|
<script type="module" src="{{ url_for('static', filename='h_tmp_user/i_carousel_form/carousel_form.js') }}"></script>
|
|
|
|
|
|
|
|
|
|
{% endblock js %} |