Add a better editor to Spinner.
This commit is contained in:
parent
65dab45582
commit
b7acfb0dcc
2 changed files with 62 additions and 18 deletions
|
@ -27,8 +27,10 @@ th {
|
|||
}
|
||||
|
||||
.query-input {
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
width: calc(100% - 18px);
|
||||
border: 1px solid black;
|
||||
border-radius: 4px;
|
||||
height: 200px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
|
|
@ -6,7 +6,8 @@
|
|||
|
||||
<!-- Query Input -->
|
||||
<form action="query" method="post" id="query-form">
|
||||
<textarea name="query" class="query-input" placeholder="Enter your query...">{{query}}</textarea>
|
||||
<div class="query-input">{{query}}</div>
|
||||
<input type="hidden" name="query" id="query" />
|
||||
<input type="hidden" name="db" value="{{database}}" />
|
||||
<input type="submit" name="action" value="run" />
|
||||
or
|
||||
|
@ -47,23 +48,65 @@
|
|||
{{> partials/suffix}}
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql-formatter/4.0.2/sql-formatter.min.js" integrity="sha512-JPoVzOHQvXbB4+lOX6GOBM3xOZhwAMKRYn2G0VpfPcwIixAAvPL+HKuaFuevm+i6Q4GktSKY/CxlcB/1BaV/6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.20.0/ace.min.js" integrity="sha512-VDk4SZZXv8Karl+tl3RKw3grEZ0ofFrh7J5IKnVgP843O85vbeZv/npjEWtM9BhDuUHbtJc60ZpR4wjiYTfC7g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.20.0/mode-sql.min.js" integrity="sha512-UBVNzqbl7u/EDMuOgFoE81YqUScjz/Uo4B3VhjlOqtKhi741M7ERSUllUeBxwr8khutma/UbCJ7+R8KDdUA52w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.20.0/theme-github.min.js" integrity="sha512-G0Ha6cELuBxxhTeMh/ZhY7D7RWt2UtWV6TMFXMSUHqc+p2xQPpAwMTCcG0QLXsmlu1QkbKQjQZC0J6cwfBa6EA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script type="text/javascript">
|
||||
function onFormatClicked(e) {
|
||||
e.preventDefault();
|
||||
const queryInput = document.querySelector('.query-input')
|
||||
queryInput.value = sqlFormatter.format(queryInput.value).replaceAll("! =", "!=").replaceAll("| |", "||");
|
||||
let editor;
|
||||
|
||||
function main() {
|
||||
//document.querySelector('.query-input').addEventListener('keypress', submitOnEnter);
|
||||
document.getElementById('query-form').addEventListener('submit', onQuerySubmitted, false);
|
||||
renderQueryHistory();
|
||||
|
||||
editor = ace.edit(document.querySelector('.query-input'), {
|
||||
mode: 'ace/mode/sql',
|
||||
theme: 'ace/theme/github',
|
||||
selectionStyle: 'text',
|
||||
showPrintMargin: false
|
||||
});
|
||||
|
||||
editor.setFontSize(13);
|
||||
|
||||
editor.commands.addCommand({
|
||||
name: "Run",
|
||||
bindKey: {win: "Ctrl-Return", mac: "Command-Return"},
|
||||
exec: triggerSubmit
|
||||
});
|
||||
|
||||
editor.commands.addCommand({
|
||||
name: "Run (Cody)",
|
||||
bindKey: {win: "Shift-Return", mac: "Shift-Return"},
|
||||
exec: triggerSubmit
|
||||
});
|
||||
|
||||
editor.commands.addCommand({
|
||||
name: "Format",
|
||||
bindKey: {win: "Ctrl-Shift-F", mac: "Command-Shift-F"},
|
||||
exec: formatSql
|
||||
});
|
||||
}
|
||||
|
||||
function submitOnEnter(event){
|
||||
if (event.which === 13 && event.shiftKey) {
|
||||
event.target.form.submit();
|
||||
onQuerySubmitted();
|
||||
event.preventDefault();
|
||||
}
|
||||
function onFormatClicked(e) {
|
||||
formatSql();
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function formatSql() {
|
||||
let formatted = sqlFormatter.format(editor.getValue()).replaceAll("! =", "!=").replaceAll("| |", "||");
|
||||
editor.setValue(formatted, formatted.length);
|
||||
}
|
||||
|
||||
|
||||
function triggerSubmit() {
|
||||
onQuerySubmitted();
|
||||
document.getElementById('query-form').submit();
|
||||
}
|
||||
|
||||
function onQuerySubmitted() {
|
||||
const query = document.querySelector('.query-input').value;
|
||||
const query = editor.getValue();
|
||||
|
||||
document.getElementById('query').value = query
|
||||
|
||||
let history = getQueryHistory();
|
||||
history.unshift(query);
|
||||
|
@ -94,7 +137,8 @@
|
|||
}
|
||||
|
||||
function onHistoryItemClicked(i) {
|
||||
document.querySelector('.query-input').value = document.getElementById(`history-item-${i}`).innerText;
|
||||
let item = document.getElementById(`history-item-${i}`).innerText;
|
||||
editor.setValue(item, item.length);
|
||||
}
|
||||
|
||||
function getQueryHistory() {
|
||||
|
@ -102,9 +146,7 @@
|
|||
return JSON.parse(historyRaw);
|
||||
}
|
||||
|
||||
document.querySelector('.query-input').addEventListener('keypress', submitOnEnter);
|
||||
document.getElementById('query-form').addEventListener('submit', onQuerySubmitted, false);
|
||||
renderQueryHistory();
|
||||
main();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
Loading…
Add table
Reference in a new issue