finish table and text except calculate

This commit is contained in:
BOHUNG 2019-12-07 21:01:52 +08:00
parent c1a2927e1e
commit 6b1d72e54a
3 changed files with 162 additions and 39 deletions

View File

@ -71,54 +71,84 @@ $(document).ready(function(){
}; };
}; };
}); });
$('.cancer_table_btn').click(function(){ $('.cancer_table_btn').off('click').on('click',function(){
var index = $(this).index()/2; var index = $(this).index()/2;
$(this).parent().find('>input').attr('value',0); try{
$(this).parent().find('>input').eq(index).attr('value',1); $(this).parent().find('>input').attr('value',0);
$(this).parent().find('>button').removeClass('active'); $(this).parent().find('>input').eq(index).attr('value',1);
$(this).parent().find('>button').removeClass('active');
$(this).parent().removeClass('cancertable_empty');
}catch{};
$(this).addClass('active'); $(this).addClass('active');
$(this).parent().removeClass('cancertable_empty');
}); });
$('#cancer_table_reset').click(function(){ $('#cancer_table_reset').click(function(){
$('.cancer_table_btn').removeClass('active'); $('.cancer_table_btn').removeClass('active');
$('.cancer-btn-group input').attr('value',0); $('.cancer-btn-group input').attr('value',0);
$('.num_only').val(''); $('.num_only').val('');
$('.cancer_form_field').removeClass('cancertable_empty'); $('#cancer_table .cancer_form_field').removeClass('cancertable_empty');
}); });
$('#cancer_table_submit').click(function(){ $('#cancer_table_submit').click(function(){
var flag; var flag;
flag = 1; flag = 1;
for(var i = 0;i < $('.cancer_form_field').length;i++){ for(var i = 0;i < $('#cancer_table .cancer_form_field').length;i++){
if($('.cancer_form_field').eq(i).hasClass('num_only')){ if($('#cancer_table .cancer_form_field').eq(i).hasClass('num_only')){
if($('.cancer_form_field').eq(i).val()==""){ if($('#cancer_table .cancer_form_field').eq(i).val()==""){
flag = 0; flag = 0;
$('.cancer_form_field').eq(i).addClass('cancertable_empty'); $('#cancer_table .cancer_form_field').eq(i).addClass('cancertable_empty');
}else{ }else{
$('.cancer_form_field').eq(i).removeClass('cancertable_empty'); $('#cancer_table .cancer_form_field').eq(i).removeClass('cancertable_empty');
}; };
}else{ }else{
if($('.cancer_form_field').eq(i).find('[value="1"]').length == 0){ if($('#cancer_table .cancer_form_field').eq(i).find('[value="1"]').length == 0){
flag = 0; flag = 0;
$('.cancer_form_field').eq(i).addClass('cancertable_empty'); $('#cancer_table .cancer_form_field').eq(i).addClass('cancertable_empty');
}else{ }else{
$('.cancer_form_field').eq(i).removeClass('cancertable_empty'); $('#cancer_table .cancer_form_field').eq(i).removeClass('cancertable_empty');
} }
}; };
} }
if(flag == 1){ if(flag == 1){
var post_json= {}; var post_json= {};
for(var i = 0;i < $('.cancer_form_field').length;i++){ for(var i = 0;i < $('#cancer_table .cancer_form_field').length;i++){
var name = $('.cancer_form_field').eq(i).attr('id') var name = $('#cancer_table .cancer_form_field').eq(i).attr('id')
if($('.cancer_form_field').eq(i).hasClass('num_only')) if($('#cancer_table .cancer_form_field').eq(i).hasClass('num_only'))
post_json[name] = $('.cancer_form_field').eq(i).val(); post_json[name] = $('#cancer_table .cancer_form_field').eq(i).val();
else{ else{
var index = ($('.cancer_form_field').eq(i).find('[value="1"]').index()+1)/2; var index = ($('#cancer_table .cancer_form_field').eq(i).find('[value="1"]').index()+1)/2;
post_json[name] = index; post_json[name] = index;
}; };
}; };
var result = $.post("/cancerpredictResult",{"data":post_json}); var result = $.post("/cancerpredictResult",{"data":post_json});
result.done(function(){ result.done(function(){
$('#result_table_content').html(result.responseJSON.table); var load_heml = $('#result_table_content').html(result.responseJSON.table);
load_heml.ready(function(){
$('#result_table_content .cancer_years').eq(0).addClass('active');
$('.cancer_table_btn').off('click').on('click',function(){
var index = $(this).index()/2;
try{
$(this).parent().find('>input').attr('value',0);
$(this).parent().find('>input').eq(index).attr('value',1);
$(this).parent().find('>button').removeClass('active');
$(this).parent().removeClass('cancertable_empty');
}catch{};
$(this).addClass('active');
});
});
load_heml = $('#result_text_content').html(result.responseJSON.texts);
load_heml.ready(function(){
$('#result_text_content .cancer_years').eq(0).addClass('active');
$('.cancer_table_btn').off('click').on('click',function(){
var index = $(this).index()/2;
try{
$(this).parent().find('>input').attr('value',0);
$(this).parent().find('>input').eq(index).attr('value',1);
$(this).parent().find('>button').removeClass('active');
$(this).parent().removeClass('cancertable_empty');
}catch{};
$(this).addClass('active');
$('.surgery_year').html($(this).html());
});
});
}) })
} }
}); });
@ -130,10 +160,19 @@ $(document).ready(function(){
}; };
$('.result_tab').click(function(){ $('.result_tab').click(function(){
var index = $(this).attr('index'); var index = $(this).attr('index');
$('.result_tab').removeClass('active');
$(this).addClass('active');
$('.result_content').css('display','none'); $('.result_content').css('display','none');
$('.result_content[index="'+index+'"]').css('display','block'); $('.result_content[index="'+index+'"]').css('display','block');
}) })
$('.num_only').focus $('.num_only').keypress(function(event){
console.log(event.keyCode)
return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false);
});
/*$('.num_only').attr("onpaste","{console.log(clipboardData.getData('text'));return !event.clipboardData.getData('text').match(/\D/)}");*/
/*$('.num_only').keyup(function(){
$(this).val($(this).val().replace(/\D/g,''));
});*/
for(var i=0;i<$('.num_only').length;i++) for(var i=0;i<$('.num_only').length;i++)
$('.num_only').eq(i).data('range') $('.num_only').eq(i).data('range')
}); });

