chỉnh sửa dashboard quản lí của thành viên

frontend/js/main_map.js

@@ -7,11 +7,15 @@ let currentSceneId = null;
 let previousSceneId = null;
 let miniMap = null;
 let miniMapMarker = null;
+let systemSettings = { timezone: 'Asia/Ho_Chi_Minh', language: 'vi' };
 
 // Initialize when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {
     try {
         console.log("--- Bắt đầu khởi tạo Frontend ---");
+        // Ưu tiên nạp cấu hình hệ thống trước
+        fetchSystemSettings();
+
         if (document.getElementById('map')) {
             console.log("1. Đang khởi tạo bản đồ Leaflet...");
             initMap();
@@ -22,17 +26,140 @@ document.addEventListener('DOMContentLoaded', () => {
         
         // Đảm bảo map đã sẵn sàng trước khi nạp data
         if (map) {
-            loadScenes().then(() => {
-                console.log("4. Đang chuẩn bị khôi phục Scene cũ (nếu có)...");
-                // Chỉ khôi phục khi bản đồ đã nạp xong các marker
-                setTimeout(restoreActiveScene, 500);
-            });
+            // Chỉ nạp danh sách Scene để vẽ marker lên bản đồ
+            loadScenes();
         }
     } catch (error) {
         console.error("Ứng dụng không thể khởi tạo:", error);
     }
 });
 
+/**
+ * Lấy cấu hình hệ thống từ Backend
+ */
+async function fetchSystemSettings() {
+    try {
+        const res = await fetch(`${API_BASE_URL}/system/settings`);
+        if (res.ok) {
+            systemSettings = await res.json();
+            applySystemSettings();
+        }
+    } catch (e) {
+        console.warn("Không thể nạp cấu hình hệ thống, dùng mặc định.");
+    }
+}
+
+/**
+ * Áp dụng cấu hình Múi giờ và Ngôn ngữ vào UI
+ */
+function applySystemSettings() {
+    console.log(`[System] Applying settings: Language=${systemSettings.language}, Timezone=${systemSettings.timezone}`);
+    
+    // 1. Cập nhật nhãn (Labels) dựa trên ngôn ngữ
+    const translations = {
+        vi: {
+            brand: "Bản đồ Tour 3D Ảo",
+            login: "Đăng nhập / Đăng ký",
+            profile: "Quản lý hồ sơ",
+            logout: "Đăng xuất",
+            dashboardTitle: "Bảng điều khiển người dùng",
+            tabProfile: "Hồ sơ",
+            tabScenes: "Quản lí scene",
+            tabMedia: "Quản lí ảnh và media",
+            tabUsers: "Quản lí users",
+            tabSystem: "Cài đặt hệ thống"
+        },
+        en: {
+            brand: "Virtual 3D Tour Map",
+            login: "Login / Register",
+            profile: "Manage Profile",
+            logout: "Logout",
+            dashboardTitle: "User Dashboard",
+            tabProfile: "Profile",
+            tabScenes: "My Scenes",
+            tabMedia: "Media Library",
+            tabUsers: "User Management",
+            tabSystem: "System Settings"
+        }
+    };
+
+    const lang = systemSettings.language || 'vi';
+    const t = translations[lang];
+
+    // Cập nhật các phần tử cố định
+    const brandH1 = document.querySelector('.app-brand h1');
+    if (brandH1) brandH1.innerText = t.brand;
+
+    const dashboardH2 = document.querySelector('.dashboard-content h2');
+    if (dashboardH2) dashboardH2.innerText = t.dashboardTitle;
+
+    // Cập nhật các nút Tab
+    const tabButtons = document.querySelectorAll('.dashboard-tabs .tab-btn');
+    if (tabButtons.length >= 3) {
+        tabButtons[0].innerText = t.tabProfile;
+        tabButtons[1].innerText = t.tabScenes;
+        tabButtons[2].innerText = t.tabMedia;
+        if (tabButtons[3]) tabButtons[3].innerText = t.tabUsers;
+        if (tabButtons[4]) tabButtons[4].innerText = t.tabSystem;
+    }
+
+    const profileBtn = document.querySelector('button[onclick="openDashboard()"]');
+    if (profileBtn) profileBtn.innerText = t.profile;
+
+    const logoutBtn = document.querySelector('button[onclick="handleLogout()"]');
+    if (logoutBtn) logoutBtn.innerText = t.logout;
+}
+
+/**
+ * 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
+    }
+}
+
+/**
+ * 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
+    }
+}
+
+/**
+ * Hàm bổ trợ định dạng ngày tháng theo múi giờ hệ thống
+ */
+function formatSystemDate(dateString) {
+    if (!dateString) return 'N/A';
+    const date = new Date(dateString);
+    
+    try {
+        return new Intl.DateTimeFormat(systemSettings.language === 'vi' ? 'vi-VN' : 'en-US', {
+            timeZone: systemSettings.timezone,
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+        }).format(date);
+    } catch (e) {
+        // Fallback nếu timezone không hợp lệ
+        return date.toLocaleDateString();
+    }
+}
+
 /**
  * Initializes the full-screen Leaflet Map
  */
@@ -50,12 +177,14 @@ function initMap() {
     if (isNaN(startLat)) startLat = 21.0285;
     if (isNaN(startLng)) startLng = 105.8542;
     if (isNaN(startZoom)) startZoom = 13;
-
-    map = L.map('map', { zoomControl: true }).setView([startLat, startLng], startZoom);
+    
+    // Khởi tạo bản đồ với zoomControl và tắt attribution mặc định của Leaflet
+    map = L.map('map', { zoomControl: true, attributionControl: false }).setView([startLat, startLng], startZoom);
 
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
-        attribution: '© OpenStreetMap contributors'
+        // Attribution sẽ được thêm thủ công bên dưới để chỉ hiển thị OpenStreetMap
+        // attribution: '© OpenStreetMap contributors' 
     }).addTo(map);
 
     // Khởi tạo Marker Cluster Group CHỈ dành cho Scene (Ảnh mẹ)
