registered-sites/app/views/admin/registered_sites/bundle_update_remote_show.erb

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<% if !BundleUpdateTemp.first.nil? %>
  <% tp = BundleUpdateTemp.first %>
  全部:
  <%= tp.all_ids.count %>
  目前:
  <% now_index = tp.all_ids.index(tp.now_id) %>
  <% if tp.now_id=='finish' 
       now_index = tp.all_ids.count - 1
     end
    %>
  <%= now_index.nil? ? "unprocess" : now_index+1 %>
  <br>
  失敗(僅確認可登入):
  <%= now_index.nil? ? 0 : RegisteredSite.where(:id.in => Array(tp.all_ids[0..now_index])).select{|v| (v.site_statuses.first.can_login rescue true) && v.bundle_update_logs.first.status=='failed'}.collect{|v| "<a href=\"http://#{v.site_domain}\">#{v.show_name}</a> :#{v.bundle_update_logs.first.last_message}"}.join('<br>').html_safe %>
<% end %>
<%=  render_filter @filter_fields, "index_table" %>
<button onclick="bundle_update('select')">
  <%= t("registered_sites.update_select") %>
</button>
<button onclick="bundle_update('all')">
  update all
</button>
<input type="checkbox" id='select_behind'>
  select all behind
<button onclick="stop_bundle_update()">
  <%= t("registered_sites.stop_bundle_update") %>
</button>
<button onclick="destroy_bundle_temp()">
  <%= t("registered_sites.destroy_bundle_temp") %>
</button>
<button onclick="check_all_site()">
  check all site
</button>
<button onclick="check_log()">
  check log
</button>
<input type="radio" name="show_opt" value="show_all"> 
show_all
<input type="radio" name="show_opt" value="show_ok_only">
ok only
<input type="radio" name="show_opt" value="show_fail_only">
fail only
<div id="status"></div>
<div id="detail_div" class="show_ok show_fail">  
</div>
<style type="text/css">
  tr.idle td {
    background: #f8f5a4;
  }
  td {
    font-weight: bold;
  }
  #status{
    font-size: 2em;
    margin-bottom: 0.3em;
  }
  #detail_div{
    overflow: auto;
    max-height:500px;
  }
  .can_login, .can_not_login{
    display: none;
  }
  .can_login{
    color: #468847;
  }
  .can_not_login{
    color: #fe0a07; 
  }
  .show_ok .can_login{
    display: block;
  }
  .show_fail .can_not_login{
    display: block;
  }
  .is_hidden > td {
    background: #979797;
  }
  <%# 'success'=> green, 'error' => 'red' %>