View File

@ -9,7 +9,7 @@ class CancerpredictsController < ApplicationController
uid = OrbitHelper.params[:uid] rescue "" uid = OrbitHelper.params[:uid] rescue ""
tags = OrbitHelper.widget_tags tags = OrbitHelper.widget_tags
categories = OrbitHelper.widget_categories || [] categories = OrbitHelper.widget_categories || []
locale = OrbitHelper.get_site_locale.to_s create_first_field
result = {:result=>"123"} result = {:result=>"123"}
result['age1'] = -(params['data']['age'].to_f/100)**(-0.5) result['age1'] = -(params['data']['age'].to_f/100)**(-0.5)
result['age2'] = -(params['data']['age'].to_f/100)**(-0.5)*Math.log(params['data']['age'].to_f/100,10) result['age2'] = -(params['data']['age'].to_f/100)**(-0.5)*Math.log(params['data']['age'].to_f/100,10)
@ -58,8 +58,37 @@ class CancerpredictsController < ApplicationController
result['lpv'] = ((result['age1']-0.7276655)*(-10.87)+(result['age2']-0.4540707)*8.968+(result['size1']-0.643632)*0.7678+(result['nposit']-1.346932)*0.5339+ result['lpv'] = ((result['age1']-0.7276655)*(-10.87)+(result['age2']-0.4540707)*8.968+(result['size1']-0.643632)*0.7678+(result['nposit']-1.346932)*0.5339+
result['grade_2']*0.4795+result['grade_3']*0.818+result['subtype_HER2']*0.1806+result['subtype_triple']*0.6457+result['pstage_2']*0.5311+ result['grade_2']*0.4795+result['grade_3']*0.818+result['subtype_HER2']*0.1806+result['subtype_triple']*0.6457+result['pstage_2']*0.5311+
result['pstage_3']*1.134+result['pstage_4']*2.172+result['lvi_yes']*0.3321-0.04 rescue 'error') result['pstage_3']*1.134+result['pstage_4']*2.172+result['lvi_yes']*0.3321-0.04 rescue 'error')
result['table'] = '<a id="cancer_table_texts">此分析微針對已接受手術後病人下表為此病人分別在第1年、3及5年下根據選定的術後治療所估計的存活率</a>' result['table'] = '<p id="cancer_table_texts">此分析微針對已接受手術後病人下表為此病人分別在第1年、3及5年下根據選定的術後治療所估計的存活率</p>'
#result['table'] += result['table'] += '<a>第</a>'
@years = ['1','3','5']
result['years'] = @years
@years.each{|year| result['table'] += ('<button class="cancer_years cancer_table_btn btn btn-default btn-sm">'+year+'</button>')}
result['table'] += '<a>年</a>'
@table_head = (I18n.locale.to_s == "zh_tw") ? ['治療','額外治療效益','總生存率(%)'] :['Treatment','Additional Benefit','Overall Survival(%)']
@therapy_choices = (I18n.locale.to_s == "zh_tw") ? ['純手術'] :['Treatment']
@form_to_show.form_show_in_result.values.each{|choice| @therapy_choices.push choice["name"][I18n.locale.to_s]}
@therapy_names = ['Treatment']
@form_to_show.form_show_in_result.values.each{|choice| @therapy_names.push choice["variable"]}
result['table'] += '<table><thead><tr>'
@table_head.each_with_index{|head,index| result['table'] += ('<th class="cancer_th">' + head + '</th>')}
result['table'] += '</tr></thead><tbody>'
@therapy_choices.each_with_index do |choice,i|
result['table'] += '<tr>'
@table_head.each_with_index do |head,index|
if index == 0
result['table'] += ('<td class="cancer_td '+@therapy_names[i].to_s+'">' + choice + '</td>')
else
result['table'] += ('<td class="cancer_td">' + '-' + '</td>')
end
end
result['table'] += '</tr>'
end
result['texts'] = '<a>此研究分析來自已接受根除性手術後之婦女所得之結果,根據您所輸入的資訊以及治療方式,</a>'+'<div style="clear:both;"></div>'+'<a>在術後第</a>'
@years.each{|year| result['texts'] += ('<button class="cancer_years cancer_table_btn btn btn-default btn-sm">'+year+'</button>')}
result['texts'] += '<a>年</a>'
@servive_ratio = Math.exp(-0.001476145)**(Math.exp((result['lpv'])))
result['texts'] += ('<a>100 位只接受根除性手術的婦女中,有 '+ '<a class="survive_person">'+@servive_ratio.round.to_s+'</a>'+'<a> 位婦女,術後 </a>'+'<a class="surgery_year">'+@years[0].to_s+'</a>'+'<a>年仍為存活</a>')
result['texts'] += '<div class="extra-text" style="display:none;"><a>'+',此外'+'<a></div>'
result = result.merge(params) result = result.merge(params)
render :json=> result render :json=> result
end end
@ -67,7 +96,6 @@ class CancerpredictsController < ApplicationController
uid = OrbitHelper.params[:uid] rescue "" uid = OrbitHelper.params[:uid] rescue ""
tags = OrbitHelper.widget_tags tags = OrbitHelper.widget_tags
categories = OrbitHelper.widget_categories || [] categories = OrbitHelper.widget_categories || []
locale = OrbitHelper.get_site_locale.to_s
@table_str = '<div id="cancer_table"><div id="show_help_modal" class="modal fade"></div>' @table_str = '<div id="cancer_table"><div id="show_help_modal" class="modal fade"></div>'
@table_str_left = '<div id="cancer_table_left">' @table_str_left = '<div id="cancer_table_left">'
@table_str_right = '<div id="cancer_table_right">' @table_str_right = '<div id="cancer_table_right">'
@ -96,7 +124,7 @@ class CancerpredictsController < ApplicationController
@table_str_left += '<div style="margin-right: 2.125em;"></div>' @table_str_left += '<div style="margin-right: 2.125em;"></div>'
end end
if @field_property["is_num"] == 1 if @field_property["is_num"] == 1
@table_str_left += '<input class="num_only cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'"></input><button class="btn-sub"></button><button class="btn-add"></button>' @table_str_left += '<input class="num_only cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'" onkeyup="value=value.replace(/[^\d]/g,\'\') "onbeforepaste="clipboardData.setData(\'text\',clipboardData.getData(\'text\').replace(/[^\d]/g,\'\'))"></input><button class="btn-sub"></button><button class="btn-add"></button>'
else else
@table_str_left += '<div class= "cancer-btn-group cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;">' @table_str_left += '<div class= "cancer-btn-group cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;">'
@field_property["choice_fields"].each do |create_choice| @field_property["choice_fields"].each do |create_choice|
@ -122,7 +150,7 @@ class CancerpredictsController < ApplicationController
@table_str_right += '<div style="margin-right: 2.125em;"></div>' @table_str_right += '<div style="margin-right: 2.125em;"></div>'
end end
if @field_property["is_num"] == 1 if @field_property["is_num"] == 1
@table_str_right += '<input class="num_only cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'"></input><button class="btn-sub"></button><button class="btn-add"></button>' @table_str_right += '<input class="num_only cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'" onkeyup="value=value.replace(/[^\d]/g,\'\') "onbeforepaste="clipboardData.setData(\'text\',clipboardData.getData(\'text\').replace(/[^\d]/g,\'\'))"></input><button class="btn-sub"></button><button class="btn-add"></button>'
else else
@table_str_right += '<div class= "cancer-btn-group cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;">' @table_str_right += '<div class= "cancer-btn-group cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;">'
@field_property["choice_fields"].each do |create_choice| @field_property["choice_fields"].each do |create_choice|
@ -132,7 +160,7 @@ class CancerpredictsController < ApplicationController
@table_str_right += '</div>' @table_str_right += '</div>'
end end
if @field_property["hint"].to_s != "" if @field_property["hint"].to_s != ""
@table_str_right +='<div style="color: rgb(104, 104, 104);font-size:0.75em;clear:both;">'+@field_property["hint"]+'</div>' @table_str_right +='<div class="hint-texts">'+@field_property["hint"]+'</div>'
end end
@table_str_right += '</div><div style="clear:both;"></div>' @table_str_right += '</div><div style="clear:both;"></div>'
end end
@ -141,17 +169,17 @@ class CancerpredictsController < ApplicationController
@table_str_right += '</div>' @table_str_right += '</div>'
@table_str += (@table_str_left+@table_str_right) @table_str += (@table_str_left+@table_str_right)
@table_str +='<div style="clear:both;"></div>' @table_str +='<div style="clear:both;"></div>'
@table_result_str = '<div id="cancer_predict_result" style="display:block;"><span class="result_title">'+t("cancerpredict.table.result").to_s+'</span><div style="clear:both;"></div>' @table_result_str = '<div id="cancer_predict_result_block" style="display:block;"><div id="cancer_predict_result"><span class="result_title">'+t("cancerpredict.table.result").to_s+'</span><div style="clear:both;"></div>'
@tab_name = ['table','curve','text'] @tab_name = ['table','text']
@table_result_str += '<div id="result_contents"><div class="result_tab_group">' @table_result_str += '<div id="result_contents"><div class="result_tab_group">'
@tab_name.each{|name| @table_result_str += '<div id="result_'+name+'_tab" class="result_tab"><a>'+t("cancerpredict.table."+name).to_s+'</a></div><div style="clear:both;"></div>'} @tab_name.each_with_index{|name,index| @table_result_str += ('<div id="result_'+name+'_tab" class="result_tab'+((index != 0) ? "" : " active")+'"><a>'+t("cancerpredict.table."+name).to_s+'</a></div><div style="clear:both;"></div>')}
@table_result_str += '</div><div class="result_content_group">' @table_result_str += '</div><div class="result_content_group">'
@tab_name.each{|name| @table_result_str += '<div id="result_'+name+'_content" class="result_content"><a>'+'no content'+'</a></div>'} @tab_name.each{|name| @table_result_str += '<div id="result_'+name+'_content" class="result_content"><a>'+'no content'+'</a></div>'}
@table_result_str += '</div></div></div>' @table_result_str += '</div></div></div>'
@table_button = '<div id="cancer_table_button_group">' @table_button = '<div id="cancer_table_button_group">'
@submit_btn_str='<button id="cancer_table_submit">'+t('cancerpredict.table.Submit').to_s+'</button>' @submit_btn_str='<button id="cancer_table_submit">'+t('cancerpredict.table.Submit').to_s+'</button>'
@reset_btn_str='<button id="cancer_table_reset">'+t('cancerpredict.table.Reset').to_s+'</button>' @reset_btn_str='<button id="cancer_table_reset">'+t('cancerpredict.table.Reset').to_s+'</button>'
@table_button += (@submit_btn_str+@reset_btn_str+'<div style="clear:both;"></div></div>') @table_button += (@submit_btn_str+@reset_btn_str+'<div style="clear:both;"></div></div></div>')
@table_result_choice_fileds = '<div id="cancer_table_right_result">' if @form_to_show.form_result_is_right == 1 @table_result_choice_fileds = '<div id="cancer_table_right_result">' if @form_to_show.form_result_is_right == 1
@table_result_choice_fileds = '<div id="cancer_table_left_result">' if @form_to_show.form_result_is_right == 0 @table_result_choice_fileds = '<div id="cancer_table_left_result">' if @form_to_show.form_result_is_right == 0
@table_result_choice_fileds += '<span class="result_title">'+t('cancerpredict.table.Therapy_choice').to_s+'</span><div style="clear:both;"></div>' @table_result_choice_fileds += '<span class="result_title">'+t('cancerpredict.table.Therapy_choice').to_s+'</span><div style="clear:both;"></div>'
@ -189,12 +217,12 @@ class CancerpredictsController < ApplicationController
@table_result_choice_fileds += '</div>' @table_result_choice_fileds += '</div>'
end end
if @field_property["hint"].to_s != "" if @field_property["hint"].to_s != ""
@table_result_choice_fileds +='<div style="color: rgb(104, 104, 104);font-size:0.75em;clear:both;">'+@field_property["hint"]+'</div>' @table_result_choice_fileds +='<div class="hint-texts">'+@field_property["hint"]+'</div>'
end end
@table_result_choice_fileds += '</div><div style="clear:both;"></div>' @table_result_choice_fileds += '</div><div style="clear:both;"></div>'
end end
@table_result_choice_fileds += '</div></div>' @table_result_choice_fileds += '</div></div></div>'
@table_str += (@table_button+@table_result_str+@table_result_choice_fileds+'<div style="clear:both;"></div></div>') @table_str += (@table_button+@table_result_str+@table_result_choice_fileds+'<div style="clear:both;"></div>')
{ {
"cancerpredict" => [], "cancerpredict" => [],
"extras"=>{"table"=> @table_str} "extras"=>{"table"=> @table_str}
@ -204,7 +232,6 @@ class CancerpredictsController < ApplicationController
uid = OrbitHelper.params[:uid] rescue "" uid = OrbitHelper.params[:uid] rescue ""
tags = OrbitHelper.widget_tags tags = OrbitHelper.widget_tags
categories = OrbitHelper.widget_categories || [] categories = OrbitHelper.widget_categories || []
locale = OrbitHelper.get_site_locale.to_s
end end
def create_first_field def create_first_field
if Cancerpredictfields.where("title"=>(@app_title + "_back")).take_while{true}.count == 0 if Cancerpredictfields.where("title"=>(@app_title + "_back")).take_while{true}.count == 0

View File

@ -18,7 +18,7 @@
border-color: #5d7ca2; border-color: #5d7ca2;
font-weight: 600; font-weight: 600;
} }
.cancer_table_btn:last-child{ .cancer_table_btn::last-of-type{
margin-right:auto; margin-right:auto;
} }
#cancer_table{ #cancer_table{
@ -116,7 +116,7 @@
padding-top: 2em; padding-top: 2em;
} }
#choice_fields{ #choice_fields{
padding: 2em 0 0 1em; padding: 2em 0 0 calc(20% - 1.625em);
} }
.result_tab:hover{ .result_tab:hover{
background: #d16801; background: #d16801;
@ -124,6 +124,12 @@
padding: 0.8em 0.125em 0.5em 1em; padding: 0.8em 0.125em 0.5em 1em;
margin-left: -0.5em; margin-left: -0.5em;
} }
.result_tab.active{
background: #d16801;
background: linear-gradient(135deg, transparent 0.3em, #d16801 0);
padding: 0.8em 0.125em 0.5em 1em;
margin-left: -0.5em;
}
.result_tab > a{ .result_tab > a{
writing-mode: vertical-lr; writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr;
@ -157,10 +163,61 @@
border: 0.125em solid #c0cbdd; border: 0.125em solid #c0cbdd;
padding: 0.5em; padding: 0.5em;
} }
.result_content:first-child{ .result_content:first-of-type{
display: block; display: block;
} }
.result_content a{ .result_content a{
color: #5d7ca2; color: #5d7ca2;
} }
.result_content p{
color: #5d7ca2;
}
.cancer_years{
float:left;
color: #5d7ca2;
background-color: #fff;
border-color: #5d7ca2;
border-width: 0.125em;
margin: 0em;
}
.cancer_years:first-of-type{
margin-left: 1em;
}
.cancer_years:last-of-type{
margin-right: 1em;
}
.cancer_form_field{
margin-left: 1em;
}
#result_table_content a{
float:left;
}
.hint-texts{
color: rgb(104, 104, 104);
font-size: 0.75em;
clear: both;
padding: 0.5em 0;
}
#result_text_content a{
float:left;
}
#result_table_content table{
clear: both;
width:100%;
}
.cancer_th{
color: white;
background-color: #003d79;
border-right: 0.375em solid white;
border-top: 0.375em solid white;
}
.cancer_td {
background-color: #e9eaf5;
border-right: 0.375em solid white;
border-top: 0.375em solid white;
}
#cancer_predict_result_block{
display:block;
font-size: 0.825em;
}
</style> </style>