|
@@ -154,11 +154,17 @@ const Browser = (() => {
|
|
|
for (const track of tracks) {
|
|
for (const track of tracks) {
|
|
|
const dist = track.totalDistance ? formatDistance(track.totalDistance) : '';
|
|
const dist = track.totalDistance ? formatDistance(track.totalDistance) : '';
|
|
|
const isSel = selectedTrackIds.has(track.id);
|
|
const isSel = selectedTrackIds.has(track.id);
|
|
|
- const typeEmoji = TRACK_TYPE_EMOJI[track.trackType] || '🗺️';
|
|
|
|
|
|
|
+ const typeEmoji = TRACK_TYPE_EMOJI[track.trackType];
|
|
|
|
|
+ const typeTitle = track.trackType
|
|
|
|
|
+ ? track.trackType.charAt(0).toUpperCase() + track.trackType.slice(1)
|
|
|
|
|
+ : '';
|
|
|
|
|
+ const emojiPrefix = typeEmoji
|
|
|
|
|
+ ? `<span class="type-emoji" title="${escAttr(typeTitle)}">${typeEmoji}</span> `
|
|
|
|
|
+ : '';
|
|
|
html += `<div class="tree-item track-item${isSel ? ' multi-selected' : ''}" data-id="${track.id}" draggable="true"
|
|
html += `<div class="tree-item track-item${isSel ? ' multi-selected' : ''}" data-id="${track.id}" draggable="true"
|
|
|
data-name="${escAttr(track.name)}" style="padding-left:${28 + baseIndent}px">
|
|
data-name="${escAttr(track.name)}" style="padding-left:${28 + baseIndent}px">
|
|
|
- <span class="item-icon" title="${escAttr(track.trackType || '')}">${typeEmoji}</span>
|
|
|
|
|
- <span class="item-name">${escHtml(track.name)}</span>
|
|
|
|
|
|
|
+ <span class="item-icon">🗺️</span>
|
|
|
|
|
+ <span class="item-name">${emojiPrefix}${escHtml(track.name)}</span>
|
|
|
<span class="item-meta">${dist}</span>
|
|
<span class="item-meta">${dist}</span>
|
|
|
<span class="item-date">${formatDate(track.trackDate || track.uploadDate)}</span>
|
|
<span class="item-date">${formatDate(track.trackDate || track.uploadDate)}</span>
|
|
|
<span class="item-actions">
|
|
<span class="item-actions">
|
|
@@ -511,17 +517,19 @@ const Browser = (() => {
|
|
|
|
|
|
|
|
function showTrackInfo(meta) {
|
|
function showTrackInfo(meta) {
|
|
|
if (!meta) return;
|
|
if (!meta) return;
|
|
|
- const typeEmoji = TRACK_TYPE_EMOJI[meta.trackType] || null;
|
|
|
|
|
- const typeLabel = meta.trackType
|
|
|
|
|
- ? `${typeEmoji ? typeEmoji + ' ' : ''}${meta.trackType.charAt(0).toUpperCase() + meta.trackType.slice(1)}`
|
|
|
|
|
- : null;
|
|
|
|
|
|
|
+ const typeEmoji = TRACK_TYPE_EMOJI[meta.trackType];
|
|
|
|
|
+ const typeTitle = meta.trackType
|
|
|
|
|
+ ? meta.trackType.charAt(0).toUpperCase() + meta.trackType.slice(1)
|
|
|
|
|
+ : '';
|
|
|
|
|
+ const emojiPrefix = typeEmoji
|
|
|
|
|
+ ? `<span class="type-emoji" title="${escAttr(typeTitle)}" style="margin-right:4px">${typeEmoji}</span>`
|
|
|
|
|
+ : '';
|
|
|
const panel = document.getElementById('track-info-panel');
|
|
const panel = document.getElementById('track-info-panel');
|
|
|
document.getElementById('track-info-content').innerHTML = `
|
|
document.getElementById('track-info-content').innerHTML = `
|
|
|
- <h3>${escHtml(meta.name || 'Track')}</h3>
|
|
|
|
|
|
|
+ <h3>${emojiPrefix}${escHtml(meta.name || 'Track')}</h3>
|
|
|
<div class="info-row"><label>Distance</label><span>${formatDistance(meta.totalDistance)}</span></div>
|
|
<div class="info-row"><label>Distance</label><span>${formatDistance(meta.totalDistance)}</span></div>
|
|
|
<div class="info-row"><label>Points</label><span>${meta.pointCount || 0}</span></div>
|
|
<div class="info-row"><label>Points</label><span>${meta.pointCount || 0}</span></div>
|
|
|
${meta.trackDate ? `<div class="info-row"><label>Date</label><span>${formatDate(meta.trackDate)}</span></div>` : ''}
|
|
${meta.trackDate ? `<div class="info-row"><label>Date</label><span>${formatDate(meta.trackDate)}</span></div>` : ''}
|
|
|
- ${typeLabel ? `<div class="info-row"><label>Type</label><span>${escHtml(typeLabel)}</span></div>` : ''}
|
|
|
|
|
`;
|
|
`;
|
|
|
panel.style.display = 'block';
|
|
panel.style.display = 'block';
|
|
|
document.getElementById('track-info-close').onclick = () => { panel.style.display = 'none'; };
|
|
document.getElementById('track-info-close').onclick = () => { panel.style.display = 'none'; };
|