client_management/app/views/admin/site_panel/backup_setting.html.erb

<%= form_for @site_server, :url => {:action=>"update_backup_setting"}, :html => {:class => 'form-horizontal main-forms'} do |f| %>
<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
<% end %>
<% content_for :page_specific_javascript do %>
<% end %>
<style type="text/css">
  #info_texts{
    white-space: pre;
  }
</style>
<%#= f.error_messages %>
<fieldset>
  <h3><%= "#{f.object.server_name} (IP: #{f.object.ip}) " %></h3>
  <div>
    <% if f.object.need_rewrite_backup_setting %>
      <a href="javascript:void(0)" class="btn btn-success apply_change_backup_setting" data-id="<%=f.object.id%>"><%= t('client_management.apply_change') %></a>
      <hr>
    <% end %>
  </div>
  <!-- Input Area -->
  <div class="input-area">

    <!-- Module Tabs -->
    <div class="nav-name"><strong><%= t(:type) %></strong></div>
    <ul class="nav nav-pills module-nav">
        <li class="active">
          <a href="#file_backup" data-toggle="tab"><%= t("client_management.file_backup") %></a>
        </li>
        <li class="">
          <a href="#db_backup" data-toggle="tab"><%= t("client_management.db_backup") %></a>
        </li>
    </ul>

    <!-- Module -->
    <div class="tab-content module-area">
      <%= render :partial => "backup_form", :locals=>{:f=>f,:type=>"file_backup",:@active_class=>"in active"} %>
      <%= render :partial => "backup_form", :locals=>{:f=>f,:type=>"db_backup",:@active_class=>""} %>
    </div>
    <div class="form-actions">
      <%= f.submit t('submit'), class: 'btn btn-primary' %>
    </div>
  </div>
</fieldset>
<style type="text/css">
  .remove_btn{
    float: left;
    color: red;
    line-height: 2rem;
    cursor: pointer;
    font-weight: bold;
  }
  .remove_btn:hover{
    font-size: 1.3em;
  }
</style>
<script type="text/javascript">
  var close_info = false;
  var timeout_id;
  var status_relation = {"starting":"<span style=\"color: skyblue;\">starting</span>","execing":"<span style=\"color: skyblue;\">execing</span>","detecting":"<span style=\"color: skyblue;\">detecting</span>","error":"<span style=\"color: red;\">error</span>","finish": "<span style=\"color: darkseagreen;\">finish</span>","closed":"<span style=\"color: red;\">closed</span>"};
  var need_close_info = false;
  function see_infos(key){
    key = key || "";
    if(!close_info){
      var request = $.post("<%=admin_site_panel_edit_server_info_path%>",{"type":'see_infos',"key":key});
      request.done(function(data){
        var infos = request.responseJSON.infos;
        var status = request.responseJSON.status;
        if($("#info_texts").length == 0)
          return infos.join("\n")
        else{
          if(status == "")
            var status_text = "not yet create";
          else
            var status_text = status_relation[status];
          if(!status_text){
            status_text = "<span style=\"color: skyblue;\">"+status+"</span>";
          }
          $("#info_texts").html(status_text+"<div style='clear:both;'></div>"+infos.join("\n"));
          msg_end.scrollIntoView();
          if(need_close_info && status != 'execing'){
            close_info = true;
            window.setTimeout(function(){
              if(window.confirm("<%=t('client_management.finished_reload_page')%>")){
                window.location.reload();
              }
            },1000);
          }else{
            if(status == 'execing'){
              need_close_info = true;
            }
            timeout_id = window.setTimeout(see_infos(key),1000);
          }
        }
      })
    }else{
      window.clearTimeout(timeout_id);
    }
  };
  function show_infos_dialog(key){
      key = key || "";
      close_info = true;
      window.clearTimeout(timeout_id);
      close_info = false;
      if($("#dialog-confirm").length == 0){
        $("#main-wrap").before("<div id='dialog-confirm' title='site infos'>"+
                      "<div style='clear:both;'></div><div id='info_texts'>"+see_infos(key)+"</div><div id='msg_end' style='height:0px; overflow:hidden'></div>"+
                      "</div>");
      }else{
        see_infos(key);
      };
      $( "#dialog-confirm" ).dialog({
        resizable: true,
        minHeight: 100,
        maxHeight: 400,
        width: '80%',
        modal: true,
        open: function(){
          $(this).parent().css("top",$(document).height() - $(window).height() + "px");
        },
        close: function(){
          close_info = true;
          need_close_info = false;
        },
        buttons: {
          "<%= t('client_management.confirm') %>": function(){
            $( this ).dialog( "close" );
          },
          "stop update": function(){
            close_info = true;
          }
        }
      });
    }
  $(document).ready(function(){
    $('.apply_change_backup_setting').click(function(){
      var item = $(this);
      var item_id = item.attr("data-id");
      $.post("<%=admin_site_panel_edit_site_path%>",{'id': item_id,'type':'apply_change_backup_setting'}).done(function(){
        show_infos_dialog("change_backup_setting_" + item_id);
      });
    });
  })
</script>
<% end %>