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

143
SmartClinicManagementSystem/app/src/main/resources/static/assets/css/adminDashboard.css
View File

@@ -1,94 +1,65 @@
/*this is the style sheet for the adminDashboard. */ * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* html, body {
Global Reset (`*`) height: 100%;
font-family: Arial, sans-serif;
}
* Purpose: Ensure consistent layout across all browsers. .wrapper {
* Properties: display:flex;
flex-direction:column;
min-height: 100vh;
}
* `margin: 0` — removes default outer spacing from all elements. h2 {
* `padding: 0` — removes default inner spacing. font-size: 32px;
* `box-sizing: border-box` — ensures padding and borders are included within the total width/height of elements. font-weight: bold;
margin-bottom: 50px;
color: #003e3e;
}
Base HTML & Body (`html, body`) .main-content {
flex-grow: 1;
padding: 40px;
display: flex;
text-align: center;
background-image: url("index.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
* Purpose: Establish a full-height layout and apply a standard font across the page. button {
* Properties: background-color: #A62B1F;
color: white;
border: none;
border-radius: 12px;
padding: 10px 20px;
margin-top: 20px;
width: 200px;
cursor: pointer;
font-size: 16px;
}
* `height: 100%` — allows containers to stretch to the full viewport height. button::hover {
* `font-family: Arial, sans-serif` — applies a clean, readable sans-serif font. background-color: #A62B1F;
}
Main Layout Wrapper (`.wrapper`) .adminBtn {
background-color: #f4f4f4;
color: #333;
font-weight: bold;
width: 110px;
padding: 10px 0;
border: none;
cursor: pointer;
}
* Purpose: Create a flexible, vertical layout that fills the entire screen. .adminBtn::hover {
* Properties: color: #A62B1F;
}
* `display: flex` — enables flexbox for layout control.
* `flex-direction: column` — stacks children vertically.
* `min-height: 100vh` — ensures the wrapper always covers full screen height.
Section Heading (`h2`)
* Purpose: Style the headings prominently for section separation.
* Properties:
* `font-size: 32px` — makes the heading large and noticeable.
* `font-weight: bold` — emphasizes text.
* `margin-bottom: 50px` — creates space below the heading.
* `color: #003e3e` — uses a strong teal for visual anchoring.
Main Content Section (`.main-content`)
* Purpose: Layout the main content with padding and a background image.
* Properties:
* `flex-grow: 1` — lets the content fill the available vertical space.
* `padding: 40px` — adds internal spacing around content.
* `display: flex` and `flex-direction: column` — organizes content in a vertical stack.
* `text-align: center` — centers the text.
* `background-image: url("index.png")` — sets a full-screen dashboard background.
* `background-size: cover` — ensures the image covers the whole section.
* `background-position: center` — centers the image.
* `background-repeat: no-repeat` — avoids tiling the image.
* `background-attachment: fixed` — fixes the image while scrolling.
Primary Button (`button`)
* Purpose: Design prominent, interactive buttons for main actions.
* Properties:
* `background-color: #A62B1F` — sets a bold red color.
* `color: white` — makes text stand out.
* `border: none` — removes any outline/border.
* `border-radius: 12px` — creates rounded corners.
* `padding: 10px 20px` — gives space inside the button.
* `margin-top: 20px` — adds spacing above the button.
* `width: 200px` — ensures consistent button width.
* `cursor: pointer` — shows a hand icon on hover.
* `font-size: 16px` — makes the text readable.
* On Hover:
* Retains the same red background to maintain branding.
Admin Button (`.adminBtn`)
* Purpose: Provide a secondary button style for admin-specific actions.
* Properties:
* `background-color: #f4f4f4` — uses a light grey background.
* `color: #333` — uses dark text for contrast.
* `font-weight: bold` — emphasizes text.
* `width: 110px` — smaller, compact width.
* `padding: 10px 0` — vertical padding only.
* `border: none` — clean look.
* `cursor: pointer` — indicates it's clickable.
* On Hover**:
Changes text color to `#A62B1F` for brand consistency while keeping the background same.
*/

133
SmartClinicManagementSystem/app/src/main/resources/static/assets/css/doctorDashboard.css
View File

@@ -1,65 +1,100 @@
/* This is the style sheet for the doctorDashboard.html */ * {
/* margin: 0;
**Table Header (`.table-header`)** padding: 0;
box-sizing: border-box;
}
* Set font size to `24px` for clear emphasis. html, body {
* Use a dark teal color (`#015c5d`) for consistency with the theme. height: 100%;
* Add `30px` bottom margin and remove right margin. font-family: Arial, sans-serif;
}
**Table Styling (`table`)** .wrapper {
display:flex;
flex-direction:column;
min-height: 100vh;
}
* Make the table full width (`100%`). .main-content {
* Collapse borders for clean lines. flex-grow: 1;
* Use a `sans-serif` font. padding: 40px;
* Add `20px` top margin for spacing. display: flex;
text-align: center;
background-image: url("index.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
**Table Head (`thead`)** .table-header {
font-size: 24px;
color: #015c5d;
margin-bottom: 30px;
margin-right: 0;
}
* Set a very light dark background (`#33333310`) for header row. table {
* Use white text color (`#fff`). width: 100%;
border-collapse: collapse;
font-family: sans-serif;
margin-top: 20px;
}
**Table Cells (`td, th`)** thead {
background-color: #33333310;
color: #fff;
}
* Apply padding of `12px 16px` for spacing. td,th {
* Center-align the text. padding: 12px 16px;
* Add a subtle bottom border (`1px solid #ddd`). text-align: center;
border-bottom: 1px solid #ddd;
}
**Table Row Styling** tr:nth-child(even) {
background-color: #f9f9f959;
}
* Alternate row colors for better readability: tr:nth-child(odd) {
background-color: #ffffffc0;
}
* Even rows: semi-transparent light grey (`#f9f9f959`). tr::hover {
* Odd rows: soft white background (`#ffffffc0`). background-color: #015c5d39;
* On hover: highlight row with a light teal overlay (`#015c5d39`). }
**Prescription Button (`.prescription-btn`)** .prescription-btn {
width: 30px;
height: 30px;
cursor: pointer;
}
* Set size to `30px x 30px`. .prescription-btn:hover {
* Make it interactive with a pointer cursor. transform: scale(1.1);
* Add transition effects for scale and brightness on hover. background-color: lighten(0.1);
* On hover: }
* Slightly enlarge (`scale(1.1)`) .prescription-btn:active {
* Brighten appearance transform: scale(0.95);
* On click: slightly shrink (`scale(0.95)`). }
**No Record Message (`.noPatientRecord`)** .noPatientRecord {
font-size: 16px;
color: grey;
font-style: italic;
}
* Use a `16px` italic grey font to indicate no data gently. .today-btn {
margin-right: 10px;
padding: 10px;
background-color: #015c5d;
}
**Today Button (`.today-btn`)** .date-picker {
margin-left: 10px;
* Add right margin (`10px`). margin-top: 13px;
* Add padding (`10px`). corner-radius: 8px;
* Set background color to teal green (`#015c5d`). padding: 10px;
height: 30px;
**Date Picker (`.date-picker`)** }
* Add left margin (`10px`) and top margin (`13px`).
* Round corners with `8px` radius.
* Add padding (`10px`) and set fixed height (`30px`).
---
Let me know if you'd like a consolidated style guide for the entire HospitalCRM frontend.
*/

95
SmartClinicManagementSystem/app/src/main/resources/static/assets/css/index.css
View File

@@ -1,53 +1,60 @@
/* this is the style sheet file for index.htlm */ * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* html, body {
**Global Reset (`*`)** height: 100%;
font-family: 'Roboto' sans-serif;
}
* Remove all default margin and padding. .wrapper {
* Use `border-box` for sizing to include padding and border in element size. display: flex;
flex-direction:column;
min-height: 100vh;
}
**Base (`html, body`)** h2 {
font-size: 48px;
margin-bottom: 50px;
color: #003e3e;
font-family: 'Alegreya', 'Roboto', sans-serif;
font-weight: bold;
}
* Set height to 100% for full viewport layout. .main-content {
* Use the `'Roboto'` sans-serif font for modern, clean typography. flex-grow: 1;
padding: 40px;
display: flex;
text-align: center;
background-image: url("index.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
**Layout Wrapper (`.wrapper`)** button {
background-color: #015c5d;
color: white;
border-radius: 12px;
padding: 10px 20px;
width: 200px;
margin: 10px;
pointer:cursor;
font-size: 16px;
}
* Use a vertical flexbox layout. button::hover {
* Ensure the wrapper covers at least the full height of the screen (`min-height: 100vh`). background-color: #A62B1F;
}
**Heading (`h2`)** .dashboard-btn {
background-color: #015c5d;
}
* Set a large font size (`48px`) for prominence.
* Add a bottom margin of `50px` for spacing.
* Use a dark teal color (`#003e3e`).
* Make the font bold and use a blended font stack (`'Alegreya', 'Roboto', sans-serif`) for elegant styling.
**Main Section (`.main-content`)** .dashboard-btn::hover {
background: #003e3e;
* Allow the section to grow to fill space with `flex-grow: 1`. }
* Add `40px` of internal padding.
* Center content both horizontally and vertically using `justify-content` and `align-items`.
* Display items in a column direction.
* Center all text.
* Apply a full-screen background image with:
* `cover` size
* `center` positioning
* no repeat
* `fixed` attachment to keep image still during scroll
**Buttons (`button`)**
* Style with a teal green background (`#015c5d`) and white text.
* Remove borders and round the corners (`12px`).
* Use `10px 20px` padding and set width to `200px`.
* Add a top margin of `10px` for spacing.
* Enable pointer cursor and readable font size (`16px`).
* On hover, change background color to bold red (`#A62B1F`).
**Dashboard Buttons (`.dashboard-btn`)**
* Use the same base green background (`#015c5d`) as the default button.
* On hover, darken the background to deep teal (`#003e3e`) for visual feedback.
*/

139
SmartClinicManagementSystem/app/src/main/resources/static/index.html
View File

@@ -1,115 +1,34 @@
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Smart Clinic Management System</title>
<link rel="stylesheet" href="./assets/css/index.css">
<link rel="stylesheet" href="./assets/css/style.css">
<script src="./js/util.js" defer></script>
<script src="./js/render.js" defer></script>
<script src="./js/components/header.js" defer></script>
<script src="./js/components/footer.js" defer></script>
<link rel="icon" type="image/png" href="./assets/images/logo/logo.png" />
</head>
<body> <body>
<div class="container">
<div class="wrapper">
<div id="header"></div>
<main class="main-content">
<h2>Select Your Role:</h2>
<button>Admin</button>
<button>Doctor</button>
<button>Patient</button>
</main>
<div id="footer"></div>
</div>
</div>
<div id="modal" class="modal">
<button id="closeModal">Close</button>
<div id="modal-body"></div>
</div>
<script type="module" src="js/services/index.js" defer></script> <script type="module" src="js/services/index.js" defer></script>
</body> </body>
</html> </html>
<!-- index.html -->
<!--
Step-by-Step Explanation of `index.html`.
This file allows users to select a role (Admin, Patient, Doctor)
and triggers modal-based login functionality.
1. Label the File
* Add a comment at the very top to identify the file as `index.html`. This helps developers stay organized.
2. Declare Document Type
* Use the declaration for HTML5 so browsers know how to render the page correctly.
3. Start the HTML Document
* Begin the HTML structure and set the document language to English to improve accessibility and SEO `lang="en"`.
4. Head Section (Metadata and Resources)
* Open the `<head>` section which contains settings and links that don’t show up visually.
5. Set Character Encoding
* Specify UTF-8 encoding to support most global characters and symbols.
6. Set the Page Title
* Give the page a name (e.g., "Select Role") that appears on the browser tab.
7. Add a Favicon
* Link to an icon (like a logo) that will appear in the browser tab from the address `href="../assets/images/logo/Logo.png"`
8. Link Stylesheets
* Add a page-specific stylesheet for layout and design.
* Also include a global stylesheet for shared site-wide styles.
HINT:
`<link rel="stylesheet" href="../assets/css/index.css">`
`<link rel="stylesheet" href="../assets/css/style.css">`
9. Add JavaScript Files with `defer`
* Link utility and rendering JavaScript files (e.g., `util.js`, `render.js`).
* Include scripts for rendering components like header and footer.
* Use the `defer` attribute so they load after the HTML is parsed.
HINT:
`<script src="../js/util.js" defer></script>`
`<script src="../js/render.js" defer></script>`
`<script src="../js/components/header.js" defer></script>`
`<script src="../js/components/footer.js" defer></script>`
10. Close the Head and Open the Body
* Wrap up metadata and begin the visible page content.
11. Create a Container
* Add a main container to hold all page elements and apply layout constraints.
12. Use a Wrapper for Structure
* Inside the container, add a wrapper to group header, main, and footer sections logically.
13. Insert a Header Placeholder
* Add a `div` that will be dynamically filled by JavaScript with the site’s header.
14. Define the Main Section
* Use a semantic `<main>` tag to hold the central content of the page.
15. Add a Heading for Role Selection
* Display a heading like “Select Your Role” to instruct users.
16. Add Buttons for Roles
* Create buttons for each role: Admin, Patient, and Doctor.
* Assign unique identifiers or `onclick` handlers to them as needed.
17. Insert a Footer Placeholder
* Add a `div` that will be dynamically filled by JavaScript with the site’s footer.
18. Create a Modal Structure
* Add a modal overlay for popups (like login forms).
* Include a close button and an inner container for dynamic content.
19. Load Page-Specific Logic Module
* Use a `<script type="module">` tag to load the role selection logic (e.g., `index.js`).
* Ensure it’s deferred so it doesn’t block HTML rendering.
20. Close the Body and HTML Tags
* Properly close all opened tags to complete the document structure.
-->

106
SmartClinicManagementSystem/app/src/main/resources/static/js/components/doctorCard.js
View File

@@ -1,41 +1,71 @@
/* import deleteDoctor from "../services/doctorService.js";
Import the overlay function for booking appointments from loggedPatient.js import getPatientData from "../services/patientServices.js";
import showBookingOverlay from "../loggedPatient.js";
Import the deleteDoctor API function to remove doctors (admin role) from docotrServices.js export function createDoctorCard(doctor) {
const card = document.createElement("div");
card.classList.add("doctor-card");
Import function to fetch patient details (used during booking) from patientServices.js const role = localStorage.getItem("userRole");
Function to create and return a DOM element for a single doctor card const infoDiv = document.createElement("div");
Create the main container for the doctor card infoDiv.classList.add("doctor-info");
Retrieve the current user role from localStorage
Create a div to hold doctor information const name = document.createElement("h3");
Create and set the doctor’s name name.textContent = doctor.name;
Create and set the doctor's specialization
Create and set the doctor's email const specialization = document.createElement("h3");
Create and list available appointment times specialization.textContent = doctor.specialization;
Append all info elements to the doctor info container
Create a container for card action buttons const email = document.createElement("h3");
=== ADMIN ROLE ACTIONS === email.textContent = doctor.email;
Create a delete button
Add click handler for delete button const availability = document.createElement("h3");
Get the admin token from localStorage availability.textContent = doctor.availability.join(", ");
Call API to delete the doctor
Show result and remove card if successful infoDiv.appendChild(name);
Add delete button to actions container infoDiv.appendChild(specialization);
infoDiv.appendChild(email);
=== PATIENT (NOT LOGGED-IN) ROLE ACTIONS === infoDiv.appendChild(availability);
Create a book now button
Alert patient to log in before booking const actionsDiv = document.createElement("div");
Add button to actions container actionsDiv.classList.add("card-actions");
=== LOGGED-IN PATIENT ROLE ACTIONS === if (role === "admin") {
Create a book now button const removeBtn = document.createElement("button");
Handle booking logic for logged-in patient removeBtn.textContent = "Delete";
Redirect if token not available removeBtn.addEventListener("click", async () => {
Fetch patient data with token if (confirm("Arey you sure?") == true) {
Show booking overlay UI with doctor and patient info const token = localStorage.getItem("TOKEN");
Add button to actions container const result = await deleteDoctor(doctor.id, token);
if (result.success) {
Append doctor info and action buttons to the car card.remove();
Return the complete doctor card element }
*/ }
});
actionsDiv.appendChild(removeBtn);
} else if (role === "patient") {
const bookNow = document.createElement("button");
bookNow.textContent = "Book Now";
bookNow.addEventListener("click", () => {
alert("Patient needs to login first.");
});
actionsDiv.appendChild(bookNow);
} else if (role === "loggedPatient") {
const bookNow = document.createElement("button");
bookNow.textContent = "Book Now";
bookNow.addEventListener("click", async (e) => {
const token = localStorage.getItem("TOKEN");
const patientData = await getPatientData(token);
showBookingOverlay(e, doctor, patientData);
});
actionsDiv.appendChild(bookNow);
}
card.appendChild(infoDiv);
card.appendChild(actionsDiv);
return card;
}

