20260607 - login, add scene, add hotspot

frontend/index.html

@@ -39,6 +39,8 @@
             <span class="close-btn" onclick="closeModal()">&times;</span>
             <h2>Create New 3D Scene</h2>
             <form id="create-scene-form" onsubmit="submitScene(event)">
+                <!-- Hidden field for editing existing scene -->
+                <input type="hidden" id="modal-scene-id" name="sceneId">
                 <div class="form-group">
                     <label>Selected Coordinates:</label>
                     <div style="display: flex; gap: 10px;">
@@ -73,10 +75,89 @@
     </div>
 
     <!-- 3D Panorama Viewer Container -->
-    <div id="viewer-container" style="display: none;">
+    <div id="viewer-container" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; background: #000;">
         <div id="panorama-viewer"></div>
         <button id="close-viewer-btn" onclick="closeViewer()">Close 3D View</button>
     </div>
+    <!-- Hotspot Editor Modal -->
+    <div id="hotspot-modal" class="modal-overlay" style="display: none; z-index: 3000;">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="hotspot-modal-title">Biên tập điểm điều hướng</h3>
+                <span class="close-btn" onclick="closeHotspotModal()">&times;</span>
+            </div>
+            
+            <form id="hotspot-form">
+                <!-- Tọa độ ẩn để xử lý GPS và vị trí -->
+                <input type="hidden" id="hs-pitch">
+                <input type="hidden" id="hs-yaw">
+                <input type="hidden" id="hs-id">
+
+                <div class="form-group">
+                    <label for="hs-title">Tiêu đề (Label)</label>
+                    <input type="text" id="hs-title" name="title" placeholder="Ví dụ: Cổng vào, Phòng khách..." required>
+                </div>
+
+                <div class="form-group">
+                    <label for="hs-desc">Mô tả chi tiết</label>
+                    <textarea id="hs-desc" name="description" rows="3" placeholder="Thông tin thêm về vị trí này..."></textarea>
+                </div>
+
+                <div class="form-group divider">
+                    <label>Liên kết tới ảnh 3D khác:</label>
+                    <div class="tab-container">
+                        <button type="button" class="tab-btn active" onclick="switchHSTab('select')">Chọn ảnh có sẵn</button>
+                        <button type="button" class="tab-btn" onclick="switchHSTab('upload')">Tải ảnh mới lên</button>
+                    </div>
+                </div>
+
+                <!-- Tab 1: Chọn ảnh có sẵn -->
+                <div id="hs-tab-select" class="tab-content">
+                    <label for="hs-target-id">Danh sách Scene của bạn:</label>
+                    <select id="hs-target-id" name="targetSceneId">
+                        <option value="">-- Chọn một cảnh để liên kết --</option>
+                        <!-- Sẽ được fill bằng JS -->
+                    </select>
+                </div>
+
+                <!-- Tab 2: Tải ảnh mới -->
+                <div id="hs-tab-upload" class="tab-content" style="display: none;">
+                    <label for="hs-panorama-file">Chọn ảnh Panorama 360°:</label>
+                    <input type="file" id="hs-panorama-file" name="panorama-file" accept="image/*">
+                    
+                    <div class="gps-inheritance">
+                        <label>Xử lý GPS cho ảnh mới:</label>
+                        <select id="hs-gps-mode" onchange="toggleManualGPS()">
+                            <option value="auto">Đọc từ EXIF ảnh (Mặc định)</option>
+                            <option value="inherit">Lấy GPS của cảnh hiện tại</option>
+                            <option value="manual">Nhập thủ công</option>
+                        </select>
+                        
+                        <div id="hs-manual-gps" style="display: none; margin-top: 10px;">
+                            <input type="number" step="any" id="hs-lat" placeholder="Latitude">
+                            <input type="number" step="any" id="hs-lng" placeholder="Longitude">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Progress Bar for Hotspot Upload -->
+                <div id="hs-progress-container" style="display: none; margin-bottom: 15px;">
+                    <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px;">
+                        <span id="hs-progress-status">Uploading image...</span>
+                        <span id="hs-progress-percent">0%</span>
+                    </div>
+                    <div style="width: 100%; height: 8px; background: #eee; border-radius: 4px; overflow: hidden;">
+                        <div id="hs-progress-bar" style="width: 0%; height: 100%; background: #007bff; transition: width 0.3s;"></div>
+                    </div>
+                </div>
+
+                <div class="modal-footer">
+                    <button type="button" class="cancel-btn" onclick="closeHotspotModal()">Hủy</button>
+                    <button type="submit" class="save-btn">Lưu điểm điều hướng</button>
+                </div>
+            </form>
+        </div>
+    </div>
 
     <!-- Leaflet JS -->
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>