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

20260607 - login, add scene, add hotspot

Browse Source
This commit is contained in:
locphamtran
2026-06-07 21:31:31 +07:00
parent 10d2e07297
commit 5ba6e37039
29 changed files with 1064 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/js/main_map.js
+362 -26
View File
@@ -2,28 +2,55 @@ const API_BASE_URL = 'http://localhost:5000/api';
let map;
let tempMarker = null;
let currentSceneId = null;
let previousSceneId = null;
// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
initMap();
checkAuthStatus();
loadScenes();
restoreActiveScene();
});
/**
* Initializes the full-screen Leaflet Map
*/
function initMap() {
// Center of map defaults to Hanoi
map = L.map('map').setView([21.0285, 105.8542], 13);
// Đọc vị trí và zoom đã lưu từ localStorage
const savedLat = localStorage.getItem('map-lat');
const savedLng = localStorage.getItem('map-lng');
const savedZoom = localStorage.getItem('map-zoom');
// Nếu có dữ liệu cũ thì dùng, không thì mặc định là Hà Nội
const startLat = savedLat ? parseFloat(savedLat) : 21.0285;
const startLng = savedLng ? parseFloat(savedLng) : 105.8542;
const startZoom = savedZoom ? parseInt(savedZoom) : 13;
map = L.map('map').setView([startLat, startLng], startZoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Lưu vị trí bản đồ mỗi khi người dùng di chuyển hoặc zoom xong
map.on('moveend', () => {
const center = map.getCenter();
localStorage.setItem('map-lat', center.lat);
localStorage.setItem('map-lng', center.lng);
localStorage.setItem('map-zoom', map.getZoom());
});
// Event listener for right-click on map to open modal
map.on('contextmenu', (e) => {
// Nếu viewer 3D đang hiển thị, không thực hiện tạo scene trên bản đồ
const viewerContainer = document.getElementById('viewer-container');
// Kiểm tra z-index và display để chắc chắn viewer đang ẩn
if (viewerContainer && viewerContainer.style.display !== 'none') {
return;
}
const { lat, lng } = e.latlng;
openCreateSceneModal(lat, lng);
});
@@ -76,6 +103,7 @@ async function handleLogin() {
localStorage.setItem('jwt', data.token);
localStorage.setItem('username', data.user.username);
localStorage.setItem('role', data.user.role);
localStorage.setItem('userId', data.user.id);
checkAuthStatus();
loadScenes(); // Reload scenes to show member/private scenes
@@ -120,6 +148,10 @@ function handleLogout() {
localStorage.removeItem('jwt');
localStorage.removeItem('username');
localStorage.removeItem('role');
localStorage.removeItem('activeSceneId');
localStorage.removeItem('activeScenePrivacy');
localStorage.removeItem('activeSceneToken');
localStorage.removeItem('userId');
checkAuthStatus();
loadScenes(); // Reload scenes to filter out private ones
alert('Logged out successfully');
@@ -139,6 +171,7 @@ function openCreateSceneModal(lat, lng) {
if (tempMarker) map.removeLayer(tempMarker);
tempMarker = L.marker([lat, lng]).addTo(map);
document.getElementById('modal-scene-id').value = '';
document.getElementById('modal-lat').value = lat.toFixed(6);
document.getElementById('modal-lng').value = lng.toFixed(6);
document.getElementById('create-scene-modal').style.display = 'flex';
@@ -175,34 +208,61 @@ function toggleSharedUsers() {
*/
async function submitScene(e) {
e.preventDefault();
const form = document.getElementById('create-scene-form');
const formData = new FormData(form);
const sceneId = document.getElementById('modal-scene-id').value;
const token = localStorage.getItem('jwt');
if (!token) {
alert('Please log in to submit');
return;
}
try {
const response = await fetch(`${API_BASE_URL}/scenes`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`
},
body: formData
});
const url = sceneId ? `${API_BASE_URL}/scenes/${sceneId}` : `${API_BASE_URL}/scenes`;
const method = sceneId ? 'PUT' : 'POST';
const data = await response.json();
if (!response.ok) throw new Error(data.message || 'Failed to save scene');
alert('Scene created successfully!');
uploadWithProgress(url, method, formData, token, 'create', () => {
alert(sceneId ? 'Scene đang được cập nhật ngầm!' : 'Scene đã được tạo! Ảnh đang được xử lý 8K...');
closeModal();
loadScenes();
} catch (error) {
alert(error.message);
}
});
}
/**
* Helper function to handle uploads with progress bars
*/
function uploadWithProgress(url, method, formData, token, prefix, callback) {
const xhr = new XMLHttpRequest();
const container = document.getElementById(`${prefix}-progress-container`);
const bar = document.getElementById(`${prefix}-progress-bar`);
const percentText = document.getElementById(`${prefix}-progress-percent`);
const statusText = document.getElementById(`${prefix}-progress-status`);
container.style.display = 'block';
statusText.innerText = "Đang tải ảnh lên...";
xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
bar.style.width = percent + '%';
percentText.innerText = percent + '%';
if (percent === 100) statusText.innerText = "Tải lên xong! Đang khởi tạo trên server...";
}
});
xhr.addEventListener('load', () => {
container.style.display = 'none';
if (xhr.status >= 200 && xhr.status < 300) {
callback(JSON.parse(xhr.responseText));
} else {
const err = JSON.parse(xhr.responseText);
alert('Lỗi: ' + (err.message || 'Không thể tải lên'));
}
});
xhr.addEventListener('error', () => {
container.style.display = 'none';
alert('Lỗi kết nối mạng.');
});
xhr.open(method, url);
if (token) xhr.setRequestHeader('Authorization', `Bearer ${token}`);
xhr.send(formData);
}
/**
@@ -224,6 +284,9 @@ async function loadScenes() {
if (!response.ok) throw new Error('Failed to load scenes');
const scenes = await response.json();
const activeSceneId = localStorage.getItem('activeSceneId');
const currentUserId = localStorage.getItem('userId');
// Clear existing markers (excluding tempMarker)
map.eachLayer((layer) => {
if (layer instanceof L.Marker && layer !== tempMarker) {
@@ -245,6 +308,19 @@ async function loadScenes() {
</div>
`;
marker.bindPopup(popupContent);
// Nếu đây là scene đang xem, tự động mở popup
if (activeSceneId && scene._id === activeSceneId) {
marker.openPopup();
}
// Right-click on marker to Edit/Delete (Owner only)
marker.on('contextmenu', (e) => {
L.DomEvent.stopPropagation(e);
if (currentUserId && scene.owner && scene.owner._id === currentUserId) {
handleEditDeleteScene(scene);
}
});
});
} catch (error) {
@@ -252,10 +328,65 @@ async function loadScenes() {
}
}
/**
* Handles Edit/Delete options for a scene
*/
async function handleEditDeleteScene(scene) {
const action = confirm(`Bạn muốn làm gì với scene "${scene.title}"?\n\n- Nhấn OK để CHỈNH SỬA\n- Nhấn Cancel để XÓA`);
if (action) {
// EDIT MODE
openEditSceneModal(scene);
} else {
// DELETE MODE
if (confirm(`Bạn có chắc chắn muốn xóa vĩnh viễn scene "${scene.title}"?`)) {
await deleteScene(scene._id);
}
}
}
/**
* Opens the modal in Edit mode
*/
function openEditSceneModal(scene) {
document.getElementById('modal-scene-id').value = scene._id;
document.getElementById('modal-lat').value = scene.lat;
document.getElementById('modal-lng').value = scene.lng;
document.getElementById('modal-title').value = scene.title;
document.getElementById('modal-privacy').value = scene.privacy;
document.getElementById('modal-panorama').required = false; // Photo update is optional
toggleSharedUsers();
document.getElementById('create-scene-modal').style.display = 'flex';
}
/**
* Deletes a scene via API
*/
async function deleteScene(sceneId) {
const token = localStorage.getItem('jwt');
try {
const response = await fetch(`${API_BASE_URL}/scenes/${sceneId}`, {
method: 'DELETE',
headers: { 'Authorization': `Bearer ${token}` }
});
if (!response.ok) throw new Error('Failed to delete scene');
alert('Scene deleted successfully');
loadScenes();
} catch (error) {
alert(error.message);
}
}
/**
* Fetches secure scene details and triggers the Panorama viewer
*/
async function openScene(sceneId, privacy, shareToken) {
async function openScene(sceneId, privacy, shareToken, force = false) {
// Nếu đang xem chính scene này và không yêu cầu làm mới (force), không cần nạp lại
if (!force && currentSceneId === sceneId && document.getElementById('viewer-container').style.display === 'block') {
return;
}
try {
const token = localStorage.getItem('jwt');
const headers = {};
@@ -268,6 +399,11 @@ async function openScene(sceneId, privacy, shareToken) {
url += `?token=${shareToken}`;
}
// Lưu trạng thái Scene hiện tại để khôi phục sau khi reload trang
localStorage.setItem('activeSceneId', sceneId);
localStorage.setItem('activeScenePrivacy', privacy || '');
localStorage.setItem('activeSceneToken', shareToken || '');
const response = await fetch(url, {
method: 'GET',
headers
@@ -276,16 +412,216 @@ async function openScene(sceneId, privacy, shareToken) {
const scene = await response.json();
if (!response.ok) throw new Error(scene.message || 'Failed to fetch scene details');
// Tự động focus bản đồ vào vị trí của Scene
if (map) {
map.flyTo([scene.lat, scene.lng], 16);
}
// Cập nhật tọa độ vào các input ẩn để hỗ trợ GPS inheritance cho hotspot khi tải ảnh mới
document.getElementById('modal-lat').value = scene.lat;
document.getElementById('modal-lng').value = scene.lng;
// Cập nhật lịch sử di chuyển để hỗ trợ tạo hotspot ngược tự động
if (currentSceneId && currentSceneId !== sceneId) {
previousSceneId = currentSceneId;
}
currentSceneId = sceneId;
// Construct secure image URL passing shareToken if applicable
let secureImageUrl = `${API_BASE_URL}/assets/view/${scene.assetId._id}`;
if (privacy === 'shared' && scene.shareToken) {
// Ưu tiên JWT token nếu đang đăng nhập, nếu không thì dùng shareToken
if (token) {
secureImageUrl += `?token=${token}`;
} else if (privacy === 'shared' && scene.shareToken) {
secureImageUrl += `?token=${scene.shareToken}`;
}
// Initialize 3D Viewer with secure, referer-protected image stream
initPanoramaViewer(secureImageUrl);
initPanoramaViewer(secureImageUrl, scene.hotspots || []);
} catch (error) {
localStorage.removeItem('activeSceneId');
localStorage.removeItem('activeScenePrivacy');
localStorage.removeItem('activeSceneToken');
alert(error.message);
}
}
/**
* Khôi phục Scene đang xem từ localStorage sau khi reload trang
*/
function restoreActiveScene() {
const savedSceneId = localStorage.getItem('activeSceneId');
if (savedSceneId) {
const savedPrivacy = localStorage.getItem('activeScenePrivacy');
const savedToken = localStorage.getItem('activeSceneToken');
openScene(savedSceneId, savedPrivacy, savedToken);
}
}
/**
* Xử lý việc tạo hotspot sau khi click chuột phải trong trình xem 360
* @param {number} pitch - Tọa độ dọc (-90 đến 90)
* @param {number} yaw - Tọa độ ngang (-180 đến 180)
* @param {Object} existingHotspot - Thông tin hotspot cũ nếu có
*/
window.handleHotspotCreation = async function(pitch, yaw, existingHotspot = null) {
const token = localStorage.getItem('jwt');
if (!token) {
alert('Vui lòng đăng nhập để thực hiện thao tác này.');
return;
}
const modal = document.getElementById('hotspot-modal');
const form = document.getElementById('hotspot-form');
// Reset form và gán tọa độ
form.reset();
switchHSTab('select'); // Luôn mặc định về tab chọn ảnh có sẵn khi mở modal
document.getElementById('hs-pitch').value = pitch;
document.getElementById('hs-yaw').value = yaw;
document.getElementById('hs-id').value = existingHotspot ? existingHotspot._id : '';
document.getElementById('hotspot-modal-title').innerText = existingHotspot ? 'Cập nhật điểm điều hướng' : 'Thêm điểm điều hướng mới';
// Lấy danh sách Scene có sẵn để đổ vào dropdown
try {
const res = await fetch(`${API_BASE_URL}/scenes`, { headers: { 'Authorization': `Bearer ${token}` } });
const scenes = await res.json();
const select = document.getElementById('hs-target-id');
select.innerHTML = '<option value="">-- Chọn một cảnh để liên kết --</option>';
scenes.forEach(s => {
if (s._id !== currentSceneId) { // Không liên kết tới chính nó
select.innerHTML += `<option value="${s._id}">${s.title}</option>`;
}
});
// QUAN TRỌNG: Chỉ điền dữ liệu hotspot cũ SAU KHI dropdown đã được nạp đầy đủ options
if (existingHotspot) {
document.getElementById('hs-title').value = existingHotspot.text || '';
document.getElementById('hs-desc').value = existingHotspot.description || '';
if (existingHotspot.targetSceneId) {
select.value = existingHotspot.targetSceneId;
}
}
} catch (e) { console.error("Lỗi nạp danh sách scene:", e); }
modal.style.display = 'flex';
// Xử lý sự kiện submit form
form.onsubmit = async (e) => {
e.preventDefault();
const formData = new FormData(form);
// Logic: Nếu chọn upload file mới, tạo Scene trước
let finalTargetId = formData.get('targetSceneId');
const file = document.getElementById('hs-panorama-file').files[0];
if (file) {
const sceneData = new FormData();
sceneData.append('panorama', file);
sceneData.append('title', formData.get('title'));
const gpsMode = document.getElementById('hs-gps-mode').value;
if (gpsMode === 'manual') {
sceneData.append('lat', document.getElementById('hs-lat').value);
sceneData.append('lng', document.getElementById('hs-lng').value);
} else if (gpsMode === 'inherit') {
sceneData.append('lat', document.getElementById('modal-lat').value);
sceneData.append('lng', document.getElementById('modal-lng').value);
}
uploadWithProgress(`${API_BASE_URL}/scenes`, 'POST', sceneData, token, 'hs', async (sceneRes) => {
await saveHotspotToDB(pitch, yaw, formData.get('title'), formData.get('description'), sceneRes.scene._id, existingHotspot?._id);
closeHotspotModal();
});
return; // Dừng luồng cũ vì uploadWithProgress đã tiếp quản
}
// Lưu Hotspot
await saveHotspotToDB(pitch, yaw, formData.get('title'), formData.get('description'), finalTargetId, existingHotspot?._id);
modal.style.display = 'none';
};
};
/**
* Đóng Modal biên tập Hotspot
*/
function closeHotspotModal() {
document.getElementById('hotspot-modal').style.display = 'none';
}
/**
* Chuyển đổi giữa tab Chọn ảnh có sẵn và Tải ảnh mới
*/
function switchHSTab(tabName) {
const selectTab = document.getElementById('hs-tab-select');
const uploadTab = document.getElementById('hs-tab-upload');
const btns = document.querySelectorAll('.tab-btn');
btns.forEach(btn => btn.classList.remove('active'));
if (tabName === 'select') {
selectTab.style.display = 'block';
uploadTab.style.display = 'none';
btns[0].classList.add('active');
document.getElementById('hs-panorama-file').value = ''; // Reset file input
} else {
selectTab.style.display = 'none';
uploadTab.style.display = 'block';
btns[1].classList.add('active');
document.getElementById('hs-target-id').value = ''; // Reset select
}
}
/**
* Ẩn/hiện input nhập GPS thủ công
*/
function toggleManualGPS() {
const mode = document.getElementById('hs-gps-mode').value;
const manualDiv = document.getElementById('hs-manual-gps');
manualDiv.style.display = mode === 'manual' ? 'block' : 'none';
}
/**
* Gửi dữ liệu lưu Hotspot lên Backend
*/
async function saveHotspotToDB(pitch, yaw, text, description, targetSceneId, hotspotId) {
const token = localStorage.getItem('jwt');
try {
const response = await fetch(`${API_BASE_URL}/scenes/${currentSceneId}/hotspots`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({
hotspotId,
pitch,
yaw,
text,
description,
targetSceneId
})
});
const data = await response.json();
if (!response.ok) throw new Error(data.message || 'Lỗi khi lưu hotspot');
alert('Lưu điểm điều hướng thành công!');
// Refresh lại scene hiện tại để cập nhật viewer
// Chúng ta cần lấy lại thông tin scene để có assetId mới nếu có
const res = await fetch(`${API_BASE_URL}/scenes/${currentSceneId}`, {
headers: { 'Authorization': `Bearer ${token}` }
});
const updatedScene = await res.json();
let secureImageUrl = `${API_BASE_URL}/assets/view/${updatedScene.assetId._id}?token=${token}`;
// Buộc nạp lại để cập nhật danh sách hotspot mới
openScene(currentSceneId, updatedScene.privacy, updatedScene.shareToken || '', true);
} catch (error) {
console.error(error);
alert(error.message);
}
}
frontend/js/viewer360.js
+62 -8
View File
@@ -1,10 +1,13 @@
let activeViewer = null;
let currentHotspots = [];
/**
* Initializes and shows the Pannellum 360° panorama viewer with security overlays.
* @param {string} imageUrl - Authorized URL to fetch the secure image stream
* @param {Array} hotspots - List of hotspots from the database
*/
function initPanoramaViewer(imageUrl) {
function initPanoramaViewer(imageUrl, hotspots = []) {
currentHotspots = hotspots;
const container = document.getElementById('viewer-container');
container.style.display = 'block';
@@ -14,6 +17,21 @@ function initPanoramaViewer(imageUrl) {
} catch (e) {}
}
// Chuyển đổi dữ liệu hotspots từ DB sang định dạng Pannellum
const pannellumHotspots = hotspots.map(h => ({
pitch: h.pitch,
yaw: h.yaw,
type: "info",
text: h.text || "Điểm điều hướng",
id: h._id,
clickHandlerFunc: () => {
if (h.targetSceneId) {
// Gọi hàm openScene từ main_map.js
openScene(h.targetSceneId);
}
}
}));
// Initialize Pannellum Equirectangular viewer
activeViewer = pannellum.viewer('panorama-viewer', {
"type": "equirectangular",
@@ -22,7 +40,9 @@ function initPanoramaViewer(imageUrl) {
"showControls": true,
"compass": false,
"mouseZoom": true,
"keyboardZoom": true
"keyboardZoom": true,
"crossOrigin": "anonymous",
"hotSpots": pannellumHotspots
});
// Security constraints inside the viewer
@@ -34,6 +54,12 @@ function initPanoramaViewer(imageUrl) {
*/
function closeViewer() {
document.getElementById('viewer-container').style.display = 'none';
// Xóa trạng thái Scene đang hoạt động khi đóng viewer
localStorage.removeItem('activeSceneId');
localStorage.removeItem('activeScenePrivacy');
localStorage.removeItem('activeSceneToken');
if (activeViewer) {
try {
activeViewer.destroy();
@@ -46,16 +72,44 @@ function closeViewer() {
* Appends event listeners to block right-clicks and common image saving shortcuts.
*/
function applyViewerSecurity() {
const viewer = document.getElementById('viewer-container');
// Target the actual viewer element where Pannellum renders
const container = document.getElementById('viewer-container');
const panoramaViewer = document.getElementById('panorama-viewer');
// Block right-clicks inside the 3D Viewer Container
viewer.addEventListener('contextmenu', (e) => {
const handleContextMenu = (e) => {
e.preventDefault();
alert('Security Alert: Direct image downloading or copying is disabled on this asset.');
});
e.stopPropagation();
e.stopImmediatePropagation();
// Nếu viewer đang hoạt động, lấy tọa độ Pitch/Yaw tại điểm click
if (activeViewer) {
// Lấy tọa độ cầu (Pitch/Yaw) từ điểm click chuột
const coords = activeViewer.mouseEventToCoords(e);
if (!coords) return;
const pitch = coords[0];
const yaw = coords[1];
// Kiểm tra xem có hotspot nào gần điểm click không (ngưỡng 2 độ)
const existing = currentHotspots.find(h =>
Math.abs(h.pitch - pitch) < 2 && Math.abs(h.yaw - yaw) < 2
);
if (typeof window.handleHotspotCreation === 'function') {
window.handleHotspotCreation(pitch, yaw, existing);
} else {
console.log(`Coordinates captured: Pitch ${pitch}, Yaw ${yaw}`);
}
}
return false;
};
// Sử dụng capture phase (true) để bắt sự kiện trước khi nó chạm đến Pannellum
container.addEventListener('contextmenu', handleContextMenu, true);
panoramaViewer.addEventListener('contextmenu', handleContextMenu, true);
// Block drag and drop
viewer.addEventListener('dragstart', (e) => {
container.addEventListener('dragstart', (e) => {
e.preventDefault();
});
}