mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-29 08:43:14 +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
|
title: $:/plugins/tiddlywiki/sqlite3store/rawmarkup-bottomhead
|
||||||
tags: $:/tags/RawMarkupWikified
|
tags: $:/tags/RawMarkupWikified
|
||||||
|
|
||||||
`<script>`
|
`<style>`
|
||||||
|
{{$:/plugins/tiddlywiki/sqlite3store/sql-console/styles}}
|
||||||
|
`</style>
|
||||||
|
<script>`
|
||||||
{{$:/plugins/tiddlywiki/sqlite3store/suppress-boot.js}}
|
{{$:/plugins/tiddlywiki/sqlite3store/suppress-boot.js}}
|
||||||
{{$:/plugins/tiddlywiki/sqlite3store/sql-functions.js}}
|
{{$:/plugins/tiddlywiki/sqlite3store/sql-functions.js}}
|
||||||
{{$:/plugins/tiddlywiki/sqlite3store/sql-wiki-store.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() {
|
(function() {
|
||||||
|
|
||||||
$tw.SqlConsole = function SqlConsole() {
|
$tw.SqlConsole = function SqlConsole() {
|
||||||
var self = this;
|
var self = this,
|
||||||
// Container
|
dm = $tw.utils.domMaker;
|
||||||
this.consoleContainer = document.createElement("div");
|
|
||||||
this.consoleContainer.appendChild(document.createTextNode("console for sqlite3"));
|
|
||||||
// Input box
|
// Input box
|
||||||
this.consoleInput = document.createElement("textarea");
|
this.consoleInput = dm("textarea",{
|
||||||
this.consoleInput.setAttribute("rows","10");
|
"class": "sql-console-input",
|
||||||
this.consoleInput.style.width = "100%";
|
attributes: {
|
||||||
this.consoleInput.addEventListener("keypress",function(event) {
|
"rows": "10"
|
||||||
if(event.key === "Enter") {
|
|
||||||
console.log("Gto enter")
|
|
||||||
self.consoleRunButton.click();
|
|
||||||
event.preventDefault();
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.consoleContainer.appendChild(this.consoleInput);
|
|
||||||
// Run button
|
// Run button
|
||||||
this.consoleRunButton = document.createElement("button");
|
this.consoleRunButton = dm("button",{
|
||||||
this.consoleRunButton.appendChild(document.createTextNode("run sql"));
|
text: "run sql"
|
||||||
|
});
|
||||||
this.consoleRunButton.addEventListener("click",this.runQuery.bind(this));
|
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
|
// Output
|
||||||
this.consoleOutput = document.createElement("div");
|
this.consoleOutput = dm("div",{
|
||||||
this.consoleContainer.appendChild(this.consoleOutput);
|
"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
|
// Insert into DOM
|
||||||
document.body.insertBefore(this.consoleContainer,document.body.firstChild);
|
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() {
|
$tw.SqlConsole.prototype.runQuery = function() {
|
||||||
let resultRows = [],
|
var self = this,
|
||||||
|
dm = $tw.utils.domMaker,
|
||||||
|
sql = this.consoleInput.value,
|
||||||
|
resultRows = [],
|
||||||
exception;
|
exception;
|
||||||
|
// Execute the query
|
||||||
try {
|
try {
|
||||||
$tw.wiki.sqlFunctions.db.exec({
|
$tw.wiki.sqlFunctions.db.exec({
|
||||||
sql: this.consoleInput.value,
|
sql: sql,
|
||||||
rowMode: "object",
|
rowMode: "object",
|
||||||
resultRows: resultRows
|
resultRows: resultRows
|
||||||
});
|
});
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
exception = e.toString();
|
exception = e.toString();
|
||||||
}
|
}
|
||||||
var output = document.createElement("div");
|
// Display the result
|
||||||
output.appendChild(document.createTextNode(exception || JSON.stringify(resultRows)));
|
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);
|
this.consoleOutput.insertBefore(output,this.consoleOutput.firstChild);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user