Make sure visits keep their collapsible sections open/closed state when the side panel is refreshed.

This commit is contained in:
Eugene Burmakin 2025-11-08 19:35:44 +01:00
parent 486974b993
commit 18de91e562

View file

@ -381,7 +381,7 @@ export class VisitsManager {
// Create the whole panel with collapsible content // Create the whole panel with collapsible content
return ` return `
<details class="collapse collapse-arrow bg-base-100 rounded-lg mb-4 shadow-sm"> <details id="data-section-collapse" class="collapse collapse-arrow bg-base-100 rounded-lg mb-4 shadow-sm">
<summary class="collapse-title text-lg font-bold"> <summary class="collapse-title text-lg font-bold">
Data in Selected Area Data in Selected Area
</summary> </summary>
@ -659,8 +659,8 @@ export class VisitsManager {
drawer.style.overflowY = 'auto'; drawer.style.overflowY = 'auto';
drawer.innerHTML = ` drawer.innerHTML = `
<div class="p-2 my-2 drawer flex flex-col items-center"> <div class="p-3 my-2 drawer flex flex-col items-center">
<h2 class="text-xl font-bold mb-4 text-accent-content w-full">Recent Visits</h2> <h2 class="text-xl font-bold mb-4 text-accent-content w-full text-center">Recent Visits</h2>
<div id="visits-list" class="space-y-2 w-full"> <div id="visits-list" class="space-y-2 w-full">
<p class="text-gray-500">Loading visits...</p> <p class="text-gray-500">Loading visits...</p>
</div> </div>
@ -831,6 +831,10 @@ export class VisitsManager {
return; return;
} }
// Save the current state of collapsible sections before updating
const dataSectionOpen = document.querySelector('#data-section-collapse')?.open || false;
const visitsSectionOpen = document.querySelector('#visits-section-collapse')?.open || false;
// Update the drawer title if selection is active // Update the drawer title if selection is active
if (this.isSelectionActive && this.selectionRect) { if (this.isSelectionActive && this.selectionRect) {
const visitsCount = visits ? visits.filter(visit => visit.status !== 'declined').length : 0; const visitsCount = visits ? visits.filter(visit => visit.status !== 'declined').length : 0;
@ -924,7 +928,7 @@ export class VisitsManager {
// Wrap visits in a collapsible section // Wrap visits in a collapsible section
const visitsSection = visits && visits.length > 0 ? ` const visitsSection = visits && visits.length > 0 ? `
<details class="collapse collapse-arrow bg-base-100 rounded-lg mb-4 shadow-sm"> <details id="visits-section-collapse" class="collapse collapse-arrow bg-base-100 rounded-lg mb-4 shadow-sm">
<summary class="collapse-title text-lg font-bold"> <summary class="collapse-title text-lg font-bold">
Visits (${visits.filter(v => v.status !== 'declined').length}) Visits (${visits.filter(v => v.status !== 'declined').length})
</summary> </summary>
@ -937,6 +941,17 @@ export class VisitsManager {
// Combine date summary and visits HTML // Combine date summary and visits HTML
container.innerHTML = dateGroupsHtml + visitsSection; container.innerHTML = dateGroupsHtml + visitsSection;
// Restore the state of collapsible sections
const dataSection = document.querySelector('#data-section-collapse');
const visitsSection2 = document.querySelector('#visits-section-collapse');
if (dataSection && dataSectionOpen) {
dataSection.open = true;
}
if (visitsSection2 && visitsSectionOpen) {
visitsSection2.open = true;
}
// Add the circles layer to the map // Add the circles layer to the map
this.visitCircles.addTo(this.map); this.visitCircles.addTo(this.map);