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

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
<% end %>
<% content_for :page_specific_javascript do %>
<% end %>
<%#= f.error_messages %>
<fieldset>
<!-- Input Area -->
  <div class="input-area">

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

    <!-- Module -->
    <div class="tab-content module-area">
      <!-- Basic Module -->
      <div class="tab-pane fade in active" id="basic">
        <div class="control-group">
          <% copy_source = SiteConstruct.find(params[:copy_id]) rescue nil %>
          <% if copy_source %>
            <label class="control-label muted"><%= t("client_management.copy_source") %></label>
            <div class="controls">
              <a title="<%= copy_source.site_name %>" href="<%= copy_source.get_domain_name %>" style="font-weight: bold; font-size: 1.3em;"><%= copy_source.site_name %></a>
            </div>
            <%= f.hidden_field :copy_id, :value => params[:copy_id] %>
          <% end %>
        </div>
        <div class="control-group">
          <%= f.label :server_type ,"Server", :class => "control-label muted" %>
          <div class="controls">
            <%= f.select :server_type, SiteConstruct.server_types %>
          </div>
        </div>

        <div class="control-group">
          <%= f.label :root_domain ,"Root Domain", :class => "control-label muted" %>
          <div class="controls" id="root_domain_group">
            <div class="root_domain_group">
              <%= select_tag :root_domain, 
                    options_for_select(SiteServer.first.domain_names.collect{ |u| [u, u] }), 
                    :class => "root_domain" %>
            </div>
            <%= button_tag 'add root domain',:type => 'button', :id => 'add_root_domain',class: 'btn btn-info',:style => 'margin-top: 1em;' %>
          </div>
        </div>

        <div class="control-group">
          <%= f.label :site_type ,"Site Type", :class => "control-label muted" %>
          <div class="controls">
            <%= f.select :site_type, SiteConstruct::SITE_TYPES, :id => "site_type" %>
          </div>
        </div>

        <div class="control-group">
          <%= f.label :school_name ,"School Name", :class => "control-label muted" %>
          <div class="controls">
            <%= f.text_field :school_name, :id => "school_name", :placeholder => "XXXX" %>
            <div class="hint">Eg: NCTU</div>
          </div>
        </div>

        <div class="control-group">
          <%= f.label :site_name ,"Site Name", :class => "control-label muted" %>
          <div class="controls">
            <%= f.text_field :site_name, :id => "site_name", :placeholder => "xxx_xxx" %>
            <div class="hint">schoolname_deptname eg: nctu_eed</div>
          </div>
        </div>

        <div class="control-group">
          <%= f.label :domain_name ,"Domain Name", :class => "control-label muted" %>
          <div class="controls">
            <div class="domain_group">
              <input type="text" onchange="change_domain_input(this)">
              <span class="root_domain_text"><%= SiteServer.first.domain_names[0] %></span>
              <%= hidden_field_tag nil,nil, :class => "domain_name",:id=>nil %>
            </div>
            <%= f.hidden_field :domain_name %>
            <!--<div class="hint">schoolname-deptname.pending.rulingcom.com eg: nctu-eed.pending.rulingcom.com</div>-->
          </div>
        </div>

        <div class="control-group">
          <%= f.label :db_name ,"Database Name", :class => "control-label muted" %>
          <div class="controls">
            <%= f.text_field :db_name, :id => "db_name" %>
            <div class="hint">schoolname_deptname eg: nctu_eed</div>
          </div>
        </div>

        <div class="control-group">
          <%= f.label :port ,"Port Number", :class => "control-label muted" %>
          <div class="controls">
            <%= f.number_field :port, :min => 1, :id => "port", :value => 80 %>
          </div>
        </div>

        <div class="control-group">
          <%= f.label :path ,"Path", :class => "control-label muted" %>
          <div class="controls">
            <%= f.text_field :path, :disabled => true, :id => "path" %>
          </div>
        </div>
      </div>
    </div>
    <div class="form-actions">
      <%= f.submit t('submit'), class: 'btn btn-primary' %>
    </div>
  </div>
