From 394c3d84a394be1ec22d76808ed0846ed3c4a135 Mon Sep 17 00:00:00 2001
From: Iris Jeuffrard <114398946+ijeuffrard@users.noreply.github.com>
Date: Fri, 5 Jan 2024 14:50:43 +0100
Subject: [PATCH 1/2] page setter on tabs

---
 views/partials/tab/hosts_tab.ejs              | 23 ++++++-
 views/partials/tab/job_dependencies_tab.ejs   |  4 +-
 views/partials/tab/jobs_of_project_tab.ejs    | 60 ++++++++++++-------
 views/partials/tab/jobs_tab.ejs               | 20 ++++++-
 .../partials/tab/project_dependencies_tab.ejs |  4 +-
 views/partials/tab/projects_tab.ejs           | 20 ++++++-
 views/partials/tab/sessions_tab.ejs           | 25 ++++++--
 7 files changed, 119 insertions(+), 37 deletions(-)

diff --git a/views/partials/tab/hosts_tab.ejs b/views/partials/tab/hosts_tab.ejs
index 6f08111..e284f11 100644
--- a/views/partials/tab/hosts_tab.ejs
+++ b/views/partials/tab/hosts_tab.ejs
@@ -18,7 +18,7 @@
     
         var table = $('#dataTable').DataTable( {
             "language": {
-                "lengthMenu": "Afficher _MENU_ par page",
+                "lengthMenu": '<div class="input-group input-group-sm"><div class="input-group-prepend"><label class="input-group-text">Items par page</label></div>_MENU_</div>',
                 "zeroRecords": "Aucun éléments",
                 "info": "Page _PAGE_ sur _PAGES_",
                 "infoEmpty": "Aucun enregistrement disponible",
@@ -34,7 +34,7 @@
             "order": [[ 0, "asc" ]],
             "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
             "pageLength": 100,
-            "dom": '<"d-flex m-1"<"mr-auto"l><f>><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
+            "dom": '<"d-flex m-1"<"mr-auto"f><"mr-2"l><"#pagination">><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
             "data": data,
             "columns": columns,
             "autoWidth": false,
@@ -112,6 +112,23 @@
            
             var value = window.prompt(`Modifier le nombre de Threads actifs pour ${host}, ${row.data().active}`, 0);
             setNbActiveSessions(jsonHosts, value);
-        } );    
+        } );  
+         
+        //gestion du choix de la page
+        var group_page_setter = jQuery('<div class="input-group input-group-sm">'+
+                                        '<div class="input-group-prepend">'+
+                                          '<label class="input-group-text">Aller à la page</label>'+
+                                        '</div>'+
+                                        '<input type="number" class="form-control" id="page-setter" name="" min="1" style="width: 70px;" autocomplete="off"/>'+
+                                       '</div>')  
+        $("#pagination").append(group_page_setter);
+        $('#page-setter').attr('max', table.page.info().pages)
+        $('#page-setter').change( function() {
+            table.page($('#page-setter').val()-1).draw( 'page' );
+        } );
+        $('#dataTable_length').change( function() {
+            $('#page-setter').attr('max', table.page.info().pages)  
+            $('#page-setter').prop('value', "")  
+        } );
     } );
 </script>
