1

/* http://fgnass.github.com/spin.js/ */

     2

$.fn.spin = function(opts) {

     3

  this.each(function() {

     4

    var $this = $(this),

     5

        data = $this.data();

     6

     7

    if (data.spinner) {

     8

      data.spinner.stop();

     9

      delete data.spinner;

    10

    }

    11

    if (opts !== false) {

    12

      data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);

    13

    }

    14

  });

    15

  return this;

    16

};

    17

    18

$.fn.disabled = function (disabled) {

    19

    if (disabled)

    20

        this.attr('disabled', 'disabled');

    21

    else

    22

        this.removeAttr('disabled');

    23

    24

    return this;

    25

};

    26

    27

var Timer = function (interval, cb) {

    28

    var handle = null;

    29

    30

    this.enable = function () {

    31

        if (handle) return;

    32

    33

        handle = window.setInterval(cb, interval);

    34

    };

    35

    36

    this.disable = function () {

    37

        if (!handle) return;

    38

    39

        window.clearInterval(handle);

    40

        handle = null;

    41

    };

    42

    43

    return this;

    44

};

    45

    46

function html (tag, params, html) {

    47

    return $("<" + tag + " />", $.extend({html: html}, params));

    48

};

    49

    50

function hosts_realtime (params) {

    51

    var t = params.t;

    52

    var refreshTimer = Timer(2 * 1000, refresh);

    53

    var animate = false; // true;

    54

    55

    function render_host (host) {

    56

        var columns = [

    57

            html("td", {}, 

    58

                html("a", { href: params.host.replace('0', host.id) }, "#" )

    59

            ),

    60

        ];

    61

    62

        $.each(params.columns, function (i, name) {

    63

            column = html("td", { class: name }, host[name]);

    64

    65

            if (name == 'state')

    66

                column.addClass(host['state_class']);

    67

    68

            columns.push(column);

    69

        });

    70

    71

        return html("tr", {id: host.id}, columns);

    72

    }

    73

    74

    // XXX: refresh > interval?

    75

    function refresh () {

    76

        console.log("refresh: " + t);

    77

    78

        var refresh = $('#refresh').disabled(true);

    79

        var spinner = $('#wrapper').spin();

    80

    81

        var url = params.url;

    82

        var query = $.param($.extend(params.filters, {t: t }), true);   // using traditional encoding for multi-values

    83

    84

        $.getJSON(url, query, function (data) {

    85

            var t1 = data.t;

    86

            var hosts = data.hosts;

    87

    88

            console.log("refresh: " + t + " -> " + t1 + ": " + hosts.length);

    89

    90

            $.each(hosts, function (i, host) {

    91

                var item = $('#' + host.id);

    92

    93

                if (item.length) {

    94

                    if (animate) item.slideUp();

    95

                } else {

    96

                    item = render_host(host)

    97

    98

                    if (animate) item.hide();

    99

                }

   100

   101

                // move to top

   102

                item.prependTo($('#hosts tbody'));

   103

   104

                if (animate)

   105

                    item.slideDown();

   106

                else

   107

                    item.effect("highlight", {}, 'slow');

   108

            });

   109

   110

            // update

   111

            t = t1;

   112

        }).error(function () {

   113

            alert("Error :("); 

   114

   115

            // disable auto-refresh

   116

            refreshTimer.disable();

   117

   118

        }).complete(function () {

   119

            spinner.spin(false);

   120

            refresh.disabled(false);

   121

        });

   122

    }

   123

   124

    return function () {

   125

        // init

   126

        if (animate)

   127

            $("#hosts").css('display', 'block');

   128

   129

        $("#refresh").click(function () {

   130

            // in case diabled on error

   131

            refreshTimer.enable();

   132

            refresh();

   133

            $("#pause").disabled(false);

   134

        });

   135

   136

        $("#pause").click(function () {

   137

            console.log("pause");

   138

            refreshTimer.disable();

   139

            $("#pause").disabled(true);

   140

        });

   141

   142

        // start auto-refresh

   143

        refreshTimer.enable();

   144

    }

   145

}