-
Notifications
You must be signed in to change notification settings - Fork 0
/
dialogBox.html
149 lines (136 loc) · 5.81 KB
/
dialogBox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
var inputID = 1;
google.script.run.withSuccessHandler(fillFormData).getProperties();
function fillFormData(oldData) {
addDefaultColorInput();
oldData = oldData[0];
document.getElementById("columnToWatch").value = oldData["columnToWatch"];
document.getElementById("nbColumnsInRow").value = oldData["nbColumnsInRow"];
document.getElementById("defaultColor").value = oldData["defaultColor"];
document.getElementById("ignoreCase").checked = (oldData["ignoreCase"] === 'true');
var rules = oldData["formatingRules"];
if (rules != "") {
for (var i=0; i<rules.length; i++) {
addInputsRow(rules[i][0], rules[i][1]);
}
}
}
function sendInputData(){
// create formating rules string
var valueNodesList = document.querySelectorAll('*[id^="value"]');
var formatingString = "";
for (var i=0; i<valueNodesList.length; i++) {
var valueNodeId = valueNodesList[i].id;
var value = document.getElementById(valueNodeId).value;
var color = document.getElementById("color" + valueNodeId.substring(5)).value;
formatingString += value + ":" + color + ", ";
}
formatingString = formatingString.slice(0, -2);
// create array and send data
var data = [{
"columnToWatch":document.getElementById('columnToWatch').value,
"nbColumnsInRow":document.getElementById('nbColumnsInRow').value,
"defaultColor":document.getElementById('defaultColor').value,
"ignoreCase":document.getElementById("ignoreCase").checked.toString(),
"formatingRules":formatingString
}];
google.script.run.withSuccessHandler(close).setProperties(data);
};
function close(){
google.script.host.close()
};
function addInputsRow(defaultValue, defaultColor){
var container = document.getElementById("rulesContainer");
var row = document.createElement("tr");
row.id = "row" + inputID;
var column1 = document.createElement("td");
var column2 = document.createElement("td");
var column3 = document.createElement("td");
var text1 = createTextElement("- Matching value: ");
var text2 = createTextElement("Color: ");
var input1 = createInputField("value"+inputID, defaultValue);
var input2 = createInputField("color"+inputID, defaultColor);
var removeButton = createRemoveButton(row.id);
//container.appendChild(row);
container.insertBefore(row, document.getElementById("defaultColorRow"));
row.appendChild(column1);
row.appendChild(column2);
row.appendChild(column3);
column1.appendChild(text1);
column1.appendChild(input1);
column2.appendChild(text2);
column2.appendChild(input2);
column3.appendChild(removeButton);
inputID += 1;
}
function addDefaultColorInput(color){
var container = document.getElementById("rulesContainer");
var row = document.createElement("tr");
row.id = "defaultColorRow";
var column1 = document.createElement("td");
var column2 = document.createElement("td");
var column3 = document.createElement("td");
var text1 = createTextElement("- Default color: ");
text1.style = "margin-left:20px;margin-right: 15px;";
var input1 = createInputField("defaultColor", color);
container.appendChild(row);
row.appendChild(column1);
row.appendChild(column2);
row.appendChild(column3);
column1.appendChild(text1);
column1.appendChild(input1);
}
function createTextElement(text){
var span = document.createElement('span');
span.style = "margin-left:20px;";
span.appendChild(document.createTextNode(text));
return span;
}
function createInputField(name, value){
var input = document.createElement("input");
input.type = "text";
input.name = name;
input.id = name;
input.style = "width:80px;"
input.value = value;
return input;
}
function createRemoveButton(rowID){
var removeButton = document.createElement("input");
removeButton.type="button";
removeButton.value="Remove";
removeButton.onclick= function() { removeInputField(rowID); }
removeButton.style = "margin-left:10px;";
return removeButton;
}
function removeInputField(name){
document.getElementById(name).remove();
}
</script>
</head>
<body>
<table style="border:none;">
<tr>
<td>Column to Watch: </td>
<td><input type="number" name="columnToWatch" id="columnToWatch" min="1" style="width:250px;" /></td></tr>
<tr>
<td>Number of columns to colorize: </td>
<td><input type="number" name="nbColumnsInRow" id="nbColumnsInRow" min="1" style="width:250px;" /></td></tr>
<tr>
<td>Ignore case sensitivity: </td>
<td><input type="checkbox" name="ignoreCase" id="ignoreCase" /></td></tr>
<tr>
<td>Formating rules (value:color): </td>
<td><input type="button" value="Add new rule" class="action" onclick="addInputsRow('','')" /></td></tr>
<tr>
<td colspan="2"><table id="rulesContainer"></table></td></tr>
</table>
<br />
<input type="button" value="Submit" class="action" onclick="sendInputData()" >
<input type="button" value="Cancel" onclick="google.script.host.close()" >
</body>
</html>