Update web/diagnosis.html

web/diagnosis.html

@@ -9,7 +9,7 @@
     <title>Diagnóstico IA</title>
     <link rel="stylesheet" href="css/simplebar.css">
     <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="css/feather.css">
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <link rel="stylesheet" href="css/select2.css">
     <link rel="stylesheet" href="css/dropzone.css">
     <link rel="stylesheet" href="css/uppy.min.css">
@@ -195,7 +195,7 @@
     <!-- Navegación superior -->
     <nav class="topnav navbar navbar-light">
         <button type="button" class="navbar-toggler text-muted mt-2 p-0 mr-3 collapseSidebar">
-            <i class="fe fe-menu navbar-toggler-icon"></i>
+            <i data-feather="menu" class="navbar-toggler-icon"></i>
         </button>
 
         <ul class="nav">
@@ -213,7 +213,7 @@
     </nav>
     <aside class="sidebar-left border-right bg-white shadow" id="leftSidebar" data-simplebar>
         <a href="#" class="btn collapseSidebar toggle-btn d-lg-none text-muted ml-2 mt-3" data-toggle="toggle">
-            <i class="fe fe-x"><span class="sr-only"></span></i>
+            <i data-feather="x"><span class="sr-only"></span></i>
         </a>
         <nav class="vertnav navbar navbar-light">
             <!-- nav bar -->
@@ -226,31 +226,31 @@
             <ul class="navbar-nav flex-fill w-100 mb-2">
                 <li class="nav-item">
                     <a class="nav-link" href="./index.html">
-                        <i class="fe fe-home fe-16"></i>
+                        <i data-feather="home" class="fe-16"></i>
                         <span class="ml-3 item-text">Dashboard</span>
                     </a>
                 </li>
                 <li class="nav-item active">
                     <a class="nav-link" href="./diagnosis.html">
-                        <i class="fe fe-eye fe-16"></i>
+                        <i data-feather="eye" class="fe-16"></i>
                         <span class="ml-3 item-text">Diagnóstico</span>
                     </a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="./patients.html">
-                        <i class="fe fe-users fe-16"></i>
+                        <i data-feather="users" class="fe-16"></i>
                         <span class="ml-3 item-text">Pacientes</span>
                     </a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="./historial-consultas.html">
-                        <i class="fe fe-file-text fe-16"></i>
+                        <i data-feather="file-text" class="fe-16"></i>
                         <span class="ml-3 item-text">Consultas</span>
                     </a>
                 </li>
                 <li class="nav-item active">
                     <a class="nav-link" href="./users.html">
-                        <i class="fe fe-user fe-16"></i>
+                        <i data-feather="user" class="fe-16"></i>
                         <span class="ml-3 item-text">Usuarios</span>
                     </a>
                 </li>
@@ -267,7 +267,7 @@
                     <div class="row align-items-center mb-4">
                         <div class="col">
                             <h2 class="h3 page-title">
-                                <i class="fe fe-eye fe-24 mr-2 text-primary"></i>
+                                <i data-feather="eye" class="fe-24 mr-2 text-primary"></i>
                                 Diagnóstico con Inteligencia Artificial
                             </h2>
                             <p class="text-muted">Diagnostico de retinopatía diabética mediante análisis de imágenes</p>
@@ -280,7 +280,7 @@
                             <div class="card shadow mb-4">
                                 <div class="card-header">
                                     <h5 class="card-title mb-0">
-                                        <i class="fe fe-upload fe-16 mr-2"></i>Cargar Imágenes para Análisis
+                                        <i data-feather="upload" class="fe-16 mr-2"></i>Cargar Imágenes para Análisis
                                     </h5>
                                 </div>
                                 <div class="card-body">
@@ -294,7 +294,7 @@
 
                                             <!-- Zona de carga 2 -->
                                             <div id="uploadZone2" class="upload-zone" data-zone="2">
-                                                <i class="fe fe-camera fe-48 text-muted mb-3"></i>
+                                                <i data-feather="camera" class="fe-48 text-muted mb-3"></i>
                                                 <h5 class="text-muted">Arrastra una imagen aquí o haz clic para seleccionar</h5>
                                                 <p class="text-muted mb-0">Formatos soportados: JPG, PNG, JPEG (Máx. 10MB)</p>
                                             </div>
@@ -304,13 +304,13 @@
                                                 <img id="previewImg2" class="image-preview" alt="Vista previa">
                                                 <div class="mt-3">
                                                     <button class="btn btn-success btn-lg mr-2" id="analyzeBtn2">
