https://www.txdelta.org/java/churches.js

1/** @format */
2
3/**
4 * ============================================================================
5 * @fileoverview Churches page module.
6 * Manages the churches listing page with DataTable, including:
7 * - page title and descriptive text
8 * - interactive DataTable with church listings
9 * - church name, town, and GPS coordinates
10 * - navigation to individual church detail pages
11 *
12 * Data source:
13 * - `assets/ajax/ajax_Churches.php`
14 *
15 * Dependencies:
16 * - jQuery
17 * - DataTables library
18 * - Global helpers/config: `CONFIG`, `window.SERVER_PATH`,
19 *   `loadPageText`, `showDropdownMenu`, `padZero`, `buildSlug`
20 *
21 * @module churches
22 */
23'use strict';
24
25/**
26 * ============================================================================
27 * Configuration values
28 */
29const CHURCHES_CONFIG = {
30	fadeInDuration: CONFIG.web_site.fade_in_duration || 2000,
31	ajaxUrl: 'assets/ajax/ajax_Churches.php',
32	pageLength: 10,
33	columnIndex: {
34		name: 0,
35		town: 1,
36		latitude: 2,
37		longitude: 3,
38		id: 4,
39	},
40};
41
42/**
43 * ============================================================================
44 * State variables
45 */
46let oTable;
47
48/**
49 * ============================================================================
50 * Initialize the churches page on document ready
51 */
52$(document).ready(function () {
53	initializePage();
54});
55
56/**
57 * ============================================================================
58 * Complete page initialization after all resources load
59 */
60$(window).on('load', function () {
61	finalizePageLoad();
62});
63
64/**
65 * ============================================================================
66 * Main page initialization function
67 * Sets up the page layout, menus, and data table
68 */
69function initializePage() {
70	loadPageContent();
71	initializeDataTable();
72}
73
74/**
75 * ============================================================================
76 * Finalize page load after all resources are ready
77 * Shows main content and dropdown menu
78 */
79function finalizePageLoad() {
80	$('main').fadeIn(CHURCHES_CONFIG.fadeInDuration);
81	showDropdownMenu();
82}
83
84/**
85 * ============================================================================
86 * Load page-specific text content
87 */
88function loadPageContent() {
89	loadPageText('Churches');
90}
91
92/**
93 * ============================================================================
94 * Initialize the DataTable with church data
95 */
96function initializeDataTable() {
97	oTable = $('#mainTable').DataTable({
98		ajax: CHURCHES_CONFIG.ajaxUrl,
99		columns: getTableColumns(),
100		pageLength: CHURCHES_CONFIG.pageLength,
101	});
102
103	// Attach event handlers after table initialization
104	attachTableEventHandlers();
105}
106
107/**
108 * ============================================================================
109 * Define DataTable column configuration
110 * @returns {Array} Column configuration array
111 */
112function getTableColumns() {
113	return [
114		{
115			data: 'chu_Name',
116			className: 'udatal',
117			orderable: true,
118			visible: true,
119		},
120		{
121			data: 'twn_Name',
122			className: 'udatal',
123			orderable: true,
124			visible: true,
125		},
126		{
127			data: 'chu_Lat',
128			className: 'udatar',
129			orderable: false,
130			visible: true,
131		},
132		{
133			data: 'chu_Lon',
134			className: 'udatar',
135			orderable: false,
136			visible: true,
137		},
138		{
139			data: 'chu_Id',
140			className: 'udatar',
141			orderable: false,
142			visible: false,
143		},
144	];
145}
146
147/**
148 * ============================================================================
149 * Attach event handlers to the table
150 */
151function attachTableEventHandlers() {
152	$('#mainTable').on('click', 'tbody tr', handleRowClick);
153}
154
155/**
156 * ============================================================================
157 * Handle table row click event
158 * Navigates to the individual church detail page
159 */
160function handleRowClick() {
161	const rowData = getRowData(this);
162	const churchURL = buildChurchURL(rowData.id, rowData.name);
163	navigateToChurch(churchURL);
164}
165
166/**
167 * ============================================================================
168 * Extract data from the clicked row
169 * @param {HTMLElement} row - The clicked table row
170 * @returns {Object} Object containing id and name
171 */
172function getRowData(row) {
173	const thisRow = oTable.row(row);

174	return {
175		id: thisRow.cell(row, CHURCHES_CONFIG.columnIndex.id).data(),
176		name: thisRow.cell(row, CHURCHES_CONFIG.columnIndex.name).data(),
177	};
178}
179
180/**
181 * ============================================================================
182 * Build the URL for a church detail page
183 * @param {number} id - Church ID
184 * @param {string} name - Church name
185 * @returns {string} Complete URL to church page
186 */
187function buildChurchURL(id, name) {
188	//	return `${window.SERVER_PATH}church/${padZero("chu", id)}/${buildSlug(name)}`;
189	return `church/${padZero('chu', id)}/${buildSlug(name)}`;
190}
191
192/**
193 * ============================================================================
194 * Navigate to the church detail page
195 * @param {string} url - URL to navigate to
196 */
197function navigateToChurch(url) {
198	window.open(url, '_self');
199}