From 3353d1595bda539dbc4daabcc8031b7a814ba4cf Mon Sep 17 00:00:00 2001
From: BOHUNG <naruto0426@rulingcom.com>
Date: Wed, 27 Nov 2019 21:24:09 +0800
Subject: [PATCH] add create the cancer_predict_tool_table

---
 app/controllers/cancerpredicts_controller.rb  | 79 +++++++++++++------
 .../_cancer_predict_widget.html.erb           | 55 +++++++------
 .../cancer_predict_index.html.erb             | 51 ++++++------
 3 files changed, 109 insertions(+), 76 deletions(-)

diff --git a/app/controllers/cancerpredicts_controller.rb b/app/controllers/cancerpredicts_controller.rb
index cecbdd3..776baf5 100644
--- a/app/controllers/cancerpredicts_controller.rb
+++ b/app/controllers/cancerpredicts_controller.rb
@@ -12,9 +12,10 @@ class CancerpredictsController < ApplicationController
 	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_left_str = '<div id="cancer_table_left">'
+	@table_right_str = '<div id="cancer_table_right">'
 	create_first_field
-	@form_to_show.form_show.each do |num,property| 
-		@table_str += '<div data-key='+num.to_s+'>'
+	@form_to_show.form_show.each do |num,property|
 		@field_property = {}
 		property.each do |key,value|
 			@value= value
@@ -25,31 +26,61 @@ class CancerpredictsController < ApplicationController
 			end
 			@field_property[key] = @disp_value
 		end
-		break if @field_property["name"] == ""
-		@table_str += '<label for="'+@field_property["variable"]+'" style="float:left;'+(@field_property["comment_text"] == "" ? "margin-right: 2.125em;" : "")+'" class="cencer_table_name">'
-		@table_str += @field_property["name"]
-		@table_str += '</label>'
-		if @field_property["comment_text"] != ""
-			@table_str += '<button tabindex="0" class="cancer_help_btn" data-target="#show_help_modal" style="float:left;cursor: pointer;padding: 0em 0.475em;font-size: 1.25em;border-radius: 15px;background-color: rgb(210, 106, 2);border-color: rgb(210, 106, 2);color: white;"></button>'
-			@table_str += '<input class="help_texts" type="hidden" value="'+@field_property["comment_text"]+'" name='+@field_property["variable"]+'>'
-		else
-			@table_str += '<div style="margin-right: 2.125em;"></div>'
-		end
-		if @field_property["is_num"] == 1
-			@table_str += '<input class="num_only" id="'+@field_property["variable"]+'" style="float:left;clear:right;"></input>'
-		else
-			@table_str += '<div id="'+@field_property["variable"]+'" style="float:left;clear:right;">'
-			@field_property["choice_fields"].each do |create_choice|
-				@table_str += '<button class="cancer_table_btn  btn btn-default btn-sm">'+create_choice+'</button>'
-				@table_str += '<input type="hidden" value="0" name="'+create_choice+'"></input>'
+		if @field_property['right'] == 0
+			@table_str_left += '<div data-key='+num.to_s+'>'
+			break if @field_property["name"] == ""
+			@table_str_left += '<label for="'+@field_property["variable"]+'" style="float:left;'+(@field_property["comment_text"] == "" ? "margin-right: 2.125em;" : "")+'" class="cencer_table_name">'
+			@table_str_left += @field_property["name"]
+			@table_str_left += '</label>'
+			if @field_property["comment_text"] != ""
+				@table_str_left += '<button tabindex="0" class="cancer_help_btn" data-target="#show_help_modal" style="float:left;cursor: pointer;padding: 0em 0.475em;font-size: 1.25em;border-radius: 15px;background-color: rgb(210, 106, 2);border-color: rgb(210, 106, 2);color: white;"></button>'
+				@table_str_left += '<input class="help_texts" type="hidden" value="'+@field_property["comment_text"]+'" name='+@field_property["variable"]+'>'
+			else
+				@table_str_left += '<div style="margin-right: 2.125em;"></div>'
 			end
-			@table_str += ''
+			if @field_property["is_num"] == 1
+				@table_str_left += '<input class="num_only" id="'+@field_property["variable"]+'" style="float:left;clear:right;"></input>'
+			else
+				@table_str_left += '<div id="'+@field_property["variable"]+'" style="float:left;clear:right;">'
+				@field_property["choice_fields"].each do |create_choice|
+					@table_str_left += '<button class="cancer_table_btn  btn btn-default btn-sm">'+create_choice+'</button>'
+					@table_str_left += '<input type="hidden" value="0" name="'+create_choice+'"></input>'
+				end
+			end
+			if @field_property["hint"].to_s != ""
+				@table_str_left +='<div style="color: rgb(104, 104, 104);font-size:0.75em;clear:both;">'+@field_property["hint"]+'</div>'
+			end
+			@table_str_left += '</div><div style="clear:both;"></div>'
+			@table_str_left += '</div>'
+		else
+			@table_str_right += '<div data-key='+num.to_s+'>'
+			break if @field_property["name"] == ""
+			@table_str_right += '<label for="'+@field_property["variable"]+'" style="float:left;'+(@field_property["comment_text"] == "" ? "margin-right: 2.125em;" : "")+'" class="cencer_table_name">'
+			@table_str_right += @field_property["name"]
+			@table_str_right += '</label>'
+			if @field_property["comment_text"] != ""
+				@table_str_right += '<button tabindex="0" class="cancer_help_btn" data-target="#show_help_modal" style="float:left;cursor: pointer;padding: 0em 0.475em;font-size: 1.25em;border-radius: 15px;background-color: rgb(210, 106, 2);border-color: rgb(210, 106, 2);color: white;"></button>'
+				@table_str_right += '<input class="help_texts" type="hidden" value="'+@field_property["comment_text"]+'" name='+@field_property["variable"]+'>'
+			else
+				@table_str_right += '<div style="margin-right: 2.125em;"></div>'
+			end
+			if @field_property["is_num"] == 1
+				@table_str_right += '<input class="num_only" id="'+@field_property["variable"]+'" style="float:left;clear:right;"></input>'
+			else
+				@table_str_right += '<div id="'+@field_property["variable"]+'" style="float:left;clear:right;">'
+				@field_property["choice_fields"].each do |create_choice|
+					@table_str_right += '<button class="cancer_table_btn  btn btn-default btn-sm">'+create_choice+'</button>'
+					@table_str_right += '<input type="hidden" value="0" name="'+create_choice+'"></input>'
+				end
+			end
+			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>'
+			end
+			@table_str_right += '</div><div style="clear:both;"></div>'
+			@table_str_right += '</div>'
 		end
