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

Add proper category icons for all 10 types, remove stale CSS

Browse Source
This commit is contained in:
Shawn
2026-05-22 18:02:41 -04:00
parent 7394d44caf
commit dec6a90409
3 changed files with 16 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets.db.backup-pre-migration
BIN
View File
Binary file not shown.
assets.db.pre-import
BIN
View File
Binary file not shown.
static/index.html
+16 -26
View File
@@ -714,16 +714,6 @@
.import-results .ir-err { color: var(--red); } .import-results .ir-err { color: var(--red); }
.import-results .ir-warn { color: var(--amber); } .import-results .ir-warn { color: var(--amber); }
/* ═══════════════════════════════════════════════════════════════════════
CATEGORY ICON COLORS (v2)
═══════════════════════════════════════════════════════════════════════ */
.asset-item .ai-icon.cat-Coffee { background: #2e1a0a; }
.asset-item .ai-icon.cat-Cold-Beverage { background: #0a1a2e; }
.asset-item .ai-icon.cat-Snacks { background: #2a2010; }
.asset-item .ai-icon.cat-Cold-Food { background: #1a2e1a; }
.asset-item .ai-icon.cat-Market { background: #2e1a2e; }
.asset-item .ai-icon.cat-Smart-Cooler { background: #1a2e2e; }
/* ═══════════════════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════════════════
MAP STYLES MAP STYLES
═══════════════════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════════════════ */
@@ -2999,19 +2989,17 @@
// ── Category config ─────────────────────────────────────────────────── // ── Category config ───────────────────────────────────────────────────
const CATEGORY_MAP = { const CATEGORY_MAP = {
'Coffee': { icon: '☕', color: '#2e1a0a' }, 'Bev': { icon: '🥤', color: '#0a7ab5' },
'Cold Beverage': { icon: '🥤', color: '#0a1a2e' }, 'Snack': { icon: '🍿', color: '#c97d0e' },
'Snacks': { icon: '🍿', color: '#2a2010' }, 'Gf bev': { icon: '🧃', color: '#0a9e5a' },
'Cold Food': { icon: '🥪', color: '#1a2e1a' }, 'Gf food': { icon: '🥪', color: '#8a5c2a' },
'Market': { icon: '🏪', color: '#2e1a2e' }, 'Other': { icon: '📦', color: '#6b7280' },
'Smart Cooler': { icon: '🧊', color: '#1a2e2e' }, 'Snack/bev': { icon: '🍱', color: '#9b59b6' },
'Snack/food': { icon: '🍱', color: '#9b59b6' },
'Food': { icon: '🍔', color: '#d35400' },
'Equipment': { icon: '🔧', color: '#2c3e50' },
'Furniture': { icon: '🪑', color: '#8e44ad' },
}; };
function catIcon(cat) {
const entry = CATEGORY_MAP[cat];
if (entry) return entry.icon;
if (cat) return cat.charAt(0).toUpperCase();
return '📦';
}
const PARK_ICONS = {'magic-kingdom':'🏰','epcot':'🌍','hollywood-studios':'🎬','animal-kingdom':'🌿','disney-springs':'🛍️','resort':'🏨','office':'🏢','other':'📍'}; const PARK_ICONS = {'magic-kingdom':'🏰','epcot':'🌍','hollywood-studios':'🎬','animal-kingdom':'🌿','disney-springs':'🛍️','resort':'🏨','office':'🏢','other':'📍'};
const PARK_NAMES = {'magic-kingdom':'Magic Kingdom','epcot':'Epcot','hollywood-studios':'Hollywood Studios','animal-kingdom':'Animal Kingdom','disney-springs':'Disney Springs','resort':'Resort','office':'Office','other':'Other'}; const PARK_NAMES = {'magic-kingdom':'Magic Kingdom','epcot':'Epcot','hollywood-studios':'Hollywood Studios','animal-kingdom':'Animal Kingdom','disney-springs':'Disney Springs','resort':'Resort','office':'Office','other':'Other'};
@@ -3086,11 +3074,12 @@
return; return;
} }
el.innerHTML = assets.map(a => { el.innerHTML = assets.map(a => {
const icon = catIcon(a.category); const catEntry = CATEGORY_MAP[a.category];
const catClass = a.category ? 'cat-' + a.category.replace(/[^a-zA-Z0-9]/g, '-') : ''; const icon = catEntry ? catEntry.icon : (a.category ? a.category.charAt(0).toUpperCase() : '📦');
const catColor = catEntry ? catEntry.color : '#1a1b26';
return ` return `
<div class="asset-item" onclick="viewAsset(${a.id})"> <div class="asset-item" onclick="viewAsset(${a.id})">
<div class="ai-icon ${catClass}">${icon}</div> <div class="ai-icon" style="background:${catColor}22;color:${catColor}">${icon}</div>
<div class="ai-info"> <div class="ai-info">
<div class="ai-name">${esc(a.name)}</div> <div class="ai-name">${esc(a.name)}</div>
<div class="ai-meta"> <div class="ai-meta">
@@ -3861,7 +3850,8 @@
const assets = await api('/api/assets?limit=1000'); const assets = await api('/api/assets?limit=1000');
assets.forEach(function(a) { assets.forEach(function(a) {
if (a.latitude != null && a.longitude != null) { if (a.latitude != null && a.longitude != null) {
var icon = catIcon(a.category); var catEntry = CATEGORY_MAP[a.category];
var icon = catEntry ? catEntry.icon : (a.category ? a.category.charAt(0).toUpperCase() : '📦');
var popupHtml = '<b>' + esc(a.name) + '</b><br>' + esc(a.machine_id || '') + var popupHtml = '<b>' + esc(a.name) + '</b><br>' + esc(a.machine_id || '') +
'<br><button class="btn btn-outline btn-sm" style="margin-top:6px;" ' + '<br><button class="btn btn-outline btn-sm" style="margin-top:6px;" ' +
'onclick="switchTab(\'tabAssets\');viewAsset(' + a.id + ');">View Details</button>'; 'onclick="switchTab(\'tabAssets\');viewAsset(' + a.id + ');">View Details</button>';