Move functions to perform single, multi and range-selection into the ui module

refs #5765

modules/monitoring/application/controllers/MultiController.php

@@ -32,7 +32,6 @@ use \Icinga\Web\Controller\ActionController;
 use \Icinga\Web\Widget\Tabextension\OutputFormat;
 use \Icinga\Module\Monitoring\Backend;
 use \Icinga\Data\BaseQuery;
-use \Icinga\Module\Monitoring\Backend\Ido\Query\StatusQuery;
 use \Icinga\Module\Monitoring\Form\Command\MultiCommandFlagForm;
 use \Icinga\Module\Monitoring\DataView\HostStatus    as HostStatusView;
 use \Icinga\Module\Monitoring\DataView\ServiceStatus as ServiceStatusView;
@@ -238,6 +237,7 @@ class Monitoring_MultiController extends ActionController
         )->getQuery();
         if ($this->_getParam('service') !== '*' && $this->_getParam('host') !== '*') {
             $this->applyQueryFilter($backendQuery, $filters);
+            $this->applyQueryFilter($backendQuery, $filters);
         }
         $services = $backendQuery->fetchAll();
 

public/js/icinga/events.js

@@ -26,6 +26,7 @@
             this.applyGlobalDefaults();
             this.applyHandlers($('#layout'));
             this.icinga.ui.prepareContainers();
+            this.icinga.ui.prepareMultiselectTables();
         },
 
         // TODO: What's this?
@@ -98,7 +99,7 @@
             // We treat tr's with a href attribute like links
             $(document).on('click', ':not(table) tr[href]', { self: this }, this.linkClicked);
 
-            // When tables have the class 'multiselect', multiple selection is possible.
+            // Select a table.
             $(document).on('click', 'table tr[href]', { self: this }, this.rowSelected);
 
             $(document).on('click', 'button', { self: this }, this.submitForm);
@@ -328,53 +329,14 @@
 
             // Update selection
             if (event.ctrlKey && multisel) {
+                icinga.ui.toogleTableRowSelection($tr);
                 // multi selection
-                if ($tr.hasClass('active')) {
-                    $tr.removeClass('active');
-                } else {
-                    $tr.addClass('active');
-                }
             } else if (event.shiftKey && multisel) {
                 // range selection
-
+                icinga.ui.addTableRowRangeSelection($tr);
-                var $rows = $table.find('tr[href]'),
-                    from, to;
-                var selected = this;
-
-                // TODO: find a better place for this
-                $rows.find('td').attr('unselectable', 'on')
-                    .css('user-select', 'none')
-                    .css('-webkit-user-select', 'none')
-                    .css('-moz-user-select', 'none')
-                    .css('-ms-user-select', 'none');
-
-                $rows.each(function(i, el) {
-                    if ($(el).hasClass('active') || el === selected) {
-                        if (!from) {
-                            from = el;
-                        }
-                        to = el;
-                    }
-                });
-                var inRange = false;
-                $rows.each(function(i, el){
-                    if (el === from) {
-                        inRange = true;
-                    }
-                    if (inRange) {
-                        $(el).addClass('active');
-                    }
-                    if (el === to) {
-                        inRange = false;
-                    }
-                });
             } else {
                 // single selection
-                if ($tr.hasClass('active')) {
+                icinga.ui.setTableRowSelection($tr);
-                    return false;
-                }
-                $table.find('tr[href].active').removeClass('active');
-                $tr.addClass('active');
             }
             $trs = $table.find('tr[href].active');
 

public/js/icinga/loader.js

@@ -99,7 +99,6 @@
             }
 
             var self = this;
-            console.log("$.ajax({ url = " + url + " })");
             var req = $.ajax({
                 type   : method,
                 url    : url,

public/js/icinga/ui.js

@@ -271,6 +271,88 @@
             */
         },
 
+        /**
+         * Prepare all multiselectable tables for multi-selection by
+         * removing the regular text selection.
+         */
+        prepareMultiselectTables: function () {
+            var $rows = $('table.multiselect tr[href]');
+            $rows.find('td').attr('unselectable', 'on')
+                .css('user-select', 'none')
+                .css('-webkit-user-select', 'none')
+                .css('-moz-user-select', 'none')
+                .css('-ms-user-select', 'none');
+        },
+
+        /**
+         * Add the given table-row to the selection of the closest
+         * table
+         *
+         * @param $tr {jQuery}  The selected table row.
+         * @returns {boolean}   If the selection was changed.
+         */
+        setTableRowSelection: function ($tr) {
+            var $table   = $tr.closest('table.multiselect');
+            if ($tr.hasClass('active')) {
+                return false;
+            }
+            $table.find('tr[href].active').removeClass('active');
+            $tr.addClass('active');
+            return true;
+        },
+
+        /**
+         * Toggle the given table row to "on" when not selected, or to "off" when
+         * currently selected.
+         *
+         * @param $tr {jQuery}  The table row.
+         * @returns {boolean}   If the selection was changed.
+         */
+        toogleTableRowSelection: function ($tr) {
+            // multi selection
+            if ($tr.hasClass('active')) {
+                $tr.removeClass('active');
+            } else {
+                $tr.addClass('active');
+            }
+            return true;
+        },
+
+        /**
+         * Add a new selection range to the closest table, using the selected row as
+         * range target
+         *
+         * @param $tr {jQuery}  The target of the selected range.
+         * @returns {boolean}   If the selection was changed.
+         */
+        addTableRowRangeSelection: function ($tr) {
+            var $table = $tr.closest('table.multiselect');
+            var $rows  = $table.find('tr[href]'),
+                from, to;
+            var selected = $tr.first().get(0);
+            $rows.each(function(i, el) {
+                if ($(el).hasClass('active') || el === selected) {
+                    if (!from) {
+                        from = el;
+                    }
+                    to = el;
+                }
+            });
+            var inRange = false;
+            $rows.each(function(i, el){
+                if (el === from) {
+                    inRange = true;
+                }
+                if (inRange) {
+                    $(el).addClass('active');
+                }
+                if (el === to) {
+                    inRange = false;
+                }
+            });
+            return false;
+        },
+
         refreshDebug: function () {
 
             var size = this.getDefaultFontSize().toString();