admin/3dtours
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cập nhật chế độ quản lí scene trong dashboard của người dùng

Browse Source
This commit is contained in:
locphamtran
2026-06-08 20:25:00 +07:00
parent d1aa2209a7
commit 37f1984e8b
6 changed files with 218 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/style.css
+53
View File
@@ -755,6 +755,59 @@ html, body {
.delete-btn-small { background: #dc3545; color: white; }
.media-actions button:hover { opacity: 0.8; }
/* --- Scene Card Dashboard --- */
.scene-card {
position: relative;
height: 220px;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: flex-end;
transition: transform 0.2s ease;
cursor: default;
}
.scene-card:hover {
transform: translateY(-5px);
border-color: rgba(0, 123, 255, 0.5);
}
.scene-card-overlay {
padding: 15px;
background: linear-gradient(to top, rgba(0,0,0,0.95) 20%, rgba(0,0,0,0.6) 70%, transparent 100%);
color: #fff;
}
.scene-card-info strong {
display: block;
font-size: 16px;
margin-bottom: 4px;
color: #fff;
}
.scene-card-info .scene-desc {
font-size: 12px;
color: #ccc;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.scene-card-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: 11px;
color: #aaa;
margin-bottom: 10px;
}
/* --- Edit Metadata Modal (Dark Theme) --- */
#edit-scene-metadata-modal .modal-content {
background: rgba(30, 30, 30, 0.95);
frontend/index.html
+12
View File
@@ -287,6 +287,18 @@
</div>
</div>
<!-- Delete Scene Confirmation Modal -->
<div id="delete-scene-confirm-modal" class="modal-overlay">
<div class="modal-content action-modal-content logout-modal-dark">
<h2 style="color: #fff; margin-bottom: 10px;">Xác nhận xóa Scene</h2>
<p style="color: #ccc; margin-bottom: 25px;">Bạn có chắc chắn muốn xóa Scene này? Toàn bộ các scene con liên kết và các hotspot sẽ bị xóa vĩnh viễn khỏi hệ thống.</p>
<div class="action-buttons">
<button onclick="confirmDeleteScene()" class="delete-btn-large">Xóa vĩnh viễn</button>
<button onclick="closeDeleteSceneModal()" class="edit-btn-large" style="background: #6c757d;">Hủy bỏ</button>
</div>
</div>
</div>
<!-- Delete Asset Confirmation Modal -->
<div id="delete-asset-confirm-modal" class="modal-overlay">
<div class="modal-content action-modal-content logout-modal-dark">
frontend/js/main_map.js
+96 -47
View File
@@ -10,6 +10,8 @@ let miniMapMarker = null;
let systemSettings = { timezone: 'Asia/Ho_Chi_Minh', language: 'vi' };
let returnToDashboardAfterEdit = false;
let assetIdToDelete = null;
let sceneIdToDelete = null;
let dashboardReturnTab = 'media-library';
let editMiniMap = null;
let editMiniMapMarker = null;
let currentEditingScene = null; // Lưu object scene đang sửa để quản lý chia sẻ
@@ -139,23 +141,15 @@ function updateProfileTabContent() {
const role = localStorage.getItem('role');
if (username) {
document.getElementById('profile-avatar-initials').innerText = username.charAt(0).toUpperCase();
document.getElementById('profile-username-display').innerText = username;
document.getElementById('profile-status-display').innerText = role || 'Thành viên'; // Hiển thị vai trò làm trạng thái
}
}
const avatar = document.getElementById('profile-avatar-initials');
const userDisplay = document.getElementById('profile-username-display');
const statusDisplay = document.getElementById('profile-status-display');
const userInput = document.getElementById('profile-username');
/**
* Cập nhật nội dung tab Hồ sơ với thông tin người dùng
*/
function updateProfileTabContent() {
const username = localStorage.getItem('username');
const role = localStorage.getItem('role');
if (username) {
document.getElementById('profile-avatar-initials').innerText = username.charAt(0).toUpperCase();
document.getElementById('profile-username-display').innerText = username;
document.getElementById('profile-status-display').innerText = role || 'Thành viên'; // Hiển thị vai trò làm trạng thái
if (avatar) avatar.innerText = username.charAt(0).toUpperCase();
if (userDisplay) userDisplay.innerText = username;
if (statusDisplay) statusDisplay.innerText = role || 'Thành viên';
if (userInput) userInput.value = username;
}
}
@@ -458,9 +452,10 @@ function closeModal() {
document.getElementById('shared-with-group').style.display = 'none';
if (returnToDashboardAfterEdit) {
const targetTab = dashboardReturnTab;
returnToDashboardAfterEdit = false;
openDashboard();
openDashboardTab('media-library');
openDashboardTab(targetTab);
}
}
@@ -700,11 +695,10 @@ async function handleEditDeleteScene(scene) {
};
// Gán sự kiện cho nút Xóa
deleteBtn.onclick = async () => {
if (confirm(`Cảnh báo: Thao tác này sẽ xóa vĩnh viễn scene "${scene.title}" và tệp tin ảnh 360 liên quan. Bạn có chắc chắn?`)) {
closeActionModal();
await deleteScene(scene._id);
}
deleteBtn.onclick = () => {
returnToDashboardAfterEdit = false; // Đảm bảo không mở dashboard nếu xóa từ map
closeActionModal();
deleteScene(scene._id);
};
}
@@ -737,24 +731,49 @@ function openEditSceneModal(scene) {
}
/**
* Deletes a scene via API
* Mở modal xác nhận xóa scene
*/
async function deleteScene(sceneId) {
if (!confirm('Bạn có chắc chắn muốn xóa scene này?')) return;
window.deleteScene = function(sceneId) {
sceneIdToDelete = sceneId;
document.getElementById('delete-scene-confirm-modal').style.display = 'flex';
};
window.closeDeleteSceneModal = function() {
document.getElementById('delete-scene-confirm-modal').style.display = 'none';
sceneIdToDelete = null;
if (returnToDashboardAfterEdit) {
const targetTab = dashboardReturnTab;
returnToDashboardAfterEdit = false;
openDashboard();
openDashboardTab(targetTab);
}
};
window.confirmDeleteScene = async function() {
if (!sceneIdToDelete) return;
const token = localStorage.getItem('jwt');
try {
const response = await fetch(`${API_BASE_URL}/scenes/${sceneId}`, {
const response = await fetch(`${API_BASE_URL}/scenes/${sceneIdToDelete}`, {
method: 'DELETE',
headers: { 'Authorization': `Bearer ${token}` }
});
if (!response.ok) throw new Error('Failed to delete scene');
alert('Scene deleted successfully');
const data = await response.json();
if (!response.ok) throw new Error(data.message || 'Failed to delete scene');
closeDeleteSceneModal();
showSuccessModal(data.message || 'Scene đã được xóa vĩnh viễn');
loadScenes();
if (document.getElementById('tab-my-scenes').classList.contains('active')) loadMyScenes();
if (document.getElementById('tab-my-scenes').classList.contains('active')) {
loadMyScenes();
}
} catch (error) {
alert(error.message);
alert("Lỗi khi xóa: " + error.message);
}
}
};
/**
* Fetches secure scene details and triggers the Panorama viewer
@@ -1219,6 +1238,8 @@ function closeDashboard() {
async function loadMyScenes() {
const token = localStorage.getItem('jwt');
const listContainer = document.getElementById('my-scenes-list');
// Chuyển sang grid để đồng bộ với media library
listContainer.className = 'dashboard-grid';
listContainer.innerHTML = '<p>Đang tải danh sách...</p>';
try {
@@ -1235,23 +1256,48 @@ async function loadMyScenes() {
}
scenes.forEach(scene => {
const item = document.createElement('div');
item.className = 'dashboard-item';
item.innerHTML = `
<div class="item-info">
<strong>${scene.name || scene.title}</strong>
<span>Quyền: ${scene.privacy} - Ngày tạo: ${formatSystemDate(scene.createdAt)}</span>
</div>
<div class="item-actions">
<button class="edit-btn" id="edit-${scene._id}">Sửa</button>
<button class="delete-btn" onclick="deleteScene('${scene._id}')">Xóa</button>
const assetId = scene.assetId?._id || scene.assetId;
let thumbUrl = `${API_BASE_URL}/assets/view/${assetId}`;
if (token) thumbUrl += `?token=${token}`;
const card = document.createElement('div');
card.className = 'scene-card';
card.style.backgroundImage = `url('${thumbUrl}')`;
card.innerHTML = `
<div class="scene-card-overlay">
<div class="scene-card-info">
<strong>${scene.name || scene.title}</strong>
<p class="scene-desc">${scene.description || 'Không có mô tả'}</p>
<div class="scene-card-meta">
<span>🔒 ${scene.privacy}</span>
<span>👤 ${scene.createdBy?.username || 'Bạn'}</span>
<span>📅 ${formatSystemDate(scene.createdAt)}</span>
</div>
</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="delete-btn-small" id="delete-scene-${scene._id}">Xóa</button>
</div>
</div>
`;
listContainer.appendChild(item);
// Gán sự kiện sửa bằng code để truyền object scene an toàn
document.getElementById(`edit-${scene._id}`).onclick = () => {
returnToDashboardAfterEdit = false;
openEditSceneModal(scene);
listContainer.appendChild(card);
// Xử lý nút Sửa: Logic đóng dashboard -> mở modal -> quay lại dashboard
document.getElementById(`edit-scene-${scene._id}`).onclick = () => {
dashboardReturnTab = 'my-scenes';
returnToDashboardAfterEdit = true;
closeDashboard();
// Mặc định truyền false cho isChild, logic backend sẽ xử lý cascade privacy sau
openEditMetadataModal(scene, false);
};
// Xử lý nút Xóa (Sẽ được hoàn thiện ở Bước 4)
document.getElementById(`delete-scene-${scene._id}`).onclick = () => {
dashboardReturnTab = 'my-scenes';
returnToDashboardAfterEdit = true;
closeDashboard();
deleteScene(scene._id);
};
});
} catch (e) {
@@ -1313,6 +1359,7 @@ async function loadMyAssets() {
const editButton = document.createElement('button');
editButton.className = 'edit-btn-small';
editButton.innerText = 'Sửa Scene';
dashboardReturnTab = 'media-library';
const isChild = asset.parentScenes && asset.parentScenes.length > 0;
editButton.addEventListener('click', () => openEditFromMedia(scene, isChild));
card.querySelector('.media-actions').appendChild(editButton);
@@ -1406,6 +1453,7 @@ window.openEditFromMedia = function(scene, isChild = false) {
alert("Không thể chỉnh sửa: Ảnh này không được gắn với một Scene hợp lệ.");
return;
}
dashboardReturnTab = 'media-library';
returnToDashboardAfterEdit = true;
closeDashboard();
openEditMetadataModal(scene, isChild);
@@ -1454,9 +1502,10 @@ window.openEditMetadataModal = function(scene, isChild = false) {
function closeEditMetadataModal() {
document.getElementById('edit-scene-metadata-modal').style.display = 'none';
if (returnToDashboardAfterEdit) {
const targetTab = dashboardReturnTab;
returnToDashboardAfterEdit = false;
openDashboard();
openDashboardTab('media-library');
openDashboardTab(targetTab);
}
}