Add select row to report

This commit is contained in:
2023-05-28 20:06:33 +02:00
parent 655c1db889
commit 663a0b0258
10 changed files with 103 additions and 74 deletions

View File

@@ -14,6 +14,10 @@
background-color: #0dcaf0;
color:white;
}
#report-table tbody tr.selected td{
background-color: #0dcaf0;
color:white;
}
</style>
{% else %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
@@ -33,8 +37,7 @@
{% block content %}
{% endblock %}
</body>
{% if framework == "bootstrap" %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"></script>
{% endif %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
{% block jscript %}
{% endblock %}
</html>

View File

@@ -0,0 +1,11 @@
$(document).ready(function () {
// Check if row is selected
$('#report-table tbody').on('click', 'tr', function () {
if ($(this).hasClass('{{ selected }}')) {
$(this).removeClass('{{ selected }}');
} else {
$('#report-table tbody tr.{{ selected }}').removeClass("{{ selected }}")
$(this).addClass('{{ selected }}');
}
});
});

View File

@@ -1,60 +0,0 @@
<script>
$(document).ready(function () {
var table = $('#file-table').DataTable({
"paging": true,
"searching": true,
"ordering": true,
"info": true,
"select.items": "row",
"pageLength": 25,
"columnDefs": [{
"targets": 8,
"orderable": false
}]
});
// Check if row is selected
$('#file-table tbody').on('click', 'tr', function () {
if ($(this).hasClass('{{ selected }}')) {
$(this).removeClass('{{ selected }}');
} else {
table.$('tr.{{ selected }}').removeClass('{{ selected }}');
$(this).addClass('{{ selected }}');
}
});
});
function showFile(selectedFile) {
var form = $('<form action="/show" method="post">' +
'<input type="hidden" name="selected-file" value="' + selectedFile + '" />' +
'</form>');
$('body').append(form);
form.submit();
}
function excel() {
var checkbox = document.getElementsByName("selected_files");
var selectedFiles = [];
for (var i = 0; i < checkbox.length; i++) {
if (checkbox[i].checked) {
selectedFiles.push(checkbox[i].value);
}
}
if (selectedFiles.length == 0) {
alert("Select at least one file");
return;
}
// send data to server with ajax post
$.ajax({
type:'POST',
url:'/excel',
data: JSON.stringify(selectedFiles),
contentType: "application/json",
dataType: 'json',
success: function(data){
alert("Se ha generado el archivo "+data.file);
},
error: function (xhr, ajaxOptions, thrownError) {
var mensaje = JSON.parse(xhr.responseText || '{\"mensaje\": \"Error indeterminado\"}');
alert(mensaje.mensaje);
}
});
}
</script>

View File

@@ -0,0 +1,58 @@
$(document).ready(function () {
var table = $('#file-table').DataTable({
"paging": true,
"searching": true,
"ordering": true,
"info": true,
"select.items": "row",
"pageLength": 25,
"columnDefs": [{
"targets": 8,
"orderable": false
}]
});
// Check if row is selected
$('#file-table tbody').on('click', 'tr', function () {
if ($(this).hasClass('{{ selected }}')) {
$(this).removeClass('{{ selected }}');
} else {
table.$('tr.{{ selected }}').removeClass('{{ selected }}');
$(this).addClass('{{ selected }}');
}
});
});
function showFile(selectedFile) {
var form = $('<form action="/show" method="post">' +
'<input type="hidden" name="selected-file" value="' + selectedFile + '" />' +
'</form>');
$('body').append(form);
form.submit();
}
function excel() {
var checkbox = document.getElementsByName("selected_files");
var selectedFiles = [];
for (var i = 0; i < checkbox.length; i++) {
if (checkbox[i].checked) {
selectedFiles.push(checkbox[i].value);
}
}
if (selectedFiles.length == 0) {
alert("Select at least one file");
return;
}
// send data to server with ajax post
$.ajax({
type:'POST',
url:'/excel',
data: JSON.stringify(selectedFiles),
contentType: "application/json",
dataType: 'json',
success: function(data){
alert("Se ha generado el archivo "+data.file);
},
error: function (xhr, ajaxOptions, thrownError) {
var mensaje = JSON.parse(xhr.responseText || '{\"mensaje\": \"Error indeterminado\"}');
alert(mensaje.mensaje);
}
});
}

View File

@@ -43,7 +43,7 @@
</tr>
</thead>
</table>
<table class="table table-striped table-hover table-bordered">
<table id="report-table" class="table table-striped table-hover table-bordered">
<thead>
<tr class="bg-primary text-white">
<th class="text-center">Dataset</th>

View File

@@ -49,7 +49,7 @@
</tr>
</thead>
</table>
<table class="table is-fullwidth is-striped is-hoverable is-bordered">
<table id="report-table" class="table is-fullwidth is-striped is-hoverable is-bordered">
<thead>
<tr class="is-selected">
<th class="has-text-centered">Dataset</th>

View File

@@ -1,4 +1,4 @@
<table id="file-table" class={{ table_class }}>
<table id="file-table" class="{{ table_class }}">
<thead>
<tr>
<th>Model</th>

View File

@@ -4,8 +4,4 @@
}}</button>
{% include "partials/table_select.html" %}
<input type="button" class="{{ button_class }}" onclick="excel()" value="Excel">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
{% include "partials/js_select.html" %}
</div>

View File

@@ -11,3 +11,13 @@
{% include "partials/table_report_bulma.html" %}
{% endif %}
{% endblock %}
{% block jscript %}
{% if framework == "bootstrap" %}
{% set selected = "selected" %}
{% else %}
{% set selected = "is-selected" %}
{% endif %}
<script>
{% include "partials/js_report.js" %}
</script>
{% endblock %}

View File

@@ -3,7 +3,7 @@
{% if framework == "bootstrap" %}
{% set button_class = "btn btn-primary bt-sm" %}
{% set h1_class = "text-center" %}
{% set table_class = "table table-striped table-hover" %}
{% set table_class = "table table-striped table-hover table-bordered" %}
{% set button_pre = '<button class="btn btn-primary btn-sm"
style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;"
onclick="showFile(\''%}
@@ -12,7 +12,7 @@
{% else %}
{% set button_class = "button is-primary is-small" %}
{% set h1_class = "title is-1 has-text-centered" %}
{% set table_class = "table is-striped is-hoverable cell-border" %}
{% set table_class = "table is-striped is-hoverable cell-border is-bordered" %}
{% set button_pre = '<span class="tag is-link is-normal" type="button" onclick="showFile(\'' %}
{% set button_post = '\')">View</span>' %}
{% set selected = "is-selected" %}
@@ -20,3 +20,14 @@
{% block content %}
{% include "partials/table_select_design.html" %}
{% endblock %}
{% block jscript %}
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
{% if framework == "bootstrap" %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"></script>
{% endif %}
<script>
{% include "partials/js_select.js" %}
</script>
{% endblock %}