seminar2/app/views/seminars/show.html.erb

<% 
  data = action_data 
  @seminar = data["seminar"]
  @seminar_signup = data["seminar_signup"]
  @time_now = data["time_now"]
  @form_index = 0
  if data["prefix_url"]
    prefix_url = data["prefix_url"]
  else
    prefix_url = OrbitHelper.url_to_show(@seminar.to_param)
  end
  registration_is_open = @seminar.registration_status.present?
  sign_up_not_yet = @seminar.signup_start_date && @time_now && @seminar.signup_start_date > @time_now
  sign_up_overdue = @seminar.signup_end_date && @time_now && (@seminar.signup_end_date + 1.day <= @time_now)
  signup_is_full = @seminar.signup_is_full?
%>
<style>
  .error {
    color: red;
  }
</style>
<% if !registration_is_open %>

<%= t('seminar.sign_up_not_open') %>

<% elsif sign_up_not_yet %>

<%= t('seminar.sign_up_not_yet') %>

<% elsif sign_up_overdue %>

<%= t('seminar.sign_up_overdue') %>

<% elsif signup_is_full %>

<%= t('seminar.sign_up_is_full') %>

<% else %>
  <%#= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "basic/bootstrap-datetimepicker" %>
  <%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
  <%= javascript_include_tag "lib/datetimepicker/date.time.picker.js" %>
  <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
<% notice = flash["notice"] || params[:notice] %>
<% flash.each do |key, msg| %>
  <% next if key.to_s == "notice" %>
  <%= content_tag :p, msg, :class => [key, "alert alert-error in fade"], :style => "color: red; font-weight: bold;" %>
<% end %>
<% if notice.present? %>
  <%= content_tag :p, params[:notice], :class => ["notice alert alert-error in fade"], :style => "color: red; font-weight: bold;" %>
  <script type="text/javascript">
    window.alert("<%=notice%>");
  </script>
<% end %>
<style type="text/css">
  .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    position: relative;
    margin: 0;
  }
</style>
<%= form_for @seminar_signup, url: (@seminar_signup.new_record? ? seminars_path : update_signup_form_seminars_path), html: {class: "content form-horizontal" , :id=>"new-seminar-signup", multipart: true} do |f| %>
  <fieldset>
    
      <!-- Title -->
      <div class="form-group">
        <label for="title" class="col-sm-2 control-label"><%#= t('seminar.title') %></label>
        <div class="col-sm-10">
          <h3><%= @seminar.title %></h3>
        </div>
      </div>
      <% if !@seminar.signup_note.blank? %>
        <div class="form-group">
          <label for="note" class="col-sm-2 control-label"><%= t('seminar.note') %></label>
          <div class="col-sm-10">
            <%= @seminar.signup_note.html_safe %>
          </div>
        </div>
      <% end %>
      <div>
        <div class="col-sm-12" style="text-align: center;"> *(<%= t('seminar.required') %>) </div>
      </div>
      <% if @seminar.seminar_signup_field_sets.count != 0 %>
        <% @seminar.seminar_signup_field_sets.each do |signup_field| %>
          <% if !(signup_field.disabled) && signup_field.field_name != 'recaptcha' && signup_field.field_name != 'password' %>
            <div class="form-group<%= (@seminar.registration_status[0] == 'G' && (signup_field.field_name == 'password' || signup_field.field_name == "status")) ? ' hide' : '' %>" id="<%= signup_field.field_name == 'password' ? 'registration_status' : '' %>">
              <label for="<%= signup_field['name'][I18n.locale] %>" class="col-sm-2 control-label">
                <% if !(['address','note'].include? signup_field.field_name) %>
                *
                <% end %>
                <%= signup_field['name'][I18n.locale] %>
              </label>
              <% if signup_field.field_name == 'status' %>
                <% status_translations = ['G','C'].map{|c| [c, t("seminar.registration_status_#{c}")] }.to_h %>
                <% status_translations = {'G'=>'No','C'=>'Yes'} if (signup_field.name.values.select{|v| v.include?('?') || v.include?('是否')}.count != 0 rescue false) %>
                <div class="col-sm-10">       
                  <% if @seminar.registration_status.include?('G') %>   
                  <label class="radio-inline">
                    <%= f.radio_button :status, 'G', :checked => true , :onclick => "$('#registration_status').addClass('hide');" %> <%= status_translations['G'] %>
                  </label>
                  <% end %>
                  <% if @seminar.registration_status.include?('C') %>  
                  <label class="radio-inline">
                    <%= f.radio_button :status, 'C', :onclick => "$('#registration_status').removeClass('hide');", :checked => (@seminar.registration_status.count == 1 and @seminar.registration_status.include?('C') ? true : false) %> <%= status_translations['C'] %>
                  </label>
                  <% end %>
                </div>
              <% elsif signup_field.field_name == 'unit' %>
                <div class="col-sm-10">
                  <%= f.text_field 'unit', :class=>"input-medium form-control", :value => (@seminar_signup.send("unit_translations")[locale] rescue nil), :placeholder=> "#{signup_field.placeholder[I18n.locale]}", :required => true %>
                </div>
              <% elsif signup_field.field_name == 'address' %>
                <div class="col-sm-10">
                  <div class="input-append">
                    <div class="tab-content">
                      <% @site_in_use_locales.each_with_index do |locale, i| %>
                      <div class="tab-pane fade <%= ( i == 0 ) ? "active in" : '' %>" id="address_<%= locale %>">
                        <%= f.fields_for "address_translations".to_sym do |f| %>
                          <%= f.text_field locale, :class=>"input-medium form-control", :value => (@seminar_signup.send("address_translations")[locale] rescue nil), :placeholder=> "#{signup_field.placeholder[I18n.locale]}" %>
                        <% end %>
                      </div>
                      <% end %>
                    </div>
                    <div class="btn-group" data-toggle="buttons-radio">
                      <% @site_in_use_locales.each_with_index do |locale, i| %>
                        <a class="btn <%= ( i == 0 ) ? "active" : '' %>" href="#address_<%= locale %>" data-toggle="tab"><%= t(locale.to_s) %></a>
                      <% end %>
                    </div>
                  </div>
                </div>
              <% elsif signup_field.field_name == 'email' %>
                <div class="col-sm-10">
                  <%= f.email_field :email, :class=>"input-medium form-control availibility", :placeholder=> signup_field.placeholder[I18n.locale], :required => true, :title => t("seminar_signup.email_check") %>
                  <div class="loader"></div>
                </div>
              <% elsif signup_field.field_name == 'password' %>
                <div class="col-sm-10">
                  <%= f.password_field :password, :class=>"input-medium form-control availibility",  :id=>signup_field['field_name'], :placeholder=> signup_field.placeholder[I18n.locale], :pattern => signup_field.validator, :title => t("seminar_signup.password_check")  %>
                </div>
              <% elsif signup_field.field_name == 'note' %>
                <div class="col-sm-10">
                  <div class="input-append">
                    <div class="tab-content">
                      <% @site_in_use_locales.each_with_index do |locale, i| %>
                      <div class="tab-pane fade <%= ( i == 0 ) ? "active in" : '' %>" id="note_<%= locale %>">
                        <%= f.fields_for "note_translations".to_sym do |f| %>
                          <%= f.text_area locale, rows: 5, :class=>"input-medium form-control", :value => (@seminar_signup.send("note_translations")[locale] rescue nil), :placeholder=> "#{signup_field.placeholder[I18n.locale]}" %>
                        <% end %>
                      </div>
                      <% end %>
                    </div>
                    <div class="btn-group" data-toggle="buttons-radio">
                      <% @site_in_use_locales.each_with_index do |locale, i| %>
                        <a class="btn <%= ( i == 0 ) ? "active" : '' %>" href="#note_<%= locale %>" data-toggle="tab"><%= t(locale.to_s) %></a>
                      <% end %>
                    </div>
                  </div>
                </div>
              <% elsif signup_field.field_name == 'tel' %>
                <div class="col-sm-10">
                  <%= f.text_field :tel, :class=>"input-medium form-control", :placeholder=> signup_field.placeholder[I18n.locale], :required => true, pattern: "[\\d\\+\\-\\(\\)]{10,13}", title: t("seminar.phone_hint") %>
                  <p>(<%= t("seminar.phone_hint") %>)</p>
                </div>
              <% else %>
                <div class="col-sm-10">
                  <%= f.text_field signup_field['field_name'], :class=>"input-medium form-control", :id=>signup_field['field_name'], :placeholder=> signup_field.placeholder[I18n.locale], :required => true %>
                </div>
              <% end %>
            </div>
          <% end %>
        <% end %>
      <% else %>
        <div class="form-group">
          <label for="status" class="col-sm-2 control-label"><%= t('seminar.registration_status') %></label>
          <div class="col-sm-10">       
            <% if @seminar.registration_status.include?('G') %>   
            <label class="radio-inline">
              <%= f.radio_button :status, 'G', :checked => true , :onclick => "$('#registration_status').addClass('hide');" %> <%= t('seminar.registration_status_G') %>
            </label>
            <% end %>
            <% if @seminar.registration_status.include?('C') %>  
            <label class="radio-inline">
              <%= f.radio_button :status, 'C', :onclick => "$('#registration_status').removeClass('hide');", :checked => (@seminar.registration_status.count == 1 and @seminar.registration_status.include?('C') ? true : false) %> <%= t('seminar.registration_status_C') %>
            </label>
            <% end %>
          </div>
        </div>
      
        <!-- Name to Last Name -->
        <div class="form-group">
          <label for="name" class="col-sm-2 control-label">*<%= t('seminar_signup.name') %></label>
          <div class="col-sm-10">
            <%= f.text_field :name, :class=>"input-medium form-control", :id=>'name', :placeholder=> t('seminar_signup.name'), :required => true %>
          </div>
        </div>
      
        <!-- Tel to First Name -->
        <div class="form-group">
          <label for="tel" class="col-sm-2 control-label">*<%= t('seminar_signup.tel') %></label>
          <div class="col-sm-10">
            <%= f.text_field :tel, :class=>"input-medium form-control", :placeholder=> t('seminar_signup.tel'), :required => true, pattern: "[\\d\\+\\-\\(\\)]+" %>
          </div>
        </div>
      
        <!-- Email -->
        <div class="form-group">
          <label for="email" class="col-sm-2 control-label">*<%= t(:email) %></label>
          <div class="col-sm-10">
            <%= f.email_field :email, :class=>"input-medium form-control availibility", :placeholder=> t(:email), :required => true %>
          </div>
        </div>
      
        <div class="form-group <%= @seminar.registration_status[0] == 'C' ? '' : 'hide' %>" id="registration_status">
          <label for="password" class="col-sm-2 control-label">*<%= t('seminar_signup.password') %></label>
          <div class="col-sm-10">
            <%= f.text_field :password, :class=>"input-medium form-control", :placeholder=> t('seminar_signup.password') %>
            <%= t('seminar_signup.password_message') %>
          </div>
        </div>

      <% end %>
      <% 
        group = 1 
        counter = 0
      %>
      
      <% @seminar.seminar_signup_fields.where(:disabled=>false).asc(:sort_number, :_id).each_with_index  do |rf, idx| %>
        <% if(idx == 5) %>
          <div id="optional">
        <% end %>
        <% if(idx % 5 == 0) && idx != 0 %>
          <% group += 1 %>
          <% if @seminar_signup.seminar_signup_values[@form_index] && !@seminar_signup.seminar_signup_values[@form_index].value.blank? %>
          <div id="group<%= group %>">
          <% else %>
          <div id="group<%= group %>" style="display:none;">
          <% end %>
        <% end %>
        <% counter += 1 %>
        <div class="form-group">

         <%= rf.block_helper(@seminar,@form_index,false,"seminar_signup",@seminar_signup, rf.to_require) %>

        </div>
        <% if(counter % 5 == 0) && idx != 4 %>
          <% counter = 0 %>
          </div>
        <% end %>
        <% if(idx == 25) %>
          <div id="optional">
        <% end %>
        <% @form_index = @form_index +1 %>

      <% end %>
      </div>
      <div class="form-group" style="text-align:center;margin:10px 0;">
        <button id="add-member" class="btn btn-primary" style="display:inline; width: 150px;position: relative;float: left;"><%= t("seminar_signup.add_member") %></button>
        <button id="remove-member" class="btn btn-primary" style="display:inline;position: relative;float: right; background:red; border-color:red;display: none;"><%= t("seminar_signup.remove_member") %></button>
      </div>
      
      <!-- 驗證碼 -->
      <% if @seminar.seminar_signup_field_sets.count != 0 && @seminar_signup.new_record? %>
        <% if !(@seminar.seminar_signup_field_sets.select{|v| v.field_name=='recaptcha'}[0].disabled) %>
          <div class="form-group">
            <label for="note" class="col-sm-2 control-label"><%= t('seminar_signup.recaptcha') %></label>
            <div class="col-sm-10">
              <%= gotcha_error %>
              <%= gotcha %>
            </div>
          </div>
        <% end %>
      <% end %>

    <!--   <div class="form-group">
        <label for="note" class="col-sm-2 control-label"><%#= t('nkuht_donate.recaptcha') %></label>
        <div class="col-sm-10">
          <%#= show_simple_captcha  %>
        </div>
      </div> -->
    
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        <label>
          <input id="agree" name="agree" value="1" type="checkbox" required="required" <% if !@seminar_signup.new_record? %>checked="checked"<%end%>>
          <a href="<%= prefix_url %>?method=show_privacy" target="_blank" style="color: black;"><%= t("seminar_signup.agree")%></a>
        </label>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <input type="hidden" name="referer_url" value="<%= request.original_url.split(request.env["HTTP_HOST"]).last rescue "/" %>">
          <input type="hidden" name="seminar_signup[seminar_main_id]" value="<%= @seminar.id %>">
          <% if !@seminar_signup.new_record? %>
            <input type="hidden" name="signup_id" value="<%= @seminar_signup.id %>">
          <% end %>
          <%= f.submit "Submit", class: 'btn btn-primary', :id => 'button-mail' %>
          <%= f.button "Delete", type: 'reset', class: 'btn' %>
        </div>
      </div>

  </fieldset>
