gogo2/TESTCASES/web/templates/components/control_panel.html

<div class="card control-panel mb-3">
    <div class="card-header">
        <h6 class="mb-0">
            <i class="fas fa-sliders-h"></i>
            Controls
        </h6>
    </div>
    <div class="card-body">
        <!-- Symbol Selection -->
        <div class="mb-3">
            <label for="symbol-select" class="form-label">Symbol</label>
            <select class="form-select form-select-sm" id="symbol-select">
                <option value="ETH/USDT" selected>ETH/USDT</option>
                <option value="BTC/USDT">BTC/USDT</option>
            </select>
        </div>
        
        <!-- Timeframe Selection -->
        <div class="mb-3">
            <label class="form-label">Timeframes</label>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="tf-1s" value="1s" checked>
                <label class="form-check-label" for="tf-1s">1 Second</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="tf-1m" value="1m" checked>
                <label class="form-check-label" for="tf-1m">1 Minute</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="tf-1h" value="1h" checked>
                <label class="form-check-label" for="tf-1h">1 Hour</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="tf-1d" value="1d" checked>
                <label class="form-check-label" for="tf-1d">1 Day</label>
            </div>
        </div>
        
        <!-- Time Navigation -->
        <div class="mb-3">
            <label for="date-picker" class="form-label">Navigate to Date</label>
            <input type="datetime-local" class="form-control form-control-sm" id="date-picker">
            <button class="btn btn-primary btn-sm w-100 mt-2" id="goto-date-btn">
                <i class="fas fa-calendar-day"></i>
                Go to Date
            </button>
        </div>
        
        <!-- Time Range Selector -->
        <div class="mb-3">
            <label class="form-label">Quick Range</label>
            <div class="btn-group-vertical w-100" role="group">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-range="1h">1 Hour</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" data-range="4h">4 Hours</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" data-range="1d">1 Day</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" data-range="1w">1 Week</button>
            </div>
        </div>
        
        <!-- Navigation Buttons -->
        <div class="mb-3">
            <label class="form-label">Navigate</label>
            <div class="btn-group w-100" role="group">
                <button type="button" class="btn btn-sm btn-outline-primary" id="nav-backward-btn" title="Backward">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button type="button" class="btn btn-sm btn-outline-primary" id="nav-now-btn" title="Now">
                    <i class="fas fa-clock"></i>
                </button>
                <button type="button" class="btn btn-sm btn-outline-primary" id="nav-forward-btn" title="Forward">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
        
        <!-- Annotation Mode -->
        <div class="mb-3">
            <label class="form-label">Annotation Mode</label>
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="annotation-mode-toggle" checked>
                <label class="form-check-label" for="annotation-mode-toggle">
                    <span id="annotation-mode-label">Enabled</span>
                </label>
            </div>
            <small class="text-muted">Click charts to mark trades</small>
        </div>
        
        <!-- Current Annotation Status -->
        <div class="mb-3" id="pending-annotation-status" style="display: none;">
            <div class="alert alert-info py-2 px-2 mb-0">
                <small>
                    <i class="fas fa-info-circle"></i>
                    <strong>Entry marked</strong><br>
                    Click to mark exit point
                </small>
            </div>
        </div>
    </div>
</div>

<script>
    // Symbol selection
    document.getElementById('symbol-select').addEventListener('change', function(e) {
        appState.currentSymbol = e.target.value;
        loadInitialData();
    });
    
    // Timeframe checkboxes
    document.querySelectorAll('.form-check-input[id^="tf-"]').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const timeframes = Array.from(document.querySelectorAll('.form-check-input[id^="tf-"]:checked'))
                .map(cb => cb.value);
            appState.currentTimeframes = timeframes;
            loadInitialData();
        });
    });
    
    // Date picker navigation
    document.getElementById('goto-date-btn').addEventListener('click', function() {
        const dateValue = document.getElementById('date-picker').value;
        if (dateValue && appState.timeNavigator) {
            const timestamp = new Date(dateValue).getTime();
            appState.timeNavigator.navigateToTime(timestamp);
        }
    });
    
    // Quick range buttons
    document.querySelectorAll('[data-range]').forEach(button => {
        button.addEventListener('click', function() {
            const range = this.getAttribute('data-range');
            if (appState.timeNavigator) {
                appState.timeNavigator.setTimeRange(range);
            }
        });
    });
    
    // Navigation buttons
    document.getElementById('nav-backward-btn').addEventListener('click', function() {
        if (appState.timeNavigator) {
            appState.timeNavigator.scrollBackward();
        }
    });
    
    document.getElementById('nav-now-btn').addEventListener('click', function() {
        if (appState.timeNavigator) {
            appState.timeNavigator.navigateToNow();
        }
    });
    
    document.getElementById('nav-forward-btn').addEventListener('click', function() {
        if (appState.timeNavigator) {
            appState.timeNavigator.scrollForward();
        }
    });
    
    // Annotation mode toggle
    document.getElementById('annotation-mode-toggle').addEventListener('change', function(e) {
        const label = document.getElementById('annotation-mode-label');
        if (e.target.checked) {
            label.textContent = 'Enabled';
            if (appState.annotationManager) {
                appState.annotationManager.enable();
            }
        } else {
            label.textContent = 'Disabled';
            if (appState.annotationManager) {
                appState.annotationManager.disable();
            }
        }
    });
</script>