mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-28 23:10:46 +00:00
Styling for SQL console
This commit is contained in:
parent
88c8c2c9f3
commit
b4fe89657b
@ -1,7 +1,10 @@
|
||||
title: $:/plugins/tiddlywiki/sqlite3store/rawmarkup-bottomhead
|
||||
tags: $:/tags/RawMarkupWikified
|
||||
|
||||
`<script>`
|
||||
`<style>`
|
||||
{{$:/plugins/tiddlywiki/sqlite3store/sql-console/styles}}
|
||||
`</style>
|
||||
<script>`
|
||||
{{$:/plugins/tiddlywiki/sqlite3store/suppress-boot.js}}
|
||||
{{$:/plugins/tiddlywiki/sqlite3store/sql-functions.js}}
|
||||
{{$:/plugins/tiddlywiki/sqlite3store/sql-wiki-store.js}}
|
||||
|
18
plugins/tiddlywiki/sqlite3store/sql-console-styles.tid
Normal file
18
plugins/tiddlywiki/sqlite3store/sql-console-styles.tid
Normal file
@ -0,0 +1,18 @@
|
||||
title: $:/plugins/tiddlywiki/sqlite3store/sql-console/styles
|
||||
code-body: yes
|
||||
|
||||
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
|
||||
|
||||
.sql-console * {
|
||||
}
|
||||
|
||||
.sql-console-input,
|
||||
.sql-console-output-input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background: #222222;
|
||||
color: #00ff00;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
margin: 4px;
|
||||
}
|
@ -9,49 +9,80 @@ SQL console for debugging
|
||||
(function() {
|
||||
|
||||
$tw.SqlConsole = function SqlConsole() {
|
||||
var self = this;
|
||||
// Container
|
||||
this.consoleContainer = document.createElement("div");
|
||||
this.consoleContainer.appendChild(document.createTextNode("console for sqlite3"));
|
||||
var self = this,
|
||||
dm = $tw.utils.domMaker;
|
||||
// Input box
|
||||
this.consoleInput = document.createElement("textarea");
|
||||
this.consoleInput.setAttribute("rows","10");
|
||||
this.consoleInput.style.width = "100%";
|
||||
this.consoleInput.addEventListener("keypress",function(event) {
|
||||
if(event.key === "Enter") {
|
||||
console.log("Gto enter")
|
||||
self.consoleRunButton.click();
|
||||
event.preventDefault();
|
||||
return false;
|
||||
this.consoleInput = dm("textarea",{
|
||||
"class": "sql-console-input",
|
||||
attributes: {
|
||||
"rows": "10"
|
||||
}
|
||||
});
|
||||
this.consoleContainer.appendChild(this.consoleInput);
|
||||
// Run button
|
||||
this.consoleRunButton = document.createElement("button");
|
||||
this.consoleRunButton.appendChild(document.createTextNode("run sql"));
|
||||
this.consoleRunButton = dm("button",{
|
||||
text: "run sql"
|
||||
});
|
||||
this.consoleRunButton.addEventListener("click",this.runQuery.bind(this));
|
||||
this.consoleContainer.appendChild(this.consoleRunButton);
|
||||
// Clear output button
|
||||
this.consoleClearButton = dm("button",{
|
||||
text: "clear output"
|
||||
});
|
||||
this.consoleClearButton.addEventListener("click",this.clearOutput.bind(this));
|
||||
// Output
|
||||
this.consoleOutput = document.createElement("div");
|
||||
this.consoleContainer.appendChild(this.consoleOutput);
|
||||
this.consoleOutput = dm("div",{
|
||||
"class": "sql-console-output-container"
|
||||
});
|
||||
// Container
|
||||
this.consoleContainer = dm("div",{
|
||||
"class": "sql-console",
|
||||
children: [
|
||||
document.createTextNode("console for sqlite3"),
|
||||
this.consoleInput,
|
||||
this.consoleRunButton,
|
||||
this.consoleClearButton,
|
||||
this.consoleOutput
|
||||
]
|
||||
});
|
||||
// Insert into DOM
|
||||
document.body.insertBefore(this.consoleContainer,document.body.firstChild);
|
||||
};
|
||||
|
||||
$tw.SqlConsole.prototype.clearOutput = function() {
|
||||
while(this.consoleOutput.firstChild) {
|
||||
this.consoleOutput.removeChild(this.consoleOutput.firstChild);
|
||||
}
|
||||
};
|
||||
|
||||
$tw.SqlConsole.prototype.runQuery = function() {
|
||||
let resultRows = [],
|
||||
var self = this,
|
||||
dm = $tw.utils.domMaker,
|
||||
sql = this.consoleInput.value,
|
||||
resultRows = [],
|
||||
exception;
|
||||
// Execute the query
|
||||
try {
|
||||
$tw.wiki.sqlFunctions.db.exec({
|
||||
sql: this.consoleInput.value,
|
||||
sql: sql,
|
||||
rowMode: "object",
|
||||
resultRows: resultRows
|
||||
});
|
||||
} catch(e) {
|
||||
exception = e.toString();
|
||||
}
|
||||
var output = document.createElement("div");
|
||||
output.appendChild(document.createTextNode(exception || JSON.stringify(resultRows)));
|
||||
// Display the result
|
||||
var output = dm("div",{
|
||||
"class": "sql-console-output",
|
||||
children: [
|
||||
dm("div",{
|
||||
"class": "sql-console-output-input",
|
||||
text: sql
|
||||
}),
|
||||
dm("div",{
|
||||
"class": "sql-console-output-output",
|
||||
text: exception || JSON.stringify(resultRows)
|
||||
})
|
||||
]
|
||||
});
|
||||
this.consoleOutput.insertBefore(output,this.consoleOutput.firstChild);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user