<% end %>


<script type="text/javascript">
(function(){
  function check_repeat_value(event) {
    var validated = true;
    var all_values = $.map($('input[name^="seminar_signup_values"]:visible'), function(v) {
      return [[v, $(v).val()]];
    }).filter(function(v){
      return v[1] != ''
    });
    var values = [];
    for (var i=0;i< all_values.length;i++){
      if (values.includes(all_values[i][1])){
        all_values[i][0].setCustomValidity("<%= t('seminar.repeat_hint') %>");
        all_values[i][0].focus();
        $(all_values[i][0]).parents('form')[0].reportValidity();
        validated = false;
        $(all_values[i][0]).one('keyup change', function(){
          this.setCustomValidity("");
        });
        break;
      }
      values.push(all_values[i][1]);
    }
    return validated;
  }
  function uploadSubmit(form){
    $.ajax({
      type: 'post',
      method: 'post',
      async: false,
      contentType: false,
      processData: false,
      dataType: "script",
      url: $(form).attr('action'),
      data: new FormData(form)
    });
  }
  $(".rucaptcha-image").siblings("input[type=\"text\"]").attr("placeholder","Verification");
  var validated = false,
      chks = false,
      pwd = $('#seminar_signup_password')
  $('input[type=submit]').on('click', function(){
    var form = $(this).parents('form')[0];
    if (form){
      window.setTimeout(function(){        
        form.reportValidity();
      }, 500);
    }
  });
  $("form.content").submit(function(event) {
    if (!check_repeat_value(event)){
      return false;
    }
    if ($('*[name^="seminar_signup_values"]:visible')){
      $('input[name^="seminar_signup_values"]:visible').map(function(k, v) {
          return $(v).val();
      });
    }
     

    if ($('#seminar_signup_status_c:checked').val() == 'C'){
      if (pwd.val() == ''){
        pwd.attr('required', true);
        pwd.focus();
        alert( '<%= t('seminar_signup.password') %>' + ' is required');
        return false;
      }
    }

    <% 
      @seminar.seminar_signup_fields.where(:disabled=>false).asc(:sort_number, :_id).each  do |rf| 

        if rf.markup == 'checkbox'
    %>

      var checkedCount = $("input[type=checkbox][id^=seminar_signup_values_<%= rf.id %>]:checked").length;
      if (checkedCount == 0){
        alert( '<%= rf.title %>' + ' is required');
        return false;
      }

    <% 
        end 

      end 
    %>

    var form = $(this),
        isChecked = $('#agree:checked').val()?true:false;

    if(!isChecked){
      return false;
    }

    uploadSubmit(this);
    return false;

  });

  $('input[type="email"]').blur(function(){
    var type = $(this).attr("id"),
      loader = $(this).parent().find('.loader'),
      elem = $(this),
      value = $(this).val() || null;
    var checkAvailability = function(){
      $.ajax({
        url : "<%= "/xhr/seminars/check_email/#{@seminar.id}" %>",
        data : {"type" : type, "email" : value},
        dataType : "json",
        type : "get",
        success : function(data){
          if( data.success == true ){
            loader.removeClass("error");
          }else{
            loader.addClass("error");  
          }
          loader.text(data.result);
        }
      });
    };
    if( value ){
      if (!this.checkValidity()){
        loader.addClass("error");
        loader.text("<%= t("seminar.email_hint") %>");
        return;
      }else{
        loader.removeClass("error");
        loader.text("");
      }
      if(type == "seminar_signup_email"){
        loader.text("Checking...")
        checkAvailability();
      }
    }
  });
  $(".upload").on("change",function(){
    let filenamedom = $(this).parent().parent().find(".filename");
    let filenameA = $(this).val().split('\\');
    filenamedom.text(filenameA[filenameA.length - 1]);
  })

  $("#optional label").each(function(){
    if($(this).hasClass("control-label")){
      $(this).text("*" + $(this).text());
    }
  })

  // $("#seminar_signup_values_3_value").removeAttr("placeholder");

  let currentGroup = 1 + $("#new-seminar-signup div[id^=group]:visible").length;
  function showGroup($group){
    $group.show();
    $group.find('.fake-clean-file').remove();
    $group.find('input,textarea').attr("required", true);
  }

  function hideGroup($group){
    $group.hide();
    $group.find("input[type!=hidden], textarea").val("");
    $.each($group.find("input[type=file]"), function(k, v) {
      $(v).after("<input class=\"fake-clean-file\" type=\"hidden\" name=\""+$(v).attr('name')+"\" value=\"\">");
    });
    $group.find('input,textarea').attr("required", false);
  }

  if (currentGroup > 1){
    $("#remove-member").show();
    for (var i = 1; i < currentGroup; i++){
      showGroup($("#group" + i));
    }
  }

  $("#add-member").on("click",function () {
    if(currentGroup < 5){
      $("#remove-member").show();
      currentGroup++;
      if(currentGroup == 5){
        $(this).hide();
      }
    }
    showGroup($("#group" + currentGroup));
    return false;
  })
  $("#remove-member").on("click",function () {
    $("#add-member").show();
    if(currentGroup > 0){
      hideGroup($("#group" + currentGroup));
      currentGroup--;
      if(currentGroup == 1){
        $(this).hide();
      }
    }
    return false;
  })

})();
</script>

<% end %>