@@ -88,6 +217,9 @@ function initMap() {
         a.layer.spiderfy();
     });
 
+    // Thêm attribution chỉ với OpenStreetMap, không có Leaflet
+    L.control.attribution({ prefix: false }).addAttribution('OpenStreetMap contributors').addTo(map);
+
     map.addLayer(markerClusterGroup);
 
     // Lưu vị trí bản đồ mỗi khi người dùng di chuyển hoặc zoom xong
@@ -127,14 +259,25 @@ function checkAuthStatus() {
     const authGuest = document.getElementById('auth-guest');
     const authLoggedIn = document.getElementById('auth-logged-in');
 
+    const avatarInitials = document.getElementById('avatar-initials');
+
     if (token && username) {
-        authGuest.style.display = 'none';
-        authLoggedIn.style.display = 'block';
-        document.getElementById('logged-username').innerText = username;
-        document.getElementById('logged-role').innerText = role || 'Thành viên';
+        authGuest.style.display = 'none'; // Hide login form
+        authLoggedIn.style.display = 'block'; // Show welcome message and buttons
+        avatarInitials.innerText = username.charAt(0).toUpperCase();
+        
+        // Chỉ hiển thị các NÚT BẤM menu admin trong sidebar
+        const adminButtons = document.querySelectorAll('.dashboard-tabs .admin-only');
+        if (role === 'Chủ sở hữu' || role === 'admin') {
+            adminButtons.forEach(btn => btn.style.display = 'block');
+        } else {
+            adminButtons.forEach(btn => btn.style.display = 'none');
+        }
     } else {
-        authGuest.style.display = 'block';
-        authLoggedIn.style.display = 'none';
+        authGuest.style.display = 'block'; // Show login form
+        authLoggedIn.style.display = 'none'; // Hide welcome message
+        avatarInitials.innerText = '?';
+        document.getElementById('user-dropdown').classList.remove('show'); // Đóng dropdown nếu không đăng nhập
     }
 }
 
@@ -166,6 +309,7 @@ async function handleLogin() {
         localStorage.setItem('userId', data.user.id);
 
         checkAuthStatus();
+        toggleDropdown(); // Đóng dropdown sau khi đăng nhập
         loadScenes(); // Reload scenes to show member/private scenes
         alert('Logged in successfully!');
     } catch (error) {
@@ -219,6 +363,7 @@ function handleLogout() {
     }
     
     checkAuthStatus();
+    toggleDropdown(); // Đóng dropdown sau khi đăng xuất
     loadScenes(); // Reload scenes to filter out private ones
     alert('Logged out successfully');
 }
@@ -411,7 +556,7 @@ async function loadScenes() {
             });
             
             // Tạo nội dung thông tin khi Hover (Tooltip)
