diff --git a/services/web_interface/app.js b/services/web_interface/app.js index 1a6d9b9..28be521 100644 --- a/services/web_interface/app.js +++ b/services/web_interface/app.js @@ -7,6 +7,7 @@ class NotaryApp { this.apiUrl = 'http://localhost:8000'; this.currentDocument = null; this.documents = []; + this.charts = {}; // Stockage des instances de graphiques this.init(); } @@ -110,20 +111,202 @@ class NotaryApp { return; } - // Update UI + // Store file for preview + this.selectedFile = file; + + // Update UI with preview + this.showFilePreview(file); + } + + showFilePreview(file) { const uploadArea = document.getElementById('upload-area'); - uploadArea.innerHTML = ` - -
${file.name}
-

${this.formatFileSize(file.size)}

- - `; + + if (file.type.startsWith('image/')) { + // Preview for images + const reader = new FileReader(); + reader.onload = (e) => { + uploadArea.innerHTML = ` +
+
+ Aperçu +
+
+
${file.name}
+

${this.formatFileSize(file.size)}

+

Type: ${file.type}

+
+
+ + +
+
+ `; + }; + reader.readAsDataURL(file); + } else if (file.type === 'application/pdf') { + // Preview for PDF + uploadArea.innerHTML = ` +
+
+ +
+ Aperçu PDF non disponible +
+
+
+
${file.name}
+

${this.formatFileSize(file.size)}

+

Type: ${file.type}

+
+
+ + +
+
+ `; + } else { + // Generic preview for other files + uploadArea.innerHTML = ` +
+
+ +
+
+
${file.name}
+

${this.formatFileSize(file.size)}

+

Type: ${file.type}

+
+
+ + +
+
+ `; + } + } + + showDocumentPreview(uploadResult, file) { + // Create a preview modal or section + const previewContainer = document.getElementById('upload-preview'); + if (!previewContainer) { + // Create preview container if it doesn't exist + const uploadSection = document.getElementById('upload-section'); + const previewDiv = document.createElement('div'); + previewDiv.id = 'upload-preview'; + previewDiv.className = 'mt-4'; + uploadSection.appendChild(previewDiv); + } + + const previewContainer = document.getElementById('upload-preview'); + + let previewContent = ''; + + if (file.type.startsWith('image/')) { + const reader = new FileReader(); + reader.onload = (e) => { + previewContent = ` +
+
+
+ Aperçu du document uploadé +
+
+
+
+
+ Aperçu +
+
+
Informations du document
+
    +
  • Nom: ${file.name}
    • +
  • Taille: ${this.formatFileSize(file.size)}
    • +
  • Type: ${file.type}
    • +
  • ID Document: ${uploadResult.document_id}
    • +
  • Statut: ${uploadResult.status}
    • +
+
+ + +
+
+
+
+
+ `; + previewContainer.innerHTML = previewContent; + }; + reader.readAsDataURL(file); + } else { + previewContent = ` +
+
+
+ Aperçu du document uploadé +
+
+
+
+
+ +
+
+
Informations du document
+
    +
  • Nom: ${file.name}
    • +
  • Taille: ${this.formatFileSize(file.size)}
    • +
  • Type: ${file.type}
    • +
  • ID Document: ${uploadResult.document_id}
    • +
  • Statut: ${uploadResult.status}
    • +
+
+ + +
+
+
+
+
+ `; + previewContainer.innerHTML = previewContent; + } + } + + hideDocumentPreview() { + const previewContainer = document.getElementById('upload-preview'); + if (previewContainer) { + previewContainer.innerHTML = ''; + } } clearFile() { + // Clear selected file + this.selectedFile = null; + + // Clear file input document.getElementById('file-input').value = ''; + + // Reset upload area document.getElementById('upload-area').innerHTML = `
Glissez-déposez votre document ici
@@ -134,6 +317,9 @@ class NotaryApp { `; + // Hide document preview + this.hideDocumentPreview(); + // Re-setup event listeners document.getElementById('file-input').addEventListener('change', (e) => { this.handleFileSelect(e.target.files[0]); @@ -141,14 +327,7 @@ class NotaryApp { } async uploadDocument() { - const fileInput = document.getElementById('file-input'); - - if (!fileInput) { - this.showAlert('Élément de fichier non trouvé', 'error'); - return; - } - - const file = fileInput.files[0]; + const file = this.selectedFile || document.getElementById('file-input')?.files[0]; if (!file) { this.showAlert('Veuillez sélectionner un fichier', 'warning'); @@ -185,6 +364,9 @@ class NotaryApp { this.updateProgress(25, 'Document reçu, traitement en cours...'); + // Show document preview after successful upload + this.showDocumentPreview(result, file); + // Poll for status updates this.pollDocumentStatus(result.document_id); @@ -487,10 +669,18 @@ class NotaryApp { } renderCharts(stats) { + // Détruire les graphiques existants + if (this.charts.documentTypes) { + this.charts.documentTypes.destroy(); + } + if (this.charts.timeline) { + this.charts.timeline.destroy(); + } + // Document types chart const typesCtx = document.getElementById('document-types-chart'); if (typesCtx) { - new Chart(typesCtx, { + this.charts.documentTypes = new Chart(typesCtx, { type: 'doughnut', data: { labels: Object.keys(stats.types_documents || {}), @@ -516,6 +706,32 @@ class NotaryApp { } }); } + + // Timeline chart + const timelineCtx = document.getElementById('timeline-chart'); + if (timelineCtx) { + this.charts.timeline = new Chart(timelineCtx, { + type: 'line', + data: { + labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun'], + datasets: [{ + label: 'Documents traités', + data: [12, 19, 3, 5, 2, 3], + borderColor: '#007bff', + backgroundColor: 'rgba(0, 123, 255, 0.1)', + tension: 0.4 + }] + }, + options: { + responsive: true, + scales: { + y: { + beginAtZero: true + } + } + } + }); + } } async checkSystemStatus() { @@ -587,7 +803,4 @@ function testConnection() { app.showAlert('Test de connexion effectué', 'info'); } -// Initialize app when DOM is loaded -document.addEventListener('DOMContentLoaded', () => { - window.app = new NotaryApp(); -}); +// L'application est maintenant initialisée dans index.html diff --git a/services/web_interface/index.html b/services/web_interface/index.html index 101fa6a..3525548 100644 --- a/services/web_interface/index.html +++ b/services/web_interface/index.html @@ -427,5 +427,11 @@ +