Add mock mode for web UI development and testing

- Add mock data module with simulated camera search and stream discovery
- Enable mock mode via ?mock=true URL parameter
- Show MOCK MODE indicator when enabled
- Remove statistics cards from discovery screen, keep only progress bar
- Mock mode works independently from Go backend for easier UI testing
This commit is contained in:
eduard256
2025-11-21 22:40:38 +03:00
parent 8036d3e9be
commit 8bf92e6598
5 changed files with 265 additions and 19 deletions
+32 -2
View File
@@ -8,8 +8,12 @@ import { showToast } from './utils/toast.js';
class StrixApp {
constructor() {
this.cameraAPI = new CameraSearchAPI();
this.streamAPI = new StreamDiscoveryAPI();
// Check if mock mode is enabled via URL parameter (?mock=true)
const urlParams = new URLSearchParams(window.location.search);
const useMock = urlParams.get('mock') === 'true';
this.cameraAPI = new CameraSearchAPI(null, useMock);
this.streamAPI = new StreamDiscoveryAPI(null, useMock);
this.searchForm = new SearchForm();
this.carousel = new StreamCarousel();
@@ -20,6 +24,7 @@ class StrixApp {
this.selectedMainStream = null;
this.selectedSubStream = null;
this.isSelectingSubStream = false;
this.useMock = useMock;
this.init();
}
@@ -27,6 +32,31 @@ class StrixApp {
init() {
this.setupEventListeners();
this.showScreen('address');
// Show mock mode indicator if enabled
if (this.useMock) {
this.showMockIndicator();
}
}
showMockIndicator() {
const indicator = document.createElement('div');
indicator.id = 'mock-indicator';
indicator.style.cssText = `
position: fixed;
top: 10px;
right: 10px;
background: #7E57C2;
color: white;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
z-index: 9999;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
`;
indicator.textContent = 'MOCK MODE';
document.body.appendChild(indicator);
}
setupEventListeners() {