292 lines
8.5 KiB
JavaScript
292 lines
8.5 KiB
JavaScript
const API_BASE_URL = 'http://localhost:5000/api';
|
|
|
|
let map;
|
|
let tempMarker = null;
|
|
|
|
// Initialize when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initMap();
|
|
checkAuthStatus();
|
|
loadScenes();
|
|
});
|
|
|
|
/**
|
|
* Initializes the full-screen Leaflet Map
|
|
*/
|
|
function initMap() {
|
|
// Center of map defaults to Hanoi
|
|
map = L.map('map').setView([21.0285, 105.8542], 13);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
// Event listener for right-click on map to open modal
|
|
map.on('contextmenu', (e) => {
|
|
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);
|
|
|
|
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');
|
|
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-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 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 data = await response.json();
|
|
if (!response.ok) throw new Error(data.message || 'Failed to save scene');
|
|
|
|
alert('Scene created successfully!');
|
|
closeModal();
|
|
loadScenes();
|
|
} catch (error) {
|
|
alert(error.message);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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();
|
|
|
|
// 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);
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error('Error loading scenes:', error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fetches secure scene details and triggers the Panorama viewer
|
|
*/
|
|
async function openScene(sceneId, privacy, shareToken) {
|
|
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}`;
|
|
}
|
|
|
|
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');
|
|
|
|
// Construct secure image URL passing shareToken if applicable
|
|
let secureImageUrl = `${API_BASE_URL}/assets/view/${scene.assetId._id}`;
|
|
if (privacy === 'shared' && scene.shareToken) {
|
|
secureImageUrl += `?token=${scene.shareToken}`;
|
|
}
|
|
|
|
// Initialize 3D Viewer with secure, referer-protected image stream
|
|
initPanoramaViewer(secureImageUrl);
|
|
|
|
} catch (error) {
|
|
alert(error.message);
|
|
}
|
|
}
|