+
+
Virtual 3D Tour Map
+
+
+
+ ?
+
+
+
+
Login / Register
+
+
+
+ Login
+ Register
+
+
+
+
+ Manage Profile
+ Logout
+
-
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+ Hồ sơ
+ Quản lí scene
+ Quản lí ảnh và media
+ Quản lí users
+ Cài đặt hệ thống
+
+ Đăng xuất
+
+
+
+
+
Các scene đã tạo
+
+
+
Đang tải danh sách...
+
+
+
+
+
+
diff --git a/frontend/js/main_map.js b/frontend/js/main_map.js
index d640334..8e03e59 100644
--- a/frontend/js/main_map.js
+++ b/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 = `
${sceneName}
@@ -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 = '
Đang tải danh sách...
';
+
+ 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 = '
Bạn chưa tạo scene nào.
';
+ return;
+ }
+
+ scenes.forEach(scene => {
+ const item = document.createElement('div');
+ item.className = 'dashboard-item';
+ item.innerHTML = `
+
+ ${scene.name || scene.title}
+ Quyền: ${scene.privacy} - Ngày tạo: ${formatSystemDate(scene.createdAt)}
+
+
+ Sửa
+ Xóa
+
+ `;
+ 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 = `
Lỗi: ${e.message}
`;
+ }
+}
+
+/**
+ * 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();
+ }
+}