shawn/canteen-asset-tracker
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: SVG icons for map toolbar chips — flame/crosshair/outline, 13px, with label spans

Browse Source
This commit is contained in:
Shawn
2026-05-23 00:34:54 -04:00
parent 384a0b842b
commit 1bb03eb964
1 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+22 -8
View File
@@ -787,15 +787,18 @@
border-radius: var(--radius);
/* Map controls bar */
.map-controls {
display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; align-items: center;
}
.map-chip {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 600; padding: 6px 12px;
border-radius: 20px; border: 1px solid var(--border);
background: var(--card2); color: var(--text2); cursor: pointer;
transition: all 0.15s;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.map-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.map-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.map-chip.heat-on { background: var(--amber); border-color: var(--amber); color: #000; }
.map-chip.park-on { background: var(--accent); border-color: var(--accent); color: #fff; }
@@ -1336,9 +1339,18 @@
═══════════════════════════════════════════════════════════════════════ -->
<div id="tabMap" class="tab-panel">
<div class="map-controls">
<span class="map-chip" id="chipHeat" onclick="toggleHeatmap()">🔥 Heatmap</span>
<span class="map-chip park-on" id="chipParkOutlines" onclick="toggleParkOutlines()">🏰 Parks ON</span>
<span class="map-chip" id="chipGeoGPS" onclick="if(navigator.geolocation)navigator.geolocation.getCurrentPosition(p=>{map.setView([p.coords.latitude,p.coords.longitude],15)})">◎ My GPS</span>
<span class="map-chip" id="chipHeat" onclick="toggleHeatmap()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c-1.5 2.5-3 5-3 8a3 3 0 0 0 6 0c0-3-1.5-5.5-3-8z"/><path d="M12 14c-1.5 2.5-3 5-3 8a3 3 0 0 0 6 0c0-3-1.5-5.5-3-8z" opacity=".3"/></svg>
<span class="chip-label">Heatmap</span>
</span>
<span class="map-chip park-on" id="chipParkOutlines" onclick="toggleParkOutlines()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><rect x="8" y="8" width="8" height="8" rx="1.5" stroke-dasharray="3 2"/></svg>
<span class="chip-label">Parks ON</span>
</span>
<span class="map-chip" id="chipGeoGPS" onclick="if(navigator.geolocation)navigator.geolocation.getCurrentPosition(p=>{map.setView([p.coords.latitude,p.coords.longitude],15)})">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="7"/><line x1="12" y1="17" x2="12" y2="22"/><line x1="2" y1="12" x2="7" y2="12"/><line x1="17" y1="12" x2="22" y2="12"/></svg>
<span class="chip-label">My Location</span>
</span>
</div>
<div id="mapContainer"></div>
<!-- Auto-visit status indicator -->
@@ -3378,13 +3390,14 @@
function toggleParkOutlines() {
parkOutlinesVisible = !parkOutlinesVisible;
const chip = document.getElementById('chipParkOutlines');
const label = chip.querySelector('.chip-label');
if (parkOutlinesVisible) {
chip.classList.add('park-on');
chip.textContent = '🏰 Parks ON';
if (label) label.textContent = 'Parks ON';
drawParkOutlines();
} else {
chip.classList.remove('park-on');
chip.textContent = '🏰 Parks';
if (label) label.textContent = 'Parks';
if (parkOutlineGroup) map.removeLayer(parkOutlineGroup);
parkOutlineGroup = null;
}
@@ -4442,11 +4455,12 @@
async function toggleHeatmap() {
if (!map) return;
const chip = document.getElementById('chipHeat');
const label = chip.querySelector('.chip-label');
if (heatVisible) {
heatVisible = false;
chip.classList.remove('heat-on');
chip.textContent = '🔥 Heatmap';
if (label) label.textContent = 'Heatmap';
if (heatLayer) map.removeLayer(heatLayer);
heatLayer = null;
return;
@@ -4454,7 +4468,7 @@
heatVisible = true;
chip.classList.add('heat-on');
chip.textContent = '🔥 Heatmap ON';
if (label) label.textContent = 'Heatmap ON';
await loadHeatmapData();
}