TPsoft.org/dbPrompt
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first version of dbPrompt = basic usage

Browse Source
This commit is contained in:
Igor Miňo
2026-01-22 01:57:28 +01:00
parent aafed2318a
commit 6df8e53b53
4 changed files with 396 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
index.html Normal file
View File

@ -0,0 +1,173 @@
<!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>