From e991ae16c1a1068ad5b49bab9c0429e656ab5203 Mon Sep 17 00:00:00 2001
From: didierfred <didierfred@gmail.com>
Date: Mon, 29 Oct 2018 22:08:47 +0100
Subject: [PATCH] add toogle buttton for active header modification
---
popup/config.js | 59 ++++++++++++++++++++++++++++++++++++++++---------
1 file changed, 48 insertions(+), 11 deletions(-)
diff --git a/popup/config.js b/popup/config.js
index 9ed84eb..e8c94aa 100644
--- a/popup/config.js
+++ b/popup/config.js
@@ -42,28 +42,63 @@ html = html + "<td><input class=\"form_control input_field\" id=\"header_name"+
html = html + "<td><input class=\"form_control input_field\" size=\"28\" id=\"header_value"+ line_number + "\"></input></td>";
html = html + "<td><input class=\"form_control input_field\" size=\"28\" id=\"comment"+ line_number + "\"></input></td>";
html = html + "<td><select class=\"form_control select_field\" id=\"apply_on" + line_number + "\"><option value=\"req\"> Request </option><option value=\"res\">Response</option></select></td>";
-html = html + "<td><select class=\"form_control select_field\" id=\"select_status" + line_number + "\"><option value=\"on\"> ON </option><option value=\"off\">OFF</option></select></td>";
-html = html + "<td> <a href=\"#\" title=\"Move line up\" id=\"up_button" + line_number + "\" class=\"btn btn-default btn-sm\"> <span class=\"glyphicon glyphicon-arrow-up\"></span></a></td>";
-html = html + "<td> <a href=\"#\" title=\"Move line down\" id=\"down_button" + line_number + "\" class=\"btn btn-default btn-sm\"> <span class=\"glyphicon glyphicon-arrow-down\"></span></a></td>";
-html = html + "<td> <a href=\"#\" title=\"Delete line\" id=\"delete_button" + line_number + "\" class=\"btn btn-primary btn-sm\"> <span class=\"glyphicon glyphicon-trash\"></span></a></td>";
+//html = html + "<td><select class=\"form_control select_field\" id=\"select_status" + line_number + "\"><option value=\"on\"> ON </option><option value=\"off\">OFF</option></select></td>";
+html = html + "<td><a href=\"#\" title=\"Activate/Descativate rule\" id=\"activate_button" + line_number + "\" class=\"btn btn-primary btn-sm\">ON <span class=\"glyphicon glyphicon-ok\"></span></a></td>";
+html = html + "<td><a href=\"#\" title=\"Move line up\" id=\"up_button" + line_number + "\" class=\"btn btn-default btn-sm\"> <span class=\"glyphicon glyphicon-arrow-up\"></span></a></td>";
+html = html + "<td><a href=\"#\" title=\"Move line down\" id=\"down_button" + line_number + "\" class=\"btn btn-default btn-sm\"> <span class=\"glyphicon glyphicon-arrow-down\"></span></a></td>";
+html = html + "<td><a href=\"#\" title=\"Delete line\" id=\"delete_button" + line_number + "\" class=\"btn btn-primary btn-sm\"> <span class=\"glyphicon glyphicon-trash\"></span></a></td>";
var newTR = document.createElement("tr");
newTR.id="line" + line_number;
newTR.innerHTML = html;
document.getElementById("config_tab").appendChild(newTR);
document.getElementById("select_action"+line_number).value = action;
-document.getElementById("select_status"+line_number).value = status;
+//document.getElementById("select_status"+line_number).value = status;
document.getElementById("apply_on"+line_number).value = apply_on;
document.getElementById("header_name"+line_number).value = header_name;
document.getElementById("header_value"+line_number).value = header_value;
document.getElementById("comment"+line_number).value = comment;
var line_number_to_modify = line_number;
+document.getElementById('activate_button'+line_number).addEventListener('click',function (e) {switch_activate_button(line_number_to_modify)});
+setButtonStatus(document.getElementById('activate_button'+line_number),status);
document.getElementById('delete_button'+line_number).addEventListener('click',function (e) {delete_line(line_number_to_modify)});
document.getElementById('up_button'+line_number).addEventListener('click',function (e) {invert_line(line_number_to_modify,line_number_to_modify-1)});
document.getElementById('down_button'+line_number).addEventListener('click',function (e) {invert_line(line_number_to_modify,line_number_to_modify+1)});
line_number++;
}
+function setButtonStatus(button,status)
+{
+if (status=="on")
+ {
+ button.className="btn btn-primary btn-sm";
+ button.innerHTML="ON <span class=\"glyphicon glyphicon-ok\"></span>";
+ }
+else
+ {
+ button.className="btn btn-default btn-sm";
+ button.innerHTML="OFF <span class=\"glyphicon glyphicon-ban-circle\"></span>";
+ }
+}
+
+function getButtonStatus(button)
+{
+if (button.className=="btn btn-primary btn-sm") return "on";
+return "off";
+}
+
+
+function switch_activate_button(button_number)
+{
+var activate_button = document.getElementById("activate_button"+button_number);
+
+// Button is ON
+if (getButtonStatus(activate_button)=="on") setButtonStatus(activate_button,"off");
+
+// Button is OFF
+else setButtonStatus(activate_button,"on");
+
+}
/**
* Create a JSON String representing the configuration data
@@ -82,7 +117,7 @@ function create_configuration_data()
var header_value = tr_elements[i].childNodes[2].childNodes[0].value;
var comment = tr_elements[i].childNodes[3].childNodes[0].value;
var apply_on = tr_elements[i].childNodes[4].childNodes[0].value;
- var status = tr_elements[i].childNodes[5].childNodes[0].value;
+ var status = getButtonStatus(tr_elements[i].childNodes[5].childNodes[0]);
headers.push({action:action,header_name:header_name,header_value:header_value,comment:comment,apply_on:apply_on,status:status});
}
if (document.getElementById("debug_mode").checked) debug_mode=true ;
@@ -271,12 +306,14 @@ function delete_line(line_number_to_delete)
document.getElementById("header_name"+i).value = document.getElementById("header_name"+j).value;
document.getElementById("header_value"+i).value = document.getElementById("header_value"+j).value;
document.getElementById("comment"+i).value = document.getElementById("comment"+j).value;
- document.getElementById("select_status"+i).value = document.getElementById("select_status"+j).value;
+ //document.getElementById("select_status"+i).value = document.getElementById("select_status"+j).value;
+ setButtonStatus(document.getElementById("activate_button"+i),getButtonStatus(document.getElementById("activate_button"+j)));
document.getElementById("apply_on"+i).value = document.getElementById("apply_on"+j).value;
+
}
}
var Node_to_delete = document.getElementById("line"+(line_number-1));
- Node_to_delete.parentNode.removeChild(Node_to_delete);
+ Node_to_delete.parentNode.removeChild(Node_to_delete);
line_number--;
}
@@ -296,7 +333,7 @@ function invert_line(line1, line2)
var header_name1 = document.getElementById("header_name"+line1).value;
var header_value1= document.getElementById("header_value"+line1).value;
var comment1 = document.getElementById("comment"+line1).value;
- var select_status1 = document.getElementById("select_status"+line1).value;
+ var select_status1 = getButtonStatus(document.getElementById("activate_button"+line1));
var apply_on1 = document.getElementById("apply_on"+line1).value;
// Copy line 2 to line 1
@@ -304,7 +341,7 @@ function invert_line(line1, line2)
document.getElementById("header_name"+line1).value = document.getElementById("header_name"+line2).value;
document.getElementById("header_value"+line1).value = document.getElementById("header_value"+line2).value;
document.getElementById("comment"+line1).value = document.getElementById("comment"+line2).value;
- document.getElementById("select_status"+line1).value = document.getElementById("select_status"+line2).value;
+ setButtonStatus(document.getElementById("activate_button"+line1),getButtonStatus(document.getElementById("activate_button"+line2)));
document.getElementById("apply_on"+line1).value = document.getElementById("apply_on"+line2).value;
// Copy line 1 to line 2
@@ -312,7 +349,7 @@ function invert_line(line1, line2)
document.getElementById("header_name"+line2).value = header_name1;
document.getElementById("header_value"+line2).value = header_value1;
document.getElementById("comment"+line2).value = comment1;
- document.getElementById("select_status"+line2).value = select_status1;
+ setButtonStatus(document.getElementById("activate_button"+line2),select_status1);
document.getElementById("apply_on"+line2).value = apply_on1;
}
--
GitLab