fix: assets response shape, thumbnail lazy-load, bin sidebar wired up
This commit is contained in:
parent
7ef8476bd3
commit
b42199e597
1 changed files with 262 additions and 116 deletions
|
|
@ -40,12 +40,8 @@
|
|||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
|
|
@ -71,9 +67,7 @@
|
|||
height: 32px;
|
||||
}
|
||||
|
||||
.detail-close:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.detail-close:hover { color: var(--color-text-primary); }
|
||||
|
||||
.detail-body {
|
||||
padding: var(--spacing-lg);
|
||||
|
|
@ -81,9 +75,7 @@
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
.detail-section { margin-bottom: var(--spacing-lg); }
|
||||
|
||||
.detail-section-title {
|
||||
font-size: 0.85rem;
|
||||
|
|
@ -154,6 +146,7 @@
|
|||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-tag {
|
||||
|
|
@ -187,8 +180,54 @@
|
|||
transition: margin-right var(--transition-normal);
|
||||
}
|
||||
|
||||
.content-main.detail-open {
|
||||
margin-right: 400px;
|
||||
.content-main.detail-open { margin-right: 400px; }
|
||||
|
||||
/* Thumbnail inside asset card */
|
||||
.card-thumbnail {
|
||||
position: relative;
|
||||
aspect-ratio: 16/9;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
}
|
||||
|
||||
.card-thumbnail img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.card-thumbnail img.loading { opacity: 0.3; }
|
||||
.card-thumbnail img.loaded { opacity: 1; }
|
||||
|
||||
.card-thumbnail .thumb-placeholder {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
/* Status pulse for recording/processing */
|
||||
.card-status-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.card-status-dot.processing { background: #f59e0b; animation: pulse 1.5s infinite; }
|
||||
.card-status-dot.ingesting { background: #3b82f6; animation: pulse 1.5s infinite; }
|
||||
.card-status-dot.ready { background: #22c55e; }
|
||||
.card-status-dot.error { background: #ef4444; }
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -231,7 +270,7 @@
|
|||
<div class="assets-controls">
|
||||
<button class="btn btn-secondary" id="refreshBtn">↻ Refresh</button>
|
||||
<button class="btn btn-primary" onclick="navigateTo('upload')">↑ Upload</button>
|
||||
<button class="btn btn-primary" onclick="navigateTo('capture')">+ New Capture</button>
|
||||
<button class="btn btn-primary" onclick="navigateTo('capture')">⏺ New Capture</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -251,7 +290,9 @@
|
|||
<div class="empty-state" id="emptyState" style="display: none;">
|
||||
<div class="empty-state-icon">📁</div>
|
||||
<div class="empty-state-text">No assets found</div>
|
||||
<p style="color: var(--color-text-tertiary); font-size: 0.9rem;">Create a new capture to get started</p>
|
||||
<p style="color: var(--color-text-tertiary); font-size: 0.9rem;">
|
||||
Create a new capture or upload a file to get started
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -264,7 +305,7 @@
|
|||
<button class="detail-close" onclick="closeDetailPanel()">✕</button>
|
||||
</div>
|
||||
<div class="detail-body">
|
||||
<video class="video-player" id="videoPlayer" controls></video>
|
||||
<video class="video-player" id="videoPlayer" controls preload="metadata"></video>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="detail-section-title">File Information</div>
|
||||
|
|
@ -272,10 +313,6 @@
|
|||
<div class="detail-label">Filename</div>
|
||||
<div class="detail-value" id="detailFilename">—</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">Format</div>
|
||||
<div class="detail-value" id="detailFormat">—</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">Codec</div>
|
||||
<div class="detail-value" id="detailCodec">—</div>
|
||||
|
|
@ -339,11 +376,10 @@
|
|||
<script src="/js/api.js"></script>
|
||||
<script>
|
||||
// ============================================================
|
||||
// STATE MANAGEMENT
|
||||
// STATE
|
||||
// ============================================================
|
||||
|
||||
let state = {
|
||||
currentPage: 'assets',
|
||||
const state = {
|
||||
assets: [],
|
||||
projects: [],
|
||||
bins: [],
|
||||
|
|
@ -352,35 +388,46 @@
|
|||
selectedBin: null,
|
||||
searchQuery: '',
|
||||
filterStatus: null,
|
||||
// Cache of assetId -> thumbnail URL to avoid re-fetching
|
||||
thumbCache: {},
|
||||
};
|
||||
|
||||
// IntersectionObserver for lazy thumbnail loading
|
||||
const thumbObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
const assetId = img.dataset.assetId;
|
||||
if (assetId && !img.dataset.loaded) {
|
||||
loadThumbnail(img, assetId);
|
||||
}
|
||||
thumbObserver.unobserve(img);
|
||||
}
|
||||
});
|
||||
}, { rootMargin: '100px' });
|
||||
|
||||
// ============================================================
|
||||
// INITIALIZATION
|
||||
// INIT
|
||||
// ============================================================
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
setupEventListeners();
|
||||
await loadInitialData();
|
||||
updateStatusBar();
|
||||
});
|
||||
|
||||
function setupEventListeners() {
|
||||
// Navigation
|
||||
document.querySelectorAll('[data-page]').forEach(el => {
|
||||
el.addEventListener('click', (e) => navigateTo(e.target.dataset.page));
|
||||
});
|
||||
|
||||
// Search
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
searchInput.addEventListener('input', debounce((e) => {
|
||||
state.searchQuery = e.target.value.toLowerCase();
|
||||
renderAssets();
|
||||
}, 300));
|
||||
|
||||
// Refresh button
|
||||
document.getElementById('refreshBtn').addEventListener('click', loadInitialData);
|
||||
|
||||
// Close detail panel on overlay click
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeDetailPanel();
|
||||
});
|
||||
|
|
@ -388,27 +435,27 @@
|
|||
|
||||
async function loadInitialData() {
|
||||
try {
|
||||
updateStatusBar('Loading data...');
|
||||
updateStatusBar('Loading...');
|
||||
|
||||
// Load projects and assets in parallel
|
||||
const [projectsRes, assetsRes] = await Promise.all([
|
||||
getProjects(),
|
||||
getAssets(),
|
||||
getAssets({ limit: 100 }),
|
||||
]);
|
||||
|
||||
if (projectsRes.success) {
|
||||
state.projects = projectsRes.data;
|
||||
state.projects = projectsRes.data || [];
|
||||
renderProjects();
|
||||
}
|
||||
|
||||
if (assetsRes.success) {
|
||||
state.assets = assetsRes.data;
|
||||
// API returns { assets: [...], total: n }
|
||||
state.assets = assetsRes.data?.assets ?? assetsRes.data ?? [];
|
||||
renderAssets();
|
||||
}
|
||||
|
||||
updateStatusBar();
|
||||
} catch (error) {
|
||||
console.error('Failed to load data:', error);
|
||||
} catch (err) {
|
||||
console.error('Failed to load data:', err);
|
||||
updateStatusBar('Error loading data', true);
|
||||
}
|
||||
}
|
||||
|
|
@ -421,6 +468,11 @@
|
|||
const container = document.getElementById('projectsList');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (state.projects.length === 0) {
|
||||
container.innerHTML = '<div style="padding:8px;color:var(--color-text-tertiary);font-size:0.85rem;">No projects</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
state.projects.forEach(project => {
|
||||
const item = document.createElement('div');
|
||||
item.className = `sidebar-item ${state.selectedProject === project.id ? 'active' : ''}`;
|
||||
|
|
@ -434,28 +486,36 @@
|
|||
const grid = document.getElementById('assetsGrid');
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
|
||||
// Filter assets
|
||||
let filtered = state.assets;
|
||||
let filtered = [...state.assets];
|
||||
|
||||
if (state.searchQuery) {
|
||||
filtered = filtered.filter(asset => {
|
||||
const searchStr = `${asset.filename} ${asset.tags?.join(' ') || ''}`.toLowerCase();
|
||||
return searchStr.includes(state.searchQuery);
|
||||
const haystack = [
|
||||
asset.filename,
|
||||
asset.display_name,
|
||||
...(asset.tags || []),
|
||||
asset.notes || '',
|
||||
].join(' ').toLowerCase();
|
||||
return haystack.includes(state.searchQuery);
|
||||
});
|
||||
}
|
||||
|
||||
if (state.filterStatus) {
|
||||
filtered = filtered.filter(asset => asset.status === state.filterStatus);
|
||||
filtered = filtered.filter(a => a.status === state.filterStatus);
|
||||
}
|
||||
|
||||
if (state.selectedProject) {
|
||||
filtered = filtered.filter(asset => asset.project_id === state.selectedProject);
|
||||
filtered = filtered.filter(a => a.project_id === state.selectedProject);
|
||||
}
|
||||
|
||||
if (state.selectedBin) {
|
||||
filtered = filtered.filter(a => a.bin_id === state.selectedBin);
|
||||
}
|
||||
|
||||
// Show/hide empty state
|
||||
if (filtered.length === 0) {
|
||||
grid.innerHTML = '';
|
||||
emptyState.style.display = 'flex';
|
||||
document.getElementById('assetCountItem').style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -467,22 +527,35 @@
|
|||
grid.appendChild(card);
|
||||
});
|
||||
|
||||
// Update filter group
|
||||
renderFilterGroup();
|
||||
updateStatusBar();
|
||||
}
|
||||
|
||||
function createAssetCard(asset) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card';
|
||||
card.dataset.assetId = asset.id;
|
||||
|
||||
const durationStr = formatDuration(
|
||||
asset.duration_ms ? Math.round(asset.duration_ms / 1000) : 0
|
||||
);
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="card-thumbnail">
|
||||
<img src="${asset.thumbnail_url || '/placeholder.png'}" alt="${asset.filename}">
|
||||
<span class="thumb-placeholder">🎬</span>
|
||||
<img
|
||||
data-asset-id="${asset.id}"
|
||||
alt="${escapeHtml(asset.display_name || asset.filename)}"
|
||||
class="loading"
|
||||
style="position:absolute;inset:0;"
|
||||
>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-title">${asset.filename}</div>
|
||||
<div class="card-title">${escapeHtml(asset.display_name || asset.filename)}</div>
|
||||
<div class="card-meta">
|
||||
<div class="card-duration">${formatDuration(asset.duration || 0)}</div>
|
||||
<div class="card-duration">${durationStr}</div>
|
||||
<div class="card-status">
|
||||
<span class="card-status-dot ${asset.status}"></span>
|
||||
<span class="badge ${getStatusBadgeClass(asset.status)}">
|
||||
${getStatusLabel(asset.status)}
|
||||
</span>
|
||||
|
|
@ -490,32 +563,64 @@
|
|||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Observe the img element for lazy thumbnail loading
|
||||
const img = card.querySelector('img[data-asset-id]');
|
||||
if (asset.thumbnail_s3_key) {
|
||||
thumbObserver.observe(img);
|
||||
} else {
|
||||
// No thumbnail yet — hide the img entirely, show placeholder
|
||||
img.style.display = 'none';
|
||||
}
|
||||
|
||||
card.addEventListener('click', () => openAssetDetail(asset));
|
||||
return card;
|
||||
}
|
||||
|
||||
async function loadThumbnail(img, assetId) {
|
||||
// Use cached URL if available
|
||||
if (state.thumbCache[assetId]) {
|
||||
img.src = state.thumbCache[assetId];
|
||||
img.classList.remove('loading');
|
||||
img.classList.add('loaded');
|
||||
img.dataset.loaded = '1';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await api(`/assets/${assetId}/thumbnail`);
|
||||
if (result.success) {
|
||||
state.thumbCache[assetId] = result.data.url;
|
||||
img.src = result.data.url;
|
||||
img.onload = () => {
|
||||
img.classList.remove('loading');
|
||||
img.classList.add('loaded');
|
||||
};
|
||||
img.dataset.loaded = '1';
|
||||
}
|
||||
} catch (err) {
|
||||
// Silently ignore — placeholder stays
|
||||
}
|
||||
}
|
||||
|
||||
function renderFilterGroup() {
|
||||
const container = document.getElementById('filterGroup');
|
||||
container.innerHTML = '';
|
||||
|
||||
const statuses = ['ingesting', 'processing', 'ready', 'error', 'archived'];
|
||||
const counts = {};
|
||||
|
||||
state.assets.forEach(asset => {
|
||||
counts[asset.status] = (counts[asset.status] || 0) + 1;
|
||||
});
|
||||
|
||||
statuses.forEach(status => {
|
||||
if (counts[status] > 0) {
|
||||
const tag = document.createElement('div');
|
||||
tag.className = `filter-tag ${state.filterStatus === status ? 'active' : ''}`;
|
||||
tag.textContent = `${status.charAt(0).toUpperCase() + status.slice(1)} (${counts[status]})`;
|
||||
tag.addEventListener('click', () => {
|
||||
state.filterStatus = state.filterStatus === status ? null : status;
|
||||
renderAssets();
|
||||
});
|
||||
container.appendChild(tag);
|
||||
}
|
||||
Object.entries(counts).forEach(([status, count]) => {
|
||||
const tag = document.createElement('div');
|
||||
tag.className = `filter-tag ${state.filterStatus === status ? 'active' : ''}`;
|
||||
tag.textContent = `${getStatusLabel(status)} (${count})`;
|
||||
tag.addEventListener('click', () => {
|
||||
state.filterStatus = state.filterStatus === status ? null : status;
|
||||
renderAssets();
|
||||
});
|
||||
container.appendChild(tag);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -526,41 +631,46 @@
|
|||
async function openAssetDetail(asset) {
|
||||
state.selectedAsset = asset;
|
||||
const panel = document.getElementById('detailPanel');
|
||||
const main = document.getElementById('contentMain');
|
||||
const main = document.getElementById('contentMain');
|
||||
const video = document.getElementById('videoPlayer');
|
||||
|
||||
// Fetch full asset details
|
||||
const result = await getAsset(asset.id);
|
||||
if (result.success) {
|
||||
const fullAsset = result.data;
|
||||
// Clear previous video
|
||||
video.src = '';
|
||||
|
||||
// Populate detail panel
|
||||
document.getElementById('detailFilename').textContent = fullAsset.filename;
|
||||
document.getElementById('detailFormat').textContent = fullAsset.format || '—';
|
||||
document.getElementById('detailCodec').textContent = fullAsset.codec || '—';
|
||||
document.getElementById('detailResolution').textContent = fullAsset.resolution || '—';
|
||||
document.getElementById('detailFps').textContent = fullAsset.fps ? `${fullAsset.fps} fps` : '—';
|
||||
document.getElementById('detailDuration').textContent = formatDuration(fullAsset.duration);
|
||||
document.getElementById('detailFileSize').textContent = formatFileSize(fullAsset.file_size || 0);
|
||||
document.getElementById('detailStatus').innerHTML = `<span class="badge ${getStatusBadgeClass(fullAsset.status)}">${getStatusLabel(fullAsset.status)}</span>`;
|
||||
document.getElementById('detailCreated').textContent = new Date(fullAsset.created_at).toLocaleDateString();
|
||||
document.getElementById('detailTags').value = fullAsset.tags?.join(', ') || '';
|
||||
document.getElementById('detailNotes').value = fullAsset.notes || '';
|
||||
|
||||
// Load video player
|
||||
const streamResult = await getAssetStreamUrl(asset.id);
|
||||
if (streamResult.success) {
|
||||
document.getElementById('videoPlayer').src = streamResult.data.url;
|
||||
}
|
||||
}
|
||||
// Populate with what we already have
|
||||
document.getElementById('detailFilename').textContent = asset.display_name || asset.filename;
|
||||
document.getElementById('detailCodec').textContent = asset.codec || '—';
|
||||
document.getElementById('detailResolution').textContent = asset.resolution || '—';
|
||||
document.getElementById('detailFps').textContent = asset.fps ? `${asset.fps} fps` : '—';
|
||||
document.getElementById('detailDuration').textContent = formatDuration(
|
||||
asset.duration_ms ? Math.round(asset.duration_ms / 1000) : 0
|
||||
);
|
||||
document.getElementById('detailFileSize').textContent = formatFileSize(asset.file_size || 0);
|
||||
document.getElementById('detailStatus').innerHTML =
|
||||
`<span class="badge ${getStatusBadgeClass(asset.status)}">${getStatusLabel(asset.status)}</span>`;
|
||||
document.getElementById('detailCreated').textContent = new Date(asset.created_at).toLocaleString();
|
||||
document.getElementById('detailTags').value = (asset.tags || []).join(', ');
|
||||
document.getElementById('detailNotes').value = asset.notes || '';
|
||||
|
||||
panel.classList.add('active');
|
||||
main.classList.add('detail-open');
|
||||
|
||||
// Load proxy stream URL asynchronously
|
||||
if (asset.proxy_s3_key) {
|
||||
const streamResult = await getAssetStreamUrl(asset.id);
|
||||
if (streamResult.success) {
|
||||
video.src = streamResult.data.url;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closeDetailPanel() {
|
||||
const panel = document.getElementById('detailPanel');
|
||||
const main = document.getElementById('contentMain');
|
||||
const main = document.getElementById('contentMain');
|
||||
const video = document.getElementById('videoPlayer');
|
||||
|
||||
video.pause();
|
||||
video.src = '';
|
||||
panel.classList.remove('active');
|
||||
main.classList.remove('detail-open');
|
||||
state.selectedAsset = null;
|
||||
|
|
@ -570,53 +680,79 @@
|
|||
if (!state.selectedAsset) return;
|
||||
|
||||
const tags = document.getElementById('detailTags').value
|
||||
.split(',')
|
||||
.map(t => t.trim())
|
||||
.filter(t => t);
|
||||
.split(',').map(t => t.trim()).filter(Boolean);
|
||||
const notes = document.getElementById('detailNotes').value;
|
||||
|
||||
const result = await updateAsset(state.selectedAsset.id, {
|
||||
tags,
|
||||
notes,
|
||||
});
|
||||
const result = await updateAsset(state.selectedAsset.id, { tags, notes });
|
||||
|
||||
if (result.success) {
|
||||
updateStatusBar('Asset saved');
|
||||
// Update asset in local state
|
||||
updateStatusBar('Saved');
|
||||
const idx = state.assets.findIndex(a => a.id === state.selectedAsset.id);
|
||||
if (idx >= 0) {
|
||||
state.assets[idx].tags = tags;
|
||||
state.assets[idx].notes = notes;
|
||||
state.assets[idx] = { ...state.assets[idx], tags, notes };
|
||||
}
|
||||
setTimeout(() => updateStatusBar(), 2000);
|
||||
} else {
|
||||
updateStatusBar('Failed to save asset', true);
|
||||
updateStatusBar('Save failed', true);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// PROJECT SELECTION
|
||||
// PROJECT / BIN SELECTION
|
||||
// ============================================================
|
||||
|
||||
function selectProject(projectId) {
|
||||
async function selectProject(projectId) {
|
||||
state.selectedProject = state.selectedProject === projectId ? null : projectId;
|
||||
state.selectedBin = null;
|
||||
renderProjects();
|
||||
|
||||
// Load bins for this project
|
||||
const binsContainer = document.getElementById('binsList');
|
||||
binsContainer.innerHTML = '';
|
||||
|
||||
if (state.selectedProject) {
|
||||
const result = await getBins(state.selectedProject);
|
||||
if (result.success) {
|
||||
state.bins = result.data || [];
|
||||
renderBins(state.bins, binsContainer, null);
|
||||
}
|
||||
}
|
||||
|
||||
renderAssets();
|
||||
}
|
||||
|
||||
function renderBins(bins, container, parentId) {
|
||||
const children = bins.filter(b => b.parent_id === parentId);
|
||||
children.forEach(bin => {
|
||||
const item = document.createElement('div');
|
||||
item.className = `sidebar-item ${state.selectedBin === bin.id ? 'active' : ''}`;
|
||||
item.style.paddingLeft = parentId ? '24px' : '8px';
|
||||
item.textContent = bin.name;
|
||||
item.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
state.selectedBin = state.selectedBin === bin.id ? null : bin.id;
|
||||
renderAssets();
|
||||
// Re-render bins to update active state
|
||||
container.innerHTML = '';
|
||||
renderBins(state.bins, container, null);
|
||||
});
|
||||
container.appendChild(item);
|
||||
// Recurse for nested bins
|
||||
renderBins(bins, container, bin.id);
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// NAVIGATION
|
||||
// ============================================================
|
||||
|
||||
function navigateTo(page) {
|
||||
if (page === 'capture') {
|
||||
window.location.href = '/capture.html';
|
||||
} else if (page === 'upload') {
|
||||
window.location.href = '/upload.html';
|
||||
} else if (page === 'recorders') {
|
||||
window.location.href = '/recorders.html';
|
||||
} else if (page === 'projects') {
|
||||
alert('Projects page coming soon');
|
||||
}
|
||||
const pages = {
|
||||
capture: '/capture.html',
|
||||
upload: '/upload.html',
|
||||
recorders: '/recorders.html',
|
||||
};
|
||||
if (pages[page]) window.location.href = pages[page];
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
|
|
@ -625,8 +761,8 @@
|
|||
|
||||
function updateStatusBar(message = '', isError = false) {
|
||||
const indicator = document.getElementById('statusIndicator');
|
||||
const text = document.getElementById('statusText');
|
||||
const count = document.getElementById('assetCountItem');
|
||||
const text = document.getElementById('statusText');
|
||||
const countEl = document.getElementById('assetCountItem');
|
||||
|
||||
if (message) {
|
||||
text.textContent = message;
|
||||
|
|
@ -636,14 +772,24 @@
|
|||
text.textContent = 'Connected';
|
||||
}
|
||||
|
||||
const assetCount = state.assets.length;
|
||||
if (assetCount > 0) {
|
||||
count.style.display = 'flex';
|
||||
document.getElementById('assetCount').textContent = assetCount;
|
||||
const total = state.assets.length;
|
||||
if (total > 0) {
|
||||
countEl.style.display = 'flex';
|
||||
document.getElementById('assetCount').textContent = total;
|
||||
} else {
|
||||
count.style.display = 'none';
|
||||
countEl.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// HELPERS
|
||||
// ============================================================
|
||||
|
||||
function escapeHtml(str) {
|
||||
const d = document.createElement('div');
|
||||
d.textContent = str;
|
||||
return d.innerHTML;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue