cancer_predict/app/views/admin/cancerpredicts/index.html.erb

<%= stylesheet_link_tag "lib/fileupload"%>
<%= stylesheet_link_tag "lib/togglebox"%>
<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/bootstrap-fileupload" %>
  <%#= javascript_include_tag "lib/bootstrap-datetimepicker" %>
  <%#= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
  <%= javascript_include_tag "lib/file-type" %>
  <%= javascript_include_tag "lib/module-area" %>
  <%= javascript_include_tag "form" %>
<% end %>

<style type="text/css">
	.sort_div:before{
	    content: "\e096";
	    font-family: 'entypo';
	    cursor: pointer;
	}
	.sort_div{
		padding: 1em;
	}
	.sort_table tbody td:last-child{
		display: none;
	}
	.remove_div{
		cursor: pointer;
	}
	.remove_div:hover{
		font-size: 1.3em;
	}
	<% Cancerpredictfields::AdvanceFields.each do |field| %>
	table .<%=field%>{
		display: none;
	}
	table.advance_mode .<%=field%>{
		display: table-cell;
	}
	<% end%>
	.solid_line_hr{
		margin: 0.3em;
    border-top: 0.2em dashed;
  }
  .sort_table input, .sort_table textarea{
  	font-family: sans-serif;
  }
  .advance_mode_help_btn{
	  float:left;
	  cursor: pointer;
	  padding: 0em 0.475em;
	  font-size: 1.25em;
	  border-radius: 1.5em;
	  background-color: rgb(210, 106, 2);
	  border-color: rgb(210, 106, 2);
	  color: white;
	  width: 1.8em;
    height: 1.8em;
    line-height: 1em;
	}
	#show_advance_mode_modal {
		display: none;
	}
</style>
<div id="show_advance_mode_modal" class="modal fade">
	<div class='modal-dialog'>
		<div class='modal-content'>
			<div class='modal-header'>
				<button type='button' aria-hidden='true' class='close'>×</button>
				<h4 class='modal-title'>
					<%= t("cancerpredict.module_mode") %>
				</h4>
			</div>
			<div class="modal-body">
				<%= t("cancerpredict.advance_mode_hint2").html_safe %>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default">Close</button>
			</div>
		</div>
	</div>
</div>
<div style="clear:both;"></div>
<%=form_for @form_to_show ,:url=>{:controller=>"cancerpredicts" ,:action=>"edit"} do |form|%>
	<span class="show_span"><%= t('cancerpredict.title') %></span>
	<div style="clear:both;"></div>
	<label class="label_left" for="title_text"><%= t('cancerpredict.title_text')+':' %></label>
	<%=form.fields_for :title_texts do |locale_fields|%>
		<%=locale_fields.text_field I18n.locale.to_s ,{:value => @form_to_show.title_texts[I18n.locale.to_s],:id=>"title_text"} %>
	<% end %>
	<% if @title_images.length != 0%>
		<% @title_images.each_with_index do |temp_image,i| %>
			<%= form.fields_for "title_images" do |image_fields|  %>
				<div class="image_field title_images" value="<%=(i+1).to_s%>">
				<%= image_fields.fields_for i.to_s do |image_field|  %>
					<%= render :partial => 'image_form', :object => temp_image, :locals => {:f => image_field, :i => i} %>
					<% if i.to_i == @title_images.length - 1%>
						<script>
							$(document).on('click', '#add_file.title_images', function(){
								var old_id = $('.image_field.title_images').eq(-1).attr('value');
								if( old_id == undefined)
									old_id = 0;
								else
									old_id = Number(old_id);
								var new_id = old_id + 1;
								var html = "<%= escape_javascript(render :partial => 'image_form', :object => @head_new_image, :locals => {:f => image_field, :i => i}).gsub("\"","\'").html_safe %>"
								$(this).parent().siblings('.add-target.title_images').before(('<div class="image_field title_images" value="'+new_id+'">'+html.replace(old_id, new_id)+'</div>'));
								var name = $('.image_field.title_images').eq(-1).find('[type="file"]').attr('name');
								$('.image_field.title_images').eq(-1).find('[type="file"]').attr('name',name.replace("<%=i%>",new_id-1));
								name = $('.image_field.title_images').eq(-1).find('input.sort_num').attr('name');
								$('.image_field.title_images').eq(-1).find('input.sort_num').attr('name',name.replace("<%=i%>",new_id-1));
								new_id = $('.image_field.title_images').eq(-2).find('input.sort_num').val();
								$('.image_field.title_images').eq(-1).find('input.sort_num').val(Number(new_id)+1);
								formTip();
							});
						</script>
					<% end %>
				<% end %>
			<% end %>
		<% end %>
	<% else %>
		<%= form.fields_for "title_images" do |image_fields|  %>
			<%= image_fields.fields_for "0" do |image_field|  %>
			<script>
				$(document).on('click', '#add_file.title_images', function(){
					var old_id = $('.image_field.title_images').eq(-1).attr('value');
					if( old_id == undefined)
						old_id = 0;
					else
						old_id = Number(old_id);
					var new_id = old_id + 1;
					var html = "<%= escape_javascript(render :partial => 'image_form', :object => @head_new_image, :locals => {:f => image_field, :i => 0}).gsub("\"","\'").html_safe %>"
					$(this).parent().siblings('.add-target.title_images').before(('<div class="image_field title_images" value="'+new_id+'">'+html.replace(old_id, new_id)+'</div>'));
					var name = $('.image_field.title_images').eq(-1).find('[type="file"]').attr('name');
					$('.image_field.title_images').eq(-1).find('[type="file"]').attr('name',name.replace("0",new_id-1));
					name = $('.image_field.title_images').eq(-1).find('input.sort_num').attr('name');
					$('.image_field.title_images').eq(-1).find('input.sort_num').attr('name',name.replace("0",new_id-1));
					new_id = $('.image_field.title_images').eq(-2).find('input.sort_num').val();
					if(new_id != undefined)
						$('.image_field.title_images').eq(-1).find('input.sort_num').val(Number(new_id)+1);
					else
						$('.image_field.title_images').eq(-1).find('input.sort_num').val(1);
					formTip();
				});
			</script>
			<% end %>
		<% end %>
	<% end %>
	<div class="add-target title_images"></div>
	<p class="add-btn">
	  <%= hidden_field_tag 'title_images_count', @title_images.count %>
	  <a id="add_file" class="title_images trigger btn btn-small btn-primary"><i class="icons-plus"></i> <%= t('cancerpredict.add_image') %></a>
	</p>
	<span class="show_span"><%= t('cancerpredict.tool_head_pictures') %></span>
	<div style="clear:both;"></div>
	<% if @head_images.length != 0%>
		<% @head_images.each_with_index do |temp_image,i| %>
			<%= form.fields_for "head_images" do |image_fields|  %>
				<div class="head_images image_field" value="<%=(i+1).to_s%>">
				<%= image_fields.fields_for i.to_s do |image_field|  %>
					<%= render :partial => 'image_form', :object => temp_image, :locals => {:f => image_field, :i => i} %>
					<% if i.to_i == @head_images.length - 1%>
						<script>
							$(document).on('click', '#add_file.head_images', function(){
								var old_id = $('.image_field').eq(-1).attr('value');
								if( old_id == undefined)
									old_id = 0;
								else
									old_id = Number(old_id);
								var new_id = old_id + 1;
								var html = "<%= escape_javascript(render :partial => 'image_form', :object => @head_new_image, :locals => {:f => image_field, :i => i}).gsub("\"","\'").html_safe %>"
								$(this).parent().siblings('.add-target.head_images').before(('<div class="image_field" value="'+new_id+'">'+html.replace(old_id, new_id)+'</div>'));
								var name = $('.image_field').eq(-1).find('[type="file"]').attr('name');
								$('.image_field').eq(-1).find('[type="file"]').attr('name',name.replace("<%=i%>",new_id-1));
								name = $('.image_field').eq(-1).find('input.sort_num').attr('name');
								$('.image_field').eq(-1).find('input.sort_num').attr('name',name.replace("<%=i%>",new_id-1));
								new_id = $('.image_field').eq(-2).find('input.sort_num').val();
								$('.image_field').eq(-1).find('input.sort_num').val(Number(new_id)+1);
								formTip();
							});
						</script>
					<% end %>
				<% end %>
			<% end %>
		<% end %>
	<% else %>
		<%= form.fields_for "head_images" do |image_fields|  %>
			<%= image_fields.fields_for "0" do |image_field|  %>
			<script>
				$(document).on('click', '#add_file.head_images', function(){
					var old_id = $('.image_field.head_images').eq(-1).attr('value');
					if( old_id == undefined)
						old_id = 0;
					else
						old_id = Number(old_id);
					var new_id = old_id + 1;
					var html = "<%= escape_javascript(render :partial => 'image_form', :object => @head_new_image, :locals => {:f => image_field, :i => 0}).gsub("\"","\'").html_safe %>"
					$(this).parent().siblings('.add-target.head_images').before(('<div class="image_field head_images" value="'+new_id+'">'+html.replace(old_id, new_id)+'</div>'));
					var name = $('.image_field.head_images').eq(-1).find('[type="file"]').attr('name');
					$('.image_field.head_images').eq(-1).find('[type="file"]').attr('name',name.replace("0",new_id-1));
					name = $('.image_field.head_images').eq(-1).find('input.sort_num').attr('name');
					$('.image_field.head_images').eq(-1).find('input.sort_num').attr('name',name.replace("0",new_id-1));
					new_id = $('.image_field.head_images').eq(-2).find('input.sort_num').val();
					if(new_id != undefined)
						$('.image_field.head_images').eq(-1).find('input.sort_num').val(Number(new_id)+1);
					else
						$('.image_field.head_images').eq(-1).find('input.sort_num').val(1);
					formTip();
				});
			</script>
			<% end %>
		<% end %>
	<% end %>
	<div class="add-target head_images"></div>
	<p class="add-btn">
	  <%= hidden_field_tag 'head_images_count', @head_images.count %>
	  <a id="add_file" class="head_images trigger btn btn-small btn-primary"><i class="icons-plus"></i> <%= t('cancerpredict.add_image') %></a>
	</p>
	<span class="show_span"><%= t('cancerpredict.text_descibe') %></span>
	<div style="clear:both;"></div>
	<textarea class="ckeditor" id="cancerpredictfields_text_descibe_<%=I18n.locale.to_s%>" name="cancerpredictfields[text_descibe][<%=I18n.locale.to_s%>]">
		<%= @form_to_show.text_descibe[I18n.locale.to_s] %>
	</textarea>
	<span class="show_span"><%= t('cancerpredict.font_size') %></span>
	<div style="clear:both;"></div>
	<% @size=['small','medium','large'] %>
	<% @size.each do |size|%>
		<%= form.fields_for size do |make_size| %>
			<div><label class="label_left" for=<%='font_'+size%>><%=t('cancerpredict.'+size)+':'%></label><%= make_size.text_field 'font_size',{:value=> @form_to_show[size]['font_size'],:id=>'font_'+size} %>
			<% if @form_to_show[size]['active'].to_i == 1%>
				<%= make_size.check_box 'active',{:checked=>true,:class=>"checkbox text_choice",:style=>"float:left;"}%></div>
			<% else%>
				<%= make_size.check_box 'active',{:checked=>false,:class=>"checkbox text_choice",:style=>"float:left;"}%></div>
			<%end%>
		<%end%>
	<%end%>
	<span class="show_span"><%= t('cancerpredict.module_mode') %></span>
	<div style="clear:both;"></div>
	<div class="control-group">
		<label class="control-label" for="advance_mode" style="float: left; line-height: 30px;margin-right: 1em;">
			<span style="float: left;"><%= t('cancerpredict.advance_mode') %></span>
			<button type="button" class="advance_mode_help_btn" data-target="#show_advance_mode_modal"><i aria-hidden="true" class="fa fa-question"></i></button>
		</label>
		<div class="controls">
			 <input id="advance_mode" name="<%=form.object_name%>[advance_mode]" type="checkbox" class="toggle-check" data-disabled="<%=!(form.object.advance_mode)%>">
		</div>
	</div>
	<div style="clear:both;"></div>
	<span class="show_span"><%= t('cancerpredict.Input_fields') %></span>
	<div style="clear:both;"></div>
	<table id="fields_table" class="sort_table <%=@form_to_show.advance_mode ? 'advance_mode' : '' %>">
		<% keys = Cancerpredictfields::FIELDINFO.keys - Cancerpredictfields::TherapyOnly %>
		<thead>
			<tr>
				<th></th>
				<th></th>
			<% keys.each do |key|%>
			<th class="<%=key%>"><%=t("cancerpredict.table.#{key}")%></th>
			<%end%>
			</tr>
		</thead>
		<tbody>
		<%= form.fields_for :form_show do |formfield|%>
			<% @form_to_show.form_show.each do |num,property| %>
				<%=formfield.fields_for num.to_s do |make_fields|%>
					<%= render :partial => 'form', :locals=>{:make_fields=>make_fields,:property=>property,:num=>num,:keys => keys} %>
				<%end%>
			<%end%>
		<%end%>
		</tbody>
	</table>
	<button id="add_field" type="button" class="btn btn-primary"><%= t('cancerpredict.table.add_field') %></button>
	<div style="clear:both;"></div>
	<span class="show_span"><%=t('cancerpredict.table.Results')%></span>
	<div style="clear:both;"></div>
	<label for="form_result_is_right" style="float: left;"><%= t('cancerpredict.result_is_right') %></label>
	<% if @form_to_show.form_result_is_right.to_i == 1%>
		<div><%= form.check_box "form_result_is_right",{:checked=>true,:class=>"checkbox",:style=>"float: left;position: relative;left: 0;transform: none!important;margin-left: 1em;",:id=>"form_result_is_right"}%></div>
	<% else%>
		<div><%= form.check_box "form_result_is_right",{:checked=>false,:class=>"checkbox",:style=>"float: left;position: relative;left: 0;transform: none!important;margin-left: 1em;",:id=>"form_result_is_right"}%></div>
	<%end%>
	<div style="clear:both;"></div>
	<% @create_items = ['years','table_above_texts','text_above_texts','surgery_only_texts','extra_texts','extra_therapy_texts','danger_texts','texts_between_Result_and_result_block'] %>
	<% @create_items.each do |item|%>
		<label for="<%=item%>" style="float: left;margin-right:1em;width:11em;"><%= t('cancerpredict.'+item)+':' %></label>
		<% if @form_to_show[item].class == BSON::Document || @form_to_show[item].class == Hash %>
			<%= form.fields_for item do |locale_fields|%>
				<%= locale_fields.text_field I18n.locale.to_s,{:value=>@form_to_show[item][I18n.locale.to_s] ,:id=> item,:style=>'width:calc(100% - 16em)'} %>
			<% end %>
		<% else %>
			<%= form.text_field item,{:value=>@form_to_show[item],:id=> item,:style=>'width:calc(100% - 16em)'} %>
		<% end %>
		<div style="clear:both;"></div>
	<% end %>
	<table id="therapies_table" class="sort_table <%=@form_to_show.advance_mode ? 'advance_mode' : '' %>">
		<thead>
			<tr>
				<th></th>
				<th></th>
				<% keys = Cancerpredictfields::TherapyFields %>
				<% keys.each do |key,vlaue|%>
					<th class="<%=key%>"><%=t("cancerpredict.table.#{key}")%></th>
				<%end%>
			</tr>
		</thead>
		<tbody>
		<%= form.fields_for :form_show_in_result do |formfield|%>
			<% @form_to_show.form_show_in_result.each do |num,property| %>
				<%=formfield.fields_for num.to_s do |make_fields|%>
					<%= render :partial => 'form', :locals=>{:make_fields=>make_fields,:property=>property,:num=>num,:keys => Cancerpredictfields::TherapyFields} %>
				<%end%>
			<%end%>
		<%end%>
		</tbody>
	</table>
	<button id="add_therapy" type="button" class="btn btn-primary"><%= t('cancerpredict.table.add_therapy') %></button>
	<div style="clear:both;"></div>
	<span class="show_span"><%=t('cancerpredict.table.calculate_settings')%></span>
	<div style="clear:both;"></div>
	<div class="control-group">
		<div class="control-label" style="float: left;margin-right: 1em;width: 11em;">
			<label><%= t('cancerpredict.hidden_variables') %></label>
		</div>
		<div class="controls">
			<%= form.text_area :hidden_variables, :rows=>"5", :style=> 'width: 100%;font-family: sans-serif;' %>
		</div>
	</div>
	<div style="clear:both;"></div>
	<div class="control-group">
		<div class="control-label" style="float: left;margin-right: 1em;width: 11em;">
			<label><%= t('cancerpredict.table.prediction_formula') %></label>
		</div>
		<div class="controls">
			<%= form.text_area :prediction_formula, :rows=>"5", :style=> 'width: 100%;font-family: sans-serif;' %>
		</div>
	</div>
	<div id="years_settings">
		<% years = @form_to_show.years %>
		<% years.each_with_index do |year,i| %>
			<div data-year="<%= year.to_s.strip %>">
				<div class="control-label" style="float: left;margin-right: 1em;width: 13em;">
					<label style="font-family: sans-serif;"><%=t("cancerpredict.Overall_Survival")%>(t=<%=year%> Year)</label>
				</div>
				<div class="controls">
					<textarea name="<%= form.object_name %>[years_settings][]" style= "width: calc(100% - 16em);" value="<%= @form_to_show.years_settings[i] rescue '' %>"><%= @form_to_show.years_settings[i] rescue '' %></textarea>
				</div>
			</div>
		<% end %>
	</div>
	<%=form.submit "#{t(:updatefont)}",{:id=>"updatebtn"}%>