-                                                        <i class="fe fe-zap fe-16 mr-2"></i>Analizar con IA
+                                                        <i data-feather="zap" class="fe-16 mr-2"></i>Analizar con IA
                                                     </button>
                                                     <button class="btn btn-outline-secondary mr-2" id="clearBtn2">
-                                                        <i class="fe fe-x fe-16 mr-2"></i>Limpiar
+                                                        <i data-feather="x" class="fe-16 mr-2"></i>Limpiar
                                                     </button>
                                                     <button class="btn btn-warning gradcam-btn" id="gradcamBtn2" style="display: none;">
-                                                        <i class="fe fe-eye fe-16 mr-2"></i>Ver Grad-CAM
+                                                        <i data-feather="eye" class="fe-16 mr-2"></i>Ver Grad-CAM
                                                     </button>
                                                 </div>
                                             </div>
@@ -320,7 +320,7 @@
                                                 <div class="card shadow mb-4 analysis-card">
                                                     <div class="card-body">
                                                         <h5 class="mb-4">
-                                                            <i class="fe fe-activity fe-16 mr-2"></i>Resultados - Ojo Derecho
+                                                            <i data-feather="activity" class="fe-16 mr-2"></i>Resultados - Ojo Derecho
                                                         </h5>
                                                         <div id="resultContent2"></div>
                                                     </div>
@@ -337,7 +337,7 @@
 
                                             <!-- Zona de carga 1 -->
                                             <div id="uploadZone1" class="upload-zone" data-zone="1">
-                                                <i class="fe fe-camera fe-48 text-muted mb-3"></i>
+                                                <i data-feather="camera" class="fe-48 text-muted mb-3"></i>
                                                 <h5 class="text-muted">Arrastra una imagen aquí o haz clic para seleccionar</h5>
                                                 <p class="text-muted mb-0">Formatos soportados: JPG, PNG, JPEG (Máx. 10MB)</p>
                                             </div>
@@ -347,13 +347,13 @@
                                                 <img id="previewImg1" class="image-preview" alt="Vista previa">
                                                 <div class="mt-3">
                                                     <button class="btn btn-success btn-lg mr-2" id="analyzeBtn1">
-                                                        <i class="fe fe-zap fe-16 mr-2"></i>Analizar con IA
+                                                        <i data-feather="zap" class="fe-16 mr-2"></i>Analizar con IA
                                                     </button>
                                                     <button class="btn btn-outline-secondary mr-2" id="clearBtn1">
-                                                        <i class="fe fe-x fe-16 mr-2"></i>Limpiar
+                                                        <i data-feather="x" class="fe-16 mr-2"></i>Limpiar
                                                     </button>
                                                     <button class="btn btn-warning gradcam-btn" id="gradcamBtn1" style="display: none;">
-                                                        <i class="fe fe-eye fe-16 mr-2"></i>Ver Grad-CAM
+                                                        <i data-feather="eye" class="fe-16 mr-2"></i>Ver Grad-CAM
                                                     </button>
                                                 </div>
                                             </div>
@@ -363,7 +363,7 @@
                                                 <div class="card shadow mb-4 analysis-card">
                                                     <div class="card-body">
                                                         <h5 class="mb-4">
-                                                            <i class="fe fe-activity fe-16 mr-2"></i>Resultados - Ojo Izquierdo
+                                                            <i data-feather="activity" class="fe-16 mr-2"></i>Resultados - Ojo Izquierdo
                                                         </h5>
                                                         <div id="resultContent1"></div>
                                                     </div>
@@ -380,7 +380,7 @@
                             <div class="card shadow mb-4">
                                 <div class="card-header">
                                     <h6 class="card-title mb-0">
-                                        <i class="fe fe-user fe-16 mr-2"></i>Información del Paciente y Consulta
+                                        <i data-feather="user" class="fe-16 mr-2"></i>Información del Paciente y Consulta
                                     </h6>
                                 </div>
                                 <div class="card-body">
@@ -436,7 +436,7 @@
                                     </div>
 
                                     <button class="btn btn-primary btn-block" id="saveConsultationBtn" type="button">
-                                        <i class="fe fe-save fe-16 mr-2"></i>Guardar Consulta
+                                        <i data-feather="save" class="fe-16 mr-2"></i>Guardar Consulta
                                     </button>
                                 </div>
                             </div>
@@ -445,7 +445,7 @@
                             <div class="card shadow mb-4">
                                 <div class="card-header">
                                     <h6 class="card-title mb-0">
-                                        <i class="fe fe-info fe-16 mr-2"></i>Importante
+                                        <i data-feather="info" class="fe-16 mr-2"></i>Importante
                                     </h6>
                                 </div>
                                 <div class="card-body">
