106 lines
4.1 KiB
JavaScript
106 lines
4.1 KiB
JavaScript
|
|
/**
|
|
* Waits for a specific event and returns a promise that resolves when the event is triggered.
|
|
*
|
|
* @param {EventTarget} target - The target object that triggers the event.
|
|
* @param {string} eventName - The name of the event to listen to.
|
|
* @returns {Promise<any>} - A promise resolved with event data.
|
|
*/
|
|
function waitForEvent(target, eventName) {
|
|
return new Promise(resolve => {
|
|
const handler = event => {
|
|
// Resolve the promise with event details
|
|
resolve(event.detail);
|
|
// Remove handler after resolution
|
|
target.removeEventListener(eventName, handler);
|
|
};
|
|
target.addEventListener(eventName, handler);
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* Adds a click event listener to a table for handling detail button actions.
|
|
* When a button is clicked, it retrieves the data-id attribute and redirects to a new page.
|
|
*
|
|
* @param {string} tableId - The ID of the table where the event should be attached (e.g., '#intersections-table').
|
|
* @param {string} buttonClass - The class of the button that triggers the action (e.g., '.detail-btn').
|
|
* @param {string} baseUrl - The base URL to which the feature ID will be appended (e.g., 'https://example.com/details/').
|
|
*/
|
|
function registerDetailAction(tableId, buttonClass, baseUrl) {
|
|
$(tableId).on('click', buttonClass, function () {
|
|
const explicitUrl = $(this).data('url');
|
|
if (explicitUrl) {
|
|
window.open(explicitUrl, "_self");
|
|
return;
|
|
}
|
|
|
|
const featureId = $(this).data('id'); // Retrieve the ID from the button's data attribute
|
|
|
|
if (featureId) {
|
|
window.open(baseUrl + featureId + "/", "_self"); // Open the detail page in the same tab
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* Highlights a row in the Bootstrap Table, navigates to its page, and centers it in the view.
|
|
*
|
|
* @param {string} tableId - The ID of the Bootstrap Table (e.g., '#intersections-table').
|
|
* @param {string} field - The column field to match (e.g., 'code' or 'id').
|
|
* @param {any} value - The value to search for in the column.
|
|
*/
|
|
function highlightRow(tableId, field, value, scroll=true) {
|
|
const $table = $(tableId);
|
|
const data = $table.bootstrapTable('getData');
|
|
|
|
// Find the row index in the full dataset
|
|
const rowIndex = data.findIndex(row => row[field] === value);
|
|
|
|
if (rowIndex === -1) {
|
|
console.warn(`Row with ${field}=${value} not found.`);
|
|
return;
|
|
}
|
|
|
|
// Get the page size and compute which page contains the row
|
|
const pageSize = $table.bootstrapTable('getOptions').pageSize || data.length;
|
|
const pageNumber = Math.floor(rowIndex / pageSize) + 1;
|
|
|
|
// Change the table to the correct page
|
|
$table.bootstrapTable('selectPage', pageNumber);
|
|
|
|
// Delay to ensure UI updates before applying the highlight
|
|
setTimeout(() => {
|
|
// Remove highlight from all previously highlighted cells
|
|
$table.find('tbody td').removeClass('rowhighlight');
|
|
|
|
// Get the row element using its index within the page
|
|
const $rowElement = $table.find(`tbody tr[data-index="${rowIndex}"]`);
|
|
|
|
if ($rowElement.length) {
|
|
// Apply the highlight class to all `<td>` cells in the row
|
|
$rowElement.find('td').addClass('rowhighlight');
|
|
|
|
// Scroll the row into view
|
|
if (scroll) {
|
|
$rowElement[0].scrollIntoView({ behavior: "smooth", block: "center" });
|
|
}
|
|
}
|
|
}, 300); // Delay to ensure the page has changed before searching for the row
|
|
}
|
|
|
|
|
|
/**
|
|
* Formats a date value into a localized string.
|
|
* Uses the page language (set by Django) to determine the locale,
|
|
* so fr/nl always render dd/mm/yyyy regardless of browser settings.
|
|
*/
|
|
function dateFormatter(value) {
|
|
if (!value) return '-'; // Return a dash if the value is empty
|
|
const date = new Date(value);
|
|
const lang = (document.documentElement.lang || 'fr').split('-')[0];
|
|
const localeMap = { 'fr': 'fr-BE', 'nl': 'nl-BE', 'en': 'en-GB' };
|
|
const locale = localeMap[lang] || 'fr-BE';
|
|
return date.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: 'numeric' });
|
|
}
|