136
SmartClinicManagementSystem/app/src/main/resources/static/js/components/footer.js
View File

@@ -1,104 +1,34 @@
/* export function renderFooter() {
Function to render the footer content into the page const footer = document.getElementById("footer");
Select the footer element from the DOM footer.innerHTML = `
Set the inner HTML of the footer element to include the footer content <footer class="footer">
This section dynamically generates the footer content for the web page, including the hospital's logo, copyright information, and various helpful links. <div class="footer-container">
<div class="footer-logo">
<img src="../assets/images/logo/logo.png" alt="Hospital CMS Logo">
<p>© Copyright 2025. All Rights Reserved by Hospital CMS.</p>
</div>
<div class="footer-links">
<div class="footer-column">
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Careers</a>
<a href="#">Press</a>
</div>
<div class="footer-column">
<h4>Support</h4>
<a href="#">Account</a>
<a href="#">Help Center</a>
<a href="#">Contact Us</a>
</div>
<div class="footer-column">
<h4>Legals</h4>
<a href="#">Terms & Conditions</a>
<a href="#">Privacy Policy</a>
<a href="#">Licensing</a>
</div>
</div>
</div>
</footer>`
}
1. Insert Footer HTML Content renderFooter();
* The content is inserted into the `footer` element with the ID "footer" using `footer.innerHTML`.
* This is done dynamically via JavaScript to ensure that the footer is properly rendered across different pages.
2. Create the Footer Wrapper
* The `<footer>` tag with class `footer` wraps the entire footer content, ensuring that it is styled appropriately.
```html
<footer class="footer">
```
3. Create the Footer Container
* Inside the footer, a container div with the class `footer-container` holds the content to maintain proper alignment and spacing.
```html
<div class="footer-container">
```
4. Add the Hospital Logo and Copyright Info
* A `footer-logo` div contains the hospital's logo (an image element) and the copyright information.
- The `<img>` tag displays the logo, with an `alt` attribute for accessibility.
- The copyright text is displayed in a paragraph element.
```html
<div class="footer-logo">
<img src="../assets/images/logo/logo.png" alt="Hospital CMS Logo">
<p>© Copyright 2025. All Rights Reserved by Hospital CMS.</p>
</div>
```
5. Create the Links Section
* A `footer-links` div contains all the links grouped into three sections: Company, Support, and Legals.
* This structure helps to organize the footer content and makes it easier for users to find related links.
6. Add the 'Company' Links Column
* Inside the `footer-links` div, the first column represents company-related links.
- The section includes a header (`<h4>Company</h4>`) followed by links for "About", "Careers", and "Press".
```html
<div class="footer-column">
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Careers</a>
<a href="#">Press</a>
</div>
```
7. Add the 'Support' Links Column
* The second column is dedicated to support-related links.
- It includes a header (`<h4>Support</h4>`) followed by links for "Account", "Help Center", and "Contact Us".
```html
<div class="footer-column">
<h4>Support</h4>
<a href="#">Account</a>
<a href="#">Help Center</a>
<a href="#">Contact Us</a>
</div>
```
8. Add the 'Legals' Links Column
* The third column contains legal-related links, such as "Terms & Conditions", "Privacy Policy", and "Licensing".
- The header (`<h4>Legals</h4>`) is followed by these links.
```html
<div class="footer-column">
<h4>Legals</h4>
<a href="#">Terms & Conditions</a>
<a href="#">Privacy Policy</a>
<a href="#">Licensing</a>
</div>
```
9. Close the Footer Container
* Close the `footer-container` div to ensure proper structure.
```html
</div> <!-- End of footer-container -->
```
10. Close the Footer Element
* Finally, close the `<footer>` tag to complete the footer section.
```html
</footer>
```
11. Footer Rendering Complete
* The `footer.innerHTML` code completes the dynamic rendering of the footer by injecting the structured HTML content into the `footer` element on the page.
Call the renderFooter function to populate the footer in the page
*/

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

