progress
This commit is contained in:
HotSwapp
@@ -3,146 +3,164 @@
|
||||
{% 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 class="space-y-6">
|
||||
<!-- Page Header -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center justify-center w-10 h-10 bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded-xl">
|
||||
<i class="fa-solid fa-upload text-lg"></i>
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100">Data Import</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="refreshStatusBtn" class="bg-info-600 text-white hover:bg-info-700 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors duration-200 flex items-center gap-2">
|
||||
<i class="fa-solid fa-rotate-right"></i>
|
||||
<span>Refresh Status</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import Status Panel -->
|
||||
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
|
||||
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
||||
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
||||
<i class="fa-solid fa-circle-info"></i>
|
||||
<span>Current Database Status</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div id="importStatus">
|
||||
<div class="flex items-center justify-center py-4 text-neutral-500 dark:text-neutral-400">
|
||||
<i class="fa-solid fa-rotate-right animate-spin text-xl mr-2"></i>
|
||||
<p>Loading import status...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CSV File Upload Panel -->
|
||||
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
|
||||
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
||||
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
||||
<i class="fa-regular fa-file-arrow-up"></i>
|
||||
<span>Upload CSV Files</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<form id="importForm" enctype="multipart/form-data">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
|
||||
<div class="md:col-span-4">
|
||||
<label for="fileType" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Data Type *</label>
|
||||
<select class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200" id="fileType" name="fileType" required>
|
||||
<option value="">Select data type...</option>
|
||||
</select>
|
||||
<div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1" id="fileTypeDescription"></div>
|
||||
</div>
|
||||
<div class="md:col-span-6">
|
||||
<label for="csvFile" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">CSV File *</label>
|
||||
<input type="file" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-primary-100 file:text-primary-700 hover:file:bg-primary-200 transition-all duration-200" id="csvFile" name="csvFile" accept=".csv" required>
|
||||
<div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Select the CSV file to import</div>
|
||||
</div>
|
||||
<div class="md:col-span-2 flex items-end">
|
||||
<label class="inline-flex items-center gap-2">
|
||||
<input class="h-4 w-4 text-primary-600 border-neutral-300 rounded" type="checkbox" id="replaceExisting" name="replaceExisting">
|
||||
<span>Replace existing data</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<button type="button" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200 flex items-center gap-2" id="validateBtn">
|
||||
<i class="fa-regular fa-circle-check"></i>
|
||||
<span>Validate File</span>
|
||||
</button>
|
||||
<button type="submit" class="px-4 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg transition-colors duration-200 flex items-center gap-2" id="importBtn">
|
||||
<i class="fa-solid fa-upload"></i>
|
||||
<span>Import Data</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Validation Results Panel -->
|
||||
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft hidden" id="validationPanel">
|
||||
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
||||
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
||||
<i class="fa-solid fa-clipboard-check"></i>
|
||||
<span>File Validation Results</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="p-6" id="validationResults">
|
||||
<!-- Validation results will be shown here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import Progress Panel -->
|
||||
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft hidden" id="progressPanel">
|
||||
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
||||
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
||||
<i class="fa-solid fa-hourglass-half"></i>
|
||||
<span>Import Progress</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="bg-neutral-200 dark:bg-neutral-700 rounded-full h-2 mb-3 overflow-hidden">
|
||||
<div class="bg-primary-600 h-full rounded-full transition-all duration-300" style="width: 0%" id="progressBar"></div>
|
||||
</div>
|
||||
<div id="progressStatus" class="text-sm text-neutral-600 dark:text-neutral-400">Ready to import...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import Results Panel -->
|
||||
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft hidden" id="resultsPanel">
|
||||
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
||||
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
||||
<i class="fa-solid fa-circle-check"></i>
|
||||
<span>Import Results</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="p-6" id="importResults">
|
||||
<!-- Import results will be shown here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Management Panel -->
|
||||
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
|
||||
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
||||
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
||||
<i class="fa-solid fa-database"></i>
|
||||
<span>Data Management</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<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>
|
||||
<h6 class="text-base font-semibold mb-2">Clear Table Data</h6>
|
||||
<p class="text-sm text-neutral-500 dark:text-neutral-400 mb-3">Remove all records from a specific table (cannot be undone)</p>
|
||||
<div class="flex gap-3">
|
||||
<select class="flex-grow px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200" id="clearTableType">
|
||||
<option value="">Select table to clear...</option>
|
||||
</select>
|
||||
<button class="px-4 py-3 bg-danger-600 text-white hover:bg-danger-700 rounded-lg transition-colors duration-200 flex items-center gap-2 whitespace-nowrap" id="clearTableBtn">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
<span>Clear Table</span>
|
||||
</button>
|
||||
</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"> </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>
|
||||
<h6 class="text-base font-semibold mb-2">Quick Actions</h6>
|
||||
<div class="space-y-3">
|
||||
<button class="w-full px-4 py-3 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2" id="backupBtn">
|
||||
<i class="fa-solid fa-download"></i>
|
||||
<span>Download Backup</span>
|
||||
</button>
|
||||
<button class="w-full px-4 py-3 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2" id="viewLogsBtn">
|
||||
<i class="fa-regular fa-file-lines"></i>
|
||||
<span>View Import Logs</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -250,50 +268,46 @@ async function loadImportStatus() {
|
||||
} 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>';
|
||||
'<div class="p-4 bg-danger-100 dark:bg-danger-900/30 text-danger-700 dark:text-danger-300 rounded-lg">Error loading import status: ' + error.message + '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function displayImportStatus(status) {
|
||||
const container = document.getElementById('importStatus');
|
||||
|
||||
let html = '<div class="row">';
|
||||
let html = '<div class="grid grid-cols-1 md:grid-cols-3 gap-4">';
|
||||
let totalRecords = 0;
|
||||
|
||||
Object.entries(status).forEach(([fileType, info], index) => {
|
||||
Object.entries(status).forEach(([fileType, info]) => {
|
||||
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">';
|
||||
}
|
||||
const statusClass = info.error ? 'danger' : (info.record_count > 0 ? 'success' : 'neutral');
|
||||
const statusBg = info.error ? 'bg-danger-100 dark:bg-danger-900/30 border-danger-200 dark:border-danger-800' :
|
||||
(info.record_count > 0 ? 'bg-success-100 dark:bg-success-900/30 border-success-200 dark:border-success-800' :
|
||||
'bg-neutral-100 dark:bg-neutral-900/30 border-neutral-200 dark:border-neutral-800');
|
||||
const statusIcon = info.error ? 'triangle-exclamation text-danger-600' :
|
||||
(info.record_count > 0 ? 'circle-check text-success-600' : 'circle text-neutral-600');
|
||||
|
||||
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 class="bg-white dark:bg-neutral-800 border ${statusBg} rounded-lg p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h6 class="font-semibold text-sm text-neutral-900 dark:text-neutral-100">${fileType}</h6>
|
||||
<p class="text-xs text-neutral-600 dark:text-neutral-400">${info.table_name}</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<i class="fa-solid fa-${statusIcon} text-lg"></i>
|
||||
<p class="font-bold text-sm text-neutral-900 dark:text-neutral-100 mt-1">${info.record_count || 0}</p>
|
||||
</div>
|
||||
</div>
|
||||
${info.error ? `<p class="text-xs text-danger-600 dark:text-danger-400 mt-2">${info.error}</p>` : ''}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
html += `<div class="mt-3 text-center">
|
||||
<strong>Total Records: ${totalRecords.toLocaleString()}</strong>
|
||||
html += `<div class="mt-4 text-center">
|
||||
<span class="font-medium text-neutral-900 dark:text-neutral-100">Total Records: ${totalRecords.toLocaleString()}</span>
|
||||
</div>`;
|
||||
|
||||
container.innerHTML = html;
|
||||
@@ -310,7 +324,7 @@ async function validateFile() {
|
||||
const fileInput = document.getElementById('csvFile');
|
||||
|
||||
if (!fileType || !fileInput.files[0]) {
|
||||
showAlert('Please select both file type and CSV file', 'warning');
|
||||
showAlert('Please select both data type and CSV file', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -350,46 +364,45 @@ function displayValidationResults(result) {
|
||||
|
||||
// Overall status
|
||||
const statusClass = result.valid ? 'success' : 'danger';
|
||||
const statusIcon = result.valid ? 'check-circle-fill' : 'exclamation-triangle-fill';
|
||||
const statusIcon = result.valid ? 'circle-check text-success-600' : 'triangle-exclamation text-danger-600';
|
||||
|
||||
html += `
|
||||
<div class="alert alert-${statusClass}">
|
||||
<i class="bi bi-${statusIcon}"></i>
|
||||
File validation ${result.valid ? 'passed' : 'failed'}
|
||||
<div class="p-4 bg-${statusClass}-100 dark:bg-${statusClass}-900/30 rounded-lg mb-4">
|
||||
<i class="fa-solid fa-${statusIcon} mr-2"></i>
|
||||
<span class="font-medium">File validation ${result.valid ? 'passed' : 'failed'}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Headers validation
|
||||
html += '<h6>Column Headers</h6>';
|
||||
html += '<h6 class="text-sm font-semibold mb-2">Column Headers</h6>';
|
||||
if (result.headers.missing.length > 0) {
|
||||
html += `<div class="alert alert-warning">
|
||||
<strong>Missing columns:</strong> ${result.headers.missing.join(', ')}
|
||||
html += `<div class="p-3 bg-warning-100 dark:bg-warning-900/30 rounded-lg mb-2">
|
||||
<strong class="text-warning-700 dark:text-warning-300">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(', ')}
|
||||
html += `<div class="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg mb-2">
|
||||
<strong class="text-info-700 dark:text-info-300">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>';
|
||||
html += '<div class="p-3 bg-success-100 dark:bg-success-900/30 rounded-lg mb-2">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>';
|
||||
html += '<h6 class="text-sm font-semibold mb-2 mt-4">Sample Data (First 10 rows)</h6>';
|
||||
html += '<div class="overflow-x-auto"><table class="w-full text-sm text-neutral-900 dark:text-neutral-100">';
|
||||
html += '<thead><tr class="bg-neutral-100 dark:bg-neutral-700">';
|
||||
Object.keys(result.sample_data[0]).forEach(header => {
|
||||
html += `<th>${header}</th>`;
|
||||
html += `<th class="px-3 py-2 text-left font-medium">${header}</th>`;
|
||||
});
|
||||
html += '</tr></thead><tbody>';
|
||||
html += '</tr></thead><tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">';
|
||||
|
||||
result.sample_data.forEach(row => {
|
||||
html += '<tr>';
|
||||
Object.values(row).forEach(value => {
|
||||
html += `<td class="small">${value || ''}</td>`;
|
||||
html += `<td class="px-3 py-2">${value || ''}</td>`;
|
||||
});
|
||||
html += '</tr>';
|
||||
});
|
||||
@@ -398,19 +411,19 @@ function displayValidationResults(result) {
|
||||
|
||||
// Validation errors
|
||||
if (result.validation_errors && result.validation_errors.length > 0) {
|
||||
html += '<h6>Data Issues Found</h6>';
|
||||
html += '<div class="alert alert-warning">';
|
||||
html += '<h6 class="text-sm font-semibold mb-2 mt-4">Data Issues Found</h6>';
|
||||
html += '<div class="p-3 bg-warning-100 dark:bg-warning-900/30 rounded-lg">';
|
||||
result.validation_errors.forEach(error => {
|
||||
html += `<div>Row ${error.row}, Field "${error.field}": ${error.error}</div>`;
|
||||
html += `<div class="text-sm"><strong>Row ${error.row}, Field "${error.field}":</strong> ${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 class="mt-2 text-sm font-medium">... and ${result.total_errors - result.validation_errors.length} more errors</div>`;
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
panel.style.display = 'block';
|
||||
panel.classList.remove('hidden');
|
||||
}
|
||||
|
||||
async function handleImport(event) {
|
||||
@@ -426,7 +439,7 @@ async function handleImport(event) {
|
||||
const replaceExisting = document.getElementById('replaceExisting').checked;
|
||||
|
||||
if (!fileType || !fileInput.files[0]) {
|
||||
showAlert('Please select both file type and CSV file', 'warning');
|
||||
showAlert('Please select both data type and CSV file', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -475,30 +488,30 @@ function displayImportResults(result) {
|
||||
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 class="p-4 bg-${successClass}-100 dark:bg-${successClass}-900/30 rounded-lg mb-4">
|
||||
<h6 class="font-semibold flex items-center gap-2"><i class="fa-regular fa-circle-check"></i> Import Completed</h6>
|
||||
<div class="text-sm mt-2 space-y-1">
|
||||
<p><strong>File Type:</strong> ${result.file_type}</p>
|
||||
<p><strong>Records Imported:</strong> ${result.imported_count}</p>
|
||||
<p><strong>Errors:</strong> ${result.total_errors || 0}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (result.errors && result.errors.length > 0) {
|
||||
html += '<h6>Import Errors</h6>';
|
||||
html += '<div class="alert alert-danger">';
|
||||
html += '<h6 class="text-sm font-semibold mb-2">Import Errors</h6>';
|
||||
html += '<div class="p-3 bg-danger-100 dark:bg-danger-900/30 rounded-lg">';
|
||||
result.errors.forEach(error => {
|
||||
html += `<div><strong>Row ${error.row}:</strong> ${error.error}</div>`;
|
||||
html += `<div class="text-sm"><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 class="mt-2 text-sm font-medium">... and ${result.total_errors - result.errors.length} more errors</div>`;
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
panel.style.display = 'block';
|
||||
panel.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function showProgress(show, message = '') {
|
||||
@@ -509,10 +522,9 @@ function showProgress(show, message = '') {
|
||||
if (show) {
|
||||
status.textContent = message;
|
||||
bar.style.width = '100%';
|
||||
bar.textContent = 'Processing...';
|
||||
panel.style.display = 'block';
|
||||
panel.classList.remove('hidden');
|
||||
} else {
|
||||
panel.style.display = 'none';
|
||||
panel.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -560,25 +572,13 @@ function viewLogs() {
|
||||
}
|
||||
|
||||
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);
|
||||
if (window.alerts && typeof window.alerts.show === 'function') {
|
||||
window.alerts.show(message, type);
|
||||
} else if (window.showNotification) {
|
||||
window.showNotification(message, type);
|
||||
} else {
|
||||
alert(String(message));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user