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.
*/

137
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.
-->

100
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
Create and set the doctor’s name
Create and set the doctor's specialization
Create and set the doctor's email
Create and list available appointment times
Append all info elements to the doctor info container
Create a container for card action buttons
=== ADMIN ROLE ACTIONS ===
Create a delete button
Add click handler for delete button
Get the admin token from localStorage
Call API to delete the doctor
Show result and remove card if successful
Add delete button to actions container
=== PATIENT (NOT LOGGED-IN) ROLE ACTIONS === const name = document.createElement("h3");
Create a book now button name.textContent = doctor.name;
Alert patient to log in before booking
Add button to actions container
=== LOGGED-IN PATIENT ROLE ACTIONS === const specialization = document.createElement("h3");
Create a book now button specialization.textContent = doctor.specialization;
Handle booking logic for logged-in patient
Redirect if token not available
Fetch patient data with token
Show booking overlay UI with doctor and patient info
Add button to actions container
Append doctor info and action buttons to the car const email = document.createElement("h3");
Return the complete doctor card element email.textContent = doctor.email;
*/
const availability = document.createElement("h3");
availability.textContent = doctor.availability.join(", ");
infoDiv.appendChild(name);
infoDiv.appendChild(specialization);
infoDiv.appendChild(email);
infoDiv.appendChild(availability);
const actionsDiv = document.createElement("div");
actionsDiv.classList.add("card-actions");
if (role === "admin") {
const removeBtn = document.createElement("button");
removeBtn.textContent = "Delete";
removeBtn.addEventListener("click", async () => {
if (confirm("Arey you sure?") == true) {
const token = localStorage.getItem("TOKEN");
const result = await deleteDoctor(doctor.id, token);
if (result.success) {
card.remove();
}
}
});
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>`;
}
```
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
}

2
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

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.
-->