added button for delete of queries,
added collapse/expand results, added date time and duration for each query
This commit is contained in:
236
index.html
236
index.html
@ -6,9 +6,23 @@
|
||||
<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; }
|
||||
header {
|
||||
background-color: #ffffff; padding: 10px 20px; border-bottom: 1px solid #dddfe2; font-size: 24px; font-weight: bold; color: #4b4f56;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
}
|
||||
.header-buttons button {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
padding: 8px 12px;
|
||||
margin-left: 10px;
|
||||
border: 1px solid #ccd0d5;
|
||||
border-radius: 6px;
|
||||
background-color: #f5f6f7;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header-buttons button:hover { background-color: #e9ebee; }
|
||||
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-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); overflow: hidden; }
|
||||
.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 {
|
||||
@ -16,18 +30,61 @@
|
||||
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; }
|
||||
.delete-button {
|
||||
background-color: #fa383e; color: white; border: none; padding: 10px 15px; border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 10px; margin-left: 5px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.delete-button:hover { background-color: #e02c33; }
|
||||
.result-container .error { margin: 12px; color: #fa383e; background-color: #ffe5e6; padding: 10px; border-radius: 6px; white-space: pre-wrap; word-break: break-all; }
|
||||
.result-container .info { margin: 12px; color: #117a11; background-color: #e6f6e6; padding: 10px; border-radius: 6px; }
|
||||
.result-meta {
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
color: #606770;
|
||||
background-color: #f5f6f7;
|
||||
border-top: 1px solid #dddfe2;
|
||||
}
|
||||
table { border-collapse: collapse; width: 100%; }
|
||||
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; }
|
||||
|
||||
.collapsible-header {
|
||||
background-color: #f5f6f7;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid #dddfe2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.collapsible-header:hover { background-color: #e9ebee; }
|
||||
.toggle-icon {
|
||||
margin-right: 8px;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
width: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
.collapsible-content {
|
||||
padding: 12px;
|
||||
border-top: 1px solid #dddfe2;
|
||||
}
|
||||
.collapsible-content.collapsed {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>dbPrompt</header>
|
||||
<header>
|
||||
dbPrompt
|
||||
<div class="header-buttons">
|
||||
<button id="collapse-all-btn">Collapse All</button>
|
||||
<button id="expand-all-btn">Expand All</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-container">
|
||||
<!-- Query blocks will be inserted here -->
|
||||
@ -36,11 +93,37 @@
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const mainContainer = document.getElementById('main-container');
|
||||
const collapseAllBtn = document.getElementById('collapse-all-btn');
|
||||
const expandAllBtn = document.getElementById('expand-all-btn');
|
||||
|
||||
// --- Global Action Handlers ---
|
||||
collapseAllBtn.addEventListener('click', () => {
|
||||
document.querySelectorAll('.collapsible-content').forEach(content => {
|
||||
content.classList.add('collapsed');
|
||||
const header = content.previousElementSibling;
|
||||
if (header && header.classList.contains('collapsible-header')) {
|
||||
header.querySelector('.toggle-icon').textContent = '►';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
expandAllBtn.addEventListener('click', () => {
|
||||
document.querySelectorAll('.collapsible-content').forEach(content => {
|
||||
content.classList.remove('collapsed');
|
||||
const header = content.previousElementSibling;
|
||||
if (header && header.classList.contains('collapsible-header')) {
|
||||
header.querySelector('.toggle-icon').textContent = '▼';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// --- Main Event Handler ---
|
||||
mainContainer.addEventListener('click', async (e) => {
|
||||
if (e.target.classList.contains('run-button')) {
|
||||
const block = e.target.closest('.query-block');
|
||||
const target = e.target;
|
||||
|
||||
// Handle Run Query
|
||||
if (target.classList.contains('run-button')) {
|
||||
const block = target.closest('.query-block');
|
||||
const textarea = block.querySelector('textarea');
|
||||
const queryId = block.dataset.id || '';
|
||||
const query = textarea.value.trim();
|
||||
@ -57,76 +140,140 @@
|
||||
body: JSON.stringify({ id: queryId, query: query })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
|
||||
const data = await response.json();
|
||||
const isNewQueryBlock = block.classList.contains('new-query-block');
|
||||
|
||||
// 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();
|
||||
if (isNewQueryBlock && !data.error) {
|
||||
block.classList.remove('new-query-block');
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.className = 'delete-button';
|
||||
deleteButton.textContent = 'Delete';
|
||||
block.querySelector('.query-input').appendChild(deleteButton);
|
||||
addQueryBlock({}, true);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
renderResult(resultContainer, { error: error.message });
|
||||
}
|
||||
}
|
||||
|
||||
// Handle Delete Query
|
||||
if (target.classList.contains('delete-button')) {
|
||||
if (confirm('Are you sure you want to delete this query history item?')) {
|
||||
const block = target.closest('.query-block');
|
||||
const queryId = block.dataset.id;
|
||||
try {
|
||||
const response = await fetch(`/history/${queryId}`, { method: 'DELETE' });
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
throw new Error(`HTTP error! Status: ${response.status} - ${errorText}`);
|
||||
}
|
||||
block.remove();
|
||||
} catch (error) {
|
||||
const resultContainer = block.querySelector('.result-container');
|
||||
renderResult(resultContainer, { error: `Failed to delete: ${error.message}` });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle Toggle Collapse
|
||||
const header = target.closest('.collapsible-header');
|
||||
if (header) {
|
||||
const content = header.nextElementSibling;
|
||||
if (content && content.classList.contains('collapsible-content')) {
|
||||
content.classList.toggle('collapsed');
|
||||
const icon = header.querySelector('.toggle-icon');
|
||||
icon.textContent = content.classList.contains('collapsed') ? '►' : '▼';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// --- Rendering Functions ---
|
||||
function renderResult(container, data) {
|
||||
let html = '';
|
||||
let contentHtml = '';
|
||||
let isCollapsible = false;
|
||||
|
||||
if (data.error) {
|
||||
html = `<div class="error">${escapeHtml(data.error)}</div>`;
|
||||
contentHtml = `<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>`;
|
||||
contentHtml = `<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>';
|
||||
isCollapsible = true;
|
||||
let tableHtml = '<table><thead><tr>';
|
||||
data.columns.forEach(col => tableHtml += `<th>${escapeHtml(col)}</th>`);
|
||||
tableHtml += '</tr></thead><tbody>';
|
||||
data.rows.forEach(row => {
|
||||
html += '<tr>';
|
||||
tableHtml += '<tr>';
|
||||
row.forEach(cell => {
|
||||
html += `<td>${escapeHtml(cell === null ? 'NULL' : cell)}</td>`;
|
||||
tableHtml += `<td>${escapeHtml(cell === null ? 'NULL' : cell)}</td>`;
|
||||
});
|
||||
html += '</tr>';
|
||||
tableHtml += '</tr>';
|
||||
});
|
||||
html += '</tbody></table>';
|
||||
tableHtml += '</tbody></table>';
|
||||
contentHtml = tableHtml;
|
||||
}
|
||||
} 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>`;
|
||||
contentHtml = `<div class="info">Query executed successfully. ${data.rowsAffected} rows affected.</div>`;
|
||||
} else if (!data.error) {
|
||||
contentHtml = `<div class="info">Query executed successfully.</div>`;
|
||||
}
|
||||
container.innerHTML = html;
|
||||
|
||||
let metaHtml = '';
|
||||
if (data.timestamp) {
|
||||
metaHtml = `
|
||||
<div class="result-meta">
|
||||
<span>Executed: ${new Date(data.timestamp / 1000000).toLocaleString()}</span> |
|
||||
<span>Duration: ${data.duration ?? 'N/A'} ms</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
let finalHtml;
|
||||
if (isCollapsible) {
|
||||
finalHtml = `
|
||||
<div class="collapsible-header">
|
||||
<span class="toggle-icon">▼</span>
|
||||
Result (${data.rows.length} rows)
|
||||
</div>
|
||||
<div class="collapsible-content">
|
||||
${contentHtml}
|
||||
</div>
|
||||
${metaHtml}
|
||||
`;
|
||||
} else {
|
||||
finalHtml = contentHtml + metaHtml;
|
||||
}
|
||||
|
||||
container.innerHTML = finalHtml;
|
||||
}
|
||||
|
||||
function addQueryBlock(data = {}) {
|
||||
function addQueryBlock(data = {}, isNew = false) {
|
||||
const block = document.createElement('div');
|
||||
block.className = 'query-block';
|
||||
if (data.id) {
|
||||
block.dataset.id = data.id;
|
||||
}
|
||||
if (isNew) {
|
||||
block.classList.add('new-query-block');
|
||||
}
|
||||
|
||||
const deleteButtonHtml = !isNew ? `<button class="delete-button">Delete</button>` : '';
|
||||
|
||||
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>
|
||||
${deleteButtonHtml}
|
||||
</div>
|
||||
<div class="result-container"></div>
|
||||
`;
|
||||
|
||||
if (data.id) { // Only render previous results if they exist
|
||||
if (data.id) {
|
||||
const resultContainer = block.querySelector('.result-container');
|
||||
renderResult(resultContainer, data);
|
||||
}
|
||||
@ -138,21 +285,16 @@
|
||||
// --- Initialization ---
|
||||
async function loadHistory() {
|
||||
try {
|
||||
const response = await fetch('/history');
|
||||
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));
|
||||
history.forEach(item => addQueryBlock(item, false));
|
||||
}
|
||||
|
||||
// Always have at least one empty block
|
||||
addQueryBlock();
|
||||
|
||||
addQueryBlock({}, true);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
const block = addQueryBlock();
|
||||
const block = addQueryBlock({}, true);
|
||||
const resultContainer = block.querySelector('.result-container');
|
||||
renderResult(resultContainer, { error: 'Could not load history from server. You can still run new queries.' });
|
||||
}
|
||||
@ -160,6 +302,7 @@
|
||||
|
||||
// --- Utilities ---
|
||||
function escapeHtml(str) {
|
||||
if (str === null || str === undefined) return '';
|
||||
const p = document.createElement('p');
|
||||
p.textContent = str;
|
||||
return p.innerHTML;
|
||||
@ -171,3 +314,4 @@
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user