Add select row to report

benchmark/scripts/templates/base.html

@@ -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://code.jquery.com/jquery-3.6.0.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" 
+    {% block jscript %}
-        crossorigin="anonymous"></script>
+    {% endblock %}
-    {% endif %}
 </html>

benchmark/scripts/templates/partials/js_report.js

@@ -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 }}');
+        }
+    });
+  });

benchmark/scripts/templates/partials/js_select.html

@@ -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>

benchmark/scripts/templates/partials/js_select.js

@@ -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);
+        }
+    });
+}

benchmark/scripts/templates/partials/table_report_bootstrap.html

@@ -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>

benchmark/scripts/templates/partials/table_report_bulma.html

@@ -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>

benchmark/scripts/templates/partials/table_select.html

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

benchmark/scripts/templates/partials/table_select_design.html

@@ -4,8 +4,4 @@
         }}</button>
     {% include "partials/table_select.html" %}
     <input type="button" class="{{ button_class }}" onclick="excel()" value="Excel">
-</div>
+</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" %}

benchmark/scripts/templates/report.html

@@ -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 %}

benchmark/scripts/templates/select.html

@@ -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 %}