Add a better editor to Spinner.

This commit is contained in:
Greyson Parrelli 2023-05-12 00:31:04 -04:00
parent 65dab45582
commit b7acfb0dcc
2 changed files with 62 additions and 18 deletions

View file

@ -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;
}

View file

@ -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>