@@ -1,24 +1,7 @@
/* export function renderHeader() {
Step-by-Step Explanation of Header Section Rendering 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). if (window.location.pathname.endsWith("/")) {
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("/")) {
localStorage.removeItem("userRole"); localStorage.removeItem("userRole");
headerDiv.innerHTML = ` headerDiv.innerHTML = `
<header class="header"> <header class="header">
@@ -28,98 +11,68 @@
</div> </div>
</header>`; </header>`;
return; 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. let headerContent = `<header class="header">
```javascript <div class="logo-section">
const role = localStorage.getItem("userRole"); <img src="../assets/images/logo/logo.png" alt="Hospital CRM Logo" class="logo-img">
const token = localStorage.getItem("token"); <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. headerContent += '</nav>';
```javascript headerDiv.innerHTML = headerContent;
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>`;
```
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. export function attachHeaderButtonListeners() {
```javascript const login = document.getElementById(“patientLogin”);
if ((role === "loggedPatient" || role === "admin" || role === "doctor") && !token) { if (login) {
localStorage.removeItem("userRole"); login.addEventListener('click', () => { openModal('patientLogin'); });
alert("Session expired or invalid login. Please log in again."); }
window.location.href = "/"; or a specific login page
return;
}
```
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: export function logout() {
- **Admin**: Can add a doctor and log out. localStorage.removeItem("userRole");
- **Doctor**: Has a home button and log out. localStorage.removeItem("TOKEN");
- **Patient**: Shows login and signup buttons. window.location.href = "/";
- **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 logoutPatient() {
localStorage.removeItem("userRole");
9. Close the Header Section selectRole('patient')
window.location.href='/pages/loggedPatientDashboard.html
}
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.
*/

