peterstockings/function
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add functionality in settings to import data

Browse Source
This commit is contained in:
Peter Stockings
2025-12-02 15:19:20 +11:00
parent 290b141d32
commit ab7079f87e
4 changed files with 406 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
templates/dashboard/settings/database_schema.html
View File

@@ -29,7 +29,6 @@
<!-- ERD Diagram -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Entity Relationship Diagram</h2>
<div id="mermaid-diagram"
class="bg-white dark:bg-gray-900 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
<pre class="mermaid">
@@ -54,32 +53,26 @@ erDiagram
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Run SELECT queries on your data. Queries are automatically scoped to your user account for security.
</p>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">SQL Query</label>
<div id="sql-editor" class="border border-gray-300 dark:border-gray-600 rounded" style="height: 150px;">
</div>
</div>
<div class="flex items-center justify-between mb-4">
<button id="run-query-btn"
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4 .263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Run Query
</button>
<button id="clear-query-btn"
class="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Clear
</button>
class="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">Clear</button>
</div>
<div id="query-message" class="hidden mb-4 p-3 rounded-lg"></div>
<div id="query-results" class="hidden">
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Results</h3>
<div class="overflow-x-auto border border-gray-200 dark:border-gray-700 rounded-lg max-h-96">
@@ -88,8 +81,7 @@ erDiagram
<tr id="results-header"></tr>
</thead>
<tbody id="results-body"
class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
</tbody>
class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700"></tbody>
</table>
</div>
</div>
@@ -98,7 +90,6 @@ erDiagram
<!-- Tables Overview -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Tables Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{% for table in schema_info %}
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
@@ -111,11 +102,8 @@ erDiagram
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
{{ table.columns|length }} column{{ 's' if table.columns|length != 1 else '' }}
{% if table.primary_keys %}
· {{ table.primary_keys|length }} PK
{% endif %}
{% if table.primary_keys %}· {{ table.primary_keys|length }} PK{% endif %}
</p>
<div class="space-y-1 max-h-40 overflow-y-auto">
{% for col in table.columns %}
<div class="text-xs flex items-start py-1">
@@ -131,14 +119,12 @@ erDiagram
<div class="flex-1 min-w-0">
<span class="font-medium text-gray-700 dark:text-gray-300">{{ col.column_name }}</span>
<span class="text-gray-500 dark:text-gray-500 ml-1">{{ col.data_type }}</span>
{% if col.is_nullable == 'NO' %}
<span class="text-red-500 text-[10px] ml-1">*</span>
{% endif %}
{% if col.is_nullable == 'NO' %}<span class="text-red-500 text-[10px] ml-1">*</span>{% endif
%}
</div>
</div>
{% endfor %}
</div>
{% if table.foreign_keys %}
<div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
<p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1.5">References:</p>
@@ -161,71 +147,29 @@ erDiagram
</div>
</div>
<!-- Ace Editor -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.0/ace.js"></script>
<!-- SQL Query Interface Script -->
<script>
// Initialize Ace Editor for SQL
const sqlEditor = ace.edit("sql-editor");
sqlEditor.setTheme("ace/theme/monokai");
sqlEditor.session.setMode("ace/mode/sql");
sqlEditor.setOptions({
fontSize: "14px",
showPrintMargin: false,
showGutter: true,
highlightActiveLine: true,
enableLiveAutocompletion: true
});
// Set default query
sqlEditor.setOptions({ fontSize: "14px", showPrintMargin: false, showGutter: true, highlightActiveLine: true, enableLiveAutocompletion: true });
sqlEditor.setValue(`SELECT * FROM http_functions`, -1);
// Run query button
document.getElementById('run-query-btn').addEventListener('click', async () => {
const query = sqlEditor.getValue().trim();
const messageDiv = document.getElementById('query-message');
const resultsDiv = document.getElementById('query-results');
const runBtn = document.getElementById('run-query-btn');
if (!query) {
showMessage('Please enter a SQL query', 'error');
return;
}
// Disable button and show loading
if (!query) { showMessage('Please enter a SQL query', 'error'); return; }
runBtn.disabled = true;
runBtn.innerHTML = '<svg class="w-4 h-4 mr-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Running...';
try {
const response = await fetch('{{ url_for("settings.execute_query") }}', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ query })
});
const response = await fetch('{{ url_for("settings.execute_query") }}', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query }) });
const data = await response.json();
if (!response.ok) {
showMessage(data.error || 'Query failed', 'error');
resultsDiv.classList.add('hidden');
} else {
showMessage(data.message, 'success');
displayResults(data);
}
} catch (error) {
showMessage('Error executing query: ' + error.message, 'error');
resultsDiv.classList.add('hidden');
} finally {
// Re-enable button
runBtn.disabled = false;
runBtn.innerHTML = '<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>Run Query';
}
if (!response.ok) { showMessage(data.error || 'Query failed', 'error'); document.getElementById('query-results').classList.add('hidden'); }
else { showMessage(data.message, 'success'); displayResults(data); }
} catch (error) { showMessage('Error: ' + error.message, 'error'); document.getElementById('query-results').classList.add('hidden'); }
finally { runBtn.disabled = false; runBtn.innerHTML = '<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>Run Query'; }
});
// Clear button
document.getElementById('clear-query-btn').addEventListener('click', () => {
sqlEditor.setValue('', -1);
document.getElementById('query-message').classList.add('hidden');
@@ -234,15 +178,9 @@ erDiagram
function showMessage(message, type) {
const messageDiv = document.getElementById('query-message');
messageDiv.classList.remove('hidden', 'bg-green-50', 'bg-red-50', 'text-green-700', 'text-red-700',
'dark:bg-green-900/20', 'dark:bg-red-900/20', 'dark:text-green-300', 'dark:text-red-300');
if (type === 'success') {
messageDiv.classList.add('bg-green-50', 'text-green-700', 'dark:bg-green-900/20', 'dark:text-green-300');
} else {
messageDiv.classList.add('bg-red-50', 'text-red-700', 'dark:bg-red-900/20', 'dark:text-red-300');
}
messageDiv.classList.remove('hidden', 'bg-green-50', 'bg-red-50', 'text-green-700', 'text-red-700', 'dark:bg-green-900/20', 'dark:bg-red-900/20', 'dark:text-green-300', 'dark:text-red-300');
if (type === 'success') messageDiv.classList.add('bg-green-50', 'text-green-700', 'dark:bg-green-900/20', 'dark:text-green-300');
else messageDiv.classList.add('bg-red-50', 'text-red-700', 'dark:bg-red-900/20', 'dark:text-red-300');
messageDiv.textContent = message;
}
@@ -250,25 +188,15 @@ erDiagram
const resultsDiv = document.getElementById('query-results');
const headerRow = document.getElementById('results-header');
const tbody = document.getElementById('results-body');
// Clear previous results
headerRow.innerHTML = '';
tbody.innerHTML = '';
if (data.row_count === 0) {
resultsDiv.classList.add('hidden');
return;
}
// Add column headers
if (data.row_count === 0) { resultsDiv.classList.add('hidden'); return; }
data.columns.forEach(col => {
const th = document.createElement('th');
th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider';
th.textContent = col;
headerRow.appendChild(th);
});
// Add rows
data.rows.forEach(row => {
const tr = document.createElement('tr');
row.forEach(cell => {
@@ -279,48 +207,24 @@ erDiagram
});
tbody.appendChild(tr);
});
resultsDiv.classList.remove('hidden');
}
</script>
<!-- Mermaid Diagram Script -->
<script type="module">
// Dynamically import mermaid
const mermaid = await import('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs');
// Initialize mermaid with theme
const isDark = document.documentElement.classList.contains('dark');
mermaid.default.initialize({
startOnLoad: false,
theme: isDark ? 'dark' : 'default',
er: {
fontSize: 14,
useMaxWidth: true
}
er: { layoutDirection: 'TB', fontSize: 12, useMaxWidth: true, minEntityWidth: 150, minEntityHeight: 60, entityPadding: 15, stroke: '#333', fill: '#f9f9f9', diagramPadding: 20 }
});
// Render the diagram
try {
await mermaid.default.run({
querySelector: '.mermaid'
});
await mermaid.default.run({ querySelector: '.mermaid' });
console.log('Mermaid diagram rendered successfully');
} catch (error) {
console.error('Mermaid rendering error:', error);
const diagramDiv = document.getElementById('mermaid-diagram');
if (diagramDiv) {
diagramDiv.innerHTML = `
<div class="text-amber-600 dark:text-amber-400 p-6 text-center">
<svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
<p class="font-medium mb-2">Unable to render ERD</p>
<p class="text-sm">View the tables overview below for schema information.</p>
</div>
`;
}
console.error('Mermaid error:', error);
document.getElementById('mermaid-diagram').innerHTML = '<div class="text-amber-600 dark:text-amber-400 p-6 text-center"><svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg><p class="font-medium mb-2">Unable to render ERD</p><p class="text-sm">View the tables overview below for schema information.</p></div>';
}
</script>
{% endblock %}