terom@26: /* http://fgnass.github.com/spin.js/ */
terom@26: $.fn.spin = function(opts) {
terom@26:   this.each(function() {
terom@26:     var $this = $(this),
terom@26:         data = $this.data();
terom@26: 
terom@26:     if (data.spinner) {
terom@26:       data.spinner.stop();
terom@26:       delete data.spinner;
terom@26:     }
terom@26:     if (opts !== false) {
terom@26:       data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
terom@26:     }
terom@26:   });
terom@26:   return this;
terom@26: };
terom@26: 
terom@37: $.fn.disabled = function (disabled) {
terom@37:     if (disabled)
terom@26:         this.attr('disabled', 'disabled');
terom@26:     else
terom@26:         this.removeAttr('disabled');
terom@26: 
terom@26:     return this;
terom@26: };
terom@26: 
terom@26: var Timer = function (interval, cb) {
terom@26:     var handle = null;
terom@26: 
terom@26:     this.enable = function () {
terom@26:         if (handle) return;
terom@26: 
terom@26:         handle = window.setInterval(cb, interval);
terom@26:     };
terom@26: 
terom@26:     this.disable = function () {
terom@26:         if (!handle) return;
terom@26: 
terom@26:         window.clearInterval(handle);
terom@26:         handle = null;
terom@26:     };
terom@26: 
terom@26:     return this;
terom@26: };
terom@26: 
terom@26: function html (tag, params, html) {
terom@26:     return $("<" + tag + " />", $.extend({html: html}, params));
terom@26: };
terom@26: 
terom@25: function hosts_realtime (params) {
terom@25:     var t = params.t;
terom@26:     var refreshTimer = Timer(2 * 1000, refresh);
terom@26:     var animate = false; // true;
terom@25: 
terom@25:     function render_host (host) {
terom@29:         var columns = [
terom@26:             html("td", {}, 
terom@26:                 html("a", { href: params.host.replace('0', host.id) }, "#" )
terom@26:             ),
terom@29:         ];
terom@29: 
terom@29:         $.each(params.columns, function (i, name) {
terom@29:             column = html("td", { class: name }, host[name]);
terom@29: 
terom@29:             if (name == 'state')
terom@29:                 column.addClass(host['state_class']);
terom@29: 
terom@29:             columns.push(column);
terom@29:         });
terom@29: 
terom@29:         return html("tr", {id: host.id}, columns);
terom@25:     }
terom@25: 
terom@40:     // XXX: refresh > interval?
terom@25:     function refresh () {
terom@25:         console.log("refresh: " + t);
terom@26:         
terom@37:         var refresh = $('#refresh').disabled(true);
terom@26:         var spinner = $('#wrapper').spin();
terom@25: 
terom@30:         var url = params.url;
terom@30:         var query = $.param($.extend(params.filters, {t: t }), true);   // using traditional encoding for multi-values
terom@30: 
terom@30:         $.getJSON(url, query, function (data) {
terom@26:             var t1 = data.t;
terom@25:             var hosts = data.hosts;
terom@25: 
terom@26:             console.log("refresh: " + t + " -> " + t1 + ": " + hosts.length);
terom@25: 
terom@25:             $.each(hosts, function (i, host) {
terom@25:                 var item = $('#' + host.id);
terom@25: 
terom@26:                 if (item.length) {
terom@26:                     if (animate) item.slideUp();
terom@26:                 } else {
terom@26:                     item = render_host(host)
terom@26: 
terom@26:                     if (animate) item.hide();
terom@26:                 }
terom@25:                 
terom@25:                 // move to top
terom@26:                 item.prependTo($('#hosts tbody'));
terom@26: 
terom@26:                 if (animate)
terom@26:                     item.slideDown();
terom@28:                 else
terom@28:                     item.effect("highlight", {}, 'slow');
terom@25:             });
terom@26:             
terom@26:             // update
terom@26:             t = t1;
terom@26:         }).error(function () {
terom@26:             alert("Error :("); 
terom@26: 
terom@26:             // disable auto-refresh
terom@26:             refreshTimer.disable();
terom@26: 
terom@26:         }).complete(function () {
terom@26:             spinner.spin(false);
terom@37:             refresh.disabled(false);
terom@25:         });
terom@25:     }
terom@25: 
terom@25:     return function () {
terom@26:         // init
terom@26:         if (animate)
terom@26:             $("#hosts").css('display', 'block');
terom@26: 
terom@26:         $("#refresh").click(function () {
terom@26:             // in case diabled on error
terom@26:             refreshTimer.enable();
terom@26:             refresh();
terom@37:             $("#pause").disabled(false);
terom@37:         });
terom@37: 
terom@37:         $("#pause").click(function () {
terom@37:             console.log("pause");
terom@37:             refreshTimer.disable();
terom@37:             $("#pause").disabled(true);
terom@26:         });
terom@26:         
terom@26:         // start auto-refresh
terom@26:         refreshTimer.enable();
terom@25:     }
terom@25: }