kopia lustrzana https://github.com/simonw/datasette
Button to format SQL, closes #136
SQL code will be formatted on page load, and can additionally be formatted by clicking the "Format SQL" button. Thanks, @rixx!pull/590/head
rodzic
fffd69ec03
commit
af2e6a5cf1
|
@ -166,22 +166,32 @@ form input[type=search] {
|
|||
width: 95%;
|
||||
}
|
||||
}
|
||||
form input[type=submit] {
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
form input[type=submit], form button[type=button] {
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border: 1px solid blue;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
padding: .5em 0.8em;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
form input[type=submit] {
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
form button[type=button] {
|
||||
color: #007bff;
|
||||
background-color: #fff;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,3 +1,4 @@
|
|||
<script src="/-/static/sql-formatter-2.3.3.min.js" defer></script>
|
||||
<script src="/-/static/codemirror-5.31.0.js"></script>
|
||||
<link rel="stylesheet" href="/-/static/codemirror-5.31.0-min.css" />
|
||||
<script src="/-/static/codemirror-5.31.0-sql.min.js"></script>
|
||||
|
|
|
@ -1,5 +1,18 @@
|
|||
<script>
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById("sql-editor"), {
|
||||
window.onload = () => {
|
||||
const sqlFormat = document.querySelector("button#sql-format");
|
||||
const readOnly = document.querySelector("pre#sql-query");
|
||||
const sqlInput = document.querySelector("textarea#sql-editor");
|
||||
if (sqlFormat && !readOnly) {
|
||||
sqlFormat.hidden = false;
|
||||
}
|
||||
if (readOnly) {
|
||||
readOnly.innerHTML = sqlFormatter.format(readOnly.innerHTML);
|
||||
}
|
||||
if (sqlInput) {
|
||||
sqlInput.value = sqlFormatter.format(sqlInput.value);
|
||||
}
|
||||
var editor = CodeMirror.fromTextArea(sqlInput, {
|
||||
lineNumbers: true,
|
||||
mode: "text/x-sql",
|
||||
lineWrapping: true,
|
||||
|
@ -10,4 +23,10 @@
|
|||
},
|
||||
Tab: false
|
||||
});
|
||||
if (sqlInput && sqlFormat) {
|
||||
sqlFormat.addEventListener("click", ev => {
|
||||
editor.setValue(sqlFormatter.format(editor.getValue()));
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -26,7 +26,10 @@
|
|||
<form class="sql" action="{{ database_url(database) }}" method="get">
|
||||
<h3>Custom SQL query</h3>
|
||||
<p><textarea id="sql-editor" name="sql">{% if tables %}select * from {{ tables[0].name|escape_sqlite }}{% else %}select sqlite_version(){% endif %}</textarea></p>
|
||||
<p><input type="submit" value="Run SQL"></p>
|
||||
<p>
|
||||
<button id="sql-format" type="button" hidden>Format SQL</button>
|
||||
<input type="submit" value="Run SQL">
|
||||
</p>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
{% if editable and config.allow_sql %}
|
||||
<p><textarea id="sql-editor" name="sql">{% if query and query.sql %}{{ query.sql }}{% else %}select * from {{ tables[0].name|escape_sqlite }}{% endif %}</textarea></p>
|
||||
{% else %}
|
||||
<pre>{% if query %}{{ query.sql }}{% endif %}</pre>
|
||||
<pre id="sql-query">{% if query %}{{ query.sql }}{% endif %}</pre>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<input type="hidden" name="sql" value="{% if query and query.sql %}{{ query.sql }}{% else %}select * from {{ tables[0].name|escape_sqlite }}{% endif %}">
|
||||
|
@ -49,7 +49,10 @@
|
|||
<p><label for="qp{{ loop.index }}">{{ name }}</label> <input type="text" id="qp{{ loop.index }}" name="{{ name }}" value="{{ value }}"></p>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<p><input type="submit" value="Run SQL"></p>
|
||||
<p>
|
||||
<button id="sql-format" type="button" hidden>Format SQL</button>
|
||||
<input type="submit" value="Run SQL">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
{% if display_rows %}
|
||||
|
|
Ładowanie…
Reference in New Issue