-            const createdDate = scene.assetId?.createdAt ? new Date(scene.assetId.createdAt).toLocaleDateString('vi-VN') : 'N/A';
+            const createdDate = formatSystemDate(scene.assetId?.createdAt);
             const tooltipContent = `
                 <div class="scene-hover-info">
                     <strong>${sceneName}</strong><br>
@@ -518,6 +663,7 @@ function openEditSceneModal(scene) {
  * Deletes a scene via API
  */
 async function deleteScene(sceneId) {
+    if (!confirm('Bạn có chắc chắn muốn xóa scene này?')) return;
     const token = localStorage.getItem('jwt');
     try {
         const response = await fetch(`${API_BASE_URL}/scenes/${sceneId}`, {
@@ -527,6 +673,7 @@ async function deleteScene(sceneId) {
         if (!response.ok) throw new Error('Failed to delete scene');
         alert('Scene deleted successfully');
         loadScenes();
+        if (document.getElementById('tab-my-scenes').classList.contains('active')) loadMyScenes();
     } catch (error) {
         alert(error.message);
     }
@@ -939,3 +1086,119 @@ async function deleteHotspot(hotspotId) {
         alert(e.message);
     }
 }
+
+/**
+ * Toggles the visibility of the user dropdown menu.
+ */
+function toggleDropdown() {
+    document.getElementById('user-dropdown').classList.toggle('show');
+}
+
+/**
+ * Opens the user dashboard overlay.
+ */
+function openDashboard() {
+    const username = localStorage.getItem('username');
+    const role = localStorage.getItem('role');
+    
+    if (username) {
+        document.getElementById('sidebar-avatar').innerText = username.charAt(0).toUpperCase();
+        document.getElementById('sidebar-username').innerText = username;
+        document.getElementById('sidebar-status').innerText = role || 'Thành viên';
+    }
+
+    document.getElementById('dashboard-overlay').style.display = 'flex';
+    document.getElementById('user-dropdown').classList.remove('show'); // Close dropdown
+    // Mở tab profile mặc định khi mở dashboard
+    openDashboardTab('profile');
+}
+
+/**
+ * Closes the user dashboard overlay.
+ */
+function closeDashboard() {
+    document.getElementById('dashboard-overlay').style.display = 'none';
+}
+
+/**
+ * Tải danh sách scene của chính người dùng đăng nhập
+ */
+async function loadMyScenes() {
+    const token = localStorage.getItem('jwt');
+    const listContainer = document.getElementById('my-scenes-list');
+    listContainer.innerHTML = '<p>Đang tải danh sách...</p>';
+
+    try {
+        const res = await fetch(`${API_BASE_URL}/me/scenes`, {
+            headers: { 'Authorization': `Bearer ${token}` }
+        });
+        const scenes = await res.json();
+        if (!res.ok) throw new Error(scenes.message);
+
+        listContainer.innerHTML = '';
+        if (scenes.length === 0) {
+            listContainer.innerHTML = '<p>Bạn chưa tạo scene nào.</p>';
+            return;
+        }
+
+        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>
+                </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 = () => openEditSceneModal(scene);
+        });
+    } catch (e) {
+        listContainer.innerHTML = `<p style="color:#ff4d4d">Lỗi: ${e.message}</p>`;
+    }
+}
+
+/**
+ * Opens a specific tab within the dashboard.
+ * @param {string} tabName - The ID of the tab pane to open (e.g., 'profile', 'my-scenes').
+ */
+function openDashboardTab(tabName) {
+    // Ẩn tất cả các tab pane
+    document.querySelectorAll('.dashboard-tab-pane').forEach(pane => {
+        pane.classList.remove('active');
+    });
+    // Bỏ active khỏi tất cả các nút tab
+    document.querySelectorAll('.dashboard-tabs .tab-btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+
+    // Hiển thị tab pane được chọn
+    const selectedPane = document.getElementById(`tab-${tabName}`);
+    if (selectedPane) {
+        selectedPane.classList.add('active');
+        // Nếu là tab profile, cập nhật nội dung
+        if (tabName === 'profile') {
+            updateProfileTabContent();
+        }
+        if (tabName === 'my-scenes') {
+            loadMyScenes();
+        }
+    }
+
+    // Đánh dấu nút tab được chọn là active
+    const selectedTabButton = document.querySelector(`.dashboard-tabs .tab-btn[onclick="openDashboardTab('${tabName}')"]`);
+    if (selectedTabButton) {
+        selectedTabButton.classList.add('active');
+    }
+
+    // Cập nhật avatar initials khi mở dashboard
+    const username = localStorage.getItem('username');
+    if (username) {
+        document.getElementById('avatar-initials').innerText = username.charAt(0).toUpperCase();
+    }
+}