628 lines
22 KiB
JavaScript
628 lines
22 KiB
JavaScript
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() {
|
|
// Đọ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);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Checks if user is logged in (via localStorage JWT) and updates UI
|
|
*/
|
|
function checkAuthStatus() {
|
|
const token = localStorage.getItem('jwt');
|
|
const username = localStorage.getItem('username');
|
|
const role = localStorage.getItem('role');
|
|
|
|
const authGuest = document.getElementById('auth-guest');
|
|
const authLoggedIn = document.getElementById('auth-logged-in');
|
|
|
|
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';
|
|
} else {
|
|
authGuest.style.display = 'block';
|
|
authLoggedIn.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handles user login
|
|
*/
|
|
async function handleLogin() {
|
|
const username = document.getElementById('username-input').value.trim();
|
|
const password = document.getElementById('password-input').value.trim();
|
|
|
|
if (!username || !password) {
|
|
alert('Please fill in both fields');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/auth/login`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (!response.ok) throw new Error(data.message || 'Login failed');
|
|
|
|
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
|
|
alert('Logged in successfully!');
|
|
} catch (error) {
|
|
alert(error.message);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handles user registration
|
|
*/
|
|
async function handleRegister() {
|
|
const username = document.getElementById('username-input').value.trim();
|
|
const password = document.getElementById('password-input').value.trim();
|
|
|
|
if (!username || !password) {
|
|
alert('Please fill in both fields');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/auth/register`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password, role: 'Thành viên' })
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (!response.ok) throw new Error(data.message || 'Registration failed');
|
|
|
|
alert('Registration successful! You can now log in.');
|
|
} catch (error) {
|
|
alert(error.message);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handles user logout
|
|
*/
|
|
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');
|
|
}
|
|
|
|
/**
|
|
* Opens Modal for creating a Scene and sets lat/lng inputs
|
|
*/
|
|
function openCreateSceneModal(lat, lng) {
|
|
const token = localStorage.getItem('jwt');
|
|
if (!token) {
|
|
alert('Please log in first to create a 3D scene.');
|
|
return;
|
|
}
|
|
|
|
// Place a temporary marker on the map
|
|
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';
|
|
}
|
|
|
|
/**
|
|
* Closes the Create Scene Modal and removes temporary marker
|
|
*/
|
|
function closeModal() {
|
|
document.getElementById('create-scene-modal').style.display = 'none';
|
|
if (tempMarker) {
|
|
map.removeLayer(tempMarker);
|
|
tempMarker = null;
|
|
}
|
|
document.getElementById('create-scene-form').reset();
|
|
document.getElementById('shared-with-group').style.display = 'none';
|
|
}
|
|
|
|
/**
|
|
* Toggles visibility of the shared users input based on privacy selection
|
|
*/
|
|
function toggleSharedUsers() {
|
|
const privacy = document.getElementById('modal-privacy').value;
|
|
const group = document.getElementById('shared-with-group');
|
|
if (privacy === 'shared') {
|
|
group.style.display = 'block';
|
|
} else {
|
|
group.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Form submission for Scene creation (multipart/form-data)
|
|
*/
|
|
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');
|
|
|
|
const url = sceneId ? `${API_BASE_URL}/scenes/${sceneId}` : `${API_BASE_URL}/scenes`;
|
|
const method = sceneId ? 'PUT' : 'POST';
|
|
|
|
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();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 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);
|
|
}
|
|
|
|
/**
|
|
* Loads and displays visible Scenes on the map
|
|
*/
|
|
async function loadScenes() {
|
|
try {
|
|
const token = localStorage.getItem('jwt');
|
|
const headers = {};
|
|
if (token) {
|
|
headers['Authorization'] = `Bearer ${token}`;
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE_URL}/scenes`, {
|
|
method: 'GET',
|
|
headers
|
|
});
|
|
|
|
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) {
|
|
map.removeLayer(layer);
|
|
}
|
|
});
|
|
|
|
// Add Markers for each scene
|
|
scenes.forEach((scene) => {
|
|
const marker = L.marker([scene.lat, scene.lng]).addTo(map);
|
|
|
|
// Generate Popup content with a View button
|
|
let popupContent = `
|
|
<div class="popup-box">
|
|
<h4>${scene.title}</h4>
|
|
<p>Owner: <strong>${scene.owner ? scene.owner.username : 'Unknown'}</strong></p>
|
|
<p>Privacy: <span class="badge">${scene.privacy.toUpperCase()}</span></p>
|
|
<button class="view-btn" onclick="openScene('${scene._id}', '${scene.privacy}', '${scene.shareToken || ''}')">View 360° Panorama</button>
|
|
</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) {
|
|
console.error('Error loading scenes:', error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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, 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 = {};
|
|
if (token) {
|
|
headers['Authorization'] = `Bearer ${token}`;
|
|
}
|
|
|
|
let url = `${API_BASE_URL}/scenes/${sceneId}`;
|
|
if (privacy === 'shared' && 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
|
|
});
|
|
|
|
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}`;
|
|
|
|
// Ư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, 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);
|
|
}
|
|
}
|