Chỉnh sửa phần upload ảnh

frontend/css/style.css

@@ -994,3 +994,25 @@ html, body {
     font-weight: bold;
     padding: 0 5px;
 }
+
+/* Status Badges */
+.status-badge {
+    font-size: 11px;
+    padding: 3px 8px;
+    border-radius: 12px;
+    font-weight: bold;
+    display: inline-flex;
+    align-items: center;
+}
+
+.status-badge.processing {
+    background: rgba(255, 193, 7, 0.2);
+    color: #ffc107;
+    border: 1px solid rgba(255, 193, 7, 0.4);
+}
+
+.status-badge.failed {
+    background: rgba(220, 53, 69, 0.2);
+    color: #dc3545;
+    border: 1px solid rgba(220, 53, 69, 0.4);
+}

frontend/js/main_map.js

@@ -1350,6 +1350,14 @@ async function loadMyScenes() {
             const card = document.createElement('div');
             card.className = 'scene-card';
             card.style.backgroundImage = `url('${thumbUrl}')`;
+
+            // Logic hiển thị badge trạng thái
+            let statusBadge = '';
+            if (scene.status === 'processing') {
+                statusBadge = '<span class="status-badge processing">⏳ Đang xử lý 8K...</span>';
+            } else if (scene.status === 'failed') {
+                statusBadge = '<span class="status-badge failed">❌ Lỗi xử lý</span>';
+            }
             
             card.innerHTML = `
                 <div class="scene-card-overlay">
@@ -1361,9 +1369,10 @@ async function loadMyScenes() {
                             <span>👤 ${scene.createdBy?.username || 'Bạn'}</span>
                             <span>📅 ${formatSystemDate(scene.createdAt)}</span>
                         </div>
+                        ${statusBadge}
                     </div>
                     <div class="media-actions" style="border: none; padding: 0;">
-                        <button class="edit-btn-small" id="edit-scene-${scene._id}">Sửa</button>
+                        <button class="edit-btn-small" id="edit-scene-${scene._id}" ${scene.status === 'processing' ? 'disabled style="opacity:0.5; cursor:not-allowed;"' : ''}>Sửa</button>
                         <button class="delete-btn-small" id="delete-scene-${scene._id}">Xóa</button>
                     </div>
                 </div>
@@ -1523,6 +1532,13 @@ async function loadMyAssets() {
             const card = document.createElement('div');
             card.className = `media-card ${isTrash ? 'trash-item' : ''}`;
             
+            let statusBadge = '';
+            if (scene?.status === 'processing') {
+                statusBadge = '<span class="status-badge processing" style="position:static; margin-top:5px; display:inline-block;">⏳ Đang nén 8K...</span>';
+            } else if (scene?.status === 'failed') {
+                statusBadge = '<span class="status-badge failed" style="position:static; margin-top:5px; display:inline-block;">❌ Lỗi</span>';
+            }
+
             // Build inner HTML without the onclick for edit/delete buttons
             let innerHtml = `
                 <div class="media-thumb">
@@ -1533,6 +1549,7 @@ async function loadMyAssets() {
                     <strong>${scene ? (scene.name || scene.title) : 'Chưa gắn Scene'}</strong>
                     <p class="desc">${scene?.description || 'Không có mô tả'}</p>
                     ${parentNames ? `<p class="parent-link">🔗 Liên kết từ: ${parentNames}</p>` : ''}
+                    ${statusBadge}
                     <span class="date">Tải lên: ${formatSystemDate(asset.createdAt)}</span>
                 </div>
                 <div class="media-actions">
@@ -1545,6 +1562,7 @@ async function loadMyAssets() {
                 const editButton = document.createElement('button');
                 editButton.className = 'edit-btn-small';
                 editButton.innerText = 'Sửa Scene';
+                if (scene.status === 'processing') editButton.disabled = true;
                 dashboardReturnTab = 'media-library';
                 const isChild = asset.parentScenes && asset.parentScenes.length > 0;
                 editButton.addEventListener('click', () => openEditFromMedia(scene, isChild)); 
@@ -1907,6 +1925,7 @@ async function submitEditScene(e) {
     formData.append('lat', document.getElementById('edit-modal-lat').value);
     formData.append('lng', document.getElementById('edit-modal-lng').value);
     formData.append('privacy', document.getElementById('edit-modal-privacy').value);
+    
     formData.append('shareExpireDays', document.getElementById('share-link-expire').value);
     // Đính kèm dữ liệu chia sẻ nâng cao
     formData.append('sharedWithUsers', JSON.stringify(sharedUsersData.map(u => u._id || u)));