-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathWebSQLshell.html
255 lines (231 loc) · 8 KB
/
WebSQLshell.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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8">
<title>Итерпретатор SQL</title>
<style>
body {
color: #222;
font: 14px Arial;
height: 100%;
}
.wrapper_div {
min-height:100%;
position:relative;
}
.commands_log_div{
padding-bottom: 250px;
}
.form_div{
width: 100%;
height: 250px;
position: fixed;
left: 0%;
bottom: 0%;
text-align: center;
background: linear-gradient(45deg, #F6FCFF 25%,
#E8EAEB 25%, #E8EAEB 50%,
#F6FCFF 50%, #F6FCFF 75%,
#E8EAEB 75%);
background-size:10px 10px;
border-top: 3px solid #E8EAEB;
}
.sql_result_table{
border-spacing: 0;
border-collapse: collapse;
border: 1px solid black;
}
.sql_result_table th, td {
border: 1px solid black;
}
.sql_result_table tr:first-child {
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.sql_cmd_text_div {
border: 1px #888888 dashed;
background-color: #fcfce3;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
}
.sql_res_ok_div {
background-color: #eefee7;
font-weight: normal;
font-family: 'Courier New', Courier, monospace;
}
.sql_res_err_div {
background-color: #ffc8c2;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
}
</style>
<script>
var db = null;
var sql_commands = [];
/*Execute button click handler*/
function exec_sql() {
// All commands are executed in one transactions
db.transaction(
function(tx) {
// Split contenets of user input textbox to individual commands
// separeted with ; followed by end of line
var div =
document.getElementById('sql_commands_log');
var sql_commands_raw =
document.getElementById('sql_cmd_text').value.split(";\n");
sql_commands = [];
for(var i=0; i<sql_commands_raw.length; i++)
{
var sql_cmd = sql_commands_raw[i].trim();
if(sql_cmd.length>0)
{
if(sql_cmd.slice(-1)==";")
{
sql_cmd = sql_cmd.substring(0, sql_cmd.length - 1);
}
sql_commands.push(sql_cmd);
}
}
// Execute all commands
if(sql_commands.length>0)
{
exec_all_commands();
}
else
{
var div =
document.getElementById('sql_commands_log');
div.innerHTML +=
'<div class="sql_res_err_div">ERROR:<br>Empty command</div>';
}
}
);
}
// Executes commands from sql_commands global array
// in recursive manner
// (have to do this because WebSQL has only async calls
// and I have found no better way to wait for end of statement
// execution before executing next statement)
function exec_all_commands()
{
// Prints results of successfully executed command and
// executes the next one
onSqlExecSuccess = function(tx, r) {
// Print results of previous command
var div =
document.getElementById('sql_commands_log');
var html = [];
html.push('<div class="sql_res_ok_div">');
if(r.rowsAffected>0)
{
html.push(
'Command executed successfully. '+
r.rowsAffected,
' rows affected.');
}
else
{
if(r.rows.length==0)
{
html.push('Query returned 0 rows.');
}
else
{
html.push('<table class="sql_result_table">');
html.push('<tr>');
for(key in r.rows.item(0))
{
html.push('<td>',key,'</td>');
}
html.push('</tr>');
for(var i=0; i<r.rows.length; i++) {
html.push('<tr>');
for(key in r.rows.item(i))
{
html.push(
'<td>',
r.rows.item(i)[key],
'</td>');
}
html.push('</tr>');
}
html.push('</table>');
}
}
html.push('</div>');
div.innerHTML += html.join("");
if(sql_commands.length>0)
{
// remove next command from sql_commands
var sql_cmd = sql_commands.shift();
var div =
document.getElementById('sql_commands_log');
div.innerHTML +=
'<br><div class="sql_cmd_text_div">'+
sql_cmd.replace(new RegExp('\n', 'g'),"<br>")+
'</div>';
tx.executeSql(
sql_cmd,
[],
onSqlExecSuccess,
onSqlExecError);
};
}
// Prints error message
onSqlExecError = function(tx, e) {
var div =
document.getElementById('sql_commands_log');
div.innerHTML +=
'<div class="sql_res_err_div">ERROR:<br>'+
e.message+'</div>';
}
if(sql_commands.length>0)
{
var sql_cmd = sql_commands.shift();
var div =
document.getElementById('sql_commands_log');
div.innerHTML +=
'<br><div class="sql_cmd_text_div">'+
sql_cmd.replace(new RegExp('\n', 'g'),"<br>")+
'</div>';
db.transaction(
function(tx){
tx.executeSql(
sql_cmd,
[],
onSqlExecSuccess,
onSqlExecError);
});
}
}
function init() {
var dbSize = 5 * 1024 * 1024;
db = openDatabase(
"testdb1",
"1.0",
"Test Database",
dbSize);
}
</script>
</head>
<body onload="init();">
<div class="wrapper_div">
<div id="sql_commands_log" class="commands_log_div"/>
<div class="form_div">
<form
type="post"
onsubmit="exec_sql(); return false;">
<textarea
id="sql_cmd_text"
rows="10"
cols="80"></textarea>
<br>
<input type="submit" value="Выполнить"/>
</form>
</div>
</div>
</body>
</html>