From 788f495c296032a57ba142fdad4fd1f78ecb22e1 Mon Sep 17 00:00:00 2001 From: BOHUNG Date: Fri, 13 Dec 2019 16:54:46 +0800 Subject: [PATCH] After user submit,user can change input data,to see the result change. --- app/assets/javascripts/cancer_predict.js | 548 ++++++++++++++--------- 1 file changed, 330 insertions(+), 218 deletions(-) diff --git a/app/assets/javascripts/cancer_predict.js b/app/assets/javascripts/cancer_predict.js index fcf0ed9..38a3a3e 100644 --- a/app/assets/javascripts/cancer_predict.js +++ b/app/assets/javascripts/cancer_predict.js @@ -164,7 +164,7 @@ $(document).ready(function(){ $('#cancer_predict_result_block').css('display','none'); $('#danger_texts').remove(); }); - $('#cancer_table_submit').click(function(){ + function get_input_data(){ var flag; flag = 1; for(var i = 0;i < $('#cancer_table .cancer_form_field').length;i++){ @@ -202,225 +202,338 @@ $(document).ready(function(){ post_json[name] = index; }; }; + return post_json; + }else{ + return null; + } + }; + function set_result(result){ + if(result.responseJSON.lpv != "error"){ + var load_heml = $('#result_table_content').html(result.responseJSON.table); + load_heml.ready(function(){ + $('#result_table_content .cancer_years').eq(0).addClass('active'); + for(var i = 0;i < $('#result_table_content .cancer_years').length;i++){ + $('#result_table_content .cancer_years').eq(i).attr('index',i) + }; + $('#result_table_content .cancer_years').off('click').on('click',function(){ + try{ + $(this).parent().find('.cancer_years').removeClass('active'); + }catch{}; + $(this).addClass('active'); + $('#current_year').attr('index',$(this).attr('index')); + $('#current_year').attr('value',$(this).html()); + $('#current_year').change(); + }); + }); + load_heml = $('#result_text_content').html(result.responseJSON.texts); + load_heml.ready(function(){ + $('#result_text_content .cancer_years').eq(0).addClass('active'); + for(var i = 0;i < $('#result_text_content .cancer_years').length;i++){ + $('#result_text_content .cancer_years').eq(i).attr('index',i) + }; + $('#current_year').off('change'); + $('#result_text_content .cancer_years').off('click') + $('#result_text_content .cancer_years').click(function(){ + try{ + $(this).parent().find('.cancer_years').removeClass('active'); + //$('#result_table_content .cancer_years').eq($(this).attr('index')).click(); + }catch{}; + $(this).addClass('active'); + $('#current_year').attr('value',$(this).html()); + $('#current_year').attr('index',$(this).attr('index')); + $('.surgery_year').html($(this).html()); + $('#current_year').change(); + }); + $('#cancer_table_right_result .cancer-btn-group .cancer_table_btn').removeClass('active'); + $('#cancer_table_right_result .cancer-btn-group >input').attr('value',"0"); + for(var i = 0;i < $('#cancer_table_left_result .cancer-btn-group').length;i++){ + $('#cancer_table_right_result .cancer-btn-group').eq(i).find('.cancer_table_btn').eq(0).addClass('active'); + $('#cancer_table_right_result .cancer-btn-group').eq(i).find('>input').eq(0).attr('value',"1"); + }; + for(var i = 0;i < $('#cancer_table_right_result .cancer-btn-group').length;i++){ + $('#cancer_table_right_result .cancer-btn-group').eq(i).find('.cancer_table_btn').eq(0).addClass('active'); + $('#cancer_table_right_result .cancer-btn-group').eq(i).find('>input').eq(0).attr('value',"1"); + }; + var treatmeny_method = result.responseJSON.treatmeny_method; + $('tr.'+treatmeny_method[0]).addClass('tr_show') + var lpv = [0,-0.8397,-0.4147,-0.3203,-0.4687]; + var servive_ratio_arr = [result.responseJSON.servive_ratio] + var yes = (I18n.locale=="zh_tw") ? "是" : "yes"; + var year = $('#current_year').attr('value'); + var active_treatment = ['Surgery_only']; + $('tr.'+active_treatment[0]+' .Overall_Survival').html(servive_ratio_arr[0]+'%'); + $('#cancer_predict_result_block').css('display','block'); + var lpv_real = [result.responseJSON['lpv']]; + var lpv_dict={} + var lpv_calc={1:-0.001476145,3:-0.01261639,5:-0.02519608} + active_treatment.push = function() { + if(arguments.length == 1){ + var year = $('#current_year').attr('value'); + var lpv_current = lpv_real[lpv_real.length-1]+lpv_dict[arguments[0]]; + lpv_real.push(lpv_current); + var servive_ratio = Math.round((Math.exp(lpv_calc[year])**Math.exp(lpv_current))*100); + var benefit = servive_ratio - servive_ratio_arr[servive_ratio_arr.length - 1]; + servive_ratio_arr.push(servive_ratio); + $('tr.'+arguments[0]+' td.Overall_Survival').html(servive_ratio+'%'); + $('tr.'+arguments[0]+' td.Additional_Benefit').html(benefit+'%'); + $('tr.'+arguments[0]).css('display','table-row'); + $('tr.tr_show').eq(-1).after($('tr.'+arguments[0])); + $('tr.'+arguments[0]).addClass('tr_show'); + if(this.length == 1){ + $('.addition').css('display','block'); + $('#result_text_content .extra-text').css('display','inline-block'); + } + var add_choices = this.slice(1,this.length); + add_choices.push(arguments[0]); + var add_choices_transform = []; + for(var i = 0;i= 2) + add_choices_str += ('以及'+add_choices_transform[add_choices_transform.length-1]) + else + add_choices_str = add_choices_transform[0]; + var new_text = '

'+'100 位在術後有接受'+add_choices_str+'的婦女中，有 '+''+servive_ratio+''+' 位婦女，術後 '+''+year+''+'年仍為存活(多了'+''+benefit+'位)'+'

'; + $('#result_text_content .extra-text .texts_show').eq(-1).after(new_text) + return Array.prototype.push.apply(this, arguments); + }else{ + return Array.prototype.push.apply(this, arguments); + } + }; + active_treatment.remove_item_from_array = function(){ + if(arguments.length == 1 && !Array.isArray(arguments[0])){ + var index = this.indexOf(arguments[0]) + var year = $('#current_year').attr('value'); + if(index < this.length - 1){ + for(var i = index + 1;i < this.length; i++){ + lpv_real[i] -= lpv_dict[arguments[0]]; + var servive_ratio = Math.round((Math.exp(lpv_calc[year])**Math.exp(lpv_real[i]))*100); + servive_ratio_arr[i] = servive_ratio; + var benefit = servive_ratio - ((i == index+1) ? servive_ratio_arr[index - 1] : servive_ratio_arr[i - 1]); + $('tr.'+active_treatment[i]+' td.Overall_Survival').html(servive_ratio+'%'); + $('.'+active_treatment[i]+'.Overall_Survival').html(servive_ratio); + $('tr.'+active_treatment[i]+' td.Additional_Benefit').html(benefit+'%'); + $('.'+active_treatment[i]+'.Additional_Benefit').html(benefit); + }; + var add_choices = []; + for(var i = 1;i < this.length; i++){ + if(i != index){ + add_choices.push(this[i]); + var add_choices_transform = []; + for(var j = 0;j= 2) + add_choices_str += ('以及'+add_choices_transform[add_choices_transform.length-1]) + else + add_choices_str = add_choices_transform[0]; + $('.'+active_treatment[i]+'.choices').html(add_choices_str); + } + }; + }; + $('tr.'+arguments[0]+' td.Overall_Survival').html('-'); + $('tr.'+arguments[0]+' td.Additional_Benefit').html('-'); + $('tr.'+arguments[0]).css('display','none'); + $('tr.'+arguments[0]).removeClass('tr_show'); + $('a.'+arguments[0]).eq(0).parent().remove(); + lpv_real = lpv_real.remove_item_from_array(lpv_real[index]); + servive_ratio_arr = servive_ratio_arr.remove_item_from_array(servive_ratio_arr[index]); + if(this.length == 2){ + $('.addition').css('display','none'); + $('#result_text_content .extra-text').css('display','none'); + }; + return Array.prototype.remove_item_from_array.apply(this, arguments); + }else{ + return Array.prototype.remove_item_from_array.apply(this, arguments); + }; + }; + for(var i = 0;iinput').attr('value',0); + $(this).parent().find('>input').eq(index).attr('value',1); + $(this).parent().find('>button').removeClass('active'); + $(this).parent().removeClass('cancertable_empty'); + if($('.cancertable_empty').length == 0){ + $('#danger_texts').remove(); + }; + }catch{}; + $(this).addClass('active'); + if(!click_flag){ + if(!active_treatment.includes($(this).parent().attr('id'))){ + click_flag = true; + active_treatment.push($(this).parent().attr('id')); + click_flag = false; + }; + } + }); + $('#'+treatmeny_method[i]+' .cancer_table_btn').eq(0).off('click'); + $('#'+treatmeny_method[i]+' .cancer_table_btn').eq(0).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'); + if($('.cancertable_empty').length == 0){ + $('#danger_texts').remove(); + }; + }catch{}; + $(this).addClass('active'); + if(!click_flag){ + if(active_treatment.includes($(this).parent().attr('id'))){ + click_flag = true; + active_treatment = active_treatment.remove_item_from_array($(this).parent().attr('id')); + click_flag = false; + }; + }; + }); + }; + $('#current_year').change(function(){ + year = $(this).attr('value'); + $('.surgery_year').html(year); + $('.cancer_years').removeClass('active'); + $('#result_text_content .cancer_years').eq($(this).attr("index")).addClass('active'); + $('#result_table_content .cancer_years').eq($(this).attr("index")).addClass('active'); + var obj = {"servive_ratio_arr":servive_ratio_arr,"active_treatment":active_treatment,"lpv_real":lpv_real,"lpv_calc":lpv_calc,"year":year} + calculate_and_change_result_value(obj); + servive_ratio_arr = obj.servive_ratio_arr; + active_treatment = obj.active_treatment; + lpv_real = obj.lpv_real; + lpv_calc = obj.lpv_calc; + year = obj.year; + }); + $('#cancer_table .cancer_form_field').off('change').on('change',function(){ + var obj = {"servive_ratio_arr":servive_ratio_arr,"active_treatment":active_treatment,"lpv_real":lpv_real,"lpv_calc":lpv_calc,"year":year} + after_submit_change_func(obj); + servive_ratio_arr = obj.servive_ratio_arr; + active_treatment = obj.active_treatment; + lpv_real = obj.lpv_real; + lpv_calc = obj.lpv_calc; + year = obj.year; + }); + $('#cancer_table .cancer_form_field').click(function(){ + $(this).change(); + }); + $('select.select_num').off('click').on('click',function(){ + $(this).change(); + var obj = {"servive_ratio_arr":servive_ratio_arr,"active_treatment":active_treatment,"lpv_real":lpv_real,"lpv_calc":lpv_calc,"year":year} + after_submit_change_func(obj); + servive_ratio_arr = obj.servive_ratio_arr; + active_treatment = obj.active_treatment; + lpv_real = obj.lpv_real; + lpv_calc = obj.lpv_calc; + year = obj.year; + }); + $('.num_only').on('input', function() { + if( Number($(this).val()) < $(this).data('range')[0] || $(this).val() == "" || (Number($(this).val()) > $(this).data('range')[1] && $(this).data('range')[1] != undefined) ){ + $(this).css('color','#f24a69'); + $(this).addClass('cancertable_empty'); + }else{ + $(this).css('color','#333'); + $(this).removeClass('cancertable_empty'); + if($('.cancertable_empty').length == 0){ + $('#danger_texts').remove(); + }; + var obj = {"servive_ratio_arr":servive_ratio_arr,"active_treatment":active_treatment,"lpv_real":lpv_real,"lpv_calc":lpv_calc,"year":year}; + after_submit_change_func(obj); + servive_ratio_arr = obj.servive_ratio_arr; + active_treatment = obj.active_treatment; + lpv_real = obj.lpv_real; + lpv_calc = obj.lpv_calc; + year = obj.year; + }; + }); + }); + }; + }; + function calculate_and_change_result_value(obj){ + obj.servive_ratio_arr = []; + for(var i = 0;i(original_value+new_lpv-old_lpv)); + calculate_and_change_result_value(obj); + }; + }; + function calculate_first_lpv(result_json){ + result = {} + result['age1'] = -Math.pow((Number(result_json['age'])/100),-0.5); + result['age2'] = -Math.pow((Number(result_json['age'])/100),-0.5)*Math.log(result_json['age']/100); + result['size1'] = -Math.log(Number(result_json['size'])/10); + result['nposit'] = -Math.pow(((Number(result_json['ratio'])+0.1)/0.1),0.5); + if( Number(result_json['grade']) == 2) + result['grade_2'] = 1; + else + result['grade_2'] = 0; + if( Number(result_json['grade']) == 3) + result['grade_3'] = 1; + else + result['grade_3'] = 0; + if( Number(result_json['subtype']) == 2) + result['subtype_HER2'] = 1; + else + result['subtype_HER2'] = 0; + if( Number(result_json['subtype']) == 3) + result['subtype_triple'] = 1; + else + result['subtype_triple'] = 0; + if( Number(result_json['pstage']) == 2) + result['pstage_2'] = 1; + else + result['pstage_2'] = 0; + if( Number(result_json['pstage']) == 3) + result['pstage_3'] = 1; + else + result['pstage_3'] = 0; + if( Number(result_json['pstage']) == 4) + result['pstage_4'] = 1; + else + result['pstage_4'] = 0; + if( Number(result_json['lvi']) == 1) + result['lvi_yes'] = 1; + else + result['lvi_yes'] = 0; + try{ + 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['pstage_3']*1.134+result['pstage_4']*2.172+result['lvi_yes']*0.3321-0.04); + }catch{result['lpv'] = "error"}; + return result; + }; + function submit_fcn(){ + var post_json = get_input_data(); + if(post_json != null){ post_json['locale'] = I18n.locale; var result = $.post("/cancerpredictResult",{"data":post_json}); result.done(function(){ - var load_heml = $('#result_table_content').html(result.responseJSON.table); - load_heml.ready(function(){ - $('#result_table_content .cancer_years').eq(0).addClass('active'); - for(var i = 0;i < $('#result_table_content .cancer_years').length;i++){ - $('#result_table_content .cancer_years').eq(i).attr('index',i) - }; - $('#result_table_content .cancer_years').off('click').on('click',function(){ - try{ - $(this).parent().find('.cancer_years').removeClass('active'); - //$('#result_text_content .cancer_years').eq($(this).attr('index')).click(); - }catch{}; - $(this).addClass('active'); - $('#current_year').attr('index',$(this).attr('index')); - $('#current_year').attr('value',$(this).html()); - $('#current_year').change(); - }); - }); - load_heml = $('#result_text_content').html(result.responseJSON.texts); - load_heml.ready(function(){ - $('#result_text_content .cancer_years').eq(0).addClass('active'); - for(var i = 0;i < $('#result_text_content .cancer_years').length;i++){ - $('#result_text_content .cancer_years').eq(i).attr('index',i) - }; - $('#current_year').off('change'); - $('#result_text_content .cancer_years').off('click') - $('#result_text_content .cancer_years').click(function(){ - try{ - $(this).parent().find('.cancer_years').removeClass('active'); - //$('#result_table_content .cancer_years').eq($(this).attr('index')).click(); - }catch{}; - $(this).addClass('active'); - $('#current_year').attr('value',$(this).html()); - $('#current_year').attr('index',$(this).attr('index')); - $('.surgery_year').html($(this).html()); - $('#current_year').change(); - }); - $('#cancer_table_right_result .cancer-btn-group .cancer_table_btn').removeClass('active'); - $('#cancer_table_right_result .cancer-btn-group >input').attr('value',"0"); - for(var i = 0;i < $('#cancer_table_left_result .cancer-btn-group').length;i++){ - $('#cancer_table_right_result .cancer-btn-group').eq(i).find('.cancer_table_btn').eq(0).addClass('active'); - $('#cancer_table_right_result .cancer-btn-group').eq(i).find('>input').eq(0).attr('value',"1"); - }; - for(var i = 0;i < $('#cancer_table_right_result .cancer-btn-group').length;i++){ - $('#cancer_table_right_result .cancer-btn-group').eq(i).find('.cancer_table_btn').eq(0).addClass('active'); - $('#cancer_table_right_result .cancer-btn-group').eq(i).find('>input').eq(0).attr('value',"1"); - }; - var treatmeny_method = result.responseJSON.treatmeny_method; - $('tr.'+treatmeny_method[0]).addClass('tr_show') - var lpv = [0,-0.8397,-0.4147,-0.3203,-0.4687]; - var servive_ratio_arr = [result.responseJSON.servive_ratio] - var yes = (I18n.locale=="zh_tw") ? "是" : "yes"; - var year = $('#current_year').attr('value'); - var active_treatment = ['Surgery_only']; - $('tr.'+active_treatment[0]+' .Overall_Survival').html(servive_ratio_arr[0]+'%'); - $('#cancer_predict_result_block').css('display','block'); - var lpv_real = [result.responseJSON['lpv']]; - var lpv_dict={} - var lpv_calc={1:-0.001476145,3:-0.01261639,5:-0.02519608} - active_treatment.push = function() { - if(arguments.length == 1){ - var year = $('#current_year').attr('value'); - var lpv_current = lpv_real[lpv_real.length-1]+lpv_dict[arguments[0]]; - lpv_real.push(lpv_current); - var servive_ratio = Math.round((Math.exp(lpv_calc[year])**Math.exp(lpv_current))*100); - var benefit = servive_ratio - servive_ratio_arr[servive_ratio_arr.length - 1]; - servive_ratio_arr.push(servive_ratio); - $('tr.'+arguments[0]+' td.Overall_Survival').html(servive_ratio+'%'); - $('tr.'+arguments[0]+' td.Additional_Benefit').html(benefit+'%'); - $('tr.'+arguments[0]).css('display','table-row'); - $('tr.tr_show').eq(-1).after($('tr.'+arguments[0])); - $('tr.'+arguments[0]).addClass('tr_show'); - if(this.length == 1){ - $('.addition').css('display','block'); - $('#result_text_content .extra-text').css('display','inline-block'); - } - var add_choices = this.slice(1,this.length); - add_choices.push(arguments[0]); - var add_choices_transform = []; - for(var i = 0;i= 2) - add_choices_str += ('以及'+add_choices_transform[add_choices_transform.length-1]) - else - add_choices_str = add_choices_transform[0]; - var new_text = '

'+'100 位在術後有接受'+add_choices_str+'的婦女中，有 '+''+servive_ratio+''+' 位婦女，術後 '+''+year+''+'年仍為存活(多了'+''+benefit+'位)'+'

'; - $('#result_text_content .extra-text .texts_show').eq(-1).after(new_text) - return Array.prototype.push.apply(this, arguments); - }else{ - return Array.prototype.push.apply(this, arguments); - } - }; - active_treatment.remove_item_from_array = function(){ - if(arguments.length == 1 && !Array.isArray(arguments[0])){ - var index = this.indexOf(arguments[0]) - var year = $('#current_year').attr('value'); - if(index < this.length - 1){ - for(var i = index + 1;i < this.length; i++){ - lpv_real[i] -= lpv_dict[arguments[0]]; - var servive_ratio = Math.round((Math.exp(lpv_calc[year])**Math.exp(lpv_real[i]))*100); - servive_ratio_arr[i] = servive_ratio; - var benefit = servive_ratio - ((i == index+1) ? servive_ratio_arr[index - 1] : servive_ratio_arr[i - 1]); - $('tr.'+active_treatment[i]+' td.Overall_Survival').html(servive_ratio+'%'); - $('.'+active_treatment[i]+'.Overall_Survival').html(servive_ratio); - $('tr.'+active_treatment[i]+' td.Additional_Benefit').html(benefit+'%'); - $('.'+active_treatment[i]+'.Additional_Benefit').html(benefit); - }; - var add_choices = []; - for(var i = 1;i < this.length; i++){ - if(i != index){ - add_choices.push(this[i]); - var add_choices_transform = []; - for(var j = 0;j= 2) - add_choices_str += ('以及'+add_choices_transform[add_choices_transform.length-1]) - else - add_choices_str = add_choices_transform[0]; - $('.'+active_treatment[i]+'.choices').html(add_choices_str); - } - }; - }; - $('tr.'+arguments[0]+' td.Overall_Survival').html('-'); - $('tr.'+arguments[0]+' td.Additional_Benefit').html('-'); - $('tr.'+arguments[0]).css('display','none'); - $('tr.'+arguments[0]).removeClass('tr_show'); - $('a.'+arguments[0]).eq(0).parent().remove(); - lpv_real = lpv_real.remove_item_from_array(lpv_real[index]); - servive_ratio_arr = servive_ratio_arr.remove_item_from_array(servive_ratio_arr[index]); - if(this.length == 2){ - $('.addition').css('display','none'); - $('#result_text_content .extra-text').css('display','none'); - }; - return Array.prototype.remove_item_from_array.apply(this, arguments); - }else{ - return Array.prototype.remove_item_from_array.apply(this, arguments); - }; - }; - for(var i = 0;iinput').attr('value',0); - $(this).parent().find('>input').eq(index).attr('value',1); - $(this).parent().find('>button').removeClass('active'); - $(this).parent().removeClass('cancertable_empty'); - if($('.cancertable_empty').length == 0){ - $('#danger_texts').remove(); - }; - }catch{}; - $(this).addClass('active'); - if(!click_flag){ - if(!active_treatment.includes($(this).parent().attr('id'))){ - click_flag = true; - active_treatment.push($(this).parent().attr('id')); - console.log(active_treatment); - console.log(servive_ratio_arr); - click_flag = false; - }; - } - }); - $('#'+treatmeny_method[i]+' .cancer_table_btn').eq(0).off('click'); - $('#'+treatmeny_method[i]+' .cancer_table_btn').eq(0).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'); - if($('.cancertable_empty').length == 0){ - $('#danger_texts').remove(); - }; - }catch{}; - $(this).addClass('active'); - if(!click_flag){ - if(active_treatment.includes($(this).parent().attr('id'))){ - click_flag = true; - active_treatment = active_treatment.remove_item_from_array($(this).parent().attr('id')); - console.log(active_treatment); - console.log(servive_ratio_arr); - click_flag = false; - }; - }; - }); - }; - $('#current_year').change(function(){ - $('.surgery_year').html($(this).attr('value')); - $('.cancer_years').removeClass('active'); - $('#result_text_content .cancer_years').eq($(this).attr("index")).addClass('active'); - $('#result_table_content .cancer_years').eq($(this).attr("index")).addClass('active'); - var year = $(this).attr('value'); - servive_ratio_arr = []; - for(var i = 0;i=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false); }); $('.float_num').off('keyup').on('keyup',function(){ - console.log($(this).val()); this.value = this.value.replace(/[^\d.]/g,''); }); $('.num_only').on('input', function() {