Update templates/form.html

templates/form.html

@@ -50,18 +50,24 @@
             {% if result.message %}
             <p><strong>Message:</strong> {{ result.message }}</p>
             {% endif %}
-            <p id="email-status" style="color: {% if 'Failed' in result.email_status %}red{% else %}limegreen{% endif %}">{{ result.email_status }}</p>
-            {% if result.scan_id %}
-            <button id="resend-email-btn" data-scan-id="{{ result.scan_id }}">Resend Report to Email</button>
-            {% endif %}
-            <a href="{{ url_for('download_report') }}" id="download-btn">Download Report</a>
+            
+            <p id="email-status" style="font-weight: bold; color: {% if 'Success' in result.email_status %}#4CAF50{% else %}#F44336{% endif %};">
+                {{ result.email_status }}
+            </p>
+            
+            <div class="action-buttons">
+                {% if result.scan_id %}
+                <button id="resend-email-btn" onclick="resendEmail({{ result.scan_id }})">Resend Report</button>
+                {% endif %}
+                <a href="{{ url_for('download_report') }}" id="download-btn">Download Report</a>
+            </div>
         </div>
         {% endif %}
 
         {% if history_plot %}
         <div class="training-history">
             <h2>Model Training History</h2>
-            <img src="{{ history_plot }}" alt="Training History Plot">
+            <img src="{{ url_for('training_plot') }}" alt="Training History Plot">
         </div>
         {% endif %}
 
@@ -87,7 +93,7 @@
                 .then(data => {
                     const historyDiv = document.getElementById('history-results');
                     historyDiv.innerHTML = '';
-                    if (data.length === 0) {
+                    if (data.error || data.length === 0) {
                         historyDiv.innerHTML = '<p>No scan history found for this email.</p>';
                         return;
                     }
@@ -95,13 +101,15 @@
                     data.forEach(scan => {
                         const li = document.createElement('li');
                         li.innerHTML = `
-                            <p><strong>Scan ID:</strong> ${scan.id}</p>
-                            <p><strong>Patient:</strong> ${scan.patient_name}</p>
-                            <p><strong>Prediction:</strong> ${scan.prediction}</p>
-                            <p><strong>Confidence:</strong> ${scan.confidence}</p>
-                            <p><strong>Timestamp:</strong> ${scan.timestamp}</p>
-                            <img src="${scan.image_url}" alt="Scan Image" style="max-width: 200px;">
-                            <button onclick="resendEmail(${scan.id})">Resend Report</button>
+                            <div class="history-item">
+                                <img src="${scan.image_url}" alt="Scan Image">
+                                <div class="history-details">
+                                    <p><strong>Prediction:</strong> ${scan.prediction} (${scan.confidence})</p>
+                                    <p><strong>Patient:</strong> ${scan.patient_name}</p>
+                                    <p><strong>Date:</strong> ${scan.timestamp}</p>
+                                    <button onclick="resendEmail(${scan.id})">Resend Report</button>
+                                </div>
+                            </div>
                         `;
                         ul.appendChild(li);
                     });
@@ -109,11 +117,17 @@
                 })
                 .catch(error => {
                     console.error('Error fetching history:', error);
-                    document.getElementById('history-results').innerHTML = '<p>Error loading history. Please try again.</p>';
+                    document.getElementById('history-results').innerHTML = '<p>Error loading history.</p>';
                 });
         });
 
         function resendEmail(scanId) {
+            // Provide feedback to the user that the action has started
+            const button = event.target;
+            const originalText = button.textContent;
+            button.textContent = 'Sending...';
+            button.disabled = true;
+
             fetch(`/api/email-report/${scanId}`)
                 .then(response => response.json())
                 .then(data => {
@@ -121,14 +135,14 @@
                 })
                 .catch(error => {
                     console.error('Error resending email:', error);
-                    alert('Failed to resend report. Please try again.');
+                    alert('Failed to resend report. Please check the console for details.');
+                })
+                .finally(() => {
+                    // Restore the button to its original state
+                    button.textContent = originalText;
+                    button.disabled = false;
                 });
         }
-
-        document.getElementById('resend-email-btn')?.addEventListener('click', () => {
-            const scanId = document.getElementById('resend-email-btn').getAttribute('data-scan-id');
-            resendEmail(scanId);
-        });
     </script>
 </body>
 </html>