diff --git a/app/assets/javascripts/cancer_predict.js b/app/assets/javascripts/cancer_predict.js index 581ef9c..059dc36 100644 --- a/app/assets/javascripts/cancer_predict.js +++ b/app/assets/javascripts/cancer_predict.js @@ -20,7 +20,6 @@ $(document).ready(function(){ }; }; }; - console.log(this) result_array.push = this.push; result_array.remove_item_from_array = this.remove_item_from_array; return result_array; @@ -58,6 +57,22 @@ $(document).ready(function(){ }else{ $(this).parent().find('.num_only').val(input_value+1); }; + compare_value = $(this).parent().find('.num_only').data('range')[0]; + if(compare_value != undefined){ + if($(this).parent().find('.num_only').val() >= compare_value){ + $(this).parent().find('.num_only').removeClass('cancertable_empty'); + $(this).parent().find('.num_only').css('color','#333'); + }; + if($('.cancertable_empty').length == 0){ + $('#danger_texts').remove(); + }; + }else{ + $(this).parent().find('.num_only').removeClass('cancertable_empty'); + $(this).parent().find('.num_only').css('color','#333'); + if($('.cancertable_empty').length == 0){ + $('#danger_texts').remove(); + }; + }; }; }else{ try{ @@ -67,10 +82,13 @@ $(document).ready(function(){ }catch{ $(this).parent().find('.num_only').val(0); }; + if($(this).parent().find('.num_only').val() != ""){ + $(this).parent().find('.num_only').removeClass('cancertable_empty'); + $(this).parent().find('.num_only').css('color','#333'); + }; }; }); $('.btn-sub').click(function(){ - $(this).parent().find('.num_only').removeClass('cancertable_empty'); if($(this).parent().find('.num_only').val()!=""){ var input_value = Number($(this).parent().find('.num_only').val()); if(Array.isArray($(this).parent().find('.num_only').data('range'))){ @@ -86,15 +104,43 @@ $(document).ready(function(){ }else{ $(this).parent().find('.num_only').val(input_value-1); }; + compare_value = $(this).parent().find('.num_only').data('range')[1]; + if(compare_value != undefined){ + if($(this).parent().find('.num_only').val() <= compare_value){ + $(this).parent().find('.num_only').removeClass('cancertable_empty'); + $(this).parent().find('.num_only').css('color','#333'); + }; + if($('.cancertable_empty').length == 0){ + $('#danger_texts').remove(); + }; + }else{ + $(this).parent().find('.num_only').removeClass('cancertable_empty'); + $(this).parent().find('.num_only').css('color','#333'); + if($('.cancertable_empty').length == 0){ + $('#danger_texts').remove(); + }; + }; }; }else{ try{ var input_value = $(this).parent().find('.num_only').data('range')[1]; - if(input_value != undefined) + if(input_value != undefined){ $(this).parent().find('.num_only').val(input_value); + }else{ + input_value = $(this).parent().find('.num_only').data('range')[0]; + if(input_value != undefined) + $(this).parent().find('.num_only').val(input_value); + } }catch{ $(this).parent().find('.num_only').val(0); }; + if($(this).parent().find('.num_only').val() != ""){ + $(this).parent().find('.num_only').removeClass('cancertable_empty'); + $(this).parent().find('.num_only').css('color','#333'); + }; + }; + if($('.cancertable_empty').length == 0){ + $('#danger_texts').remove(); }; }); $('.cancer_table_btn').off('click').on('click',function(){ @@ -104,6 +150,9 @@ $(document).ready(function(){ $(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'); }); @@ -133,6 +182,13 @@ $(document).ready(function(){ } }; } + if($('.cancertable_empty').length != 0){ + flag = 0; + $('#cancer_table_submit').parent().before('請注意紅框的輸入資料是否符合要求'); + $('#danger_texts').css('margin-left',$(window).width()/2-$('#danger_texts').width()/2); + }else{ + $('#danger_texts').remove(); + }; if(flag == 1){ var post_json= {}; for(var i = 0;i < $('#cancer_table .cancer_form_field').length;i++){ @@ -181,6 +237,8 @@ $(document).ready(function(){ $('.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"); @@ -196,7 +254,8 @@ $(document).ready(function(){ var yes = (I18n.locale=="zh_tw") ? "是" : "yes"; var year = $('#current_year').attr('value'); var active_treatment = ['Surgery_only']; - $('.'+active_treatment[0]+' .Overall_Survival').html(servive_ratio_arr[0]); + $('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} @@ -272,13 +331,11 @@ $(document).ready(function(){ $('tr.'+arguments[0]).removeClass('tr_show'); $('a.'+arguments[0]).eq(0).parent().remove(); lpv_real = lpv_real.remove_item_from_array(lpv_real[index]); - console.log(lpv_real); 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'); }; - console.log(arguments[0]); return Array.prototype.remove_item_from_array.apply(this, arguments); }else{ return Array.prototype.remove_item_from_array.apply(this, arguments); @@ -289,13 +346,11 @@ $(document).ready(function(){ $('#'+treatmeny_method[i]+' .cancer_table_btn').eq(1).click(function(){ if(!active_treatment.includes($(this).parent().attr('id'))){ active_treatment.push($(this).parent().attr('id')) - console.log($(this).parent().attr('id')) }; }); $('#'+treatmeny_method[i]+' .cancer_table_btn').eq(0).click(function(){ if(active_treatment.includes($(this).parent().attr('id'))){ active_treatment = active_treatment.remove_item_from_array($(this).parent().attr('id')); - console.log(active_treatment); }; }); }; @@ -338,13 +393,20 @@ $(document).ready(function(){ $('.result_content[index="'+index+'"]').css('display','block'); }) $('.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++) - $('.num_only').eq(i).data('range') + $('.num_only').blur(function(){ + if( Number($(this).val()) < $(this).data('range')[0]){ + $(this).css('color','#f24a69'); + $(this).addClass('cancertable_empty'); + console.log($(this).val()) + }else{ + $(this).css('color','#333'); + $(this).removeClass('cancertable_empty'); + if($('.cancertable_empty').length == 0){ + $('#danger_texts').remove(); + }; + } + }) }); diff --git a/app/assets/stylesheets/cancer_predict.css b/app/assets/stylesheets/cancer_predict.css new file mode 100644 index 0000000..30fc5b6 --- /dev/null +++ b/app/assets/stylesheets/cancer_predict.css @@ -0,0 +1,253 @@ +#cancer_table *[data-key]{ + padding: 0.375em 0; +} +.cencer_table_name{ + display: inline-block; + vertical-align: middle; + width: 6.25em; + color:#5d7ca2; +} +.cancer_table_btn{ + margin-right: 0.5em; + color:#5d7ca2; + border-color: #5d7ca2; + font-weight: 600; +} +.cancer_table_btn::last-of-type{ + margin-right:auto; +} +#cancer_table{ + font-size:0.825em; +} +input.num_only{ + color: black; + border-top: 0.125em solid rgb(221, 221, 221); + width: 4.125em; + padding: 0em 0em 0.25em; + border-left: 0.125em solid rgb(221, 221, 221); + text-align: center; + font-size: 0.875em; + background-color: rgb(255, 255, 255); + height: 2.25em; +} +#cancer_table_left{ + float:left; + width:50%; +} +#cancer_table_right{ + float:right; + width:50%; +} +#cancer_table_submit{ + margin-left: 1em; + float: right; + background-color: rgb(210, 105, 0); + color: white; + border: 0em; + padding: 0.125em 0.5em; + border-radius: 0.5em; +} +#cancer_table_reset{ + float: right; + background-color: rgb(210, 105, 0); + color: white; + border: 0em; + padding: 0.125em 0.5em; + border-radius: 0.5em; +} +.btn-sub{ + background:url("/assets/cancerpredict/triangle_sub.png") no-repeat top transparent; + position: relative; + width: 1.875em; + border: 0; + height: 1.875em; + background-size: contain; + top:1em; + bottom: -0.7em; + padding: 0; +} +.btn-add{ + background:url("/assets/cancerpredict/triangle_add.png") no-repeat top transparent; + position: relative; + width: 1.875em; + border: 0; + height: 1.875em; + background-size: contain; + right: 1.815em; + top: -0.3em; + padding: 0; +} +.cancer_table_btn:focus{ + color: #5d7ca2 !important; + background-color: #9dc3e6 !important; + border-color: #8c8c8c !important; +} +.cancer_table_btn:hover{ + color: #5d7ca2 !important; + background-color: #9dc3e6 !important; + border-color: #8c8c8c !important; +} +.cancer_table_btn.active{ + color: #5d7ca2; + background-color: #9dc3e6; + border-color: #8c8c8c; +} +.cancertable_empty{ + border: 3px solid pink !important; + border-radius: 5px !important; + padding: 2px !important; +} +.result_title{ + background-color: rgb(210, 105, 0); + color: white; + border: 0em; + padding: 0.125em 0.5em; + border-radius: 0.5em; +} +.result_tab{ + background: #023d79; + background: linear-gradient(135deg, transparent 0.3em, #023d79 0); + border: none; + float:right; + padding: 0.5em 0.125em 0.5em 0.5em; + margin-top: 0.5em; + cursor: pointer; +} +#cancer_table a:hover{ + text-decoration: none; + color: #5d7ca2; +} +#result_contents{ + padding-top: 2em; +} +#choice_fields{ + padding: 2em 0 0 calc(20% - 1.625em); +} +.result_tab:hover{ + 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.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{ + writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + color: white; +} +.result_tab_group{ + width: 20%; + margin: 0; + float: left; +} +#cancer_predict_result{ + width: 50%; + float: left; +} +#cancer_table_left_result{ + width: 50%; + float: left; +} +#cancer_table_right_result{ + width: 50%; + float: right; +} +.result_content_group{ + width: 80%; + margin: 0; + float: right; +} +.result_content{ + display: none; + min-height: 25em; + border: 0.125em solid #c0cbdd; + padding: 0.5em; +} +.result_content:first-of-type{ + display: block; +} +.result_content a{ + 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%; + table-layout: fixed; + overflow-wrap: break-word; +} +#result_table_content table tbody tr{ + display: none; +} +#result_table_content table tbody tr:first-of-type{ + display: table-row; +} +.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:none; + font-size: 0.825em; +} +p.texts_show{ + display: list-item; + margin-left: 1.5em; + clear: both; +} +div.texts_show{ + display: block; + margin-left: 0; +} +.addition{ + display: none; +} +#cancer_table_right_result .cancer_table_btn{ + padding: 0.25em 1em; +} +#cancer_table_left_result .cancer_table_btn{ + padding: 0.25em 1em; +} \ No newline at end of file diff --git a/app/controllers/cancerpredicts_controller.rb b/app/controllers/cancerpredicts_controller.rb index 96fd9b0..e3cca2b 100644 --- a/app/controllers/cancerpredicts_controller.rb +++ b/app/controllers/cancerpredicts_controller.rb @@ -171,7 +171,7 @@ class CancerpredictsController < ApplicationController @table_str_right += '' @table_str += (@table_str_left+@table_str_right) @table_str +='
' - @table_result_str = '