| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Historial de Consultas</title> |
| <link rel="stylesheet" href="css/styles.css"> |
| <script src="api.js"></script> |
| <script src="js/consultas.js"></script> |
| <style> |
| .consultations-list { |
| margin-top: 20px; |
| overflow-x: auto; |
| } |
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| margin-top: 10px; |
| } |
| |
| th, td { |
| padding: 12px 15px; |
| text-align: left; |
| border-bottom: 1px solid #ddd; |
| } |
| |
| th { |
| background-color: #f8f9fa; |
| font-weight: bold; |
| } |
| |
| tr:hover { |
| background-color: #f5f5f5; |
| } |
| |
| .diagnosis-positive { |
| color: #dc3545; |
| font-weight: bold; |
| } |
| |
| .diagnosis-negative { |
| color: #28a745; |
| font-weight: bold; |
| } |
| |
| .filters { |
| margin-bottom: 20px; |
| display: flex; |
| gap: 10px; |
| } |
| |
| .filters input { |
| padding: 8px; |
| border: 1px solid #ddd; |
| border-radius: 4px; |
| flex-grow: 1; |
| } |
| |
| .filters button { |
| padding: 8px 15px; |
| background-color: #007bff; |
| color: white; |
| border: none; |
| border-radius: 4px; |
| cursor: pointer; |
| } |
| |
| .filters button:hover { |
| background-color: #0056b3; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <header> |
| <h1>Historial de Consultas</h1> |
| <nav> |
| <a href="index.html">Inicio</a> |
| <a href="pacientes.html">Pacientes</a> |
| <a href="consultas.html" class="active">Consultas</a> |
| </nav> |
| </header> |
|
|
| <div class="content"> |
| <div class="filters"> |
| <input type="text" id="searchInput" placeholder="Buscar por nombre de paciente..."> |
| <button onclick="loadConsultations()">Buscar</button> |
| </div> |
|
|
| <div class="consultations-list"> |
| <table id="consultationsTable"> |
| <thead> |
| <tr> |
| <th>ID</th> |
| <th>Paciente</th> |
| <th>Fecha</th> |
| <th>Diagnóstico</th> |
| <th>Confianza</th> |
| <th>Notas</th> |
| </tr> |
| </thead> |
| <tbody id="consultationsBody"> |
| |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| async function loadConsultations() { |
| try { |
| const searchTerm = document.getElementById('searchInput').value; |
| let result; |
| |
| if (searchTerm) { |
| const searchResp = await api.getPatients(searchTerm); |
| if (searchResp.success && searchResp.patients.length > 0) { |
| const allResp = await api.getConsultations(1, 200, searchTerm); |
| displayConsultations(allResp.consultations || []); |
| return; |
| } |
| } |
| |
| |
| result = await api.getConsultations(1, 100); |
| result.consultations = result.consultations || []; |
| if (result.success) { |
| displayConsultations(result.consultations || []); |
| } else { |
| alert('Error al cargar consultas: ' + (result.message || result.error)); |
| } |
| } catch (error) { |
| console.error('Error:', error); |
| alert('Ocurrio un error al cargar las consultas'); |
| } |
| } |
| |
| |
| function displayConsultations(consultations) { |
| const tbody = document.getElementById('consultationsBody'); |
| tbody.innerHTML = ''; |
| |
| if (consultations.length === 0) { |
| tbody.innerHTML = '<tr><td colspan="6">No se encontraron consultas</td></tr>'; |
| return; |
| } |
| |
| consultations.sort((a, b) => new Date(b.consultationDate) - new Date(a.consultationDate)); |
| |
| consultations.forEach(consultation => { |
| const row = document.createElement('tr'); |
| |
| row.innerHTML = ` |
| <td>${consultation.consultationID}</td> |
| <td>${consultation.patientName || consultation.patientName || consultation.patient_name || 'N/A'}</td> |
| <td>${formatDate(consultation.consultationDate)}</td> |
| <td class="${consultation.diabeticRetinopathy ? 'diagnosis-positive' : 'diagnosis-negative'}"> |
| ${consultation.diabeticRetinopathy ? 'Positivo' : 'Negativo'} |
| </td> |
| <td>${consultation.confidence ? consultation.confidence + '%' : 'N/A'}</td> |
| <td>${consultation.notes || ''}</td> |
| `; |
| |
| tbody.appendChild(row); |
| }); |
| } |
| |
| |
| function formatDate(dateString) { |
| if (!dateString) return 'N/A'; |
| const date = new Date(dateString); |
| return date.toLocaleDateString() + ' ' + date.toLocaleTimeString(); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| loadConsultations(); |
| }); |
| </script> |
| </body> |
| </html> |
