john/coursera-ibm-java-developer-course
1
Fork 0
Code Issues 17 Pull Requests Actions Activity

Completed front end pages for Clinic Management System

Browse Source
This commit is contained in:
John Ahlroos
2025-11-06 19:52:26 +01:00
parent 7f968413b3
commit 42efca48ee
10 changed files with 463 additions and 745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
SmartClinicManagementSystem/app/src/main/resources/static/js/components/header.js
View File

@@ -1,24 +1,7 @@
/*
Step-by-Step Explanation of Header Section Rendering
export function renderHeader() {
const headerDiv = document.getElementById("header");
This code dynamically renders the header section of the page based on the user's role, session status, and available actions (such as login, logout, or role-switching).
1. Define the `renderHeader` Function
* The `renderHeader` function is responsible for rendering the entire header based on the user's session, role, and whether they are logged in.
2. Select the Header Div
* The `headerDiv` variable retrieves the HTML element with the ID `header`, where the header content will be inserted.
```javascript
const headerDiv = document.getElementById("header");
```
3. Check if the Current Page is the Root Page
* The `window.location.pathname` is checked to see if the current page is the root (`/`). If true, the user's session data (role) is removed from `localStorage`, and the header is rendered without any user-specific elements (just the logo and site title).
```javascript
if (window.location.pathname.endsWith("/")) {
if (window.location.pathname.endsWith("/")) {
localStorage.removeItem("userRole");
headerDiv.innerHTML = `
<header class="header">
@@ -28,98 +11,68 @@
</div>
</header>`;
return;
}
```
}
4. Retrieve the User's Role and Token from LocalStorage
const role = localStorage.getItem("userRole");
const token = localStorage.getItem("TOKEN");
* The `role` (user role like admin, patient, doctor) and `token` (authentication token) are retrieved from `localStorage` to determine the user's current session.
```javascript
const role = localStorage.getItem("userRole");
const token = localStorage.getItem("token");
```
let headerContent = `<header class="header">
<div class="logo-section">
<img src="../assets/images/logo/logo.png" alt="Hospital CRM Logo" class="logo-img">
<span class="logo-title">Hospital CMS</span>
</div>
<nav>`;
5. Initialize Header Content
if ((role === "loggedPatient" || role === "admin" || role === "doctor") && !token) {
localStorage.removeItem("userRole");
alert("Session expired or invalid login. Please log in again.");
window.location.href = "/";
return;
} else if (role === "admin") {
headerContent += `
<button id="addDocBtn" class="adminBtn" onclick="openModal('addDoctor')">Add Doctor</button>
<a href="#" onclick="logout()">Logout</a>`;
} else if (role === "doctor") {
headerContent += `
<button class="adminBtn" onclick="selectRole('doctor')">Home</button>
<a href="#" onclick="logout()">Logout</a>`;
} else if (role === "patient") {
headerContent += `
<button id="patientLogin" class="adminBtn">Login</button>
<button id="patientSignup" class="adminBtn">Sign Up</button>`;
} else if (role === "loggedPatient") {
headerContent += `
<button id="home" class="adminBtn" onclick="window.location.href='/pages/loggedPatientDashboard.html'">Home</button>
<button id="patientAppointments" class="adminBtn" onclick="window.location.href='/pages/patientAppointments.html'">Appointments</button>
<a href="#" onclick="logoutPatient()">Logout</a>`;
}
* The `headerContent` variable is initialized with basic header HTML (logo section), to which additional elements will be added based on the user's role.
```javascript
let headerContent = `<header class="header">
<div class="logo-section">
<img src="../assets/images/logo/logo.png" alt="Hospital CRM Logo" class="logo-img">
<span class="logo-title">Hospital CMS</span>
</div>
<nav>`;
```
headerContent += '</nav>';
headerDiv.innerHTML = headerContent;
6. Handle Session Expiry or Invalid Login
attachHeaderButtonListeners();
}
* If a user with a role like `loggedPatient`, `admin`, or `doctor` does not have a valid `token`, the session is considered expired or invalid. The user is logged out, and a message is shown.
```javascript
if ((role === "loggedPatient" || role === "admin" || role === "doctor") && !token) {
localStorage.removeItem("userRole");
alert("Session expired or invalid login. Please log in again.");
window.location.href = "/"; or a specific login page
return;
}
```
export function attachHeaderButtonListeners() {
const login = document.getElementById(“patientLogin”);
if (login) {
login.addEventListener('click', () => { openModal('patientLogin'); });
}
7. Add Role-Specific Header Content
const signup = document.getElementById(“patientSignup”);
if (signup) {
signup.addEventListener('click', () => { openModal('patientSignup'); });
}
}
* Depending on the user's role, different actions or buttons are rendered in the header:
- **Admin**: Can add a doctor and log out.
- **Doctor**: Has a home button and log out.
- **Patient**: Shows login and signup buttons.
- **LoggedPatient**: Has home, appointments, and logout options.
```javascript
else if (role === "admin") {
headerContent += `
<button id="addDocBtn" class="adminBtn" onclick="openModal('addDoctor')">Add Doctor</button>
<a href="#" onclick="logout()">Logout</a>`;
} else if (role === "doctor") {
headerContent += `
<button class="adminBtn" onclick="selectRole('doctor')">Home</button>
<a href="#" onclick="logout()">Logout</a>`;
} else if (role === "patient") {
headerContent += `
<button id="patientLogin" class="adminBtn">Login</button>
<button id="patientSignup" class="adminBtn">Sign Up</button>`;
} else if (role === "loggedPatient") {
headerContent += `
<button id="home" class="adminBtn" onclick="window.location.href='/pages/loggedPatientDashboard.html'">Home</button>
<button id="patientAppointments" class="adminBtn" onclick="window.location.href='/pages/patientAppointments.html'">Appointments</button>
<a href="#" onclick="logoutPatient()">Logout</a>`;
}
```
export function logout() {
localStorage.removeItem("userRole");
localStorage.removeItem("TOKEN");
window.location.href = "/";
}
9. Close the Header Section
10. Render the Header Content
* Insert the dynamically generated `headerContent` into the `headerDiv` element.
```javascript
headerDiv.innerHTML = headerContent;
```
11. Attach Event Listeners to Header Buttons
* Call `attachHeaderButtonListeners` to add event listeners to any dynamically created buttons in the header (e.g., login, logout, home).
```javascript
attachHeaderButtonListeners();
```
### Helper Functions
13. **attachHeaderButtonListeners**: Adds event listeners to login buttons for "Doctor" and "Admin" roles. If clicked, it opens the respective login modal.
14. **logout**: Removes user session data and redirects the user to the root page.
15. **logoutPatient**: Removes the patient's session token and redirects to the patient dashboard.
16. **Render the Header**: Finally, the `renderHeader()` function is called to initialize the header rendering process when the page loads.
*/
export function logoutPatient() {
localStorage.removeItem("userRole");
selectRole('patient')
window.location.href='/pages/loggedPatientDashboard.html
}