110 lines
3.3 KiB
HTML
110 lines
3.3 KiB
HTML
<!-- adminDashboard.html -->
|
||
|
||
<!--
|
||
Step-by-Step Explanation of `adminDashboard.html`
|
||
This file creates the Admin Dashboard interface for managing doctor-related data
|
||
with search, filter, and modal functionality.
|
||
|
||
|
||
1. Declare the Document Type
|
||
|
||
* Use `<!DOCTYPE html>` to ensure HTML5 standards for consistent rendering across browsers.
|
||
|
||
2. Begin the HTML Document with Thymeleaf Namespace
|
||
|
||
* Add the `<html>` tag with `xmlns:th="http://www.thymeleaf.org"` to allow Thymeleaf-specific attributes in Spring-based apps.
|
||
|
||
3. Head Section – Metadata and Resources
|
||
|
||
* Open the `<head>` section for meta info and links to assets and scripts.
|
||
|
||
4. Set Character Encoding
|
||
|
||
* Use UTF-8 to support all characters and prevent encoding issues.
|
||
|
||
5. Set the Favicon
|
||
|
||
* 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 (`×`)
|
||
- 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.
|
||
|
||
-->
|
||
|