\ No newline at end of file
diff --git a/views/partials/tab/job_dependencies_tab.ejs b/views/partials/tab/job_dependencies_tab.ejs
index b62662c..45f0535 100644
--- a/views/partials/tab/job_dependencies_tab.ejs
+++ b/views/partials/tab/job_dependencies_tab.ejs
@@ -17,7 +17,7 @@
     
         var table = $('#dataTable').DataTable( {
             "language": {
-                "lengthMenu": "Afficher _MENU_ par page",
+                "lengthMenu": '<div class="input-group input-group-sm"><div class="input-group-prepend"><label class="input-group-text">Items par page</label></div>_MENU_</div>',
                 "zeroRecords": "Aucun éléments",
                 "info": "Page _PAGE_ sur _PAGES_",
                 "infoEmpty": "Aucun enregistrement disponible",
@@ -33,7 +33,7 @@
             "order": [[ 0, "asc" ]],
             "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
             "pageLength": 10,
-            "dom": '<"d-flex m-1"<"mr-auto"l><f>><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
+            "dom": '<"d-flex m-1"<"mr-auto"f><l>><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
             "data": data,
             "columns": columns,
             "rowCallback": function( row, data, index ) {
diff --git a/views/partials/tab/jobs_of_project_tab.ejs b/views/partials/tab/jobs_of_project_tab.ejs
index fa01582..8ef1600 100644
--- a/views/partials/tab/jobs_of_project_tab.ejs
+++ b/views/partials/tab/jobs_of_project_tab.ejs
@@ -17,7 +17,7 @@ $(document).ready(function() {
     
     var table = $('#dataTableJobs').DataTable( {
       "language": {
-          "lengthMenu": "Afficher _MENU_ par page",
+          "lengthMenu": '<div class="input-group input-group-sm"><div class="input-group-prepend"><label class="input-group-text">Items par page</label></div>_MENU_</div>',
           "zeroRecords": "Aucun éléments",
           "info": "Page _PAGE_ sur _PAGES_",
           "infoEmpty": "Aucun enregistrement disponible",
@@ -33,7 +33,7 @@ $(document).ready(function() {
       "order": [[ 0, "asc" ]],
       "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
       "pageLength": 10,
-      "dom": '<"d-flex m-1"<"mr-auto"l><f>><"d-flex m-1"<"mr-auto toolbar_tab2"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
+      "dom": '<"d-flex m-1"<"mr-auto"f><"mr-2"l><"#pagination">><"d-flex m-1"<"mr-auto toolbar_tab2"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
       "data": data,
       "columns": columns,
       "autoWidth": false,
@@ -68,29 +68,45 @@ $(document).ready(function() {
           }
       }
     } 
-);
+    );
 
-// Add event listener for actions
-$('#dataTableJobs tbody').on('click', 'button.reinit_job', function () {
-    var tr = $(this).closest('tr');
-    var row = table.row( tr );
-    if (row.data().job_status == 'failed')
-        reinitJobs({"ids":[row.data().job_id]});
-} );
+    // Add event listener for actions
+    $('#dataTableJobs tbody').on('click', 'button.reinit_job', function () {
+        var tr = $(this).closest('tr');
+        var row = table.row( tr );
+        if (row.data().job_status == 'failed')
+            reinitJobs({"ids":[row.data().job_id]});
+    } );
 
-// Add btn Réinitialiser les jobs en échecs
-var i = jQuery('<i></i>');
-i.addClass('fas fa-sync-alt fa-1x')
+    // Add btn Réinitialiser les jobs en échecs
+    var i = jQuery('<i></i>');
+    i.addClass('fas fa-sync-alt fa-1x')
 
-var button = jQuery('<button></button>');
-button.addClass('btn btn-warning');
-button.attr('type', 'button')
-      .attr('data-toggle', "tooltip")
-      .attr('title', 'Réinitialise tous les jobs en échecs visibles')
-      .attr('onclick', 'reinitFilteredJobs($("#dataTableJobs").DataTable())')
-      .append(i)
-      .append(' Réinitialiser les jobs en échecs visibles');
-$("div.toolbar_tab2").append(button);
+    var button = jQuery('<button></button>');
+    button.addClass('btn btn-warning');
+    button.attr('type', 'button')
+        .attr('data-toggle', "tooltip")
+        .attr('title', 'Réinitialise tous les jobs en échecs visibles')
+        .attr('onclick', 'reinitFilteredJobs($("#dataTableJobs").DataTable())')
+        .append(i)
+        .append(' Réinitialiser les jobs en échecs visibles');
+    $("div.toolbar_tab2").append(button);
 
+    //gestion du choix de la page
+    var group_page_setter = jQuery('<div class="input-group input-group-sm">'+
+                                    '<div class="input-group-prepend">'+
+                                        '<label class="input-group-text">Aller à la page</label>'+
+                                    '</div>'+
+                                    '<input type="number" class="form-control" id="page-setter" name="" min="1" style="width: 70px;" autocomplete="off"/>'+
+                                   '</div>')  
+    $("#pagination").append(group_page_setter);
+    $('#page-setter').attr('max', table.page.info().pages)
+    $('#page-setter').change( function() {
+        table.page($('#page-setter').val()-1).draw( 'page' );
+    } );
+    $('#dataTableJobs_length').change( function() {
+        $('#page-setter').attr('max', table.page.info().pages)  
+        $('#page-setter').prop('value', "")  
+    } );
 } );
 </script>
diff --git a/views/partials/tab/jobs_tab.ejs b/views/partials/tab/jobs_tab.ejs
index 78a58db..0cef262 100644
--- a/views/partials/tab/jobs_tab.ejs
+++ b/views/partials/tab/jobs_tab.ejs
@@ -32,7 +32,7 @@ $(document).ready(function() {
 
     var table = $('#dataTable').DataTable( {
         "language": {
-            "lengthMenu": "Afficher _MENU_ par page",
+            "lengthMenu": '<div class="input-group input-group-sm"><div class="input-group-prepend"><label class="input-group-text">Items par page</label></div>_MENU_</div>',
             "zeroRecords": "Aucun éléments",
             "info": "Page _PAGE_ sur _PAGES_",
             "infoEmpty": "Aucun enregistrement disponible",
@@ -48,7 +48,7 @@ $(document).ready(function() {
         "order": [[ 0, "asc" ]],
         "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
         "pageLength": 100,
-        "dom": '<"d-flex m-1"<"mr-auto"l><f>><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
+        "dom": '<"d-flex m-1"<"mr-auto"f><"mr-2"l><"#pagination">><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
         "data": data,
         "columns": columns,
         "autoWidth": false,
@@ -116,6 +116,22 @@ $(document).ready(function() {
         table.draw();
     } );
 
+    //gestion du choix de la page
+    var group_page_setter = jQuery('<div class="input-group input-group-sm">'+
+                                    '<div class="input-group-prepend">'+
+                                      '<label class="input-group-text">Aller à la page</label>'+
+                                    '</div>'+
+                                    '<input type="number" class="form-control" id="page-setter" name="" min="1" style="width: 70px;" autocomplete="off"/>'+
+                                   '</div>')  
+    $("#pagination").append(group_page_setter);
+    $('#page-setter').attr('max', table.page.info().pages)
+    $('#page-setter').change( function() {
+        table.page($('#page-setter').val()-1).draw( 'page' );
+    } );
+    $('#dataTable_length').change( function() {
+        $('#page-setter').attr('max', table.page.info().pages)  
+        $('#page-setter').prop('value', "")  
+    } );
 } );
 
   $.fn.dataTable.ext.search.push(
diff --git a/views/partials/tab/project_dependencies_tab.ejs b/views/partials/tab/project_dependencies_tab.ejs
index 7fa4696..eb3c5eb 100644
--- a/views/partials/tab/project_dependencies_tab.ejs
+++ b/views/partials/tab/project_dependencies_tab.ejs
@@ -17,7 +17,7 @@
 
         var table = $('#dataTable').DataTable( {
             "language": {
-                "lengthMenu": "Afficher _MENU_ par page",
+                "lengthMenu": '<div class="input-group input-group-sm"><div class="input-group-prepend"><label class="input-group-text">Items par page</label></div>_MENU_</div>',
                 "zeroRecords": "Aucun éléments",
                 "info": "Page _PAGE_ sur _PAGES_",
                 "infoEmpty": "Aucun enregistrement disponible",
@@ -33,7 +33,7 @@
             "order": [[ 0, "asc" ]],
             "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
             "pageLength": 10,
-            "dom": '<"d-flex m-1"<"mr-auto"l><f>><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i>>',
+            "dom": '<"d-flex m-1"<"mr-auto"f><l>><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
             "data": data,
             "columns": columns,
             "rowCallback": function( row, data, index ) {
diff --git a/views/partials/tab/projects_tab.ejs b/views/partials/tab/projects_tab.ejs
index 0cbd2d0..869008e 100644
--- a/views/partials/tab/projects_tab.ejs
+++ b/views/partials/tab/projects_tab.ejs
@@ -17,7 +17,7 @@
     
         var table = $('#dataTable').DataTable( {
             "language": {
-                "lengthMenu": "Afficher _MENU_ par page",
+                "lengthMenu": '<div class="input-group input-group-sm"><div class="input-group-prepend"><label class="input-group-text">Items par page</label></div>_MENU_</div>',
                 "zeroRecords": "Aucun éléments",
                 "info": "Page _PAGE_ sur _PAGES_",
                 "infoEmpty": "Aucun enregistrement disponible",
@@ -33,7 +33,7 @@
             "order": [[ 0, "asc" ]],
             "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
             "pageLength": 100,
-            "dom": '<"d-flex m-1"<"mr-auto"l><f>><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
+            "dom": '<"d-flex m-1"<"mr-auto"f><"mr-2"l><"#pagination">><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
             "data": data,
             "columns": columns,
             "autoWidth": false,
@@ -132,5 +132,21 @@
       buttonPriorityFilteredProject.append(dropdownMenu)
       $("div.toolbar_tab").append(buttonPriorityFilteredProject);
       
+      //gestion du choix de la page
+      var group_page_setter = jQuery('<div class="input-group input-group-sm">'+
+                                      '<div class="input-group-prepend">'+
+                                        '<label class="input-group-text">Aller à la page</label>'+
+                                      '</div>'+
+                                      '<input type="number" class="form-control" id="page-setter" name="" min="1" style="width: 70px;" autocomplete="off"/>'+
+                                     '</div>')  
+      $("#pagination").append(group_page_setter);
+      $('#page-setter').attr('max', table.page.info().pages)
+      $('#page-setter').change( function() {
+          table.page($('#page-setter').val()-1).draw( 'page' );
+      } );
+      $('#dataTable_length').change( function() {
+          $('#page-setter').attr('max', table.page.info().pages)  
+          $('#page-setter').prop('value', "")  
+      } );
     } );
   </script>
\ No newline at end of file
diff --git a/views/partials/tab/sessions_tab.ejs b/views/partials/tab/sessions_tab.ejs
index 52e07b7..6a21d1a 100644
--- a/views/partials/tab/sessions_tab.ejs
+++ b/views/partials/tab/sessions_tab.ejs
@@ -31,7 +31,7 @@
     
         var table = $('#dataTable').DataTable( {
             "language": {
-                "lengthMenu": "Afficher _MENU_ par page",
+                "lengthMenu": '<div class="input-group input-group-sm"><div class="input-group-prepend"><label class="input-group-text">Items par page</label></div>_MENU_</div>',
                 "zeroRecords": "Aucun éléments",
                 "info": "Page _PAGE_ sur _PAGES_",
                 "infoEmpty": "Aucun enregistrement disponible",
@@ -47,7 +47,7 @@
             "order": [[ 0, "asc" ]],
             "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
             "pageLength": 100,
-            "dom": '<"d-flex m-1"<"mr-auto"l><f>><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
+            "dom": '<"d-flex m-1"<"mr-auto"f><"mr-2"l><"#pagination">><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
             "data": data,
             "columns": columns,
             "autoWidth": false,
@@ -91,12 +91,29 @@
     $('#host-select').change( function() {
         table.draw();
     } );
+
+    //gestion du choix de la page
+    var group_page_setter = jQuery('<div class="input-group input-group-sm">'+
+                                     '<div class="input-group-prepend">'+
+                                       '<label class="input-group-text">Aller à la page</label>'+
+                                    '</div>'+
+                                    '<input type="number" class="form-control" id="page-setter" name="" min="1" style="width: 70px;" autocomplete="off"/>'+
+                                   '</div>')  
+    $("#pagination").append(group_page_setter);
+    $('#page-setter').attr('max', table.page.info().pages)
+    $('#page-setter').change( function() {
+        table.page($('#page-setter').val()-1).draw( 'page' );
+    } );
+    $('#dataTable_length').change( function() {
+        $('#page-setter').attr('max', table.page.info().pages)  
+        $('#page-setter').prop('value', "")  
+    } );
   } );
 
   $.fn.dataTable.ext.search.push(
     function( settings, data, dataIndex ) {
         var host = $('#host-select').val()
-        console.log("host = "+host+", data = "+data[1])
+        // console.log("host = "+host+", data = "+data[1])
         if(host == -1){
           return true;
         }else if(data[1] == host){
@@ -106,5 +123,5 @@
           return false
         }
     }
-);
+  );
   </script>

From 28f07fce5dd229d256d2463866125e6d9b183b64 Mon Sep 17 00:00:00 2001
From: Iris Jeuffrard <114398946+ijeuffrard@users.noreply.github.com>
Date: Fri, 19 Jan 2024 16:06:19 +0100
Subject: [PATCH 2/2] add setter page on dep tabs

---
 views/partials/tab/job_dependencies_tab.ejs   | 20 ++++++++++++++-
 .../partials/tab/project_dependencies_tab.ejs | 25 ++++++++++++++++---
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/views/partials/tab/job_dependencies_tab.ejs b/views/partials/tab/job_dependencies_tab.ejs
index 45f0535..120fc74 100644
--- a/views/partials/tab/job_dependencies_tab.ejs
+++ b/views/partials/tab/job_dependencies_tab.ejs
@@ -33,7 +33,7 @@
             "order": [[ 0, "asc" ]],
             "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
             "pageLength": 10,
-            "dom": '<"d-flex m-1"<"mr-auto"f><l>><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
+            "dom": '<"d-flex m-1"<"mr-auto"f><"mr-2"l><"#pagination">><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
             "data": data,
             "columns": columns,
             "rowCallback": function( row, data, index ) {
@@ -65,5 +65,23 @@
         }
           } 
         );
+
+      //gestion du choix de la page
+      var group_page_setter = jQuery('<div class="input-group input-group-sm">'+
+                                      '<div class="input-group-prepend">'+
+                                        '<label class="input-group-text">Aller à la page</label>'+
+                                      '</div>'+
+                                      '<input type="number" class="form-control" id="page-setter" name="" min="1" style="width: 70px;" autocomplete="off"/>'+
+                                    '</div>')  
+      $("#pagination").append(group_page_setter);
+      $('#page-setter').attr('max', table.page.info().pages)
+      $('#page-setter').change( function() {
+          table.page($('#page-setter').val()-1).draw( 'page' );
+      } );
+      $('#dataTable_length').change( function() {
+          $('#page-setter').attr('max', table.page.info().pages)  
+          $('#page-setter').prop('value', "")  
+      } );
+
     } );
 </script>
\ No newline at end of file
diff --git a/views/partials/tab/project_dependencies_tab.ejs b/views/partials/tab/project_dependencies_tab.ejs
index eb3c5eb..61af524 100644
--- a/views/partials/tab/project_dependencies_tab.ejs
+++ b/views/partials/tab/project_dependencies_tab.ejs
@@ -4,7 +4,7 @@
     </div>
     <div class="card-body">
       <div class="table-responsive">
-        <table class="table table-bordered table-striped" id="dataTable" cellspacing="0">
+        <table class="table table-bordered table-striped" id="dataTableDeps" cellspacing="0">
         </table>
       </div>
     </div>
@@ -15,7 +15,7 @@
         const data = JSON.parse('<%- data %>');
         const columns = JSON.parse('<%- columns %>');
 
-        var table = $('#dataTable').DataTable( {
+        var table = $('#dataTableDeps').DataTable( {
             "language": {
                 "lengthMenu": '<div class="input-group input-group-sm"><div class="input-group-prepend"><label class="input-group-text">Items par page</label></div>_MENU_</div>',
                 "zeroRecords": "Aucun éléments",
@@ -33,7 +33,7 @@
             "order": [[ 0, "asc" ]],
             "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
             "pageLength": 10,
-            "dom": '<"d-flex m-1"<"mr-auto"f><l>><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
+            "dom": '<"d-flex m-1"<"mr-auto"f><"mr-2"l><"#pagination-deps">><"d-flex m-1"<"mr-auto toolbar_tab"><p>>t<"d-flex m-1"<"mr-auto"i><p>>',
             "data": data,
             "columns": columns,
             "rowCallback": function( row, data, index ) {
@@ -61,5 +61,24 @@
                 }
           } 
         });
+
+
+      //gestion du choix de la page
+      var group_page_setter = jQuery('<div class="input-group input-group-sm">'+
+                                      '<div class="input-group-prepend">'+
+                                        '<label class="input-group-text">Aller à la page</label>'+
+                                      '</div>'+
+                                      '<input type="number" class="form-control" id="page-setter-deps" name="" min="1" style="width: 70px;" autocomplete="off"/>'+
+                                    '</div>')  
+      $("#pagination-deps").append(group_page_setter);
+      $('#page-setter-deps').attr('max', table.page.info().pages)
+      $('#page-setter-deps').change( function() {
+          table.page($('#page-setter-deps').val()-1).draw( 'page' );
+      } );
+      $('#dataTableDeps_length').change( function() {
+          $('#page-setter-deps').attr('max', table.page.info().pages)  
+          $('#page-setter-deps').prop('value', "")  
+      } );
+
     } );
 </script>
\ No newline at end of file