Update web/patients.html
Browse files- web/patients.html +79 -62
web/patients.html
CHANGED
|
@@ -652,74 +652,91 @@
|
|
| 652 |
});
|
| 653 |
}
|
| 654 |
|
| 655 |
-
|
| 656 |
-
|
| 657 |
-
|
| 658 |
-
|
| 659 |
-
|
| 660 |
-
|
| 661 |
-
|
| 662 |
-
|
| 663 |
-
|
| 664 |
-
|
| 665 |
-
|
| 666 |
-
|
| 667 |
-
|
| 668 |
-
|
| 669 |
-
|
| 670 |
-
|
| 671 |
-
|
| 672 |
-
|
| 673 |
-
|
| 674 |
-
|
| 675 |
-
|
| 676 |
-
|
| 677 |
-
|
| 678 |
-
|
| 679 |
-
|
| 680 |
-
|
| 681 |
-
|
| 682 |
-
|
| 683 |
-
|
| 684 |
-
|
| 685 |
-
|
| 686 |
-
|
| 687 |
-
|
| 688 |
-
|
| 689 |
-
|
| 690 |
-
|
| 691 |
-
|
| 692 |
-
|
| 693 |
-
|
| 694 |
-
<a class="dropdown-item" href="#" onclick="editPatient(${patient.patientID})">
|
| 695 |
-
<i data-feather="edit" class="mr-2"></i>Editar
|
| 696 |
-
</a>
|
| 697 |
-
<a class="dropdown-item" href="diagnosis.html?patient=${patient.patientID}">
|
| 698 |
-
<i data-feather="activity" class="mr-2"></i>Nuevo Diagnóstico
|
| 699 |
-
</a>
|
| 700 |
-
<div class="dropdown-divider"></div>
|
| 701 |
-
<a class="dropdown-item text-danger" href="#" onclick="deletePatient(${patient.patientID}, '${patient.name}')">
|
| 702 |
-
<i data-feather="trash-2" class="mr-2"></i>Eliminar
|
| 703 |
-
</a>
|
| 704 |
-
</div>
|
| 705 |
-
</div>
|
| 706 |
</div>
|
|
|
|
| 707 |
|
| 708 |
-
|
| 709 |
-
|
| 710 |
-
|
| 711 |
-
|
| 712 |
-
|
| 713 |
-
|
| 714 |
-
|
| 715 |
-
|
| 716 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 717 |
</div>
|
| 718 |
</div>
|
| 719 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 720 |
</div>
|
| 721 |
-
|
| 722 |
-
|
|
|
|
|
|
|
| 723 |
|
| 724 |
function updatePatientStats() {
|
| 725 |
const stats = {
|
|
|
|
| 652 |
});
|
| 653 |
}
|
| 654 |
|
| 655 |
+
function createPatientCard(patient) {
|
| 656 |
+
const age = patient.birthDate
|
| 657 |
+
? moment().diff(moment(patient.birthDate), 'years')
|
| 658 |
+
: 'N/A';
|
| 659 |
+
const avatarColor = getAvatarColor(patient.name);
|
| 660 |
+
const initials = getInitials(patient.name);
|
| 661 |
+
const genderIcon = patient.gender === 'M' ? 'fe-user'
|
| 662 |
+
: patient.gender === 'F' ? 'fe-user'
|
| 663 |
+
: 'fe-users';
|
| 664 |
+
const diabetesBadge = patient.diabetesType
|
| 665 |
+
? `<span class="diabetes-badge bg-warning text-dark">${patient.diabetesType}</span>`
|
| 666 |
+
: '';
|
| 667 |
+
|
| 668 |
+
const consultCount = patient.consultationCount ?? 0;
|
| 669 |
+
const lastVisit = patient.lastConsultationDate
|
| 670 |
+
? moment(patient.lastConsultationDate).format('DD/MM/YY')
|
| 671 |
+
: 'Sin visitas';
|
| 672 |
+
const lastVisitClass = patient.lastConsultationDate ? '' : 'text-muted';
|
| 673 |
+
|
| 674 |
+
return `
|
| 675 |
+
<div class="col-xl-4 col-lg-6 col-md-6 mb-4">
|
| 676 |
+
<div class="card patient-card shadow-sm h-100">
|
| 677 |
+
<div class="card-body">
|
| 678 |
+
<div class="d-flex align-items-start">
|
| 679 |
+
<div class="patient-avatar" style="background-color: ${avatarColor}">
|
| 680 |
+
${initials}
|
| 681 |
+
</div>
|
| 682 |
+
<div class="flex-grow-1">
|
| 683 |
+
<h6 class="card-title mb-1">${patient.name}</h6>
|
| 684 |
+
<p class="text-muted mb-2">
|
| 685 |
+
<i class="fe ${genderIcon} fe-12 mr-1"></i>
|
| 686 |
+
${age} años • ID: ${patient.patientID}
|
| 687 |
+
</p>
|
| 688 |
+
${diabetesBadge}
|
| 689 |
+
<div class="mt-3">
|
| 690 |
+
<small class="text-muted">
|
| 691 |
+
<i data-feather="calendar" class="fe-12 mr-1"></i>
|
| 692 |
+
Registro: ${moment(patient.creationDate).format('DD/MM/YYYY')}
|
| 693 |
+
</small>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 694 |
</div>
|
| 695 |
+
</div>
|
| 696 |
|
| 697 |
+
<div class="dropdown">
|
| 698 |
+
<button class="btn btn-sm btn-outline-secondary dropdown-toggle"
|
| 699 |
+
type="button" data-toggle="dropdown">
|
| 700 |
+
<i data-feather="more-horizontal"></i>
|
| 701 |
+
</button>
|
| 702 |
+
<div class="dropdown-menu dropdown-menu-right">
|
| 703 |
+
<a class="dropdown-item" href="#"
|
| 704 |
+
onclick="viewPatientDetails(${patient.patientID})">
|
| 705 |
+
<i data-feather="eye" class="mr-2"></i>Ver Detalles
|
| 706 |
+
</a>
|
| 707 |
+
<a class="dropdown-item" href="#"
|
| 708 |
+
onclick="editPatient(${patient.patientID})">
|
| 709 |
+
<i data-feather="edit" class="mr-2"></i>Editar
|
| 710 |
+
</a>
|
| 711 |
+
<a class="dropdown-item"
|
| 712 |
+
href="diagnosis.html?patient=${patient.patientID}">
|
| 713 |
+
<i data-feather="activity" class="mr-2"></i>Nuevo Diagnóstico
|
| 714 |
+
</a>
|
| 715 |
+
<div class="dropdown-divider"></div>
|
| 716 |
+
<a class="dropdown-item text-danger" href="#"
|
| 717 |
+
onclick="deletePatient(${patient.patientID}, '${patient.name}')">
|
| 718 |
+
<i data-feather="trash-2" class="mr-2"></i>Eliminar
|
| 719 |
+
</a>
|
| 720 |
</div>
|
| 721 |
</div>
|
| 722 |
</div>
|
| 723 |
+
|
| 724 |
+
<div class="row mt-3 text-center border-top pt-3">
|
| 725 |
+
<div class="col-6">
|
| 726 |
+
<small class="text-muted d-block">Consultas</small>
|
| 727 |
+
<span class="font-weight-bold text-primary">${consultCount}</span>
|
| 728 |
+
</div>
|
| 729 |
+
<div class="col-6">
|
| 730 |
+
<small class="text-muted d-block">Última Visita</small>
|
| 731 |
+
<span class="font-weight-bold ${lastVisitClass}"
|
| 732 |
+
style="font-size:0.85rem">${lastVisit}</span>
|
| 733 |
+
</div>
|
| 734 |
+
</div>
|
| 735 |
</div>
|
| 736 |
+
</div>
|
| 737 |
+
</div>
|
| 738 |
+
`;
|
| 739 |
+
}
|
| 740 |
|
| 741 |
function updatePatientStats() {
|
| 742 |
const stats = {
|