</fieldset>
<script type="text/javascript">
  var domain_name_relations = {};
  var pre_site_name = '';
  <% SiteServer.all.each do |server_server| %>
    domain_name_relations['<%= server_server.server_name %>'] = <%= server_server.domain_names.inspect.html_safe %>;
  <% end %>
  function unique(array) {
      return $.grep(array, function(el, index) {
          return index == $.inArray(el, array);
      });
  }
  function change_domain_name(index){
    if (index=='all'){
      for (var i=0;i<$('.domain_group').length;i++){
        change_domain_name(i)
      }
    }else{
      var $input = $('.domain_group').eq(index).find('input[type="text"]');
      var current_root_domain_text = $('.root_domain_group').eq(index).find('select').val()
      if ($input.val()==pre_site_name){
        $input.val($("#site_name").val().replace("_","-") + ".");
      }
      $('.domain_group').eq(index).find('input[type="hidden"]').val($('.domain_group').eq(index).find('input[type="text"]').val()+current_root_domain_text)
      $('.root_domain_text').eq(index).val(current_root_domain_text)
    }
  }
  $("#school_name").on("blur",function(){
    var school = $(this).val().toLowerCase();
    if($("#site_name").val() == ""){
      $("#site_name").val(school + "_");
    }
  })
  $("#site_construct_site_type").on("change",function(){
    var type = $(this).val();
    if(type == "School"){
      $("#school_name").parents(".control-group").show();
    }else{
      $("#school_name").parents(".control-group").hide();
      $("#school_name").val("");
    }
    var school = $("#school_name").val();
    type = (type == "School" ? "school_sites" : "orbit_sites" );
    if(school != ""){
      $("#path").val("/home/rulingcom/" + type + "/" + school);
    }else{
      $("#path").val("/home/rulingcom/" + type);
    }
  })
  function add_change_event_for_root_domain(){
    $(".root_domain").off('change')
    $(".root_domain").change(function(){
      change_domain_name($(this).index('.root_domain'));
    })
  }
  add_change_event_for_root_domain()
  $('#site_construct_server_type').change(function(){
    var domain_name = domain_name_relations[$(this).val()][0];
    var domain_names = domain_name_relations[$(this).val()];
    if ($(".root_domain").length>1){
      for (var i=1;i<$(".root_domain").length;i++){
        $(".root_domain").eq(i).remove()
      }
    }
    $(".root_domain").find('option').remove()
    $.each(domain_names,function(i,v){
      var o = new Option(v, v);
      /// jquerify the DOM object 'o' so we can use the html method
      $(o).html(v);
      $(".root_domain").eq(0).append(o);
    })
    if ($("#site_name").val()!=''){
      change_domain_name(0);
    }
    //$('#domain_name').siblings('.hint').html('schoolname-deptname.'+domain_name+' eg: nctu-eed.'+domain_name);
  })
  $("#site_name").on("blur",function(){
    var val = $(this).val(),
        type = $("#site_construct_site_type").val(),
        school = $("#school_name").val();

    //$('#domain_name').siblings('.hint').html('schoolname-deptname.'+domain_name+' eg: nctu-eed.'+domain_name);
    change_domain_name('all');
    pre_site_name = val.replace("_","-")+'.';
    $("#db_name").val(val);
    type = (type == "School" ? "school_sites" : "orbit_sites" );
    if(school != ""){
      $("#path").val("/home/rulingcom/" + type + "/" + school);
    }else{
      $("#path").val("/home/rulingcom/" + type);
    }
  })
  function change_domain_input(ele){
    change_domain_name($(ele).parents('.domain_group').index('.domain_group'))
  }
  $("#site_construct_site_type").val("School");
  function delete_domain(ele){
    $('.domain_group').eq($(ele).parents('.root_domain_group').index('.root_domain_group')).remove()
    $(ele).parents('.root_domain_group').remove()
  }
  $('#add_root_domain').click(function(){
    var first_domain_group = $('#root_domain_group .root_domain_group').first()
    var clone_domain_group = $(first_domain_group).clone()
    clone_domain_group.find('select').val(clone_domain_group.find('select option:first').val())
    clone_domain_group.append("<button class=\"btn btn-danger\" onclick=\"delete_domain(this)\">delete domain</button>")
    $('#root_domain_group .root_domain_group').last().after(clone_domain_group)
    var clone_input_group = $('.domain_group').last().clone()
    clone_input_group.find('input[type="text"]').val(pre_site_name)
    clone_input_group.find('input[type="hidden"]').val(pre_site_name+clone_domain_group.find('select').val())
    clone_input_group.find('.root_domain_text').val(clone_domain_group.find('select').val())
    $('.domain_group').last().after(clone_input_group)
    //add_change_event_for_root_domain()
  })
  $("form.main-forms").submit(function(){
    $("#domain_name").removeAttr('disabled');
    $("#path").removeAttr("disabled");
    var type = $("#site_construct_site_type").val();
    type = (type == "School" ? "school_sites" : "orbit_sites" );
    var school = $("#school_name").val();
    if(school != ""){
      $("#path").val("/home/rulingcom/" + type + "/" + school);
    }else{
      $("#path").val("/home/rulingcom/" + type);
    }
    $('#site_construct_domain_name').val(unique(
      $.map($('.domain_name'),function(v,i){
        return $(v).val()
      })
    ).join(' '))
    console.log($("#path").val());
  })
</script>