Spaces:
Sleeping
Sleeping
Update templates/doctor_dashboard.html
Browse files- templates/doctor_dashboard.html +0 -683
templates/doctor_dashboard.html
CHANGED
|
@@ -678,689 +678,6 @@
|
|
| 678 |
};
|
| 679 |
|
| 680 |
|
| 681 |
-
});
|
| 682 |
-
</script>
|
| 683 |
-
</body>
|
| 684 |
-
</html><!DOCTYPE html>
|
| 685 |
-
<html lang="en">
|
| 686 |
-
<head>
|
| 687 |
-
<meta charset="UTF-8">
|
| 688 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 689 |
-
<title>Doctor Dashboard - Patient Care Management</title>
|
| 690 |
-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
| 691 |
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
|
| 692 |
-
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
| 693 |
-
<style>
|
| 694 |
-
:root {
|
| 695 |
-
--primary-color: #4e73df; /* Blue */
|
| 696 |
-
--secondary-color: #1cc88a; /* Green */
|
| 697 |
-
--danger-color: #e74a3b; /* Red */
|
| 698 |
-
--warning-color: #f6c23e; /* Yellow */
|
| 699 |
-
--info-color: #36b9cc; /* Cyan */
|
| 700 |
-
--dark-color: #5a5c69; /* Dark Grey */
|
| 701 |
-
--light-bg: #f8f9fc; /* Light Grey Background */
|
| 702 |
-
--border-color: #e3e6f0; /* Light Border */
|
| 703 |
-
}
|
| 704 |
-
|
| 705 |
-
body {
|
| 706 |
-
font-family: 'Nunito', sans-serif;
|
| 707 |
-
background-color: var(--light-bg);
|
| 708 |
-
color: var(--dark-color);
|
| 709 |
-
}
|
| 710 |
-
|
| 711 |
-
.navbar {
|
| 712 |
-
background-color: white;
|
| 713 |
-
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
|
| 714 |
-
}
|
| 715 |
-
|
| 716 |
-
.navbar-brand {
|
| 717 |
-
font-weight: 800;
|
| 718 |
-
color: var(--primary-color) !important; /* Override default link color */
|
| 719 |
-
}
|
| 720 |
-
|
| 721 |
-
.card {
|
| 722 |
-
border: none;
|
| 723 |
-
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
|
| 724 |
-
border-radius: 0.35rem;
|
| 725 |
-
margin-bottom: 1.5rem;
|
| 726 |
-
background-color: white;
|
| 727 |
-
}
|
| 728 |
-
|
| 729 |
-
.card-header {
|
| 730 |
-
background-color: var(--light-bg);
|
| 731 |
-
border-bottom: 1px solid var(--border-color);
|
| 732 |
-
font-weight: 700;
|
| 733 |
-
color: var(--dark-color);
|
| 734 |
-
padding: 1rem 1.25rem;
|
| 735 |
-
}
|
| 736 |
-
|
| 737 |
-
.btn-primary {
|
| 738 |
-
background-color: var(--primary-color);
|
| 739 |
-
border-color: var(--primary-color);
|
| 740 |
-
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
| 741 |
-
}
|
| 742 |
-
.btn-primary:hover {
|
| 743 |
-
background-color: #2e59d9; /* Darker blue */
|
| 744 |
-
border-color: #2653d4;
|
| 745 |
-
}
|
| 746 |
-
|
| 747 |
-
.btn-success {
|
| 748 |
-
background-color: var(--secondary-color);
|
| 749 |
-
border-color: var(--secondary-color);
|
| 750 |
-
}
|
| 751 |
-
|
| 752 |
-
.btn-danger {
|
| 753 |
-
background-color: var(--danger-color);
|
| 754 |
-
border-color: var(--danger-color);
|
| 755 |
-
}
|
| 756 |
-
|
| 757 |
-
.role-toggle {
|
| 758 |
-
display: flex;
|
| 759 |
-
align-items: center;
|
| 760 |
-
}
|
| 761 |
-
|
| 762 |
-
.role-toggle-btn {
|
| 763 |
-
display: flex;
|
| 764 |
-
align-items: center;
|
| 765 |
-
gap: 8px;
|
| 766 |
-
background-color: var(--light-bg);
|
| 767 |
-
border: 1px solid var(--border-color);
|
| 768 |
-
border-radius: 30px;
|
| 769 |
-
padding: 0.5rem 1rem;
|
| 770 |
-
font-weight: 600;
|
| 771 |
-
color: var(--dark-color);
|
| 772 |
-
transition: all 0.3s ease;
|
| 773 |
-
text-decoration: none; /* Remove underline */
|
| 774 |
-
}
|
| 775 |
-
|
| 776 |
-
.role-toggle-btn:hover {
|
| 777 |
-
background-color: #edf2ff; /* Lighter blue */
|
| 778 |
-
}
|
| 779 |
-
|
| 780 |
-
.role-toggle-btn.active {
|
| 781 |
-
background-color: var(--primary-color);
|
| 782 |
-
color: white;
|
| 783 |
-
border-color: var(--primary-color);
|
| 784 |
-
}
|
| 785 |
-
|
| 786 |
-
.main-content {
|
| 787 |
-
padding: 1.5rem; /* Reduced padding */
|
| 788 |
-
}
|
| 789 |
-
|
| 790 |
-
.patient-list {
|
| 791 |
-
list-style: none;
|
| 792 |
-
padding: 0;
|
| 793 |
-
max-height: calc(100vh - 250px); /* Adjust height to fit viewport */
|
| 794 |
-
overflow-y: auto; /* Add scroll for long lists */
|
| 795 |
-
}
|
| 796 |
-
|
| 797 |
-
.patient-item {
|
| 798 |
-
background-color: white;
|
| 799 |
-
border-radius: 0.35rem;
|
| 800 |
-
border-left: 4px solid var(--info-color); /* Default border */
|
| 801 |
-
margin-bottom: 0.75rem; /* Less margin */
|
| 802 |
-
padding: 1rem;
|
| 803 |
-
box-shadow: 0 0.15rem 0.5rem 0 rgba(58, 59, 69, 0.05);
|
| 804 |
-
cursor: pointer;
|
| 805 |
-
transition: all 0.2s ease;
|
| 806 |
-
}
|
| 807 |
-
|
| 808 |
-
.patient-item:hover {
|
| 809 |
-
transform: translateY(-3px);
|
| 810 |
-
box-shadow: 0 0.3rem 0.8rem 0 rgba(58, 59, 69, 0.1);
|
| 811 |
-
background-color: #fcfcfc; /* Slightly lighter hover background */
|
| 812 |
-
}
|
| 813 |
-
|
| 814 |
-
.patient-item.active {
|
| 815 |
-
border: 1px solid var(--primary-color); /* Highlight active item */
|
| 816 |
-
border-left: 4px solid var(--primary-color);
|
| 817 |
-
background-color: #eef2fc; /* Subtle background for active */
|
| 818 |
-
}
|
| 819 |
-
|
| 820 |
-
|
| 821 |
-
.patient-item.emergency {
|
| 822 |
-
border-left-color: var(--danger-color);
|
| 823 |
-
}
|
| 824 |
-
|
| 825 |
-
.patient-item.deteriorating {
|
| 826 |
-
border-left-color: var(--warning-color);
|
| 827 |
-
}
|
| 828 |
-
|
| 829 |
-
.patient-item.improving {
|
| 830 |
-
border-left-color: var(--secondary-color);
|
| 831 |
-
}
|
| 832 |
-
|
| 833 |
-
.patient-item.stable {
|
| 834 |
-
border-left-color: var(--info-color);
|
| 835 |
-
}
|
| 836 |
-
|
| 837 |
-
.patient-status {
|
| 838 |
-
padding: 0.3rem 0.8rem; /* Slightly larger padding */
|
| 839 |
-
border-radius: 50rem;
|
| 840 |
-
color: white;
|
| 841 |
-
font-size: 0.85rem; /* Slightly larger font */
|
| 842 |
-
font-weight: 700;
|
| 843 |
-
min-width: 80px; /* Ensure minimum width */
|
| 844 |
-
text-align: center;
|
| 845 |
-
}
|
| 846 |
-
|
| 847 |
-
.status-emergency {
|
| 848 |
-
background-color: var(--danger-color);
|
| 849 |
-
}
|
| 850 |
-
|
| 851 |
-
.status-deteriorating {
|
| 852 |
-
background-color: var(--warning-color);
|
| 853 |
-
color: #212529; /* Dark text for yellow background */
|
| 854 |
-
}
|
| 855 |
-
|
| 856 |
-
.status-improving {
|
| 857 |
-
background-color: var(--secondary-color);
|
| 858 |
-
}
|
| 859 |
-
|
| 860 |
-
.status-stable {
|
| 861 |
-
background-color: var(--info-color);
|
| 862 |
-
}
|
| 863 |
-
.status-unknown {
|
| 864 |
-
background-color: var(--dark-color);
|
| 865 |
-
color: white;
|
| 866 |
-
}
|
| 867 |
-
|
| 868 |
-
|
| 869 |
-
.care-plan-tabs {
|
| 870 |
-
margin-top: 1.5rem;
|
| 871 |
-
}
|
| 872 |
-
|
| 873 |
-
.care-plan-content {
|
| 874 |
-
background-color: var(--light-bg);
|
| 875 |
-
border-radius: 0 0 0.35rem 0.35rem; /* Rounded corners at bottom */
|
| 876 |
-
border: 1px solid var(--border-color);
|
| 877 |
-
border-top: none; /* No border top because of tabs */
|
| 878 |
-
padding: 1.5rem;
|
| 879 |
-
height: 400px; /* Fixed height */
|
| 880 |
-
overflow-y: auto; /* Scroll */
|
| 881 |
-
white-space: pre-line; /* Preserve line breaks */
|
| 882 |
-
font-size: 1rem;
|
| 883 |
-
color: #333;
|
| 884 |
-
}
|
| 885 |
-
|
| 886 |
-
.patient-details-section {
|
| 887 |
-
display: none; /* Hidden by default */
|
| 888 |
-
}
|
| 889 |
-
|
| 890 |
-
.loader {
|
| 891 |
-
border: 5px solid #f3f3f3;
|
| 892 |
-
border-top: 5px solid var(--primary-color);
|
| 893 |
-
border-radius: 50%;
|
| 894 |
-
width: 50px;
|
| 895 |
-
height: 50px;
|
| 896 |
-
animation: spin 2s linear infinite;
|
| 897 |
-
margin: 2rem auto;
|
| 898 |
-
display: none;
|
| 899 |
-
}
|
| 900 |
-
|
| 901 |
-
@keyframes spin {
|
| 902 |
-
0% { transform: rotate(0deg); }
|
| 903 |
-
100% { transform: rotate(360deg); }
|
| 904 |
-
}
|
| 905 |
-
|
| 906 |
-
#no-patient-selected {
|
| 907 |
-
min-height: 300px;
|
| 908 |
-
display: flex;
|
| 909 |
-
flex-direction: column;
|
| 910 |
-
justify-content: center;
|
| 911 |
-
align-items: center;
|
| 912 |
-
}
|
| 913 |
-
|
| 914 |
-
.alert-danger {
|
| 915 |
-
color: #721c24;
|
| 916 |
-
background-color: #f8d7da;
|
| 917 |
-
border-color: #f5c6cb;
|
| 918 |
-
}
|
| 919 |
-
.alert-danger strong {
|
| 920 |
-
color: var(--danger-color);
|
| 921 |
-
}
|
| 922 |
-
</style>
|
| 923 |
-
</head>
|
| 924 |
-
<body>
|
| 925 |
-
<!-- Navigation Bar -->
|
| 926 |
-
<nav class="navbar navbar-expand-lg navbar-light bg-white px-4 mb-4">
|
| 927 |
-
<div class="container-fluid">
|
| 928 |
-
<a class="navbar-brand" href="/">
|
| 929 |
-
<i class="fas fa-heartbeat me-2"></i>
|
| 930 |
-
Patient Care Management
|
| 931 |
-
</a>
|
| 932 |
-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
| 933 |
-
<span class="navbar-toggler-icon"></span>
|
| 934 |
-
</button>
|
| 935 |
-
<div class="collapse navbar-collapse" id="navbarNav">
|
| 936 |
-
<ul class="navbar-nav ms-auto">
|
| 937 |
-
<li class="nav-item">
|
| 938 |
-
<a class="nav-link" href="/" role="button">Home</a>
|
| 939 |
-
</li>
|
| 940 |
-
<li class="nav-item">
|
| 941 |
-
<div class="role-toggle">
|
| 942 |
-
<a href="/" class="role-toggle-btn" data-role="patient">
|
| 943 |
-
<i class="fas fa-user"></i> Patient
|
| 944 |
-
</a>
|
| 945 |
-
<a href="/doctor_dashboard" class="role-toggle-btn active ms-2" data-role="doctor">
|
| 946 |
-
<i class="fas fa-user-md"></i> Doctor
|
| 947 |
-
</a>
|
| 948 |
-
</div>
|
| 949 |
-
</li>
|
| 950 |
-
</ul>
|
| 951 |
-
</div>
|
| 952 |
-
</div>
|
| 953 |
-
</nav>
|
| 954 |
-
|
| 955 |
-
<div class="container-fluid main-content">
|
| 956 |
-
<div class="row">
|
| 957 |
-
<!-- Patient List Sidebar -->
|
| 958 |
-
<div class="col-md-4">
|
| 959 |
-
<div class="card">
|
| 960 |
-
<div class="card-header d-flex justify-content-between align-items-center">
|
| 961 |
-
<h5 class="mb-0"><i class="fas fa-users me-2"></i>Patient List</h5>
|
| 962 |
-
<span id="patient-count" class="badge bg-primary">0</span>
|
| 963 |
-
</div>
|
| 964 |
-
<div class="card-body">
|
| 965 |
-
<div id="emergency-alerts">
|
| 966 |
-
<!-- Emergency alerts will be populated here -->
|
| 967 |
-
</div>
|
| 968 |
-
|
| 969 |
-
<div class="mb-3">
|
| 970 |
-
<input type="text" class="form-control" id="patient-search" placeholder="Search patients...">
|
| 971 |
-
</div>
|
| 972 |
-
|
| 973 |
-
<div id="patient-list-container">
|
| 974 |
-
<div class="loader" id="patient-list-loader"></div>
|
| 975 |
-
<ul class="patient-list" id="patient-list">
|
| 976 |
-
<!-- Patient list will be populated here -->
|
| 977 |
-
</ul>
|
| 978 |
-
<div id="no-patients-found" class="text-center p-3 text-muted" style="display: none;">No patients found.</div>
|
| 979 |
-
</div>
|
| 980 |
-
</div>
|
| 981 |
-
</div>
|
| 982 |
-
</div>
|
| 983 |
-
|
| 984 |
-
<!-- Patient Details Main Area -->
|
| 985 |
-
<div class="col-md-8">
|
| 986 |
-
<div class="patient-details-section" id="patient-details-section">
|
| 987 |
-
<div class="card">
|
| 988 |
-
<div class="card-header">
|
| 989 |
-
<h5 class="mb-0" id="patient-name-header"><i class="fas fa-user me-2"></i>Patient Details</h5>
|
| 990 |
-
</div>
|
| 991 |
-
<div class="card-body">
|
| 992 |
-
<div class="row mb-3">
|
| 993 |
-
<div class="col-md-4">
|
| 994 |
-
<strong>Age:</strong> <span id="patient-age"></span>
|
| 995 |
-
</div>
|
| 996 |
-
<div class="col-md-4">
|
| 997 |
-
<strong>Gender:</strong> <span id="patient-gender"></span>
|
| 998 |
-
</div>
|
| 999 |
-
<div class="col-md-4">
|
| 1000 |
-
<strong>Status:</strong> <span id="patient-status" class="patient-status"></span>
|
| 1001 |
-
</div>
|
| 1002 |
-
</div>
|
| 1003 |
-
|
| 1004 |
-
<div class="mb-3">
|
| 1005 |
-
<strong>Feedback/Symptoms:</strong>
|
| 1006 |
-
<p id="patient-feedback" class="p-3 bg-light rounded border"></p>
|
| 1007 |
-
</div>
|
| 1008 |
-
|
| 1009 |
-
<div class="mb-3">
|
| 1010 |
-
<strong>Last Updated:</strong> <span id="patient-timestamp"></span>
|
| 1011 |
-
</div>
|
| 1012 |
-
|
| 1013 |
-
<button class="btn btn-primary" id="download-pdf">
|
| 1014 |
-
<i class="fas fa-file-download me-2"></i>Download Care Plan PDF
|
| 1015 |
-
</button>
|
| 1016 |
-
|
| 1017 |
-
<div class="care-plan-tabs mt-4">
|
| 1018 |
-
<ul class="nav nav-tabs" id="carePlanTabs" role="tablist">
|
| 1019 |
-
<li class="nav-item" role="presentation">
|
| 1020 |
-
<button class="nav-link active" id="updated-plan-tab" data-bs-toggle="tab" data-bs-target="#updated-plan" type="button" role="tab" aria-controls="updated-plan" aria-selected="true">Updated Care Plan</button>
|
| 1021 |
-
</li>
|
| 1022 |
-
<li class="nav-item" role="presentation">
|
| 1023 |
-
<button class="nav-link" id="original-plan-tab" data-bs-toggle="tab" data-bs-target="#original-plan" type="button" role="tab" aria-controls="original-plan" aria-selected="false">Original Care Plan</button>
|
| 1024 |
-
</li>
|
| 1025 |
-
</ul>
|
| 1026 |
-
<div class="tab-content" id="carePlanTabsContent">
|
| 1027 |
-
<div class="tab-pane fade show active" id="updated-plan" role="tabpanel" aria-labelledby="updated-plan-tab">
|
| 1028 |
-
<div class="care-plan-content" id="updated-plan-content"></div>
|
| 1029 |
-
</div>
|
| 1030 |
-
<div class="tab-pane fade" id="original-plan" role="tabpanel" aria-labelledby="original-plan-tab">
|
| 1031 |
-
<div class="care-plan-content" id="original-plan-content"></div>
|
| 1032 |
-
</div>
|
| 1033 |
-
</div>
|
| 1034 |
-
</div>
|
| 1035 |
-
</div>
|
| 1036 |
-
</div>
|
| 1037 |
-
</div>
|
| 1038 |
-
|
| 1039 |
-
<div id="no-patient-selected" class="text-center p-5">
|
| 1040 |
-
<i class="fas fa-notes-medical fa-5x text-muted mb-3"></i>
|
| 1041 |
-
<h4 class="text-muted">Select a patient from the list to view details</h4>
|
| 1042 |
-
</div>
|
| 1043 |
-
</div>
|
| 1044 |
-
</div>
|
| 1045 |
-
</div>
|
| 1046 |
-
|
| 1047 |
-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
| 1048 |
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
| 1049 |
-
<script>
|
| 1050 |
-
$(document).ready(function() {
|
| 1051 |
-
// Set active role button on load
|
| 1052 |
-
$('.role-toggle-btn[data-role="doctor"]').addClass('active');
|
| 1053 |
-
$('.role-toggle-btn[data-role="patient"]').removeClass('active');
|
| 1054 |
-
|
| 1055 |
-
|
| 1056 |
-
// Role toggle buttons - now just links
|
| 1057 |
-
// They handle the redirection via href
|
| 1058 |
-
|
| 1059 |
-
|
| 1060 |
-
// Show patient list loader
|
| 1061 |
-
$('#patient-list-loader').show();
|
| 1062 |
-
$('#no-patients-found').hide();
|
| 1063 |
-
|
| 1064 |
-
// Load all patients
|
| 1065 |
-
function loadPatients() {
|
| 1066 |
-
console.log("Loading patients...");
|
| 1067 |
-
$.ajax({
|
| 1068 |
-
url: '/get_patients',
|
| 1069 |
-
type: 'GET',
|
| 1070 |
-
success: function(response) {
|
| 1071 |
-
$('#patient-list-loader').hide();
|
| 1072 |
-
|
| 1073 |
-
if (response.success && response.patients.length > 0) {
|
| 1074 |
-
console.log("Patients loaded:", response.patients.length);
|
| 1075 |
-
// Update patient count
|
| 1076 |
-
$('#patient-count').text(response.patients.length);
|
| 1077 |
-
|
| 1078 |
-
// Clear patient list
|
| 1079 |
-
$('#patient-list').empty();
|
| 1080 |
-
|
| 1081 |
-
// Sort patients by status priority (Emergency first) then timestamp (newest first)
|
| 1082 |
-
const statusPriority = { 'emergency': 0, 'deteriorating': 1, 'improving': 2, 'stable': 3, 'unknown': 4 };
|
| 1083 |
-
const sortedPatients = response.patients.sort((a, b) => {
|
| 1084 |
-
const priorityDiff = statusPriority[a.status] - statusPriority[b.status];
|
| 1085 |
-
if (priorityDiff !== 0) {
|
| 1086 |
-
return priorityDiff;
|
| 1087 |
-
}
|
| 1088 |
-
// Fallback to timestamp if status is the same
|
| 1089 |
-
const dateA = new Date(a.timestamp || '1900-01-01T00:00:00Z'); // Handle missing timestamp
|
| 1090 |
-
const dateB = new Date(b.timestamp || '1900-01-01T00:00:00Z'); // Handle missing timestamp
|
| 1091 |
-
return dateB - dateA; // Newest first
|
| 1092 |
-
});
|
| 1093 |
-
|
| 1094 |
-
|
| 1095 |
-
// Populate emergency alerts
|
| 1096 |
-
const emergencyPatients = sortedPatients.filter(p => p.status === 'emergency');
|
| 1097 |
-
if (emergencyPatients.length > 0) {
|
| 1098 |
-
let alertHtml = `
|
| 1099 |
-
<div class="alert alert-danger mb-3">
|
| 1100 |
-
<i class="fas fa-exclamation-triangle me-2"></i>
|
| 1101 |
-
<strong>${emergencyPatients.length} Emergency patient${emergencyPatients.length > 1 ? 's' : ''} requiring immediate attention!</strong>
|
| 1102 |
-
</div>
|
| 1103 |
-
`;
|
| 1104 |
-
$('#emergency-alerts').html(alertHtml);
|
| 1105 |
-
} else {
|
| 1106 |
-
$('#emergency-alerts').empty();
|
| 1107 |
-
}
|
| 1108 |
-
|
| 1109 |
-
// Populate patient list
|
| 1110 |
-
sortedPatients.forEach(patient => {
|
| 1111 |
-
const statusText = {
|
| 1112 |
-
'emergency': 'EMERGENCY',
|
| 1113 |
-
'deteriorating': 'HIGH RISK',
|
| 1114 |
-
'improving': 'IMPROVING',
|
| 1115 |
-
'stable': 'STABLE',
|
| 1116 |
-
'unknown': 'UNKNOWN'
|
| 1117 |
-
};
|
| 1118 |
-
|
| 1119 |
-
const statusClass = {
|
| 1120 |
-
'emergency': 'emergency', // Use for border-left-color
|
| 1121 |
-
'deteriorating': 'deteriorating',
|
| 1122 |
-
'improving': 'improving',
|
| 1123 |
-
'stable': 'stable',
|
| 1124 |
-
'unknown': 'stable' // Default to stable color if unknown
|
| 1125 |
-
};
|
| 1126 |
-
|
| 1127 |
-
const statusBadgeClass = {
|
| 1128 |
-
'emergency': 'status-emergency',
|
| 1129 |
-
'deteriorating': 'status-deteriorating',
|
| 1130 |
-
'improving': 'status-improving',
|
| 1131 |
-
'stable': 'status-stable',
|
| 1132 |
-
'unknown': 'status-unknown'
|
| 1133 |
-
};
|
| 1134 |
-
|
| 1135 |
-
const patientHtml = `
|
| 1136 |
-
<li class="patient-item ${statusClass[patient.status]}" data-id="${patient.id}">
|
| 1137 |
-
<div class="d-flex justify-content-between align-items-center">
|
| 1138 |
-
<div>
|
| 1139 |
-
<h6 class="mb-1">${patient.name || 'Unnamed'}</h6>
|
| 1140 |
-
<small class="text-muted">Age: ${patient.age || 'N/A'} | Gender: ${patient.gender || 'N/A'}</small>
|
| 1141 |
-
</div>
|
| 1142 |
-
<span class="patient-status ${statusBadgeClass[patient.status]}">${statusText[patient.status]}</span>
|
| 1143 |
-
</div>
|
| 1144 |
-
</li>
|
| 1145 |
-
`;
|
| 1146 |
-
$('#patient-list').append(patientHtml);
|
| 1147 |
-
});
|
| 1148 |
-
|
| 1149 |
-
// Add click event to patient items
|
| 1150 |
-
$('.patient-item').off('click').on('click', function() { // Use .off().on() to avoid duplicate handlers
|
| 1151 |
-
const patientId = $(this).data('id');
|
| 1152 |
-
// Update URL without full page reload
|
| 1153 |
-
history.pushState({}, '', `/doctor_dashboard?patient_id=${patientId}`);
|
| 1154 |
-
loadPatientDetails(patientId);
|
| 1155 |
-
});
|
| 1156 |
-
|
| 1157 |
-
// Check if a patient ID is in the URL on page load
|
| 1158 |
-
const urlParams = new URLSearchParams(window.location.search);
|
| 1159 |
-
const selectedPatientId = urlParams.get('patient_id');
|
| 1160 |
-
if (selectedPatientId) {
|
| 1161 |
-
console.log("Loading patient details from URL:", selectedPatientId);
|
| 1162 |
-
loadPatientDetails(selectedPatientId);
|
| 1163 |
-
} else {
|
| 1164 |
-
$('#no-patient-selected').show();
|
| 1165 |
-
$('#patient-details-section').hide();
|
| 1166 |
-
}
|
| 1167 |
-
|
| 1168 |
-
|
| 1169 |
-
} else {
|
| 1170 |
-
console.log("No patients found.");
|
| 1171 |
-
$('#patient-count').text('0');
|
| 1172 |
-
$('#patient-list').empty();
|
| 1173 |
-
$('#emergency-alerts').empty();
|
| 1174 |
-
$('#no-patients-found').show();
|
| 1175 |
-
$('#no-patient-selected').show();
|
| 1176 |
-
$('#patient-details-section').hide();
|
| 1177 |
-
}
|
| 1178 |
-
},
|
| 1179 |
-
error: function(xhr, status, error) {
|
| 1180 |
-
console.error("Error loading patients:", error);
|
| 1181 |
-
$('#patient-list-loader').hide();
|
| 1182 |
-
$('#patient-list').html('<li class="text-center p-3 text-danger">Error loading patients.</li>');
|
| 1183 |
-
$('#no-patients-found').hide(); // Hide no patients message if there was an error
|
| 1184 |
-
$('#no-patient-selected').show();
|
| 1185 |
-
$('#patient-details-section').hide();
|
| 1186 |
-
}
|
| 1187 |
-
});
|
| 1188 |
-
}
|
| 1189 |
-
|
| 1190 |
-
// Load patient details
|
| 1191 |
-
function loadPatientDetails(patientId) {
|
| 1192 |
-
console.log("Attempting to load details for patient ID:", patientId);
|
| 1193 |
-
// Highlight selected patient
|
| 1194 |
-
$('.patient-item').removeClass('active');
|
| 1195 |
-
$(`.patient-item[data-id="${patientId}"]`).addClass('active');
|
| 1196 |
-
|
| 1197 |
-
// Show patient details section, hide placeholder
|
| 1198 |
-
$('#no-patient-selected').hide();
|
| 1199 |
-
$('#patient-details-section').show();
|
| 1200 |
-
|
| 1201 |
-
|
| 1202 |
-
// You could add a loader here if the API call was slow
|
| 1203 |
-
// $('#patient-details-section').addClass('loading');
|
| 1204 |
-
|
| 1205 |
-
$.ajax({
|
| 1206 |
-
url: `/get_patient/${patientId}`,
|
| 1207 |
-
type: 'GET',
|
| 1208 |
-
success: function(response) {
|
| 1209 |
-
// $('#patient-details-section').removeClass('loading');
|
| 1210 |
-
if (response.success) {
|
| 1211 |
-
const patient = response.patient;
|
| 1212 |
-
console.log("Successfully loaded patient details:", patient.name);
|
| 1213 |
-
|
| 1214 |
-
// Update patient details
|
| 1215 |
-
$('#patient-name-header').html(`<i class="fas fa-user me-2"></i>${patient.name || 'Unnamed Patient'}`);
|
| 1216 |
-
$('#patient-age').text(patient.age || 'N/A');
|
| 1217 |
-
$('#patient-gender').text(patient.gender || 'N/A');
|
| 1218 |
-
$('#patient-feedback').text(patient.feedback || 'No feedback recorded.');
|
| 1219 |
-
$('#patient-timestamp').text(patient.timestamp || 'N/A');
|
| 1220 |
-
|
| 1221 |
-
// Set status badge
|
| 1222 |
-
const statusText = {
|
| 1223 |
-
'emergency': 'EMERGENCY',
|
| 1224 |
-
'deteriorating': 'HIGH RISK',
|
| 1225 |
-
'improving': 'IMPROVING',
|
| 1226 |
-
'stable': 'STABLE',
|
| 1227 |
-
'unknown': 'UNKNOWN'
|
| 1228 |
-
};
|
| 1229 |
-
|
| 1230 |
-
const statusBadgeClass = {
|
| 1231 |
-
'emergency': 'status-emergency',
|
| 1232 |
-
'deteriorating': 'status-deteriorating',
|
| 1233 |
-
'improving': 'status-improving',
|
| 1234 |
-
'stable': 'status-stable',
|
| 1235 |
-
'unknown': 'status-unknown'
|
| 1236 |
-
};
|
| 1237 |
-
|
| 1238 |
-
$('#patient-status')
|
| 1239 |
-
.text(statusText[patient.status] || 'UNKNOWN')
|
| 1240 |
-
.attr('class', 'patient-status ' + (statusBadgeClass[patient.status] || 'status-unknown'));
|
| 1241 |
-
|
| 1242 |
-
|
| 1243 |
-
// Update care plans content
|
| 1244 |
-
$('#updated-plan-content').text(patient.updated_plan || 'No updated care plan available.');
|
| 1245 |
-
$('#original-plan-content').text(patient.original_plan || 'No original care plan available.');
|
| 1246 |
-
|
| 1247 |
-
// Reset tab to updated plan and show content
|
| 1248 |
-
$('#carePlanTabs button').removeClass('active');
|
| 1249 |
-
$('#updated-plan-tab').addClass('active').tab('show');
|
| 1250 |
-
|
| 1251 |
-
|
| 1252 |
-
// Set up PDF download button
|
| 1253 |
-
$('#download-pdf').off('click').on('click', function() {
|
| 1254 |
-
console.log("Download button clicked for patient ID:", patient.id);
|
| 1255 |
-
window.location.href = `/download_pdf/${patient.id}`;
|
| 1256 |
-
});
|
| 1257 |
-
|
| 1258 |
-
} else {
|
| 1259 |
-
console.error('Error loading patient details:', response.error);
|
| 1260 |
-
alert('Error: ' + response.error);
|
| 1261 |
-
$('#no-patient-selected').show(); // Show placeholder if patient not found
|
| 1262 |
-
$('#patient-details-section').hide();
|
| 1263 |
-
}
|
| 1264 |
-
},
|
| 1265 |
-
error: function(xhr, status, error) {
|
| 1266 |
-
console.error("API Error loading patient details:", error);
|
| 1267 |
-
alert('Error loading patient details');
|
| 1268 |
-
$('#no-patient-selected').show(); // Show placeholder on API error
|
| 1269 |
-
$('#patient-details-section').hide();
|
| 1270 |
-
}
|
| 1271 |
-
});
|
| 1272 |
-
}
|
| 1273 |
-
|
| 1274 |
-
// Patient search functionality
|
| 1275 |
-
$('#patient-search').on('input', function() {
|
| 1276 |
-
const searchTerm = $(this).val().toLowerCase();
|
| 1277 |
-
let foundPatients = false;
|
| 1278 |
-
|
| 1279 |
-
$('.patient-item').each(function() {
|
| 1280 |
-
const patientName = $(this).find('h6').text().toLowerCase();
|
| 1281 |
-
const patientDetails = $(this).find('small').text().toLowerCase(); // Includes age/gender
|
| 1282 |
-
|
| 1283 |
-
if (patientName.includes(searchTerm) || patientDetails.includes(searchTerm)) {
|
| 1284 |
-
$(this).show();
|
| 1285 |
-
foundPatients = true;
|
| 1286 |
-
} else {
|
| 1287 |
-
$(this).hide();
|
| 1288 |
-
}
|
| 1289 |
-
});
|
| 1290 |
-
|
| 1291 |
-
if (foundPatients) {
|
| 1292 |
-
$('#no-patients-found').hide();
|
| 1293 |
-
} else {
|
| 1294 |
-
$('#no-patients-found').show();
|
| 1295 |
-
}
|
| 1296 |
-
});
|
| 1297 |
-
|
| 1298 |
-
|
| 1299 |
-
// Initial patient data load when page is ready
|
| 1300 |
-
loadPatients();
|
| 1301 |
-
|
| 1302 |
-
// Periodically check for emergency notifications (and refresh list if found)
|
| 1303 |
-
function checkEmergencyNotifications() {
|
| 1304 |
-
console.log("Checking for emergency notifications...");
|
| 1305 |
-
$.ajax({
|
| 1306 |
-
url: '/get_emergency_notifications',
|
| 1307 |
-
type: 'GET',
|
| 1308 |
-
success: function(response) {
|
| 1309 |
-
if (response.success && response.notifications.length > 0) {
|
| 1310 |
-
console.log(`Found ${response.notifications.length} emergency notifications.`);
|
| 1311 |
-
// Update emergency alerts section
|
| 1312 |
-
const alertCount = response.notifications.length;
|
| 1313 |
-
let alertHtml = `
|
| 1314 |
-
<div class="alert alert-danger mb-3">
|
| 1315 |
-
<i class="fas fa-exclamation-triangle me-2"></i>
|
| 1316 |
-
<strong>${alertCount} Emergency patient${alertCount > 1 ? 's' : ''} requiring immediate attention!</strong>
|
| 1317 |
-
</div>
|
| 1318 |
-
`;
|
| 1319 |
-
$('#emergency-alerts').html(alertHtml);
|
| 1320 |
-
|
| 1321 |
-
// Reload the patient list to bring emergency patients to the top
|
| 1322 |
-
// Ensure currently selected patient remains selected if they are still in the list
|
| 1323 |
-
const currentSelectedId = $('#patient-details-section').is(':visible') ? $('.patient-item.active').data('id') : null;
|
| 1324 |
-
loadPatients(); // This will re-render the list and handle selection from URL
|
| 1325 |
-
|
| 1326 |
-
// If you want to *only* reload if there's a *new* emergency notification,
|
| 1327 |
-
// you'd need to track seen notifications or compare list contents.
|
| 1328 |
-
// For simplicity, we reload the list whenever *any* emergency exists.
|
| 1329 |
-
|
| 1330 |
-
} else {
|
| 1331 |
-
// If no emergencies, clear the alert area
|
| 1332 |
-
console.log("No emergency notifications.");
|
| 1333 |
-
$('#emergency-alerts').empty();
|
| 1334 |
-
// Optionally, reload the patient list if you want to revert sorting,
|
| 1335 |
-
// but sorting already keeps non-emergency patients sorted by timestamp.
|
| 1336 |
-
// So no need to reload the full list if only alerts disappear.
|
| 1337 |
-
}
|
| 1338 |
-
},
|
| 1339 |
-
error: function(xhr, status, error) {
|
| 1340 |
-
console.error("Error checking emergency notifications:", error);
|
| 1341 |
-
}
|
| 1342 |
-
});
|
| 1343 |
-
}
|
| 1344 |
-
|
| 1345 |
-
// Check for emergency notifications every 30 seconds
|
| 1346 |
-
setInterval(checkEmergencyNotifications, 30000); // 30 seconds
|
| 1347 |
-
|
| 1348 |
-
// Handle browser back/forward button for URL patient ID
|
| 1349 |
-
window.onpopstate = function(event) {
|
| 1350 |
-
const urlParams = new URLSearchParams(window.location.search);
|
| 1351 |
-
const patientIdFromUrl = urlParams.get('patient_id');
|
| 1352 |
-
if (patientIdFromUrl) {
|
| 1353 |
-
loadPatientDetails(patientIdFromUrl);
|
| 1354 |
-
} else {
|
| 1355 |
-
// If no patient ID in URL (e.g., went back to dashboard root)
|
| 1356 |
-
$('.patient-item').removeClass('active');
|
| 1357 |
-
$('#patient-details-section').hide();
|
| 1358 |
-
$('#no-patient-selected').show();
|
| 1359 |
-
// Optionally refresh list if needed, but not strictly necessary here
|
| 1360 |
-
}
|
| 1361 |
-
};
|
| 1362 |
-
|
| 1363 |
-
|
| 1364 |
});
|
| 1365 |
</script>
|
| 1366 |
</body>
|
|
|
|
| 678 |
};
|
| 679 |
|
| 680 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 681 |
});
|
| 682 |
</script>
|
| 683 |
</body>
|