318 lines
14 KiB
HTML
318 lines
14 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;
|
|
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); 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 {
|
|
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; }
|
|
.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
|
|
<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 -->
|
|
</main>
|
|
|
|
<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) => {
|
|
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();
|
|
|
|
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();
|
|
const isNewQueryBlock = block.classList.contains('new-query-block');
|
|
|
|
block.dataset.id = data.id;
|
|
renderResult(resultContainer, data);
|
|
|
|
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 contentHtml = '';
|
|
let isCollapsible = false;
|
|
|
|
if (data.error) {
|
|
contentHtml = `<div class="error">${escapeHtml(data.error)}</div>`;
|
|
} else if (data.columns && data.rows) {
|
|
if (data.rows.length === 0) {
|
|
contentHtml = `<div class="info">Query executed successfully. 0 rows returned.</div>`;
|
|
} else {
|
|
isCollapsible = true;
|
|
let tableHtml = '<table><thead><tr>';
|
|
data.columns.forEach(col => tableHtml += `<th>${escapeHtml(col)}</th>`);
|
|
tableHtml += '</tr></thead><tbody>';
|
|
data.rows.forEach(row => {
|
|
tableHtml += '<tr>';
|
|
row.forEach(cell => {
|
|
tableHtml += `<td>${escapeHtml(cell === null ? 'NULL' : cell)}</td>`;
|
|
});
|
|
tableHtml += '</tr>';
|
|
});
|
|
tableHtml += '</tbody></table>';
|
|
contentHtml = tableHtml;
|
|
}
|
|
} else if (data.hasOwnProperty('rowsAffected')) {
|
|
contentHtml = `<div class="info">Query executed successfully. ${data.rowsAffected} rows affected.</div>`;
|
|
} else if (!data.error) {
|
|
contentHtml = `<div class="info">Query executed successfully.</div>`;
|
|
}
|
|
|
|
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 = {}, 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) {
|
|
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, false));
|
|
}
|
|
addQueryBlock({}, true);
|
|
} catch (error) {
|
|
console.error(error);
|
|
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.' });
|
|
}
|
|
}
|
|
|
|
// --- Utilities ---
|
|
function escapeHtml(str) {
|
|
if (str === null || str === undefined) return '';
|
|
const p = document.createElement('p');
|
|
p.textContent = str;
|
|
return p.innerHTML;
|
|
}
|
|
|
|
// --- Start the app ---
|
|
loadHistory();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|