Get table display by date working on front page of mailstats panel

This commit is contained in:
Brian Read 2025-04-07 14:31:16 +01:00
parent a58191f667
commit 8d8c97d1fa
3 changed files with 105 additions and 23 deletions

View File

@ -1,6 +1,9 @@
/* /*
Generated by: SM2Gen version:0.9(20Jan2025) Chameleon version:4.5.4 On Python:3.12.3 at 2025-04-05 11:59:08 Generated by: SM2Gen version:0.9(20Jan2025) Chameleon version:4.5.4 On Python:3.12.3 at 2025-04-05 11:59:08
*/ */
object {
border: 1px,solid, darkgrey;
}
.Mailstats-panel {} .Mailstats-panel {}
.name {} .name {}
.rout {} .rout {}
@ -42,4 +45,4 @@ Generated by: SM2Gen version:0.9(20Jan2025) Chameleon version:4.5.4 On Python:3.
.subh4 {} .subh4 {}
.numb21 {} .numb21 {}
.numb22 {} .numb22 {}
.subm23 {} .subm23 {}

View File

@ -39,28 +39,107 @@ document.addEventListener('DOMContentLoaded', () => {
.addEventListener('click', updateTextInput); .addEventListener('click', updateTextInput);
}); });
// Initialize select with current object content /**
document.addEventListener('DOMContentLoaded', () => { * Date Select Manager
const objectElement = document.getElementById('mailstats_object'); *
const selectElement = document.getElementById('StatsDate_select'); * This script manages an HTML select element with dates and updates an HTML object
* based on the selected date. It sets the initial value to yesterday's date (or the latest date available),
// Extract current date from object's data URL * updates the object's data parameter, and refreshes the display.
const currentDate = objectElement.data.match(/mailstats_for_(\d{4}-\d{2}-\d{2})\.html/)?.[1]; */
if (currentDate) { // Wait for DOM to be fully loaded before executing
selectElement.value = currentDate; document.addEventListener('DOMContentLoaded', function() {
} // Initialize all date selects and their corresponding objects
initializeSelects();
}); });
// Update object content when selection changes function initializeSelects() {
document.getElementById('StatsDate_select').addEventListener('change', function() { // Find all select elements with IDs starting with "StatsDate_select"
const selectedDate = this.value; const selects = document.querySelectorAll('select[id^="StatsDate_select"]');
const objectElement = document.getElementById('mailstats_object');
// Update object's data source selects.forEach(function(dateSelect) {
objectElement.data = `mailstats_for_${selectedDate}.html`; const selectId = dateSelect.id;
// Find the corresponding object element
// If the select has a numeric suffix, look for object with same suffix
const objectId = selectId === 'StatsDate_select' ?
'mailstats_object' :
'mailstats_object' + selectId.replace('StatsDate_select', '');
const mailstatsObject = document.getElementById(objectId);
// Check if elements exist before proceeding
if (!dateSelect) {
console.error(`Select element with ID "${selectId}" not found.`);
return; // Skip this pair if select doesn't exist
}
if (!mailstatsObject) {
console.error(`Object element with ID "${objectId}" not found.`);
// Continue anyway, as we can still set the select to the right date
}
// Function to update the object's data parameter and refresh it
function updateMailstatsObject(date) {
if (date && mailstatsObject) {
try {
// Create the full URL including the selected date
const currentDomain = window.location.origin;
const fullUrl = `${currentDomain}/mailstats/mailstats_for_${date}.html`;
// Update the data attribute with the full URL
mailstatsObject.setAttribute('data', fullUrl);
// Force a refresh of the object
// [refresh code here]
console.log(`Updated object to show data from: ${fullUrl}`);
} catch (error) {
console.error(`Error updating object:`, error);
}
}
}
// Set the initial value of the select
const yesterdayDate = getYesterdayDate();
let dateFound = false;
// Find and select the option with yesterday's date
for (let i = 0; i < dateSelect.options.length; i++) {
if (dateSelect.options[i].value === yesterdayDate) {
dateSelect.selectedIndex = i;
dateFound = true;
break;
}
}
// If yesterday's date is not found, select the latest date (last option)
if (!dateFound && dateSelect.options.length > 0) {
dateSelect.selectedIndex = dateSelect.options.length - 1;
console.log(`Yesterday's date (${yesterdayDate}) not found in options for ${selectId}. Selected the latest date instead: ${dateSelect.value}`);
}
// Update the object with the initial date
if (dateSelect.value) {
updateMailstatsObject(dateSelect.value);
}
// Add event listener for changes to the select element
dateSelect.addEventListener('change', function() {
const selectedDate = this.value;
updateMailstatsObject(selectedDate);
});
});
}
// Function to get yesterday's date in YYYY-MM-DD format
function getYesterdayDate() {
const today = new Date();
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
// Force refresh using clone method (cross-browser workaround) const year = yesterday.getFullYear();
const clone = objectElement.cloneNode(true); const month = String(yesterday.getMonth() + 1).padStart(2, '0');
objectElement.replaceWith(clone); const day = String(yesterday.getDate()).padStart(2, '0');
});
return `${year}-${month}-${day}`;
}

View File

@ -44,7 +44,7 @@
%= select_field 'StatsDate' => @StatsDate_options, class => 'input', id => 'StatsDate_select' %= select_field 'StatsDate' => @StatsDate_options, class => 'input', id => 'StatsDate_select'
<br></span> </p> <br></span> </p>
<object id = 'mailstats_object' data="<%='mailstats/$c-&gt;stash(&quot;url&quot;)' %>" title="<%= $c->stash('title') %>" type="text/html" ><%= $c->stash('title') %> not found</object> <object id = 'mailstats_object' data="<%='' %>" title="<%= $c->stash('title') %>" type="text/html" height='600px' width='100%' ><%= $c->stash('title') %> not found</object>
%# Probably finally by a submit. %# Probably finally by a submit.