-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathviewer.html
388 lines (359 loc) · 15.5 KB
/
viewer.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
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
<html>
<head>
<title>YTG-DB</title>
<script type="text/javascript" src="js/db_scripts/db_handler.js"></script>
<script>
var url = new URL(window.location.href);
var db_data = url.searchParams.get("db_data");
var current_table = 1
window.addEventListener("beforeunload", function (e) {
if(has_saved == false){
var confirmationMessage = 'It looks like you have been editing something. '+ 'If you leave before saving, your changes will be lost.';
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
}
});
//check if legitimate database to avoid console errors because console errors eww
//will add the above mentioned code later
if(db_data == '' || db_data == null){window.location='index.html'}
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</link>
<style>
th {
background-color: #808080;
color: black;
}
td {
background-color: white;
}
.configure_table {
position: relative;
top: 0px;
left: 0px;
}
.configure_table:hover {
font-weight: bold;
width: 1.01em;
height: 1.01em;
}
.add_table {
position: absolute;
top: 60px;
left: 25px;
}
.add_table:hover {
font-weight: bold;
width: 2em;
height: 2em;
}
.remove_table {
position: relative;
top: 0px;
left: 3px;
}
.remove_table:hover {
font-weight: bold;
width: 1.01em;
height: 1.01em;
}
.table_listing_text {
position: relative;
top: -33px;
left: 40px;
}
.table_listing_text:hover {
font-weight: bold;
}
.table_listing {}
.accept_confirmation {
width: 50;
height: 50;
}
.accept_confirmation:hover {
width: 55px;
height: 55px;
}
.deny_confirmation {
width: 50;
height: 50;
}
.deny_confirmation:hover {
width: 55px;
height: 55px;
}
</style>
</head>
<body>
<h2 id="db_name" style="text-align: center;">Database Name</h2>
<br>
<div id="main" style="position: absolute; top: 0px; left: 0%; height: 1000px; overflow: none;">
<div id="tables_div" style="position: absolute; top: 50px; left: 0px; width: 300px; height: 800px; overflow: auto; background-color: #D3D3D3;">
<h2 id="db_name_title" style="text-align: center;">Database Tables</h2>
<div><img width="25" height="25" id="create_table_button" class="add_table" src="assets/images/icons/plus.png" alt="Create New Table"></img></div>
<ul id="tables_list" style="position: absolute; top: 100px;"></ul>
</div>
<div id="table_data_div"
style="position: absolute; top: 50px; left: 325px; width: 650px; height: 800px; overflow: auto; background-color: #D3D3D3;">
<h2 id="table_name_title" style="text-align: center;">Table_Name Data</h2>
<table id="table_data_table" style="width: 100%;">
<tr id="table_data_table_columns">
</tr>
<tbody id="table_data_table_rows"></tbody>
</table>
</div>
<div id="table_data_settings_div"
style="position: absolute; top: 50px; left: 1000px; width: 365px; height: 800px; overflow: auto; background-color: #D3D3D3;">
<h2 id="configure_div_title" style="text-align: center;">Configure</h2>
</div>
</div>
<br>
<br>
<footer></footer>
</body>
<script>
function removeAllChildNodes(parent) {
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}
function FindColPos(element) {
/* find column position */
var colPos = 0;
var prev = element.previousSibling;
while (prev) {
if (prev.nodeType == 1 && prev.nodeName.match(/t[dh]/i)) {
colPos++;
}
prev = prev.previousSibling;
}
return colPos;
}
function FindRowPos(element) {
/* find row position */
var rowPos = 0;
var prev = element.parentNode.previousSibling;
while (prev) {
if (prev.nodeType == 1 && prev.nodeName.match(/tr/i)) {
rowPos++;
}
prev = prev.previousSibling;
}
return rowPos;
}
function inputify(e) {
var new_input = document.createElement('input')
new_input.style = "width: 50;"
var table_data = current_table
var current_column = FindColPos(e)
var current_row = FindRowPos(e)
var current_pos = current_row+', '+current_column
var cnt_pos = current_pos.split(', ')
console.log(cnt_pos)
var thecolumns = table_data[1].split('///////')[0].split('|||')
var thevalues = table_data[1].split('///////')[1].split('|||')[cnt_pos[0]].split('||')
console.log(thevalues)
console.log(thevalues[cnt_pos[1]])
console.log(thecolumns[cnt_pos[0+1]].split('||')[2])
if(thecolumns[cnt_pos[0+1]].split('||')[2]=="string"){new_input.type='text'}else if(thecolumns[cnt_pos[0+1]].split('||')[2]=="int"){new_input.type='number'}else{new_input.type='text'}
new_input.value = thevalues[cnt_pos[1]]
var childs = document.getElementById('table_data_table_rows').children
var childs2 = childs[cnt_pos[0]].children
var td = childs2[cnt_pos[1]]
td.innerText = ''
td.appendChild(new_input)
}
var db_name = db_data.split('|||||||')[0]
var db_tables = db_data.split('|||||||')
var first_table_data = db_tables[1].split('||||')
current_table = first_table_data
var table_listings = document.getElementById('tables_list')
var table_data_table = document.getElementById('table_data_table')
var table_data_table_columns = document.getElementById('table_data_table_columns')
var table_data_table_rows = document.getElementById('table_data_table_rows')
document.getElementById('db_name').innerText = db_name
document.getElementById('db_name_title').innerText = db_name + " Tables"
document.getElementById('table_name_title').innerText = first_table_data[0] + " Data"
function load_table(table) {
var first_table_data = table.split('?????')[2]
console.log(first_table_data)
current_table = first_table_data.split('||||')
var table_data_table = document.getElementById('table_data_table')
var table_data_table_columns = document.getElementById('table_data_table_columns')
var table_data_table_rows = document.getElementById('table_data_table_rows')
removeAllChildNodes(table_data_table_columns)
for (var i = 1; i < first_table_data.split('///////')[0].split('|||').length; i++) {
var row_data = first_table_data.split('///////')[0].split('|||')[i]
var new_row = document.createElement('th')
new_row.innerText = row_data.split('||')[1]
table_data_table_columns.appendChild(new_row)
}
removeAllChildNodes(table_data_table_rows)
for (var i = 0; i < first_table_data[1].split('///////')[1].split('|||').length; i++) {
var row_data = first_table_data.split('///////')[1].split('|||')[i]
console.log(first_table_data[1].split('///////')[1].split('|||')[i].split('||'))
var new_row = document.createElement('tr')
for (var i2 = 0; i2 < first_table_data[1].split('///////')[1].split('|||')[i].split('||').length; i2++) {
var new_column = document.createElement('td')
new_column.innerText = row_data[i2]
table_data_table_rows.appendChild(new_row)
new_row.appendChild(new_column)
new_column.setAttribute('ondblclick', "inputify(this);")
}
}
document.getElementById('db_name').innerText = db_name
document.getElementById('db_name_title').innerText = db_name + " Tables"
document.getElementById('table_name_title').innerText = first_table_data.split('||||')[0] + " Data"
}
function confirm_action(fnc, param1, param2, param3, param4, param5) {
var new_div = document.createElement('div');
new_div.id = "action_confirmation_div"
new_div.style = "position: fixed; top: 20%; left: 40%; width: 300px; height: 225px; background-color: #D3D3D3; border-style: solid; overflow: hidden;"
document.body.appendChild(new_div);
var new_title = document.createElement('h2')
var new_confirmation = document.createElement('p')
var new_yes = document.createElement('img')
var new_no = document.createElement('img')
new_div.appendChild(new_title)
new_title.innerText = 'Confirm Action'
new_title.style = "text-align: center;"
new_div.appendChild(new_confirmation)
function checkDefined(val, act) {
if (val == 'undefined') {
return('')
} else {
console.log("christina was here")
return(act)
}
}
new_confirmation.innerText = fnc + '(' + checkDefined(param1, param1) + checkDefined(param2, ', ' + param2) + checkDefined(param3, ', ' + param3) + checkDefined(param4, ', ' + param4) + checkDefined(param5, ', ' + param5) + ')'
new_confirmation.style = "text-align: center; background-color: white; font-weight: bold;"
new_div.appendChild(new_yes)
new_yes.style = "position: absolute; top: 165px; left: 20%;"
new_yes.classList.add("accept_confirmation")
new_yes.src = 'assets/images/icons/checkmark_circle_green.png'
new_div.appendChild(new_no)
new_no.style = "position: absolute; top: 165px; left: 60%;"
new_no.classList.add("deny_confirmation")
new_no.src = 'assets/images/icons/x_circle_red.png'
new_yes.addEventListener('click', function () {
var element = document.getElementById('action_confirmation_div'); element.parentNode.removeChild(element);
window[fnc](param1, param2, param3, param4, param5);
});
new_no.addEventListener('click', function () {
var element = document.getElementById('action_confirmation_div'); element.parentNode.removeChild(element);
});
}
// tables
function init_tables() {
removeAllChildNodes(table_listings)
if (db_tables[1] !== '') {
for (var i = 1; i < db_tables.length; i++) {
var table_name = db_tables[i].split('||||')[0]
var table_listing = document.createElement("li")
table_listings.appendChild(table_listing)
var new_p = document.createElement('p')
new_p.setAttribute('table_name', table_name)
new_p.setAttribute('onclick', `load_table(query_db(db_data, "SELECT * FROM c_database WHERE table_name='`+table_name+`'"))`)
new_p.classList.add("table_listing_text")
new_p.innerText = table_name
table_listing.appendChild(new_p)
var new_configure_img = document.createElement('img')
new_configure_img.setAttribute('table_name', table_name)
new_configure_img.setAttribute('onclick', 'configure_table(this.getAttribute("table_name"));')
var new_remove_img = document.createElement('img')
new_remove_img.setAttribute('table_name', table_name)
new_remove_img.setAttribute('onclick', 'confirm_action("remove_table", this.getAttribute("table_name"), db_data);')
new_configure_img.alt = "Edit"
new_remove_img.alt = "Remove"
new_configure_img.src = "assets/images/icons/cog_gray_1.png"
new_remove_img.src = "assets/images/icons/cross_circle_red.png"
new_configure_img.width = "15"
new_configure_img.height = "15"
new_remove_img.width = "15"
new_remove_img.height = "15"
new_configure_img.classList.add('configure_table')
new_remove_img.classList.add('remove_table')
table_listing.prepend(new_remove_img)
table_listing.prepend(new_configure_img)
}
}
}
// columns
function init_columns() {
removeAllChildNodes(table_data_table_columns)
if (db_tables[1] !== '') {
for (var i = 0; i < first_table_data[1].split('///////')[0].split('|||').length; i++) {
var row_data = first_table_data[1].split('///////')[0].split('|||')[i]
var new_row = document.createElement('th')
new_row.innerText = row_data.split('||')[1]
table_data_table_columns.appendChild(new_row)
}
}
}
// rows
function init_rows() {
removeAllChildNodes(table_data_table_rows)
if (db_tables[1] !== '') {
for (var i = 0; i < first_table_data[1].split('///////')[1].split('|||').length; i++) {
var row_data = first_table_data[1].split('///////')[1].split('|||')[i].split('||')
var new_row = document.createElement('tr')
for (var i2 = 0; i2 < first_table_data[1].split('///////')[1].split('|||')[i].split('||').length; i2++) {
var new_column = document.createElement('td')
new_column.innerText = row_data[i2]
table_data_table_rows.appendChild(new_row)
new_row.appendChild(new_column)
new_column.setAttribute('ondblclick', "inputify(this);")
}
}
}
}
function configure_table(table) {
document.getElementById('configure_div_title').innerText = 'Configure ' + table
}
function remove_table(table, db) {
alert('deleting '+table)
db_data = db_name+'|||||||'+delete_table(db, table)
db_tables = db_data.split('|||||||')
first_table_data = db_tables[1].split('||||')
table_listings = document.getElementById('tables_list')
table_data_table = document.getElementById('table_data_table')
table_data_table_columns = document.getElementById('table_data_table_columns')
document.getElementById('db_name').innerText = db_name
document.getElementById('db_name_title').innerText = db_name + " Tables"
document.getElementById('table_name_title').innerText = first_table_data[0] + " Data"
init_tables()
init_columns()
init_rows()
}
function add_table(db) {
var name = prompt('Input new table name', 'new_table_xx')
if (name == null || name == "") {
alert('Invalid table_name Entry')
return('invalid_entry_ytgdberror')
}
if(query_db(db_data, "SELECT * FROM c_database WHERE table_name='"+name+"'").split('?????')[0] == 'true'){
alert('create_table(query_db) ERROR: '+query_db(db_data, "SELECT * FROM c_database WHERE table_name='"+name+"'").split('?????')[1])
}else{
db_data = db_name+'|||||||'+create_table(db, name)
db_tables = db_data.split('|||||||')
first_table_data = db_tables[1].split('||||')
table_listings = document.getElementById('tables_list')
table_data_table = document.getElementById('table_data_table')
table_data_table_columns = document.getElementById('table_data_table_columns')
document.getElementById('db_name').innerText = db_name
document.getElementById('db_name_title').innerText = db_name + " Tables"
document.getElementById('table_name_title').innerText = first_table_data[0] + " Data"
init_tables()
init_columns()
init_rows()
}
}
init_tables()
init_columns()
init_rows()
document.getElementById('create_table_button').addEventListener('click', function () {
add_table(db_data, 'new_table')
});
</script>
</html>