-		if @field_property["hint"].to_s != ""
-			@table_str +='<div style="color: rgb(104, 104, 104);font-size:0.75em;clear:both;">'+@field_property["hint"]+'</div>'
-		end
-		@table_str += '</div><div style="clear:both;"></div>'
 	end
+	@table_str+= (@table_str_right+@table_str_right)
 	@table_str+='</div>'
 	{
       "cancerpredict" => [],
diff --git a/modules/cancerpredict/_cancer_predict_widget.html.erb b/modules/cancerpredict/_cancer_predict_widget.html.erb
index 9de2038..dfe4b0a 100644
--- a/modules/cancerpredict/_cancer_predict_widget.html.erb
+++ b/modules/cancerpredict/_cancer_predict_widget.html.erb
@@ -1,32 +1,31 @@
-<div>
-	<%= javascript_include_tag "react.js"%>
-	<script type="text/javascript" src="/assets/jquery.smartmenus.min.js"></script>
-	<script type="text/javascript" src="/assets/jquery.smartmenus.bootstrap.min.js"></script>
-	<h3 class="w-cancer-tool__widget-title">
-		<span>{{widget-title}}</span>
-	</h3>
-	<div class="w-cancer-tool  widget-cancerpredict-1">
-	  <div class="w-cancer-tool" data-level="0" data-list="cancerpredict">
-		<div class="w-cancer-tool" data-level="1" data-list="cancerpredict">
-			<div id="app">
-				<div class="loader-overlay">
-					<div class="loader" id="loader-1">&nbsp;</div>
-					<div class="loader-text" id="id-loader-text">Loading...</div>
-				</div>
-			</div>
-		</div>
-	  </div>
-	</div>
-</div>
+<script type="text/javascript" src="/assets/jquery.smartmenus.min.js"></script>
+<script type="text/javascript" src="/assets/jquery.smartmenus.bootstrap.min.js"></script>
+<script type="text/javascript" src="/assets/cancer_predict.js"></script>
+{{table}}
 <style>
-	.form-group.has-error > :nth-child(3) {
-		border: 3px solid pink !important;
-		border-radius: 5px !important;
-		padding: 2px !important;
+	.cencer_table_name{
+		display: inline-block;
+		vertical-align: middle;
+		width: 6.25em;
 	}
-	.form-group > :nth-child(3) {
-		border: 3px solid white !important;
-		border-radius: 5px !important;
-		padding: 2px !important;
+	.cancer_table_btn{
+	    margin-right: 0.5em;
+	}
+	.cancer_table_btn:last-child{
+		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;
 	}
 </style>
\ No newline at end of file
diff --git a/modules/cancerpredict/cancer_predict_index.html.erb b/modules/cancerpredict/cancer_predict_index.html.erb
index 42c3a96..dfe4b0a 100644
--- a/modules/cancerpredict/cancer_predict_index.html.erb
+++ b/modules/cancerpredict/cancer_predict_index.html.erb
@@ -1,28 +1,31 @@
-<div>
-	<script src="/assets/react.js"></script>
-	<script type="text/javascript" src="/assets/jquery.smartmenus.min.js"></script>
-	<script type="text/javascript" src="/assets/jquery.smartmenus.bootstrap.min.js"></script>
-	<h1 class="i-cancer-title">{{page-title}}</h1>
-	<div class="i-cancer-tool  widget-announcement-1">
-	  <div class="i-cancer-tool" data-level="0" data-list="statuses">
-		<div id="app">
-			<div class="loader-overlay">
-				<div class="loader" id="loader-1">&nbsp;</div>
-				<div class="loader-text" id="id-loader-text">Loading...</div>
-			</div>
-		</div>
-	  </div>
-	</div>
-</div>
+<script type="text/javascript" src="/assets/jquery.smartmenus.min.js"></script>
+<script type="text/javascript" src="/assets/jquery.smartmenus.bootstrap.min.js"></script>
+<script type="text/javascript" src="/assets/cancer_predict.js"></script>
+{{table}}
 <style>
-	.form-group.has-error > :nth-child(3) {
-		border: 3px solid pink !important;
-		border-radius: 5px !important;
-		padding: 2px !important;
+	.cencer_table_name{
+		display: inline-block;
+		vertical-align: middle;
+		width: 6.25em;
 	}
-	.form-group > :nth-child(3) {
-		border: 3px solid white !important;
-		border-radius: 5px !important;
-		padding: 2px !important;
+	.cancer_table_btn{
+	    margin-right: 0.5em;
+	}
+	.cancer_table_btn:last-child{
+		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;
 	}
 </style>
\ No newline at end of file