4
SmartClinicManagementSystem/app/src/main/resources/static/js/services/patientServices.js
View File

@@ -37,8 +37,6 @@ export async function patientLogin(data) {
}, },
body: JSON.stringify(data) body: JSON.stringify(data)
}); });
} }
// For getting patient data (name ,id , etc ). Used in booking appointments // For getting patient data (name ,id , etc ). Used in booking appointments
@@ -94,4 +92,4 @@ export async function filterAppointments(condition, name, token) {
alert("Something went wrong!"); alert("Something went wrong!");
return { appointments: [] }; return { appointments: [] };
} }
} }

145
SmartClinicManagementSystem/app/src/main/resources/templates/admin/adminDashboard.html
View File

@@ -1,109 +1,40 @@
<!-- adminDashboard.html --> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Admin Dashboard</title>
<link rel="stylesheet" th:href="@{/assets/css/adminDashboard.css}">
<link rel="stylesheet" th:href="@{/assets/css/style.css}">
<script th:src="@{/js/render.js}" defer></script>
<script th:src="@{/js/util.js}" defer></script>
<script th:src="@{/js/components/header.js}" defer></script>
<script th:src="@{/js/components/footer.js}" defer></script>
<link rel="icon" type="image/png" th:href="@{/assets/images/logo/logo.png}" />
</head>
<!-- <body onload="renderContent()">
Step-by-Step Explanation of `adminDashboard.html` <div class="container">
This file creates the Admin Dashboard interface for managing doctor-related data <div class="wrapper">
with search, filter, and modal functionality. <div id="header"></div>
<main class="main-content">
<input type="text" id="searchBar" placeholder="search by doctor name" />
1. Declare the Document Type <select id="time">
<option></option>
* Use `<!DOCTYPE html>` to ensure HTML5 standards for consistent rendering across browsers. </select>
<select id="speciality">
2. Begin the HTML Document with Thymeleaf Namespace <option></option>
</select>
* Add the `<html>` tag with `xmlns:th="http://www.thymeleaf.org"` to allow Thymeleaf-specific attributes in Spring-based apps. <div id="content"></div>
</main>
3. Head Section – Metadata and Resources <div id="footer"></div>
</div>
* Open the `<head>` section for meta info and links to assets and scripts. </div>
<div id="modal" class="modal">
4. Set Character Encoding <span id="closeModal" class="close">&times;</span>
<div id="modal-body"></div>
* Use UTF-8 to support all characters and prevent encoding issues. </div>
<script type="module" src="../js/services/adminDashboard.js" defer></script>
5. Set the Favicon <script type="module" src="../js/components/doctorCard.js" defer></script>
</body>
* Add a favicon for browser tabs using Thymeleaf pathing:
`<link rel="icon" type="image/png" th:href="@{/assets/images/logo/logo.png}" />`.
6. Set the Page Title
* Give the page a title, e.g., `"Admin Dashboard"`, which will show in the browser tab.
7. Link CSS Stylesheets
* Include dashboard-specific styles and global site-wide styles:
- `adminDashboard.css` for layout and design of this page.
- `style.css` for shared UI components.
8. Link JavaScript Files (with `defer`)
* Use Thymeleaf's `th:src` to include JS components and utilities:
- `render.js` (rendering content)
- `util.js` (utility functions)
- `header.js` and `footer.js` (for dynamic header/footer)
* Use `defer` so scripts execute after the HTML is fully parsed.
9. Close the Head and Begin the Body
* Start the visible part of the webpage. `onload="renderContent()"` is used to call a function when the page is ready.
10. Create the Container
* Add a `div` with class `container` for layout control.
11. Add a Wrapper Inside the Container
* Wrap page elements with a `wrapper` div to maintain consistent spacing and organization.
12. Insert a Header Placeholder
* Add `<div id="header"></div>` for injecting the header via JavaScript.
13. Define the Main Section
* Use `<main class="main-content">` for the central dashboard area.
14. Add a Search Bar
* Add an input field with `id="searchBar"` for admin to search content dynamically.
15. Add Filter Dropdowns
* Use two `<select>` elements:
- One for time (AM/PM).
- One for filtering by medical specialty (Cardiologist, Dentist, etc.).
16. Add Content Display Area
* Insert a `<div id="content"></div>` for dynamic injection of doctor cards or data.
17. Add a Footer Placeholder
* Use `<div id="footer"></div>` for a JavaScript-rendered footer.
18. Add Modal Structure
* Include a modal with:
- A close button (`&times;`)
- A content area (`#modal-body`) for displaying popup information or forms.
19. Include Page-Specific JavaScript Modules
* Load JavaScript specific to the admin dashboard:
- `adminDashboard.js` for dashboard logic.
- `doctorCard.js` for rendering doctor information cards.
* Use `type="module"` and `defer` for modern and non-blocking loading.
HINT:
`<script type="module" src="../../static/js/adminDashboard.js" defer></script>`
`<script type="module" src="../../static/js/doctorDashboard.js" defer></script>`
20. Close the Body and HTML Tags
* Finish the structure by properly closing all tags.
-->
</html>

