Started with filter function for queue archive

mercure-imaging · Jul 23, 2024 · 0691346 · 0691346
1 parent b0381f5
commit 0691346
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/webinterface/statics/css/custom.css b/webinterface/statics/css/custom.css
@@ -549,3 +549,16 @@ body {
 .cm-activeLineGutter {
   background-color: rgba(0, 0, 0, 0.0) !important;
 }
+
+.queueArchiveFilterButton::before {
+}
+
+.queueArchiveFilterButton-Checked::before {
+  margin-right: 8px;
+  font-family: "Font Awesome 5 Free"; 
+  font-weight: 900; 
+  content: "\f00c";
+}
+
+.queueArchiveFilter {
+}
diff --git a/webinterface/templates/base.html b/webinterface/templates/base.html
@@ -11,6 +11,7 @@
   <script defer src="{{ url_for('static', path='/js/fontawesome-5.9.js') }}"></script>
   <script src="{{ url_for('static', path='/js/jquery-3.5.1.min.js') }}"></script>
   <script src="{{ url_for('static', path='/js/htmx.min.js') }}"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link rel="stylesheet" href="{{ url_for('static', path='/css/bulma-extensions.min.css') }}">
   <link href="{{ url_for('static', path='/css/tooltip.css') }}" rel="stylesheet">
   <script type="text/javascript" src="{{ url_for('static', path='/js/bulma-extensions.min.js') }}"></script>

diff --git a/webinterface/templates/queue.html b/webinterface/templates/queue.html
@@ -809,6 +809,21 @@ <h5 class="title is-5 configtitle" style="margin-top: 60px;"><i
             },
             select: true,
             buttons: [
+                {
+                    extend: 'collection',
+                    text: '<i class="fas fa-filter"></i>',
+                    className: 'queueArchiveFilter',
+                    buttons: [
+                        {
+                            text: 'Show only STUDY tasks',
+                            className: 'queueArchiveFilterButton',
+                            action: function (e, dt, node, config, cb) {
+                                        // Toggles class when pressed
+                                        $(e.currentTarget).toggleClass("queueArchiveFilterButton-Checked")                       
+                                    }
+                        }
+                    ]
+                },
                 {
                     text: '<i class="far fa-question-circle"></i>',
                     titleAttr: 'Job information',
@@ -832,19 +847,23 @@ <h5 class="title is-5 configtitle" style="margin-top: 60px;"><i
                         var jid = $('#jobs_archive').DataTable().rows( { selected: true } ).data()[0].slice(-1)[0];
                         showLogs(jid);
                     }
-                }   
+                }
             ],
             dom: 'Bfrtip',
             "scrollY": "740px",
             "scrollX": false,
             "scrollCollapse": true,
-            "order": [[3, 'desc']]
+            "order": [[3, 'desc']],
+            initComplete: function() {
+                $('.queueArchiveFilter > .dt-down-arrow').hide()
+                $('.queueArchiveFilter > .icon').hide()
+            }
         } );
         $('#jobs_archive').DataTable().on( 'select deselect', function () {
             var selectedRows = $('#jobs_archive').DataTable().rows( { selected: true } ).count();
-            $('#jobs_archive').DataTable().button(0).enable( selectedRows > 0 );
             $('#jobs_archive').DataTable().button(1).enable( selectedRows > 0 );
             $('#jobs_archive').DataTable().button(2).enable( selectedRows > 0 );
+            $('#jobs_archive').DataTable().button(3).enable( selectedRows > 0 );
         } );
         $("#job_archive_search").on('keyup', function (event) {
             if (event.keyCode === 13) {
@@ -922,9 +941,9 @@ <h5 class="title is-5 configtitle" style="margin-top: 60px;"><i
                             jobtable.row.add( [ data[key]["ACC"], data[key]["MRN"], data[key]["Scope"], data[key]["Time"], key ] );
                         })
                     }
-                    $('#jobs_archive').DataTable().button(0).enable(false);
                     $('#jobs_archive').DataTable().button(1).enable(false);
                     $('#jobs_archive').DataTable().button(2).enable(false);
+                    $('#jobs_archive').DataTable().button(3).enable(false);
                     jobtable.draw();
                 },
                 complete: function (data) {