<%end%>
<link href="/assets/admin/cancerpredict.css" media="screen" rel="stylesheet">
<script>
	$(".advance_mode_help_btn").click(function(){
		$("#show_advance_mode_modal").modal();
	})
	$("#show_advance_mode_modal button").click(function(){
		$("#show_advance_mode_modal").modal("hide");
	})
	$("#advance_mode").click(function(){
		if(window.confirm("<%=t('cancerpredict.advance_mode_hint1').gsub("\n","\\n")%>")){
			$("#fields_table,#therapies_table").toggleClass("advance_mode");
		}else{
			return false;
		}
	})
	$('.text_choice').click(function(){
		$('.text_choice').prop('checked' , false);
		$(this).prop('checked' , true);
	});
	$("#add_field").click(function(){
		var index = $("#fields_table tbody tr").length.toString();
		<%= fields_for :cancerpredictfields do |form|%>
			<%= form.fields_for :form_show do |formfield|%>
				<%=formfield.fields_for :new_index do |make_fields|%>
					<% keys = Cancerpredictfields::FIELDINFO.keys - Cancerpredictfields::TherapyOnly %>
					var html = "<%= "#{render :partial => 'form', :locals=>{:make_fields=>make_fields,:property=>{},:num=>'',:keys => keys}}".gsub(/(\r\n|\n)/,"").gsub("\"","\\\"").html_safe %>";
					$("#fields_table tbody").append(html.replaceAll('new_index',index));
				<% end %>
			<% end %>
		<% end %>
		$(".remove_div").off("click").on("click",function(){
			$el = $(this).parent().siblings("tr").not($(this)).eq(0);
			$(this).parent().remove();
			update_key($el);
		})
	})
	$("#add_therapy").click(function(){
		var index = $("#therapies_table tbody tr").length.toString();
		<%= fields_for :cancerpredictfields do |form|%>
			<%= form.fields_for :form_show_in_result do |formfield|%>
				<%=formfield.fields_for :new_index do |make_fields|%>
					<% keys = Cancerpredictfields::TherapyFields %>
					var html = "<%= "#{render :partial => 'form', :locals=>{:make_fields=>make_fields,:property=>{},:num=>'',:keys => keys}}".gsub(/(\r\n|\n)/,"").gsub("\"","\\\"").html_safe %>";
					$("#therapies_table tbody").append(html.replaceAll('new_index',index));
				<% end %>
			<% end %>
		<% end %>
		$(".remove_div").off("click").on("click",function(){
			$el = $(this).parent().siblings("tr").not($(this)).eq(0);
			$(this).parent().remove();
			update_key($el);
		})
	})
	function update_key(ele){
		console.log($(ele))
		var ui_child=$(ele).parent().find('> tr');
		console.log(ui_child);
		for (var i=0;i<ui_child.length;i++){
			var now_ele = ui_child.eq(i);
			var $inputs = now_ele.find('input');
			$inputs.each(function(input_index,input){
				var name = input.name;
				name = $.map(name.split(/(\[|\])/),function(v,ii){
					var vv = v;
					var num = Number.parseInt(vv);
					if(!Number.isNaN(num)){
						vv = i.toString();
					}
					return vv;
				}).join("");
				console.log(name)
				input.name = name;
			})
		}
	}
	$( ".sort_table > tbody" ).sortable({
	  axis: "y",
	  revert: true,
	  placeholder: "sortable-placeholder",
	  handle: ".sort_div",
	  update: function(event, ui) {
	    update_key($(ui.item[0]))
	  }
	});
	$(".remove_div").click(function(){
		$el = $(this).parent().siblings("tr").not($(this)).eq(0);
		$(this).parent().remove();
		update_key($el);
	})
	$(".remove_existing_record").click(function(){
		if(window.confirm("Are you sure want to remove this file?")){
			$(this).find(".should_destroy").val("1");
			$(this).parent().siblings(".file-link").remove();
		}
	})
	$("#years").on('blur',function(){
		var years = [];
		try{
			years = $(this).val().split(/\[|,|\]/).filter(function(aa){return aa !="" && aa != undefined}).map(function(aa){return aa.trim()});
		}catch(e){};
		var index = 0;
		years.forEach(function(year){
			if($("#years_settings [data-year='"+year+"']").length == 0){
				var year_text = ('<div data-year="'+year+'">'+
					'<div class="control-label" style="float: left;margin-right: 1em;width: 13em;">'+
						'<label style="font-family: sans-serif;"><%=t("cancerpredict.Overall_Survival")%>(t='+year+' Year)</label>'+
					'</div>'+
					'<div class="controls">'+
						'<textarea name="cancerpredictfields[years_settings][]" style= "width: calc(100% - 16em);"></textarea>'+
					'</div>'+
				'</div>');
				if(index != 0){
					$("#years_settings [data-year='"+years[index - 1]+"']").after(year_text);
				}else{
					$("#years_settings").html(year_text+$("#years_settings").html());
				}
			}
			index++;
		})
		var all_years = $("#years_settings [data-year]").map(function(i,aa){return $(aa).attr("data-year").toString().trim() }).toArray();
		all_years.forEach(function(a_year){
			if(years.indexOf(a_year) == -1){
				$("#years_settings [data-year='"+a_year+"']").remove()
			}
		})


	})
</script>