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

fix: revert chips to emoji, Snack pins use 🍿 fallback (img→emoji), bigger markers 28px

Browse Source
This commit is contained in:
Shawn
2026-05-23 00:37:10 -04:00
parent 1bb03eb964
commit 0be50e7957
1 changed files with 16 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+16 -28
View File
@@ -787,18 +787,15 @@
border-radius: var(--radius);
/* Map controls bar */
.map-controls {
display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; align-items: center;
display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
}
.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; }
@@ -1339,18 +1336,9 @@
═══════════════════════════════════════════════════════════════════════ -->
<div id="tabMap" class="tab-panel">
<div class="map-controls">
<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>
<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>
</div>
<div id="mapContainer"></div>
<!-- Auto-visit status indicator -->
@@ -3390,14 +3378,13 @@
function toggleParkOutlines() {
parkOutlinesVisible = !parkOutlinesVisible;
const chip = document.getElementById('chipParkOutlines');
const label = chip.querySelector('.chip-label');
if (parkOutlinesVisible) {
chip.classList.add('park-on');
if (label) label.textContent = 'Parks ON';
chip.textContent = '🏰 Parks ON';
drawParkOutlines();
} else {
chip.classList.remove('park-on');
if (label) label.textContent = 'Parks';
chip.textContent = '🏰 Parks';
if (parkOutlineGroup) map.removeLayer(parkOutlineGroup);
parkOutlineGroup = null;
}
@@ -4419,18 +4406,20 @@
if (a.latitude != null && a.longitude != null) {
var catEntry = CATEGORY_MAP[a.category];
var icon = catEntry ? catEntry.icon : (a.category ? a.category.charAt(0).toUpperCase() : '📦');
// Map pins can't render <img> tags, fall back to emoji
if (icon.indexOf('<img') !== -1) icon = '🍿';
var popupHtml = '<b>' + esc(a.name) + '</b><br>' + esc(a.machine_id || '') +
'<br><button class="btn btn-outline btn-sm" style="margin-top:6px;" ' +
'onclick="switchTab(\'tabAssets\');viewAsset(' + a.id + ');">View Details</button>';
var catColor = catEntry ? catEntry.color : '#6b7280';
var pinIcon = L.divIcon({
className: 'cat-pin-icon',
html: '<div style="width:22px;height:22px;border-radius:50%;background:' + catColor +
';display:flex;align-items:center;justify-content:center;font-size:12px;' +
'box-shadow:0 2px 4px rgba(0,0,0,0.5);border:2px solid #fff;">' + icon + '</div>',
iconSize: [26, 26],
iconAnchor: [13, 13],
popupAnchor: [0, -15],
html: '<div style="width:28px;height:28px;border-radius:50%;background:' + catColor +
';display:flex;align-items:center;justify-content:center;font-size:15px;' +
'box-shadow:0 2px 5px rgba(0,0,0,0.5);border:2px solid #fff;">' + icon + '</div>',
iconSize: [32, 32],
iconAnchor: [16, 16],
popupAnchor: [0, -18],
});
var marker = L.marker([a.latitude, a.longitude], { icon: pinIcon })
.addTo(map)
@@ -4455,12 +4444,11 @@
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');
if (label) label.textContent = 'Heatmap';
chip.textContent = '🔥 Heatmap';
if (heatLayer) map.removeLayer(heatLayer);
heatLayer = null;
return;
@@ -4468,7 +4456,7 @@
heatVisible = true;
chip.classList.add('heat-on');
if (label) label.textContent = 'Heatmap ON';
chip.textContent = '🔥 Heatmap ON';
await loadHeatmapData();
}