feat: Add minimize button to Lightning stats panel

Added minimize/maximize functionality to Lightning Activity panel:
- Click header or toggle button (▼/▶) to minimize/maximize
- State persists in localStorage (lightning-stats-minimized)
- Minimized state restores on page reload
- Consistent with WSPR and Gray Line plugins

All control panels now have minimize functionality:
- WSPR: Filter, Stats, Legend, Chart panels ✓
- Gray Line: Control panel ✓
- Lightning: Stats panel ✓ (NEW)
- Earthquakes: No control panels (markers only)
- Aurora: No control panels (overlay only)
- Weather Radar: No control panels (tile layer only)
pull/82/head
trancen 2 days ago
parent 6cdd0f18b8
commit 6afe508af3

@ -274,9 +274,11 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
div.innerHTML = ` div.innerHTML = `
<div style="background: rgba(0, 0, 0, 0.8); color: white; padding: 10px; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; min-width: 180px;"> <div style="background: rgba(0, 0, 0, 0.8); color: white; padding: 10px; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; min-width: 180px;">
<div style="font-weight: bold; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px;"> <div style="font-weight: bold; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; cursor: pointer;" class="lightning-stats-header">
<span> Lightning Activity</span> <span> Lightning Activity</span>
<span class="lightning-stats-toggle" style="font-size: 12px; cursor: pointer; user-select: none;"></span>
</div> </div>
<div class="lightning-stats-content">
<table style="width: 100%; font-size: 11px;"> <table style="width: 100%; font-size: 11px;">
<tr><td>Fresh (&lt;1 min):</td><td style="text-align: right; color: #FFD700;">${fresh}</td></tr> <tr><td>Fresh (&lt;1 min):</td><td style="text-align: right; color: #FFD700;">${fresh}</td></tr>
<tr><td>Recent (&lt;5 min):</td><td style="text-align: right; color: #FFA500;">${recent}</td></tr> <tr><td>Recent (&lt;5 min):</td><td style="text-align: right; color: #FFA500;">${recent}</td></tr>
@ -290,8 +292,27 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
Updates every 30s Updates every 30s
</div> </div>
</div> </div>
</div>
`; `;
// Add minimize/maximize functionality
const header = div.querySelector('.lightning-stats-header');
const content = div.querySelector('.lightning-stats-content');
const toggle = div.querySelector('.lightning-stats-toggle');
const minimized = localStorage.getItem('lightning-stats-minimized') === 'true';
if (minimized) {
content.style.display = 'none';
toggle.textContent = '▶';
}
header.addEventListener('click', () => {
const isMinimized = content.style.display === 'none';
content.style.display = isMinimized ? 'block' : 'none';
toggle.textContent = isMinimized ? '▼' : '▶';
localStorage.setItem('lightning-stats-minimized', !isMinimized);
});
// Prevent map interaction on control // Prevent map interaction on control
L.DomEvent.disableClickPropagation(div); L.DomEvent.disableClickPropagation(div);
L.DomEvent.disableScrollPropagation(div); L.DomEvent.disableScrollPropagation(div);

Loading…
Cancel
Save

Powered by TurnKey Linux.