@@ -465,32 +465,6 @@
     </main>
 </div>
 
-<!-- Modal de Confirmación de Consulta -->
-<div class="modal fade" id="consultationResultModal" tabindex="-1" role="dialog" aria-labelledby="consultationResultModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered" role="document">
-        <div class="modal-content" style="border-radius: 12px; overflow: hidden;">
-            <div class="modal-header" id="consultationResultHeader">
-                <h5 class="modal-title" id="consultationResultModalLabel">
-                    <i id="consultationResultIcon" class="fe mr-2"></i>
-                    <span id="consultationResultTitle"></span>
-                </h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body text-center py-4">
-                <div id="consultationResultBody"></div>
-            </div>
-            <div class="modal-footer justify-content-center">
-                <button type="button" class="btn" id="consultationResultCloseBtn" data-dismiss="modal">Cerrar</button>
-                <a href="historial-consultas.html" class="btn btn-outline-primary" id="consultationResultViewBtn" style="display:none;">
-                    <i class="fe fe-list fe-16 mr-1"></i>Ver Historial
-                </a>
-            </div>
-        </div>
-    </div>
-</div>
-
 <script src="js/jquery.min.js"></script>
 <script src="js/popper.min.js"></script>
 <script src="js/moment.min.js"></script>
@@ -530,40 +504,6 @@
 
             updateLastUpdate();
             setInterval(updateLastUpdate, 60000);
-
-            // Autocompletar paciente si viene desde patients.html
-            const urlParams = new URLSearchParams(window.location.search);
-            const patientIdFromUrl = urlParams.get('patient');
-            if (patientIdFromUrl) {
-                autoSelectPatientById(parseInt(patientIdFromUrl));
-            }
-        }
-
-        // AUTOSELECCIONAR PACIENTE POR ID (desde URL)
-        function autoSelectPatientById(patientId) {
-            api.getPatient(patientId).then(function(response) {
-                if (response && response.success && response.patient) {
-                    const patient = response.patient;
-                    selectedPatient = patient;
-
-                    const age = patient.birthDate ? (moment ? moment().diff(moment(patient.birthDate), 'years') : 'N/A') : 'N/A';
-                    $('#patientSearch').val(patient.name);
-                    $('#selectedPatientInfo').show();
-                    $('#patientName').text(patient.name);
-                    $('#patientDetails').html(`
-                        <strong>ID:</strong> ${patient.patientID} |
-                        <strong>Edad:</strong> ${age} años
-                        ${patient.diabetesType ? '| <strong>Diabetes:</strong> ' + patient.diabetesType : ''}
-                    `);
-                    $('#selectedPatientId').val(patient.patientID);
-                    enableSaveButton();
-                    console.log('Paciente autoseleccionado:', patient.name);
-                } else {
-                    console.warn('No se pudo cargar el paciente con ID:', patientId);
-                }
-            }).catch(function(err) {
-                console.error('Error cargando paciente por ID:', err);
-            });
         }
 
         // AUTENTICACION
@@ -785,7 +725,7 @@
                     }
 
                     $(`#analyzeBtn${zoneNumber}`).prop('disabled', false)
-                        .html('<i class="fe fe-zap fe-16 mr-2"></i>Analizar con IA')
+                        .html('<i data-feather="zap" class="fe-16 mr-2"></i>Analizar con IA')
                         .removeClass('pulse-animation');
 
                     showAnalysisResults(mockResult, zoneNumber);
