From f6a1e0be93b083618c4f45d448f52ae15dc57129 Mon Sep 17 00:00:00 2001
From: soif <wxopwx@gmail.com>
Date: Wed, 26 Apr 2017 15:35:33 +0200
Subject: [PATCH] change bit text inputs to radio inputs

---
 .../smarty/skins/default/pages/utils_calc.tpl | 75 ++++++++++++++-----
 www/static/global/css/main.css                |  4 +
 2 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/www/inc/smarty/skins/default/pages/utils_calc.tpl b/www/inc/smarty/skins/default/pages/utils_calc.tpl
index 5d67be5d..93e09edf 100755
--- a/www/inc/smarty/skins/default/pages/utils_calc.tpl
+++ b/www/inc/smarty/skins/default/pages/utils_calc.tpl
@@ -4,7 +4,8 @@
 <div class='div_calc'>
 	<table class="table table_code">
 		<tr class='tr_label'>
-			<td class='td_name'>Label</td>
+			<td class='td_name'>Label :</td>
+			<td class='td_name2'></td>
 			<td class=''>1</td>
 			<td class=''>2</td>
 			<td class=''>3</td>
@@ -17,23 +18,54 @@
 			<td class=''>D</td>
 		</tr>
 		<tr class='tr_dip'>
-			<td class='td_name'>DIP Values</td>
-			<td class=''><input type='text' name='ab400_h[0]' value='0' size=1></td>
-			<td class=''><input type='text' name='ab400_h[1]' value='0' size=1></td>
-			<td class=''><input type='text' name='ab400_h[2]' value='0' size=1></td>
-			<td class=''><input type='text' name='ab400_h[3]' value='0' size=1></td>
+			<td class='td_name'>DIP Values :</td>
+			<td class='td_name2'>1<br>0</td>
+			<td class=''>
+				<input type='radio' name='ab400_h[0]' value='1'><br>
+				<input type='radio' name='ab400_h[0]' value='0' checked="checked">
+			</td>
+			<td class=''>
+				<input type='radio' name='ab400_h[1]' value='1'><br>
+				<input type='radio' name='ab400_h[1]' value='0' checked="checked">
+			</td>
+			<td class=''>
+				<input type='radio' name='ab400_h[2]' value='1'><br>
+				<input type='radio' name='ab400_h[2]' value='0' checked="checked">
+			</td>
+			<td class=''>
+				<input type='radio' name='ab400_h[3]' value='1'><br>
+				<input type='radio' name='ab400_h[3]' value='0' checked="checked">
+			</td>
+
 			<td class='td_sep'></td>
-			<td class=''><input type='text' name='ab400_u[1]' value='0' size=1></td>
-			<td class=''><input type='text' name='ab400_u[2]' value='0' size=1></td>
-			<td class=''><input type='text' name='ab400_u[3]' value='0' size=1></td>
-			<td class=''><input type='text' name='ab400_u[4]' value='0' size=1></td>
-			<td class=''><input type='text' name='ab400_u[0]' value='0' size=1></td>
+
+			<td class=''>
+				<input type='radio' name='ab400_u[1]' value='1'><br>
+				<input type='radio' name='ab400_u[1]' value='0' checked="checked">
+			</td>
+			<td class=''>
+				<input type='radio' name='ab400_u[2]' value='1'><br>
+				<input type='radio' name='ab400_u[2]' value='0' checked="checked">
+			</td>
+			<td class=''>
+				<input type='radio' name='ab400_u[3]' value='1'><br>
+				<input type='radio' name='ab400_u[3]' value='0' checked="checked">
+			</td>
+			<td class=''>
+				<input type='radio' name='ab400_u[4]' value='1'><br>
+				<input type='radio' name='ab400_u[4]' value='0' checked="checked">
+			</td>
+			<td class=''>
+				<input type='radio' name='ab400_u[0]' value='1'><br>
+				<input type='radio' name='ab400_u[0]' value='0' checked="checked">
+			</td>
 		</tr>
 		<tr class='tr_code'>
-			<td class='td_name'>Code</td>
-			<td class='td_code' colspan=4>House : <input type='text' id='ab400_house' value='' size=2></td>
+			<td class='td_name'>Code :</td>
+			<td class='td_name2'></td>
+			<td class='td_code' colspan=4>House <input type='text' id='ab400_house' value='' size=2></td>
 			<td class='td_sep'></td>
-			<td class='td_code' colspan=6>Unit : <input type='text' id='ab400_unit' value='' size=2></td>
+			<td class='td_code' colspan=6>Unit <input type='text' id='ab400_unit' value='' size=2></td>
 		</tr>
 	</table>
 	<span id='d'></span>
@@ -41,6 +73,7 @@
 
 
 <script language=javascript>
+/* --------------------------------------------- */
 $(document).ready(function() {
 	$('#ab400_house').keyup(function(){
 		var val = $(this).val();
@@ -55,17 +88,22 @@ $(document).ready(function() {
 	ab400_BindBinaryForm('ab400_u');
 });
 
+/* --------------------------------------------- */
 function ab400_BindBinaryForm(id){
 	$('input[name^="'+id+'["]').each(function(i) {
-		$("input[name='"+id+'['+i+"]']").keyup(function(){
+		/* $("input[name='"+id+'['+i+"]']").keyup(function(){ */
+		$("input[name='"+id+'['+i+"]']").change(function(){
 			ab400_ParseBinaryForm(id);
 		});
 	});	
 }
+
+/* --------------------------------------------- */
 function ab400_ParseBinaryForm(id){
 	var bin='';
 	for(i = 0; i < 7; i++){
-		var bit=$("input[name='"+id+'['+i+"]']");
+		/* var bit=$("input[name='"+id+'['+i+"]']"); */
+		var bit=$("input[name='"+id+'['+i+"]']:checked");
 		if(bit.length){
 			bin +=bit.val();
 		}
@@ -85,6 +123,7 @@ function ab400_ParseBinaryForm(id){
 	console.log(id+'='+bin+' --> '+val);
 }
 
+/* --------------------------------------------- */
 function DecToBinForm(val, len, id){
 	if(isNaN(val)){
 		val=0
@@ -92,10 +131,12 @@ function DecToBinForm(val, len, id){
 	var bin =PadBinary(Number(val).toString(2),len);
 	console.log('val: '+val+', bin: '+bin);
 	for(i = 0; i < len; i++){
-		$("input[name='"+id+'['+i+"]']").val(bin[i]);
+		/* $("input[name='"+id+'['+i+"]']").val(bin[i]); */
+		$("input[name='"+id+'['+i+"]'][value="+bin[i]+"]").attr('checked', 'checked');
 	}
 }
 
+/* --------------------------------------------- */
 function PadBinary(n, p, c) {
     var pad_char = typeof c !== 'undefined' ? c : '0';
     var pad = new Array(1 + p).join(pad_char);
diff --git a/www/static/global/css/main.css b/www/static/global/css/main.css
index e23cf807..b503b20d 100644
--- a/www/static/global/css/main.css
+++ b/www/static/global/css/main.css
@@ -1089,6 +1089,9 @@ html, body {
 #body_utils_calc .tr_dip td{
 	padding-bottom: 25px;
 }
+#body_utils_calc .tr_dip INPUT{
+	margin-bottom: 3px;
+}
 #body_utils_calc .tr_label td,
 #body_utils_calc .tr_dip input{
 	text-align:center
@@ -1099,6 +1102,7 @@ html, body {
 }
 #body_utils_calc .td_code INPUT{
 	margin-left: 10px;
+	text-align: center;
 }
 #body_utils_calc td.td_name{
 	text-align: right;