change status drop-down to toggle checkbox buttons

alerta/api/v2/templates/index.html

@@ -75,11 +75,11 @@
             </td>
             <td>
                 <div align="right">
-                    <select id="status-select" class="btn" name="status" onchange="updateStatus(this.value)" style="width:150px">
+                    <div id="status-select" class="btn-group" data-toggle="buttons-checkbox">
-                        <option value="open">Open</option>
+                      <button type="button" class="status-select btn active" value="open">Open</button>
-                        <option value="ack">Ack</option>
+                      <button type="button" class="status-select btn" value="ack">Ack</button>
-                        <option value="closed">Closed</option>
+                      <button type="button" class="status-select btn" value="closed">Closed</button>
-                    </select>
+                    </div>
                     <select id="limit-select" class="btn" name="limit" onchange="updateLimit(this.value)" style="width:150px">
                         <option value="0">No limit</option>
                         <option value="10">Only 10</option>
@@ -312,6 +312,7 @@
     var api_port = {{ config['api_port'] }};
 </script>
 
+<script src="assets/bootstrap/js/bootstrap-button.js"></script>
 <script src="/alerta/dashboard/v2/assets/js/console.js"></script>
 
 {% block initialiser %}

dashboard/v2/assets/bootstrap/js/bootstrap-button.js

@@ -0,0 +1,105 @@
+/* ============================================================
+ * bootstrap-button.js v2.3.2
+ * http://twitter.github.com/bootstrap/javascript.html#buttons
+ * ============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* BUTTON PUBLIC CLASS DEFINITION
+  * ============================== */
+
+  var Button = function (element, options) {
+    this.$element = $(element)
+    this.options = $.extend({}, $.fn.button.defaults, options)
+  }
+
+  Button.prototype.setState = function (state) {
+    var d = 'disabled'
+      , $el = this.$element
+      , data = $el.data()
+      , val = $el.is('input') ? 'val' : 'html'
+
+    state = state + 'Text'
+    data.resetText || $el.data('resetText', $el[val]())
+
+    $el[val](data[state] || this.options[state])
+
+    // push to event loop to allow forms to submit
+    setTimeout(function () {
+      state == 'loadingText' ?
+        $el.addClass(d).attr(d, d) :
+        $el.removeClass(d).removeAttr(d)
+    }, 0)
+  }
+
+  Button.prototype.toggle = function () {
+    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')
+
+    $parent && $parent
+      .find('.active')
+      .removeClass('active')
+
+    this.$element.toggleClass('active')
+  }
+
+
+ /* BUTTON PLUGIN DEFINITION
+  * ======================== */
+
+  var old = $.fn.button
+
+  $.fn.button = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('button')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('button', (data = new Button(this, options)))
+      if (option == 'toggle') data.toggle()
+      else if (option) data.setState(option)
+    })
+  }
+
+  $.fn.button.defaults = {
+    loadingText: 'loading...'
+  }
+
+  $.fn.button.Constructor = Button
+
+
+ /* BUTTON NO CONFLICT
+  * ================== */
+
+  $.fn.button.noConflict = function () {
+    $.fn.button = old
+    return this
+  }
+
+
+ /* BUTTON DATA-API
+  * =============== */
+
+  $(document).on('click.button.data-api', '[data-toggle^=button]', function (e) {
+    var $btn = $(e.target)
+    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
+    $btn.button('toggle')
+  })
+
+}(window.jQuery);

dashboard/v2/assets/js/console.js

@@ -299,7 +299,7 @@ function updateAlertsTable(env_filter, asiFilters) {
         "aaSorting": [
             [0, 'asc'],
             [2, 'asc']
-        ],
+        ]
     });
 
     if (autoRefresh) {
@@ -498,6 +498,32 @@ $('.status-indicator-count').click(function () {
     Alerta.highlightStatusIndicator(statusIndicator);
 });
 
+var status_buttons = {
+    'open': true,
+    'ack': false,
+    'closed': false
+};
+
+$('body').on('click', '#status-select .btn', function() {
+        if ($(this).hasClass('active')) {
+            status_buttons[$(this).attr("value")] = false;
+        } else {
+            status_buttons[$(this).attr("value")] = true;
+        }
+
+    var status_array = [];
+    for (var key in status_buttons) {
+        if (status_buttons[key]) {
+            status_array.push('status=' + key);
+        }
+    }
+    status = '&' + status_array.join('&');
+
+    updateStatusCounts(gEnvFilter, false);
+    updateAllIndicators(gEnvFilter, lookup, false);
+    refreshAlerts(false);
+});
+
 function updateStatus(s) {
     status = '&status=' + s;
     updateStatusCounts(gEnvFilter, false);