hotswap/delphi-database
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

maybe good

Browse Source
This commit is contained in:
HotSwapp
2025-08-08 15:55:15 -05:00
parent ab6f163c15
commit b257a06787
80 changed files with 19739 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

584
templates/import.html Normal file
View File

@@ -0,0 +1,584 @@
{% extends "base.html" %}
{% block title %}Data Import - Delphi Database{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2><i class="bi bi-upload"></i> Data Import</h2>
<div>
<button class="btn btn-info" id="refreshStatusBtn">
<i class="bi bi-arrow-clockwise"></i> Refresh Status
</button>
</div>
</div>
<!-- Import Status Panel -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-info-circle"></i> Current Database Status</h5>
</div>
<div class="card-body">
<div id="importStatus">
<div class="text-center">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2">Loading import status...</p>
</div>
</div>
</div>
</div>
<!-- CSV File Upload Panel -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-file-earmark-arrow-up"></i> Upload CSV Files</h5>
</div>
<div class="card-body">
<form id="importForm" enctype="multipart/form-data">
<div class="row g-3">
<div class="col-md-4">
<label for="fileType" class="form-label">Data Type *</label>
<select class="form-select" id="fileType" name="fileType" required>
<option value="">Select data type...</option>
</select>
<div class="form-text" id="fileTypeDescription"></div>
</div>
<div class="col-md-6">
<label for="csvFile" class="form-label">CSV File *</label>
<input type="file" class="form-control" id="csvFile" name="csvFile" accept=".csv" required>
<div class="form-text">Select the CSV file to import</div>
</div>
<div class="col-md-2">
<label class="form-label">&nbsp;</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="replaceExisting" name="replaceExisting">
<label class="form-check-label" for="replaceExisting">
Replace existing data
</label>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary" id="validateBtn">
<i class="bi bi-check-circle"></i> Validate File
</button>
<button type="submit" class="btn btn-primary" id="importBtn">
<i class="bi bi-upload"></i> Import Data
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Validation Results Panel -->
<div class="card mb-4" id="validationPanel" style="display: none;">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-clipboard-check"></i> File Validation Results</h5>
</div>
<div class="card-body" id="validationResults">
<!-- Validation results will be shown here -->
</div>
</div>
<!-- Import Progress Panel -->
<div class="card mb-4" id="progressPanel" style="display: none;">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-hourglass-split"></i> Import Progress</h5>
</div>
<div class="card-body">
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar" style="width: 0%" id="progressBar">0%</div>
</div>
<div id="progressStatus">Ready to import...</div>
</div>
</div>
<!-- Import Results Panel -->
<div class="card mb-4" id="resultsPanel" style="display: none;">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-check-circle-fill"></i> Import Results</h5>
</div>
<div class="card-body" id="importResults">
<!-- Import results will be shown here -->
</div>
</div>
<!-- Data Management Panel -->
<div class="card">
<div class="card-header">
<h5 class="mb-0"><i class="bi bi-database"></i> Data Management</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h6>Clear Table Data</h6>
<p class="text-muted small">Remove all records from a specific table (cannot be undone)</p>
<div class="input-group">
<select class="form-select" id="clearTableType">
<option value="">Select table to clear...</option>
</select>
<button class="btn btn-danger" id="clearTableBtn">
<i class="bi bi-trash"></i> Clear Table
</button>
</div>
</div>
<div class="col-md-6">
<h6>Quick Actions</h6>
<div class="d-grid gap-2">
<button class="btn btn-outline-warning" id="backupBtn">
<i class="bi bi-download"></i> Download Backup
</button>
<button class="btn btn-outline-info" id="viewLogsBtn">
<i class="bi bi-journal-text"></i> View Import Logs
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Import functionality
let availableFiles = {};
let importInProgress = false;
// Helper function for authenticated API calls
function getAuthHeaders() {
const token = localStorage.getItem('auth_token');
return {
'Authorization': `Bearer ${token}`
};
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
// Check authentication first
const token = localStorage.getItem('auth_token');
if (!token) {
window.location.href = '/login';
return;
}
loadAvailableFiles();
loadImportStatus();
setupEventListeners();
});
function setupEventListeners() {
// Form submission
document.getElementById('importForm').addEventListener('submit', handleImport);
// Validation button
document.getElementById('validateBtn').addEventListener('click', validateFile);
// File type selection
document.getElementById('fileType').addEventListener('change', updateFileTypeDescription);
// Refresh status
document.getElementById('refreshStatusBtn').addEventListener('click', loadImportStatus);
// Clear table
document.getElementById('clearTableBtn').addEventListener('click', clearTable);
// Other buttons
document.getElementById('backupBtn').addEventListener('click', downloadBackup);
document.getElementById('viewLogsBtn').addEventListener('click', viewLogs);
}
async function loadAvailableFiles() {
try {
const response = await fetch('/api/import/available-files', {
headers: getAuthHeaders()
});
if (!response.ok) throw new Error('Failed to load available files');
const data = await response.json();
availableFiles = data;
// Populate file type dropdown
const fileTypeSelect = document.getElementById('fileType');
const clearTableSelect = document.getElementById('clearTableType');
fileTypeSelect.innerHTML = '<option value="">Select data type...</option>';
clearTableSelect.innerHTML = '<option value="">Select table to clear...</option>';
data.available_files.forEach(fileType => {
const description = data.descriptions[fileType] || fileType;
const option1 = document.createElement('option');
option1.value = fileType;
option1.textContent = `${fileType} - ${description}`;
fileTypeSelect.appendChild(option1);
const option2 = document.createElement('option');
option2.value = fileType;
option2.textContent = `${fileType} - ${description}`;
clearTableSelect.appendChild(option2);
});
} catch (error) {
console.error('Error loading available files:', error);
showAlert('Error loading available file types: ' + error.message, 'danger');
}
}
async function loadImportStatus() {
try {
const response = await fetch('/api/import/status', {
headers: getAuthHeaders()
});
if (!response.ok) throw new Error('Failed to load import status');
const status = await response.json();
displayImportStatus(status);
} catch (error) {
console.error('Error loading import status:', error);
document.getElementById('importStatus').innerHTML =
'<div class="alert alert-danger">Error loading import status: ' + error.message + '</div>';
}
}
function displayImportStatus(status) {
const container = document.getElementById('importStatus');
let html = '<div class="row">';
let totalRecords = 0;
Object.entries(status).forEach(([fileType, info], index) => {
totalRecords += info.record_count || 0;
const statusClass = info.error ? 'danger' : (info.record_count > 0 ? 'success' : 'secondary');
const statusIcon = info.error ? 'exclamation-triangle' : (info.record_count > 0 ? 'check-circle' : 'circle');
if (index % 3 === 0 && index > 0) {
html += '</div><div class="row mt-2">';
}
html += `
<div class="col-md-4">
<div class="card border-${statusClass}">
<div class="card-body p-2">
<div class="d-flex justify-content-between align-items-center">
<div>
<small class="fw-bold">${fileType}</small><br>
<small class="text-muted">${info.table_name}</small>
</div>
<div class="text-end">
<i class="bi bi-${statusIcon} text-${statusClass}"></i><br>
<small class="fw-bold">${info.record_count || 0}</small>
</div>
</div>
${info.error ? `<div class="text-danger small mt-1">${info.error}</div>` : ''}
</div>
</div>
</div>
`;
});
html += '</div>';
html += `<div class="mt-3 text-center">
<strong>Total Records: ${totalRecords.toLocaleString()}</strong>
</div>`;
container.innerHTML = html;
}
function updateFileTypeDescription() {
const fileType = document.getElementById('fileType').value;
const description = availableFiles.descriptions && availableFiles.descriptions[fileType];
document.getElementById('fileTypeDescription').textContent = description || '';
}
async function validateFile() {
const fileType = document.getElementById('fileType').value;
const fileInput = document.getElementById('csvFile');
if (!fileType || !fileInput.files[0]) {
showAlert('Please select both file type and CSV file', 'warning');
return;
}
const formData = new FormData();
formData.append('file', fileInput.files[0]);
try {
showProgress(true, 'Validating file...');
const response = await fetch(`/api/import/validate/${fileType}`, {
method: 'POST',
headers: getAuthHeaders(),
body: formData
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.detail || 'Validation failed');
}
const result = await response.json();
displayValidationResults(result);
} catch (error) {
console.error('Validation error:', error);
showAlert('Validation failed: ' + error.message, 'danger');
} finally {
showProgress(false);
}
}
function displayValidationResults(result) {
const panel = document.getElementById('validationPanel');
const container = document.getElementById('validationResults');
let html = '';
// Overall status
const statusClass = result.valid ? 'success' : 'danger';
const statusIcon = result.valid ? 'check-circle-fill' : 'exclamation-triangle-fill';
html += `
<div class="alert alert-${statusClass}">
<i class="bi bi-${statusIcon}"></i>
File validation ${result.valid ? 'passed' : 'failed'}
</div>
`;
// Headers validation
html += '<h6>Column Headers</h6>';
if (result.headers.missing.length > 0) {
html += `<div class="alert alert-warning">
<strong>Missing columns:</strong> ${result.headers.missing.join(', ')}
</div>`;
}
if (result.headers.extra.length > 0) {
html += `<div class="alert alert-info">
<strong>Extra columns:</strong> ${result.headers.extra.join(', ')}
</div>`;
}
if (result.headers.missing.length === 0 && result.headers.extra.length === 0) {
html += '<div class="alert alert-success">All expected columns found</div>';
}
// Sample data
if (result.sample_data && result.sample_data.length > 0) {
html += '<h6>Sample Data (First 10 rows)</h6>';
html += '<div class="table-responsive">';
html += '<table class="table table-sm table-striped">';
html += '<thead><tr>';
Object.keys(result.sample_data[0]).forEach(header => {
html += `<th>${header}</th>`;
});
html += '</tr></thead><tbody>';
result.sample_data.forEach(row => {
html += '<tr>';
Object.values(row).forEach(value => {
html += `<td class="small">${value || ''}</td>`;
});
html += '</tr>';
});
html += '</tbody></table></div>';
}
// Validation errors
if (result.validation_errors && result.validation_errors.length > 0) {
html += '<h6>Data Issues Found</h6>';
html += '<div class="alert alert-warning">';
result.validation_errors.forEach(error => {
html += `<div>Row ${error.row}, Field "${error.field}": ${error.error}</div>`;
});
if (result.total_errors > result.validation_errors.length) {
html += `<div class="mt-2"><strong>... and ${result.total_errors - result.validation_errors.length} more errors</strong></div>`;
}
html += '</div>';
}
container.innerHTML = html;
panel.style.display = 'block';
}
async function handleImport(event) {
event.preventDefault();
if (importInProgress) {
showAlert('Import already in progress', 'warning');
return;
}
const fileType = document.getElementById('fileType').value;
const fileInput = document.getElementById('csvFile');
const replaceExisting = document.getElementById('replaceExisting').checked;
if (!fileType || !fileInput.files[0]) {
showAlert('Please select both file type and CSV file', 'warning');
return;
}
importInProgress = true;
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('replace_existing', replaceExisting);
try {
showProgress(true, 'Importing data...');
const response = await fetch(`/api/import/upload/${fileType}`, {
method: 'POST',
headers: getAuthHeaders(),
body: formData
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.detail || 'Import failed');
}
const result = await response.json();
displayImportResults(result);
// Refresh status after successful import
await loadImportStatus();
// Reset form
document.getElementById('importForm').reset();
} catch (error) {
console.error('Import error:', error);
showAlert('Import failed: ' + error.message, 'danger');
} finally {
importInProgress = false;
showProgress(false);
}
}
function displayImportResults(result) {
const panel = document.getElementById('resultsPanel');
const container = document.getElementById('importResults');
const successClass = result.errors && result.errors.length > 0 ? 'warning' : 'success';
let html = `
<div class="alert alert-${successClass}">
<h6><i class="bi bi-check-circle"></i> Import Completed</h6>
<p class="mb-0">
<strong>File Type:</strong> ${result.file_type}<br>
<strong>Records Imported:</strong> ${result.imported_count}<br>
<strong>Errors:</strong> ${result.total_errors || 0}
</p>
</div>
`;
if (result.errors && result.errors.length > 0) {
html += '<h6>Import Errors</h6>';
html += '<div class="alert alert-danger">';
result.errors.forEach(error => {
html += `<div><strong>Row ${error.row}:</strong> ${error.error}</div>`;
});
if (result.total_errors > result.errors.length) {
html += `<div class="mt-2"><strong>... and ${result.total_errors - result.errors.length} more errors</strong></div>`;
}
html += '</div>';
}
container.innerHTML = html;
panel.style.display = 'block';
}
function showProgress(show, message = '') {
const panel = document.getElementById('progressPanel');
const status = document.getElementById('progressStatus');
const bar = document.getElementById('progressBar');
if (show) {
status.textContent = message;
bar.style.width = '100%';
bar.textContent = 'Processing...';
panel.style.display = 'block';
} else {
panel.style.display = 'none';
}
}
async function clearTable() {
const fileType = document.getElementById('clearTableType').value;
if (!fileType) {
showAlert('Please select a table to clear', 'warning');
return;
}
if (!confirm(`Are you sure you want to clear all data from ${fileType}? This action cannot be undone.`)) {
return;
}
try {
const response = await fetch(`/api/import/clear/${fileType}`, {
method: 'DELETE',
headers: getAuthHeaders()
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.detail || 'Clear operation failed');
}
const result = await response.json();
showAlert(`Successfully cleared ${result.deleted_count} records from ${result.table_name}`, 'success');
// Refresh status
await loadImportStatus();
} catch (error) {
console.error('Clear table error:', error);
showAlert('Clear operation failed: ' + error.message, 'danger');
}
}
function downloadBackup() {
showAlert('Backup functionality coming soon', 'info');
}
function viewLogs() {
showAlert('Import logs functionality coming soon', 'info');
}
function showAlert(message, type = 'info') {
// Create and show Bootstrap alert
const alertDiv = document.createElement('div');
alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
alertDiv.style.top = '20px';
alertDiv.style.right = '20px';
alertDiv.style.zIndex = '9999';
alertDiv.innerHTML = `
${message}
<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>
`;
document.body.appendChild(alertDiv);
// Auto-dismiss after 5 seconds
setTimeout(() => {
if (alertDiv.parentNode) {
alertDiv.remove();
}
}, 5000);
}
</script>
{% endblock %}