orbit4-5/app/views/admin/import/index.html.erb

<style type="text/css">
  .import-wrapper{
    padding: 10px;  
  }
  .import-wrapper .import-url{
    width: 565px;
  }
  .import-wrapper .btn{
    margin-bottom: 10px;
  }
  #import-container{
    width: 600px;
    margin: 0 auto;
  }
  #loading{
    margin: 20px 0;
    text-align: center;
    display:none;
  }
  #loading img{
    width: 50px;
  }
  #import-head{
    font-size: 18px;
    text-align: center;
    text-shadow: 1px 1px 1px #FFF;
    padding-bottom: 10px;
    margin-top: 100px;
  }
  #import-head i{
    font-size: 64px; 
  }
  #site-url-wrapper{
    height: 100px;
  }
  #import-modules{
    margin-top: 30px;
    text-align: center;
  }
  .module{
    text-align: center;
    width: 120px;
    display: inline-block;
    margin: 8px 5px;
    padding: 15px 0px;
  }
  .module i{
    font-size: 48px;
    border-radius: 10px;
    border: 1px solid #FFF;
    background: #888;
    cursor: pointer;
    padding: 15px 18px;
    box-shadow: 0 0 10px #555 inset;
    color: #FFF;
  }
  .module i:hover{
    background: #438CDB;
    box-shadow: none;
  }
  #import-modules .lead{
    margin-bottom: 0px;
    font-size: 12px;
  }
  .alert{
  }
  .module-icon{
    font-size: 64px;
    border-radius: 10px;
    padding: 15px 18px;
    color: #888;
  }
  #import-progress{
    border: 0px solid #CCC;
    text-align: center;
    width: 400px;
    margin: 100px auto 0 auto;
  }
  #import-progress .progress{
    margin-bottom: 0px;
  }
  #import-progress-text{
    font-size: 16px;
    line-height: 25px;
    color: #666;
    height: 50px;
    margin-bottom: 5px;
  }
</style>

<div id="import-container">
  <div id="import-head" class="muted">
    <i class='icon-cloud-download'></i><br/>
    Import RSS2
  </div>

  <div id="loading">
    <%= image_tag 'preloader.gif' %><br/>
    <span id="progress_msg"></span>
  </div>

  <div id="site-url-wrapper" class="import-wrapper">
    <input type="text" class="import-url" name="url" placeholder="http://www.rulingcom.com">
    <button id="check-site-url" class="btn btn-primary pull-right">Next <i class="icons-arrow-right"></i></button>
    <span><a href='http://installer.tp.rulingcom.com/rss2-export-api.zip'>Download Rss2 Export API</a></span>
  </div>

  <div id="import-modules" class="hide">
    <div id="member-module" class="module" onclick="importModule('member')">
      <div class="lead muted">
        <i class="icons-users"></i><br/>
        <%= t("member_") %>
      </div>
    </div>

    <div id="announcement-module" class="module" onclick="importModule('announcement')">
      <div class="lead muted">
        <i class="icons-megaphone"></i><br/>
        <%= t("announcement.announcement") %>
      </div>
    </div>

    <div id="archive-module" class="module" onclick="importModule('archive')">
      <div class="lead muted">
        <i class="icons-archive"></i><br/>
        <%= t("archive.archive") %>
      </div>
    </div>

    <div id="page-module" class="module" onclick="importModule('pages')">
      <div class="lead muted">
        <i class="icons-newspaper"></i><br/>
        <%= t("page_content.page") %>
      </div>
    </div>
  </div>

  <div id="import-progress" class="hide">
    <div class="head" style="border: 0px solid #CCC; margin: 5px; text-align: center;">
      <i class=""></i>
    </div>
    <div class="content" style="border: 0px solid #CCC; height: 100px; margin: 5px">
      <div class="progress">
        <div class="bar" style="width: 0%;"></div>
      </div>
      <div id="import-progress-text"></div>
      <button id="import-start-btn" class="btn btn-primary pull-right">Start</i></button>
      <button id="import-back-btn" class="btn pull-left">Back</i></button>
    </div>
  </div>

  <div class="alert alert-danger hide">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <span id="alert-msg"><%= @msg %></span>
  </div>