@@ -798,7 +738,7 @@
             api.predict(imageData, fileName).then(function(result) {
                 // Restaurar boton
                 $(`#analyzeBtn${zoneNumber}`).prop('disabled', false)
-                    .html('<i class="fe fe-zap fe-16 mr-2"></i>Analizar con IA')
+                    .html('<i data-feather="zap" class="fe-16 mr-2"></i>Analizar con IA')
                     .removeClass('pulse-animation');
 
                 if (result && result.success) {
@@ -880,7 +820,7 @@
         <div class="card shadow-sm mt-3">
             <div class="card-header d-flex justify-content-between align-items-center">
                 <h6 class="mb-0">
-                    <i class="fe fe-bar-chart-2 fe-16 mr-2"></i>Detalles del Análisis
+                    <i data-feather="bar-chart-2" class="fe-16 mr-2"></i>Detalles del Análisis
                 </h6>
                 <span class="badge badge-pill ${isPositive ? 'badge-warning' : 'badge-success'}">${confidence}%</span>
             </div>
@@ -908,7 +848,7 @@
                         <div class="border-right">
                             <h6 class="text-muted mb-0">Análisis realizado</h6>
                             <small class="text-muted">
-                                <i class="fe fe-clock fe-12 mr-1"></i>
+                                <i data-feather="clock" class="fe-12 mr-1"></i>
                                 ${moment ? moment(result.timestamp).format('DD/MM/YYYY HH:mm') : new Date(result.timestamp).toLocaleString()}
                             </small>
                         </div>
@@ -916,7 +856,7 @@
                     <div class="col-6">
                         <h6 class="text-muted mb-0">Modelo utilizado</h6>
                         <small class="text-muted">
-                            <i class="fe fe-cpu fe-12 mr-1"></i>
+                            <i data-feather="cpu" class="fe-12 mr-1"></i>
                             EfficientNetB0
                         </small>
                     </div>
@@ -1071,7 +1011,7 @@
                 console.log('Eel no disponible - simulando guardado');
                 setTimeout(() => {
                     $('#saveConsultationBtn').prop('disabled', false)
-                        .html('<i class="fe fe-save fe-16 mr-2"></i>Guardar Consulta');
+                        .html('<i data-feather="save" class="fe-16 mr-2"></i>Guardar Consulta');
                     showAlert('success', 'Consulta guardada correctamente (simulación)');
                 }, 1500);
                 return;
@@ -1083,21 +1023,16 @@
 
                 // Restaurar boton
                 $('#saveConsultationBtn').prop('disabled', false)
-                    .html('<i class="fe fe-save fe-16 mr-2"></i>Guardar Consulta');
+                    .html('<i data-feather="save" class="fe-16 mr-2"></i>Guardar Consulta');
 
                 if (response && response.success) {
+                    showAlert('success', 'Consulta guardada correctamente');
                     console.log('Consulta guardada exitosamente:', response);
-                    showConsultationResultModal(true, selectedPatient.name);
                 } else {
                     const errorMsg = response?.message || 'Error al guardar la consulta';
+                    showAlert('error', errorMsg);
                     console.error('Error guardando consulta:', response);
-                    showConsultationResultModal(false, null, errorMsg);
                 }
-            }).catch(function(err) {
-                $('#saveConsultationBtn').prop('disabled', false)
-                    .html('<i class="fe fe-save fe-16 mr-2"></i>Guardar Consulta');
-                console.error('Error de red al guardar consulta:', err);
-                showConsultationResultModal(false, null, 'No se pudo conectar con el servidor. Intenta nuevamente.');
             });
         }
 
