seminar2/app/views/admin/seminars/_seminar_signup_dashboard.html.erb

<h3 class="pull-left"><%= @seminar.title %></h3>
<div style="clear: both;"></div>
<% org_seminar_signups = @seminar_signups %>
<div style="float: left;width: 50%;" class="left_block">
  <h4><%= t("seminar.reviewer") %></h4>
  <% reviewer_show_ids = @seminar.reviewer_show_ids %>
  <% if reviewer_show_ids.nil?
      reviewer_show_ids = @seminar.reviewer_ids[0..1] 
      @seminar.update(:reviewer_show_ids=>reviewer_show_ids)
    end
  %>
  <% count = 0 %>
  <% reviewer_show_ids.each do |reviewer_id| %>
    <% seminar_review = @seminar.seminar_reviews.where(:reviewer_id => reviewer_id.to_s).first %>
    <% next if seminar_review.nil? %>
    <% count += 1 %>
    <div class="reviewer_block" data-id="<%=seminar_review.id.to_s%>" data-count="<%=count%>">
      <h5><%= MemberProfile.find(reviewer_id).name rescue "" %></h5>
      <span class="zoom_out_btn">-</span>
      <% @seminar_signups = SeminarSignup.where(:id.in=>seminar_review.get_all_seminar_signup_ids).sort_ordered %>
      <% @seminar_signups = @seminar_signups.page(params["page_no#{count}"]).per(5) %>
      <% @seminar_signups = @seminar_signups.page(0) if @seminar_signups.to_a.count == 0 %>
      <%= render :partial => "seminar_signup_render_table",:locals=>{:@seminar_signups=>@seminar_signups,:@drag => true,:@include_blank=>true,:@reviewer_id=>seminar_review.id.to_s} %>
      <%
        pagination_html = content_tag :div, class: "bottomnav clearfix", style: "position: static;" do
          content_tag :div, paginate(@seminar_signups), class: "pagination pagination-centered"
        end
      %>
      <%= pagination_html.gsub(/page_no#{count}=\d*/,"").gsub('&&','&').gsub(/page=(\d*)/m){|ff| ff.gsub("page=#{$1}","page=#{params[:page]}&page_no#{count}=#{$1}")}.html_safe %>
    </div>
  <% end %>
  <% if count != 2 && @seminar.seminar_reviews.count >= 2 %>
    <% (0...(2-count)).each do |i| %>
      <div class="blank_block reviewer_block">
        <i class="fa fa-plus-circle add_btn"></i>
      </div>
    <% end %>
  <% end %>
</div>
<% @seminar_signups = org_seminar_signups
  @include_blank = false 
  @reviewer_id = nil
%>
<div style="float: right;width: 50%;" data-count="<%=count+=1%>">
<div id="main-table" style="overflow: scroll;">
  <h5><%= t('seminar.submitter_without_reviewer') %></h5>
  <%= render :partial => "seminar_signup_render_table" %>
</div>
<%=
  content_tag :div, class: "bottomnav clearfix", style: "position: static;" do
    content_tag :div, paginate(@seminar_signups), class: "pagination pagination-centered"
  end
%>
</div>
<% unless request.xhr? %>
    <div id='dialog-confirm' title="<%= t("seminar.select_reviewer") %>" style="display: none;">
      <div style="clear:both;"></div>
      <div id="info_texts">
          
      </div>
    </div>
    <div class="bottomnav clearfix">
        <div class="action pull-right">
            <%= link_to content_tag(:i, nil, :class => 'icon-cog icon-white') + t("seminar.field_display_setting"), seminar_signup_admin_setting_admin_seminar_path(params[:id]), :class => 'btn btn-primary' %>
        </div>
    </div>
    <script type="text/javascript">
      function add_obj(obj1,obj2){
        var keys = Object.keys(obj1);
        var obj = {};
        keys.forEach(function(k){
          obj[k] = obj1[k] + obj2[k];
        });
        return obj;
      }
      function generate_pagination(reviewer_id,index=1,start=1,end=1,active=1){
        var pagination = $('<div class="pagination pagination-centered">');
        pagination.append('<div class="pagination"><ul></ul></div>');
        var href = "<%=get_reviewer_block_admin_seminar_path(@seminar.id)%>?reviewer_id="+reviewer_id+"&page_no"+index+"=new_page_no";
        if(active != start){
          pagination.find("ul").append("<li class=\"first\"><a href=\""+href.replace('new_page_no',1)+"\">« First</a></li>");
          pagination.find("ul").append("<li class=\"prev\"><a href=\""+href.replace('new_page_no',active-1)+"\">‹ Prev</a></li>");
        }
        for(var i=start;i<end;i++){
          if(i == active){
            pagination.find("ul").append("<li class=\"page active\"><a href=\""+href.replace('new_page_no',i)+"\">"+i+"</a></li>");
          }else{
            pagination.find("ul").append("<li class=\"page\"><a href=\""+href.replace('new_page_no',i)+"\">"+i+"</a></li>");
          }
        }
        if(active != end && end != 1){
          pagination.find("ul").append("<li class=\"next\"><a href=\""+href.replace('new_page_no',active+1)+"\">Next ›</a></li>");
          pagination.find("ul").append("<li class=\"last\"><a href=\""+href.replace('new_page_no',end)+"\">Last »</a></li>");
        }
        return pagination.prop("outerHTML");
      }
      function adjust_height(){
        var bottom_offset = $(".bottomnav").eq(1).offset().top;
        var top_offset = [$('ul.pull-right').offset().top,$('h3.pull-left').offset().top];
        var top_height = [$('ul.pull-right').height(),$("h3.pull-left").height()];
        var top_all_offset_bottom = top_offset.map(function(d,i){return d+top_height[i]});
        top_all_offset_bottom = Math.max.apply(null, top_all_offset_bottom);
        var bottom_height = $(".bottomnav")[0].offsetHeight;
        var block_height;// = bottom_offset - top_all_offset_bottom - bottom_height - 100;
        block_height = $(window).height() - top_all_offset_bottom - bottom_height - 100;
        $("#main-table").height(block_height);
        $(".reviewer_block").height(block_height / 2);
      }
      function a_tag_xhr_request(ele){
        var href = $(ele).attr("href");
        var div_block = $(ele).parents(".bottomnav").parent();
        var index = div_block.data("count");
        $.get(href).done(function(data){
            var $d = $(data);
            div_block.html($d.find('[data-count='+index+']').html());
            $(".pagination a").attr("onclick","a_tag_xhr_request(this);return false;");
            adjust_height();
            window.history.pushState(data,null,href);
        })
      }
      function init_func(){
        adjust_height();
        $(".zoom_out_btn").off("click").on("click",function(){
          var parent = $(this).parent();
          var id = parent.data("id");
          $.post("<%=admin_seminar_update_seminar_review_path%>",{id: id,mode: "hide"}).done(function(data){
            console.log(data);
            parent.css("display","none");
            parent.before('<div class="blank_block reviewer_block">'+
              '<i class="fa fa-plus-circle add_btn"></i>'+
            '</div>');
            init_func();
          })
        })
        $(".blank_block .add_btn").off("click").on("click",function(){
          var ele = $(this).parent();
          $.get("<%=get_hide_reviewer_admin_seminar_path(@seminar.id)%>").done(function(data){
            $("#info_texts").html(data);
            $( "#dialog-confirm" ).dialog({
              resizable: true,
              minHeight: 300,
              maxHeight: 400,
              modal: true,
              width: '80%',
              close: function(){$( this ).dialog( "close" );},
              open: function(){
                $(".selected_item").click(function(){
                  var reviewer_id = $(this).data("id");
                  $.get("<%=get_reviewer_block_admin_seminar_path(@seminar.id)%>",{reviewer_id: reviewer_id}).done(function(data){
                    ele.prop("outerHTML",data);
                    init_func();
                    $( "#dialog-confirm" ).dialog( "close" );
                  })
                })
              }
            })
          })
        })
        $(".pagination a").attr("onclick","a_tag_xhr_request(this);return false;")
        $( ".table tbody" ).sortable({
          revert: true,
          handle: ".brand",
          connectWith: ".table tbody",
          start: function(event, ui){
            var target = $(event.target);
            if(target.find("tr[data-id]").length <= 1){
              target.find(".blank_tr").css("display","");
            }else{
              target.find(".blank_tr").css("display","none");
            }
            $(".reviewer_block").css("overflow","hidden");
            if($("#copy_mode_on:checked").length != 0){
              var clone_obj = ui.item.clone();
              clone_obj.attr("style","")
              ui.item.before(clone_obj)
              window.clone_obj = clone_obj;
            }else{
              window.clone_obj = undefined;
            }
            parent_left_block = ui.item.parents(".left_block");
            if(parent_left_block.length != 0){
              var parent_block = ui.item.parents(".reviewer_block");
              console.log(parent_left_block);
              parent_left_block.before(ui.item);
              window.parent_block = parent_block;
              ui.item.css("background","#ffffff");
              window.over_flag = false;
            }else{
              window.parent_block = undefined;
            }
          },
          sort: function(event, ui) {
            if(window.parent_block != undefined){
              var offset = ui.position;
              var parent_offset = window.parent_block.offset();
              if(!window.over_flag){
                offset = add_obj(ui.position,parent_offset);
                ui.item.offset(offset);
              }
            }
          },
          over: function( event, ui ) {
            if(window.parent_block != undefined && $(this).data("id") != window.parent_block.data("id")){
              window.over_flag = true;
            }
          },
          stop: function(event, ui){
            $(".reviewer_block").css("overflow","");
            ui.item.css("background","");
          },
          update: function(event, ui) {
            if(window.clone_obj != undefined){
              if(window.clone_obj.parent().data("id") == undefined){
                window.clone_obj.remove();
              }else if(window.clone_obj.parent().data("id") == ui.item.parent().data("id")){
                window.clone_obj.remove();
              }else if(ui.item.parent().data("id") == undefined){
                window.clone_obj.remove();
              }
            }
            var target = $(event.target);
            var mode = "";
            var id = target.data("id");
            var signup_id = ui.item.data("id");
            if(target.find("tr[data-id=\""+signup_id+"\"]").length != 0){
              mode = "append";
              if(target.find("tr[data-id=\""+signup_id+"\"]").length > 1){
                var target_signups= target.find("tr[data-id=\""+signup_id+"\"]");
                for(var i=1;i<target_signups.length;i++){
                  target_signups.eq(i).remove();
                }
              }
            }else{
              mode = "remove";
            }
            if(target.find("tr").not(".blank_tr").length == 0){
              target.find(".blank_tr").css("display","");
            }else{
              target.find(".blank_tr").css("display","none");
            }
            if(id != undefined){
              $.post("<%=admin_seminar_update_seminar_review_path%>",{id: id,mode: mode,signup_id: signup_id}).done(function(data){
              })
            }
          }
        });
      }
      $(document).ready(function(){
        $("tbody").each(function(i,v){
          if($(v).find("tr[data-id]").length != 0){
            $(v).find("tr.blank_tr").css("display","none");
          }
        })
        init_func();
      })
      $(window).resize(function(){
        adjust_height();
      })
    </script>
    <style type="text/css">
      .icons-list-2 {
        cursor: all-scroll;
      }
      .reviewer_block{
        overflow: scroll;
        border: 0.2em solid black;
        position: relative;
      }
      .zoom_out_btn{
        width: 1em;
        height: 1em;
        position: absolute;
        top: 0;
        right: 0;
        background: #454545;
        color: #FFFFFF;
        font-size: 2em;
        text-align: center;
        cursor: pointer;
      }
      .blank_block .add_btn {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 3em;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        display: inline-block;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        cursor: pointer;
      }
    </style>
<% end %>