nathan-v/resque-state

<%= status_view :state_styles, :layout => false %>

<h1 class='wi'>State <%= @status.uuid %></h1>
<p class='intro'>Viewing a specific job created with Resque::Plugins::State. <a href="<%= u(:statuses) %>">Return to the list of statuses</a></p>

<div class="status-holder" rel="<%= @status.status %>" id="status_<%= @status.uuid %>">
  <h2>Overview</h2>
  <div class="status-progress">
    <div class="status-progress-bar status-<%= @status.status %>" style="width: <%= @status.pct_complete %>%;"></div>
    <p><%= @status.pct_complete %>%</p>
  </div>
  <div class="status-message"><%= @status.message %></div>
  <div class="status-time"><%= @status.time? ? @status.time : 'Not started' %></div>

  <h2>Details</h2>
  <div class="status-details">
    <table class="vertically-top">
      <thead>
        <tr>
          <th>Key</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody class="status-details-body">
      </tbody>
    </table>
  </div>
</div>

<script type="text/javascript" charset="utf-8">
  jQuery(function($) {

    // itterate over the holders
    $('.status-holder').each(function() {
      checkStatus($(this));
    });

    function checkStatus($status) {
      var status_id = $status.attr('id').replace('status_', '');
      $.getJSON('<%= u(:statuses) %>/' + status_id + '.js', function(json) {
        if (json) {
          var pct = "0%";
          if (json.pct_complete) {
            var pct = json.pct_complete + "%";
          }
          $status.find('.status-progress-bar').animate({width: pct});
          $status.find('.status-progress p').text(pct)
          if (json.message) {
            $status.find('.status-message').html(json.message)
          }
          if (json.status) {
            $status
              .attr('rel', json.status)
              .find('.status-progress-bar')
                .attr('class', '')
                .addClass('status-progress-bar status-' + json.status);
          }
          if (json.time) {
            $status.find('.status-time').text(new Date(json.time * 1000).toString())
          }

          var $details = $status.find('.status-details-body');
          $details.empty();

          for (key in json) {
            var $row = $("<tr>").appendTo($details);
            $("<td>").text(key).appendTo($row);
            $("<td>").text(printValue(key, json[key])).appendTo($row);
          }
        };
        var status = $status.attr('rel');
        if (status == '<%= Resque::Plugins::State::STATUS_WORKING %>' || status == '<%= Resque::Plugins::State::STATUS_QUEUED %>' || status == "") {
          setTimeout(function() {
            checkStatus($status)
          }, 1500);
        }
      });
    };

    function printValue(key, value) {
      if (/(^|_)time$/.test(key) && typeof value == 'number') {
        var time = new Date();
        time.setTime(value * 1000);
        return time.toUTCString();
      } else {
        return JSON.stringify(value, null, " ");
      }
    }

  });
</script>