142
SmartClinicManagementSystem/app/src/main/resources/templates/doctor/doctorDashboard.html
View File

@@ -1,101 +1,45 @@
<!-- doctorDashboard.html --> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Doctor Dashboard</title>
<link rel="stylesheet" th:href="@{/assets/css/adminDashboard.css}">
<link rel="stylesheet" th:href="@{/assets/css/doctorDashboard.css}">
<link rel="stylesheet" th:href="@{/assets/css/style.css}">
<script th:src="@{/js/render.js}" defer></script>
<script th:src="@{/js/util.js}" defer></script>
<script th:src="@{/js/components/header.js}" defer></script>
<script th:src="@{/js/components/footer.js}" defer></script>
<script th:src="@{/js/components/patientRows.js}" defer></script>
<script th:src="@{/js/components/patientServices.js}" defer></script>
<script th:src="@{/js/components/doctorDashboard.js}" defer></script>
<link rel="icon" type="image/png" th:href="@{/assets/images/logo/logo.png}" />
</head>
<!-- <body onload="renderContent()">
Step-by-Step Explanation of `doctorDashboard.html` <div class="container">
This file defines the Doctor Dashboard interface, allowing doctors to view and manage their patient appointments, search records, and access patient prescriptions. <div class="wrapper">
<div id="header"></div>
<div class="main-content">
<input type="text" id="searchBar" class="searchBar" placeholder="Search Bar for custom output" />
<button id="todayButton">Today</button>
<input type="date" id="datePicker" />
<table id="patientTable">
<thead>
<tr>
<th>Patient ID</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Prescription</th>
</tr>
</thead>
<tbody id="patientTableBody"></tbody>
</table>
</div>
<div id="footer"></div>
</div>
</div>
</body>
1. Label the File </html>
* Add a comment at the top to identify the file as `doctorDashboard.html`.
2. Declare the Document Type
* Use `<!DOCTYPE html>` to define the document as an HTML5 file for consistent behavior across modern browsers.
3. Begin the HTML Document with Thymeleaf Namespace
* The `<html>` tag includes `xmlns:th="http://www.thymeleaf.org"` to enable Thymeleaf-specific attributes used in Spring Boot applications.
4. Head Section – Metadata and Assets
* Start the `<head>` section to include essential meta information, styles, and scripts.
5. Set Character Encoding
* Use `<meta charset="UTF-8">` to support all text characters and prevent encoding issues.
6. Set the Favicon
* Add a favicon using Thymeleaf pathing:
`<link rel="icon" type="image/png" th:href="@{/assets/images/logo/logo.png}" />`
7. Set the Page Title
* Title the page `"Doctor Dashboard"` to show it in the browser tab.
8. Link CSS Stylesheets
* Include necessary CSS files:
- `adminDashboard.css` (for shared layout styles with admin interface)
- `doctorDashboard.css` (for doctor-specific styles)
- `style.css` (for general UI components)
9. Link JavaScript Files (with `defer`)
* Load scripts using Thymeleaf's `th:src` and `defer` attribute to prevent blocking rendering:
- `render.js` – Handles common rendering logic.
- `util.js` – Provides utility functions.
- `header.js` and `footer.js` – Dynamically inject header/footer.
- `doctorDashboard.js` – Contains dashboard logic for doctor functionality, loaded as a module.
10. Close the Head and Begin the Body
* Begin the visible part of the webpage using `<body onload="renderContent()">`, which calls a JavaScript function after loading.
11. Create the Main Container
* Use `<div class="container">` to wrap all content and structure the page.
12. Add a Wrapper for Page Content
* Nest elements inside a `wrapper` div for structured layout control.
13. Insert a Header Placeholder
* Add `<div id="header"></div>` where the dynamic header will be injected.
14. Define the Main Content Area
* Use `<div class="main-content">` for the central section of the dashboard.
15. Add a Search Bar
* Include an input field with `id="searchBar"` for doctors to search patients or data:
```html
<input type="text" id="searchBar" class="searchBar" placeholder="Search Bar for custom output" />
```
16. Add Filter Controls
* Include a filter section:
- A button (`#todayButton`) to view today's appointments.
- A date picker (`#datePicker`) to select specific dates.
17. Add a Patient Table
* Display a table to list patient data:
- Headers: Patient ID, Name, Phone No., Email, and Prescription.
- Body: `<tbody id="patientTableBody"></tbody>` for dynamic content insertion.
18. Insert a Footer Placeholder
* Use `<div id="footer"></div>` to load a common footer via JavaScript.
19. Close the Wrapper and Container
* Close `wrapper` and `container` divs to maintain structural integrity.
20. End the Body and HTML
* Properly close the `<body>` and `<html>` tags to complete the document.
-->