Person View Developer Documentation

• Person Viewer Developer Documentation
  • Overview
  • HTML Structure
  • JavaScript Functionality
  • Summary

Person Viewer Developer Documentation

Overview

This page displays a list of people loaded from a database. It uses:

• Thymeleaf for dynamic HTML generation.
• Bootstrap for styling.
• DataTables for table features like sorting, searching, and pagination.
• JavaScript for checking and updating profile picture links.

HTML Structure

1. Thymeleaf Fragment Defines the body content and removes the outer tag when rendering.

1. Main Container and Header Sets up the page title inside a styled Bootstrap container.

1. Person Viewer Section Creates another styled section to hold the main table.

1. Person Data Table Table Headers Sets up the table columns.

Table Rows Each row displays a person’s data dynamically using Thymeleaf.

JavaScript Functionality

1. DataTables Setup Enables sorting, searching, and pagination on the table.

1. Image Existence Check A helper function to check if a GitHub profile image exists.

1. Update Profile Picture Link Updates or removes the link to a profile picture depending on if it exists.

1. On Page Load After the page loads, it updates all profile picture links.

Summary

• The page lists people’s details like ID, UID, Name, Email, Balance, and more.
• DataTables provides sorting, searching, and pagination.
• JavaScript checks and updates GitHub profile pictures automatically.
• Update and Delete buttons allow managing each person’s information.