@@ -1132,7 +1067,7 @@ if (false) { /* removed */ }
             api.gradcam(imageData, fileName, lastResult).then(function(response) {
                 // Restaurar boton
                 $(`#gradcamBtn${zoneNumber}`).prop('disabled', false)
-                    .html('<i class="fe fe-eye fe-16 mr-2"></i>Ver Grad-CAM');
+                    .html('<i data-feather="eye" class="fe-16 mr-2"></i>Ver Grad-CAM');
 
                 if (response && response.success) {
                     console.log('Grad-CAM generado exitosamente');
@@ -1162,7 +1097,7 @@ if (false) { /* removed */ }
         <div class="modal-content">
             <div class="modal-header bg-danger text-white">
                 <h5 class="modal-title">
-                    <i class="fe fe-eye mr-2"></i>Zoom HD - ${eyeName}
+                    <i data-feather="eye" class="mr-2"></i>Zoom HD - ${eyeName}
                     <span class="badge badge-light text-danger ml-2">Retinopatía Detectada</span>
                 </h5>
                 <button type="button" class="close text-white" data-dismiss="modal">
@@ -1177,7 +1112,7 @@ if (false) { /* removed */ }
                          alt="Zoom HD - Región Crítica">
                     <div class="mt-3">
                         <h6 class="text-danger mb-2">
-                            <i class="fe fe-zoom-in mr-2"></i>Zona Crítica en Alta Resolución
+                            <i data-feather="zoom-in" class="mr-2"></i>Zona Crítica en Alta Resolución
                         </h6>
                         <p class="text-muted mb-0">
                             <strong>Activación máxima:</strong> ${maxAct} |
@@ -1194,7 +1129,7 @@ if (false) { /* removed */ }
                     </div>
                     <div class="alert alert-${alertType}">
                         <small>
-                            <i class="fe fe-info mr-1"></i>
+                            <i data-feather="info" class="mr-1"></i>
                             ${clinical}
                         </small>
                     </div>
@@ -1202,10 +1137,10 @@ if (false) { /* removed */ }
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-outline-primary" onclick="downloadGradCAMImage(${zoneNumber})">
-                    <i class="fe fe-download mr-2"></i>Descargar Imagen
+                    <i data-feather="download" class="mr-2"></i>Descargar Imagen
                 </button>
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">
-                    <i class="fe fe-x mr-2"></i>Cerrar
+                    <i data-feather="x" class="mr-2"></i>Cerrar
                 </button>
             </div>
         </div>
@@ -1297,7 +1232,7 @@ if (false) { /* removed */ }
 
             const alertHtml = `
         <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
-            <i class="fe fe-${type === 'error' ? 'x-circle' : type === 'success' ? 'check-circle' : type === 'warning' ? 'alert-triangle' : 'info'} mr-2"></i>
+            ${(function(){var n=type==='error'?'x-circle':type==='success'?'check-circle':type==='warning'?'alert-triangle':'info';return typeof feather!=='undefined'?feather.icons[n].toSvg({'width':16,'height':16,'stroke-width':1.8,'style':'margin-right:6px;vertical-align:middle;'}):'';})()}
             ${message}
             <button type="button" class="close" data-dismiss="alert">
                 <span aria-hidden="true">&times;</span>
@@ -1312,47 +1247,6 @@ if (false) { /* removed */ }
             }, 5000);
         }
 
-        function showConsultationResultModal(success, patientName, errorMessage) {
-            const header  = $('#consultationResultHeader');
-            const icon    = $('#consultationResultIcon');
-            const title   = $('#consultationResultTitle');
-            const body    = $('#consultationResultBody');
-            const closeBtn = $('#consultationResultCloseBtn');
-            const viewBtn  = $('#consultationResultViewBtn');
-
-            if (success) {
-                header.removeClass('bg-danger text-white').addClass('bg-success text-white');
-                icon.removeClass().addClass('fe fe-check-circle mr-2');
-                title.text('Consulta Guardada Exitosamente');
-                body.html(`
-                    <div style="font-size: 4rem; color: #28a745; margin-bottom: 1rem;">
-                        <i class="fe fe-check-circle"></i>
-                    </div>
-                    <h5 class="text-success mb-2">¡Consulta registrada!</h5>
-                    <p class="text-muted mb-0">
-                        La consulta del paciente <strong>${patientName}</strong> fue guardada correctamente en el sistema.
-                    </p>
-                `);
-                closeBtn.removeClass('btn-danger').addClass('btn-success').text('Continuar');
-                viewBtn.show();
-            } else {
-                header.removeClass('bg-success text-white').addClass('bg-danger text-white');
-                icon.removeClass().addClass('fe fe-x-circle mr-2');
-                title.text('No se pudo guardar la consulta');
-                body.html(`
-                    <div style="font-size: 4rem; color: #dc3545; margin-bottom: 1rem;">
-                        <i class="fe fe-x-circle"></i>
-                    </div>
-                    <h5 class="text-danger mb-2">Error al guardar</h5>
-                    <p class="text-muted mb-0">${errorMessage || 'Ocurrió un error inesperado. Por favor intenta nuevamente.'}</p>
-                `);
-                closeBtn.removeClass('btn-success').addClass('btn-danger').text('Cerrar');
-                viewBtn.hide();
-            }
-
-            $('#consultationResultModal').modal('show');
-        }
-
         // === FUNCIONES GLOBALES ===
         window.downloadGradCAMImage = function(zoneNumber) {
             if (!window.currentGradCAMData) {
@@ -1514,5 +1408,23 @@ if (false) { /* removed */ }
 <script src="js/gauge.min.js"></script>
 <script src="js/jquery.sparkline.min.js"></script>
 <script src="js/apps.js"></script>
+<script>
+    // Feather Icons: reemplaza <i data-feather="X"> con SVG inline
+    // Inmune a problemas de fuentes locales
+    function _initFeather() {
+        if (typeof feather !== 'undefined') feather.replace({ 'stroke-width': 1.8 });
+    }
+    document.addEventListener('DOMContentLoaded', _initFeather);
+    // Re-render al inyectar HTML dinámico (modals, cards, tablas)
+    var _fObserver = new MutationObserver(function(mutations) {
+        var needsRefresh = mutations.some(function(m) {
+            return m.addedNodes.length > 0;
+        });
+        if (needsRefresh) _initFeather();
+    });
+    document.addEventListener('DOMContentLoaded', function() {
+        _fObserver.observe(document.body, { childList: true, subtree: true });
+    });
+</script>
 </body>
 </html>