ruling_timer/app/views/admin/ruling_timers/section_management.html.erb

<style type="text/css">
	.span20-percent{
		width: 20%;
		float: left;
		text-align: center;
		font-size: 1.5em;
		margin: 0;
		border: 2px solid #333333;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.span20-percent img{
		width: 100%;
	}
	.status-tags > *{
		font-weight: bold;
	}
	.task_name{
		font-size: 1.5em;
	}
	.working_label{
		color: #5a5a5a;
		font-weight: bold;
	}
	.finish_label{
		color: #3ec700;
		font-weight: bold;
	}
	.stop_label{
		color: #cd1643;
		font-weight: bold;
	}
</style>
<div id="dialog-modal" title="">
  <div id="modal_body_content"></div>
</div>
<h3><%= @project.get_project_name %>-<%=t("ruling_timer.section_management")%></h3>
<table class="table main-list">
	<thead>
		<tr>
			<th><%= t("ruling_timer.section_name") %></th>
			<th><%= t("ruling_timer.task_count") %></th>
			<th><%=t("action")%></th>
		</tr>
	</thead>
	<tbody id="sections_content">
		<%= render :partial => "sections_content" %>
	</tbody>
</table>
<%=
  content_tag :div, class: "bottomnav clearfix" do
    content_tag(:div, paginate(@sections), class: "pagination pagination-centered") +
    content_tag(:div, link_to(t("ruling_timer.add_section"), "#" , :class=>"btn btn-primary modal_link", "data-href" => add_section_admin_ruling_timer_path(@project) ), class: "pull-right")
  end %>
<script>
	$(document).on("click",'.modal_link',function(){
		$(this).attr("disabled","disabled");
		var link = $(this).data("href");
		var method = ($(this).data("method") || "get").toUpperCase();
		var target = $(this).data("target");
		var data = null;
		$("#dialog-modal").attr("title",$(this).text());
		if(target){
			var $target = $(target);
			if($target.is("form")){
				link = $target.attr("action");
				method = $target.attr("method");
				data = $target.serializeArray()
			}
		}
		$.ajax({
			url: link,
			method: method,
			data: data,
			async: false
		}).done(function(data){
			if(typeof(data) == "object"){
				if(data["success"]){
					$.get(window.location.href).done(function(html){
						$("#sections_content").html(html);
						$("#dialog-modal").dialog( "close" )
					})
				}
			}else{
				$("#modal_body_content").html(data);
				 $( "#dialog-modal" ).dialog({
            resizable: true,
            minHeight: 200,
            maxHeight: 400,
            modal: true,
            width: '80%',
            close: function(){
              $( this ).dialog( "close" );
            },
            buttons: {
            "<%= t('ruling_timer.close') %>": function(){
              $( this ).dialog( "close" );
            }
            }
          });
			}
		})
		$(this).attr("disabled","");
		return false;
	})
	$(document).on("click",'.delete_section',function(){
      var item = $(this);
      var item_row = $(this).parents("tr").eq(0);
      var section_id = $(item).data("section-id")
      if(window.confirm("<%=t("ruling_timer.delete_section_hint")%>")){
        if(window.confirm("<%=t("ruling_timer.delete_section_hint")%>")){
          if($("#dialog-confirm").length == 0){
            $("#main-wrap").before("<div id='dialog-confirm' title='<%=t("ruling_timer.delete_task")%>'>"+
                          "<div style='clear:both;'></div><div id='info_texts'>"+'<%=t("ruling_timer.delete_section_hint1")%>'.replace('{{section}}',item.data('section'))+"</div>"+"<input id=\"confirm_input\"/ placeholder=\"<%= t('ruling_timer.please_input_confirm_delete') %>\" style=\"width: 17em;\">"+"<div id='msg_end' style='height:0px; overflow:hidden'></div>"+
                          "</div>");
          }else{
            $("#info_texts").html('<%=t("ruling_timer.delete_section_hint1")%>'.replace('{{section}}',item.data('section')));
            $('#confirm_input').css('display','block');
            $('#confirm_input').val('');
          }
          $( "#dialog-confirm" ).dialog({
            resizable: true,
            minHeight: 200,
            maxHeight: 400,
            modal: true,
            width: '80%',
            open: function(){
              $('#confirm_input').blur();
            },
            close: function(){
              $('#confirm_input').css('display','none');
              $( this ).dialog( "close" );
            },
            buttons: {
            "<%= t('ruling_timer.confirm') %>": function(){
              var _this = $(this);
              if($('#confirm_input').val().match(/<%= t('ruling_timer.confirm_delete') %>/gi)){
                $('#confirm_input').css('display','none');
                $.post(decodeURIComponent("<%=delete_section_admin_ruling_timer_path(:id=>"{{section_id}}")%>").replace("{{section_id}}",section_id),{'confirm_delete': true}).done(function(data){
                    item_row.remove();
                    _this.dialog( "close" );
                });
              }else{
                alert("<%= t('ruling_timer.please_input_confirm_delete').html_safe %>");
                $('#confirm_input').focus();
              }
              },
            "<%= t('ruling_timer.cancel') %>": function(){
              $('#confirm_input').css('display','none');
              $( this ).dialog( "close" );
            }
            }
          });
        }
      }
    });
</script>