</div>
<script type="text/javascript">
  var url;
  var categories=null;
  var dataList=null;
  var module;
  var progress = 0;

  $(".import-url").keyup(function(e){
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code==13) { checkSiteUrl(); }
  });

  $("#check-site-url").click(function(){checkSiteUrl();});

  $("#import-start-btn").click(function(){
    switch(module){
      case "pages":
        importPages();
      break;
      default:
        getModuleCategories();
    }
  });
  $("#import-back-btn").click(function(){
    $("#import-progress").fadeOut(300,function(){
      $("#import-head").fadeIn(0);
      $("#import-modules").fadeIn(300);
    });
  });

  var importPages = function(){
    $("#import-progress .bar").css('width','0%');
    $.ajax({
      type: "post",
      dataType: "json",
      url: '<%= admin_import_rss2_pages_path %>',
      data : {"url" : url+'?module='+module}
    }).done(function(){
        startCheckingImportStatus();
        $("#import-progress-text").html("Importing Pages...<br/>");
    })
  }

  var startCheckingImportStatus = function(){
    $.ajax({
      type : "get",
      dataType : "json",
      url : "<%= admin_import_get_import_status_path %>" 
    }).done(function(status){
      if(status.success == true){
        if(status.total_pages != null){
          var percent = (status.current_status * 100) / status.total_pages;
           $("#import-progress .bar").css('width',percent + "%");
           $("#import-progress-text").html("Importing page " + status.current_page_name + " .. " + status.current_status + "/" + status.total_pages + "<br/>");
         }
         if(status.total_pages != status.current_status){
            setTimeout("startCheckingImportStatus()",700);
         }else{
          $("#import-progress-text").html("Finished importing pages.<br/>");
         }
      }else if(status.success == false){
        $("#import-progress-text").html("Importing failed, click on start to try again.");
        $("#alert-msg").text("Error importing page " + status.current_page_name + " ID : " + status.current_page)
        $(".alert-danger").removeClass("hide").show();
      }
    })
  }

  var importModule = function(m){
    module = m;
    dataList=null;
    categories=null;

    $('#import-progress i').attr('class', $('#'+m+'-module i').attr('class')+' module-icon');
    $("#import-progress .bar").css('width','0%');
    $("#import-progress-text").html("");

    $("#import-modules").fadeOut(300,function(){
      $("#import-head").fadeOut(0);
      $("#import-progress").fadeIn(300,function(){
      });
    });
  }

  var getModuleCategories= function(){
    $("#import-progress .bar").css('width','0%');
    $("#import-progress-text").html("Importing Categories<br/><br/>");

    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: '<%= admin_import_module_categories_path %>',
      data: {module: module, url: url+'?module='+module+'&type=categories'},
      success: function(data){
        $("#import-progress .bar").css('width','100%');
        $("#import-progress-text").html("Done<br/><br/>");
        categories = data;
        getModuleDataList();
      }
    });
  }

  var getModuleDataList = function(){
    $("#import-progress .bar").css('width','0%');

    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: '<%= admin_import_module_data_list_path %>',
      data: {module: module, url: url+'?module='+module+'&type=dataList'},
      success: function(data){
        dataList = data;
        importModuleDatas();
      }
    });
  }

  var importModuleDatas = function(){
    $("#import-progress .bar").css('width','0%');
    $("#import-progress-text").html("Start import...<br/><br/>");

    if(dataList!=null && categories!=null){
      $.each(dataList, function(key, val){
        $.ajax({
          type: 'GET',
          dataType: 'json',
          async: true,
          url: '<%= admin_import_module_data_path %>?&category='+categories[val]['id'],
          data: {module: module, url: url+'?module='+module+'&type=data&Sn='+key},
          success: function(data){
            progress++;
            percentage = parseInt((progress/Object.keys(dataList).length)*100)+'%';
            $("#import-progress .bar").css('width',percentage);
            $("#import-progress-text").html(progress+' / '+Object.keys(dataList).length+'<br/>'+percentage);
            if(percentage=="100%"){
              $("#import-progress").delay(1000).fadeOut(300,function(){
                $("#import-head").fadeIn(0);
                $("#import-modules").fadeIn(300);
              });
            }
          }
        });
      });
    }else{
      setTimeout("importModuleDatas()", 3000);
    }
  }

  var checkSiteUrl = function(){
    url = $(".import-url").val();
    url = (url[url.length-1]=='/') ? url+'export/' : url+'/export/';

    $(".alert").hide();
    
    if(/http[s]?:\/\/[a-zA-Z0-9.-\/]+/.test(url)){
      $("#site-url-wrapper").fadeOut(300, function(){
        $("#progress_msg").html("Checking connection...");
        $("#loading").fadeIn(0);
        $.getJSON('<%= admin_import_check_url_path %>', {url: url},function(data){
          $("#loading").fadeOut(function(){
            if(data['status']=="ok"){
              $("#import-head").animate({ marginTop: '0px' },{
                duration: 300,
                complete:  function() {
                  $("#import-modules").fadeIn(300);
                }
              });
            }else{
              $("#alert-msg").html(data['status']);
              $(".alert").fadeIn(300);
              $("#site-url-wrapper").fadeIn(300);
            }
          });
        });
      });
    }else{
      $("#alert-msg").html("Invalid URL");
      $(".alert").fadeIn(300).delay(2000).fadeOut(300);
    }
  }
</script>