</style>
<script type="text/javascript">
  var item_id1
  var see_flag = true
  $.fn.get_select_ids = function(){
    var ids = $.map(this,function(item, index) {
      return $(item).attr('id');
    });
    return ids;
  }
  function check_site(item_id){
    alert("checking")
    $.ajax({
      url : "<%= check_site_admin_registered_sites_path %>",
      dataType : "text",
      data: {item_id: item_id},
      type : "post",
      error: function(){
        alert('init upload process failed, please try again later.')
      },
      success: function(data){
        alert(data)
      }
    })
  }
  function destroy_bundle_temp(){
    $.ajax({
      url : "<%= destroy_bundle_temp_admin_registered_sites_path %>",
      dataType : "text",
      type : "post",
      error: function(){
        alert('init upload process failed, please try again later.')
      },
      success: function(data){
        console.log(data)
      }
    })
  }
  function check_log(){
    see_flag = true
    $("#detail_div").dialog("open");
    get_check_log('all')
  }
  function get_check_log(item){
    $.ajax({
      url : "<%= get_check_log_admin_registered_sites_path %>",
      dataType : "json",
      data: {data: item},
      type : "post",
      error: function(){
        alert('init upload process failed, please try again later.')
      },
      success: function(data){
        var html_data = $('#detail_div').html()
        var class_item;
        var now_id = data['now_id'];
        $(data['item']).each(function(i,v){
          if (v['can_login']){
            class_item = 'can_login'
          }
          else{
            class_item = 'can_not_login'
          }
          now_id = v['id']
          html_data = html_data + "<div class='"+class_item+"'><a target='_blank' href='" +v['href']+"'>"+v['site_name']+"</a>:<span>"+v['status']+"</span></div>"
        })
        $('#detail_div').html(html_data)
        if (data['status']!='finish' && see_flag){
          window.setTimeout(function(){get_check_log(now_id)},1000)
        }
      }
    })
  }
  function check_all_site(){
    $.ajax({
      url : "<%= check_all_site_admin_registered_sites_path %>",
      dataType : "text",
      type : "post",
      error: function(){
        alert('init upload process failed, please try again later.')
      },
      success: function(){
        alert('start to check')
      }
    })
  }
  function stop_bundle_update(){
    $.ajax({
      url : "<%= stop_bundle_update_admin_registered_sites_path %>",
      dataType : "text",
      type : "post",
      data: {item_ids: item_id1},
      error: function(){
        alert('init upload process failed, please try again later.')
      }
    })
  }
  function bundle_update(item_id){
    if (item_id=='select'){
      item_id1 = $('tr.idle').get_select_ids()
    }else{
      $('tr#'+item_id).addClass('idle')
      item_id1 = Array(item_id)
    }
    $.ajax({
      url : "<%= bundle_update_admin_registered_sites_path %>",
      dataType : "json",
      type : "post",
      data: {item_ids: item_id1},
      error: function(){
        alert('init upload process failed, please try again later.')
      },
      success: function(data){
        if (item_id != 'all'){
          if (data['status']=='success'){
            window.setTimeout(function(){get_message(item_id1)},100)
          }
          else{
            alert('there may be still a process proccessing,please try again later')
          }
        }else{
          alert("the update information can only update at refresh the page")
        }
      }
    })
  }
  $.fn.change_item = function(item){
    $(this).find('.last_message').html(item['last_message'])
    $(this).find('.status').text(item['status'])
    $(this).attr('class','')
    if (item['status']=='failed'){
      $(this).addClass('error')
    }else if (item['status']=='finish'){
      $(this).addClass('success')
    }else{
      $(this).addClass('idle')
    }
    $(this).find('.last_time').text(item['last_time'])
  }
  function get_detail(item_id){
    $.ajax({
      url : "<%= get_detail_admin_registered_sites_path %>",
      dataType : "text",
      type : "post",
      data: {item_id: item_id},
      error: function(data){
        console.log(data)
        alert('init upload process failed, please try again later.')
      },
      success: function(data){
        $('#detail_div').html(data)
        $("#detail_div").dialog("open");
      }
    })
  }
  function get_message(item_id){
    $.ajax({
      url : "<%= get_message_admin_registered_sites_path %>",
      dataType : "json",
      type : "post",
      data: {item_ids: item_id},
      error: function(){
        alert('get status failed, please try again later.')
      },
      success: function(data){
        console.log(data)
        $('#status').text(data['status'])
        if (data['status']=='terminated' || data['status']=='not found'){
          $('#status').css('color','#fe0a07')
          if (data['status']=='terminated'){
            alert('terminated by user')
          }
          else{
            var item = data['item']
            var tr_tag = $('tr#'+item['item_id'])
            tr_tag.removeClass('idle')
            tr_tag.addClass('error')
            tr_tag.change_item(item)
            window.setTimeout(function(){get_message(item_id1)},1000)
          }
        }
        else if (data['status']=='finish'){
          var item = data['item']
          var tr_tag = $('tr#'+item['item_id'])
          tr_tag.removeClass('idle')
          tr_tag.addClass('success')
          tr_tag.change_item(item)
          $('#status').css('color','#468847')
        }
        else{
          if (data['status']=='running'){
            var item = data['item']
            var tr_tag = $('tr#'+item['item_id'])
            tr_tag.change_item(item)
            $('#status').css('color','#468847')
          }else{
            $('#status').css('color','#b5b15d')
          }
          window.setTimeout(function(){get_message(item_id1)},1000)
        }
      }
    })
  }
  $('div#index_table').ready(function(){
    $('.checkbox_site').click(function(){
      if ($('#select_behind').prop('checked')){
        var click_index = $(this).index('.checkbox_site')
        for (var i=click_index+1;i<$('.checkbox_site').length;i++){
          $('.checkbox_site').eq(i).prop('checked',true)
          $('.checkbox_site').eq(i).trigger('change')
        }
      }
    })
    $("#detail_div").dialog({
        autoOpen: false,
        modal: true,
        show: "blind",
        hide: "explode",
        maxHeight: 500,
        width: '50em',
        close:function(){
          see_flag = false
        },
        buttons: {
          Ok: function() {
            $( this ).dialog( "close" );
          }
        }
    });
    $('input[name=show_opt]').change(function(){
      var val = $(this).val()
      if (val=='show_all'){
        $('#detail_div').attr('class','show_ok show_fail')
      }else if (val=='show_ok_only'){
        $('#detail_div').attr('class','show_ok')
      }else{
        $('#detail_div').attr('class','show_fail')
      }
    })
    $('th.s0 > input[type=checkbox]').change(function(){
      if ($(this).prop('checked')){
        $('td.s0 > input[type=checkbox]').prop('checked',true)
        $('td.s0 > input[type=checkbox]').parents('tr').addClass('idle')
      }
      else{
        $('td.s0 > input[type=checkbox]').prop('checked',false)
        $('td.s0 > input[type=checkbox]').parents('tr').removeClass('idle')
      }    
    })
    $('td.s0 > input[type=checkbox]').change(function(){
      if ($(this).prop('checked'))
        $(this).parents('tr').addClass('idle')
      else
        $(this).parents('tr').removeClass('idle')
    })
  })

  
</script>
<div id="index_table">
  <%= render 'bundle_update_remote_show'%>
</div>