signal-works/ice
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add map/table toggle view for current reports

Browse source 
✨ New Features:
- Toggle between map and table view for current reports
- Table view shows location, details, reported time, and time remaining
- Color-coded time remaining: urgent (red), warning (orange), normal (green)
- Responsive design with mobile-optimized table layout
- Real-time updates work in both map and table views
- Sorted by most recent reports first

🎨 UI Improvements:
- Professional toggle buttons with active state
- Clean table design with hover effects
- Accessibility-friendly with proper titles and tooltips
- Mobile-responsive layout adjustments

🚀 Better UX:
- Easy switching between visual map and detailed table
- Time remaining countdown helps prioritize urgent reports
- Searchable and scannable table format for quick review
- Maintains all existing functionality while adding new view
This commit is contained in:
Deco Vander 2025-07-03 01:07:17 -04:00
parent 3581ea219d
commit 5e56d59bbd
3 changed files with 334 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

46
public/index.html
View file

@ -45,12 +45,46 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
</div>
<div class="map-section">
<h2>Current Reports</h2>
<div id="map"></div>
<div class="map-info">
<p><strong>🔴 Red markers:</strong> ICE activity reported</p>
<p><strong>⏰ Auto-cleanup:</strong> Reports disappear after 24 hours</p>
<p id="location-count">Loading locations...</p>
<div class="reports-header">
<h2>Current Reports</h2>
<div class="view-toggle">
<button id="map-view-btn" class="toggle-btn active">📍 Map View</button>
<button id="table-view-btn" class="toggle-btn">📋 Table View</button>
</div>
</div>
<div id="map-view" class="view-container">
<div id="map"></div>
<div class="map-info">
<p><strong>🔴 Red markers:</strong> ICE activity reported</p>
<p><strong>⏰ Auto-cleanup:</strong> Reports disappear after 24 hours</p>
<p id="location-count">Loading locations...</p>
</div>
</div>
<div id="table-view" class="view-container" style="display: none;">
<div class="table-controls">
<div class="table-info">
<p id="table-location-count">Loading locations...</p>
</div>
</div>
<div class="table-container">
<table class="reports-table">
<thead>
<tr>
<th>Location</th>
<th>Details</th>
<th>Reported</th>
<th>Time Remaining</th>
</tr>
</thead>
<tbody id="reports-tbody">
<tr>
<td colspan="4" class="loading">Loading reports...</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>