Completed front end pages for Clinic Management System
This commit is contained in:
@@ -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>
|
||||
|
||||
<!--
|
||||
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.
|
||||
|
||||
-->
|
||||
<body onload="renderContent()">
|
||||
<div class="container">
|
||||
<div class="wrapper">
|
||||
<div id="header"></div>
|
||||
<main class="main-content">
|
||||
<input type="text" id="searchBar" placeholder="search by doctor name" />
|
||||
<select id="time">
|
||||
<option></option>
|
||||
</select>
|
||||
<select id="speciality">
|
||||
<option></option>
|
||||
</select>
|
||||
<div id="content"></div>
|
||||
</main>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="modal" class="modal">
|
||||
<span id="closeModal" class="close">×</span>
|
||||
<div id="modal-body"></div>
|
||||
</div>
|
||||
<script type="module" src="../js/services/adminDashboard.js" defer></script>
|
||||
<script type="module" src="../js/components/doctorCard.js" defer></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user