register_modules/app/assets/javascripts/register_module.js

$.ajaxSetup({
  headers: {
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
  }
});
var RegisterModule = function(){

  var modal = $("#registerModule"),
      nextBtn = $("#nextFormBtn"),
      table = $("#index_table"),
      modalBody = $(".modal-body"),
      modalLabel = $("#myModalLabel"),
      progressBar = $("#form-progress-bar"),
      completeBtns = $(".complete_process"),
      registerNewBtn = $("#registerNewModuleBtn"),
      inlineForms = $("form.inline_forms"),
      unique_keys = [],
      step1 = $("#step1"),
      step1_form = $("#step1_form"),
      fv1 = new FormValidator(step1_form),
      step2 = $("#step2"),
      step2_form = $("#step2_form"),
      fv2 = new FormValidator(step2_form),
      step3 = $("#step3"),
      step3_form = $("#step3_form"),
      fv3 = new FormValidator(step3_form),
      step4 = $("#step4"),
      step4_form = $("#step4_form"),
      fv4 = new FormValidator(step4_form),
      button_label = ["Step2 >>", "Step3 >>", "Step4 >>", "Finish"],
      step_label = ["Step 1 - Register Module", "Step 2 - Provide your git url.", "Step 3 - Upload module template.", "Step 4 - Mark completed."],
      step_number = 1;

  fv1.validate_functions.uniquekey = function(value){
    return (unique_keys.indexOf(value) == -1 ? true : false);
  }

  fv3.validate_functions.zipfilecheck = function(value){
    var ext = value.split(".");
    return (ext[ext.length - 1] == "zip" ? true : false);
  }

  var initialize = function(){
    registerNewBtn.on("click",function(){
      getUniqueKeys();
      resetForm();
      modal.modal("show");
      return false;
    })

    bindCompleteBtns();

    nextBtn.on("click",function(){
      submitForm();
    })

    modal.on("hide",function(){
     reloadIndexTable();
    })
  }

  var getUniqueKeys = function(){
    $.ajax({
      "url" : "/admin/register_modules/modulekeys",
      "dataType" : "json",
      "type" : "get"
    }).done(function(keys){
      unique_keys = keys.keys;
    })
  }

  var reloadIndexTable = function(){
   $.ajax({
      "url" : "/admin/register_modules",
      "type" : "get",
      "dataType" : "html"
    }).done(function(data){
      table.html(data);
      completeBtns = $(".complete_process");
      bindCompleteBtns();
    })
  }

  var bindCompleteBtns = function(){
    completeBtns.on("click",function(){
      var rm_id = $(this).data("id"),
          rm_step_number = $(this).data("step");
      resetFormData();
      changeFormActions(rm_id);
      modal.modal("show");
      step_number = rm_step_number;
      changeStep();
    })
  }

  var changeFormActions = function(id){
    step2_form.attr("action","/admin/register_modules/" + id);
    step3_form.attr("action","/admin/register_modules/" + id);
    step4_form.attr("action","/admin/register_modules/" + id);
  }

  var submitForm = function(){
    switch(step_number){
      case 1:
        if(fv1.isFormValidated()){
          step1_form.ajaxSubmit({
            success : function(data){
              if(data.success){
               changeFormActions(data.id);
                step_number++;
                changeStep();
              }
            }
          });
        }
        break;
      case 2:
        if(fv2.isFormValidated()){
          step2_form.ajaxSubmit({
            success : function(data){
              if(data.success){
                step_number++;
                changeStep();
              }
            }
          })
        }
        break;
      case 3:
        if(fv3.isFormValidated()){
          step3_form.ajaxSubmit({
            success : function(data){
              if(data.success){
                step_number++;
                changeStep();
              }
            }
          })
        }
        break;
      case 4:
        if(fv4.isFormValidated()){
          step4_form.ajaxSubmit({
            success : function(data){
              if(data.success){
                step_number++;
                changeStep();
              }
            }
          })
        }
        break;
    }
  }

  var resetForm = function(){
    step_number = 1;
    resetFormData();
    changeStep();
  }

  var resetFormData = function(){
    step1_form.resetForm();
    step2_form.resetForm();
    step3_form.resetForm();
    step4_form.resetForm();
  }

  var changeStep = function(){
      $(".step").addClass("hide");
      modalLabel.text(step_label[step_number - 1]);
      nextBtn.text(button_label[step_number - 1]);
      switch(step_number){
        case 1:
          step1.removeClass("hide");
          progressBar.width("0%");
          break;
        case 2:
          step2.removeClass("hide");
          progressBar.width("25%");
          break;
        case 3:
          step3.removeClass("hide");
          progressBar.width("50%");
          break;
        case 4:
          step4.removeClass("hide")
          progressBar.width("75%");
          break;
        case 5:
          progressBar.width("100%");
          modal.modal("hide")
          break;
      }
  }

  $(document).ready(function(){
    initialize();
  })
}