174 lines
7.7 KiB
HTML
174 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>dbPrompt</title>
|
|
<style>
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background-color: #f0f2f5; color: #1c1e21; }
|
|
header { background-color: #ffffff; padding: 10px 20px; border-bottom: 1px solid #dddfe2; font-size: 24px; font-weight: bold; color: #4b4f56; }
|
|
main { padding: 20px; }
|
|
.query-block { background-color: #ffffff; border: 1px solid #dddfe2; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
|
|
.query-input { padding: 12px; }
|
|
textarea { width: 100%; box-sizing: border-box; border: 1px solid #ccd0d5; border-radius: 6px; padding: 12px; font-family: "Courier New", Courier, monospace; font-size: 14px; resize: vertical; min-height: 80px; }
|
|
.run-button {
|
|
background-color: #1877f2; color: white; border: none; padding: 10px 15px; border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 10px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
.run-button:hover { background-color: #166fe5; }
|
|
.result-container { padding: 0 12px 12px 12px; }
|
|
.result-container .error { color: #fa383e; background-color: #ffe5e6; padding: 10px; border-radius: 6px; white-space: pre-wrap; word-break: break-all; }
|
|
.result-container .info { color: #117a11; background-color: #e6f6e6; padding: 10px; border-radius: 6px; }
|
|
table { border-collapse: collapse; width: 100%; margin-top: 12px; }
|
|
th, td { border: 1px solid #dddfe2; padding: 8px; text-align: left; vertical-align: top; }
|
|
th { background-color: #f5f6f7; font-weight: bold; }
|
|
tbody tr:nth-child(odd) { background-color: #f9f9f9; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>dbPrompt</header>
|
|
|
|
<main id="main-container">
|
|
<!-- Query blocks will be inserted here -->
|
|
</main>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const mainContainer = document.getElementById('main-container');
|
|
|
|
// --- Main Event Handler ---
|
|
mainContainer.addEventListener('click', async (e) => {
|
|
if (e.target.classList.contains('run-button')) {
|
|
const block = e.target.closest('.query-block');
|
|
const textarea = block.querySelector('textarea');
|
|
const queryId = block.dataset.id || '';
|
|
const query = textarea.value.trim();
|
|
|
|
if (!query) return;
|
|
|
|
const resultContainer = block.querySelector('.result-container');
|
|
resultContainer.innerHTML = '<div class="info">Executing...</div>';
|
|
|
|
try {
|
|
const response = await fetch('/query', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id: queryId, query: query })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// If it was a new query, update its block with the new ID
|
|
const wasNewQuery = !block.dataset.id;
|
|
block.dataset.id = data.id;
|
|
|
|
renderResult(resultContainer, data);
|
|
|
|
// If it was a successful new query, add another blank input
|
|
if (wasNewQuery && !data.error) {
|
|
addQueryBlock();
|
|
}
|
|
|
|
} catch (error) {
|
|
renderResult(resultContainer, { error: error.message });
|
|
}
|
|
}
|
|
});
|
|
|
|
// --- Rendering Functions ---
|
|
function renderResult(container, data) {
|
|
let html = '';
|
|
if (data.error) {
|
|
html = `<div class="error">${escapeHtml(data.error)}</div>`;
|
|
} else if (data.columns && data.rows) {
|
|
// SELECT, SHOW, etc.
|
|
if (data.rows.length === 0) {
|
|
html = `<div class="info">Query executed successfully. 0 rows returned.</div>`;
|
|
} else {
|
|
html = '<table><thead><tr>';
|
|
data.columns.forEach(col => html += `<th>${escapeHtml(col)}</th>`);
|
|
html += '</tr></thead><tbody>';
|
|
data.rows.forEach(row => {
|
|
html += '<tr>';
|
|
row.forEach(cell => {
|
|
html += `<td>${escapeHtml(cell === null ? 'NULL' : cell)}</td>`;
|
|
});
|
|
html += '</tr>';
|
|
});
|
|
html += '</tbody></table>';
|
|
}
|
|
} else if (data.hasOwnProperty('rowsAffected')) {
|
|
// INSERT, UPDATE, DELETE
|
|
html = `<div class="info">Query executed successfully. ${data.rowsAffected} rows affected.</div>`;
|
|
} else {
|
|
html = `<div class="info">Query executed. No rows returned.</div>`;
|
|
}
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
function addQueryBlock(data = {}) {
|
|
const block = document.createElement('div');
|
|
block.className = 'query-block';
|
|
if (data.id) {
|
|
block.dataset.id = data.id;
|
|
}
|
|
|
|
block.innerHTML = `
|
|
<div class="query-input">
|
|
<textarea placeholder="Enter your SQL query here...">${data.query ? escapeHtml(data.query) : ''}</textarea>
|
|
<button class="run-button">Run Query</button>
|
|
</div>
|
|
<div class="result-container"></div>
|
|
`;
|
|
|
|
if (data.id) { // Only render previous results if they exist
|
|
const resultContainer = block.querySelector('.result-container');
|
|
renderResult(resultContainer, data);
|
|
}
|
|
|
|
mainContainer.appendChild(block);
|
|
return block;
|
|
}
|
|
|
|
// --- Initialization ---
|
|
async function loadHistory() {
|
|
try {
|
|
const response = await fetch('/history');
|
|
if (!response.ok) throw new Error('Failed to load history.');
|
|
|
|
const history = await response.json();
|
|
|
|
if (history && history.length > 0) {
|
|
history.forEach(item => addQueryBlock(item));
|
|
}
|
|
|
|
// Always have at least one empty block
|
|
addQueryBlock();
|
|
|
|
} catch (error) {
|
|
console.error(error);
|
|
const block = addQueryBlock();
|
|
const resultContainer = block.querySelector('.result-container');
|
|
renderResult(resultContainer, { error: 'Could not load history from server. You can still run new queries.' });
|
|
}
|
|
}
|
|
|
|
// --- Utilities ---
|
|
function escapeHtml(str) {
|
|
const p = document.createElement('p');
|
|
p.textContent = str;
|
|
return p.innerHTML;
|
|
}
|
|
|
|
// --- Start the app ---
|
|
loadHistory();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|